mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Alignment with Carbon version 10.29 (#529)
* chore: patch prettier-plugin-svelte * docs(tag): add filterable small tag example * feat(ui-shell): add SideNavDivider * feat(combo-box): support warning state * docs(combo-box): add invalid state example * fix(progress-step): add title to warning icon * docs(progress-indicator): add invalid step example * docs(progress-indicator): add disabled steps example * feat(truncate): add text truncation component and action * docs(radio-tile): fix light variant example * fix(side-effects): add pre-compiled CSS to library side effects * refactor(css): use shorthand scss imports, add comments * refactor(truncate): rename "direction" prop to "clamp" * chore(deps-dev): bump carbon-components to v10.29.0 * feat(combo-box): add direction prop * feat(dropdown): add direction prop * feat(multi-select): add direction prop
This commit is contained in:
Eric Liu
GitHub
parent
827a9822e7
commit
14e714fa61
48 changed files with 729 additions and 277 deletions
|
|
@ -122,49 +122,47 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else if as}
|
||||
<slot props="{buttonProps}" />
|
||||
{:else if href && !disabled}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
bind:this="{ref}"
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot />
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
</a>
|
||||
{:else}
|
||||
{#if as}
|
||||
<slot props="{buttonProps}" />
|
||||
{:else if href && !disabled}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
bind:this="{ref}"
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot />
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
bind:this="{ref}"
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot />
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
bind:this="{ref}"
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot />
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -103,54 +103,9 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
{#if type === "inline"}
|
||||
{#if hideCopyButton}
|
||||
<span
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--snippet--expand="{expanded}"
|
||||
class:bx--snippet--light="{light}"
|
||||
class:bx--snippet--no-copy="{hideCopyButton}"
|
||||
class:bx--snippet--wraptext="{wrapText}"
|
||||
class:bx--snippet--single="{type === 'single'}"
|
||||
class:bx--snippet--inline="{type === 'inline'}"
|
||||
class:bx--snippet--multi="{type === 'multi'}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
</span>
|
||||
{:else}
|
||||
<Copy
|
||||
aria-label="{copyLabel}"
|
||||
aria-describedby="{id}"
|
||||
feedback="{feedback}"
|
||||
feedbackTimeout="{feedbackTimeout}"
|
||||
class="bx--snippet {type && `bx--snippet--${type}`}
|
||||
{type ===
|
||||
'inline' && 'bx--btn--copy'}
|
||||
{expanded &&
|
||||
'bx--snippet--expand'}
|
||||
{light &&
|
||||
'bx--snippet--light'}
|
||||
{hideCopyButton &&
|
||||
'bx--snippet--no-copy'}
|
||||
{wrapText &&
|
||||
'bx--snippet--wraptext'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
</Copy>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
{:else if type === "inline"}
|
||||
{#if hideCopyButton}
|
||||
<span
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--snippet--expand="{expanded}"
|
||||
class:bx--snippet--light="{light}"
|
||||
|
|
@ -159,51 +114,93 @@
|
|||
class:bx--snippet--single="{type === 'single'}"
|
||||
class:bx--snippet--inline="{type === 'inline'}"
|
||||
class:bx--snippet--multi="{type === 'multi'}"
|
||||
class:bx--snippet--disabled="{type !== 'inline' && disabled}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
</span>
|
||||
{:else}
|
||||
<Copy
|
||||
aria-label="{copyLabel}"
|
||||
aria-describedby="{id}"
|
||||
feedback="{feedback}"
|
||||
feedbackTimeout="{feedbackTimeout}"
|
||||
class="bx--snippet {type && `bx--snippet--${type}`}
|
||||
{type ===
|
||||
'inline' && 'bx--btn--copy'}
|
||||
{expanded &&
|
||||
'bx--snippet--expand'}
|
||||
{light &&
|
||||
'bx--snippet--light'}
|
||||
{hideCopyButton &&
|
||||
'bx--snippet--no-copy'}
|
||||
{wrapText && 'bx--snippet--wraptext'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
role="{type === 'single' ? 'textbox' : undefined}"
|
||||
tabindex="{type === 'single' && !disabled ? '0' : undefined}"
|
||||
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
|
||||
class:bx--snippet-container="{true}"
|
||||
>
|
||||
<code>
|
||||
<pre bind:this="{ref}">
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
</Copy>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--snippet--expand="{expanded}"
|
||||
class:bx--snippet--light="{light}"
|
||||
class:bx--snippet--no-copy="{hideCopyButton}"
|
||||
class:bx--snippet--wraptext="{wrapText}"
|
||||
class:bx--snippet--single="{type === 'single'}"
|
||||
class:bx--snippet--inline="{type === 'inline'}"
|
||||
class:bx--snippet--multi="{type === 'multi'}"
|
||||
class:bx--snippet--disabled="{type !== 'inline' && disabled}"
|
||||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
role="{type === 'single' ? 'textbox' : undefined}"
|
||||
tabindex="{type === 'single' && !disabled ? '0' : undefined}"
|
||||
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
|
||||
class:bx--snippet-container="{true}"
|
||||
>
|
||||
<code>
|
||||
<pre bind:this="{ref}">
|
||||
<slot>{code}</slot>
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
{#if !hideCopyButton}
|
||||
<CopyButton
|
||||
disabled="{disabled}"
|
||||
feedback="{feedback}"
|
||||
feedbackTimeout="{feedbackTimeout}"
|
||||
iconDescription="{copyButtonDescription}"
|
||||
on:click
|
||||
on:animationend
|
||||
/>
|
||||
{/if}
|
||||
{#if showMoreLess}
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="field"
|
||||
class="bx--snippet-btn--expand"
|
||||
disabled="{disabled}"
|
||||
on:click="{() => {
|
||||
expanded = !expanded;
|
||||
}}"
|
||||
>
|
||||
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
|
||||
<ChevronDown16
|
||||
class="bx--icon-chevron--down bx--snippet__icon"
|
||||
aria-label="{expandText}"
|
||||
/>
|
||||
</Button>
|
||||
{/if}
|
||||
</code>
|
||||
</div>
|
||||
{/if}
|
||||
{#if !hideCopyButton}
|
||||
<CopyButton
|
||||
disabled="{disabled}"
|
||||
feedback="{feedback}"
|
||||
feedbackTimeout="{feedbackTimeout}"
|
||||
iconDescription="{copyButtonDescription}"
|
||||
on:click
|
||||
on:animationend
|
||||
/>
|
||||
{/if}
|
||||
{#if showMoreLess}
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="field"
|
||||
class="bx--snippet-btn--expand"
|
||||
disabled="{disabled}"
|
||||
on:click="{() => {
|
||||
expanded = !expanded;
|
||||
}}"
|
||||
>
|
||||
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
|
||||
<ChevronDown16
|
||||
class="bx--icon-chevron--down bx--snippet__icon"
|
||||
aria-label="{expandText}"
|
||||
/>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@
|
|||
/** Specify the selected combobox value */
|
||||
export let value = "";
|
||||
|
||||
/**
|
||||
* Specify the direction of the combobox dropdown menu
|
||||
* @type {"bottom" | "top"}
|
||||
*/
|
||||
export let direction = "bottom";
|
||||
|
||||
/**
|
||||
* Set the size of the combobox
|
||||
* @type {"sm" | "xl"}
|
||||
|
|
@ -46,6 +52,12 @@
|
|||
/** Set to `true` to indicate an invalid state */
|
||||
export let invalid = false;
|
||||
|
||||
/** Set to `true` to indicate an warning state */
|
||||
export let warn = false;
|
||||
|
||||
/** Specify the warning state text */
|
||||
export let warnText = "";
|
||||
|
||||
/** Set to `true` to enable the light variant */
|
||||
export let light = false;
|
||||
|
||||
|
|
@ -84,6 +96,7 @@
|
|||
|
||||
import { createEventDispatcher, afterUpdate, tick } from "svelte";
|
||||
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
|
||||
import ListBox from "../ListBox/ListBox.svelte";
|
||||
import ListBoxField from "../ListBox/ListBoxField.svelte";
|
||||
import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
|
||||
|
|
@ -97,8 +110,8 @@
|
|||
let inputValue = "";
|
||||
let highlightedIndex = -1;
|
||||
|
||||
function change(direction) {
|
||||
let index = highlightedIndex + direction;
|
||||
function change(dir) {
|
||||
let index = highlightedIndex + dir;
|
||||
|
||||
if (index < 0) {
|
||||
index = items.length - 1;
|
||||
|
|
@ -158,7 +171,8 @@
|
|||
</label>
|
||||
{/if}
|
||||
<ListBox
|
||||
class="bx--combo-box"
|
||||
class="bx--combo-box {direction === 'top' &&
|
||||
'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
|
||||
id="{comboId}"
|
||||
aria-label="{ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
|
|
@ -167,6 +181,8 @@
|
|||
open="{open}"
|
||||
light="{light}"
|
||||
size="{size}"
|
||||
warn="{warn}"
|
||||
warnText="{warnText}"
|
||||
>
|
||||
<ListBoxField
|
||||
role="button"
|
||||
|
|
@ -236,6 +252,11 @@
|
|||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if inputValue}
|
||||
<ListBoxSelection
|
||||
on:clear
|
||||
|
|
@ -286,7 +307,7 @@
|
|||
</ListBoxMenu>
|
||||
{/if}
|
||||
</ListBox>
|
||||
{#if !invalid && helperText}
|
||||
{#if !invalid && helperText && !warn}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
|
|
|
|||
|
|
@ -27,6 +27,12 @@
|
|||
*/
|
||||
export let type = "default";
|
||||
|
||||
/**
|
||||
* Specify the direction of the dropdown menu
|
||||
* @type {"bottom" | "top"}
|
||||
*/
|
||||
export let direction = "bottom";
|
||||
|
||||
/**
|
||||
* Specify the size of the dropdown field
|
||||
* @type {"sm" | "lg" | "xl"}
|
||||
|
|
@ -105,8 +111,8 @@
|
|||
let selectedId = undefined;
|
||||
let highlightedIndex = -1;
|
||||
|
||||
function change(direction) {
|
||||
let index = highlightedIndex + direction;
|
||||
function change(dir) {
|
||||
let index = highlightedIndex + dir;
|
||||
|
||||
if (index < 0) {
|
||||
index = items.length - 1;
|
||||
|
|
@ -159,7 +165,8 @@
|
|||
id="{id}"
|
||||
name="{name}"
|
||||
aria-label="{$$props['aria-label']}"
|
||||
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid &&
|
||||
class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
|
||||
'bx--dropdown--invalid'} {!invalid &&
|
||||
warn &&
|
||||
'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
|
||||
{size ===
|
||||
|
|
|
|||
|
|
@ -32,6 +32,12 @@
|
|||
*/
|
||||
export let type = "default";
|
||||
|
||||
/**
|
||||
* Specify the direction of the multiselect dropdown menu
|
||||
* @type {"bottom" | "top"}
|
||||
*/
|
||||
export let direction = "bottom";
|
||||
|
||||
/**
|
||||
* Specify the selection feedback after selecting items
|
||||
* @type {"top" | "fixed" | "top-after-reopen"}
|
||||
|
|
@ -252,7 +258,8 @@
|
|||
size="{size}"
|
||||
warn="{warn}"
|
||||
warnText="{warnText}"
|
||||
class="bx--multi-select {filterable && 'bx--combo-box'}
|
||||
class="bx--multi-select {direction === 'top' &&
|
||||
'bx--list-box--up'} {filterable && 'bx--combo-box'}
|
||||
{filterable &&
|
||||
'bx--multi-select--filterable'}
|
||||
{invalid &&
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
}}"
|
||||
>
|
||||
{#if invalid}
|
||||
<Warning16 class="bx--progress__warning" />
|
||||
<Warning16 class="bx--progress__warning" title="{description}" />
|
||||
{:else if current}
|
||||
<svg>
|
||||
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
|
||||
|
|
|
|||
|
|
@ -48,78 +48,76 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
{#if filter}
|
||||
<div
|
||||
aria-label="{title}"
|
||||
id="{id}"
|
||||
class:bx--tag="{true}"
|
||||
class:bx--tag--disabled="{disabled}"
|
||||
class:bx--tag--filter="{filter}"
|
||||
class:bx--tag--sm="{size === 'sm'}"
|
||||
class:bx--tag--red="{type === 'red'}"
|
||||
class:bx--tag--magenta="{type === 'magenta'}"
|
||||
class:bx--tag--purple="{type === 'purple'}"
|
||||
class:bx--tag--blue="{type === 'blue'}"
|
||||
class:bx--tag--cyan="{type === 'cyan'}"
|
||||
class:bx--tag--teal="{type === 'teal'}"
|
||||
class:bx--tag--green="{type === 'green'}"
|
||||
class:bx--tag--gray="{type === 'gray'}"
|
||||
class:bx--tag--cool-gray="{type === 'cool-gray'}"
|
||||
class:bx--tag--warm-gray="{type === 'warm-gray'}"
|
||||
class:bx--tag--high-contrast="{type === 'high-contrast'}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot props="{{ class: 'bx--tag__label' }}">
|
||||
<span class:bx--tag__label="{true}">{type}</span>
|
||||
</slot>
|
||||
<button
|
||||
aria-labelledby="{id}"
|
||||
class:bx--tag__close-icon="{true}"
|
||||
disabled="{disabled}"
|
||||
title="{title}"
|
||||
on:click|stopPropagation
|
||||
on:click|stopPropagation="{() => {
|
||||
dispatch('close');
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<Close16 />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
id="{id}"
|
||||
class:bx--tag="{true}"
|
||||
class:bx--tag--disabled="{disabled}"
|
||||
class:bx--tag--sm="{size === 'sm'}"
|
||||
class:bx--tag--red="{type === 'red'}"
|
||||
class:bx--tag--magenta="{type === 'magenta'}"
|
||||
class:bx--tag--purple="{type === 'purple'}"
|
||||
class:bx--tag--blue="{type === 'blue'}"
|
||||
class:bx--tag--cyan="{type === 'cyan'}"
|
||||
class:bx--tag--teal="{type === 'teal'}"
|
||||
class:bx--tag--green="{type === 'green'}"
|
||||
class:bx--tag--gray="{type === 'gray'}"
|
||||
class:bx--tag--cool-gray="{type === 'cool-gray'}"
|
||||
class:bx--tag--warm-gray="{type === 'warm-gray'}"
|
||||
class:bx--tag--high-contrast="{type === 'high-contrast'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
{:else if filter}
|
||||
<div
|
||||
aria-label="{title}"
|
||||
id="{id}"
|
||||
class:bx--tag="{true}"
|
||||
class:bx--tag--disabled="{disabled}"
|
||||
class:bx--tag--filter="{filter}"
|
||||
class:bx--tag--sm="{size === 'sm'}"
|
||||
class:bx--tag--red="{type === 'red'}"
|
||||
class:bx--tag--magenta="{type === 'magenta'}"
|
||||
class:bx--tag--purple="{type === 'purple'}"
|
||||
class:bx--tag--blue="{type === 'blue'}"
|
||||
class:bx--tag--cyan="{type === 'cyan'}"
|
||||
class:bx--tag--teal="{type === 'teal'}"
|
||||
class:bx--tag--green="{type === 'green'}"
|
||||
class:bx--tag--gray="{type === 'gray'}"
|
||||
class:bx--tag--cool-gray="{type === 'cool-gray'}"
|
||||
class:bx--tag--warm-gray="{type === 'warm-gray'}"
|
||||
class:bx--tag--high-contrast="{type === 'high-contrast'}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot props="{{ class: 'bx--tag__label' }}">
|
||||
<span class:bx--tag__label="{true}">{type}</span>
|
||||
</slot>
|
||||
<button
|
||||
aria-labelledby="{id}"
|
||||
class:bx--tag__close-icon="{true}"
|
||||
disabled="{disabled}"
|
||||
title="{title}"
|
||||
on:click|stopPropagation
|
||||
on:click|stopPropagation="{() => {
|
||||
dispatch('close');
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if icon}
|
||||
<div class:bx--tag__custom-icon="{true}">
|
||||
<svelte:component this="{icon}" />
|
||||
</div>
|
||||
{/if}
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<Close16 />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
id="{id}"
|
||||
class:bx--tag="{true}"
|
||||
class:bx--tag--disabled="{disabled}"
|
||||
class:bx--tag--sm="{size === 'sm'}"
|
||||
class:bx--tag--red="{type === 'red'}"
|
||||
class:bx--tag--magenta="{type === 'magenta'}"
|
||||
class:bx--tag--purple="{type === 'purple'}"
|
||||
class:bx--tag--blue="{type === 'blue'}"
|
||||
class:bx--tag--cyan="{type === 'cyan'}"
|
||||
class:bx--tag--teal="{type === 'teal'}"
|
||||
class:bx--tag--green="{type === 'green'}"
|
||||
class:bx--tag--gray="{type === 'gray'}"
|
||||
class:bx--tag--cool-gray="{type === 'cool-gray'}"
|
||||
class:bx--tag--warm-gray="{type === 'warm-gray'}"
|
||||
class:bx--tag--high-contrast="{type === 'high-contrast'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if icon}
|
||||
<div class:bx--tag__custom-icon="{true}">
|
||||
<svelte:component this="{icon}" />
|
||||
</div>
|
||||
{/if}
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -80,9 +80,9 @@
|
|||
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
|
||||
{labelA}
|
||||
</span>
|
||||
<span aria-hidden="true" class:bx--toggle__text--on="{true}"
|
||||
>{labelB}</span
|
||||
>
|
||||
<span aria-hidden="true" class:bx--toggle__text--on="{true}">
|
||||
{labelB}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
12
src/Truncate/Truncate.svelte
Normal file
12
src/Truncate/Truncate.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
/** @type {"end" | "front"}*/
|
||||
export let clamp = "end";
|
||||
</script>
|
||||
|
||||
<p
|
||||
class:bx--text-truncate--end="{clamp === 'end'}"
|
||||
class:bx--text-truncate--front="{clamp === 'front'}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</p>
|
||||
1
src/Truncate/index.js
Normal file
1
src/Truncate/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default as Truncate } from "./Truncate.svelte";
|
||||
1
src/UIShell/SideNavDivider.svelte
Normal file
1
src/UIShell/SideNavDivider.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>
|
||||
|
|
@ -18,3 +18,4 @@ export { default as Content } from "./Content.svelte";
|
|||
export { default as SkipToContent } from "./SkipToContent.svelte";
|
||||
export { default as HeaderGlobalAction } from "./HeaderGlobalAction.svelte";
|
||||
export { default as HeaderSearch } from "./HeaderSearch.svelte";
|
||||
export { default as SideNavDivider } from "./SideNavDivider.svelte";
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
|
|||
export { Tooltip } from "./Tooltip";
|
||||
export { TooltipDefinition } from "./TooltipDefinition";
|
||||
export { TooltipIcon } from "./TooltipIcon";
|
||||
export { Truncate } from "./Truncate";
|
||||
export {
|
||||
Header,
|
||||
HeaderAction,
|
||||
|
|
@ -131,6 +132,7 @@ export {
|
|||
SideNavLink,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavDivider,
|
||||
Content,
|
||||
SkipToContent,
|
||||
HeaderGlobalAction,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue