@stratio/egeo
Version:
51 lines (38 loc) • 2.56 kB
Markdown
# Sidebar (Component)
The sidebar component has been designed to navigate through different sections of a web page.
## Inputs
| Property | Type | Req | Description | Default |
| ----------------- | ------------------- | ----- | ------------------------------------------------------------------------ | ---------------------------- |
| title | String | False | Title displayed on the top of menu | '' |
| active | StSidebarItem | False | The current active item | '' |
| items | StSidebarItem[] | False | List of items displayed on the menu | '' |
| defaultActive | Boolean | False | Unset first item as active by default if false | true |
| searchMode | Boolean | False | Boolean to enable or disable the search mode. By default, it is disabled | '' |
| searchPlaceholder | String | False | Search placeholder | 'Search' |
| emptyResults | String | False | Message displayed when search does not have any result | |
| visualMode | StSidebarVisualMode | False | Visual mode used to display the item list | 'StSidebarVisualMode.normal' |
## Outputs
| Property | Type | Description |
| -------- | ------------- | ---------------------------------------------------------------------------------- |
| change | StSidebarItem | Event emitted when the active item is changed. This emits the active item |
| search | String | Event emitted when search mode is enabled and user interacts with the search input |
## Example
```html
<st-sidebar class="sidebar"
title="Mesos Manager"
[items]="items"
qaTag="sidebar-demo">
</st-sidebar>
```
## Models
*Sidebar items* (StSidebarItem)
```typescript
export interface StSidebarItem {
id: string;
label: string;
class ? : string;
items ? : StSidebarItem[];
result ? : string;
disabled ? : boolean;
}
```