Skip to content

Commit e2d0192

Browse files
D-LiteD-Lite
authored
Flex Component (#45)
* feat: flex component documentation * refactor: change name casing FLEX * refactor: change name casing flex * chore: flex documentation review
1 parent 598ec1d commit e2d0192

File tree

5 files changed

+204
-0
lines changed

5 files changed

+204
-0
lines changed

‎components/content/examples/flex/CompareFlex.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<CBox>
3+
<CText>Flex and Spacer: Full width, equal Spacing</CText>
4+
<CFlex>
5+
<CBox w='70px' h='10' bg='red.500' />
6+
<CSpacer />
7+
<CBox w='170px' h='10' bg='red.500' />
8+
<CSpacer />
9+
<CBox w='180px' h='10' bg='red.500' />
10+
</CFlex>
11+
12+
<CText>
13+
Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
14+
</CText>
15+
<CGrid template-columns='repeat(3, 1fr)' gap={6}>
16+
<CBox w='70px' h='10' bg='blue.500' />
17+
<CBox w='170px' h='10' bg='blue.500' />
18+
<CBox w='180px' h='10' bg='blue.500' />
19+
</CGrid>
20+
21+
<CText>
22+
HStack: The children have equal spacing but don't span the whole container
23+
</CText>
24+
<CHStack spacing='24px'>
25+
<CBox w='70px' h='10' bg='teal.500' />
26+
<CBox w='170px' h='10' bg='teal.500' />
27+
<CBox w='180px' h='10' bg='teal.500' />
28+
</CHStack>
29+
</CBox>
30+
</template>

‎components/content/examples/flex/SignUpFlex.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<CFlex min-width='max-content' align-items='center' gap='2'>
3+
<CBox p='2'>
4+
<CHeading size='md'>Chakra App</CHeading>
5+
</CBox>
6+
<CSpacer />
7+
<CButtonGroup p='2'>
8+
<CButton rounded="10px" color-scheme='teal'>Sign Up</CButton>
9+
<CButton rounded="10px" color-scheme='teal'>Log in</CButton>
10+
</CButtonGroup>
11+
</CFlex>
12+
</template>

‎components/content/examples/flex/SimpleFlex.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<CFlex color='white'>
3+
<CCenter w='100px' bg='green.500'>
4+
<CText>Box 1</CText>
5+
</CCenter>
6+
<CSquare bg='blue.500' size='150px'>
7+
<CText>Box 2</CText>
8+
</CSquare>
9+
<CBox flex='1' bg='tomato'>
10+
<CText>Box 3</CText>
11+
</CBox>
12+
</CFlex>
13+
</template>

‎components/content/examples/flex/SpacerFlex.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<CFlex>
3+
<CBox p='4' bg='red.400'>
4+
Box 1
5+
</CBox>
6+
<CSpacer />
7+
<CBox p='4' bg='green.400'>
8+
Box 2
9+
</CBox>
10+
</CFlex>
11+
</template>

‎content/4.components/flex.md

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
---
2+
title: Flex
3+
description: Flex Component
4+
version: 2.0+
5+
---
6+
7+
# Flex
8+
9+
Flex is `CBox` with `display: flex` and comes with helpful style shorthand. It renders a `div` element.
10+
11+
## Import
12+
13+
```js
14+
import { CFlex, CSpacer } from '@chakra-ui/vue-next';
15+
```
16+
17+
- Flex: A `CBox` with `display: flex`.
18+
- Spacer: Creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex.
19+
20+
## Usage
21+
22+
When using the Flex component, you can use some of the following helpful shorthand props:
23+
24+
- `direction` for `flexDirection`
25+
- `wrap` for `flexWrap`
26+
- `align` for `alignItems`
27+
- `justify` for `justifyContent`
28+
<!-- - `basis` for `flexBasis`
29+
- `shrink` for `flexShrink` -->
30+
While you can pass the verbose props, using the shorthand can save you some time.
31+
32+
::showcase
33+
::simple-flex{width=full}
34+
::
35+
::
36+
37+
```html
38+
<CFlex color='white'>
39+
<CCenter w='100px' bg='green.500'>
40+
<CText>Box 1</CText>
41+
</CCenter>
42+
<CSquare bg='blue.500' size='150px'>
43+
<CText>Box 2</CText>
44+
</CSquare>
45+
<CBox flex='1' bg='tomato'>
46+
<CText>Box 3</CText>
47+
</CBox>
48+
</CFlex>
49+
```
50+
51+
### Using the Spacer
52+
53+
As an alternative to `CStack`, you can combine `CFlex` and `CSpacer` to create stackable and responsive layouts.
54+
55+
::showcase
56+
::spacer-flex{width=full}
57+
::
58+
::
59+
60+
```html
61+
<CFlex>
62+
<CBox p='4' bg='red.400'>
63+
Box 1
64+
</CBox>
65+
<CSpacer />
66+
<CBox p='4' bg='green.400'>
67+
Box 2
68+
</CBox>
69+
</CFlex>
70+
```
71+
72+
### Flex and Spacer vs Grid vs Stack
73+
74+
The `CFlex` and `CSpacer` components, `CGrid` and `CHStack` treat children of different widths differently.
75+
76+
- In `CHStack`, the children will have equal spacing between them but they won't span the entire width of the container.
77+
- In `CGrid`, the starting points of the children will be equally spaced but the gaps between them will not be equal.
78+
- With `CFlex` and `CSpacer`, the children will span the entire width of the container and also have equal spacing between them.
79+
80+
::showcase
81+
::compare-flex{width=full}
82+
::
83+
::
84+
85+
```html
86+
<CBox>
87+
<CText>Flex and Spacer: Full width, equal Spacing</CText>
88+
<CFlex>
89+
<CBox w='70px' h='10' bg='red.500' />
90+
<CSpacer />
91+
<CBox w='170px' h='10' bg='red.500' />
92+
<CSpacer />
93+
<CBox w='180px' h='10' bg='red.500' />
94+
</CFlex>
95+
96+
<CText>
97+
Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
98+
</CText>
99+
<CGrid template-columns='repeat(3, 1fr)' gap={6}>
100+
<CBox w='70px' h='10' bg='blue.500' />
101+
<CBox w='170px' h='10' bg='blue.500' />
102+
<CBox w='180px' h='10' bg='blue.500' />
103+
</CGrid>
104+
105+
<CText>
106+
HStack: The children have equal spacing but don't span the whole container
107+
</CText>
108+
<CHStack spacing='24px'>
109+
<CBox w='70px' h='10' bg='teal.500' />
110+
<CBox w='170px' h='10' bg='teal.500' />
111+
<CBox w='180px' h='10' bg='teal.500' />
112+
</CHStack>
113+
</CBox>
114+
```
115+
116+
A good use case for `CSpacer` is to create a navbar with a signup/login button aligned to the right.
117+
118+
Since `CSpacer` renders a `div`, any `gap` value provided to the parent is applied to both sides of this component, and therefore make the gap appear doubled when the spacer is completely collapsed.
119+
120+
> The example below is not responsive on purpose as you might switch to a collapsed menu on mobile.
121+
122+
::showcase
123+
::sign-up-flex{width=full}
124+
::
125+
::
126+
127+
```html
128+
<CFlex min-width='max-content' align-items='center' gap='2'>
129+
<CBox p='2'>
130+
<CHeading size='md'>Chakra App</CHeading>
131+
</CBox>
132+
<CSpacer />
133+
<CButtonGroup p='2'>
134+
<CButton rounded="10px" color-scheme='teal'>Sign Up</CButton>
135+
<CButton rounded="10px" color-scheme='teal'>Log in</CButton>
136+
</CButtonGroup>
137+
</CFlex>
138+
```

0 commit comments

Comments
 (0)