切换 React 组件

切换组件
切换属性
示例

切换组件

以下组件已包含

切换

切换属性

名称	类型	默认值	描述
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>
  );
}