mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
276 lines
5 KiB
Text
276 lines
5 KiB
Text
<script>
|
|
import { Stack, UnorderedList, ListItem } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
`Stack` is a utility component that can be used to create a stack of elements with a consistent gap between them. It supports both vertical and horizontal orientations.
|
|
|
|
It uses layout tokens from the Carbon Design System to define the gap between elements. The default gap is `1`, which is equivalent to `0.125rem` (`2px`).
|
|
|
|
The `gap` scale can be set from `1` to `13`:
|
|
|
|
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
|
|
<ListItem><strong>1</strong>: 0.125rem (2px)</ListItem>
|
|
<ListItem><strong>2</strong>: 0.25rem (4px)</ListItem>
|
|
<ListItem><strong>3</strong>: 0.5rem (8px)</ListItem>
|
|
<ListItem><strong>4</strong>: 0.75rem (12px)</ListItem>
|
|
<ListItem><strong>5</strong>: 1rem (16px)</ListItem>
|
|
<ListItem><strong>6</strong>: 1.5rem (24px)</ListItem>
|
|
<ListItem><strong>7</strong>: 2rem (32px)</ListItem>
|
|
<ListItem><strong>8</strong>: 2.5rem (40px)</ListItem>
|
|
<ListItem><strong>9</strong>: 3rem (48px)</ListItem>
|
|
<ListItem><strong>10</strong>: 4rem (64px)</ListItem>
|
|
<ListItem><strong>11</strong>: 5rem (80px)</ListItem>
|
|
<ListItem><strong>12</strong>: 6rem (96px)</ListItem>
|
|
<ListItem><strong>13</strong>: 10rem (160px)</ListItem>
|
|
</UnorderedList>
|
|
|
|
Alternatively, you can specify an arbitrary `gap` value (e.g., `200px`).
|
|
|
|
## Vertical (gap 1)
|
|
|
|
By default, the `Stack` component has a vertical orientation and a gap scale of `1`.
|
|
|
|
<Stack>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 2)
|
|
|
|
<Stack gap={2}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 3)
|
|
|
|
<Stack gap={3}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 4)
|
|
|
|
<Stack gap={4}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 5)
|
|
|
|
<Stack gap={5}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 6)
|
|
|
|
<Stack gap={6}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 7)
|
|
|
|
<Stack gap={7}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 8)
|
|
|
|
<Stack gap={8}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 9)
|
|
|
|
<Stack gap={9}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 10)
|
|
|
|
<Stack gap={10}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 11)
|
|
|
|
<Stack gap={11}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 12)
|
|
|
|
<Stack gap={12}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (gap 13)
|
|
|
|
<Stack gap={13}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (custom value)
|
|
|
|
<Stack gap="22px">
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Vertical (custom element)
|
|
|
|
By default, the `Stack` component uses a `div` element. You can specify a different element using the `as` prop.
|
|
|
|
<Stack tag="ul" gap={3}>
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
<li>Item 3</li>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 1)
|
|
|
|
Set the `orientation` prop to `horizontal` to create a horizontal stack.
|
|
|
|
<Stack orientation="horizontal">
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 2)
|
|
|
|
<Stack orientation="horizontal" gap={2}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 3)
|
|
|
|
<Stack orientation="horizontal" gap={3}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 4)
|
|
|
|
<Stack orientation="horizontal" gap={4}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 5)
|
|
|
|
<Stack orientation="horizontal" gap={5}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 6)
|
|
|
|
<Stack orientation="horizontal" gap={6}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 7)
|
|
|
|
<Stack orientation="horizontal" gap={7}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 8)
|
|
|
|
<Stack orientation="horizontal" gap={8}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 9)
|
|
|
|
<Stack orientation="horizontal" gap={9}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 10)
|
|
|
|
<Stack orientation="horizontal" gap={10}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 11)
|
|
|
|
<Stack orientation="horizontal" gap={11}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 12)
|
|
|
|
<Stack orientation="horizontal" gap={12}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (gap 13)
|
|
|
|
<Stack orientation="horizontal" gap={13}>
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (custom value)
|
|
|
|
<Stack orientation="horizontal" gap="22px">
|
|
<p>Item 1</p>
|
|
<p>Item 2</p>
|
|
<p>Item 3</p>
|
|
</Stack>
|
|
|
|
## Horizontal (custom element)
|
|
|
|
By default, the `Stack` component uses a `div` element. You can specify a different element using the `as` prop.
|
|
|
|
<Stack orientation="horizontal" tag="ul" gap={3}>
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
<li>Item 3</li>
|
|
</Stack>
|