Tag 標籤
基礎用法
由 type 屬性來選擇 tag 的類型。 也可以透過 color 屬性來自訂背景色。
Tag 1Tag 2Tag 3Tag 4Tag 5
vue
<rdn-tag type="primary">Tag 1</rdn-tag>
<rdn-tag type="success">Tag 2</rdn-tag>
<rdn-tag type="warning">Tag 3</rdn-tag>
<rdn-tag type="info">Tag 4</rdn-tag>
<rdn-tag type="danger">Tag 5</rdn-tag>主题
Tag 元件提供了三個不同的主題：dark、light 和 plain。
透過設定 effect 屬性來改變主題，預設為 light。
Tag 1Tag 2Tag 3Tag 4Tag 5
Tag 1Tag 2Tag 3Tag 4Tag 5
Tag 1Tag 2Tag 3Tag 4Tag 5
vue
<rdn-tag effect="dark">Tag 1</rdn-tag>
<rdn-tag effect="dark" type="success">Tag 2</rdn-tag>
<rdn-tag effect="dark" type="warning">Tag 3</rdn-tag>
<rdn-tag effect="dark" type="info">Tag 4</rdn-tag>
<rdn-tag effect="dark" type="danger">Tag 5</rdn-tag>
<rdn-tag effect="light">Tag 1</rdn-tag>
<rdn-tag effect="light" type="success">Tag 2</rdn-tag>
<rdn-tag effect="light" type="warning">Tag 3</rdn-tag>
<rdn-tag effect="light" type="info">Tag 4</rdn-tag>
<rdn-tag effect="light" type="danger">Tag 5</rdn-tag>
<rdn-tag effect="plain">Tag 1</rdn-tag>
<rdn-tag effect="plain" type="success">Tag 2</rdn-tag>
<rdn-tag effect="plain" type="warning">Tag 3</rdn-tag>
<rdn-tag effect="plain" type="info">Tag 4</rdn-tag>
<rdn-tag effect="plain" type="danger">Tag 5</rdn-tag>可移除標籤
設定 closable 屬性可以定義一個標籤是否可移除。 它接受一個 Boolean。
Tag 1×Tag 2×Tag 3×Tag 4×Tag 5×
vue
<rdn-tag closable>Tag 1</rdn-tag>
<rdn-tag closable type="success">Tag 2</rdn-tag>
<rdn-tag closable type="warning">Tag 3</rdn-tag>
<rdn-tag closable type="info">Tag 4</rdn-tag>
<rdn-tag closable type="danger">Tag 5</rdn-tag>調整尺寸
Tag 組件提供除了預設值以外的三種尺寸，可以在不同場景下選擇合適的按鈕尺寸。
使用 size 属性来设置额外尺寸, 可选值包括 large, default 或 small.
LargedefaultSmall
vue
<rdn-tag size="large">Large</rdn-tag>
<rdn-tag type="success" size="default">default</rdn-tag>
<rdn-tag type="warning" size="small">Small</rdn-tag>圓形標籤
Tag 可以向按鈕組件一樣變成完全圓形。
Tag 1Tag 2Tag 3Tag 4Tag 5
vue
<rdn-tag round>Tag 1</rdn-tag>
<rdn-tag type="success" round>Tag 2</rdn-tag>
<rdn-tag type="warning" round>Tag 3</rdn-tag>
<rdn-tag type="info" round>Tag 4</rdn-tag>
<rdn-tag type="danger" round>Tag 5</rdn-tag>