回報問題編輯此頁面

頭像

頭像是 BootstrapVue 自訂組件，通常用來以圖片、圖示或簡短文字顯示使用者個人資料。<b-avatar> 提供許多屬性可自訂其外觀，例如色彩變體和圓度，也可以選擇作為按鈕、連結或 路由器連結。

在 BootstrapVue 自 v2.8.0 以來提供

概觀

頭像是輕量化的組件，預設會直行顯示，以便與任何鄰近的純文字垂直置中。它們也可以用作其他組件的子項。

<template>
  <div>
    <p>Using stand-alone:<p/>
    <div class="mb-4">
      <b-avatar></b-avatar>
      <b-avatar variant="primary" text="BV"></b-avatar>
      <b-avatar variant="info" src="https://placekitten.com/300/300"></b-avatar>
      <b-avatar variant="success" icon="people-fill"></b-avatar>
    </div>
    <p>Using in components (list group) example:<p/>
    <b-list-group style="max-width: 300px;">
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar class="mr-3"></b-avatar>
        <span class="mr-auto">J. Circlehead</span>
        <b-badge>5</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="primary" text="BV" class="mr-3"></b-avatar>
        <span class="mr-auto">BootstrapVue</span>
        <b-badge>12</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="info" src="https://placekitten.com/300/300" class="mr-3"></b-avatar>
        <span class="mr-auto">Super Kitty</span>
        <b-badge>9</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="success" icon="people-fill" class="mr-3"></b-avatar>
        <span class="mr-auto">ACME group</span>
        <b-badge>7</b-badge>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<!-- b-avatar.vue -->

頭像類型

頭像內容可以是影像、圖示或簡短文字字串。當未指定其他內容時，頭像內容預設為 'person-fill' 圖示。

你也可以透過預設插槽提供自訂內容，但是可能需要套用額外的內容樣式。

影像內容

使用 src 屬性指定要作為頭像內容的影像 URL。此影像應具有 1:1 的長寬比（意即寬度和高度應相等），否則會產生影像長寬比失真。影像會縮放至頭像邊框內以符合大小。

<template>
  <div class="mb-2">
    <b-avatar src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar src="https://placekitten.com/300/300" size="6rem"></b-avatar>
  </div>
</template>

<!-- b-avatar-src.vue -->

注意事項

  • 在使用模組組建器和專案相對影像 URL 時，請參閱 組件影像 src 解析 參考部分以取得更多詳細資訊。
  • src 屬性優先於 icon 和 text 屬性。
  • 2.11.0+ 如果圖像載入失敗，頭像將回退到 icon 或 text 屬性的值。如果未提供 icon 或 text 屬性，則將顯示預設頭像圖示。此外，當圖像載入失敗時，將會發出 img-error 事件。
  • 變異色彩在未使用圖像時正常可見，除非圖像載入失敗。變異將影響圖像頭像也是一個 可作用的頭像 的重點造型。

圖示內容

透過 icon 屬性輕鬆使用 BootstrapVue 的圖示之一 作為頭像內容。屬性應設定為有效的圖示名稱。圖示將相對於 size 屬性 進行縮放。

<template>
  <div class="mb-2">
    <b-avatar icon="people-fill"></b-avatar>
    <b-avatar icon="star-fill"></b-avatar>
    <b-avatar icon="music-note"></b-avatar>
    <b-avatar icon="star-fill" size="4em"></b-avatar>
  </div>
</template>

<!-- b-avatar-icon.vue -->

注意事項

  • 在提供 BootstrapVue 圖示名稱時，必須 確保已註冊對應的圖示元件 (在元件/頁面中區域註冊或在全球註冊)，如果不使用完整的 BootstrapVueIcons 外掛程式。
  • icon 屬性優先於 text 屬性。
  • 如果未提供 text、src 或 icon 屬性且 預設插槽 沒有內容，則將使用 person-fill 圖示。

文字內容

可以透過 text 屬性指定一短字串作為頭像的內容。字串應簡短 (1 至 3 個字元)，並將透過 CSS 轉換為全部大寫。字型大小將相對於 size 屬性設定 縮放。

<template>
  <div class="mb-2">
    <b-avatar text="BV"></b-avatar>
    <b-avatar text="a"></b-avatar>
    <b-avatar text="Foo"></b-avatar>
    <b-avatar text="BV" size="4rem"></b-avatar>
  </div>
</template>

<!-- b-avatar-text.vue -->

自訂內容

使用 default 插槽在頭像中呈現自訂內容，以更精細地控制其外觀，或使用自訂圖示或 SVG 例如

<b-avatar><custom-icon></custom-icon></b-avatar>

多行文字範例

<template>
  <div class="mb-2">
    <b-avatar size="4em">Hello<br>World</b-avatar>
    <b-avatar size="4em">你好<br>世界</b-avatar>
  </div>
</template>

<!-- b-avatar-default-slot-multi-line.vue -->

注意事項

  • 預設插槽優先於 text、src 和 icon 屬性。
  • 預設插槽內容將包裝在 <span> 元素中，以確保適當地置中。
  • 您可能需要將其他造型應用於自訂內容，以補償 頭像元件的形狀。

造型

變異

使用 variant 屬性指定 Bootstrap 主題變異色彩之一。預設變異為 secondary。

<template>
  <div>
    <b-avatar variant="secondary"></b-avatar>
    <b-avatar variant="primary"></b-avatar>
    <b-avatar variant="dark"></b-avatar>
    <b-avatar variant="light"></b-avatar>
    <b-avatar variant="success"></b-avatar>
    <b-avatar variant="danger"></b-avatar>
    <b-avatar variant="warning"></b-avatar>
    <b-avatar variant="info"></b-avatar>
  </div>
</template>

<!-- b-avatar-variant.vue -->

如果您已透過 SASS 主題變數 定義額外的自訂變異，也可以使用自訂變異。

大小

預設情況下，頭像大小為 2.5em（相對於當前字型大小）。您可以變更頭像大小，方法是變更當前字型大小，或使用道具 size 來指定明確的大小。大小 sm、md 和 lg 預設為 1.5em、2.5em 和 3.5em。數字會轉換為像素值。任何其他值都必須包括單位（例如 px、em 或 rem）。

<template>
  <div>
    <b-avatar></b-avatar>
    <b-avatar size="sm"></b-avatar>
    <b-avatar size="lg"></b-avatar>
    <b-avatar :size="24"></b-avatar>
    <b-avatar size="3em"></b-avatar>
    <b-avatar size="72px"></b-avatar>
  </div>
</template>

<!-- b-avatar-size.vue -->

注意：頭像永遠以 1:1 的長寬比呈現。

正方形

想要正方形頭像嗎？只要將 square 道具設定為 true 即可。

<template>
  <div>
    <b-avatar square></b-avatar>
  </div>
</template>

<!-- b-avatar-square.vue -->

圓角

<b-avatar> 呈現出圓角邊界。您可以透過將道具 rounded 設定為 true、'sm'、'lg'、'top'、'left'、'right' 或 'bottom' 之一值，來變更圓角。如果設定為 true（或空字串 ''），則會使用 Bootstrap 的中圓角預設。

<template>
  <div>
    <b-avatar rounded="sm"></b-avatar>
    <b-avatar rounded></b-avatar>
    <b-avatar rounded="lg"></b-avatar>
    <b-avatar rounded="top"></b-avatar>
    <b-avatar rounded="left"></b-avatar>
    <b-avatar rounded="right"></b-avatar>
    <b-avatar rounded="bottom"></b-avatar>
  </div>
</template>

<!-- b-avatar-rounding.vue -->

注意事項

  • 道具 square 優先於道具 rounded。
  • 您也可以將道具 rounded 設定為字串 '0'，以符合道具 square，並取得正方形頭像。

對齊

預設情況下，<b-avatar> 會與相鄰內容垂直置中。在某些情況下，您可能想要變更對齊，例如，確保純文字頭像的文字與相鄰文字對齊。您只要在元件上設定垂直對齊工具程式類別，例如 <b-avatar class="align-baseline" ...> 或 <b-avatar class="align-top" ...> 等。

可操作頭像

可以輕易建立對點擊做出反應的頭像，或在點擊時變更 URL/路由的頭像。可操作頭像會顯示在文件標籤順序中，並且是螢幕閱讀器和僅鍵盤使用者都可以存取的。

圖片頭像在可操作時，會在游標移入時在圖片上套用基本的縮放轉換。

按鈕

想要觸發對話框的開啟或觸發動作嗎？設定 button 道具，以指示 <b-avatar> 呈現為 <button> 元素。元件在以按鈕呈現時，將會在每被點擊一次時發射 click 事件。

<template>
  <b-list-group>
    <b-list-group-item>
      <b-avatar button @click="onClick" variant="primary" text="FF" class="align-baseline"></b-avatar>
      Button Text Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar button @click="onClick" src="https://placekitten.com/300/300"></b-avatar>
      Button Image Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar button @click="onClick" icon="star-fill" class="align-center"></b-avatar>
      Button Icon Avatar
    </b-list-group-item>
  </b-list-group>
