Как создать карту в Semantic UI React? - PullRequest
Новая
       8

Как создать карту в Semantic UI React?

0 голосов
/ 14 сентября 2018

Я хочу сделать сетку и упорядочить элементы на карте следующим образом:

enter image description here

Вот что я сделал до сих пор: 

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

Однако результат не совсем то, что я хочу:

enter image description here

Как организовать этот блок карты?

1 Ответ

0 голосов
/ 14 сентября 2018

Не лучше ли использовать для этого карту, а не сетку 

<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 вместо встроенных стилей. Это лучше для рендеринга и делает ваш код более читабельным.

...