Skip to content

Commit bf065de

Browse files
shuga2704shuga2704
committed
feat(): update
1 parent d954709 commit bf065de

2 files changed

Lines changed: 251 additions & 18 deletions

File tree

‎packages/plasma-new-hope/src/components/Carousel/CarouselNew/Carousel.template-doc.mdx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
---
2+
id: carousel
3+
title: Carousel
4+
---
5+
6+
import { PropsTable, Description } from '@site/src/components';
7+
import Tabs from '@theme/Tabs';
8+
import TabItem from '@theme/TabItem';
9+
10+
# Carousel
11+
12+
<Description name="Carousel" />
13+
14+
```tsx
15+
export interface CarouselNewProps extends HTMLAttributes<HTMLDivElement> {
16+
/**
17+
* Номер слайда.
18+
* Controlled-режим.
19+
*/
20+
index?: number;
21+
/**
22+
* Callback для изменения слайда;
23+
*/
24+
onChangeIndex?: (index: number) => void;
25+
/**
26+
* Номер слайда по-умолчанию.
27+
* Только при uncontrolled-режиме.
28+
* @default 0
29+
*/
30+
defaultIndex?: number;
31+
/**
32+
* Центрирование активного элемента при скролле.
33+
* @default start
34+
*/
35+
scrollAlign?: ScrollAlign;
36+
/**
37+
* Опции управления пагинацией.
38+
*/
39+
paginationOptions?: {
40+
/**
41+
* Включение/выключение пагинации.
42+
* @default false
43+
*/
44+
disabled?: boolean;
45+
/**
46+
* Количество видимых точек пагинации.
47+
* @default 10
48+
*/
49+
visibleDots?: number;
50+
/**
51+
* Центрирование активной точки.
52+
* @default false
53+
*/
54+
centered?: boolean;
55+
};
56+
/**
57+
* Включение/выключение стрелок управления слайдами.
58+
* @default false
59+
*/
60+
controlArrowsDisabled?: boolean;
61+
/**
62+
* Отступ между слайдами.
63+
* @default 20px
64+
*/
65+
gap?: CSSProperties['gap'];
66+
/**
67+
* Зацикливание карусели.
68+
* При включении после последнего слайда идет первый, и наоборот.
69+
* @default false
70+
*/
71+
loop?: boolean;
72+
/**
73+
* Автоматическое пролистывание карусели.
74+
* @default false
75+
*/
76+
autoPlay?: boolean;
77+
/**
78+
* Интервал автоматического пролистывания в мс.
79+
* @default 5000
80+
*/
81+
autoPlayInterval?: number;
82+
/**
83+
* Включение свайпа/drag для touch- и pointer-устройств.
84+
* @default false
85+
*/
86+
swipeEnabled?: boolean;
87+
88+
/**
89+
* Размер контрола.
90+
*/
91+
size?: string;
92+
/**
93+
* Вид контрола.
94+
* @default default
95+
*/
96+
view?: string;
97+
}
98+
```
99+
100+
## Использование
101+
102+
`Carousel` принимает набор React-элементов и отображает их как горизонтальную ленту с прокруткой. Обычно в компонент передают карточки одинаковой или близкой ширины, чтобы переход между слайдами выглядел предсказуемо.
103+
104+
Для простого сценария достаточно передать элементы в `children`. Если нужно задать стартовый слайд один раз при инициализации, используйте `defaultIndex`. Если индексом нужно управлять снаружи, переключайте компонент в controlled-режим через `index` и `onChangeIndex`.
105+
106+
Для мобильных сценариев имеет смысл включать `swipeEnabled`, а если внешние кнопки навигации не нужны, можно скрыть встроенные стрелки через `controlArrowsDisabled`.
107+
108+
## Примеры
109+
110+
<Tabs>
111+
<TabItem value="basic" label="Basic" default>
112+
```tsx live
113+
import React from 'react';
114+
import { Carousel } from '@salutejs/{{ package }}';
115+
import styled from 'styled-components';
116+
117+
export function App() {
118+
const StyledCard = styled.div`
119+
display: flex;
120+
align-items: center;
121+
justify-content: center;
122+
border: 1px solid #d6d6d6;
123+
border-radius: 12px;
124+
width: 320px;
125+
height: 180px;
126+
background-color: #f4f5f7;
127+
color: #1b1f23;
128+
font-size: 20px;
129+
font-weight: 600;
130+
`;
131+
132+
const items = Array(10).fill(0).map((_, i) => `Слайд ${i + 1}`);
133+
134+
return (
135+
<div style={{ display: 'block', width: '500px' }}>
136+
<Carousel gap="16px">
137+
{items.map((item) => (
138+
<StyledCard key={item}>{item}</StyledCard>
139+
))}
140+
</Carousel>
141+
</div>
142+
);
143+
}
144+
```
145+
</TabItem>
146+
<TabItem value="pagination" label="Pagination">
147+
```tsx live
148+
import React from 'react';
149+
import { Carousel } from '@salutejs/{{ package }}';
150+
import styled from 'styled-components';
151+
152+
export function App() {
153+
const StyledCard = styled.div`
154+
display: flex;
155+
align-items: center;
156+
justify-content: center;
157+
border: 1px solid #d6d6d6;
158+
border-radius: 12px;
159+
width: 320px;
160+
height: 180px;
161+
background-color: #f4f5f7;
162+
color: #1b1f23;
163+
font-size: 20px;
164+
font-weight: 600;
165+
`;
166+
167+
const items = Array(10).fill(0).map((_, i) => `Слайд ${i + 1}`);
168+
169+
return (
170+
<div style={{ display: 'block', width: '500px' }}>
171+
<Carousel paginationOptions={{ visibleDots: 4, centered: true }} gap="16px">
172+
{items.map((item) => (
173+
<StyledCard key={item}>{item}</StyledCard>
174+
))}
175+
</Carousel>
176+
</div>
177+
);
178+
}
179+
```
180+
</TabItem>
181+
<TabItem value="loop-autoplay" label="Loop / AutoPlay">
182+
```tsx live
183+
import React from 'react';
184+
import { Carousel } from '@salutejs/{{ package }}';
185+
import styled from 'styled-components';
186+
187+
export function App() {
188+
const StyledCard = styled.div`
189+
display: flex;
190+
align-items: center;
191+
justify-content: center;
192+
border: 1px solid #d6d6d6;
193+
border-radius: 12px;
194+
width: 320px;
195+
height: 180px;
196+
background-color: #f4f5f7;
197+
color: #1b1f23;
198+
font-size: 20px;
199+
font-weight: 600;
200+
`;
201+
202+
const items = Array(10).fill(0).map((_, i) => `Слайд ${i + 1}`);
203+
204+
return (
205+
<div style={{ display: 'block', width: '500px' }}>
206+
<Carousel loop autoPlay autoPlayInterval={2500} gap="16px">
207+
{items.map((item) => (
208+
<StyledCard key={item}>{item}</StyledCard>
209+
))}
210+
</Carousel>
211+
</div>
212+
);
213+
}
214+
```
215+
</TabItem>
216+
<TabItem value="swipe" label="Swipe">
217+
```tsx live
218+
import React from 'react';
219+
import { Carousel } from '@salutejs/{{ package }}';
220+
import styled from 'styled-components';
221+
222+
export function App() {
223+
const StyledCard = styled.div`
224+
display: flex;
225+
align-items: center;
226+
justify-content: center;
227+
border: 1px solid #d6d6d6;
228+
border-radius: 12px;
229+
width: 320px;
230+
height: 180px;
231+
background-color: #f4f5f7;
232+
color: #1b1f23;
233+
font-size: 20px;
234+
font-weight: 600;
235+
`;
236+
237+
const items = Array(10).fill(0).map((_, i) => `Слайд ${i + 1}`);
238+
239+
return (
240+
<div style={{ display: 'block', width: '500px' }}>
241+
<Carousel swipeEnabled gap="16px">
242+
{items.map((item) => (
243+
<StyledCard key={item}>{item}</StyledCard>
244+
))}
245+
</Carousel>
246+
</div>
247+
);
248+
}
249+
```
250+
</TabItem>
251+
</Tabs>

‎utils/plasma-sb-utils/src/components/Carousel/meta.ts‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -92,23 +92,5 @@ export const createMeta = ({
9292
...additionalArgTypes,
9393
...disableProps([...disablePropsList]),
9494
},
95-
// parameters: {
96-
// controls: {
97-
// include: [
98-
// 'scrollAlign',
99-
// 'visibleDots',
100-
// 'slides',
101-
// 'controlArrowsDisabled',
102-
// 'loop',
103-
// 'autoPlay',
104-
// 'autoPlayInterval',
105-
// 'swipeEnabled',
106-
// 'paginationDisabled',
107-
// 'paginationCentered',
108-
// 'gap',
109-
// 'defaultIndex',
110-
// ],
111-
// },
112-
// },
11395
};
11496
};

0 commit comments

Comments
 (0)