Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
import { Container } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Container>
<DecorativeBox px="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
</DecorativeBox>
</Container>
)
}
用法
¥Usage
默认 maxWidth 是 8xl，它映射到 90rem (1440px)。
¥The default maxWidth is 8xl which maps to 90rem (1440px).
import { Container } from "@chakra-ui/react"<Container>
<div />
</Container>示例
¥Examples
尺寸
¥Sizes
使用 maxWidth 属性更改容器的大小。
¥Use the maxWidth prop to change the size of the container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
import { Container, For, Stack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack>
<For each={["sm", "md", "xl", "2xl"]}>
{(size) => (
<Container key={size} maxW={size} px="2">
<DecorativeBox>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
</DecorativeBox>
</Container>
)}
</For>
</Stack>
)
}
流体
¥Fluid
使用 fluid 属性使容器拉伸以填充其父级的宽度。
¥Use the fluid prop to make the container stretch to fill the width of its
parent.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
import { Container } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Container fluid>
<DecorativeBox px="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
</DecorativeBox>
</Container>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
centerContent | 'true' | 'false'The centerContent of the component | |
fluid | 'true' | 'false'The fluid of the component |