Box
Box 是 Chakra UI 中最抽象的样式组件，所有其他 Chakra UI 组件都基于它构建。
这是 Box
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box background="tomato" width="100%" padding="4" color="white">
This is the Box
</Box>
)
}
用法
此Box 组件提供了一种轻松编写样式的方式。它提供了对设计令牌的访问权限，并在编写响应式样式时提供无与伦比的开发体验。
import { Box } from "@chakra-ui/react"<Box />示例
简写
使用 `bg` 等简写替代 `backgroundColor`，`m` 替代 `margin` 等。
这是 Box
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box bg="tomato" w="100%" p="4" color="white">
This is the Box
</Box>
)
}
伪属性
使用 `_hover` 等伪属性在悬停时应用样式，`_focus` 在聚焦时应用样式等。
这是 Box
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>
)
}
边框
使用 `borderWidth` 和 `borderColor` 属性来应用边框样式。
小贴士： Chakra 在全局应用了 `borderStyle: solid`，因此您无需再设置。
部分禁用的 Box
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` 属性
使用 `as` 属性来渲染不同的组件。
检查 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>
)
}
阴影
使用 `boxShadow` 或 `shadow` 属性来应用阴影样式。
带阴影的 Box
import { Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box bg="bg" shadow="md" borderRadius="md">
Box with shadow
</Box>
)
}
组合
这是一个使用 Chakra 中的布局原语构建的属性卡片示例。
超赞房东
4.5 (34)
位于洛杉矶历史中心城区的现代住宅
$435•3床位
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,
}
属性
该 Box 组件支持所有 CSS 属性作为 props，便于对元素进行样式设置。