Descriptions

Import: import { Descriptions } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

() => (
  <Description label="cni.projectcalico.org/podIP">10.233.74.19/32</Description>
)

1
() => (
2
  <Description label="cni.projectcalico.org/podIP">10.233.74.19/32</Description>
3
)
4

Variant

Styles and label can be set through the variant and label attribute for Descriptions.

() => (
  <div style={{ backgroundColor: '#eff4f9', padding: '50px' }}>
    <Card style={{ width: '300px' }}>
      <Description label="project" variant="unstyled">
        KubeSphere
      </Description>
      <Description label="cluster" variant="unstyled">
        default
      </Description>
    </Card>
  </div>
)

1
() => (
2
  <div style={{ backgroundColor: '#eff4f9', padding: '50px' }}>
3
    <Card style={{ width: '300px' }}>
4
      <Description label="project" variant="unstyled">
5
        KubeSphere
6
      </Description>
7
      <Description label="cluster" variant="unstyled">
8
        default
9
      </Description>
10
    </Card>
11
  </div>
12
)
13

Batch Descriptions

By passing an array to the data attribute, the description list can be displayed in batches.

() => {
  const data = [
    { label: 'Cluster', value: 'default' },
    { label: 'Project', value: 'ifcloud' },
    { label: 'Instance Name', value: 'dev-node1' },
    { label: 'Instance IP', value: '10.233.74.19' },
  ];
  return (
  <div style={{ backgroundColor: '#eff4f9', padding: '50px' }}>
    <Card style={{ width: '300px' }}>
      <Descriptions data={data} variant="unstyled" />
    </Card>
    <Card style={{ marginTop: '50px' }}>
      <Descriptions data={data} variant="default" />
    </Card>
  </div>
  )
}

1
() => {
2
  const data = [
3
    { label: 'Cluster', value: 'default' },
4
    { label: 'Project', value: 'ifcloud' },
5
    { label: 'Instance Name', value: 'dev-node1' },
6
    { label: 'Instance IP', value: '10.233.74.19' },
7
  ];
8
  return (
9
  <div style={{ backgroundColor: '#eff4f9', padding: '50px' }}>
10
    <Card style={{ width: '300px' }}>
11
      <Descriptions data={data} variant="unstyled" />
12
    </Card>
13
    <Card style={{ marginTop: '50px' }}>
14
      <Descriptions data={data} variant="default" />
15
    </Card>
16
  </div>
17
  )
18
}
19