arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Popover

介紹使用 Popover 彈出框元件

Popover 彈出框,通常應用在呈現輔助資訊,例如畫面上空間不夠但是又必須呈現很多說明文字時,就可以使用此種元件。顯示時會懸浮於畫面上,蓋住部分原來網頁。

circle-info

使用 Popover 可以讓使用者的自由度比較大,若您想要讓使用者更專注在彈出框的情境,建議使用 Dialog 元件。

hashtag
基本使用

hashtag
大小

hashtag
主題色

hashtag
沒有內距

hashtag
標題

hashtag
屬性

Name
Value
Type
Default
Required
Note

hashtag
Demo

String

title

String

'Popover'

nopadding

Boolean

size

small,

large

String

disabled

String, Boolean

id

String

random

theme

Popover 介紹示意圖

primary,

success,

warning,

danger,

primary-ghost,

success-ghost,

warning-ghost,

danger-ghost

<bpa-popover>content</bpa-popover>
<bpa-popover size="small">small</bpa-popover>
<bpa-popover theme="primary">primary</bpa-popover>
<bpa-popover nopadding>content</bpa-popover>
<bpa-popover title="title">content</bpa-popover>
<bpa-popover>
  <template v-slot:title>
    <mark>title</mark>
  </template>
  content
</bpa-popover>