Banner

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

When To Use

Banners are an important part of displaying the entire page, generally introducing the name and introduction of product.

Basic Usage

() => {
  const data = [
  {
    label: 'KubeSphere',
    value: 'KubeSphere',
  },
  {
    label: 'Jenkins',
    value: 'Jenkins',
  },
  {
    label: 'Kubernetes',
    value: 'Kubernetes',
  },
 ];
 const { Cluster } = KubeIcon;
 return (
    <div style={{ height: '300px', width: '100%', backgroundColor: '#eff4f9', padding: '20px' }}>
      <Banner
        icon={<Cluster />}
        title="集群节点"
        description="集群节点提供了当前集群下节点的运行状态，以及可以编辑删除节点"
        navs={data}
      >
        <Navs data={data} />
        <BannerTip title="集群节点的类型?" key="node-type">
          节点分为主控 (Master) 节点和工作 (Worker) 节点
        </BannerTip>
        <BannerTip title="什么是节点污点?" key="node-dirty">
          节点污点 (Taints) 可以阻止某些容器组 (Pod) 副本部署至该节点中, 与容忍度 (Tolerations)
          一起工作确保容器组不会被调度到不合适的节点上
        </BannerTip>
      </Banner>
    </div>
  )
}

1
() => {
2
  const data = [
3
  {
4
    label: 'KubeSphere',
5
    value: 'KubeSphere',
6
  },
7
  {
8
    label: 'Jenkins',
9
    value: 'Jenkins',
10
  },
11
  {
12
    label: 'Kubernetes',
13
    value: 'Kubernetes',
14
  },
15
 ];
16
 const { Cluster } = KubeIcon;
17
 return (
18
    <div style={{ height: '300px', width: '100%', backgroundColor: '#eff4f9', padding: '20px' }}>
19
      <Banner
20
        icon={<Cluster />}
21
        title="集群节点"
22
        description="集群节点提供了当前集群下节点的运行状态，以及可以编辑删除节点"
23
        navs={data}
24
      >
25
        <Navs data={data} />
26
        <BannerTip title="集群节点的类型?" key="node-type">
27
          节点分为主控 (Master) 节点和工作 (Worker) 节点
28
        </BannerTip>
29
        <BannerTip title="什么是节点污点?" key="node-dirty">
30
          节点污点 (Taints) 可以阻止某些容器组 (Pod) 副本部署至该节点中, 与容忍度 (Tolerations)
31
          一起工作确保容器组不会被调度到不合适的节点上
32
        </BannerTip>
33
      </Banner>
34
    </div>
35
  )
36
}
37