Button 按鈕

常用的操作按钮。

基礎使用

使用 type、plain、round 來定義按鈕的樣式 。

<rdn-button type="primary">primary</rdn-button>
<rdn-button type="success">success</rdn-button>
<rdn-button type="warning">warning</rdn-button>
<rdn-button type="info">info</rdn-button>
<rdn-button type="danger">danger</rdn-button>

<rdn-button plain>primary</rdn-button>
<rdn-button plain type="success">success</rdn-button>
<rdn-button plain type="warning">warning</rdn-button>
<rdn-button plain type="info">info</rdn-button>
<rdn-button plain type="danger">danger</rdn-button>

<rdn-button round type="primary">primary</rdn-button>
<rdn-button round type="success">success</rdn-button>
<rdn-button round type="warning">warning</rdn-button>
<rdn-button round type="info">info</rdn-button>
<rdn-button round type="danger">danger</rdn-button>

禁用狀態

您可以使用 disabled 屬性來定義按鈕是否已停用。

使用 disabled 屬性來控制按鈕是否為停用狀態。此屬性接受一個 Boolean 類型的值。

<rdn-button type="primary" disabled>primary</rdn-button>
<rdn-button type="success" disabled>success</rdn-button>
<rdn-button type="warning" disabled>warning</rdn-button>
<rdn-button type="info" disabled>info</rdn-button>
<rdn-button type="danger" disabled>danger</rdn-button>

文字按鈕

沒有熟悉和背景顏色的按鈕。

<rdn-button type="primary" text>primary</rdn-button>
<rdn-button type="success" text>success</rdn-button>
<rdn-button type="warning" text>warning</rdn-button>
<rdn-button type="info" text>info</rdn-button>
<rdn-button type="danger" text>danger</rdn-button>

調整尺寸

除了預設的大小外，按鈕組件還提供了幾種額外的尺寸供選擇，以便適應不同的場景。

使用 size 屬性額外配置尺寸，可以使用 large 和 small 兩種值。

<rdn-button type="danger" size="large">Large</rdn-button>
<rdn-button type="primary" size="default">Default</rdn-button>
<rdn-button type="success" size="small">Small</rdn-button>

自訂顏色

您可以自訂按鈕的顏色。

我們將自動計算按鈕懸停在活動狀態時的顏色。

<rdn-button color="#e67e22">橘色</rdn-button>
<rdn-button color="#e67e22" plain>Plain</rdn-button>
<rdn-button color="#e67e22" disabled>Disable</rdn-button>

<rdn-button color="rgb(52, 152, 219)" >藍色</rdn-button>
<rdn-button color="rgb(52, 152, 219)" plain >Plain</rdn-button>
<rdn-button color="rgb(52, 152, 219)"  disabled>Disable</rdn-button>

<rdn-button color="#2ecc71">綠色</rdn-button>
<rdn-button color="#2ecc71" plain>Plain</rdn-button>
<rdn-button color="#2ecc71" disabled>Disable</rdn-button>

<rdn-button color="#9b59b6">紫色</rdn-button>
<rdn-button color="#9b59b6" plain>Plain</rdn-button>
<rdn-button color="#9b59b6" disabled>Disabled</rdn-button>

Button API

Button Attributes

Button Events