Merge pull request #1272 from zauberzeug/link_images

Add demos to use image links

website/more_documentation/image_documentation.py

@@ -31,3 +31,10 @@ def more() -> None:
 
         src = 'https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json'
         ui.html(f'<lottie-player src="{src}" loop autoplay />').classes('w-full')
+
+    @text_demo('Image link', '''
+        Images can link to another page by wrapping them in a [ui.link](https://nicegui.io/documentation/link).
+    ''')
+    def link():
+        with ui.link(target='https://github.com/zauberzeug/nicegui'):
+            ui.image('https://picsum.photos/id/41/640/360').classes('w-64')

website/more_documentation/link_documentation.py

@@ -43,3 +43,12 @@ def more() -> None:
         ui.label('Go to other page')
         ui.link('... with path', '/some_other_page')
         ui.link('... with function reference', my_page)
+
+    @text_demo('Link from images and other elements', '''
+        By nesting elements inside a link you can make the whole element clickable.
+        This works with all elements but is most useful for non-interactive elements like 
+        [ui.image](/documentation/image), [ui.avatar](/documentation/image) etc.
+    ''')
+    def link_from_elements():
+        with ui.link(target='https://github.com/zauberzeug/nicegui'):
+            ui.image('https://picsum.photos/id/41/640/360').classes('w-64')