diff --git a/components/content/examples/stack/BasicStack.vue b/components/content/examples/stack/BasicStack.vue new file mode 100644 index 0000000..a45ff69 --- /dev/null +++ b/components/content/examples/stack/BasicStack.vue @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/components/content/examples/stack/HorizontalStack.vue b/components/content/examples/stack/HorizontalStack.vue new file mode 100644 index 0000000..4517388 --- /dev/null +++ b/components/content/examples/stack/HorizontalStack.vue @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/components/content/examples/stack/HorizontalStackTwo.vue b/components/content/examples/stack/HorizontalStackTwo.vue new file mode 100644 index 0000000..a0b6e98 --- /dev/null +++ b/components/content/examples/stack/HorizontalStackTwo.vue @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/components/content/examples/stack/HtmlStack.vue b/components/content/examples/stack/HtmlStack.vue new file mode 100644 index 0000000..9e3ee7c --- /dev/null +++ b/components/content/examples/stack/HtmlStack.vue @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/components/content/examples/stack/ReverseStack.vue b/components/content/examples/stack/ReverseStack.vue new file mode 100644 index 0000000..6fd6903 --- /dev/null +++ b/components/content/examples/stack/ReverseStack.vue @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/content/4.components/stack.md b/content/4.components/stack.md new file mode 100644 index 0000000..18b40ea --- /dev/null +++ b/content/4.components/stack.md @@ -0,0 +1,141 @@ +--- +title: Stack +description: Stack Component +version: 2.0+ +--- + +# Stack + +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. + +## Import + +By default, each item is stacked vertically. `CStack` clones its children and passes the spacing to them using `margin-bottom` or `margin-right`. + +```js +import { CStack } from '@chakra-ui/vue-next'; +``` + +In addition, Chakra-UI Vue exports two additional `CStack` components +- `CVStack`: used to stack elements in the vertical direction +- `CHStack`: used to stack elements in the horizontal direction + +```js +import { CStack, CHStack, CVStack } from '@chakra-ui/vue-next'; +``` + +## Usage + +::showcase +::basic-stack +:: +:: + +```html + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +## Stack items horizontally + +You can stack the items horizontally either: + +- By passing the `is-inline` prop or `direction` and set it to `row` to the `CStack` component. + +::showcase +::horizontal-stack +:: +:: + +```html + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +- Using the `CHStack` component. + +::showcase +::horizontal-stack-two +:: +:: + +```html + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +Optionally, you can use align and justify to adjust the alignment and distribution of the items. + +## Reverse display order of items + +Set `direction` to `row-reverse` or `column-reverse`. + +::showcase +::reverse-stack +:: +:: + +```html + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +### Stacking HTML elements + +::showcase +::html-stack +:: +:: + +```html + + Chakra component 1 +

HTML paragraph element

+

HTML heading element

+ Chakra component 2 + +``` + +## Props + +| Name | Type | Default | Description | +|------------------|-----------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------| +| `isInline` | `boolean` | false | If `true` the items will be stacked horizontally. | +| `direction` | `FlexProps["flexDirection"]` | | The direction to stack the items. | +| `spacing` | `StyledSystem.MarginProps` | | The space between each stack item | +| `align` | `FlexProps["alignItems"]` | | The alignment of the stack item. Similar to `align-items` | +| `justify` | `FlexProps["justifyContent"]` | | The distribution of the stack item. Similar to `justify-content` | +| `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 | +| `divider` | `boolean` | false | If `true`, the stack items will be divided by a straight line | \ No newline at end of file