Skip to content

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 | number1
borderRadius邊框圓角string | number4
padding內邊距string | number16
shadow是否顯示陰影booleanfalse
transparent是否透明背景booleanfalse
disabled是否禁用booleanfalse

事件

事件名說明回調參數
click點擊容器時觸發(event: MouseEvent) => void

插槽

插槽名說明
default容器內容

Released under the MIT License.