@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/checkbox/_story/checkbox.stories.js

@@ -0,0 +1,943 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import Button from '../../button';
+import Popover from '../../popover';
+import Checkbox from '../index';
+import CheckboxGroup from '../checkboxGroup';
+import { Col, Input, Row } from '../../index';
+import { IconClose } from '@douyinfe/semi-icons';
+
+export default {
+  title: 'Checkbox',
+}
+
+export const CheckboxDefault = () => {
+  return (
+    <div>
+      <Checkbox onChange={e => console.log(e)} value={1} onChange={v => console.log(v)}>
+        hello
+      </Checkbox>
+      <br />
+      <Checkbox checked>这是一个受控的checked=true的checkbox,没有配onChange</Checkbox>
+      <br />
+      <Checkbox defaultChecked>这是一个不受控的defaultChecked=true的checkbox</Checkbox>
+      <br />
+      <Checkbox disabled>这是一个受控的disabled=true的checkbox</Checkbox>
+      <br />
+      <Checkbox checked disabled>
+        既checked又disabled
+      </Checkbox>
+      <br />
+      <Checkbox indeterminate>indeterminate</Checkbox>
+    </div>
+  );
+};
+
+export const CheckboxWithoutText = () => {
+  return (
+    <div>
+      <Checkbox onChange={e => console.log(e)} />
+    </div>
+  );
+};
+
+class CheckboxControl extends React.Component {
+  state = {
+    checked: true,
+    disabled: false,
+  };
+  toggleChecked = () => {
+    this.setState({
+      checked: !this.state.checked,
+    });
+  };
+  toggleDisable = () => {
+    this.setState({
+      disabled: !this.state.disabled,
+    });
+  };
+  onChange = e => {
+    console.log('checked = ', e.target.checked);
+    this.setState({
+      checked: e.target.checked,
+    });
+  };
+
+  render() {
+    const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${
+      this.state.disabled ? 'Disabled' : 'Enabled'
+    }`;
+    return (
+      <div>
+        <p
+          style={{
+            marginBottom: '20px',
+          }}
+        >
+          <Checkbox
+            checked={this.state.checked}
+            disabled={this.state.disabled}
+            onChange={this.onChange}
+          >
+            {label}
+          </Checkbox>
+        </p>
+        <p>
+          <Button type="primary" size="small" onClick={this.toggleChecked}>
+            {!this.state.checked ? 'Check' : 'Uncheck'}
+          </Button>
+          <Button
+            style={{
+              marginLeft: '10px',
+            }}
+            type="primary"
+            size="small"
+            onClick={this.toggleDisable}
+          >
+            {!this.state.disabled ? 'Disable' : 'Enable'}
+          </Button>
+        </p>
+      </div>
+    );
+  }
+}
+
+export const CheckboxControlledDisabledChecked = () => <CheckboxControl />;
+
+CheckboxControlledDisabledChecked.story = {
+  name: 'checkbox controlled disabled & checked',
+};
+
+class GroupDemo extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      value: [],
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(value) {
+    console.log(value);
+    this.setState({
+      value: value,
+    });
+  }
+
+  render() {
+    let { value } = this.state;
+    return (
+      <>
+        水平Group
+        <Checkbox.Group direction="horizontal" onChange={v => console.log(v)}>
+          <Checkbox value="dy">抖音</Checkbox>
+          <Checkbox value="hotsoon">火山</Checkbox>
+          <Checkbox value="toutiao">今日头条</Checkbox>
+          <Checkbox value="xigua">西瓜视频</Checkbox>
+        </Checkbox.Group>
+        <br />
+        <br />
+        垂直Group
+        <Checkbox.Group onChange={v => console.log(v)}>
+          <Checkbox value="dy">抖音</Checkbox>
+          <Checkbox value="hotsoon">火山</Checkbox>
+          <Checkbox value="toutiao">今日头条</Checkbox>
+          <Checkbox value="xigua">西瓜视频</Checkbox>
+        </Checkbox.Group>
+        <br />
+        <br />
+        默认Group
+        <Checkbox.Group direction="horizontal" defaultValue={['xigua']} onChange={console.log}>
+          <Checkbox value="dy">抖音</Checkbox>
+          <Checkbox value="hotsoon">火山</Checkbox>
+          <Checkbox value="toutiao">今日头条</Checkbox>
+          <Checkbox value="xigua">西瓜视频</Checkbox>
+        </Checkbox.Group>
+        <br />
+        <br />
+        受控Group
+        <Checkbox.Group direction="horizontal" value={value} onChange={console.log}>
+          <Checkbox value="dy">抖音</Checkbox>
+          <Checkbox value="hotsoon">火山</Checkbox>
+          <Checkbox value="toutiao">今日头条</Checkbox>
+          <Checkbox value="xigua">西瓜视频</Checkbox>
+        </Checkbox.Group>
+        <br />
+        <br />
+        受控Group+onChange
+        <Checkbox.Group direction="horizontal" value={value} onChange={this.onChange}>
+          <Checkbox value="dy">抖音</Checkbox>
+          <Checkbox value="hotsoon">火山</Checkbox>
+          <Checkbox value="toutiao">今日头条</Checkbox>
+          <Checkbox value="xigua">西瓜视频</Checkbox>
+        </Checkbox.Group>
+        <br />
+        <br />
+        disabled
+        <Checkbox.Group disabled>
+          <Checkbox value="dy">抖音</Checkbox>
+          <Checkbox value="hotsoon">火山</Checkbox>
+          <Checkbox value="toutiao">今日头条</Checkbox>
+          <Checkbox value="xigua">西瓜视频</Checkbox>
+        </Checkbox.Group>
+      </>
+    );
+  }
+}
+
+export const CheckboxGroupDemo = () => <GroupDemo />;
+
+export const CheckboxGroupWithOptions = () => {
+  function onChange(checkedValues) {
+    console.log('checked = ', checkedValues);
+  }
+
+  const plainOptions = ['green', 'red', 'pink'];
+  const options = [
+    {
+      label: 'green',
+      value: 'green',
+    },
+    {
+      label: 'red',
+      value: 'red',
+    },
+    {
+      label: 'pink',
+      value: 'pink',
+      disabled: true,
+    },
+  ];
+  const optionsWithDisabled = [
+    {
+      label: 'green',
+      value: 'green',
+    },
+    {
+      label: 'red',
+      value: 'red',
+    },
+    {
+      label: 'pink',
+      value: 'pink',
+      disabled: false,
+    },
+  ];
+  return (
+    <div>
+      default
+      <CheckboxGroup options={plainOptions} defaultValue={['green']} onChange={onChange} />
+      <br />
+      <br />
+      受控
+      <CheckboxGroup options={plainOptions} value={['green']} onChange={onChange} />
+      <br />
+      最后一个disabled
+      <br />
+      <CheckboxGroup options={options} defaultValue={['red']} onChange={onChange} />
+      <br />
+      全体disabled， 优先父级disabled，次选子级disabled
+      <br />
+      <CheckboxGroup
+        options={optionsWithDisabled}
+        disabled
+        defaultValue={['green']}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+export const CheckboxGroupWithOtherTypeChild = () => {
+  return (
+    <CheckboxGroup>
+      <div className="test">
+        <Checkbox value="green" extra="苹果">
+          green
+        </Checkbox>
+        <Checkbox value="red" extra="梨">
+          red
+        </Checkbox>
+        <Checkbox value="pink" extra="橙子">
+          pink
+        </Checkbox>
+      </div>
+    </CheckboxGroup>
+  );
+};
+
+CheckboxGroupWithOtherTypeChild.story = {
+  name: 'checkboxGroup-直接后代是其他类型Node',
+};
+
+export const CheckboxExtra = () => {
+  let options = [
+    {
+      label: 'green',
+      value: 'green',
+      extra: '苹果',
+    },
+    {
+      label: 'red',
+      value: 'red',
+      extra: '梨',
+    },
+    {
+      label: 'pink',
+      value: 'pink',
+      disabled: true,
+      extra: '橙子',
+    },
+  ];
+  return (
+    <div>
+      checkbox
+      <Checkbox
+        onChange={e => console.log(e)}
+        extra="我是副文本，这是辅助的文本，辅助文本会更长一些，甚至还可能换行"
+      >
+        我是主文本
+      </Checkbox>
+      <Checkbox
+        style={{
+          width: 200,
+        }}
+        onChange={e => console.log(e)}
+        extra="我是副文本，这是辅助的文本，辅助文本会更长一些，甚至还可能换行"
+      >
+        我是主文本
+      </Checkbox>
+      <br />
+      <br />
+      checkboxGroup
+      <CheckboxGroup>
+        <Checkbox value="green" extra="苹果">
+          green
+        </Checkbox>
+        <Checkbox value="red" extra="梨">
+          red
+        </Checkbox>
+        <Checkbox value="pink" extra="橙子">
+          pink
+        </Checkbox>
+      </CheckboxGroup>
+      <br />
+      <br />
+      checkboxGroup with options
+      <CheckboxGroup options={options}></CheckboxGroup>
+    </div>
+  );
+};
+
+export const CheckboxGrid = () => {
+  return (
+    <Checkbox.Group
+      style={{
+        width: '100%',
+      }}
+      onChange={v => console.log(v)}
+    >
+      <Row>
+        <Col span={8}>
+          <Checkbox value="A">
+            无限长的一串字The Storybook webapp UI can be customised with this addon. It can be used
+            to change the header, show/hide various UI elements and to enable full-screen mode by
+            default.
+          </Checkbox>
+        </Col>
+        <Col span={8}>
+          <Checkbox value="B">B</Checkbox>
+        </Col>
+        <Col span={8}>
+          <Checkbox value="C">C</Checkbox>
+        </Col>
+        <Col span={8}>
+          <Checkbox value="D">D</Checkbox>
+        </Col>
+        <Col span={8}>
+          <Checkbox value="E">E</Checkbox>
+        </Col>
+      </Row>
+    </Checkbox.Group>
+  );
+};
+
+CheckboxGrid.story = {
+  name: 'checkbox + grid',
+};
+
+export const IndeterminateDemo = () => {
+  const options = ['yellow', 'green', 'red'];
+  const defaultCheckedColors = ['yellow', 'red'];
+
+  const [checkedList, setCheckList] = useState(defaultCheckedColors);
+  const [indeterminate, setIndeterminate] = useState(true);
+  const [checkAll, setCheckAll] = useState(false);
+
+  const onCheckListChange = checkedList => {
+    setCheckList([...checkedList]);
+    setIndeterminate(!!checkedList.length && checkedList.length < options.length);
+    setCheckAll(checkedList.length === options.length);
+  };
+
+  const onCheckAllChange = e => {
+    setCheckList([...(e.target.checked ? options : [])]);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          borderBottom: '1px solid #E9E9E9',
+        }}
+      >
+        <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+          Check all
+        </Checkbox>
+      </div>
+      <br />
+      <CheckboxGroup options={options} value={checkedList} onChange={onCheckListChange} />
+    </div>
+  );
+};
+
+export const CheckboxRenderInDiv = () => (
+  <>
+    <div
+      onClick={(...args) => {
+        console.log('clicked checkbox outer: ', ...args);
+      }}
+    >
+      <Checkbox
+        onChange={(...args) => {
+          console.log('clicked checkbox: ', ...args);
+        }}
+      />
+    </div>
+  </>
+);
+
+export const CheckboxInPopover = () => (
+  <div>
+    <Popover
+      content={
+        <div>
+          <Checkbox>选项一</Checkbox>
+          <Checkbox defaultChecked>选项二</Checkbox>
+          <Checkbox>选项三</Checkbox>
+        </div>
+      }
+    >
+      <Button>click me</Button>
+    </Popover>
+  </div>
+)
+
+const SwitchCheckedFromTrue2Undefined = () => {
+  const [props, setProps] = useState();
+  const [flag, setFlag] = useState(0);
+
+  const change = () => {
+    if (flag === 0) {
+      setFlag(1);
+      setProps({ checked: true });
+    } else {
+      setFlag(0);
+      setProps({ checked: false });
+    }
+  };
+
+  return (
+    <>
+      <Checkbox {...props}>123</Checkbox>
+      <Button onClick={() => change()}>switch</Button>
+    </>
+  );
+};
+
+export const CheckboxSwitchCheckedTrueUndefined = () => <SwitchCheckedFromTrue2Undefined />;
+
+CheckboxSwitchCheckedTrueUndefined.story = {
+  name: 'checkbox switch checked: true => undefined',
+};
+
+const TransformSelect = props => {
+  const { onChange, value, options = [], defaultValue = [], placeholder } = props;
+  const [currentValue, setCurrentValue] = useState([]);
+  const [inputValue, setInputValue] = useState(''); // 变化
+
+  const onSelectChange = useCallback(() => {
+    setCurrentValue(currentValue);
+    onChange && onChange(currentValue);
+  }, []); // 选择某一个
+
+  const removeValue = useCallback(
+    currentIndex => {
+      currentValue.splice(currentIndex, 1);
+      onSelectChange([...currentValue]);
+    },
+    [currentValue]
+  ); // 选择所有
+
+  const selectAllValue = useCallback(() => {
+    const value = options.map(option => option.value);
+    onSelectChange(value);
+  }, [options]);
+  const viewsOptions = useMemo(() => {
+    if (inputValue) {
+      const newOptions = options.filter(option => option.label.indexOf(inputValue) !== -1);
+      return newOptions;
+    }
+
+    return options;
+  }, [options, inputValue]);
+  return (
+    <div>
+      <div>
+        <div>
+          <Input
+            value={inputValue}
+            prefix="search"
+            clearable
+            onChange={value => setInputValue(value)}
+            placeholder={placeholder}
+          />
+        </div>
+        <div>
+          <span>{`共 ${options.length} 项`}</span>
+          <Button type="tertiary" size="small" theme="borderless" onClick={() => selectAllValue()}>
+            全选
+          </Button>
+        </div>
+        <div>
+          <CheckboxGroup
+            options={viewsOptions}
+            value={currentValue}
+            onChange={onSelectChange}
+            direction="vertical"
+          />
+        </div>
+      </div>
+      <div>
+        <div>
+          <span>{`已选 ${currentValue.length} 项`}</span>
+          <Button
+            type="tertiary"
+            size="small"
+            theme="borderless"
+            onClick={() => onSelectChange([])}
+          >
+            清空
+          </Button>
+        </div>
+        <div>
+          {currentValue.length > 0 ? (
+            currentValue.map((value, idx) => {
+              // 不存在不需要展示
+              const option = options.find(option => option.value === value);
+              return (
+                <div key={option.key ? option.key : idx}>
+                  <span>{option.label}</span>
+                  <span onClick={() => removeValue(idx)}>
+                    <IconClose size="small" />
+                  </span>
+                </div>
+              );
+            })
+          ) : (
+            <div>暂无内容，可从左侧勾选</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const BugDemo = () => <TransformSelect />;
+
+export const CheckboxGroupCardStyle = () => (
+  <>
+    <div>常见情况</div>
+    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+      <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>radio disabled</div>
+    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>checkboxGroup disabled</div>
+    <CheckboxGroup type="card" direction="horizontal" disabled defaultValue={['1']}>
+      <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>文字很长，并且没有设置宽度，因此换行显示</div>
+    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>设置了width=180</div>
+    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 180 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 180 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 180 }}
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>没有extra，width=180</div>
+    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+      <Checkbox value="1" style={{ width: 180 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" style={{ width: 180 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" style={{ width: 180 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>没有标题，width=380</div>
+    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      ></Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      ></Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      ></Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <hr />
+    <div>下面是垂直的情况：</div>
+    <div>常见情况</div>
+    <CheckboxGroup direction="vertical" type="card" defaultValue={['1']}>
+      <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>没有设置宽度</div>
+    <CheckboxGroup direction="vertical" type="card" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>设置了width=380</div>
+    <CheckboxGroup direction="vertical" type="card" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+  </>
+);
+
+export const CheckboxGroupPureCardStyle = () => (
+  <>
+    <div>常见情况</div>
+    <CheckboxGroup type="pureCard" defaultValue={['1']}>
+      <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>radio disabled</div>
+    <CheckboxGroup type="pureCard" defaultValue={['1']}>
+      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>checkboxGroup disabled</div>
+    <CheckboxGroup type="pureCard" disabled defaultValue={['1']}>
+      <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>文字很长，并且没有设置宽度，因此换行显示</div>
+    <CheckboxGroup type="pureCard" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>设置了width=180</div>
+    <CheckboxGroup type="pureCard" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 180 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 180 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 180 }}
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>没有extra，width=180</div>
+    <CheckboxGroup type="pureCard" defaultValue={['1']}>
+      <Checkbox value="1" style={{ width: 180 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" style={{ width: 180 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" style={{ width: 180 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>没有标题，width=380</div>
+    <CheckboxGroup type="pureCard" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      ></Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      ></Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      ></Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <hr />
+    <div>下面是垂直的情况：</div>
+    <div>常见情况</div>
+    <CheckboxGroup direction="vertical" type="pureCard" defaultValue={['1']}>
+      <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+      <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>没有设置宽度</div>
+    <CheckboxGroup direction="vertical" type="pureCard" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+    <br />
+    <br />
+    <div>设置了width=380</div>
+    <CheckboxGroup direction="vertical" type="pureCard" defaultValue={['1']}>
+      <Checkbox
+        value="1"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="2"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      >
+        多选框标题
+      </Checkbox>
+      <Checkbox
+        value="3"
+        extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
+        style={{ width: 380 }}
+      >
+        多选框标题
+      </Checkbox>
+    </CheckboxGroup>
+  </>
+);