Preview
Web-view
2min
the web view component allows the user to use an url or pass raw html as the preview content examples and code snippets 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 web widget jigx children \ type component grid options children \ type component grid item options size "1x1" children type component jig widget options jigid long press on widget 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 title web view preview onpress type jig list icon world header type component jig header options height small children type component image options title activities 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 datasources activities type datasource static options data \ id 1 name swimming location pool previewdetail 7pm image love it \ id 2 name tennis location court previewdetail 6am image rating star \ id 3 name exercising location gym previewdetail 5pm image multiple neutral 2 data =@ctx datasources activities item type component list item options title =@ctx current item name subtitle =@ctx current item location rightelement element icon icon =@ctx current item image onpress type action go to options linkto web detail parameters id =@ctx current item id name =@ctx current item name location =@ctx current item location previewdetail =@ctx current item previewdetail web detail title activity detail type jig default header type component jig header options height small children type component image options title =@ctx jig inputs name 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 =@ctx jig inputs name \ type component entity field options label location value =@ctx jig inputs location \ type component entity field options label time value =@ctx jig inputs previewdetail 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 =@ctx jig inputs name subtitle =@ctx jig inputs location 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
