Protected Optional _clsPrivate _valueOptional alignAlign the menu on this element. The menu aligns at the bottom by default. If it runs off screen then it will align on top.
Optional alignAlign the menu to this element
Make the menu at least as wide as the component it aligns too.
Protected baseA base class not configurable. cls can be used to add extra classes leaving this class alone
Protected colorsReadonly dataSet arbitrary data on a component.
Should be used with caution as this data is not typed.
Protected orientationUsed by keyboard nav
Optional parentWhen this item is added to a Component this is set to the parent Component
Remove menu when closed
Optional renderThe element it renders to. By default it's rendered to the root element of GOUI.
Optional stateID used for storing state of the component in the State storage.
If stateId is given it will also be used as itemId
If not set then the component won't store it's state.
Readonly tagThe tagname used for the root HTMLElement of this component
Set color value as button text color if this menu belongs to a button
Static Optional openedIs set to the menu currently open. There can only be one dropdown open at the same time
Set attributes of the DOM element
Class name to add to element
Some common classes to add for layout:
Other:
Disable component
Expand menu on the left side of the parent button. If not set then it will automatically detect that it goes outside the right side off the screen and set this to true
CSS flex value
CSS flex value
The height in scalable pixels
width
Hide element
Set the HTML contents of the component (innerHTML)
Element ID
Menu can be rendered as a component in the normal flow or as a floating dropdown.
Protected itemComponent item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();
if stateId is given it will also be used as itemId
The child components of this component
Check if the component has been rendered and added to the DOM tree
Make it resizable
Set inline style
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
Set the innerText
Title of the dom element
Color hex value eg. #000000
Set the width in scalable pixels
The width is applied in rem units divided by 10. Because the font-size of the html element has a font-size of 62.5% this is equals the amount of pixels, but it can be scaled easily for different themes.
Set X coordinate
Set Y coordinate
Protected buildProtected
Build state for the component
saveState();
Cascade down the component hierarchy
When the function returns false then the cascading will be stopped. The current Component will be finished!
Find ancestor
The method traverses the Component's ancestors (heading toward the document root) until it finds one where the given function returns true.
When the function returns true the item will be returned. Otherwise it will move up to the next parent.
Find parent by instance type of the parent
const form = textField.findAncestorByType(Form);
Find a child at any level by element ID, itemId property, Component instance or custom function.
It cascades down the component hierarchy. See also {@see findChildByType}
Find child by instance type of the parent
const form = textField.findAncestorByType(Form);
Find children at any level by element ID, itemId property, Component instance or custom function.
It cascades down the component hierarchy. See also {@see findChildByType}
Find children by instance type of the parent
const form = textField.findAncestorByType(Form);
Find the item by element ID, itemId property, Component instance or custom function.
If you want to search the component tree hierarchy use {@see findChild()}
Find the item by element ID, itemId property, Component instance or custom function
Fire an event
When a listener returns false this function will return false too.
Rest ...args: Parameters<ColorMenuEventMap<Component>[K]>Protected getProtected getProtected hasHide this component
This sets the "hidden" attribute on the DOM element which set's CSS display:none. You can change this to fade with css class "goui-fade-in" and "goui-fade-out"
If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.
Protected internalProtected internalProtected internalAdd a listener
Optional options: ObservableListenerOptsProtected onProtected relayProtected renderCan be overriden to wrap the component
Protected renderProtected restoreProtected
Restore state of the component in this function. It's called before render in init().
saveState();
Protected saveShow aligned to the given component.
It will align the top left of the menu top the bottom left of the component. It will also be at least as wide as the given component by setting the min-width style.
avoid going out of the viewport
Remove listener
Static Private rgb2hexStatic uniqueIDGenerated using TypeDoc
Color menu component
Example