显示侧边栏
组件
隐藏侧边栏

标题

为您的应用程序提供一致的标题组件。

用户资料

此信息将公开显示。

<flux:heading>User profile</flux:heading><flux:text class="mt-2">This information will be displayed publicly.</flux:text>

尺寸

Flux 提供三种不同的标题尺寸,应该能够涵盖您应用程序中的大多数用例。

默认

14px · 可自由使用——适用于输入框和提示标签。

16px · 谨慎使用——适用于模态框和卡片标题。

超大

24px · 很少使用——适用于主要文本。

<flux:heading>Default</flux:heading><flux:heading size="lg">Large</flux:heading><flux:heading size="xl">Extra large</flux:heading>

标题级别

控制标题级别:h1h2h3,这将用于标题元素。如果没有 level 属性,标题将默认为 div

用户资料

此信息将公开显示。

<flux:heading level="3">User profile</flux:heading><flux:text class="mt-2">This information will be displayed publicly.</flux:text>

示例

前导副标题

副标题可以放置在标题上方,以获得更有趣的排列。

年初至今

$7,532.16
15.2%
<div>    <flux:text>Year to date</flux:text>    <flux:heading size="xl" class="mb-1">$7,532.16</flux:heading>    <div class="flex items-center gap-2">        <flux:icon.arrow-trending-up variant="micro" class="text-green-600 dark:text-green-500" />        <span class="text-sm text-green-600 dark:text-green-500">15.2%</span>    </div></div>

参考

flux:heading

属性
描述
size
标题的尺寸。选项: base, lg, xl。默认:base
level
HTML 标题级别。选项: 1, 2, 3, 4。默认:如果未指定,则渲染为 div
accent
如果为 true,则对标题应用强调色样式。

flux:text

属性
描述
size
文本的尺寸。选项: sm, base, lg, xl。默认:base
© 2025 FluxProMax™. All Rights Reserved.

备案号:皖ICP备13019729号-11