File
Description
Toolbar component for eui-tree-list providing filter and expand/collapse controls.
Displays search input for filtering tree items and buttons for expanding or collapsing all items.
Automatically emits filter events on initialization if filter value is provided.
Manages toggle state for expand/collapse button display.
Must be used within eui-tree-list component to control tree list behavior.
Basic Usage
Example :<!-- Toolbar is typically used internally by eui-tree-list -->
<eui-tree-list [isShowToolbar]="true">
<eui-tree-list-item label="Item 1" />
<eui-tree-list-item label="Item 2" />
</eui-tree-list>
<!-- Custom labels -->
<eui-tree-list
[isShowToolbar]="true"
filterLabel="Search items..."
expandAllLabel="Expand"
collapseAllLabel="Collapse">
<!-- items -->
</eui-tree-list>
// Listen to toolbar events
onFilter(keyword: string): void {
console.log('Filtering by:', keyword);
}
onExpandAll(): void {
console.log('All items expanded');
}
Accessibility
- Search input has proper placeholder and label
- Expand/collapse buttons have aria-labels
- Icons have descriptive aria-labels
- Keyboard accessible controls
Notes
- Automatically managed by parent eui-tree-list component
- Filter emits on initialization if filterValue is set
- Toggle button switches between expand and collapse states
- Supports icon-only buttons when labels are empty strings
- Clearable search input for easy filter reset
Implements
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
HostBindings
|
|
|
|
collapseAllLabel
|
Type : string
|
The label for the collapse all button
|
|
e2eAttr
|
Type : string
|
Default value : 'eui-tree-list-toolbar'
|
|
expandAllLabel
|
Type : string
|
The label for the expand all button
|
|
filterLabel
|
Type : string
|
The value of the filter placeholder
|
|
filterValue
|
Type : string
|
Default value : ''
|
The value of the filter input
|
|
hasLabels
|
Type : boolean
|
Default value : true
|
|
isFilterVisible
|
Type : boolean
|
Default value : true
|
|
isToggleExpanded
|
Type : boolean
|
Default value : false
|
Option that toggles the expanded/collapsed state of the corresponding button
|
|
isToggleVisible
|
Type : boolean
|
Default value : true
|
|
isVisible
|
Type : boolean
|
Default value : false
|
Shows or hides the toolbar
|
Outputs
|
collapseAll
|
Type : EventEmitter
|
Event emitted when the collapse all button is clicked.
|
|
expandAll
|
Type : EventEmitter
|
Event emitted when the expand all button is clicked.
|
|
filter
|
Type : EventEmitter
|
Event emitted if there is or if a filter value changes.
|
HostBindings
|
class
|
Type : string
|
Default value : 'eui-tree-list-toolbar'
|
|
classes
|
Type : string
|
Default value : 'eui-tree-list-toolbar'
|
Decorators :
@HostBinding('class')
|