CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-03 03:01:14 +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"> <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>

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>