</template>

<script>
  export default {
    methods: {
      onClick() {
        this.$bvModal.msgBoxOk('User name: Fred Flintstone', {
          title: 'User Info',
          size: 'sm',
          buttonSize: 'sm',
          okVariant: 'success',
          headerClass: 'p-2 border-bottom-0',
          footerClass: 'p-2 border-top-0'
        })
      }
    }
  }
</script>

<!-- b-avatar-button.vue -->

道具 button-type 可用來控制要呈現的按鈕類型。支援的值有 'button'（預設值）、'submit' 或 'reset'。

想像一下一個化身是一個連結或是 router 連結嗎？只要設定 href 或 to 道具（分別）。to 道具可以是一個字串路徑或一個 位置 物件。需要的 to 道具 Vue 路由器 （或等價的） 被安裝。

<template>
  <b-list-group>
    <b-list-group-item>
      <b-avatar href="#foo" variant="primary" text="FF" class="align-baseline"></b-avatar>
      Link Text Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar href="#bar" src="https://placekitten.com/300/300"></b-avatar>
      Link Image Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar href="#baz" icon="star-fill" class="align-center"></b-avatar>
      Link Icon Avatar
    </b-list-group-item>
  </b-list-group>
</template>

<!-- b-avatar-href.vue -->

注意

徽章化身

2.12.0+

透過 badge 道具或 'badge' 區段輕鬆為您的化身增加一個徽章，而徽章變數能透過 badge-variant 道具設定。徽章會隨著化身的大小調整比例。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-variant="danger" src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar badge badge-variant="warning" icon="people-fill"></b-avatar>
    <b-avatar badge badge-variant="success" src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar badge badge-variant="dark" text="BV"></b-avatar>
    <b-avatar square badge badge-variant="dark" text="BV"></b-avatar>
  </div>
</template>

<!-- b-avatar-badge.vue -->

徽章內容

透過供應一個字串至 badge 道具或使用命名區段 'badge' 來為徽章增加文字內容。

<template>
  <div>
    <b-avatar badge="BV"></b-avatar>
    <b-avatar badge="7" variant="primary" badge-variant="dark"></b-avatar>
    <b-avatar badge-variant="info" src="https://placekitten.com/300/300">
      <template #badge><b-icon icon="star-fill"></b-icon></template>
    </b-avatar>
  </div>
</template>

<!-- b-avatar-badge-content.vue -->

徽章定位

預設徽章會出現在化身的右下方。您可以使用 badge-top 及 badge-right 布林值道具來切換邊界。結合兩個道具將徽章移至化身右上方。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-left></b-avatar>
    <b-avatar badge badge-top></b-avatar>
    <b-avatar badge badge-left badge-top></b-avatar>
  </div>
</template>

<!-- b-avatar-badge-position.vue -->

使用 badge-offset 道具來控制徽章的偏移。 badge-offset 必須是一個有效的 CSS 長度字串（也就是 '2px', '-2px', '0.5em'，等等）。正值將將徽章往內移動，而負值則會將徽章往外移動。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-offset="-0.5em"></b-avatar>
    <b-avatar badge badge-offset="-2px"></b-avatar>
    <b-avatar badge badge-offset="2px"></b-avatar>
    <b-avatar badge badge-top></b-avatar>
    <b-avatar badge badge-top badge-offset="-0.5em"></b-avatar>
    <b-avatar badge badge-top badge-offset="-2px"></b-avatar>
    <b-avatar badge badge-top badge-offset="2px"></b-avatar>
  </div>
</template>

<!-- b-avatar-badge-offset.vue -->

化身群組

v2.14.0+

透過將多個化身包裝在 <b-avatar-group> 元件中，將他們組織在一起。

<template>
  <div>
    <b-avatar-group size="60px">
      <b-avatar></b-avatar>
      <b-avatar text="BV" variant="primary"></b-avatar>
      <b-avatar src="https://placekitten.com/300/300" variant="info"></b-avatar>
      <b-avatar text="OK" variant="danger"></b-avatar>
      <b-avatar variant="warning"></b-avatar>
      <b-avatar src="https://placekitten.com/320/320" variant="dark"></b-avatar>
      <b-avatar icon="music-note" variant="success"></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group.vue -->

