diff --git a/custom_cards/custom_card_mpse_printer/custom_card_mpse_printer.yaml b/custom_cards/custom_card_mpse_printer/custom_card_mpse_printer.yaml index 56fad13d0..61f83407e 100644 --- a/custom_cards/custom_card_mpse_printer/custom_card_mpse_printer.yaml +++ b/custom_cards/custom_card_mpse_printer/custom_card_mpse_printer.yaml @@ -93,7 +93,7 @@ custom_card_mpse_printer: bar-card-backgroundbar{ display: none; } - bar-card-name{ + bar-card-name{ width: 2rem; margin-right: 40px !important; } diff --git a/custom_cards/custom_card_wilbiev_subtitle/README.md b/custom_cards/custom_card_wilbiev_subtitle/README.md new file mode 100644 index 000000000..70588f4ff --- /dev/null +++ b/custom_cards/custom_card_wilbiev_subtitle/README.md @@ -0,0 +1,65 @@ +--- +title: Subtitle Custom-card +hide: + - toc +--- + + + +# Custom-card "Subtitle" + +This is a `custom-card` to display a subtitle header. + +![Screenshot](../../docs/assets/img/custom_card_wilbiev_subtitle.png) + +## Credits + +Author: wilbiev - 2023 +Version: 1.0.0 + +## Changelog + +
+1.0.0 +Initial release. +
+ +## Requirements + +This card needs the following to function correctly: + +['Text Divider Row'](https://github.com/iantrich/text-divider-row) + +## Variables + + + + + + + + + + + + + + + + +
VariableExampleRequiredDefaultExplanation
ulm_custom_card_wilbiev_subtitle_name"Subtitle"yesThe name to display
+ +## Usage + +```yaml +- type: "custom:button-card" + template: "custom_card_wilbiev_subtitle" + variables: + ulm_custom_card_wilbiev_title_name: "Lights" +``` + +??? note "Template Code" + + ```yaml title="custom_card_bar_card.yaml" + --8<-- "custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_subtitle.yaml" + ``` diff --git a/custom_cards/custom_card_wilbiev_subtitle/custom_card_wilbiev_subtitle.yaml b/custom_cards/custom_card_wilbiev_subtitle/custom_card_wilbiev_subtitle.yaml new file mode 100644 index 000000000..610f18bfb --- /dev/null +++ b/custom_cards/custom_card_wilbiev_subtitle/custom_card_wilbiev_subtitle.yaml @@ -0,0 +1,48 @@ +--- +### Card SubTitle ### +custom_card_wilbiev_subtitle: + variables: + ulm_custom_card_wilbiev_title_name: "Subtitle" + tap_action: + action: "none" + show_icon: false + show_label: false + show_name: false + styles: + card: + - height: "auto" + - padding: "0px !important;" + grid: + - grid-template-areas: "'item1'" + - grid-template-columns: "1fr" + - grid-template-rows: "min-content" + card_mod: + style: | + ha-card { + background-color: #E8E9EB !important; + } + custom_fields: + item1: + card: + type: "entities" + card_mod: + style: | + ha-card { + background-color: #E8E9EB !important; + } + entities: + - type: "custom:text-divider-row" + text: | + [[[ return variables.ulm_custom_card_wilbiev_subtitle_name ]]] + card_mod: + style: | + :host { + --text-divider-font-size: 24px; + --text-divider-color: black + } + .text-divider span { + background-color: #E8E9EB !important; + } + - type: "divider" + style: + background-color: "rgb(210,210,210)" diff --git a/custom_cards/custom_card_wilbiev_title/README.md b/custom_cards/custom_card_wilbiev_title/README.md new file mode 100644 index 000000000..24c699852 --- /dev/null +++ b/custom_cards/custom_card_wilbiev_title/README.md @@ -0,0 +1,73 @@ +--- +title: Title Custom-card +hide: + - toc +--- + + + +# Custom-card "Title" + +This is a `custom-card` to display a title header. + +![Screenshot](../../docs/assets/img/custom_card_wilbiev_title.png) + +## Credits + +Author: wilbiev - 2023 +Version: 1.0.0 + +## Changelog + +
+1.0.0 +Initial release. +
+ +## Requirements + +This card needs the following to function correctly: + +['Text Divider Row'](https://github.com/iantrich/text-divider-row) + +## Variables + + + + + + + + + + + + + + + + + + + + + + + +
VariableExampleRequiredDefaultExplanation
ulm_custom_card_wilbiev_title_name"Title"yesThe name to display
ulm_custom_card_wilbiev_title_nav"/adaptive-dash/home"no"""Navigate to another view. Shows the 'Back'-button when having a value"
+ +## Usage + +```yaml +- type: "custom:button-card" + template: "custom_card_wilbiev_title" + variables: + ulm_custom_card_wilbiev_title_name: "Living room" + ulm_custom_card_wilbiev_title_nav: "/adaptive-dash/home" # OPTIONAL +``` + +??? note "Template Code" + + ```yaml title="custom_card_bar_card.yaml" + --8<-- "custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_title.yaml" + ``` diff --git a/custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_title.yaml b/custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_title.yaml new file mode 100644 index 000000000..34e71b350 --- /dev/null +++ b/custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_title.yaml @@ -0,0 +1,87 @@ +--- +### Card Title ### +custom_card_wilbiev_title: + variables: + ulm_custom_card_wilbiev_title_name: "Title" + ulm_custom_card_wilbiev_title_nav: "" + tap_action: + action: "navigate" + navigation_path: "[[[ return variables.ulm_custom_card_wilbiev_title_nav; ]]]" + show_icon: false + show_label: false + show_name: false + styles: + grid: + - grid-template-areas: > + [[[ + return "'" + [(variables.ulm_custom_card_wilbiev_title_nav ? 'item2' : 'item1'), + (variables.ulm_custom_card_wilbiev_title_nav ? 'item1' : '')].join(' ') + "'"; + ]]] + - grid-template-columns: | + [[[ + return [(variables.ulm_custom_card_wilbiev_title_nav ? 'min-content 1fr' : '1fr')].join(' '); + ]]] + - grid-template-rows: "min-content" + card: + - height: "auto" + - padding: "5px !important;" + custom_fields: + item2: + - display: > + [[[ + if(variables.ulm_custom_card_wilbiev_title_nav == ""){ + return "none"; + } else { + return "block"; + } + ]]] + card_mod: + style: | + ha-card { + border: 2px black outset !important; + background-color: lightgray !important; + } + custom_fields: + item1: + card: + type: "entities" + card_mod: + style: | + ha-card { + --primary-text-color: black; + background-color: lightgray !important; + box-shadow: none; + } + entities: + - type: "custom:text-divider-row" + text: | + [[[ return variables.ulm_custom_card_wilbiev_title_name ]]] + card_mod: + style: | + :host { + --text-divider-color: black; + --text-divider-font-size: 36px; + --text-divider-line-size: 3px; + --text-divider-margin: 0px; + } + .text-divider span { + background-color: lightgray !important; + } + item2: + card: + type: "custom:mushroom-chips-card" + chips: + - type: "action" + tap_action: + action: "navigate" + navigation_path: "[[[ return variables.ulm_custom_card_wilbiev_title_nav; ]]]" + icon: "mdi:arrow-left" + card_mod: + style: | + ha-card { + --primary-text-color: black; + --chip-background: #E8E9EB; + --chip-height: 48px; + --chip-border-radius: 50%; + --chip-icon-size: 24px; + } diff --git a/docs/assets/img/custom_card_wilbiev_subtitle.png b/docs/assets/img/custom_card_wilbiev_subtitle.png new file mode 100644 index 000000000..42cc43ba6 Binary files /dev/null and b/docs/assets/img/custom_card_wilbiev_subtitle.png differ diff --git a/docs/assets/img/custom_card_wilbiev_title.png b/docs/assets/img/custom_card_wilbiev_title.png new file mode 100644 index 000000000..120e564df Binary files /dev/null and b/docs/assets/img/custom_card_wilbiev_title.png differ