Skip to content

Navigate Card

Swiss Army Knife Functional Card Navigate D06 Light Off
Swiss Army Knife Functional Card Navigate D06 Dark Off

This card uses the Material 3 theme D06, TealBlue

Its a card, but it just demonstrates how to use the navigate user action on a tool

Description Aspect Ratio Target Size
A card that shows an icon and text, and has a navigate user action. 3/1 Grid with 3 columns
SAK Tool Used for
Icon Configured Icon (variable)
Text Navigation text (variable)
RectEx A rectangle covering the whole card to act as a button to handle the navigation action

Interaction

Part Description
Card This card navigates to the configured view

Usage

1.0.0-rc.3

1
2
3
4
5
6
7
8
- type: 'custom:swiss-army-knife-card'
  layout:
    template:
      name: sak_layout_fce_navigate
      variables:
        - sak_layout_navigate_icon: 'mdi:arrow-right-bold-circle'
        - sak_layout_navigate_text: 'Some View'
        - sak_layout_navigate_path: 'tut-03-p1'
Data Default Required Description
sak_layout_navigate_icon mdi:arrow-right-bold-circle The used icon on the card
sak_layout_navigate_text The text displayd on the card
sak_layout_navigate_path The path name of the view you want to navigate to

YAML Template Definition

1.0.0-rc.3

Full definition of layout template
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
sak_layout_fce_navigate:
  template:
    type: layout
    defaults: 
      - sak_layout_navigate_icon: mdi:arrow-right-bold-circle
      - sak_layout_navigate_text: 'Navigate'
      - sak_layout_navigate_path: 'Unknown'
  layout:
    styles:
      card:
        border-radius: 25em
        background: var(--theme-sys-color-secondary-container)
    aspectratio: 3/1
    toolsets:
      # ================================================================
      - toolset: column-icon
        position:
          cx: 50
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 50
            icon: '[[sak_layout_navigate_icon]]'
            styles:
              icon:
                fill: var(--secondary-text-color)
                opacity: 0.9

      # ================================================================
      - toolset: button-text
        position:
          cx: 175
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: text
            position:
              cx: 50
              cy: 50
            text: '[[sak_layout_navigate_text]]'
            styles:
              text:
                text-anchor: middle
                font-size: 30em
                font-weight: 700
                opacity: 1

      # ================================================================
      - toolset: button-cover
        position:
          cx: 150
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: rectex
            position:
              cx: 50
              cy: 50
              height: 100
              width: 300
            user_actions:
              tap_action:
                haptic: light
                actions:
                  - action: navigate
                    navigation_path: '[[sak_layout_navigate_path]]'
            styles:
              rectex:
                fill: rgba(0,0,0,0)
Back to top