注意事項

  • 變數，正方形和圓角道具在 <b-avatar-group> 會優先於個別化身的各道具。

群組大小

若要調整化身大小，請在 <b-avatar-group> 使用 size 道具。 size 道具接受與在 <b-avatar> 上 size 道具種類相同的參數。注意 size 道具在個別化身放入 <b-avatar-group> 後會被忽略。

<template>
  <div>
    <b-avatar-group size="5rem">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-size.vue -->

群組變數

使用 variant 道具來為 <b-avatar-group> 中的全部子化身上色。注意 variant 道具如果被設定時，會覆寫個別化身上所指定的 variant。

<template>
  <div>
    <b-avatar-group variant="success">
      <b-avatar></b-avatar>
      <b-avatar variant="info"></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-variant.vue -->

群組圓角

與 variant 道具相似地， <b-avatar-group> 道具 square 及 rounded 會優先於個別子化身上的各道具。

<template>
  <div>
    <b-avatar-group rounded="lg">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-rounded.vue -->

群組重疊

預設情況下，<b-avatar-group> 內的子頭像會重疊 0.3 的間距（相對於頭像的大小）。您可以透過設定 overlap 屬性來控制重疊的間距，其值介於 0 和 1 之間，其中 0 表示沒有重疊，而 1 表示 100% 重疊。

<template>
  <div>
    <b-avatar-group overlap="0.65">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-overlap.vue -->

無障礙

使用 aria-label 屬性來提供無障礙友善、螢幕閱讀器友善的頭像標籤。如果您有徽章，建議將徽章的用途或內容相關資訊新增至 aria-label 中（例如 '3 則訊息'、'線上' 等）。

儘管不管設定 button、href 或 to 屬性，click 事件仍會發送，但強烈建議在點擊事件應該觸發動作（或是在變更路由或變更 URL 時使用 to 或 href 屬性）時使用 button 屬性，以達到無障礙功能。

實作注意事項

頭像以 <b-badge> 和 <b-button> 元件為基礎，因此依賴 Bootstrap 的 badge-* 和 btn-* 變異類別，以及 rounded-* 工具類別。

<b-avatar> 也需要 BootstrapVue 的自訂 CSS 來進行適當的樣式化。

元件參考

<b-avatar>

v2.8.0+
檢視原始程式碼

屬性

所有屬性的預設值都可以 在全域設定。

