主题设置

选择强调色与基础色，保存后全站生效。

强调色
基础色
点击切换锁定状态
获取优惠许可证
显示侧边栏
组件
时间线
隐藏侧边栏
Flux Pro 组件
此组件仅在 Flux 的 Pro 版本中提供。
升级到 Pro 升级到 Pro

时间线

以垂直或水平方式显示一系列事件或步骤。

  1. curtisss 向 james_rob 发起了审阅请求 · 4 天前
  2. curtisss 添加了标签
    功能
  3. james_rob 审批通过了这些更改 · 3 天前
<flux:timeline>    <flux:timeline.item>        <flux:timeline.indicator>            <flux:icon.eye variant="micro" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>curtisss <flux:text inline>requested a review from</flux:text> james_rob <flux:text inline>· 4 days ago</flux:text></flux:heading>        </flux:timeline.content>    </flux:timeline.item>    <flux:timeline.item>        <flux:timeline.indicator>            <flux:icon.tag variant="micro" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>curtisss <flux:text inline>added tag</flux:text> <flux:badge size="sm">feature</flux:badge></flux:heading>        </flux:timeline.content>    </flux:timeline.item>    <flux:timeline.item>        <flux:timeline.indicator color="green">            <flux:icon.check variant="micro" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>james_rob <flux:text inline>approved these changes · 3 days ago</flux:text></flux:heading>        </flux:timeline.content>    </flux:timeline.item></flux:timeline>

大尺寸

使用 size="lg" 属性可将时间线指示器放大。适合用于编号步骤，或需要指示器更加突出的场景。

  1. 1
    提交

    填写表单并提供所有必要的资产。

  2. 2
    审核

    核实您的数据并确认最终草稿的准确性。

  3. 3
    发布

    完成设置并将内容推送上线。

<flux:timeline size="lg">    <flux:timeline.item>        <flux:timeline.indicator>1</flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>Submit</flux:heading>            <flux:text>Complete the form and provide all necessary assets.</flux:text>        </flux:timeline.content>    </flux:timeline.item>    <!-- ... --></flux:timeline>

水平排列

使用 horizontal 属性将时间线改为水平方向渲染。

  1. 订单已确认
  2. 正在配送中
  3. 已送达
<flux:timeline horizontal>    <flux:timeline.item>        <flux:timeline.indicator>            <flux:icon.credit-card variant="micro" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>Order confirmed</flux:heading>        </flux:timeline.content>    </flux:timeline.item>    <!-- ... --></flux:timeline>

状态

在时间线条目上使用 status 属性来直观地显示进度。条目可设为 complete、current 或 incomplete。状态同时控制指示器样式和条目之间的连接线。

  1. 订单已确认
  2. 正在配送中
  3. 已送达
<flux:timeline horizontal>    <flux:timeline.item status="complete">        <flux:timeline.indicator>            <flux:icon.credit-card variant="micro" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>Order confirmed</flux:heading>        </flux:timeline.content>    </flux:timeline.item>    <flux:timeline.item status="current">        <flux:timeline.indicator>            <flux:icon.truck variant="micro" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>On its way</flux:heading>        </flux:timeline.content>    </flux:timeline.item>    <flux:timeline.item status="incomplete">        <flux:timeline.indicator>            <flux:icon.home variant="micro" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>Delivered</flux:heading>        </flux:timeline.content>    </flux:timeline.item></flux:timeline>

指示器颜色

在 flux:timeline.indicator 上使用 color 属性设置彩色背景，支持所有标准 Flux 颜色。

  1. 构建失败
  2. 已发出警告
  3. 部署成功
<flux:timeline.indicator color="red">    <flux:icon.x-mark variant="micro" /></flux:timeline.indicator><flux:timeline.indicator color="amber">    <flux:icon.exclamation-triangle variant="micro" /></flux:timeline.indicator><flux:timeline.indicator color="green">    <flux:icon.check variant="micro" /></flux:timeline.indicator>

纯图标指示器

