Preview
Web-view
2min
The web-view component allows the user to use an URL or pass raw HTML as the preview content.
Long-press on a widget
This example displays a preview after long-pressing the widget
See the full example on GitHub.
long-press-on-widget
preview:
isCompact: false
children:
- type: component.web-view
options:
uri: https://www.google.com
isTrackingTransparencyRequired: true
height: 500
Long-press - onPress action
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 web-view 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 example of web-longpress-onpress and web-detail on GitHub.
web-view-longpress-onPress
web-detail
title: Activity detail
type: jig.default
header:
type: component.jig-header
options:
height: small
children:
type: component.image
options:
title: [email protected]
source:
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
children:
- type: component.entity
options:
isCompact: true
children:
- type: component.entity-field
options:
label: Activity
value: [email protected]
- type: component.entity-field
options:
label: Location
value: [email protected]
- type: component.entity-field
options:
label: Time
value: [email protected]
preview:
isCompact: true
actions:
- children:
- type: action.go-to
options:
title: Go To Action
linkTo: placeholder
- type: action.go-to
options:
title: Go to Danger
linkTo: placeholder
style:
isDanger: true
- type: action.go-to
options:
title: Go to Disabled
linkTo: placeholder
style:
isDisabled: true
children:
- type: component.web-view
options:
isTrackingTransparencyRequired: true
content: |
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0; text-align: center;">
<h1 style="text-align: center;"> Activity detail</h1>
<p style="text-align: center;">Tap to see more!</p>
</body>
</html>
header:
type: component.jig-header
options:
height: medium
children:
type: component.image
options:
title: [email protected]
subtitle: [email protected]
source:
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