BorderContainer 邊框容器
BorderContainer 提供一個具有可自定義邊框的容器元素,可用於包裝其他內容。
基本用法
基本的邊框容器,支持多種類型。
This is a basic border container with default styling.
This is a border container with primary color.
This is a border container with success color.
邊框寬度
BorderContainer 允許您設置不同的邊框寬度。
Border Widths
1px border width
2px border width
3px border width
4px border width
禁用狀態
使用 disabled
屬性來禁用邊框容器。
Disabled State
Disabled border container with default styling
Disabled border container with primary color
Disabled border container with shadow
Disabled border container with transparent background
高級定制
BorderContainer 支持多種自定義選項,包括陰影、透明背景、自定義邊框半徑和邊框寬度等。
Advanced Customization
Border container with shadow effect
Border container with transparent background
Border container with custom border radius
Border container with custom border width and padding
API
屬性
屬性名 | 說明 | 類型 | 默認值 |
---|---|---|---|
type | 邊框容器類型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | 'default' |
width | 容器寬度 | string | number | 'auto' |
height | 容器高度 | string | number | 'auto' |
borderWidth | 邊框寬度 | string | number | 1 |
borderRadius | 邊框圓角 | string | number | 4 |
padding | 內邊距 | string | number | 16 |
shadow | 是否顯示陰影 | boolean | false |
transparent | 是否透明背景 | boolean | false |
disabled | 是否禁用 | boolean | false |
事件
事件名 | 說明 | 回調參數 |
---|---|---|
click | 點擊容器時觸發 | (event: MouseEvent) => void |
插槽
插槽名 | 說明 |
---|---|
default | 容器內容 |