Element-React Card 卡片

將信息聚合在卡片容器中展示。

基礎(chǔ)用法

包含標(biāo)題，內(nèi)容和操作。

Card 組件包括header和body部分，header部分需要有顯式具名 slot 分發(fā)，同時(shí)也是可選的。

render() {
  return (
    <Card
      className="box-card"
      header={
        <div className="clearfix">
          <span style={{ "lineHeight": "36px" }}>卡片名稱</span>
          <span style={{ "float": "right" }}>
            <Button type="primary">操作按鈕</Button>
          </span>
        </div>
      }
    >
      <div className="text item">列表內(nèi)容 1</div>
      <div className="text item">列表內(nèi)容 2</div>
      <div className="text item">列表內(nèi)容 3</div>
      <div className="text item">列表內(nèi)容 4</div>
    </Card>
  )
}

簡單卡片

卡片可以只有內(nèi)容區(qū)域。

render() {
  return (
    <Card className="box-card">
      <div className="text item">列表內(nèi)容 0</div>
      <div className="text item">列表內(nèi)容 1</div>
      <div className="text item">列表內(nèi)容 2</div>
      <div className="text item">列表內(nèi)容 3</div>
    </Card>
  )
}

帶圖片

可配置定義更豐富的內(nèi)容展示。

配置body-style屬性來自定義body部分的style，我們還使用了布局組件。

render() {
  return (
    <Layout.Row>
      <Layout.Col span={ 8 } offset={ 0 }>
        <Card bodyStyle={{ padding: 0 }}>
          <img src={this.props.imgSrc} className="image" />
          <div style={{ padding: 14 }}>
            <span>好吃的漢堡</span>
            <div className="bottom clearfix">
              <time className="time">2016-10-21 16:19</time>
              <Button type="text" className="button">操作按鈕</Button>
            </div>
          </div>
        </Card>
      </Layout.Col>
      <Layout.Col span={ 8 } offset={ 2 }>
        <Card bodyStyle={{ padding: 0 }}>
          <img src={this.props.imgSrc} className="image" />
          <div style={{ padding: 14 }}>
            <span>好吃的漢堡</span>
            <div className="bottom clearfix">
              <time className="time">2016-10-21 16:19</time>
              <Button type="text" className="button">操作按鈕</Button>
            </div>
          </div>
        </Card>
      </Layout.Col>
    </Layout.Row>
  )
}

Attributes