トグル React コンポーネント

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

トグルコンポーネント

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

トグル

トグルプロパティ

名前	型	デフォルト	説明
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'
component	string	'label'	コンポーネントの HTML 要素
defaultChecked	boolean	false	アンコントロールドコンポーネントの場合、トグル入力がチェックされているかどうかを定義します
disabled	boolean	false	トグル入力が無効になっているかどうかを定義します
name	string		トグル入力の名前
readOnly	boolean	false	トグル入力が読み取り専用かどうかを定義します
touchRipple	boolean	true	マテリアルテーマでタッチリップル効果を有効にします
value	any		トグル入力の値
onChange	function(e)		トグル入力の `change` イベントハンドラー

例

Toggle.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  List,
  ListItem,
  Toggle,
} from 'konsta/react';

export default function TogglePage() {
  const [checked1, setChecked1] = useState(true);
  const [checked2, setChecked2] = useState(true);
  const [checked3, setChecked3] = useState(true);
  const [checked4, setChecked4] = useState(true);
  return (
    <Page>
      <Navbar
        title="Toggle"
        />

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