Checkbox React 元件

Checkbox React 元件表示 Checkbox 元件。

Checkbox 元件

包含以下元件

核取方塊

Checkbox 屬性

屬性	類型	說明
<Checkbox> 屬性
checked	布林值	定義核取方塊輸入是否已勾選
defaultChecked	布林值	定義核取方塊輸入是否已勾選，針對不受控元件的情況
indeterminate	布林值	定義核取方塊輸入是否處於不確定狀態
name	字串數字	核取方塊輸入名稱
value	字串數字布林值	核取方塊輸入值
disabled	布林值	定義核取方塊輸入是否已停用
readonly	布林值	定義核取方塊輸入是否為唯讀

Checkbox 事件

事件	說明
<Checkbox> 事件
change	當核取方塊狀態變更時觸發事件

核取方塊清單

核取方塊清單並非獨立元件，而只是使用 <List>、<ListItem> 的特殊情況。

<List>
  <!-- Additional "checkbox" prop to enable checkbox list item -->
  <ListItem checkbox value="check_1" checked title="Checkbox 1"></ListItem>
  <ListItem checkbox value="check_2" title="Checkbox 2"></ListItem>
</List>

範例

checkbox.jsx

import React, { useState } from 'react';
import { Navbar, Page, BlockTitle, Block, List, ListItem, Checkbox } from 'framework7-react';

export default () => {
  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([]);
    }
  };
  return (
    <Page>
      <Navbar title="Checkbox" />
      <BlockTitle>Inline</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Lorem <Checkbox name="checkbox-1"></Checkbox> ipsum dolor sit amet, consectetur
          adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi{' '}
          <Checkbox name="checkbox-2" defaultChecked></Checkbox> ad delectus impedit tempore nemo,
          enim vel praesentium consequatur nulla mollitia!
        </p>
      </Block>

      <BlockTitle>Checkbox Group</BlockTitle>
      <List strongIos outlineIos dividersIos>
        <ListItem checkbox title="Books" name="demo-checkbox" defaultChecked />
        <ListItem checkbox title="Movies" name="demo-checkbox" />
        <ListItem checkbox title="Food" name="demo-checkbox" />
        <ListItem checkbox title="Drinks" name="demo-checkbox" />
      </List>

      <List strongIos outlineIos dividersIos>
        <ListItem checkbox checkboxIcon="end" title="Books" name="demo-checkbox" defaultChecked />
        <ListItem checkbox checkboxIcon="end" title="Movies" name="demo-checkbox" />
        <ListItem checkbox checkboxIcon="end" title="Food" name="demo-checkbox" />
        <ListItem checkbox checkboxIcon="end" title="Drinks" name="demo-checkbox" />
      </List>

      <BlockTitle>Indeterminate State</BlockTitle>
      <List strongIos outlineIos dividersIos>
        <ListItem
          checkbox
          title="Movies"
          name="demo-checkbox"
          checked={movies.length === 2}
          indeterminate={movies.length === 1}
          onChange={(e) => onMoviesChange(e)}
        >
          <ul slot="root">
            <ListItem
              checkbox
              title="Movie 1"
              name="demo-checkbox"
              value="Movie 1"
              checked={movies.indexOf('Movie 1') >= 0}
              onChange={(e) => onMovieChange(e)}
            />
            <ListItem
              checkbox
              title="Movie 2"
              name="demo-checkbox"
              value="Movie 2"
              checked={movies.indexOf('Movie 2') >= 0}
              onChange={(e) => onMovieChange(e)}
            />
          </ul>
        </ListItem>
      </List>

      <BlockTitle>With Media Lists</BlockTitle>
      <List mediaList strongIos outlineIos dividersIos>
        <ListItem
          checkbox
          defaultChecked
          name="demo-media-checkbox"
          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."
        />
        <ListItem
          checkbox
          name="demo-media-checkbox"
          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."
        />
        <ListItem
          checkbox
          name="demo-media-checkbox"
          title="Facebook"
          after="16:48"
          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."
        />
        <ListItem
          checkbox
          name="demo-media-checkbox"
          title="John Doe (via Twitter)"
          after="15:32"
          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."
        />
      </List>
    </Page>
  );
};

改善此文件

在此頁面上

Checkbox 元件
Checkbox 屬性
Checkbox 事件
核取方塊清單
範例