产品已发货
2021年5月13日
我们已通过 FedEx 寄送您的产品，预计在 3-5 个工作日内送达。
订单已确认
2021年5月18日
订单已送达
2021年5月20日，上午10:30
import { Text, Timeline } from "@chakra-ui/react"
import { LuCheck, LuPackage, LuShip } from "react-icons/lu"
const Demo = () => {
return (
<Timeline.Root maxW="400px">
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<LuShip />
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>Product Shipped</Timeline.Title>
<Timeline.Description>13th May 2021</Timeline.Description>
<Text textStyle="sm">
We shipped your product via <strong>FedEx</strong> and it should
arrive within 3-5 business days.
</Text>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<LuCheck />
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title textStyle="sm">Order Confirmed</Timeline.Title>
<Timeline.Description>18th May 2021</Timeline.Description>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<LuPackage />
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title textStyle="sm">Order Delivered</Timeline.Title>
<Timeline.Description>20th May 2021, 10:30am</Timeline.Description>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)
}
用法
import { Timeline } from "@chakra-ui/react"<Timeline.Root>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator />
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title />
<Timeline.Description />
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>示例
尺寸
使用 size 属性来改变时间轴的尺寸。
sage创建了一个新项目
sage将状态从进行中 更改为 已完成
sage创建了一个新项目
sage将状态从 进行中 更改为 已完成
sage创建了一个新项目
sage将状态从 进行中 更改为 已完成
sage创建了一个新项目
sage将状态从 进行中 更改为 已完成
import { Avatar, Badge, For, Span, Stack, Timeline } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<Stack gap="8">
<For each={["sm", "md", "lg", "xl"]}>
{(size) => (
<Timeline.Root key={size} size={size}>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<Avatar.Root size="full">
<Avatar.Image src="https://bit.ly/sage-adebayo" />
<Avatar.Fallback name="Sage" />
</Avatar.Root>
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content textStyle="xs">
<Timeline.Title>
<Span fontWeight="medium">sage</Span>
created a new project
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<LuCheck />
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content textStyle="xs">
<Timeline.Title mt={size === "sm" ? "-2px" : undefined}>
<Span fontWeight="medium">sage</Span>
changed status from <Badge size="sm">
In progress
</Badge> to{" "}
<Badge colorPalette="teal" size="sm">
Completed
</Badge>
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)}
</For>
</Stack>
)
}
变体
使用 variant 属性来改变时间轴的变体。
sage创建了一个新项目
sage将状态从 进行中 更改为 已完成
sage创建了一个新项目
sage将状态从 进行中 更改为 已完成
sage创建了一个新项目
sage将状态从 进行中 更改为 已完成
sage创建了一个新项目
sage将状态从 进行中 更改为 已完成
import { Avatar, Badge, For, Span, Stack, Timeline } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<Stack gap="16">
<For each={["subtle", "solid", "outline", "plain"]}>
{(variant) => (
<Timeline.Root variant={variant} key={variant}>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<Avatar.Root size="full">
<Avatar.Image src="https://bit.ly/sage-adebayo" />
<Avatar.Fallback name="Sage" />
</Avatar.Root>
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
<Span fontWeight="medium">sage</Span>
created a new project
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<LuCheck />
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
<Span fontWeight="medium">sage</Span>
changed status from <Badge>In progress</Badge> to{" "}
<Badge colorPalette="teal">Completed</Badge>
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)}
</For>
</Stack>
)
}
内容前置
这是一个在时间轴指示器前显示内容的示例。
1994年11月
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2010年11月
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1994年11月
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2010年11月
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1994年11月
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2010年11月
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import { For, Stack, Timeline } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="8">
<For each={["sm", "md", "lg"]}>
{(size) => (
<Timeline.Root size={size} key={size}>
<Timeline.Item>
<Timeline.Content width="auto">
<Timeline.Title whiteSpace="nowrap">Nov 1994</Timeline.Title>
</Timeline.Content>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>1</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Content width="auto">
<Timeline.Title whiteSpace="nowrap">Nov 2010</Timeline.Title>
</Timeline.Content>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>2</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)}
</For>
</Stack>
)
}
交替内容
这是一个内容交替显示的时间轴示例。
已下单
已备货
订单已送达
import { Timeline } from "@chakra-ui/react"
const Demo = () => {
return (
<Timeline.Root size="sm" variant="outline">
<Timeline.Item>
<Timeline.Content flex="1" />
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator />
</Timeline.Connector>
<Timeline.Content flex="1">
<Timeline.Title>Placed Order</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Content flex="1" alignItems="flex-end">
<Timeline.Title>Prepared Order</Timeline.Title>
</Timeline.Content>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator />
</Timeline.Connector>
<Timeline.Content flex="1" />
</Timeline.Item>
<Timeline.Item>
<Timeline.Content flex="1" />
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator />
</Timeline.Connector>
<Timeline.Content flex="1">
<Timeline.Title>Order Delivered</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)
}
组合
这是一个如何将时间轴与其他组件组合以创建一致外观时间轴的示例。
Lorem ipsum. Quisque faucibus. In id. Tempus leo. Pulvinar vivamus. Iaculis massa. Ut hendrerit. Ad litora.
import {
Avatar,
Button,
Card,
Icon,
Input,
Span,
Timeline,
} from "@chakra-ui/react"
import { LuPen, LuX } from "react-icons/lu"
import LoremIpsum from "react-lorem-ipsum"
const Demo = () => {
return (
<Timeline.Root size="lg" variant="subtle" maxW="md">
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<Icon fontSize="xs">
<LuPen />
</Icon>
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
<Avatar.Root size="2xs">
<Avatar.Image src="https://i.pravatar.cc/150?u=a" />
<Avatar.Fallback />
</Avatar.Root>
Lucas Moras <Span color="fg.muted">has changed</Span>
<Span fontWeight="medium">3 labels</Span> on
<Span color="fg.muted">Jan 1, 2024</Span>
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<Icon fontSize="xs">
<LuX />
</Icon>
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
<Avatar.Root size="2xs">
<Avatar.Image src="https://i.pravatar.cc/150?u=x" />
<Avatar.Fallback />
</Avatar.Root>
Jenna Smith <Span color="fg.muted">removed</Span>
<Span fontWeight="medium">Enas</Span>
<Span color="fg.muted">on Jan 12, 2024</Span>
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator bg="teal.solid" color="teal.contrast">
<Icon fontSize="xs">
<LuX />
</Icon>
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content gap="4">
<Timeline.Title>
<Avatar.Root size="2xs">
<Avatar.Image src="https://i.pravatar.cc/150?u=y" />
<Avatar.Fallback />
</Avatar.Root>
Erica <Span color="fg.muted">commented</Span>
<Span color="fg.muted">on Jan 12, 2024</Span>
</Timeline.Title>
<Card.Root size="sm">
<Card.Body textStyle="sm" lineHeight="tall">
<LoremIpsum p={1} avgWordsPerSentence={2} />
</Card.Body>
<Card.Footer>
<Button size="xs" variant="surface" rounded="md">
👏 2
</Button>
</Card.Footer>
</Card.Root>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator>
<Avatar.Root size="full">
<Avatar.Image src="https://i.pravatar.cc/150?u=o" />
<Avatar.Fallback />
</Avatar.Root>
</Timeline.Indicator>
</Timeline.Connector>
<Timeline.Content gap="4" mt="-1" w="full">
<Input size="sm" placeholder="Add comment..." />
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)
}
属性
根
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
variant | 'solid' | 'subtle' | 'solid' | 'outline' | 'plain'组件的变体 |
size | 'md' | 'sm' | 'md' | 'lg' | 'xl'组件的尺寸 |