reactjs - 如何在 Semantic UI React 中创建卡片?
问题描述
我想制作一个网格并像这样组织卡片中的项目:
这是我到目前为止所做的:
<Grid stackable style={{border: '1px solid lack;'}}>
<Grid.Row>
<Grid.Column width={7}>
<Header
style={{ padding: '10px' }}
as="h3"
color={headerColor}
textAlign="left"
content="Church Mutual Worker's Compensation Claim"
/>
</Grid.Column>
<div style={{marginTop: '0px'}}>#ID-1234567</div>
</Grid.Row>
<Grid.Row>
<Grid.Column width={7}>
<p>
Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
<span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
</p>
</Grid.Column>
<Grid.Column width={5}>
<Form.Button color="red" size="mini" content="Urgent" />
</Grid.Column>
</Grid.Row>
</Grid>
但是,结果并不是我想要的:
如何组织这个卡块?
解决方案
使用卡片而不是网格不是更好吗
<Card>
<Card.Content>
<Card.Header style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
<div>Church Mutual Worker's Compensation Claim</div>
<div>#ID-1234567</div>
</Card.Header>
<Card.Meta style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
<p>
Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
<span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
</p>
<Button color="red" size="mini" content="Urgent" />
</Card.Meta>
</Card.Content>
</Card>
在此之后,您只需要添加一些样式以使其看起来更像您想要的。另外,我建议使用 className 而不是内联样式。它更适合渲染并使您的代码更具可读性。
推荐阅读
- javascript - 如何检测文本中的反引号(`)并用javascript中的代码标签换行
- python - python中的中位数下采样
- c# - Exchange EWS、日历 FindItems 与 FindAppointments?
- docker-compose - docker-compose up 在哪里保存它的图像?
- python - 将 pandas 数据框的多列与一列进行比较
- flutter - 定位的小部件必须直接放置在 Stack 小部件内
- javascript - 悬停/滚动时具有不同速度的 4 列
- c# - 服务未捕获 SessionChange 事件
- javascript - 单引号字符串中的双引号 - NodeJs
- java - Gson 使用扩展类反序列化当前对象