複選框 React 組件

複選框組件
複選框屬性
複選框列表
範例

複選框組件

包含以下組件

複選框

複選框屬性

名稱	類型	預設值	描述
checked	布林值	false	定義複選框輸入是否已選取
colors	物件		具有 Tailwind CSS 色彩類別的物件
colors.bgCheckedIos	字串	'bg-primary'
colors.bgCheckedMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.borderCheckedIos	字串	'border-primary'
colors.borderCheckedMaterial	字串	'border-md-light-primary dark:border-md-dark-primary'
colors.borderIos	字串	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.borderMaterial	字串	'border-md-light-outline dark:border-md-dark-outline'
component	字串	'label'	組件的 HTML 元素
defaultChecked	布林值	false	定義複選框輸入是否已選取，用於非受控組件的情況
disabled	布林值	false	定義複選框輸入是否已停用
indeterminate	布林值	false	定義複選框輸入是否處於不確定狀態
name	字串		複選框輸入名稱
readOnly	布林值	false	定義複選框輸入是否為唯讀
touchRipple	布林值	true	在 Material 主題中啟用觸控漣漪效果
value	任何		複選框輸入值
onChange	函式(e)		當複選框狀態變更時會觸發事件

複選框列表

複選框列表不是一個獨立的組件，而只是使用 <List> 和 <ListItem> 組件的特定情況。

<List>
  {/* Additional "label" prop on ListItem */}
  <ListItem
    label
    title="Books"
    media={
      <>
        {/* Pass Checkbox to list item media */}
        <Checkbox component="div" name="my-checkbox" />
      </>
    }
  />
  <ListItem
    label
    title="Movies"
    media={
      <>
        {/* Pass Checkbox to list item media */}
        <Checkbox component="div" name="my-checkbox" />
      </>
    }
  />
</List>

範例

Checkbox.jsx

import React, { useState } from 'react';

import {
  Page,
  Navbar,
  NavbarBackLink,
  Checkbox,
  BlockTitle,
  Block,
  List,
  ListItem,
} from 'konsta/react';

export default function CheckboxPage() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);

  // Group
  const [group, setGroup] = useState(['Books']);
  const toggleGroupValue = (value) => {
    if (group.includes(value)) group.splice(group.indexOf(value), 1);
    else group.push(value);
    setGroup([...group]);
  };

  // Indeterminate
  const [movies, setMovies] = useState(['Movie 1']);
  const onMovieChange = (e) => {
    const value = e.target.value;
    if (e.target.checked) {
      movies.push(value);
    } else {
      movies.splice(movies.indexOf(value), 1);
    }
    setMovies([...movies]);
  };
  const onMoviesChange = () => {
    if (movies.length === 1 || movies.length === 0) {
      setMovies(['Movie 1', 'Movie 2']);
    } else if (movies.length === 2) {
      setMovies([]);
    }
  };

  // Media
  const [media, setMedia] = useState(['Item 1']);
  const toggleMediaValue = (value) => {
    if (media.includes(value)) media.splice(media.indexOf(value), 1);
    else media.push(value);
    setMedia([...media]);
  };

  return (
    <Page>
      <Navbar
        title="Checkbox"
        />

      <BlockTitle>Inline</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Lorem{' '}
          <Checkbox
            name="checkbox-1"
            checked={checked1}
            onChange={(e) => setChecked1(e.target.checked)}
          />{' '}
          ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo
          nihil aut eius commodi sint eveniet aliquid eligendi{' '}
          <Checkbox
            name="checkbox-2"
            checked={checked2}
            onChange={(e) => setChecked2(e.target.checked)}
          />{' '}
          ad delectus impedit tempore nemo, enim vel praesentium consequatur
          nulla mollitia!
        </p>
      </Block>

      <BlockTitle>Checkbox Group</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Books')}
              onChange={() => toggleGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Movies')}
              onChange={() => toggleGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Food')}
              onChange={() => toggleGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Drinks')}
              onChange={() => toggleGroupValue('Drinks')}
            />
          }
        />
      </List>

      <BlockTitle>Indeterminate State</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Movies"
          name="demo-checkbox"
          media={
            <Checkbox
              checked={movies.length === 2}
              indeterminate={movies.length === 1}
              onChange={onMoviesChange}
            />
          }
        >
          <ul className="ps-12">
            <ListItem
              label
              title="Movie 1"
              media={
                <Checkbox
                  name="demo-checkbox"
                  value="Movie 1"
                  checked={movies.indexOf('Movie 1') >= 0}
                  onChange={onMovieChange}
                />
              }
            />
            <ListItem
              label
              title="Movie 2"
              media={
                <Checkbox
                  name="demo-checkbox"
                  value="Movie 2"
                  checked={movies.indexOf('Movie 2') >= 0}
                  onChange={onMovieChange}
                />
              }
            />
          </ul>
        </ListItem>
      </List>

      <BlockTitle>With Media Lists</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Facebook"
          after="17:14"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Checkbox
              component="div"
              name="demo-media-checkbox"
              checked={media.includes('Item 1')}
              onChange={() => toggleMediaValue('Item 1')}
            />
          }
        />
        <ListItem
          label
          title="John Doe (via Twitter)"
          after="17:11"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Checkbox
              component="div"
              name="demo-media-checkbox"
              checked={media.includes('Item 2')}
              onChange={() => toggleMediaValue('Item 2')}
            />
          }
        />
      </List>
    </Page>
  );
}