Ibox Layout component
The component displays a box with a header. The box can have other components inside it. The ibox creates a group of the enclosed components. The ibox can be a simple box, or a collapsible box. If set to be collapsible, an icon will appear on the right side of the header, that when clicked on, opens/closes the box. If a box is closed, the box will have the size of the header height, thus freeing up space on the interface.
Component(s) can be placed on the IBox header, thus allowing the placement of additional buttons, icons, that can have custom functionalities.
Supported events:
Show, Hide, Animation, Click, MouseEvents, Scroll, Touch, Drag&Drop
Style customization
Name |
Default value |
Derived value |
Computed value |
Comment |
|---|---|---|---|---|
| $ibox-title-bg-color | $gray-100 | $ibox-title-bg-color-->$gray-100-->#f8f9fa | #f8f9fa | Ibox header background color. |
| $ibox-content-bg-color | $white | $ibox-content-bg-color-->$white-->#fff | #fff | Ibox content background color. |
| $ibox-color | inherit | inherit | Ibox default font color. | |
| $ibox-title-color | $ibox-color | $ibox-title-color-->$ibox-color-->inherit | inherit | Ibox header default font color. |
| $ibox-content-color | $ibox-color | $ibox-content-color-->$ibox-color-->inherit | inherit | Ibox content default font color. |
| $ibox-margin-bottom | 0 | 0 | Ibox lower margin. | |
| $ibox-margin | 0 0 $ibox-margin-bottom 0 | $ibox-margin-->0 0 $ibox-margin-bottom 0-->0 0 1.5rem 0 | 0 0 1.5rem 0 | Ibox margin. |
| $ibox-padding | 0 | 0 | Ibox padding. | |
| $ibox-border | 1px solid $ibox-border-color | $ibox-border-->1px solid $ibox-border-color-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef | 1px solid #e9ecef | Ibox frame. |
| $ibox-title-border-color | $ibox-border-color | $ibox-title-border-color-->$ibox-border-color-->$border-color-->$gray-200-->#e9ecef | #e9ecef | Ibox title frame. |
| $ibox-title-border-style | none | none | Ibox title frame style. | |
| $ibox-title-border-width | 0 | 0 | Ibox title frame width. | |
| $ibox-title-padding | $spacer $spacer ($spacer * 0.5) | $ibox-title-padding-->$spacer $spacer ($spacer * 0.5)-->1rem 1rem (0.5rem) | 1rem 1rem (0.5) | Ibox title padding. |
| $ibox-title-min-height | $ibox-title-text-font-size * 3 | $ibox-title-min-height-->$ibox-title-text-font-size * 3-->$font-size-lg * 3-->$font-size-base * 1.25 * 3-->1rem * 1.25 * 3 | 3.75rem | Ibox title minimum row height. |
| $ibox-title-text-font-weight | 600 | 600 | Ibox title font weight. | |
| $ibox-title-text-margin | 0 0 ($spacer * 0.5) 0 | $ibox-title-text-margin-->0 0 ($spacer * 0.5) 0-->0 0 (1rem * 0.5) 0 | 0 0 (0.5rem) 0 | Ibox title margin. |
| $ibox-title-text-font-size | $font-size-lg | $ibox-title-text-font-size-->$font-size-lg-->$font-size-base * 1.25-->1rem * 1.25 | 1.25rem | Ibox title font size. |
| $ibox-content-border-color | $ibox-border-color | $ibox-content-border-color-->$ibox-border-color-->$border-color-->$gray-200-->#e9ecef | #e9ecef | Ibox content frame color. |
| $ibox-content-border-style | solid solid none | solid solid none | Ibox content frame style. | |
| $ibox-content-border-width | 1px 0 | 1px 0 | Ibox content frame width. | |
| $ibox-content-padding | $spacer | $ibox-content-padding-->$spacer-->1rem | 1rem | Ibox content padding. |
| $ibox-content-font-size | inherit | inherit | Ibox content default font size. | |
| $ibox-tools-color | $gray-400 | $ibox-tools-color-->$gray-400-->#ced4da | #ced4da | Ibox tools icon color. |
| $ibox-tools-margin-left | $spacer * 0.5 | $ibox-tools-margin-left-->$spacer * 0.5-->1rem * 0.5 | 0.5rem | Spacing between ibox tools icons. |
| $ibox-border-color | $border-color | $ibox-border-color-->$border-color-->#e9ecef | #e9ecef | IBox frame color. |