文字 Typography

文字排版元件，用於標題、段落和連結。

Heading 標題

標題元件，支援多種尺寸與語義層級。

尺寸 Sizes

特大標題 XL

大標題 LG

預設標題 Base

副標題 Subheading

<flux:heading size="xl">特大標題 XL</flux:heading>
<flux:heading size="lg">大標題 LG</flux:heading>
<flux:heading>預設標題 Base</flux:heading>
<flux:subheading>副標題 Subheading</flux:subheading>

語義層級 Heading Level

H1 標題

H2 標題

H3 標題

H4 標題

<flux:heading level="1">H1 標題</flux:heading>
<flux:heading level="2">H2 標題</flux:heading>
<flux:heading level="3">H3 標題</flux:heading>
<flux:heading level="4">H4 標題</flux:heading>

強調色 Accent

帶強調色的標題

Heading with Accent Color

<flux:heading size="xl" accent>帶強調色的標題</flux:heading>

Text 文字

文字段落元件，支援不同尺寸、變體和顏色。

尺寸 Sizes

超大文字 XL - 這是一段較大的文字內容。

大文字 LG - 這是一段較大的文字內容。

預設文字 Base - 這是一段標準大小的文字內容。

小文字 SM - 這是一段較小的文字內容。

<flux:text size="xl">超大文字 XL</flux:text>
<flux:text size="lg">大文字 LG</flux:text>
<flux:text>預設文字 Base</flux:text>
<flux:text size="sm">小文字 SM</flux:text>

變體 Variants

預設文字 - 這是標準的文字樣式。

粗體文字 Strong - 用於強調重要內容。

淡色文字 Subtle - 用於次要資訊。

描述文字 Description - 通常用於表單欄位說明或補充說明。

<flux:text>預設文字</flux:text>
<flux:text variant="strong">粗體文字</flux:text>
<flux:text variant="subtle">淡色文字</flux:text>
<flux:description>描述文字</flux:description>

顏色 Colors

紅色文字

橘色文字

綠色文字

藍色文字

靛藍文字

紫色文字

<flux:text color="red">紅色文字</flux:text>
<flux:text color="green">綠色文字</flux:text>
<flux:text color="blue">藍色文字</flux:text>

行內文字 Inline

這是一段包含粗體和藍色文字的段落。

<flux:text>
    包含 <flux:text inline variant="strong">粗體</flux:text> 文字
</flux:text>

Link 連結

連結元件，支援多種變體和外部連結。

變體 Variants

預設連結 Default 幽靈連結 Ghost 淡色連結 Subtle

<flux:link href="#">預設連結</flux:link>
<flux:link href="#" variant="ghost">幽靈連結</flux:link>
<flux:link href="#" variant="subtle">淡色連結</flux:link>

外部連結 External

Google (新分頁) GitHub (新分頁)

<flux:link href="https://google.com" external>Google</flux:link>

按鈕樣式 As Button

<flux:link as="button" wire:click="...">重新整理</flux:link>

行內連結 Inline

這是一段包含內嵌連結的文字。您可以前往 Flux UI 官網了解更多資訊。

<flux:text>
    這是包含 <flux:link href="#">內嵌連結</flux:link> 的文字
</flux:text>

API 參考

flux:heading

屬性	值	說明
size	base, lg, xl	標題尺寸
level	1, 2, 3, 4	HTML 標題層級（h1-h4）
accent	bool	套用強調色樣式

flux:text

屬性	值	說明
size	sm, default, lg, xl	文字尺寸
variant	strong, subtle	文字變體
color	red, orange, green, blue, indigo, purple, etc.	文字顏色
inline	bool	渲染為 span 而非 p

flux:link

屬性	值	說明
href	string	連結網址
variant	default, ghost, subtle	連結樣式
external	bool	在新分頁開啟
as	a, button	渲染的 HTML 標籤