此網站需要開啟JavaScript
JavaScript is required

Tooltip & Tab

提示泡泡與單顆分頁按鈕。分頁的選中狀態由外層決定,需要整組分頁請用 CommonTabTab。

提示泡泡

AtomToolTip

components/Atom/ToolTip.vue

用 @floating-ui/vue 定位, 空間不足時會自動翻到另一側,所以 position 是偏好而不是保證。

提示內容是輔助說明,不要把必要資訊只放在這裡 —— 觸控裝置上沒有 hover。

四個方向

Props

名稱型別預設值說明
titleString''提示標題
contentString''提示內文
position'top' | 'bottom' | 'left' | 'right''top'空間不足時 floating-ui 會自動翻面
size'sm' | 'md' | 'lg' | 'full' | 'content''content'content 依內容決定寬度
arrowPosition'center' | 'left' | 'right''center'

Slots

SlotSlot props說明
default—要掛提示的元素

分頁按鈕

AtomTab / AtomTabPill

components/Atom/Tab/{Tab,Pill}.vue

單一顆分頁按鈕,selected 由外層控制。 要一整組含內容切換的分頁,用 CommonTabTab(見 控制項 )。

AtomTab

AtomTabPill

Props

名稱型別預設值說明
textString''沒有 slot 時顯示的文字
selectedBooleanfalse是否為選中狀態
hrefString''有值時渲染成連結
disabledBooleanfalse
sizeString'md'僅 AtomTab 有
type'button' | 'submit' | 'reset''button'