BlockArea 禁用區域

BlockArea 組件可以將包覆的區塊禁用，讓使用者無法執行選取、點擊等操作。被包覆的區塊會覆蓋一層具有透明度的底色表示該區域是禁用的狀態，且 BlockArea 可以透過 props 來設定是否要在區塊中顯示文字或是圖示。

基本用法

基本的禁用區域用法，可以控制區域的啟用和禁用狀態。

基本用法

基本禁用

這是一個被禁用的區域

正常狀態

這是一個正常的區域

切換狀態

啟用區域

這個區域的狀態可以切換

圖示提示

可以在禁用狀態下顯示圖示，提供視覺化的狀態提示。

圖示示例

使用圖示 prop

這個區域被鎖定了

使用圖示插槽

這個區域有警告

不同圖示示例

受保護區域

僅供查看

文字提示

可以在禁用狀態下顯示文字說明，或結合圖示和文字一起使用。

文字示例

純文字提示

這是一個表單區域

此區域已禁用

圖示 + 文字

敏感資料編輯區

需要權限才能編輯

不同文字示例

系統功能

維護中

新功能預覽

即將推出

綜合示例

展示 BlockArea 在複雜佈局中的應用場景。

綜合示例

複雜內容禁用

用戶設定

用戶名稱

電子郵件

安全保護中

卡片式佈局

可用功能

此功能已啟用

開發中功能

即將推出

開發中

表格禁用

姓名	職位	操作
張三	開發工程師
李四	設計師

資料載入中...

API

屬性

屬性名	說明	類型	默認值
active	是否啟用區域 (true: 正常, false: 禁用)	boolean	true
icon	要顯示的圖示組件	Component	undefined
text	要顯示的文字	string	undefined

插槽 Slots

插槽名	說明
default	預設內容
icon	圖示內容
text	文字內容