mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
39 lines
No EOL
30 KiB
HTML
39 lines
No EOL
30 KiB
HTML
<!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>ToggleSmall</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="ToggleSmall" data-origin="routify"><meta property="og:title" content="ToggleSmall" 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 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 aria-current="page" 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>ToggleSmall</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/ToggleSmall/ToggleSmall.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-untoggled">Default (untoggled)</a></li> <li class="bx--list__item"><a class="bx--link" href="#toggled">Toggled</a></li> <li class="bx--list__item"><a class="bx--link" href="#custom-labels">Custom labels</a></li> <li class="bx--list__item"><a class="bx--link" href="#disabled">Disabled</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-untoggled">Default (untoggled)</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--form-item"><input type="checkbox" id="ccs-0.08jm1sb38l5i" class="bx--toggle-input bx--toggle-input--small"> <label for="ccs-0.08jm1sb38l5i" class="bx--toggle-input__label">Push notifications <span class="bx--toggle__switch"><svg width="6" height="5" viewBox="0 0 6 5" class="bx--toggle__check"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg> <span aria-hidden="true" class="bx--toggle__text--off">Off</span> <span aria-hidden="true" class="bx--toggle__text--on">On</span></span></label></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"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> ToggleSmall <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"></</span>script</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ToggleSmall</span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Push notifications<span class="token punctuation">"</span></span> <span class="token punctuation">/></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> <h3 id="toggled">Toggled</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--form-item"><input type="checkbox" id="ccs-0.3ckklirajyb" class="bx--toggle-input bx--toggle-input--small"> <label for="ccs-0.3ckklirajyb" class="bx--toggle-input__label">Push notifications <span class="bx--toggle__switch"><svg width="6" height="5" viewBox="0 0 6 5" class="bx--toggle__check"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg> <span aria-hidden="true" class="bx--toggle__text--off">Off</span> <span aria-hidden="true" class="bx--toggle__text--on">On</span></span></label></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"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> ToggleSmall <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"></</span>script</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ToggleSmall</span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Push notifications<span class="token punctuation">"</span></span> <span class="token attr-name">toggled</span> <span class="token punctuation">/></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> <h3 id="custom-labels">Custom labels</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--form-item"><input type="checkbox" id="ccs-0.6b51kos8ewt" class="bx--toggle-input bx--toggle-input--small"> <label for="ccs-0.6b51kos8ewt" class="bx--toggle-input__label">Push notifications <span class="bx--toggle__switch"><svg width="6" height="5" viewBox="0 0 6 5" class="bx--toggle__check"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg> <span aria-hidden="true" class="bx--toggle__text--off">No</span> <span aria-hidden="true" class="bx--toggle__text--on">Yes</span></span></label></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"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> ToggleSmall <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"></</span>script</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ToggleSmall</span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Push notifications<span class="token punctuation">"</span></span> <span class="token attr-name">labelA</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>No<span class="token punctuation">"</span></span> <span class="token attr-name">labelB</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Yes<span class="token punctuation">"</span></span> <span class="token punctuation">/></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> <h3 id="disabled">Disabled</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--form-item"><input type="checkbox" disabled="" id="ccs-0.a4y8xnupkq" class="bx--toggle-input bx--toggle-input--small"> <label for="ccs-0.a4y8xnupkq" class="bx--toggle-input__label">Push notifications <span class="bx--toggle__switch"><svg width="6" height="5" viewBox="0 0 6 5" class="bx--toggle__check"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg> <span aria-hidden="true" class="bx--toggle__text--off">Off</span> <span aria-hidden="true" class="bx--toggle__text--on">On</span></span></label></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"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> ToggleSmall <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"></</span>script</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ToggleSmall</span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Push notifications<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></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> <h3 id="skeleton">Skeleton</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--form-item"><input type="checkbox" id="ccs-0.21ly599cpcnj" class="bx--toggle bx--toggle--small bx--skeleton"> <label aria-label="Toggle is loading" for="ccs-0.21ly599cpcnj" class="bx--toggle__label bx--skeleton"> <span class="bx--toggle__appearance"><svg width="6" height="5" viewBox="0 0 6 5" class="bx--toggle__check"><path d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"></path></svg></span></label></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"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> ToggleSmallSkeleton <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"></</span>script</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ToggleSmallSkeleton</span> <span class="token punctuation">/></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-untoggled">Default (untoggled)</a></li> <li class="bx--list__item"><a class="bx--link" href="#toggled">Toggled</a></li> <li class="bx--list__item"><a class="bx--link" href="#custom-labels">Custom labels</a></li> <li class="bx--list__item"><a class="bx--link" href="#disabled">Disabled</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> |