-
Notifications
You must be signed in to change notification settings - Fork 256
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
484 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <script> | ||
| // @ts-check | ||
| /** @type {"on-page" | "disclosed"} */ | ||
| export let kind = "on-page"; | ||
| /** Specify the label text */ | ||
| export let labelText = ""; | ||
| /** | ||
| * Specify the size of the list | ||
| * @type {"sm" | "md" | "lg" | "xl"} | ||
| */ | ||
| export let size = "md"; | ||
| /** Set to `true` for lines between list items to be inset. */ | ||
| export let inset = false; | ||
| /** Set an id for the list */ | ||
| export let id = "ccs-" + Math.random().toString(36); | ||
| $: labelId = `label-${id}`; | ||
| </script> | ||
|
|
||
| <div | ||
| class:bx--contained-list="{true}" | ||
| class:bx--contained-list--inset-rulers="{inset}" | ||
| class:bx--contained-list--sm="{size === 'sm'}" | ||
| class:bx--contained-list--md="{size === 'md'}" | ||
| class:bx--contained-list--lg="{size === 'lg'}" | ||
| class:bx--contained-list--xl="{size === 'xl'}" | ||
| class:bx--layout--size-sm="{size === 'sm'}" | ||
| class:bx--layout--size-md="{size === 'md'}" | ||
| class:bx--layout--size-lg="{size === 'lg'}" | ||
| class:bx--layout--size-xl="{size === 'xl'}" | ||
| class:bx--contained-list--on-page="{kind === 'on-page'}" | ||
| class:bx--contained-list--disclosed="{kind === 'disclosed'}" | ||
| > | ||
| <div class:bx--contained-list__header="{true}"> | ||
| <div id="{labelId}" class:bx--contained-list__label="{true}"> | ||
| <slot name="labelText"> | ||
| {labelText} | ||
| </slot> | ||
| </div> | ||
| {#if $$slots.action} | ||
| <div class:bx--contained-list__action="{true}"> | ||
| <slot name="action" /> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| <ul role="list" aria-labelledby="{labelId}"> | ||
| <slot /> | ||
| </ul> | ||
| </div> |
Oops, something went wrong.