Tabs at bottom of card

[Jawyman42]

For mobile dashboards it would be a great feature to be able to put the tabs at the bottom of the card or put them as a side scroller or side tabs.

[kinghat]

the material guidelines dont recommend putting tabs at the bottom as a ux pattern but i will probably implement it. sides not so much. thanks for the request.

[ildar170975]

Managed to do it by card-mod:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
            }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Check here

[Californian]

That's my main point of disagreement with MD: tabs at the top are nearly unusable on medium to large phones, especially without the ability to swipe between them (which isn't always possible depending on the contents of the tabs).

[Californian]

Have you written any css to get the labels to float to the bottom/get the tab scrollable instead of the group with the tab?

[ildar170975]

get the labels to float to the bottom/get the tab scrollable instead of the group with the tab?

Unclear, please elaborate & attach some pics