Container

组件容器

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

基础用法

容器组件的内容从左到右排列

<Container  style={{ background:'#eee'}}>
   容器
</Container>

1
<Container  style={{ background:'#eee'}}>
2
   容器
3
</Container>
4

容器的大小和内边距

使用 size 和 padding 可以设置容器的大小和内边距

<>
  <Container size="xl" padding="xl" style={{ background: '#eee' }}>
    容器
  </Container>
  <Container size="sm" padding="sm" style={{ marginTop:'30px',background: '#eee'}}>
    容器
  </Container>
</>

1
<>
2
  <Container size="xl" padding="xl" style={{ background: '#eee' }}>
3
    容器
4
  </Container>
5
  <Container size="sm" padding="sm" style={{ marginTop:'30px',background: '#eee'}}>
6
    容器
7
  </Container>
8
</>
9

流式布局

使用 fluid 可以设置流式布局，从左到右排列最大宽度为 100%。

<Container fluid style={{ background: '#eee'}}>
    容器
</Container>

1
<Container fluid style={{ background: '#eee'}}>
2
    容器
3
</Container>
4

布局

常规

信息录入

数据展示

反馈

Container

基础用法

容器的大小和内边距

流式布局