@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
67 lines (59 loc) • 4.3 kB
Markdown
# Stack
To implement Stack component into your project you'll need to add the import:
```jsx
import Stack from "@kiwicom/orbit-components/lib/Stack";
```
After adding import into your project you can use it simply like:
```jsx
<Stack>
<Button>My button</Button>
<Button iconRight={<ChevronDown />} />
</Stack>
```
## Props
Table below contains all types of the props available in Stack component.
| Name | Type | Default | Description |
| :------------ | :-------------------------- | :----------- | :------------------------------- |
| align | [`enum`](#enum) | `"start"` | The `align-items` and `align-content` of the Stack.
| basis | `string` | `auto` | Specifies the basis value of `flex-basis`.
| **children** | `React.Node` | | Content of the Stack.
| desktop | [`Desktop[]`](#desktop) | | Object for setting up properties for desktop view.
| direction | [`enum`](#enum) | `"row"` | The `flex-direction` of the Stack.
| grow | `boolean` | `false` | If `true`, the Stack will have `flex-grow` set to `1`, otherwise it will be `0`.
| inline | `boolean` | `false` | If `true`, the Stack will have `display` set to `inline-flex`, otherwise it will be `flex`.
| shrink | `boolean` | `true` | If `false`, the Stack will have `flex-shrink` set to `0`.
| spacing | [`spacing`](#spacing) | `"natural"` | The spacing between its children.
| spaceAfter | `enum` | | Additional `padding` to bottom of the Stack. [See this doc](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken)
| wrap | `boolean` | `false` | If `true`, the Stack will have `flex-wrap` set to `wrap`, otherwise it will be `nowrap`.
### Desktop
Table below contains all types of the props available in the desktop prop.
This props have the same usage, but applies only when viewport is bigger than `420px` and are not same as the base ones.
| Name | Type | Default | Description |
| :------------ | :-------------------------- | :----------- | :------------------------------- |
| align | [`enum`](#enum) | `"start"` | The `align-items` and `align-content` of the Stack.
| basis | `string` | `auto` | Specifies the basis value of `flex-basis`.
| direction | [`enum`](#enum) | `"row"` | The `flex-direction` of the Stack.
| grow | `boolean` | `false` | If `true`, the Stack will have `flex-grow` set to `1`, otherwise it will be `0`.
| inline | `boolean` | `false` | If `true`, the Stack will have `display` set to `inline-flex`, otherwise it will be `flex`.
| shrink | `boolean` | `true` | If `false`, the Stack will have `flex-shrink` set to `0`.
| spacing | [`spacing`](#spacing) | `"natural"` | The spacing between its children.
| spaceAfter | `enum` | | Additional `padding` to bottom of the Stack. [See this doc](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken)
| wrap | `boolean` | `false` | If `true`, the Stack will have `flex-wrap` set to `wrap`, otherwise it will be `nowrap`.
### enum
| align | direction |
| :---------- | :---------- |
| `"start"` | `"row"` |
| `"end"` | `"column"` |
| `"center"` |
| `"even"`
### spacing
| name | mobile | desktop |
| :---------------- | :-------------- | :---------- |
| `"extraTight"` | `2px` | `2px` |
| `"tight"` | `4px` | `4px` |
| `"condensed"` | `8px` | `8px` |
| `"compact"` | `12px` | `12px` |
| `"natural"` | `16px` | `16px` |
| `"comfy"` | `20px` | `24px` |
| `"loose"` | `28px` | `32px` |
| `"extraLoose"` | `36px` | `40px` |