ant-design/components/empty/demo/config-provider.md
dingkang 58df74c38e
docs: replace class component with hooks (#35519)
* docs(badge): replace class component with hooks

* docs(button): replace class component with hooks

* docs(calendar): replace class component with hooks

* docs(card): replace class component with hooks

* docs(button): replace class component with hooks

* chore(deps): remove webpack devDependencies

* docs(cascader): replace class component with hooks

* docs(checkbox): replace class component with hooks

* docs(collapse): replace class component with hooks

* docs(comment): replace class component with hooks

* docs(descriptions): replace class component with hooks

* docs(config-provider): replace class component with hooks

* docs(date-picker): replace class component with hooks

* docs(drawer): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(empty): replace class component with hooks

* docs(grid): replace class component with hooks

* docs(input): replace class component with hooks

* docs(input-number): replace class component with hooks

* docs(demo): fix lint error
2022-05-14 16:40:42 +08:00

1.8 KiB

order title
3
zh-CN en-US
全局化配置 ConfigProvider

zh-CN

自定义全局组件的 Empty 样式。

en-US

Use ConfigProvider set global Empty style.

import {
  ConfigProvider,
  Switch,
  Divider,
  TreeSelect,
  Select,
  Cascader,
  Transfer,
  Table,
  List,
} from 'antd';
import { SmileOutlined } from '@ant-design/icons';

const customizeRenderEmpty = () => (
  <div style={{ textAlign: 'center' }}>
    <SmileOutlined style={{ fontSize: 20 }} />
    <p>Data Not Found</p>
  </div>
);

const style = { width: 200 };

export default () => {
  const [customize, setCustomize] = React.useState(false);

  return (
    <div>
      <Switch
        unCheckedChildren="default"
        checkedChildren="customize"
        checked={customize}
        onChange={value => {
          setCustomize(value);
        }}
      />

      <Divider />

      <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
        <div className="config-provider">
          <h4>Select</h4>
          <Select style={style} />

          <h4>TreeSelect</h4>
          <TreeSelect style={style} treeData={[]} />

          <h4>Cascader</h4>
          <Cascader style={style} options={[]} showSearch />

          <h4>Transfer</h4>
          <Transfer />

          <h4>Table</h4>
          <Table
            style={{ marginTop: 8 }}
            columns={[
              {
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
              },
              {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
              },
            ]}
          />

          <h4>List</h4>
          <List />
        </div>
      </ConfigProvider>
    </div>
  );
};