在指示器上使用 variant="bare" 可去除默认尺寸和背景，从而将更大的独立图标用作指示器。

  1. 草稿已创建 · 2 天前
  2. 编辑完成 · 1 天前
  3. 已发布 · 刚刚
<flux:timeline>    <flux:timeline.item>        <flux:timeline.indicator variant="bare">            <flux:icon.document-text class="size-6 text-zinc-400" />        </flux:timeline.indicator>        <flux:timeline.content>            <flux:heading>Draft created</flux:heading>        </flux:timeline.content>    </flux:timeline.item>    <!-- ... --></flux:timeline>

块元素项

使用 flux:timeline.block 组件可将单个块元素作为时间线条目显示。

  1. curtisss 向 james_rob 发起了审阅请求 · 4 天前
  2. james_rob

    回复了您的消息 · 4 天前

  3. curtisss 添加了标签
    功能
  4. james_rob 审批通过了这些更改 · 3 天前
<flux:timeline>    <!-- ... -->    <flux:timeline.item>        <flux:timeline.block>            <flux:callout variant="secondary">                <flux:callout.heading>james_rob<flux:text>replied to your message · 4 days ago</flux:text></flux:callout.heading>                <x-slot name="actions">                    <flux:button>View message -></flux:button>                    <flux:button variant="ghost">Reply</flux:button>                </x-slot>            </flux:callout>        </flux:timeline.block>    </flux:timeline.item>    <!-- ... --></flux:timeline>

块子网格

在使用 flux:timeline.block 时，可以嵌套 flux:timeline.subgrid 组件以在块内保持时间线的列结构。

这可确保块内的内容与时间线的指示器列和内容列正确对齐，而不是跨越全宽。非常适合评论线程、嵌套内容或多部分块元素条目。

  1. curtisss 向 james_rob 发起了审阅请求 · 4 天前
  2. james_rob 评论于 · 4 天前

    对比度滑块在顶端有些失控...

    Prompt Enter your prompt here
  3. curtisss 添加了标签
    功能
  4. james_rob 审批通过了这些更改 · 3 天前
<flux:timeline>    <!-- ... -->    <flux:timeline.item>        <flux:timeline.block class="bg-zinc-50 dark:bg-zinc-800 border dark:border-zinc-700 rounded-xl overflow-hidden">            <flux:timeline.subgrid class="p-3 bg-zinc-50 dark:bg-zinc-800">                <flux:avatar size="xs" circle src="https://github.com/joshhanley.png" />                <div class="space-y-1">                    <flux:heading>james_rob <flux:text class="font-medium" inline>commented · 4 days ago</flux:text></flux:heading>                    <flux:text class="text-zinc-800 dark:text-white">Contrast slider goes a bit wild at the top end...</flux:text>                    <div class="mt-2">                        <div class="size-6 rounded-full border border-zinc-200 dark:border-zinc-600 hover:bg-white dark:hover:bg-zinc-700 text-zinc-300 dark:text-zinc-500 hover:text-zinc-400 dark:hover:text-zinc-300 shadow-xs grid place-items-center">                            <flux:icon.face-smile variant="micro" />                        </div>                    </div>                </div>            </flux:timeline.subgrid>            <div class="border-t border-zinc-200 dark:border-zinc-700"></div>            <flux:timeline.subgrid class="p-3 bg-white dark:bg-zinc-900">                <flux:avatar size="xs" circle src="https://github.com/calebporzio.png" />                <div>                    <flux:composer variant="input" placeholder="Leave a reply..." label="Prompt" label:sr-only description="Enter your prompt here" description:sr-only>                        <x-slot name="actionsLeading">                            <flux:button size="sm" variant="subtle" icon="paper-clip" />                            <flux:button size="sm" variant="subtle" icon="slash" />                            <flux:button size="sm" variant="subtle" icon="adjustments-horizontal" />                        </x-slot>                        <x-slot name="actionsTrailing">                            <flux:button size="sm" variant="filled" icon="microphone" />                            <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />                        </x-slot>                    </flux:composer>                </div>            </flux:timeline.subgrid>        </flux:timeline.block>    </flux:timeline.item>    <!-- ... --></flux:timeline>

