切換 React 組件

切換組件
切換 Props
範例

切換組件

包含以下組件

切換

切換 Props

名稱	類型	預設值	描述
checked	布林值	false	定義是否核取切換輸入
colors	物件		包含 Tailwind CSS 顏色類別的物件
colors.bgIos	字串	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'
colors.bgMaterial	字串	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.borderMaterial	字串	'border-md-light-outline dark:border-md-dark-outline'
colors.checkedBgIos	字串	'bg-primary'
colors.checkedBgMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.checkedBorderMaterial	字串	'border-md-light-primary dark:border-md-dark-primary'
colors.checkedThumbBgIos	字串	'bg-white'
colors.checkedThumbBgMaterial	字串	'bg-md-light-on-primary dark:bg-md-dark-on-primary'
colors.thumbBgIos	字串	'bg-white'
colors.thumbBgMaterial	字串	'bg-md-light-outline dark:bg-md-dark-outline'
component	字串	'label'	組件的 HTML 元素
defaultChecked	布林值	false	定義是否核取切換輸入，以用於非受控組件的情況
disabled	布林值	false	定義是否禁用切換輸入
name	字串		切換輸入名稱
readOnly	布林值	false	定義切換輸入是否為唯讀
touchRipple	布林值	true	在 Material 主題中啟用觸控漣漪效果
value	任何		切換輸入值
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>
  );
}