TagSelector

Wrapper for Sitevision tag selector.

• Props
• Example
  • Standard
  • Advanced
• Slots

Props

export let id = generateId();
export let label; // Required
export let name;  // Required
export let required = false;
export let disabled = false;
export let show = true;
export let value = [];

Example

Standard

<script>
  import { Panel, TagSelector } from '@soleil-se/config-svelte';
</script>

<Panel heading="Inställningar">
  <TagSelector name="tags" label="Etiketter" />
</Panel>

Advanced

Name prop is required here as well since Sitevision uses this to initialize the component.

<script>
  import { Panel, TagSelector } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';

  const values = {
    tags: [],
    ...window.CONFIG_VALUES
  };

  onSave(() => values);

</script>

<Panel heading="Inställningar">
  <TagSelector bind:value={values.tags} label="Etiketter" name="tags" />
</Panel>

Slots

Default

Default slot after select.

<TagSelector name="tags" label="Etiketter" />
  <p class="help-block">Some helpful text.</p>
</TagSelector>

Label

Slot for content in the label element.

<TagSelector name="tags" />
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</TagSelector>