对齐方式

使用 align 属性设置时间线条目的对齐方式。

对齐方式可应用于整个时间线或单个条目。

  1. 1
    顶部对齐

    将指示器和内容对齐到顶部/起始位置

  2. 2
    基线对齐

    将指示器和内容对齐到第一行文本的基线

  3. 3
    居中对齐

    将指示器和内容对齐到中心位置

  4. 4
    底部对齐

    将指示器和内容对齐到底部/末尾位置

<flux:timeline align="start|baseline|center|end">    <!-- ... --></flux:timeline>

基线调整

在大字号文本下使用 align="baseline" 时，可能需要调整基线参考点以实现正确对齐。

通过设置 [data-flux-timeline-baseline] 属性来指定与内容相匹配的自定义字号，确保指示器与第一行文本的基线精确对齐。

  1. 1
    未调整基线

    指示器可能与大字号文本无法完美对齐

  2. 2
    已调整基线

    指示器与标题基线精确对齐

<flux:timeline.item class="[&_[data-flux-timeline-baseline]]:text-2xl" align="baseline">    <flux:timeline.indicator>2</flux:timeline.indicator>    <flux:timeline.content>        <flux:heading size="xl">With baseline adjustment</flux:heading>    </flux:timeline.content></flux:timeline.item>

间距

CSS 变量 --flux-timeline-item-gap 控制各时间线条目之间的间距，而 --flux-timeline-content-gap 则设置条目内指示器与内容之间的间距。

这两个变量对垂直和水平布局的时间线均有效，可轻松调整任意方向的间距。

  1. 1
    创建账户
  2. 2
    填写详情
  3. 3
    审查并确认
<flux:timeline class="[--flux-timeline-item-gap:3rem] [--flux-timeline-content-gap:1rem]">    <!-- ... --></flux:timeline>

相关组件

Progress

显示目标或任务的完成进度
Tabs

将内容整理到可切换的面板中

参考

flux:timeline

垂直或水平时间线条目的容器组件。

属性
描述
horizontal
将时间线改为水平方向渲染，而非垂直方向。
align
指示器与内容的交叉轴对齐方式。选项：start、baseline、center（默认）、end。
size
时间线指示器的尺寸。选项：lg。
插槽
描述
default
时间线条目内容。
CSS 变量
描述
--flux-timeline-item-gap
控制各时间线条目之间间距的 CSS 变量。
--flux-timeline-content-gap
控制条目内指示器与内容之间间距的 CSS 变量。

flux:timeline.item

时间线中的单个事件条目，负责绘制前后连接线。

属性
描述
status
控制指示器与连接线的样式。选项：complete、current、incomplete。
align
单个条目的对齐方式覆盖。选项：start、baseline、center、end。
size
单个条目的尺寸覆盖。选项：lg。
插槽
描述
default
当前条目的指示器与内容组件。

flux:timeline.indicator

连接线之间的点或圆形指示器，可包含图标、数字或文字。

属性
描述
variant
指示器的视觉变体。选项：bare（去除默认尺寸和背景）。
status
覆盖父条目的状态以设置指示器样式。选项：complete、current、incomplete。
color
Colored background for the indicator. Options: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.
插槽
描述
default
指示器内部的内容（图标、数字、文字）。

flux:timeline.content

显示在指示器旁边的内容区域。

插槽
描述
default
与指示器并排显示的内容。

flux:timeline.block

无指示器列的全宽块元素条目，适用于嵌入卡片、提示框或其他需要跨越时间线全宽的内容。

插槽
描述
default
要显示的块元素内容。

flux:timeline.subgrid

在 flux:timeline.block 内部使用，用于将内容重新对齐到时间线的指示器列和内容列。

插槽
描述
default
在子网格布局中显示的内容。
© 2025 FluxProMax™. All Rights Reserved.

备案号：皖ICP备13019729号-11

网站导航