1 of 1

Popover

介紹使用 Popover 彈出框元件

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

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

基本使用

<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>

屬性

Name

Value

Type

Default

Required

Note

String

random

theme

primary,

success,

warning,

danger,

primary-ghost,

success-ghost,

warning-ghost,

danger-ghost

String

title

String

'Popover'

nopadding

Boolean

size

small,

large

String

disabled

String, Boolean

Demo

Popover

介紹使用 Popover 彈出框元件

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

基本使用

<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>

屬性

Name

Value

Type

Default

Required

Note

String

random

theme

primary,

success,

warning,

danger,

primary-ghost,

success-ghost,

warning-ghost,

danger-ghost

String

title

String

'Popover'

nopadding

Boolean

size

small,

large

String

disabled

String, Boolean