Bootstrap Blazor Modal 模態(tài)框組件

基本用法

<Modal @ref="CenterModal" IsBackdrop="true">
    <ModalDialog IsCentered="true" Title="測試" ShowCloseButton="false" Size="Size.Small">
        <BodyTemplate>
            <div>BodyTemplate</div>
        </BodyTemplate>
        <FooterTemplate>
            <Button>確定</Button>
        </FooterTemplate>
    </ModalDialog>
</Modal>

展示效果

Attributes 屬性

參數(shù)	說明	類型	可選值	默認值
HeaderTemplate	模態(tài)主體 ModalHeader 模板	RenderFragment	—	—
BodyTemplate	模態(tài)主體 ModalBody 組件	RenderFragment	—	—
ChildContent	內容	RenderFragment	—	—
FooterTemplate	模態(tài)底部 ModalFooter 組件	RenderFragment	—	—
IsBackdrop	是否后臺關閉彈窗	boolean	—	false
IsKeyboard	是否響應 ESC 鍵盤	boolean	—	true
IsCentered	是否垂直居中	boolean	—	true
IsScrolling	是否彈窗正文超長時滾動	boolean	—	false
IsFade	是否開啟淡入淡出動畫效果	boolean	—	true
IsDraggable	是否開啟可拖拽效果	boolean	—	false
ShowCloseButton	是否顯示關閉按鈕	boolean	—	true
ShowFooter	是否顯示 Footer	boolean	—	true
Size	尺寸	Size	None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge	ExtraExtraLarge
FullScreenSize	小于特定尺寸時全屏	Size	None / Always / Small / Medium / Large / ExtraLarge / ExtraExtraLarge	None
Title	彈窗標題	string	—	未設置
ShowMaximizeButton	是否顯示彈窗最大化按鈕	boolean	true\|false	false

posted @ 2022-04-10 16:23 一事冇誠閱讀(1873) 評論(0) 收藏舉報

刷新頁面返回頂部

一事冇誠

微軟最有價值專家（微軟MVP 2023-2025）

Bootstrap Blazor Modal 模態(tài)框組件

基本用法

Attributes 屬性

公告