mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat(stack): add Stack component (#1963)
This commit is contained in:
Eric Liu
GitHub
parent
a7d3cffc2a
commit
0f1a77a3fc
10 changed files with 470 additions and 2 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
# Component Index
|
# Component Index
|
||||||
|
|
||||||
> 168 components exported from carbon-components-svelte@1.0.0-next.1.
|
> 169 components exported from carbon-components-svelte@1.0.0-next.1.
|
||||||
|
|
||||||
## Components
|
## Components
|
||||||
|
|
||||||
|
|
@ -127,6 +127,7 @@
|
||||||
- [`SkipToContent`](#skiptocontent)
|
- [`SkipToContent`](#skiptocontent)
|
||||||
- [`Slider`](#slider)
|
- [`Slider`](#slider)
|
||||||
- [`SliderSkeleton`](#sliderskeleton)
|
- [`SliderSkeleton`](#sliderskeleton)
|
||||||
|
- [`Stack`](#stack)
|
||||||
- [`StructuredList`](#structuredlist)
|
- [`StructuredList`](#structuredlist)
|
||||||
- [`StructuredListBody`](#structuredlistbody)
|
- [`StructuredListBody`](#structuredlistbody)
|
||||||
- [`StructuredListCell`](#structuredlistcell)
|
- [`StructuredListCell`](#structuredlistcell)
|
||||||
|
|
@ -3618,6 +3619,32 @@ None.
|
||||||
| mouseenter | forwarded | -- |
|
| mouseenter | forwarded | -- |
|
||||||
| mouseleave | forwarded | -- |
|
| mouseleave | forwarded | -- |
|
||||||
|
|
||||||
|
## `Stack`
|
||||||
|
|
||||||
|
### Types
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
|
| :---------- | :------- | :--------------- | :------- | ------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
|
| gap | No | <code>let</code> | No | <code>StackScale | string</code> | <code>1</code> | Specify the gap between items in the stack.<br />The scale maps to Carbon layout values.<br />Alternatively, specify a custom value (e.g., "200px"). |
|
||||||
|
| orientation | No | <code>let</code> | No | <code>"vertical" | "horizontal"</code> | <code>"vertical"</code> | Specify the orientation of the stack. |
|
||||||
|
| tag | No | <code>let</code> | No | <code>keyof HTMLElementTagNameMap</code> | <code>"div"</code> | Specify the tag name |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
| Slot name | Default | Props | Fallback |
|
||||||
|
| :-------- | :------ | :---- | :------- |
|
||||||
|
| -- | Yes | -- | -- |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
None.
|
||||||
|
|
||||||
## `StructuredList`
|
## `StructuredList`
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"total": 168,
|
"total": 169,
|
||||||
"components": [
|
"components": [
|
||||||
{
|
{
|
||||||
"moduleName": "Accordion",
|
"moduleName": "Accordion",
|
||||||
|
|
@ -11453,6 +11453,59 @@
|
||||||
"typedefs": [],
|
"typedefs": [],
|
||||||
"rest_props": { "type": "Element", "name": "div" }
|
"rest_props": { "type": "Element", "name": "div" }
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"moduleName": "Stack",
|
||||||
|
"filePath": "src/Stack/Stack.svelte",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "gap",
|
||||||
|
"kind": "let",
|
||||||
|
"description": "Specify the gap between items in the stack.\nThe scale maps to Carbon layout values.\nAlternatively, specify a custom value (e.g., \"200px\").",
|
||||||
|
"type": "StackScale | string",
|
||||||
|
"value": "1",
|
||||||
|
"isFunction": false,
|
||||||
|
"isFunctionDeclaration": false,
|
||||||
|
"isRequired": false,
|
||||||
|
"constant": false,
|
||||||
|
"reactive": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "orientation",
|
||||||
|
"kind": "let",
|
||||||
|
"description": "Specify the orientation of the stack.",
|
||||||
|
"type": "\"vertical\" | \"horizontal\"",
|
||||||
|
"value": "\"vertical\"",
|
||||||
|
"isFunction": false,
|
||||||
|
"isFunctionDeclaration": false,
|
||||||
|
"isRequired": false,
|
||||||
|
"constant": false,
|
||||||
|
"reactive": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "tag",
|
||||||
|
"kind": "let",
|
||||||
|
"description": "Specify the tag name",
|
||||||
|
"type": "keyof HTMLElementTagNameMap",
|
||||||
|
"value": "\"div\"",
|
||||||
|
"isFunction": false,
|
||||||
|
"isFunctionDeclaration": false,
|
||||||
|
"isRequired": false,
|
||||||
|
"constant": false,
|
||||||
|
"reactive": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"moduleExports": [],
|
||||||
|
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||||
|
"events": [],
|
||||||
|
"typedefs": [
|
||||||
|
{
|
||||||
|
"type": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13",
|
||||||
|
"name": "StackScale",
|
||||||
|
"ts": "type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"rest_props": { "type": "Element", "name": "svelte:element" }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"moduleName": "StructuredList",
|
"moduleName": "StructuredList",
|
||||||
"filePath": "src/StructuredList/StructuredList.svelte",
|
"filePath": "src/StructuredList/StructuredList.svelte",
|
||||||
|
|
|
||||||
|
|
@ -149,6 +149,7 @@ html[data-carbon-theme="g90"] .code-override {
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-viewer > .bx--aspect-ratio,
|
.preview-viewer > .bx--aspect-ratio,
|
||||||
|
.preview-viewer > .bx--stack > *,
|
||||||
.preview-viewer [data-outline] {
|
.preview-viewer [data-outline] {
|
||||||
outline: 1px solid var(--bx-interactive);
|
outline: 1px solid var(--bx-interactive);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
276
docs/src/pages/components/Stack.svx
Normal file
276
docs/src/pages/components/Stack.svx
Normal file
|
|
@ -0,0 +1,276 @@
|
||||||
|
<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 as="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" as="ul" gap={3}>
|
||||||
|
<li>Item 1</li>
|
||||||
|
<li>Item 2</li>
|
||||||
|
<li>Item 3</li>
|
||||||
|
</Stack>
|
||||||
66
src/Stack/Stack.svelte
Normal file
66
src/Stack/Stack.svelte
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
<script>
|
||||||
|
// @ts-check
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The stack scale maps to the following `@carbon/layout` values:
|
||||||
|
* - 1 --> 0.125rem
|
||||||
|
* - 2 --> 0.25rem
|
||||||
|
* - 3 --> 0.5rem
|
||||||
|
* - 4 --> 0.75rem
|
||||||
|
* - 5 --> 1rem
|
||||||
|
* - 6 --> 1.5rem
|
||||||
|
* - 7 --> 2rem
|
||||||
|
* - 8 --> 2.5rem
|
||||||
|
* - 9 --> 3rem
|
||||||
|
* - 10 --> 4rem
|
||||||
|
* - 11 --> 5rem
|
||||||
|
* - 12 --> 6rem
|
||||||
|
* - 13 --> 10rem
|
||||||
|
* @typedef {1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13} StackScale
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the gap between items in the stack.
|
||||||
|
* The scale maps to Carbon layout values.
|
||||||
|
* Alternatively, specify a custom value (e.g., "200px").
|
||||||
|
* @type {StackScale | string}
|
||||||
|
*/
|
||||||
|
export let gap = 1;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the orientation of the stack.
|
||||||
|
* @type {"vertical" | "horizontal"}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export let orientation = "vertical";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the tag name
|
||||||
|
* @type {keyof HTMLElementTagNameMap}
|
||||||
|
*/
|
||||||
|
export let tag = "div";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:element
|
||||||
|
this="{tag}"
|
||||||
|
class:bx--stack="{true}"
|
||||||
|
class:bx--stack-vertical="{orientation === 'vertical'}"
|
||||||
|
class:bx--stack-horizontal="{orientation === 'horizontal'}"
|
||||||
|
class:bx--stack-scale-1="{gap === 1}"
|
||||||
|
class:bx--stack-scale-2="{gap === 2}"
|
||||||
|
class:bx--stack-scale-3="{gap === 3}"
|
||||||
|
class:bx--stack-scale-4="{gap === 4}"
|
||||||
|
class:bx--stack-scale-5="{gap === 5}"
|
||||||
|
class:bx--stack-scale-6="{gap === 6}"
|
||||||
|
class:bx--stack-scale-7="{gap === 7}"
|
||||||
|
class:bx--stack-scale-8="{gap === 8}"
|
||||||
|
class:bx--stack-scale-9="{gap === 9}"
|
||||||
|
class:bx--stack-scale-10="{gap === 10}"
|
||||||
|
class:bx--stack-scale-11="{gap === 11}"
|
||||||
|
class:bx--stack-scale-12="{gap === 12}"
|
||||||
|
class:bx--stack-scale-13="{gap === 13}"
|
||||||
|
style:--bx-stack-gap={typeof gap === 'string' ? gap : undefined}
|
||||||
|
{...$$restProps}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</svelte:element>
|
||||||
1
src/Stack/index.js
Normal file
1
src/Stack/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Stack } from "./Stack.svelte";
|
||||||
|
|
@ -101,6 +101,7 @@ export { Select, SelectSkeleton, SelectItem, SelectItemGroup } from "./Select";
|
||||||
export { SkeletonPlaceholder } from "./SkeletonPlaceholder";
|
export { SkeletonPlaceholder } from "./SkeletonPlaceholder";
|
||||||
export { SkeletonText } from "./SkeletonText";
|
export { SkeletonText } from "./SkeletonText";
|
||||||
export { Slider, SliderSkeleton } from "./Slider";
|
export { Slider, SliderSkeleton } from "./Slider";
|
||||||
|
export { Stack } from "./Stack";
|
||||||
export {
|
export {
|
||||||
StructuredList,
|
StructuredList,
|
||||||
StructuredListSkeleton,
|
StructuredListSkeleton,
|
||||||
|
|
|
||||||
6
tests/Stack.test.svelte
Normal file
6
tests/Stack.test.svelte
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { Stack } from "../types";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Stack gap="200px" orientation="vertical">Content</Stack>
|
||||||
|
<Stack gap="{13}" orientation="horizontal">Content</Stack>
|
||||||
36
types/Stack/Stack.svelte.d.ts
vendored
Normal file
36
types/Stack/Stack.svelte.d.ts
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import type { SvelteComponentTyped } from "svelte";
|
||||||
|
import type { SvelteHTMLElements } from "svelte/elements";
|
||||||
|
|
||||||
|
export type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
|
||||||
|
|
||||||
|
type RestProps = SvelteHTMLElements["svelte:element"];
|
||||||
|
|
||||||
|
export interface StackProps extends RestProps {
|
||||||
|
/**
|
||||||
|
* Specify the gap between items in the stack.
|
||||||
|
* The scale maps to Carbon layout values.
|
||||||
|
* Alternatively, specify a custom value (e.g., "200px").
|
||||||
|
* @default 1
|
||||||
|
*/
|
||||||
|
gap?: StackScale | string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the orientation of the stack.
|
||||||
|
* @default "vertical"
|
||||||
|
*/
|
||||||
|
orientation?: "vertical" | "horizontal";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the tag name
|
||||||
|
* @default "div"
|
||||||
|
*/
|
||||||
|
tag?: keyof HTMLElementTagNameMap;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Stack extends SvelteComponentTyped<
|
||||||
|
StackProps,
|
||||||
|
Record<string, any>,
|
||||||
|
{ default: {} }
|
||||||
|
> {}
|
||||||
1
types/index.d.ts
vendored
1
types/index.d.ts
vendored
|
|
@ -113,6 +113,7 @@ export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPl
|
||||||
export { default as SkeletonText } from "./SkeletonText/SkeletonText.svelte";
|
export { default as SkeletonText } from "./SkeletonText/SkeletonText.svelte";
|
||||||
export { default as Slider } from "./Slider/Slider.svelte";
|
export { default as Slider } from "./Slider/Slider.svelte";
|
||||||
export { default as SliderSkeleton } from "./Slider/SliderSkeleton.svelte";
|
export { default as SliderSkeleton } from "./Slider/SliderSkeleton.svelte";
|
||||||
|
export { default as Stack } from "./Stack/Stack.svelte";
|
||||||
export { default as StructuredList } from "./StructuredList/StructuredList.svelte";
|
export { default as StructuredList } from "./StructuredList/StructuredList.svelte";
|
||||||
export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton.svelte";
|
export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton.svelte";
|
||||||
export { default as StructuredListBody } from "./StructuredList/StructuredListBody.svelte";
|
export { default as StructuredListBody } from "./StructuredList/StructuredListBody.svelte";
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue