Inline Dropdown

A component that allows for quick actions within tables. Aside from facilitating actions and modifications within tables, the inline dropdown can present the status of a given data point to the user in a manner akin to that found in the Status Indicator.

Status

The status of the component

Ready for use!

Repository

A link to the repo where the component lives.

Open link

Code Sandbox

undefined

Open page

Overview

Our Dropdown component. In the most basic case, it's used with gux-option to give users a list of text options to select from, but other types of options with different appearance can be created by creating a new component and adding it to validOptionTags list in gux-dropdown-types.ts, then following the resulting compiler errors.

Properties

Property	Attribute	Type	Default
disabled	disabled	boolean	false
placeholder	placeholder	string	undefined
required	required	boolean	false
value	value	string	undefined

Events

Event	Description	Type
guxcollapsed		CustomEvent<void>
guxexpanded		CustomEvent<void>

Slots

Slot	Description
	for a gux-listbox containing ValidDropdownOption children

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-inline-dropdown-beta --> gux-truncate
                                                  gux-inline-dropdown-beta --> gux-icon
                                                  gux-inline-dropdown-beta --> gux-popup
                                                  gux-truncate --> gux-tooltip
                                                  style gux-inline-dropdown-beta fill:#f9f,stroke:#333,stroke-width:4px

Inline Dropdown

Component checklist