为您的应用程序提供一致的标题组件。
此信息将公开显示。
<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>
控制标题级别:h1、h2、h3,这将用于标题元素。如果没有 level 属性,标题将默认为 div。
此信息将公开显示。
<flux:heading level="3">User profile</flux:heading><flux:text class="mt-2">This information will be displayed publicly.</flux:text>
副标题可以放置在标题上方,以获得更有趣的排列。
年初至今
<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>
|
属性
|
描述
|
|---|---|
| size |
标题的尺寸。选项: base, lg, xl。默认:base。
|
| level |
HTML 标题级别。选项: 1, 2, 3, 4。默认:如果未指定,则渲染为 div 。
|
| accent |
如果为 true,则对标题应用强调色样式。
|