iView‐Button - daniel-qa/Vue GitHub Wiki

iView-Button

  • 基礎Button
<Button>Default</Button>
<Button type="primary">Primary</Button>
<Button type="dashed">Dashed</Button>
<Button type="text">Text</Button>
<br><br>
<Button type="info">Info</Button>
<Button type="success">Success</Button>
<Button type="warning">Warning</Button>
<Button type="error">Error</Button>

alt

  • 幽靈按鍵

加上 ghost 屬性

<Button type="default" ghost>Default</Button>
<Button type="primary" ghost>Primary</Button>
<Button type="dashed" ghost>Dashed</Button>
<Button type="text" ghost>Text</Button>
<br><br>
<Button type="info" ghost>Info</Button>
<Button type="success" ghost>Success</Button>
<Button type="warning" ghost>Warning</Button>
<Button type="error" ghost>Error</Button>

alt

  • Size

按钮有三种尺寸：大、默认（中）、小

large 和 small 将按钮设置为大和小尺寸，不设置为默认（中）尺寸。

<Button size="small" type="primary">small</Button>
<Button>mdeium</Button>
<Button size="large">large</Button>

alt

特殊樣式

  • 字型粗體
font-weight: bold;

直接 inline

<Button size="small" type="primary" style="font-weight: bold;">課綱匹配</Button>
  • 設定高度大小，文字置中(要一起調)

先設定比較小的 size，再用 heigth 撐大成想要的高度

內部用 display: inline-flex !important ，達到文字的置中

<Button size="small" type="primary" class="curriculum-match-btn">課綱匹配</Button>

/* 課綱匹配按鈕樣式 */
.curriculum-match-btn {
  height: 28px !important;
  line-height: 26px !important;
  font-size: 14px !important;  
  font-weight: bold !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;   /* 文字水平置中 */
  background-color: #0087af !important;  /* 改變背景色 */
  border-color: #0087af !important;      /* 邊框顏色 */
  border-radius: 5px !important;         /* 新增：圓角 5px */
  color: white !important;               /* 新增：文字顏色白色 */
}

alt

✅ 高度 28px
✅ 字體大小 14px
✅ 粗體文字
✅ 青藍色背景 (#0087af)
✅ 5px 圓角
✅ 文字完美置中
⚠️ **GitHub.com Fallback** ⚠️