Designfrage für Kachelidentität

[Neuling]

Hallo zusammen,

ich bekomme es nicht hin, das meine navigationsleiste (nicht badges) so aussieht.

Kann mir da jemand weiter helfen. Möchte diese gern zur Navigation zwischen den einzelnen Dashboards benutzen.

Vielen Dank.

[jayjojayson]

Hi, habe mal mit einer bubble-card herumprobiert. So schaut sie aktuell aus, der aktive Tab fehlt noch. Daher sieht das Ergebnis etwas anders aus.

Hier der Code:

type: custom:bubble-card
styles: |
  ha-card {
    height: 40px !important;
    width: 75% !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 20px !important;
    background: #b4b4b5 !important;
  } 
  * { 
    font-size: 12px !important;
    font-weight: bold;
    border: none !important;
    background: none !important;
  }
  .bubble-button {
    align-items: center;
    color: #3292fc;
    cursor: pointer;
    height: 26px;
    left: 5px;
    margin-top: 7px;
    padding: 0 15px 0 10px;
    border-radius: 15px !important;
    background: #ffffff !important;
  }
card_type: horizontal-buttons-stack
auto_order: false
1_name: Test
1_link: /dashboard-test/home
1_icon: ""
2_link: /dashboard-test/heizung
2_icon: ""
2_name: Test 2
3_link: /dashboard-test/licht
3_icon: ""
3_name: Test 3
4_link: /dashboard-test/garten
4_icon: ""
4_name: Test 4

[MarzyHA]

Ich denke viel besser als @jayjojayson s Lösung kann man es nicht hinkriegen. Diese Leiste die du meinst ist ein nativer iOS-Component, den man nur in einer nativen App nutzen kann. Das heißt man kann das Design nur „nachstellen“ wie jayjojayson das bereits beschrieben hat

[MrThiemann]

type: horizontal-stack
cards:
  - type: custom:button-card
    name: Startseite
    template: menu_button
    variables:
      path: /dashboard-cardmod/seite1
  - type: custom:button-card
    name: Verkaufen
    template: menu_button
    variables:
      path: /dashboard-cardmod/seite2
  - type: custom:button-card
    name: Kaufen
    template: menu_button
    variables:
      path: /dashboard-cardmod/seite3
  - type: custom:button-card
    name: Mein rebuy
    template: menu_button
    variables:
      path: /dashboard-cardmod/seite4

Wenn man diese Variante nutzen möchte, wo die automatische Erkennung der aktuellen Seite an dem jeweiligen Button gekennzeichnet ist, dann eignet sich der obere code wunderbar =) Allerdings nur in Kombination mit einem button_card_template:

button_card_templates:
  menu_button:
    styles:
      card:
        - border-radius: 20px
        - background-color: |
            [[[
              return window.location.pathname.includes(variables.path) ? "white" : "lightgray";
            ]]]
        - padding: 10px 15px
      name:
        - color: |
            [[[
              return window.location.pathname.includes(variables.path) ? "blue" : "black";
            ]]]
        - font-size: 16px
        - font-weight: |
            [[[
              return window.location.pathname.includes(variables.path) ? "bold" : "normal";
            ]]]
    tap_action:
      action: navigate
      navigation_path: '[[[ return variables.path; ]]]'

[MrThiemann]

Wer ganz klassisch diese buttons haben möchte, der kann dann diesen code verwenden:

type: horizontal-stack
cards:
  - type: custom:button-card
    name: Startseite
    styles:
      card:
        - border-radius: 20px
        - background-color: lightgray
        - padding: 10px 15px
      name:
        - color: black
        - font-size: 16px
    tap_action:
      action: navigate
      navigation_path: /lovelace/seite_1
  - type: custom:button-card
    name: Verkaufen
    styles:
      card:
        - border-radius: 20px
        - background-color: lightgray
        - padding: 10px 15px
      name:
        - color: black
        - font-size: 16px
    tap_action:
      action: navigate
      navigation_path: /lovelace/seite_2
  - type: custom:button-card
    name: Kaufen
    styles:
      card:
        - border-radius: 20px
        - background-color: lightgray
        - padding: 10px 15px
      name:
        - color: black
        - font-size: 16px
    tap_action:
      action: navigate
      navigation_path: /lovelace/seite_3
  - type: custom:button-card
    name: Mein rebuy
    styles:
      card:
        - border-radius: 20px
        - background-color: lightgray
        - padding: 10px 15px
      name:
        - color: black
        - font-size: 16px
    tap_action:
      action: navigate
      navigation_path: /lovelace/seite_4