一致的排版组件,如文本和链接。
这是用于正文内容和应用程序中通用内容的标准文本组件。
<flux:heading>Text component</flux:heading><flux:text class="mt-2">This is the standard text component for body copy and general content throughout your application.</flux:text>
使用标准的 Tailwind 来控制文本的大小,以便您能更轻松地适应不同的屏幕尺寸。
较大的文本大小
默认文本大小
较小的文本
<flux:text class="text-base">Base text size</flux:text><flux:text>Default text size</flux:text><flux:text class="text-xs">Smaller text</flux:text>
使用标准的 Tailwind 来控制文本的颜色,以便您能更轻松地适应不同的屏幕尺寸。
加粗文本颜色
默认文本颜色
细微文本颜色
彩色文本
<flux:text variant="strong">Strong text color</flux:text><flux:text>Default text color</flux:text><flux:text variant="subtle">Subtle text color</flux:text><flux:text color="blue">Colored text</flux:text>
使用链接组件来创建可点击的文本,用于导航到其他页面或资源。
访问我们的 文档 以获取更多信息。
<flux:text>Visit our <flux:link href="#">documentation</flux:link> for more information.</flux:text>
链接可以根据其上下文和重要性具有不同的样式。
|
属性
|
描述
|
|---|---|
| size |
文本的大小。选项: sm, default, lg, xl。默认值:default。
|
| variant |
文本变体。选项: strong, subtle。默认值:default。
|
| color |
文本的颜色。选项: default, red, orange, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Default: default.
|
| inline |
如果为 true,文本元素将是 span 而不是 p。
|
|
属性
|
描述
|
|---|---|
| href |
链接指向的 URL。必需。
|
| variant |
链接样式变体。选项: default, ghost, subtle。默认值:default。
|
| external |
如果为 true,链接将在新标签页中打开。
|