Skip to content

Commit 5956f40

Browse files
TechQueryTechQuery
committed
[refactor] update Carousel, DropMenu, ListGroup & Nav components
1 parent fd7ffbc commit 5956f40

File tree

5 files changed

+862
-714
lines changed

5 files changed

+862
-714
lines changed

‎document/source/components/Carousel.mdx‎

Lines changed: 80 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: A slideshow component for cycling through elements—images or slid
55
group: Components
66
---
77

8-
import { CarouselView } from 'boot-cell/source/Media/Carousel';
8+
import { CarouselView, CarouselItem } from 'boot-cell/source/Media/Carousel';
99

1010
import { Example } from '../../../source/component/Example';
1111

@@ -32,27 +32,23 @@ While carousels support previous/next controls and indicators, they’re not exp
3232
Here’s a carousel with slides only.
3333

3434
<Example>
35-
<CarouselView
36-
list={[
37-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
38-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
39-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
40-
]}
41-
/>
35+
<CarouselView>
36+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
37+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
38+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
39+
</CarouselView>
4240
</Example>
4341

4442
```TSX
4543
import { render, createCell } from 'web-cell';
46-
import { CarouselView } from 'boot-cell/source/Media/Carousel';
44+
import { CarouselView, CarouselItem } from 'boot-cell/source/Media/Carousel';
4745

4846
render(
49-
<CarouselView
50-
list={[
51-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
52-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
53-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
54-
]}
55-
/>
47+
<CarouselView>
48+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
49+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
50+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
51+
</CarouselView>
5652
);
5753
```
5854

@@ -61,29 +57,23 @@ render(
6157
Adding in the previous and next controls:
6258

6359
<Example>
64-
<CarouselView
65-
controls
66-
list={[
67-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
68-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
69-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
70-
]}
71-
/>
60+
<CarouselView controls>
61+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
62+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
63+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
64+
</CarouselView>
7265
</Example>
7366

7467
```TSX
7568
import { render, createCell } from 'web-cell';
76-
import { CarouselView } from 'boot-cell/source/Media/Carousel';
69+
import { CarouselView, CarouselItem } from 'boot-cell/source/Media/Carousel';
7770

7871
render(
79-
<CarouselView
80-
controls
81-
list={[
82-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
83-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
84-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
85-
]}
86-
/>
72+
<CarouselView controls>
73+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
74+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
75+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
76+
</CarouselView>
8777
);
8878
```
8979

@@ -92,31 +82,23 @@ render(
9282
You can also add the indicators to the carousel, alongside the controls, too.
9383

9484
<Example>
95-
<CarouselView
96-
controls
97-
indicators
98-
list={[
99-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
100-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
101-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
102-
]}
103-
/>
85+
<CarouselView controls indicators>
86+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
87+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
88+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
89+
</CarouselView>
10490
</Example>
10591

10692
```TSX
10793
import { render, createCell } from 'web-cell';
108-
import { CarouselView } from 'boot-cell/source/Media/Carousel';
94+
import { CarouselView, CarouselItem } from 'boot-cell/source/Media/Carousel';
10995

11096
render(
111-
<CarouselView
112-
controls
113-
indicators
114-
list={[
115-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
116-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
117-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
118-
]}
119-
/>
97+
<CarouselView controls indicators>
98+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
99+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
100+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
101+
</CarouselView>
120102
);
121103
```
122104

@@ -127,55 +109,47 @@ They can be easily hidden on smaller viewports, as shown below, with optional [d
127109
We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
128110

129111
<Example>
130-
<CarouselView
131-
controls
132-
indicators
133-
list={[
134-
{
135-
image: 'https://tech-query.me/medias/featureimages/6.jpg',
136-
title: 'Mountain',
137-
detail: 'A description sample'
138-
},
139-
{
140-
image: 'https://tech-query.me/medias/featureimages/7.jpg',
141-
title: 'River',
142-
detail: 'A description sample'
143-
},
144-
{
145-
image: 'https://tech-query.me/medias/featureimages/21.jpg',
146-
title: 'Lake',
147-
detail: 'A description sample'
148-
}
149-
]}
150-
/>
112+
<CarouselView controls indicators>
113+
<CarouselItem
114+
image="https://tech-query.me/medias/featureimages/6.jpg"
115+
title="Mountain"
116+
detail="A description sample"
117+
/>
118+
<CarouselItem
119+
image="https://tech-query.me/medias/featureimages/7.jpg"
120+
title="River"
121+
detail="A description sample"
122+
/>
123+
<CarouselItem
124+
image="https://tech-query.me/medias/featureimages/21.jpg"
125+
title="Lake"
126+
detail="A description sample"
127+
/>
128+
</CarouselView>
151129
</Example>
152130

153131
```TSX
154132
import { render, createCell } from 'web-cell';
155-
import { CarouselView } from 'boot-cell/source/Media/Carousel';
133+
import { CarouselView, CarouselItem } from 'boot-cell/source/Media/Carousel';
156134

157135
render(
158-
<CarouselView
159-
controls
160-
indicators
161-
list={[
162-
{
163-
image: 'https://tech-query.me/medias/featureimages/6.jpg',
164-
title: 'Mountain',
165-
detail: 'A description sample'
166-
},
167-
{
168-
image: 'https://tech-query.me/medias/featureimages/7.jpg',
169-
title: 'River',
170-
detail: 'A description sample'
171-
},
172-
{
173-
image: 'https://tech-query.me/medias/featureimages/21.jpg',
174-
title: 'Lake',
175-
detail: 'A description sample'
176-
}
177-
]}
178-
/>
136+
<CarouselView controls indicators>
137+
<CarouselItem
138+
image="https://tech-query.me/medias/featureimages/6.jpg"
139+
title="Mountain"
140+
detail="A description sample"
141+
/>
142+
<CarouselItem
143+
image="https://tech-query.me/medias/featureimages/7.jpg"
144+
title="River"
145+
detail="A description sample"
146+
/>
147+
<CarouselItem
148+
image="https://tech-query.me/medias/featureimages/21.jpg"
149+
title="Lake"
150+
detail="A description sample"
151+
/>
152+
</CarouselView>
179153
);
180154
```
181155

@@ -184,31 +158,23 @@ render(
184158
Add `mode="fade"` to your carousel to animate slides with a fade transition instead of a slide.
185159

186160
<Example>
187-
<CarouselView
188-
mode="fade"
189-
controls
190-
list={[
191-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
192-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
193-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
194-
]}
195-
/>
161+
<CarouselView mode="fade" controls>
162+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
163+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
164+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
165+
</CarouselView>
196166
</Example>
197167

198168
```TSX
199169
import { render, createCell } from 'web-cell';
200-
import { CarouselView } from 'boot-cell/source/Media/Carousel';
170+
import { CarouselView, CarouselItem } from 'boot-cell/source/Media/Carousel';
201171

202172
render(
203-
<CarouselView
204-
mode="fade"
205-
controls
206-
list={[
207-
{ image: 'https://tech-query.me/medias/featureimages/6.jpg' },
208-
{ image: 'https://tech-query.me/medias/featureimages/7.jpg' },
209-
{ image: 'https://tech-query.me/medias/featureimages/21.jpg' }
210-
]}
211-
/>
173+
<CarouselView mode="fade" controls>
174+
<CarouselItem image="https://tech-query.me/medias/featureimages/6.jpg" />
175+
<CarouselItem image="https://tech-query.me/medias/featureimages/7.jpg" />
176+
<CarouselItem image="https://tech-query.me/medias/featureimages/21.jpg" />
177+
</CarouselView>
212178
);
213179
```
214180

0 commit comments

Comments
 (0)