Skip to content

Commit 598ec1d

Browse files
D-LiteD-Lite
authored
Wrap component (#49)
* feat: wrap component documentation * refactor: change name casing wrap * refactor: change name casing wrap
1 parent 6084acc commit 598ec1d

File tree

5 files changed

+292
-0
lines changed

5 files changed

+292
-0
lines changed

‎components/content/examples/wrap/AlignWrap.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<CWrap spacing='30px' align='center'>
3+
<CWrapItem>
4+
<CCenter w='180px' h='80px' bg='red.200'>
5+
Box 1
6+
</CCenter>
7+
</CWrapItem>
8+
<CWrapItem>
9+
<CCenter w='180px' h='40px' bg='green.200'>
10+
Box 2
11+
</CCenter>
12+
</CWrapItem>
13+
<CWrapItem>
14+
<CCenter w='180px' h='80px' bg='tomato'>
15+
Box 3
16+
</CCenter>
17+
</CWrapItem>
18+
<CWrapItem>
19+
<CCenter w='180px' h='60px' bg='blue.200'>
20+
Box 4
21+
</CCenter>
22+
</CWrapItem>
23+
<CWrapItem>
24+
<CCenter w='180px' h='80px' bg='purple.200'>
25+
Box 5
26+
</CCenter>
27+
</CWrapItem>
28+
</CWrap>
29+
</template>

‎components/content/examples/wrap/JustifyWrap.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<CWrap spacing='30px' justify='center'>
3+
<CWrapItem>
4+
<CCenter w='180px' h='80px' bg='red.200'>
5+
Box 1
6+
</CCenter>
7+
</CWrapItem>
8+
<CWrapItem>
9+
<CCenter w='180px' h='80px' bg='green.200'>
10+
Box 2
11+
</CCenter>
12+
</CWrapItem>
13+
<CWrapItem>
14+
<CCenter w='180px' h='80px' bg='tomato'>
15+
Box 3
16+
</CCenter>
17+
</CWrapItem>
18+
<CWrapItem>
19+
<CCenter w='180px' h='80px' bg='blue.200'>
20+
Box 4
21+
</CCenter>
22+
</CWrapItem>
23+
<CWrapItem>
24+
<CCenter w='180px' h='80px' bg='purple.200'>
25+
Box 5
26+
</CCenter>
27+
</CWrapItem>
28+
</CWrap>
29+
</template>

‎components/content/examples/wrap/SimpleWrap.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<CWrap spacing='10px'>
3+
<CWrapItem>
4+
<CCenter w='180px' h='80px' bg='red.200'>
5+
Box 1
6+
</CCenter>
7+
</CWrapItem>
8+
<CWrapItem>
9+
<CCenter w='180px' h='80px' bg='green.200'>
10+
Box 2
11+
</CCenter>
12+
</CWrapItem>
13+
<CWrapItem>
14+
<CCenter w='180px' h='80px' bg='tomato'>
15+
Box 3
16+
</CCenter>
17+
</CWrapItem>
18+
<CWrapItem>
19+
<CCenter w='180px' h='80px' bg='blue.200'>
20+
Box 4
21+
</CCenter>
22+
</CWrapItem>
23+
<CWrapItem>
24+
<CCenter w='180px' h='80px' bg='purple.200'>
25+
Box 5
26+
</CCenter>
27+
</CWrapItem>
28+
</CWrap>
29+
</template>

‎components/content/examples/wrap/SpacingWrap.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<CWrap spacing='30px'>
3+
<CWrapItem>
4+
<CCenter w='180px' h='80px' bg='red.200'>
5+
Box 1
6+
</CCenter>
7+
</CWrapItem>
8+
<CWrapItem>
9+
<CCenter w='180px' h='80px' bg='green.200'>
10+
Box 2
11+
</CCenter>
12+
</CWrapItem>
13+
<CWrapItem>
14+
<CCenter w='180px' h='80px' bg='tomato'>
15+
Box 3
16+
</CCenter>
17+
</CWrapItem>
18+
<CWrapItem>
19+
<CCenter w='180px' h='80px' bg='blue.200'>
20+
Box 4
21+
</CCenter>
22+
</CWrapItem>
23+
<CWrapItem>
24+
<CCenter w='180px' h='80px' bg='purple.200'>
25+
Box 5
26+
</CCenter>
27+
</CWrapItem>
28+
</CWrap>
29+
</template>

‎content/4.components/wrap.md

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
---
2+
title: Wrap
3+
description: Wrap component
4+
version: 2.0+
5+
---
6+
7+
# Wrap
8+
9+
Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.
10+
11+
## Import
12+
13+
```js
14+
import { CWrap, CWrapItem } from '@chakra-ui/vue-next';
15+
```
16+
17+
- Wrap: Wrap composes the Box component and renders a <ul> tag
18+
- WrapItem: WrapItem composes the Box component and renders the HTML <li> tag
19+
20+
## Usage
21+
22+
The Wrap component is a `flex` box container that can wrap its children onto multiple lines with `flex-wrap` and `spacing` support. It is useful for displaying elements that are typically placed side-by-side, such as dialog buttons, tags, and chips.
23+
24+
The example below shows how the last `Box` component wraps to the next line because there is not enough space to fit it on the same line as the other Box components.
25+
26+
::showcase
27+
::simple-wrap
28+
::
29+
::
30+
31+
```html
32+
<CWrap spacing='10px'>
33+
<CWrapItem>
34+
<CCenter w='180px' h='80px' bg='red.200'>
35+
Box 1
36+
</CCenter>
37+
</CWrapItem>
38+
<CWrapItem>
39+
<CCenter w='180px' h='80px' bg='green.200'>
40+
Box 2
41+
</CCenter>
42+
</CWrapItem>
43+
<CWrapItem>
44+
<CCenter w='180px' h='80px' bg='tomato'>
45+
Box 3
46+
</CCenter>
47+
</CWrapItem>
48+
<CWrapItem>
49+
<CCenter w='180px' h='80px' bg='blue.200'>
50+
Box 4
51+
</CCenter>
52+
</CWrapItem>
53+
<CWrapItem>
54+
<CCenter w='180px' h='80px' bg='purple.200'>
55+
Box 5
56+
</CCenter>
57+
</CWrapItem>
58+
</CWrap>
59+
```
60+
61+
## Change the spacing
62+
63+
To ensure that the spacing between each child is consistent, even if the children wrap, pass the `spacing` prop.
64+
65+
> Pro Tip: You can pass responsive values for the spacing.
66+
67+
::showcase
68+
::spacing-wrap
69+
::
70+
::
71+
72+
```html
73+
<CWrap spacing='30px'>
74+
<CWrapItem>
75+
<CCenter w='180px' h='80px' bg='red.200'>
76+
Box 1
77+
</CCenter>
78+
</CWrapItem>
79+
<CWrapItem>
80+
<CCenter w='180px' h='80px' bg='green.200'>
81+
Box 2
82+
</CCenter>
83+
</CWrapItem>
84+
<CWrapItem>
85+
<CCenter w='180px' h='80px' bg='tomato'>
86+
Box 3
87+
</CCenter>
88+
</CWrapItem>
89+
<CWrapItem>
90+
<CCenter w='180px' h='80px' bg='blue.200'>
91+
Box 4
92+
</CCenter>
93+
</CWrapItem>
94+
<CWrapItem>
95+
<CCenter w='180px' h='80px' bg='purple.200'>
96+
Box 5
97+
</CCenter>
98+
</CWrapItem>
99+
</CWrap>
100+
```
101+
102+
## Change the alignment
103+
104+
The `align` prop can be used to change the alignment of a child along the cross axis.
105+
106+
::showcase
107+
::align-wrap
108+
::
109+
::
110+
111+
```html
112+
<CWrap spacing='30px' align='center'>
113+
<CWrapItem>
114+
<CCenter w='180px' h='80px' bg='red.200'>
115+
Box 1
116+
</CCenter>
117+
</CWrapItem>
118+
<CWrapitem>
119+
<CCenter w='180px' h='40px' bg='green.200'>
120+
Box 2
121+
</CCenter>
122+
</CWrapitem>
123+
<CWrapItem>
124+
<CCenter w='180px' h='80px' bg='tomato'>
125+
Box 3
126+
</CCenter>
127+
</CWrapItem>
128+
<CWrapItem>
129+
<CCenter w='180px' h='60px' bg='blue.200'>
130+
Box 4
131+
</CCenter>
132+
</CWrapItem>
133+
<CWrapItem>
134+
<CCenter w='180px' h='80px' bg='purple.200'>
135+
Box 5
136+
</CCenter>
137+
</CWrapItem>
138+
</CWrap>
139+
```
140+
The `justify` prop specifies the alignment of a child along the main axis.
141+
142+
::showcase
143+
::justify-wrap
144+
::
145+
::
146+
147+
```html
148+
<CWrap spacing='30px' justify='center'>
149+
<CWrapItem>
150+
<CCenter w='180px' h='80px' bg='red.200'>
151+
Box 1
152+
</CCenter>
153+
</CWrapItem>
154+
<CWrapItem>
155+
<CCenter w='180px' h='80px' bg='green.200'>
156+
Box 2
157+
</CCenter>
158+
</CWrapItem>
159+
<CWrapItem>
160+
<CCenter w='180px' h='80px' bg='tomato'>
161+
Box 3
162+
</CCenter>
163+
</CWrapItem>
164+
<CWrapItem>
165+
<CCenter w='180px' h='80px' bg='blue.200'>
166+
Box 4
167+
</CCenter>
168+
</CWrapItem>
169+
<CWrapItem>
170+
<CCenter w='180px' h='80px' bg='purple.200'>
171+
Box 5
172+
</CCenter>
173+
</CWrapItem>
174+
</CWrap>
175+
```
176+

0 commit comments

Comments
 (0)