Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/inlinedropdown.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# InlineDropdown
Opens a compact inline menu.
```html
<noora-inline-dropdown label="Sort">
<noora-dropdown-item value="newest">Newest</noora-dropdown-item>
</noora-inline-dropdown>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `""` | Sets the trigger label. |
| `size` | `small`, `large` | `"small"` | Controls the trigger dimensions. |
| `disabled` | `boolean` | `false` | Disables the trigger. |
| `open` | `boolean` | `false` | Controls whether the menu is open. |
| `keep-open` | `boolean` | `false` | Keeps the menu open after selection. |
## Properties
| Property | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `items` | `Array<Record<string, unknown>>` | `[]` | Defines menu items programmatically when declarative noora-dropdown-item children are not used. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-open-change` | `CustomEvent<{ open: boolean }>` | Emitted when the dropdown opens or closes. |
| `noora-select` | `CustomEvent<{ item: Record<string, unknown>; value: unknown }>` | Emitted when an enabled item is selected. |
## Slots
| Slot | Description |
| --- | --- |
| `icon` | The trigger icon. |
| `default` | Declarative noora-dropdown-item children. |
## Styling parts
| Part | Description |
| --- | --- |
| `trigger` | The menu trigger. |
| `content` | The menu content. |
Selections emit a `noora-select` event.
## Default
Use an inline menu for compact choices.
```html
<noora-inline-dropdown label="Sort">
<noora-dropdown-item value="newest">Newest</noora-dropdown-item>
<noora-dropdown-item value="oldest">Oldest</noora-dropdown-item>
</noora-inline-dropdown>
```
## Disabled
Prevent changes while the choice is unavailable.
```html
<noora-inline-dropdown label="Sort" disabled>
<noora-dropdown-item value="newest">Newest</noora-dropdown-item>
</noora-inline-dropdown>
```
## Large items
Use larger item rows for more prominent menus.
```html
<noora-inline-dropdown label="Environment" size="large">
<noora-dropdown-item value="production" size="large">Production</noora-dropdown-item>
<noora-dropdown-item value="staging" size="large">Staging</noora-dropdown-item>
</noora-inline-dropdown>
```
## Items with icons
Pair choices with recognizable icons.
```html
<noora-inline-dropdown label="View">
<noora-dropdown-item value="grid" icon="layout_grid">Grid</noora-dropdown-item>
<noora-dropdown-item value="list" icon="list">List</noora-dropdown-item>
</noora-inline-dropdown>
```
## Secondary text
Add concise context beside each label.
```html
<noora-inline-dropdown label="Branch">
<noora-dropdown-item value="main" secondary-text="default">main</noora-dropdown-item>
<noora-dropdown-item value="release" secondary-text="protected">release</noora-dropdown-item>
</noora-inline-dropdown>
```