Checkbox 复选按钮

Checkbox 复选按钮

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

多选框

何时使用

复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项，你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项，不要用复选框，使用开/关切换。

API

复选按钮

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内敛样式	Object	-
checked	选中状态	Boolean	-
defaultChecked	默认选中状态	Boolean	false
disabled	禁用	Boolean	-
indeterminate	Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性	Boolean	-
defaultIndeterminate	Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性	Boolean	false
onChange	状态变化时触发的事件签名:Function(checked: Boolean, e: Event) => void参数:checked: {Boolean} 是否选中e: {Event} Dom 事件对象	Function	() => {}

Checkbox.Group

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内敛样式	Object	-
disabled	整体禁用	Boolean	-
dataSource	可选项列表, 数据项可为 String 或者 Object, 如 `['apple', 'pear', 'orange']` 或者 `[{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}]`	Array<any>	[]
value	被选中的值列表	Array	-
defaultValue	默认被选中的值列表	Array	-
children	通过子元素方式设置内部 checkbox	Array<ReactElement>	-
onChange	选中值改变时的事件签名:Function(value: Array, e: Event) => void参数:value: {Array} 选中项列表e: {Event} Dom 事件对象	Function	() => {}

代码示例

基本

使用 Checkbox 渲染的基本组件。

查看源码在线预览

import { Checkbox } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h6>无标签不同状态的样子</h6>
    未选中：<Checkbox />&nbsp; 默认选中：<Checkbox defaultChecked />&nbsp;
    半选：<Checkbox defaultIndeterminate />&nbsp; 禁用：<Checkbox disabled />&nbsp;
    选中时禁用：<Checkbox disabled checked />&nbsp; 选中：<Checkbox checked />
    <h6>带有label标签的样子</h6>
    <Checkbox>香蕉</Checkbox>
    <Checkbox id="apple" />
    <label htmlFor="apple" className="next-checkbox-label">
      苹果
    </label>
    <label>
      <Checkbox id="pear" />
      <span className="next-checkbox-label">雪梨</span>
    </label>
  </div>,
  mountNode
);

受限组件

使用 CheckboxGroup 渲染的组，通过设置 value 属性可以让组件变成受限组件。

查看源码在线预览

import { Checkbox } from "@icedesign/base";
const { Group: CheckboxGroup } = Checkbox;
const list = [
  {
    value: "apple",
    label: "苹果"
  },
  {
    value: "pear",
    label: "梨"
  },
  {
    value: "orange",
    label: "橙子"
  }
];
class ControlApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ["orange"]
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(selectedItems) {
    console.log("onChange callback", selectedItems);
    this.setState({
      value: selectedItems
    });
  }
  render() {
    return (
      <div style={{ padding: "20px" }}>
        <CheckboxGroup
          value={this.state.value}
          dataSource={list}
          onChange={this.onChange}
        />
        <br />
        <CheckboxGroup
          value={this.state.value}
          dataSource={list}
          onChange={this.onChange}
          disabled
        />
      </div>
    );
  }
}
ReactDOM.render(<ControlApp />, mountNode);

中间状态组件

通过使用 indeterminate 来渲染中间状态的组件。

查看源码在线预览

import { Checkbox, Button } from "@icedesign/base";
class IndeterminateApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      indeterminate: true,
      disabled: false
    };
  }
  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.checked}
          indeterminate={this.state.indeterminate}
          disabled={this.state.disabled}
          onChange={checked => {
            this.setState({ checked: checked, indeterminate: false });
          }}
        />
        <br />
        <br />
        <Button
          type="primary"
          onClick={() => {
            this.setState({ checked: true, indeterminate: false });
          }}
        >
          checked = true
        </Button>
        <br />
        <br />
        <Button
          type="primary"
          onClick={() => {
            this.setState({ checked: false });
          }}
        >
          checked = false
        </Button>
        <br />
        <br />
        <Button
          type="primary"
          onClick={() => {
            this.setState({ checked: false, indeterminate: true });
          }}
        >
          indeterminate = true
        </Button>
        <br />
        <br />
        <Button
          type="primary"
          onClick={() => {
            this.setState({ indeterminate: false });
          }}
        >
          indeterminate = false
        </Button>
        <br />
        <br />
        <Button
          type="primary"
          onClick={() => {
            this.setState({ disabled: !this.state.disabled });
          }}
        >
          toggle disabled
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<IndeterminateApp />, mountNode);

Checkbox嵌套使用

使用 CheckboxGroup，通过直接嵌套 Checkbox 组件来渲染的组。

查看源码在线预览

import { Checkbox } from "@icedesign/base";
const { Group: CheckboxGroup } = Checkbox;
class NestApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ["orange", "orange2"]
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(selectedItems) {
    this.setState({
      value: selectedItems
    });
  }
  render() {
    return (
      <div>
        <CheckboxGroup value={this.state.value} onChange={this.onChange}>
          <Checkbox id="apple" value="apple" disabled>
            苹果
          </Checkbox>
          <Checkbox id="watermelon" value="watermelon">
            西瓜
          </Checkbox>
          <Checkbox id="orange" value="orange">
            橙子
          </Checkbox>
        </CheckboxGroup>
        <br />
        <br />
        <CheckboxGroup
          value={this.state.value}
          onChange={this.onChange}
          disabled
        >
          <Checkbox id="apple2" value="apple2" disabled>
            苹果
          </Checkbox>
          <Checkbox id="watermelon2" value="watermelon2">
            西瓜
          </Checkbox>
          <Checkbox id="orange2" value="orange2">
            橙子
          </Checkbox>
        </CheckboxGroup>
      </div>
    );
  }
}
ReactDOM.render(<NestApp />, mountNode);

非受限组件

使用 CheckboxGroup 渲染的组，通过设置 defaultValue 属性可以让组件变成非受限组件。

查看源码在线预览

import { Checkbox } from "@icedesign/base";
const { Group: CheckboxGroup } = Checkbox;
const list = [
  {
    value: "apple",
    label: "苹果",
    disabled: false
  },
  {
    value: "pear",
    label: "梨"
  },
  {
    value: "orange",
    label: "橙子",
    disabled: true
  }
];
class UnControlApp extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
  onChange(selectedItems) {
    console.log("onChange callback", selectedItems);
  }
  render() {
    return (
      <div style={{ padding: "20px" }}>
        <h4>dataSource</h4>
        <CheckboxGroup
          defaultValue={["apple"]}
          dataSource={list}
          onChange={this.onChange}
        />
        <br />
        <br />
        <CheckboxGroup
          defaultValue={["apple"]}
          dataSource={list}
          onChange={this.onChange}
          disabled
        />
        <br />
        <h4>嵌套使用</h4>
        <CheckboxGroup
          disabled
          defaultValue={["apple"]}
          onChange={this.onChange}
        >
          <Checkbox id="apple" value="apple" disabled>
            苹果
          </Checkbox>
          <Checkbox id="watermelon" value="watermelon">
            西瓜
          </Checkbox>
          <Checkbox id="orange" value="orange">
            橙子
          </Checkbox>
        </CheckboxGroup>
      </div>
    );
  }
}
ReactDOM.render(<UnControlApp />, mountNode);

Checkbox 复选按钮

Checkbox 复选按钮

安装方法

开发指南

何时使用

API

复选按钮

Checkbox.Group

代码示例

相关区块

暂无相关区块