屬性
(按一下以遞增排序)
類型
(按一下以遞增排序)
預設值
說明
active-class
字串<router-link> 屬性：當連結為 active（或開啟）狀態時套用的 active CSS 類別。通常您會想要將這個類別名稱設定為 'active'
alt
v2.9.0+ 		字串'avatar'放置在圖片和圖示頭像的 'alt' 屬性中的值
append
布林值false<router-link> 屬性：設定 append 屬性會將相對路徑持續新增至目前的路由
aria-label
字串設定已呈現地元素上 `aria-label` 屬性的值
badge
v2.12.0+ 		布林值 或 字串false當為 `true` 時在頭像上顯示一個空的徽章，或是將替換為字串來顯示徽章中的內容
badge-left
v2.12.0+ 		布林值false當為 `true` 時將徽章放置在左側，而非右側
badge-offset
v2.12.0+ 		字串CSS 長度來設定徽章的偏移量。正值會將徽章向內移動，而負值則會將徽章向外移動
badge-top
v2.12.0+ 		布林值false當為 `true` 時將徽章放置在頂部，而非底部
badge-variant
v2.12.0+ 		字串'primary'將 Bootstrap 主題 color 變形套用到徽章
button
布林值false設定為 `true` 時，將 avatar 呈現為按鈕
button-type
字串'button'要呈現的按鈕類型 (例如，`button`、`submit`、`reset`)。如果未設定按鈕 prop 屬性，則無任何效果
disabled
布林值false設定為 `true` 時，會停用元件功能，並使其處於停用狀態
exact
布林值false<router-link> prop：預設 active class 比對行為為內含比對。設定此 prop 屬性會強制模式與路由完全比對
exact-active-class
字串<router-link> prop：link 使用精確比對時，設定套用的 active CSS class。通常會將此設定為 class 名稱「active」
exact-path
布林值false<router-link> prop：准許只使用 url 的 path 部分進行比對，而忽略 query 和 hash 部分
exact-path-active-class
字串<router-link> prop：link 使用精確 path 比對時，設定套用的 active CSS class。通常會將此設定為 class 名稱「active」
href
字串<b-link> prop：表示標準 a 連結的目標網址
icon
字串要使用的 avatar 圖示名稱。必須全部小寫。如果未提供 `text` 或 `src` prop 屬性，則預設為 `person-fill`
no-prefetch
布林值false<nuxt-link> prop：若要提升 Nuxt.js 應用程式的回應性，如果 link 會顯示在視窗中，Nuxt.js 會自動預先擷取程式碼分頁。設定 `no-prefetch` 會停用特定 link 的此功能
prefetch
v2.15.0+ 		布林值null<nuxt-link> prop：若要提升 Nuxt.js 應用程式的回應性，如果 link 會顯示在視窗中，Nuxt.js 會自動預先擷取程式碼分頁。設定 `prefetch` 為 `true` 或 `false` 會改寫 `router.prefetchLinks` 的預設值
rel
字串null<b-link> prop：設定已呈現 link 上的 `rel` 屬性
replace
布林值false<router-link> prop：設定 replace prop 屬性會在點選時呼叫 `router.replace()`，而非 `router.push()`，因此導覽不會留下歷史記錄
rounded
布林值 或 字串false這會指定套用到 avatar 的圓角類型。`square` prop 屬性優先。有關詳細資料，請參閱文件
router-component-name
v2.15.0+ 		字串<b-link> prop：BootstrapVue 會自動偵測 `<router-link>` 和 `<nuxt-link>`。如果你想使用以 `<router-link>` 為基礎的第三方連結元件，請將此 prop 屬性設定為元件名稱。例如，如果你使用 Gridsome，請將其設定為「g-link」（請注意，只會傳遞 `<router-link>` 專屬 prop 屬性給元件）
size
數字 或 字串avatar 的大小。有關詳細資料，請參閱文件
square
布林值false停用 avatar 圓角，以直角呈現 avatar
src
字串要使用的 avatar 圖片網址
target
字串'_self'<b-link> prop：設定已呈現 link 上的 `target` 屬性
text
字串要置入 avatar 的文字
to
物件 或 字串<router-link> prop：表示連結的目標路由。點選時，to prop 屬性的值會在內部傳遞給 `router.push()`，因此值可以是字串或 Location 描述物件
variant
字串'secondary'將 Bootstrap 主題 color 變形套用到元件

<b-avatar> 支援產生 <router-link> 或 <nuxt-link> 元件（如果使用 Nuxt.js）。有關 router link（或 nuxt link）專屬 prop 屬性的更多詳細資料，請參閱 Router 支援 參考區段。

插槽

名稱
說明
徽章 v2.12.0+內容置於頭像的選用徽章中。覆寫 `徽章` 道具
預設 內容置於頭像中。覆寫道具 `文字`, `來源`, 和 `圖示名稱`

事件

事件
參數
說明
點擊
  1. 事件 - 原生事件物件
當頭像呈現為按鈕或連結時，且被點擊後觸發。平時並未觸發
圖片錯誤 v2.11.0+
  1. 事件 - 原生事件物件
如果提供圖片 `來源`，但圖片無法載入時會觸發

<b-avatar-group>

v2.14.0+
檢視原始程式碼

屬性

所有屬性的預設值都可以 在全域設定。

屬性
類型
預設值
說明
重疊
數字 或 字串0.3浮點數字，指定重疊的量，`0` 為無重疊，`1` 為 100% 重疊
rounded
布林值 或 字串false指定要套用至子頭像的圓角種類。`方形` 道具優先。有關詳細資訊，請參閱文件說明
size
字串所有子頭像的大小。有關詳細資訊，請參閱文件說明
square
布林值false停用子頭像的圓角功能，每一個頭像都會呈現直角
標籤
字串'div'指定 HTML 標籤，取代預設標籤進行呈現
variant
字串套用其中一種 Bootstrap 主題顏色變形至所有子頭像

插槽

名稱
說明
預設 內容（頭像）置於頭像組內

導入個別組件

你可以透過以下命名匯出功能，將個別組件導入你的專案

組件
命名匯出
導入路徑
<b-avatar>BAvatarbootstrap-vue
<b-avatar-group>BAvatarGroupbootstrap-vue

範例

import { BAvatar } from 'bootstrap-vue'
Vue.component('b-avatar', BAvatar)

以 Vue.js 外掛方式導入

這個外掛包含上述所列出的所有個別組件. 外掛也包含所有組件別名。

命名匯出
導入路徑
AvatarPluginbootstrap-vue

範例

import { AvatarPlugin } from 'bootstrap-vue'
Vue.use(AvatarPlugin)