Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 1x 1x 9x 9x 9x 9x | <div {disabled} class="button-group button-toggle {className}" class:round bind:this="{el}"> {#each items as item, idx} <label {disabled} class="button button-normal" class:selected="{value === item.value}" class:button-has-text="{item.name}" on:touchstart="{onmousedown}" on:mousedown="{onmousedown}"> {#if item.icon} <Icon name="{item.icon}"/> {/if} {item.name || ''} <input {disabled} id="{idx === 0 && id ? id : undefined}" type="radio" name="{name}" checked="{item.value === value}" value="{item.value}" on:change="{e => onchange(e, item)}"> </label> {/each} </div> <script> import { createEventDispatcher } from 'svelte'; import { uuid } from '../util'; import { Icon } from '../icon'; export let disabled = undefined; export let round = undefined; // round button export let items = ''; export let id = ''; export let name = uuid(); export let value = ''; let className = ''; export { className as class }; const dispatch = createEventDispatcher(); let el; function onmousedown (e) { const btn = e.target.querySelector('input'); if (btn === document.activeElement || btn.checked) return; if (btn) { e.preventDefault(); btn.focus(); btn.click(); } } function onchange (e, button) { value = button.value; dispatch('change', value); } </script> |