mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
feat(contained-list): add ContainedList, ContainedListItem
This commit is contained in:
Eric Liu
parent
cf41756cf4
commit
9ac6f7344c
11 changed files with 484 additions and 2 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 169,
|
||||
"total": 171,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -1847,6 +1847,134 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ContainedList",
|
||||
"filePath": "src/ContainedList/ContainedList.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "kind",
|
||||
"kind": "let",
|
||||
"type": "\"on-page\" | \"disclosed\"",
|
||||
"value": "\"on-page\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of the list",
|
||||
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
|
||||
"value": "\"md\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "inset",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` for lines between list items to be inset.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
"description": "Set an id for the list",
|
||||
"type": "string",
|
||||
"value": "\"ccs-\" + Math.random().toString(36)",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{ "name": "action", "default": false, "slot_props": "{}" },
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "ContainedListItem",
|
||||
"filePath": "src/ContainedList/ContainedListItem.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "interactive",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render a `button` element instead of a `div`",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the list item.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon to render\nIcon is rendered to the left of the label text",
|
||||
"type": "typeof import(\"svelte\").SvelteComponent<any>",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{ "name": "action", "default": false, "slot_props": "{}" }
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "svelte:element" }
|
||||
],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "Content",
|
||||
"filePath": "src/UIShell/Content.svelte",
|
||||
|
|
|
|||
122
docs/src/pages/components/ContainedList.svx
Normal file
122
docs/src/pages/components/ContainedList.svx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
<script>
|
||||
import { Button, Search, ContainedList, ContainedListItem } from "carbon-components-svelte";
|
||||
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
||||
import Close from "carbon-icons-svelte/lib/Close.svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Default
|
||||
|
||||
The `ContainedList` component is used to display a list of items in a container.
|
||||
|
||||
It uses a `md` size by default.
|
||||
|
||||
<ContainedList labelText="List title">
|
||||
<ContainedListItem>Item 1</ContainedListItem>
|
||||
<ContainedListItem>Item 2</ContainedListItem>
|
||||
<ContainedListItem>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## Small size
|
||||
|
||||
<ContainedList labelText="List title" size="sm">
|
||||
<ContainedListItem>Item 1</ContainedListItem>
|
||||
<ContainedListItem>Item 2</ContainedListItem>
|
||||
<ContainedListItem>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## Large size
|
||||
|
||||
<ContainedList labelText="List title" size="lg">
|
||||
<ContainedListItem>Item 1</ContainedListItem>
|
||||
<ContainedListItem>Item 2</ContainedListItem>
|
||||
<ContainedListItem>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## Extra-large size
|
||||
|
||||
<ContainedList labelText="List title" size="xl">
|
||||
<ContainedListItem>Item 1</ContainedListItem>
|
||||
<ContainedListItem>Item 2</ContainedListItem>
|
||||
<ContainedListItem>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## Inset items
|
||||
|
||||
<ContainedList labelText="List title" inset>
|
||||
<ContainedListItem>Item 1</ContainedListItem>
|
||||
<ContainedListItem>Item 2</ContainedListItem>
|
||||
<ContainedListItem>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## Disclosed
|
||||
|
||||
Set `kind="disclosed"` for the list title to be sticky positioned.
|
||||
|
||||
When scrolling, the list title will stick to the top of the container.
|
||||
|
||||
<div style:height="200px" style:overflow-y="auto">
|
||||
<ContainedList labelText="List title 1" kind="disclosed">
|
||||
{#each Array.from({ length: 6 }) as i}
|
||||
<ContainedListItem>Item</ContainedListItem>
|
||||
{/each}
|
||||
</ContainedList>
|
||||
<ContainedList labelText="List title 2" kind="disclosed">
|
||||
{#each Array.from({ length: 6 }) as i}
|
||||
<ContainedListItem>Item</ContainedListItem>
|
||||
{/each}
|
||||
</ContainedList>
|
||||
</div>
|
||||
|
||||
## With icons
|
||||
|
||||
<ContainedList labelText="List title">
|
||||
<ContainedListItem icon={Add}>Item 1</ContainedListItem>
|
||||
<ContainedListItem icon={Add}>Item 2</ContainedListItem>
|
||||
<ContainedListItem icon={Add}>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## With expandable search
|
||||
|
||||
Use the `action` slot to add an expandable search.
|
||||
|
||||
<ContainedList labelText="List title">
|
||||
<Search slot="action" expandable />
|
||||
<ContainedListItem>Item 1</ContainedListItem>
|
||||
<ContainedListItem>Item 2</ContainedListItem>
|
||||
<ContainedListItem>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## Interactive items
|
||||
|
||||
Set `interactive` to make the items render as a `button`.
|
||||
|
||||
<ContainedList labelText="List title">
|
||||
<ContainedListItem interactive on:click={() => console.log('click')}>
|
||||
Item 1
|
||||
</ContainedListItem>
|
||||
<ContainedListItem interactive disabled>Item 2</ContainedListItem>
|
||||
<ContainedListItem interactive>Item 3</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
## Interactive items with actions
|
||||
|
||||
Similarly to `ContainedList`, you can add an action to `ContainedListItem` using the `action` slot.
|
||||
|
||||
<ContainedList labelText="List title">
|
||||
<ContainedListItem interactive on:click={() => console.log('click')}>
|
||||
Item 1
|
||||
<Button
|
||||
slot="action"
|
||||
kind="ghost"
|
||||
iconDescription="Dismiss"
|
||||
icon={Close}
|
||||
on:click={() => console.log('click close')}
|
||||
/>
|
||||
</ContainedListItem>
|
||||
<ContainedListItem interactive disabled>Item 2</ContainedListItem>
|
||||
<ContainedListItem interactive>
|
||||
Item 3
|
||||
</ContainedListItem>
|
||||
</ContainedList>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue