feat(stack): add Stack component (#1963)

This commit is contained in:
Eric Liu 2024-04-21 21:19:12 -07:00 committed by GitHub
commit 0f1a77a3fc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 470 additions and 2 deletions

View file

@ -1,6 +1,6 @@
# 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
@ -127,6 +127,7 @@
- [`SkipToContent`](#skiptocontent)
- [`Slider`](#slider)
- [`SliderSkeleton`](#sliderskeleton)
- [`Stack`](#stack)
- [`StructuredList`](#structuredlist)
- [`StructuredListBody`](#structuredlistbody)
- [`StructuredListCell`](#structuredlistcell)
@ -3618,6 +3619,32 @@ None.
| mouseenter | 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 &#124; 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" &#124; "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`
### Props