<mk-box header="Box header" footer="Box footer">
Box content
</mk-box>
<mk-box>
<mk-box-header>HTML Box header</mk-box-header>
<mk-box-tools><button>Additionnal Box Buttons</button></mk-box-tools>
<mk-box-content>HTML Box content</mk-box-content>
<mk-box-footer>HTML Box footer</mk-box-footer>
</mk-box>
Name | Type | Default | Description |
---|---|---|---|
boxColor | string (default | primary | success | info | warning | danger | rgb | rgba | hex) | box-default | The box color. |
buttonsStyleClass | string | null | The box collapse & remove buttons style classes. |
contentStyleClass | string | box-content-wrapper | The box content style classes. |
footer | string | null |
Footer text of the box. Note: You can use <mk-box-footer> for HTML footer. |
footerStyleClass | string | box-footer | The box footer style classes. |
header | string | null |
Header text of the box. Note: You can use <mk-box-content> for HTML header. |
headerBorder | boolean | true | Defines if header and content is separated with a border. |
headerStyleClass | string | box-header | The box header style classes. |
isCollapsable | boolean | true | Defines if box content can be expanded and collapsed. |
isCollapsed | boolean | false | Defines if box content is collapsed. |
isLoading | boolean | false | Show a loading animation. |
isRemovable | boolean | true | Defines if box can be removed. |
isSolid | boolean | false | If false the box have border top color, if true the box have filled header and borders. |
loadingColor | string | null | The box loading icon font color. |
loadingStyleClass | string | fa fa-refresh fa-spin | The box loading icon style classes. |
styleClass | string | box | The box style classes. |
Name | Parameters | Description |
---|---|---|
onCollapseStart | event: browser event | Callback to invoke before content toggle |
onCollapseDone | event: browser event | Callback to invoke after content toggle |