代码之家 › 专栏 › 技术社区 › James Delaney

如何在语义界面中创建卡片?

semantic-ui-react semantic-ui reactjs

James Delaney · 技术社区 · 6 年前

我想做一个网格,像这样组织卡片中的项目:

以下是我迄今为止所做的:

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

如何组织这个卡块?

1 回复 | 直到 6 年前

Lazar Nikolic 6 年前

用卡片而不是网格不是更好吗

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