Navigate Card
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
| - 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)
|