Implements Tags and Tag components
This commit is contained in:
parent
937bd03af5
commit
64b3b0f6ef
2 changed files with 31 additions and 11 deletions
|
@ -1,11 +1,24 @@
|
||||||
<div class="spectrum-Tags" role="list" aria-label="list">
|
<script>
|
||||||
<div class="spectrum-Tags-item" role="listitem">
|
import Avatar from '../Avatar/Avatar.svelte'
|
||||||
<span class="spectrum-Tags-itemLabel">Tag 1</span>
|
import ClearButton from '../ClearButton/ClearButton.svelte'
|
||||||
</div>
|
export let icon = "";
|
||||||
<div class="spectrum-Tags-item is-invalid" role="listitem">
|
export let avatar = "";
|
||||||
<span class="spectrum-Tags-itemLabel">Tag 2</span>
|
export let invalid = false;
|
||||||
</div>
|
export let disabled = false;
|
||||||
<div class="spectrum-Tags-item is-disabled" role="listitem">
|
export let closable = false;
|
||||||
<span class="spectrum-Tags-itemLabel">Tag 2</span>
|
</script>
|
||||||
</div>
|
|
||||||
</div>
|
<div class:is-invalid={invalid} class:is-disabled={disabled} class="spectrum-Tags-item" role="listitem">
|
||||||
|
{#if avatar}
|
||||||
|
<Avatar url={avatar} />
|
||||||
|
{/if}
|
||||||
|
{#if icon}
|
||||||
|
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
|
||||||
|
<use xlink:href="#spectrum-icon-24-{icon}" />
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
|
<span class="spectrum-Tags-itemLabel"><slot /></span>
|
||||||
|
{#if closable}
|
||||||
|
<ClearButton on:click />
|
||||||
|
{/if}
|
||||||
|
</div>
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
import "@spectrum-css/tags/dist/index-vars.css"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="spectrum-Tags" role="list" aria-label="list">
|
||||||
|
<slot />
|
||||||
|
</div>
|
Loading…
Reference in a new issue