トグル Svelte コンポーネント

トグルコンポーネント
トグルプロパティ
例

トグルコンポーネント

以下のコンポーネントが含まれています

トグル

トグルプロパティ

名前	タイプ	デフォルト	説明
checked	boolean	false	トグル入力がチェックされているかどうかを定義します
colors	object		Tailwind CSS カラークラスを持つオブジェクト
colors.bgIos	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'
colors.bgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.checkedBgIos	string	'bg-primary'
colors.checkedBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.checkedBorderMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.checkedThumbBgIos	string	'bg-white'
colors.checkedThumbBgMaterial	string	'bg-md-light-on-primary dark:bg-md-dark-on-primary'
colors.thumbBgIos	string	'bg-white'
colors.thumbBgMaterial	string	'bg-md-light-outline dark:bg-md-dark-outline'
disabled	boolean	false	トグル入力が無効かどうかを定義します
name	string		トグル入力の名前
readonly	boolean	false	トグル入力が読み取り専用かどうかを定義します
touchRipple	boolean	true	マテリアルテーマでタッチリップル効果を有効にします
value	any		トグル入力の値
onChange	function(e)		トグル入力の`change`イベントハンドラー

例

Toggle.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    List,
    ListItem,
    Toggle,
  } from 'konsta/svelte';

  let checked1 = true;
  let checked2 = true;
  let checked3 = true;
  let checked4 = true;
</script>

<Page>
  <Navbar title="Toggle" />

  <List strong inset>
    <ListItem label title="Item 1">
      <Toggle
        slot="after"
        component="div"
        class="-my-1"
        checked={checked1}
        onChange={() => (checked1 = !checked1)}
      />
    </ListItem>
    <ListItem label title="Item 2">
      <Toggle
        slot="after"
        component="div"
        class="-my-1 k-color-brand-red"
        checked={checked2}
        onChange={() => (checked2 = !checked2)}
      />
    </ListItem>
    <ListItem label title="Item 3">
      <Toggle
        slot="after"
        component="div"
        class="-my-1 k-color-brand-green"
        checked={checked3}
        onChange={() => (checked3 = !checked3)}
      />
    </ListItem>
    <ListItem label title="Item 4">
      <Toggle
        slot="after"
        component="div"
        class="-my-1 k-color-brand-yellow"
        checked={checked4}
        onChange={() => (checked4 = !checked4)}
      />
    </ListItem>
  </List>
</Page>