举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > element 卡片 Element-React Card 卡片

element 卡片 Element-React Card 卡片

2023-06-01 00:18

element 卡片 Element-React Card 卡片

element 卡片 Element-React Card 卡片

element 卡片

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

基础用法

包含标题,内容和操作。

Card 组件包括headerbody部分,header部分需要有显式具名 slot 分发,同时也是可选的。

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">列表内容 1</div>
      <div className="text item">列表内容 2</div>
      <div className="text item">列表内容 3</div>
      <div className="text item">列表内容 4</div>
    </Card>
  )
}

简单卡片

卡片可以只有内容区域。

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

带图片

可配置定义更丰富的内容展示。

配置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

参数 说明 类型 可选值 默认值
header 设置 header,也可以通过 slot#header 传入 DOM string
bodyStyle 设置 body 的样式 object { padding: "20px" }
阅读全文
以上是编程学为你收集整理的element 卡片 Element-React Card 卡片全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部