ant-design/components/card/demo/loading.md
2018-06-27 16:09:58 +08:00

739 B

order title
5
zh-CN en-US
预加载的卡片 Loading card

zh-CN

数据读入前会有文本块样式。

en-US

Shows a loading indicator while the contents of the card is being fetched.

import { Card, Button } from 'antd';

class LoadingCard extends React.Component {
  state = {
    loading: true,
  }

  handleClick = () => {
    this.setState({ loading: !this.state.loading });
  }

  render() {
    return (
      <div>
        <Card loading={this.state.loading} title="Card title">
          Whatever content
        </Card>
        <Button onClick={this.handleClick} style={{ marginTop: 16 }}>Toggle loading</Button>
      </div>
    );
  }
}

ReactDOM.render(
  <LoadingCard />,
  mountNode);