Bootstrap Blazor Modal 模態框組件

基本用法

<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 屬性

參數	說明	類型	可選值	默認值
HeaderTemplate	模態主體 ModalHeader 模板	RenderFragment	—	—
BodyTemplate	模態主體 ModalBody 組件	RenderFragment	—	—
ChildContent	內容	RenderFragment	—	—
FooterTemplate	模態底部 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