Forráskód Böngészése

add documentation to use image links

Rodja Trappe 1 éve
szülő
commit
c0c18dc8ba

+ 7 - 0
website/more_documentation/image_documentation.py

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

+ 9 - 0
website/more_documentation/link_documentation.py

@@ -43,3 +43,12 @@ def more() -> None:
         ui.label('Go to other page')
         ui.label('Go to other page')
         ui.link('... with path', '/some_other_page')
         ui.link('... with path', '/some_other_page')
         ui.link('... with function reference', my_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('', 'https://github.com/zauberzeug/nicegui', new_tab=True):
+            ui.image('https://picsum.photos/id/41/640/360').classes('w-64')