盒子
Chakra UI 中最抽象的样式组件，所有其他 Chakra UI 组件都构建于其之上。
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box background="tomato" width="100%" padding="4" color="white">
This is the Box
</Box>
)
}
用法
¥Usage
Box 组件提供了一种轻松编写样式的简便方法。它提供对设计令牌的访问，并在编写响应式样式时提供无与伦比的 DX 性能。
¥The Box component provides an easy way to write styles with ease. It provides
access to design tokens and an unmatched DX when writing responsive styles.
import { Box } from "@chakra-ui/react"<Box />示例
¥Examples
简写
¥Shorthand
使用简写，例如用 bg 代替 backgroundColor，用 m 代替 margin，等等。
¥Use shorthand like bg instead of backgroundColor, m instead of margin,
etc.
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box bg="tomato" w="100%" p="4" color="white">
This is the Box
</Box>
)
}
伪属性
¥Pseudo Props
使用伪属性，例如 _hover 在悬停时应用样式，_focus 在焦点时应用样式，等等。
¥Use pseudo props like _hover to apply styles on hover, _focus to apply
styles on focus, etc.
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box bg="tomato" w="100%" p="4" color="white" _hover={{ bg: "green" }}>
This is the Box
</Box>
)
}
边框
¥Border
使用 borderWidth 和 borderColor 属性，应用边框样式。
¥Use the borderWidth and borderColor prop to apply border styles.
实用信息：Chakra 全局应用 borderStyle: solid，因此你无需手动操作。
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box
p="4"
borderWidth="1px"
borderColor="border.disabled"
color="fg.disabled"
>
Somewhat disabled box
</Box>
)
}
作为属性
¥As Prop
使用 as 属性渲染不同的组件。
¥Use the as prop to render a different component.
检查 DOM 以查看渲染的组件。
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box as="section" color="fg.muted">
This is a Box rendered as a section
</Box>
)
}
阴影
¥Shadow
使用 boxShadow 或 shadow prop 应用阴影样式。
¥Use the boxShadow or shadow prop to apply shadow styles.
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box bg="bg" shadow="md" borderRadius="md">
Box with shadow
</Box>
)
}
合成
¥Composition
这是一个使用 Chakra 布局基元构建的属性卡示例。
¥Here's an example of a property card built with layout primitives in Chakra.
4.5 (34)
Modern home in city center in the heart of historic Los Angeles
import { Badge, Box, HStack, Icon, Image, Text } from "@chakra-ui/react"
import { HiStar } from "react-icons/hi"
const Demo = () => {
return (
<Box maxW="sm" borderWidth="1px">
<Image src={data.imageUrl} alt={data.imageAlt} />
<Box p="4" spaceY="2">
<HStack>
<Badge colorPalette="teal" variant="solid">
Superhost
</Badge>
<HStack gap="1" fontWeight="medium">
<Icon color="orange.400">
<HiStar />
</Icon>
<Text>
{data.rating} ({data.reviewCount})
</Text>
</HStack>
</HStack>
<Text fontWeight="medium" color="fg">
{data.title}
</Text>
<HStack color="fg.muted">
{data.formattedPrice} • {data.beds} beds
</HStack>
</Box>
</Box>
)
}
const data = {
imageUrl: "https://bit.ly/2Z4KKcF",
imageAlt: "Rear view of modern home with pool",
beds: 3,
title: "Modern home in city center in the heart of historic Los Angeles",
formattedPrice: "$435",
reviewCount: 34,
rating: 4.5,
}
属性
¥Props
Box 组件支持所有 CSS 属性作为属性，从而轻松设置元素的样式。
¥The Box component supports all CSS properties as props, making it easy to
style elements.