Skip to content

Commit 856c285

Browse files
D-LiteD-Lite
authored
Stack component (#48)
* feat: stack component documentation * refactor: change name casing stack * refactor: change name casing stack * chore: stack documentation review
1 parent e2d0192 commit 856c285

File tree

6 files changed

+197
-0
lines changed

6 files changed

+197
-0
lines changed

‎components/content/examples/stack/BasicStack.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<CStack :spacing="5">
3+
<CBox :p="5" shadow="md" border-width="1px">
4+
<CHeading>See the Vue</CHeading>
5+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
6+
</CBox>
7+
<CBox :p="5" shadow="md" border-width="1px">
8+
<CHeading>Go Nuxt!</CHeading>
9+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
10+
</CBox>
11+
</CStack>
12+
</template>

‎components/content/examples/stack/HorizontalStack.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<CStack :spacing="5" is-inline>
3+
<CBox :p="5" shadow="md" border-width="1px">
4+
<CHeading>See the Vue</CHeading>
5+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
6+
</CBox>
7+
<CBox :p="5" shadow="md" border-width="1px">
8+
<CHeading>Go Nuxt!</CHeading>
9+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
10+
</CBox>
11+
</CStack>
12+
</template>

‎components/content/examples/stack/HorizontalStackTwo.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<CHStack :spacing="5">
3+
<CBox :p="5" shadow="md" border-width="1px">
4+
<CHeading>See the Vue</CHeading>
5+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
6+
</CBox>
7+
<CBox :p="5" shadow="md" border-width="1px">
8+
<CHeading>Go Nuxt!</CHeading>
9+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
10+
</CBox>
11+
</CHStack>
12+
</template>

‎components/content/examples/stack/HtmlStack.vue

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<CStack :spacing="4">
3+
<CText>Chakra component 1</CText>
4+
<p>HTML paragraph element</p>
5+
<h3>HTML heading element</h3>
6+
<CText>Chakra component 2</CText>
7+
</CStack>
8+
</template>

‎components/content/examples/stack/ReverseStack.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<CStack :spacing="5" direction="column-reverse">
3+
<CBox :p="5" shadow="md" border-width="1px">
4+
<CHeading>See the Vue</CHeading>
5+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
6+
</CBox>
7+
<CBox :p="5" shadow="md" border-width="1px">
8+
<CHeading>Go Nuxt!</CHeading>
9+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
10+
</CBox>
11+
</CStack>
12+
</template>

‎content/4.components/stack.md

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
title: Stack
3+
description: Stack Component
4+
version: 2.0+
5+
---
6+
7+
# Stack
8+
9+
Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the `CFlex` component.
10+
11+
## Import
12+
13+
By default, each item is stacked vertically. `CStack` clones its children and passes the spacing to them using `margin-bottom` or `margin-right`.
14+
15+
```js
16+
import { CStack } from '@chakra-ui/vue-next';
17+
```
18+
19+
In addition, Chakra-UI Vue exports two additional `CStack` components
20+
- `CVStack`: used to stack elements in the vertical direction
21+
- `CHStack`: used to stack elements in the horizontal direction
22+
23+
```js
24+
import { CStack, CHStack, CVStack } from '@chakra-ui/vue-next';
25+
```
26+
27+
## Usage
28+
29+
::showcase
30+
::basic-stack
31+
::
32+
::
33+
34+
```html
35+
<CStack :spacing="5">
36+
<CBox :p="5" shadow="md" border-width="1px">
37+
<CHeading>See the Vue</CHeading>
38+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
39+
</CBox>
40+
<CBox :p="5" shadow="md" border-width="1px">
41+
<CHeading>Go Nuxt!</CHeading>
42+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
43+
</CBox>
44+
</CStack>
45+
```
46+
47+
## Stack items horizontally
48+
49+
You can stack the items horizontally either:
50+
51+
- By passing the `is-inline` prop or `direction` and set it to `row` to the `CStack` component.
52+
53+
::showcase
54+
::horizontal-stack
55+
::
56+
::
57+
58+
```html
59+
<CStack :spacing="5" is-inline>
60+
<CBox :p="5" shadow="md" border-width="1px">
61+
<CHeading>See the Vue</CHeading>
62+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
63+
</CBox>
64+
<CBox :p="5" shadow="md" border-width="1px">
65+
<CHeading>Go Nuxt!</CHeading>
66+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
67+
</CBox>
68+
</CStack>
69+
```
70+
71+
- Using the `CHStack` component.
72+
73+
::showcase
74+
::horizontal-stack-two
75+
::
76+
::
77+
78+
```html
79+
<CHStack :spacing="5">
80+
<CBox :p="5" shadow="md" border-width="1px">
81+
<CHeading>See the Vue</CHeading>
82+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
83+
</CBox>
84+
<CBox :p="5" shadow="md" border-width="1px">
85+
<CHeading>Go Nuxt!</CHeading>
86+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
87+
</CBox>
88+
</CHStack>
89+
```
90+
91+
Optionally, you can use align and justify to adjust the alignment and distribution of the items.
92+
93+
## Reverse display order of items
94+
95+
Set `direction` to `row-reverse` or `column-reverse`.
96+
97+
::showcase
98+
::reverse-stack
99+
::
100+
::
101+
102+
```html
103+
<CStack :spacing="5" is-reversed>
104+
<CBox :p="5" shadow="md" border-width="1px">
105+
<CHeading>See the Vue</CHeading>
106+
<CText :mt="4">Vue makes front-end development a breeze.</CText>
107+
</CBox>
108+
<CBox :p="5" shadow="md" border-width="1px">
109+
<CHeading>Go Nuxt!</CHeading>
110+
<CText :mt="4">Nuxt makes writing Vue even easier.</CText>
111+
</CBox>
112+
</CStack>
113+
```
114+
115+
### Stacking HTML elements
116+
117+
::showcase
118+
::html-stack
119+
::
120+
::
121+
122+
```html
123+
<CStack :spacing="4">
124+
<CText>Chakra component 1</CText>
125+
<p>HTML paragraph element</p>
126+
<h3>HTML heading element</h3>
127+
<CText>Chakra component 2</CText>
128+
</CStack>
129+
```
130+
131+
## Props
132+
133+
| Name | Type | Default | Description |
134+
|------------------|-----------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------|
135+
| `isInline` | `boolean` | false | If `true` the items will be stacked horizontally. |
136+
| `direction` | `FlexProps["flexDirection"]` | | The direction to stack the items. |
137+
| `spacing` | `StyledSystem.MarginProps` | | The space between each stack item |
138+
| `align` | `FlexProps["alignItems"]` | | The alignment of the stack item. Similar to `align-items` |
139+
| `justify` | `FlexProps["justifyContent"]` | | The distribution of the stack item. Similar to `justify-content` |
140+
| `shouldWrapChildren` | `boolean` | false | If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props |
141+
| `divider` | `boolean` | false | If `true`, the stack items will be divided by a straight line |

0 commit comments

Comments
 (0)