Preview
Entity
2min
The entity component allows the user to use entity (sections, field-rows and entity-fields) as the preview content.
This example displays a preview after long-pressing the widget See the full example on GitHub.
entity-longpress-widget
1preview:
2 isCompact: false
3 children:
4 - type: component.entity
5 options:
6 isCompact: true
7 children:
8 - type: component.section
9 options:
10 title: General info
11 children:
12 - type: component.field-row
13 options:
14 children:
15 - type: component.entity-field
16 options:
17 label: First Name
18 value: Karl
19 contentType: default
20 - type: component.entity-field
21 options:
22 label: Middle Name
23 value: Joseph
24 contentType: default
25 - type: component.entity-field
26 options:
27 label: Last Name
28 value: Fisher
29 contentType: default
30 - type: component.entity-field
31 options:
32 label: Date of birth
33 value: 1988-01-19
34 rightIcon: calendar
35 - type: component.entity-field
36 options:
37 label: Phone
38 value: +987 654 321
39 contentType: phone
40 - type: component.entity-field
41 options:
42 label: Email
43 value: [email protected]
44 contentType: email
45 - type: component.entity-field
46 options:
47 label: ""
48 value: Tap to see more details!
49 header:
50 type: component.jig-header
51 options:
52 height: small
53 children:
54 type: component.image
55 options:
56 title: Activities
57 source:
58 uri: https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Njl8fHNwb3J0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60
This example displays a preview after long-pressing the list-item on the widget
This example displays a preview after long-pressing the list-item in the jig. It includes the entity component as well as the go-to actions.
As you can see in the code snippet, the original list doesn't include the preview. Our onPress action allows us to use the preview that is included in the detail jig.
See the full examples of LongPress onPress and entity-detail in GitHub.
entity-longpress-onPress
entity-detail
1title: Activity detail
2type: jig.default
3
4header:
5 type: component.jig-header
6 options:
7 height: small
8 children:
9 type: component.image
10 options:
11 title: [email protected]
12 source:
13 uri: https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Njl8fHNwb3J0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60
14
15children:
16 - type: component.entity
17 options:
18 isCompact: true
19 children:
20 - type: component.section
21 options:
22 title: Activity - Compact entity
23 children:
24 - type: component.entity-field
25 options:
26 label: Activity
27 value: [email protected]
28 - type: component.entity-field
29 options:
30 label: Location
31 value: [email protected]
32 - type: component.entity-field
33 options:
34 label: Time
35 value: [email protected]
36
37preview:
38 isCompact: true
39 actions:
40 - children:
41 - type: action.go-to
42 options:
43 title: Go To Action
44 linkTo: placeholder
45 - type: action.go-to
46 options:
47 title: Go to Danger
48 linkTo: placeholder
49 style:
50 isDanger: true
51 - type: action.go-to
52 options:
53 title: Go to Disabled
54 linkTo: placeholder
55 style:
56 isDisabled: true
57
58
59 children:
60 - type: component.entity
61 options:
62 isCompact: false
63 children:
64 - type: component.section
65 options:
66 title: Activity - Basic entity
67 children:
68 - type: component.entity-field
69 options:
70 label: Activity
71 value: [email protected]
72 - type: component.entity-field
73 options:
74 label: Location
75 value: [email protected]
76 - type: component.entity-field
77 options:
78 label: Time
79 value: [email protected]
80 - type: component.entity-field
81 options:
82 label: ""
83 value: Tap to see a compact entity!
84
85
86 header:
87 type: component.jig-header
88 options:
89 height: medium
90 children:
91 type: component.image
92 options:
93 title: [email protected]
94 subtitle: [email protected]
95 source:
96 uri: https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Njl8fHNwb3J0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60
This example displays a preview after long-pressing the event in the Calendar jig (on the widget)
This example displays a preview after long-pressing the event in the Calendar jig (on the event)
See the full example of entity longpress and entity-calendar-detail in GitHub.
entity-longpress-on-calendar
entity-calendar-detail
1title: Meeting detail
2type: jig.default
3
4header:
5 type: component.jig-header
6 options:
7 height: small
8 children:
9 type: component.image
10 options:
11 title: Meeting detail
12 source:
13 uri: https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWVldGluZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60
14
15children:
16 - type: component.entity
17 options:
18 isCompact: true
19 children:
20 - type: component.section
21 options:
22 title: Meeting - Compact entity
23 children:
24 - type: component.entity-field
25 options:
26 label: Title
27 value: [email protected]
28 - type: component.entity-field
29 options:
30 label: Type
31 value: [email protected]
32 rightIcon: conversation-chat-2
33 - type: component.entity-field
34 options:
35 label: Description
36 value: [email protected]
37
38
39preview:
40 isCompact: true
41 actions:
42 - children:
43 - type: action.go-to
44 options:
45 title: Join the meeting
46 linkTo: placeholder
47 - type: action.go-to
48 options:
49 title: Cancel the meeting
50 linkTo: placeholder
51 style:
52 isDanger: true
53 - type: action.go-to
54 options:
55 title: Change the location
56 linkTo: placeholder
57 style:
58 isDisabled: true
59
60
61 children:
62 - type: component.entity
63 options:
64 isCompact: true
65 children:
66 - type: component.section
67 options:
68 title: Meeting - Compact entity
69 children:
70 - type: component.entity-field
71 options:
72 label: Title
73 value: [email protected]
74 - type: component.entity-field
75 options:
76 label: Description
77 value: [email protected]
78 - type: component.entity-field
79 options:
80 label: Type
81 value: [email protected]
82
83
84 header:
85 type: component.jig-header
86 options:
87 height: medium
88 children:
89 type: component.image
90 options:
91 title: Meeting detail
92 source:
93 uri: https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWVldGluZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60
