docs: Add alignment parameter to menu elements documentation (#1681)

This commit is contained in:
Dermot Duffy
2024-11-09 15:49:53 -08:00
committed by GitHub
parent 5141e39dbe
commit 231606ad18
2 changed files with 62 additions and 53 deletions
+55 -47
View File
@@ -32,17 +32,18 @@ elements:
Configuration is similar to a stock [Picture Elements Icon](https://www.home-assistant.io/lovelace/picture-elements/#icon-element). Configuration is similar to a stock [Picture Elements Icon](https://www.home-assistant.io/lovelace/picture-elements/#icon-element).
| Parameter | Default | Description | | Parameter | Default | Description |
| ------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:frigate-card-menu-icon`. | | `type` | | Must be `custom:frigate-card-menu-icon`. |
| `enabled` | `true` | Whether or not to show this menu item. | | `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `entity` | | An optional Home Assistant entity for use with actions. | | `enabled` | `true` | Whether or not to show this menu item. |
| `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). | | `entity` | | An optional Home Assistant entity for use with actions. |
| `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). | | `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). |
| `priority` | `50` | The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`, when the menu alignment is `left`). Minimum `0`, maximum `100`. | | `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). |
| `style` | | Position and style the element using CSS. | | `priority` | `50` | The menu item priority. Higher priority items are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). Minimum `0`, maximum `100`. |
| `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. | | `style` | | Position and style the element using CSS. |
| `title` | | An optional title to display. | | `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. |
| `title` | | An optional title to display. |
## `menu-submenu` ## `menu-submenu`
@@ -54,18 +55,19 @@ elements:
# [...] # [...]
``` ```
| Parameter | Default | Description | | Parameter | Default | Description |
| ------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:frigate-card-menu-submenu`. | | `type` | | Must be `custom:frigate-card-menu-submenu`. |
| `enabled` | `true` | Whether or not to show this menu item. | | `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `entity` | | An optional Home Assistant entity for use with actions. | | `enabled` | `true` | Whether or not to show this menu item. |
| `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). | | `entity` | | An optional Home Assistant entity for use with actions. |
| `items` | | A list of menu items, as described below. | | `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). |
| `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). | | `items` | | A list of menu items, as described below. |
| `priority` | `50` | The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`, when the menu alignment is `left`). Minimum `0`, maximum `100`. | | `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). |
| `style` | | Position and style the element using CSS. | | `priority` | `50` | The menu item priority. Higher priority items are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). Minimum `0`, maximum `100`. |
| `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. | | `style` | | Position and style the element using CSS. |
| `title` | | An optional title to display. | | `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. |
| `title` | | An optional title to display. |
### Submenu items ### Submenu items
@@ -90,18 +92,19 @@ elements:
# [...] # [...]
``` ```
| Parameter | Default | Description | | Parameter | Default | Description |
| ------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:frigate-card-menu-submenu-select`. | | `type` | | Must be `custom:frigate-card-menu-submenu-select`. |
| `enabled` | `true` | Whether or not to show this menu item. | | `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `entity` | | An optional Home Assistant entity for use with actions. | | `enabled` | `true` | Whether or not to show this menu item. |
| `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). | | `entity` | | An optional Home Assistant entity for use with actions. |
| `options` | | An optional dictionary of overrides keyed by the option name that the given select entity supports. These options can be used to set or override submenu item parameters on a per-option basis. The format is as described in [Submenu Items](./README.md?id=submenu-items) above. | | `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). |
| `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). | | `options` | | An optional dictionary of overrides keyed by the option name that the given select entity supports. These options can be used to set or override submenu item parameters on a per-option basis. The format is as described in [Submenu Items](./README.md?id=submenu-items) above. |
| `priority` | `50` | The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`, when the menu alignment is `left`). Minimum `0`, maximum `100`. | | `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). |
| `style` | | Position and style the element using CSS. | | `priority` | `50` | The menu item priority. Higher priority items are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). Minimum `0`, maximum `100`. |
| `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. | | `style` | | Position and style the element using CSS. |
| `title` | | An optional title to display. | | `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. |
| `title` | | An optional title to display. |
See the `select` [submenu example](../../../examples.md?id=select-submenu). See the `select` [submenu example](../../../examples.md?id=select-submenu).
@@ -117,18 +120,19 @@ elements:
Configuration is similar to a stock [Picture Elements State Icon](https://www.home-assistant.io/lovelace/picture-elements/#state-icon). Configuration is similar to a stock [Picture Elements State Icon](https://www.home-assistant.io/lovelace/picture-elements/#state-icon).
| Parameter | Default | Description | | Parameter | Default | Description |
| ------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | | Must be `custom:frigate-card-menu-state-icon`. | | `type` | | Must be `custom:frigate-card-menu-state-icon`. |
| `enabled` | `true` | Whether or not to show this menu item. | | `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `entity` | | An optional Home Assistant entity for use with actions. | | `enabled` | `true` | Whether or not to show this menu item. |
| `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). | | `entity` | | An optional Home Assistant entity for use with actions. |
| `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). | | `icon` | | An required icon to display, e.g. `mdi:car`. See also [custom icons](../../../usage/custom-icons.md). |
| `priority` | `50` | The menu item priority. Higher priority item are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`, when the menu alignment is `left`). Minimum `0`, maximum `100`. | | `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). |
| `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. | | `priority` | `50` | The menu item priority. Higher priority items are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). Minimum `0`, maximum `100`. |
| `state_color` | `true` | Set to true to have icons colored when entity is active. | | `tap_action`, `double_tap_action`, `hold_action`, `start_tap`, `end_tap` | | The [actions](../../actions/README.md) to take when this item is interacted with. |
| `style` | | Position and style the element using CSS. | | `state_color` | `true` | Set to true to have icons colored when entity is active. |
| `title` | | An optional title to display. | | `style` | | Position and style the element using CSS. |
| `title` | | An optional title to display. |
## `status-bar-icon` ## `status-bar-icon`
@@ -202,6 +206,7 @@ elements:
```yaml ```yaml
elements: elements:
- type: custom:frigate-card-menu-icon - type: custom:frigate-card-menu-icon
alignment: matching
enabled: true enabled: true
entity: light.office_main_lights entity: light.office_main_lights
icon: mdi:car icon: mdi:car
@@ -211,6 +216,7 @@ elements:
color: white color: white
title: Vroom title: Vroom
- type: custom:frigate-card-menu-state-icon - type: custom:frigate-card-menu-state-icon
alignment: matching
enabled: true enabled: true
entity: light.office_main_lights entity: light.office_main_lights
icon: mdi:chair-rolling icon: mdi:chair-rolling
@@ -221,6 +227,7 @@ elements:
color: white color: white
title: Office lights title: Office lights
- type: custom:frigate-card-menu-submenu - type: custom:frigate-card-menu-submenu
alignment: matching
enabled: true enabled: true
entity: light.office_main_lights entity: light.office_main_lights
icon: mdi:menu icon: mdi:menu
@@ -250,6 +257,7 @@ elements:
color: white color: white
title: Office lights title: Office lights
- type: custom:frigate-card-menu-submenu-select - type: custom:frigate-card-menu-submenu-select
alignment: matching
enabled: true enabled: true
entity: input_select.kitchen_scene entity: input_select.kitchen_scene
icon: mdi:lamps icon: mdi:lamps
+7 -6
View File
@@ -51,12 +51,13 @@ menu:
### Options for each button ### Options for each button
| Option | Default | Description | | Option | Default | Description |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alignment` | `matching` | Whether this button should have an alignment that is `matching` the menu alignment or `opposing` the menu. Can be used to create two separate groups of buttons on the menu. `priority` orders buttons within a given `alignment`. | | `alignment` | `matching` | Whether this menu item should have an alignment that is `matching` the menu alignment or `opposing` the menu alignment. Can be used to create two separate groups of buttons on the menu. The `priority` option orders buttons within a given `alignment`. |
| `enabled` | `true` for `frigate`, `cameras`, `substreams`, `live`, `clips`, `snapshots`, `timeline`, `download`, `camera_ui`, `fullscreen`, `media_player`, `display_mode` and `ptz_home`. `false` for `image`, `expand`, `microphone`, `mute`, `play`, `recordings`, `screenshot`, `ptz_controls` | Whether or not to show the button. | | `enabled` | `true` for `frigate`, `cameras`, `substreams`, `live`, `clips`, `snapshots`, `timeline`, `download`, `camera_ui`, `fullscreen`, `media_player`, `display_mode` and `ptz_home`. `false` for `image`, `expand`, `microphone`, `mute`, `play`, `recordings`, `screenshot`, `ptz_controls` | Whether or not to show the button. |
| `icon` | | An icon to overriding the default for that button, e.g. `mdi:camera-front`. See also [custom icons](../usage/custom-icons.md). | | `icon` | | An icon to overriding the default for that button, e.g. `mdi:camera-front`. See also [custom icons](../usage/custom-icons.md). |
| `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). | | `permanent` | `false` | If `false` the menu item is hidden when the menu has the `hidden` style and the menu is closed, otherwise it is shown (and sorted to the front). |
| `priority` | `50` | The menu item priority. Higher priority items are ordered closer to the start of the menu alignment (i.e. a button with priority `70` will order further to the left than a button with priority `60`). Priority applies separately to `matching` and `opposing` groups (see `alignment` above). Minimum `0`, maximum `100`. |
## `style` ## `style`