Contextmenu Simple component
The context menu component can be assigned to any component. If it's assigned, the user can access this menu if they click the right mouse button, and they can choose from the menu items.
The context menu has a header that has a custom text assigned to it, and it also has a closing button in the top right corner ( 'X' button). The menu can also be closed if the user clicks anywhere else inside the application.
Supported events:
Show, Hide, Animations, Scroll
Style customization
Name |
Default value |
Derived value |
Computed value |
Comment |
|---|---|---|---|---|
| $context-menu-title-font-size | $font-size-base | $context-menu-title-font-size-->$font-size-base-->0.8125rem | 0.8125rem | Context menu title font size. |
| $context-menu-title-font-weight | 600 | - | 600 | Context menu title font weight. |
| $context-menu-title-color | $gray-600 | $context-menu-title-color-->$gray-600-->#6c757d | #6c757d | Context menu title color. |
| $context-menu-title-border | 1px solid $border-color | $context-menu-title-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef | 1px solid #e9ecef | Context menu title underline type. |
| $context-menu-title-padding | $spacer $spacer ($spacer * 0.5) | $context-menu-title-padding-->$spacer $spacer ($spacer * 0.5)-->1rem 1rem (0.5rem) | 1rem 1rem (0.5rem) | Context menu title padding. |
| $context-menu-title-min-height | $context-menu-title-font-size * 3.5 | $context-menu-title-min-height-->$context-menu-title-font-size * 3.5-->$font-size-base * 3.5-->1rem * 3.5 | 3.5rem | Context menu title minimum height. |
| $context-menu-content-color | $body-color | $context-menu-content-color-->$body-color-->$gray-900--> #212529 | #212529 | Context menu content color. |
| $context-menu-content-padding | ($spacer * 0.35) ($spacer * 1.45) ($spacer * 0.35) ($spacer * 0.35) | $context-menu-content-padding-->($spacer * 0.35) ($spacer * 1.45) ($spacer * 0.35) ($spacer * 0.35)-->(1rem * 0.35) (1rem * 1.45) (1rem * 0.35) (1rem * 0.35) | 0.35rem 1.45rem 0.35rem 0.35rem | Context menu content padding. |
| $context-menu-close-btn-color | $gray-500 | $context-menu-close-btn-color-->$gray-500-->#adb5bd | #adb5bd | Context menu closing “x” icon color. |
| $context-menu-close-btn-hover-color | $gray-600 | $context-menu-close-btn-hover-color-->$gray-600-->#6c757d | #6c757d | Context menu closing “x” icon hover color. |
| $context-menu-close-btn-padding-right | $spacer * 0.35 | $context-menu-close-btn-padding-right-->$spacer * 0.35-->1rem * 0.35 | 0.35rem | Spacing of the context menu closing “x” icon from the frame to the right. |
| $context-menu-item-border-radius | $border-radius | $context-menu-item-border-radius-->$border-radius-->0.25rem | 0.25rem | Rounding radius of an item frame corner in the dropdown list. |
| $context-menu-item-line-height | $context-menu-title-font-size * 1.8 | $context-menu-item-line-height-->$context-menu-title-font-size * 1.8-->$font-size-base * 1.8-->1rem * 1.8 | 1.8rem | Row height of an item in the dropdown list. |
| $context-menu-item-margin | $spacer * 0.3 | $context-menu-item-margin-->$spacer * 0.3-->1rem * 0.3 | 0.3rem | Margin of an item in the dropdown list. |
| $context-menu-item-left-padding | $spacer * 1.85 | $context-menu-item-left-padding-->1rem * 1.85-->1rem * 1.85 | 1.85rem | Item indentation to the left in the dropdown list. |
| $context-menu-item-min-height | $context-menu-title-font-size * 1.45 | $context-menu-item-min-height-->$context-menu-title-font-size * 1.45-->$font-size-base * 1.45-->1rem * 1.45 | 1.45rem | Minimum height of an item in the dropdown list. |
| $context-menu-item-icon-left-margin | -($spacer * 1.45) | $context-menu-item-icon-left-margin-->-($spacer * 1.45)-->-(1rem * 1.45) | -1.45rem | Left margin of an item icon in the dropdown list. |
| $context-menu-item-icon-right-padding | $spacer * 0.35 | $context-menu-item-icon-right-padding-->$spacer * 0.35-->1rem * 0.35 | 0.35rem | Spacing between an item icon and the menu title in the dropdown list. |
| $context-menu-item-color | inherit | - | inherit | Dropdown list item color. |
| $context-menu-item-icon-color | $context-menu-item-color | $context-menu-item-icon-color-->$context-menu-item-color-->inherit | inherit | Dropdown list item icon color. |
| $context-menu-item-font-weight | normal | - | normal | Dropdown list item font weight. |
| $context-menu-input-margin | ($spacer * 0.35) $spacer ($spacer * 0.35) $spacer | $context-menu-input-margin-->($spacer * 0.35) $spacer ($spacer * 0.35) $spacer-->(1rem * 0.35) 1rem (1rem * 0.35) 1rem | 0.35rem 1rem 0.35rem 1rem | Context menu filter text item margin. |
| $context-menu-input-border | 1px solid $border-color | $context-menu-input-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef | 1px solid #e9ecef | Context menu filter text item frame. |
| $context-menu-input-border-color-focus | $primary | $context-menu-input-border-color-focus-->$primary-->#079e97 | #079e97 | Context menu filter text item active frame color. |