Use ui.teleport to create fancy radio options (#3230)

* Use ui.teleport to create fancy radio options

* code review

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>

website/documentation/content/radio_documentation.py

@@ -9,4 +9,19 @@ def main_demo() -> None:
     radio2 = ui.radio({1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'value')
 
 
+@doc.demo('Inject arbitrary content', '''
+    Thanks to the [`ui.teleport` element](teleport), you can use arbitrary content for the radio options.
+''')
+def arbitrary_content():
+    options = ['Star', 'Thump Up', 'Heart']
+    radio = ui.radio({x: '' for x in options}, value='Star').props('inline')
+    with ui.teleport(f'#c{radio.id} > div:nth-child(1) .q-radio__label'):
+        ui.icon('star', size='md')
+    with ui.teleport(f'#c{radio.id} > div:nth-child(2) .q-radio__label'):
+        ui.icon('thumb_up', size='md')
+    with ui.teleport(f'#c{radio.id} > div:nth-child(3) .q-radio__label'):
+        ui.icon('favorite', size='md')
+    ui.label().bind_text_from(radio, 'value')
+
+
 doc.reference(ui.radio)

website/documentation/content/teleport_documentation.py

@@ -14,4 +14,19 @@ def main_demo() -> None:
     ui.button('inject input', on_click=inject_input)
 
 
+@doc.demo('Radio element with arbitrary content', '''
+    With the right CSS selector, you can place any content inside a standard radio element.
+''')
+def arbitrary_content():
+    options = ['Star', 'Thump Up', 'Heart']
+    radio = ui.radio({x: '' for x in options}, value='Star').props('inline')
+    with ui.teleport(f'#c{radio.id} > div:nth-child(1) .q-radio__label'):
+        ui.icon('star', size='md')
+    with ui.teleport(f'#c{radio.id} > div:nth-child(2) .q-radio__label'):
+        ui.icon('thumb_up', size='md')
+    with ui.teleport(f'#c{radio.id} > div:nth-child(3) .q-radio__label'):
+        ui.icon('favorite', size='md')
+    ui.label().bind_text_from(radio, 'value')
+
+
 doc.reference(ui.teleport)