CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 15:56:23 +12:00
Code Issues Projects Releases Wiki Activity

Implements Tags and Tag components

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-21 14:10:24 +02:00
parent 937bd03af5
commit 64b3b0f6ef
2 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/bbui/src/Tags/Tag.svelte
View file

@ -1,11 +1,24 @@
<div class="spectrum-Tags" role="list" aria-label="list">
<div class="spectrum-Tags-item" role="listitem">
<span class="spectrum-Tags-itemLabel">Tag 1</span>
</div>
<div class="spectrum-Tags-item is-invalid" role="listitem">
<span class="spectrum-Tags-itemLabel">Tag 2</span>
</div>
<div class="spectrum-Tags-item is-disabled" role="listitem">
<span class="spectrum-Tags-itemLabel">Tag 2</span>
</div>
</div>
<script>
import Avatar from '../Avatar/Avatar.svelte'
import ClearButton from '../ClearButton/ClearButton.svelte'
export let icon = "";
export let avatar = "";
export let invalid = false;
export let disabled = false;
export let closable = false;
</script>
<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>

7
packages/bbui/src/Tags/Tags.svelte
View file

@ -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>