mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity
carbon-components-svelte/components/StructuredList/index.html
Eric Liu 23df7bfbae Updates
2020-10-02 20:26:53 -07:00

137 lines
No EOL
47 KiB
HTML
Raw Blame History

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<link rel="icon" href="/carbon-components-svelte/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StructuredList</title>
<link rel="stylesheet" href="/carbon-components-svelte/assets/style.cdc12fd8.css">
<style>.action-link.svelte-1viyq4q{text-align:center;align-items:center;vertical-align:middle;justify-content:center;padding-top:10px}.bx--col>h1{font-size:var(--cds-productive-heading-07-font-size);font-weight:var(--cds-productive-heading-07-font-weight);letter-spacing:var(--cds-productive-heading-07-letter-spacing);line-height:var(--cds-productive-heading-07-line-height);margin-bottom:var(--cds-layout-01)}.big-paragraph{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height);margin-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-05)}.bx--col>.big-paragraph>code{font-size:var(--cds-productive-heading-03-font-size);font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.big-link{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.bx--col>p>code{font-size:var(--cds-code-02-font-size);font-weight:var(--cds-code-02-font-weight);line-height:var(--cds-code-02-line-height);letter-spacing:var(--cds-code-02-letter-spacing);background-color:var(--cds-ui-03);border-radius:.25rem;padding:0 var(--cds-spacing-02)}.bx--col>h2{font-size:var(--cds-productive-heading-06-font-size);font-weight:var(--cds-productive-heading-06-font-weight);letter-spacing:var(--cds-productive-heading-06-letter-spacing);line-height:var(--cds-productive-heading-06-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-01)}.bx--col>h3{font-size:var(--cds-productive-heading-04-font-size);font-weight:var(--cds-productive-heading-04-font-weight);letter-spacing:var(--cds-productive-heading-04-letter-spacing);line-height:var(--cds-productive-heading-04-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-02)}.bx--col>h4{font-size:var(--cds-productive-heading-02-font-size);font-weight:var(--cds-productive-heading-02-font-weight);letter-spacing:var(--cds-productive-heading-02-letter-spacing);line-height:var(--cds-productive-heading-02-line-height);padding-top:var(--cds-layout-04);margin-bottom:var(--cds-layout-01)}.bx--col>p{max-width:44rem;margin-bottom:var(--cds-layout-02)}.bx--content{background:0 0}@media(max-width:1056px){.bx--side-nav~.bx--content{margin-left:0;padding-left:1rem;padding-right:1rem}.bx--side-nav--expanded~.bx--content{white-space:nowrap;min-width:28rem}}.platform-name{display:flex;align-items:baseline}.platform-name code{margin-left:var(--cds-spacing-02);font-size:var(--cds-code-01-font-size);font-weight:var(--cds-code-01-font-weight);letter-spacing:var(--cds-code-01-letter-spacing);line-height:var(--cds-code-01-line-height);color:#c6c6c6}@media(max-width:580px){.platform-name code{display:none}}@media(min-width:1057px){.bx--side-nav__navigation{z-index:1}}.bx--side-nav__submenu[aria-expanded=true]+.bx--side-nav__menu{max-height:120rem}</style><style></style><meta name="title" content="StructuredList" data-origin="routify"><meta property="og:title" content="StructuredList" data-origin="routify"></head>
<body style="">
<div id="app" style=""> <header role="banner" aria-label="Navigation" class="bx--header"><div slot="skip-to-content"><a href="#main-content" tabindex="0" class="bx--skip-to-content">Skip to main content</a></div> <a href="/" aria-label="Navigation" class="bx--header__name"> <span slot="platform" class="platform-name">Carbon Components Svelte <code>v0.15.0</code></span></a> <div class="bx--header__global"><a target="_blank" rel="noopener" href="https://github.com/IBM/carbon-components-svelte" class="bx--header__action action-link svelte-1viyq4q"><svg data-carbon-icon="LogoGithub20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg></a> <div><button type="button" class="bx--header__action svelte-19vx6se"><svg data-carbon-icon="AppSwitcher20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path></svg> </button> </div></div></header> <nav class="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--expanded"><ul class="bx--side-nav__items"><li class="bx--side-nav__item"><button type="button" aria-expanded="true" class="bx--side-nav__submenu"> <span class="bx--side-nav__submenu-title">Components</span> <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"><svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" preserveAspectRatio="xMidYMid meet" role="img" focusable="true" tabindex="0"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path><title>Open Menu</title></svg></div></button> <ul role="menu" class="bx--side-nav__menu"><li class="bx--side-nav__menu-item"><a href="/components/Accordion" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Accordion</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Breadcrumb" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Breadcrumb</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Button" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Button</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ButtonSet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ButtonSet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Checkbox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Checkbox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ClickableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ClickableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CodeSnippet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CodeSnippet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComboBox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComboBox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComposedModal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComposedModal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ContentSwitcher" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ContentSwitcher</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CopyButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CopyButton</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/DataTable" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DataTable</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/DatePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DatePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Dropdown" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Dropdown</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ExpandableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ExpandableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FileUploader" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FileUploader</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FluidForm" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FluidForm</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Form" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Form</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Grid" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Grid</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Icon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Icon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineLoading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineLoading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Link" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Link</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Loading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Loading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Modal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Modal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/MultiSelect" class="bx--side-nav__link"><span class="bx--side-nav__link-text">MultiSelect</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/NumberInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">NumberInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OrderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OrderedList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OverflowMenu" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OverflowMenu</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Pagination" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Pagination</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PaginationNav" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PaginationNav</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PasswordInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PasswordInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ProgressIndicator" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ProgressIndicator</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioButton</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Search" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Search</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Select" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Select</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SelectableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SelectableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonPlaceholder" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonPlaceholder</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonText" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonText</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Slider" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Slider</span></a></li><li class="bx--side-nav__menu-item"><a aria-current="page" href="/components/StructuredList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">StructuredList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tabs" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tabs</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tag" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tag</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextArea" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextArea</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TimePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TimePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToastNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToastNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Toggle" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Toggle</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToggleSmall" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToggleSmall</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tooltip" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tooltip</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipDefinition" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipDefinition</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipIcon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipIcon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UIShell" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UIShell</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UnorderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UnorderedList</span></a></li></ul></li></ul></nav> <main id="main-content" data-components="true" class="bx--content"><div class="bx--grid"><div class="bx--row"><div class="bx--col"><h1>StructuredList</h1> <div class="bar"><div class="bx--form-item"><div class="bx--select bx--select--inline"><label for="select-theme" class="bx--label">Theme</label> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="select-theme" class="bx--select-input"><option value="white" class="bx--select-option">White</option> <option value="g10" class="bx--select-option">Gray 10</option> <option value="g90" class="bx--select-option">Gray 90</option> <option value="g100" class="bx--select-option">Gray 100</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <a role="button" tabindex="0" disabled="false" href="https://github.com/IBM/carbon-components-svelte/tree/master/src/StructuredList/StructuredList.svelte" target="_blank" class="bx--btn bx--btn--field bx--btn--ghost"> Source code <svg data-carbon-icon="Code16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M31 16L24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16zM1 16L8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16z"></path><path d="M5.91 15H26.080000000000002V17H5.91z" transform="rotate(-75 15.996 16)"></path></svg></a></div></div></div> <div class="bx--row"><div class="prose bx--col"><div class="toc mobile"><h5>Table of Contents</h5> <div slot="aside"><ul class="bx--list--unordered"><li class="bx--list__item"><a class="bx--link" href="#usage">Usage</a> <ul class="bx--list--unordered bx--list--nested"><li class="bx--list__item"><a class="bx--link" href="#default-read-only">Default (read-only)</a></li> <li class="bx--list__item"><a class="bx--link" href="#selectable-rows">Selectable rows</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton">Skeleton</a></li></ul></li></ul></div></div> <h2 id="usage">Usage</h2> <h3 id="default-read-only">Default (read-only)</h3> <div class="preview"> <div class="preview-viewer"> <div aria-label="Structured list section" class="bx--structured-list"><div class="bx--structured-list-thead"><div class="bx--structured-list-row bx--structured-list-row--header-row"><div class="bx--structured-list-th">Column A</div> <div class="bx--structured-list-th">Column B</div> <div class="bx--structured-list-th">Column C</div></div></div> <div class="bx--structured-list-tbody"><div class="bx--structured-list-row"><div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div> <div class="bx--structured-list-td">Row 1</div> <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.</div></div> <div class="bx--structured-list-row"><div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div> <div class="bx--structured-list-td">Row 2</div> <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.</div></div> <div class="bx--structured-list-row"><div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 3</div> <div class="bx--structured-list-td">Row 3</div> <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.</div></div></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span>
StructuredList<span class="token punctuation">,</span>
StructuredListHead<span class="token punctuation">,</span>
StructuredListRow<span class="token punctuation">,</span>
StructuredListCell<span class="token punctuation">,</span>
StructuredListBody<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredList</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListHead</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListRow</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>Column A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>Column B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>Column C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListHead</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListBody</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">noWrap</span><span class="token punctuation">&gt;</span></span>Row 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>Row 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
porttitor interdum.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">noWrap</span><span class="token punctuation">&gt;</span></span>Row 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>Row 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
porttitor interdum.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">noWrap</span><span class="token punctuation">&gt;</span></span>Row 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>Row 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
porttitor interdum.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListBody</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredList</span><span class="token punctuation">&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--sm bx--btn--ghost bx--snippet-btn--expand"> <span class="bx--snippet-btn--text">Show more</span> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--icon-chevron--down bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-label="Show more" role="img" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </button></div></div></div> <h3 id="selectable-rows">Selectable rows</h3> <div class="preview"> <div class="preview-viewer"> <div aria-label="Structured list section" class="bx--structured-list bx--structured-list--selection"><div class="bx--structured-list-thead"><div class="bx--structured-list-row bx--structured-list-row--header-row"><div class="bx--structured-list-th">ColumnA</div> <div class="bx--structured-list-th">ColumnB</div> <div class="bx--structured-list-th">ColumnC</div> <div class="bx--structured-list-th"></div></div></div> <div class="bx--structured-list-tbody"><label role="presentation" tabindex="0" for="row-1" class="bx--structured-list-row"><div class="bx--structured-list-td">Row 1</div> <div class="bx--structured-list-td">Row 1</div> <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.</div> <input type="radio" tabindex="-1" id="row-1" name="row-1-name" title="row-1-title" value="row-1-value" class="bx--structured-list-input"> <div class="bx--structured-list-td"><svg data-carbon-icon="CheckmarkFilled16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--structured-list-svg" preserveAspectRatio="xMidYMid meet" aria-label="select an option" role="img" focusable="false"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path><title>select an option</title></svg></div> </label><label role="presentation" tabindex="0" for="row-2" class="bx--structured-list-row"><div class="bx--structured-list-td">Row 2</div> <div class="bx--structured-list-td">Row 2</div> <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.</div> <input type="radio" tabindex="-1" id="row-2" name="row-2-name" title="row-2-title" value="row-2-value" class="bx--structured-list-input"> <div class="bx--structured-list-td"><svg data-carbon-icon="CheckmarkFilled16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--structured-list-svg" preserveAspectRatio="xMidYMid meet" aria-label="select an option" role="img" focusable="false"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path><title>select an option</title></svg></div> </label><label role="presentation" tabindex="0" for="row-3" class="bx--structured-list-row"><div class="bx--structured-list-td">Row 3</div> <div class="bx--structured-list-td">Row 3</div> <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.</div> <input type="radio" tabindex="-1" id="row-3" name="row-3-name" title="row-3-title" value="row-3-value" class="bx--structured-list-input"> <div class="bx--structured-list-td"><svg data-carbon-icon="CheckmarkFilled16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--structured-list-svg" preserveAspectRatio="xMidYMid meet" aria-label="select an option" role="img" focusable="false"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path><title>select an option</title></svg></div> </label></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span>
StructuredList<span class="token punctuation">,</span>
StructuredListHead<span class="token punctuation">,</span>
StructuredListRow<span class="token punctuation">,</span>
StructuredListCell<span class="token punctuation">,</span>
StructuredListBody<span class="token punctuation">,</span>
StructuredListInput<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> CheckmarkFilled16 <span class="token keyword">from</span> <span class="token string">"carbon-icons-svelte/lib/CheckmarkFilled16"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredList</span> <span class="token attr-name">selection</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row-1-value<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListHead</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListRow</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>ColumnA<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>ColumnB<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span>ColumnC<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span> <span class="token attr-name">head</span><span class="token punctuation">&gt;</span></span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token string">''</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListHead</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListBody</span><span class="token punctuation">&gt;</span></span>
<span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript"><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span> </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListRow</span> <span class="token attr-name">label</span> <span class="token attr-name">for="row-</span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token attr-name">"</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>Row <span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>Row <span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListInput</span>
<span class="token attr-name">id="row-</span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token attr-name">"</span>
<span class="token attr-name">value="row-</span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token attr-name">-value"</span>
<span class="token attr-name">title="row-</span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token attr-name">-title"</span>
<span class="token attr-name">name="row-</span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token attr-name">-name"</span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CheckmarkFilled16</span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bx--structured-list-svg<span class="token punctuation">"</span></span>
<span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select an option<span class="token punctuation">"</span></span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select an option<span class="token punctuation">"</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListCell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListRow</span><span class="token punctuation">&gt;</span></span>
<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredListBody</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>StructuredList</span><span class="token punctuation">&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--sm bx--btn--ghost bx--snippet-btn--expand"> <span class="bx--snippet-btn--text">Show more</span> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--icon-chevron--down bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-label="Show more" role="img" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </button></div></div></div> <h3 id="skeleton">Skeleton</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--skeleton bx--structured-list"><div class="bx--structured-list-thead"><div class="bx--structured-list-row bx--structured-list-row--header-row"><div class="bx--structured-list-th"><span></span></div> <div class="bx--structured-list-th"><span></span></div> <div class="bx--structured-list-th"><span></span></div></div></div> <div class="bx--structured-list-tbody"><div class="bx--structured-list-row"><div class="bx--structured-list-td"></div> <div class="bx--structured-list-td"></div> <div class="bx--structured-list-td"></div> </div><div class="bx--structured-list-row"><div class="bx--structured-list-td"></div> <div class="bx--structured-list-td"></div> <div class="bx--structured-list-td"></div> </div><div class="bx--structured-list-row"><div class="bx--structured-list-td"></div> <div class="bx--structured-list-td"></div> <div class="bx--structured-list-td"></div> </div></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> StructuredListSkeleton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>StructuredListSkeleton</span> <span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> </div></div></div> <div class="table bx--col-lg-5 bx--col-xlg-4"><div class="toc"><h5>Table of Contents</h5> <div slot="aside"><ul class="bx--list--unordered"><li class="bx--list__item"><a class="bx--link" href="#usage">Usage</a> <ul class="bx--list--unordered bx--list--nested"><li class="bx--list__item"><a class="bx--link" href="#default-read-only">Default (read-only)</a></li> <li class="bx--list__item"><a class="bx--link" href="#selectable-rows">Selectable rows</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton">Skeleton</a></li></ul></li></ul></div></div></div></main> </div>
<script type="module" src="/carbon-components-svelte/assets/index.c2c9d961.js"></script>
</body></html>
Reference in a new issue View git blame Copy permalink