格式化 React 语义 UI 列表 'Field Name' 和 'Value'

Question

如何格式化 React Semantic UI 列表元素 (https://react.semantic-ui.com/elements/list/) similar to style used by default React Semantic UI form (https://react.semantic-ui.com/collections/form/#types-form)。我正在尝试确保表单字段和结果列表都是统一设计的。谢谢！

         <Segment>
          <List divided verticalAlign="middle">
            {content.name && content.name && (
              <List.Item>
                <List.Content>Name: {content.title}</List.Content>
              </List.Item>
            )}

            {content.description && (
              <List.Item>Description: {content.description}</List.Item>
            )}
            {content.ContractingProcess && (
              <List.Item>
                Contracting Process: {content.ContractingProcess}
              </List.Item>
            )}

            {content.rationale && content.rationale.data && (
              <List.Item>
                <span>Rationale:</span>
                <p
                  dangerouslySetInnerHTML={{
                    __html: content.rationale.data,
                  }}
                />
              </List.Item>
            )}

            {content.ModificationType && (
              <List.Item>
                Modification Type: {content.ModificationType.title}
              </List.Item>
            )}

            {content.oldContractValue && (
              <List.Item>
                Old Contract Value: {content.oldContractValue}
              </List.Item>
            )}

            {content.oldContractValue_currency && (
              <List.Item>
                Old Contract Value Currency:
                {content.oldContractValue_currency.title}
              </List.Item>
            )}

            {content.newContractValue && (
              <List.Item>
                New Contract Value:{content.newContractValue}
              </List.Item>
            )}

            {content.newContractValue_currency && (
              <List.Item>
                New Contract Value Currency:
                {content.newContractValue_currency.title}
              </List.Item>
            )}

            {content.oldContractPeriod_startDate && (
              <List.Item>
                Old Contract Start Date:
                {content.oldContractPeriod_startDate}
              </List.Item>
            )}

            {content.oldContractPeriod_endDate && (
              <List.Item>
                Old Contract End Date:
                {content.oldContractPeriod_endDate}
              </List.Item>
            )}
            {content.oldContractPeriod_maxExtentDate && (
              <List.Item>
                Old Contract Period Extent Date:
                {content.oldContractPeriod_maxExtentDate}
              </List.Item>
            )}

            {content.newContractPeriod_startDate && (
              <List.Item>
                New Contract Period Start Date:
                {content.newContractPeriod_startDate}
              </List.Item>
            )}

            {content.newContractPeriod_endDate && (
              <List.Item>
                New Contract Period End Date:
                {content.newContractPeriod_endDate}
              </List.Item>
            )}

            {content.newContractPeriod_maxExtentDate && (
              <List.Item>
                New Contract Period Max ExtentDate:
                {content.newContractPeriod_maxExtentDate}
              </List.Item>
            )}
          </List>
        </Segment>

示例图片：

Answer 1

有多种方法可以实现这一点：使用网格、内联线或仅使用表格。


 <Table basic="very" striped>
            <Table.Body>
              <Table.Row>
                <Table.Cell width={3}></Table.Cell>
                <Table.Cell></Table.Cell>
              </Table.Row>
              {content.title && (
                <Table.Row>
                  <Table.Cell>
                    <Header size="small" content="Name" />
                  </Table.Cell>
                  <Table.Cell>{content.title}</Table.Cell>
                </Table.Row>
              )}

              {content.description && (
                <Table.Row>
                  <Table.Cell>
                    <Header size="small" content="Description" />
                  </Table.Cell>
                  <Table.Cell>{content.description}</Table.Cell>
                </Table.Row>
              )}

</Table.Body>
</Table>

格式化 React 语义 UI 列表 'Field Name' 和 'Value'

Formatting React Semantic UI List 'Field Name' and 'Value'

reactjs

semantic-ui