TWebSideMenu
Below is a list of the most important properties methods and events for the TWebSideMenu
. TWebSideMenu
is a component to offer typical admin web page menu/navigation capabilities.
![]() |
![]() |
---|---|
Designtime | Runtime (Expanded/Collapsed) |
TWebSideMenu architecture
HTML template tag
The HTML
tag the component can be associated with in an HTML
template. Assign the ID
attribute with a unique value and set the identical value to the ElementID
property. Detailed
information can be found in the Use of HTML templates topic.
HTML tag | <VIDEO ID=”UniqueID”></VIDEO> |
---|---|
ElementID | UniqueID |
Properties for TWebSideMenu
Property | Description |
---|---|
Appearance: TSideMenuAppearance | Configure the appearance of the menu |
Content: TStringList | Set the text displayed in the content area |
ElementBodyClassName: TElementClassName | Optionally sets the CSS classname for the label when styling via CSS is used |
ElementCaptionClassName: TElementClassName | Optionally sets the CSS classname for the label when styling via CSS is used |
ElementContentClassName: TElementClassName | Optionally sets the CSS classname for the label when styling via CSS is used |
ElementFixedItemsClassName: TElementClassName | Optionally sets the CSS classname for the label when styling via CSS is used |
ElementItemsClassName: TElementClassName | Optionally sets the CSS classname for the label when styling via CSS is used |
FixedItems: TSideMenuItems | List of items displayed in "Fixed" bottom part of the menu |
Items: TSideMenuItems | List of items displayed in the side menu |
SelectedItem: Integer | Sets the index of the selected item from the Items collection |
Appearance Properties
Property | Description |
---|---|
Caption: string | Set the caption text |
CaptionColor: TColor | Set the caption background color |
CaptionPopup: string | Set the caption text in Popup State |
CaptionVisible: string | Sets if the Caption area is visible or not |
CaptionFont: TFont | Sets the font used for the Caption text |
ItemFont: TFont | Sets the font used for the Item text |
ItemHoverColor: TColor | Sets the background color when an item is hovered |
ItemHoverTextColor: TColor | Sets the text color when an item is hovered |
ItemSelectedColor: TColor | Sets the background color when an item is selected |
ItemSelectedTextColor: TColor | Sets the text color when and item is selected |
ItemSelectionStyle: TSideMenuItemSelectionStyle | Sets if the item selection is displayed as a full row (itsFull) or as rounded box (itsRounded) |
ItemCollapsedMaterialGlyph: TMaterialGlyph | Sets the material icon displayed for an item with subitems that is collapsed |
ItemExpandedMaterialGlyph: TMaterialGlyph | Sets the material icon displayed for an item with subitems that is expanded |
FixedColor: TColor | Sets the background color of the fixed bottom area of the menu |
FixedHeight: Integer | Sets the height of the fixed bottom area of the menu |
FixedVisible: Boolean | Sets if the fixed bottom area is displayed or not |
FixedItemFont: TFont | Sets the font used for the FixedItem text |
FixedItemHoverColor: TColor | Sets the background color when a fixed item is hovered |
FixedItemHoverTextColor: TColor | Sets the text color when a fixed item is hovered |
FixedItemSelectedColor: TColor | Sets the background color when a fixed item is selected |
FixedItemSelectedTextColor: TColor | Sets the text color when a fixed item is selected |
States: TSideMenuStates | Sets which menu States are enabled. Available states: msCollapsed: The menu is displayed minimized with icons only. msExpanded: The menu is displayed fully with icon, text and badge or control/html. msPopup: The menu is hidden and the visibility can be toggled manually by clicking the hamburger icon in the top left corner. When visible the menu is displayed fully with icon, text and badge or control/html. All 3 states are enabled by default. If enabled, the state is automatically changed to msPopup when the window is less than 768 pixels wide, msCollapsed when between 768 pixels and 1024 pixels wide or msExpanded when wider than 1024 pixels. |
Items/FixedItems Properties
Property | Description |
---|---|
ContentControl: TCustomControl | Sets the Control displayed in the Content area when the Item is selected |
Enabled: Boolean | Sets if the Item is enabled or not |
Hint: string | Sets the hint text displayed when the item is hovered |
ImageURL: string | Sets the url of the image displayed when the menu is in msExpanded or msPopup state |
ImageURLCollapsed: string | Sets the url of the image displayed when the menu is in msCollapsed state |
Text: string | Sets the item text |
&Type: TSideMenuType | Sets the type of the item. Available types are: itText: The default type. itCheckBox: A checkbox is displayed next to the item text. itDivider: The item is displayed as a divider line between items. itControl: The control assigned in the Control property is displayed. itHTML: The HTML assigned in the HTML property is displayed. itTitle: The item is displayed as a title with interaction disabled. |
Checked: Boolean | Sets if the checkbox is checked when item Type is set to itCheckBox |
Expanded: Boolean | Sets if the item is displayed in Expanded state when it has SubItems defined. |
SubItem: Boolean | Sets if the item is a SubItem. The first item before this item with SubItem set to False will be displayed as an Expand/Collapse item |
HTML: TStringList | Sets the HTML displayed when item Type is set to itHTML |
Control: TControl | Sets the Control displayed when item Type is set to itControl |
MaterialGlyph: TMaterialGlyph | Sets the Material icon displayed before the item Text |
MaterialGlyphType: TMaterialGlyphType | Sets the type of MaterialGlyph used |
BadgeText: string | When not an empty string, displays the value as Badge next to the item |
BadgeColor: TColor | Sets the background color of the BadgeText |
BadgeTextColor: TColor | Sets the text color of the BadgeText |
Methods for TWebSideMenu
Property | Description |
---|---|
Close | Method to close the menu programmatically when in Popup state |
Open | Method to open the menu programmatically when in Popup state. |
Events for TWebSideMenu
Property | Description |
---|---|
OnItemClick | Event triggered when an item is clicked. |
OnFixedItemClick | Event triggered when a fixed item is clicked. |