feat(contained-list): add ContainedList, ContainedListItem (#1971)

This commit is contained in:
Eric Liu 2024-05-08 09:14:36 -07:00 committed by GitHub
commit b6df277647
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 484 additions and 2 deletions

View file

@ -1,6 +1,6 @@
# Component Index
> 169 components exported from carbon-components-svelte@1.0.0-next.1.
> 171 components exported from carbon-components-svelte@1.0.0-next.1.
## Components
@ -23,6 +23,8 @@
- [`Column`](#column)
- [`ComboBox`](#combobox)
- [`ComposedModal`](#composedmodal)
- [`ContainedList`](#containedlist)
- [`ContainedListItem`](#containedlistitem)
- [`Content`](#content)
- [`ContentSwitcher`](#contentswitcher)
- [`ContextMenu`](#contextmenu)
@ -723,6 +725,53 @@ export interface ComboBoxItem {
| close | dispatched | <code>null</code> |
| open | dispatched | <code>null</code> |
## `ContainedList`
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| kind | No | <code>let</code> | No | <code>"on-page" &#124; "disclosed"</code> | <code>"on-page"</code> | -- |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl"</code> | <code>"md"</code> | Specify the size of the list |
| inset | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for lines between list items to be inset. |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| action | No | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
None.
## `ContainedListItem`
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------ |
| interactive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list item. |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| action | No | -- | -- |
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
## `Content`
### Props