ui.radio with items supported?

[pierrecdn]

Question

Do you know if there's a way to do what is exposed on quasar doc with QRadio, QList and QItem ? (ie. extended decription of the radio item + custom coloring of each member).
https://quasar.dev/vue-components/radio#with-qitem

The fact ui.radio options attribute is mandatory makes me think that only the QOptionGroup approach is supported, I'd like being proven wrong.

[atticus-lv]

hi, I use ui.element to custom radio

Edit: just done some work to make the animation works

from nicegui import ui
from typing import Optional


class State():
    result: str = ''
    radios: dict[str, ui.element] = {}
    _colors: dict[str, Optional[str]] = {
        'teal': None,
        'orange': None,
        'cyan': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod'
    }


state = State()


def update_radios(color: str):
    state.result = color
    for radio in state.radios.values():
        if radio == state.radios[color]:
            radio.props(remove='val=true')
        else:
            radio.props('val=false')


def radio_item(color, extra: Optional[str] = None):
    with ui.element('q-radio').props(f'color={color} val=false') as radio:
        state.radios[color] = radio
        radio.on('click', lambda c=color,: update_radios(c))
    with ui.element('q-item-section'):
        ui.label(color).classes('font-bold')
        if extra: ui.label(extra)


with ui.list().classes('w-full'):
    for color, description in state._colors.items():
        with ui.item().props('tag="label"'):
            radio_item(color, description)

ui.label().bind_text_from(state, 'result', lambda v: f'You selected: {v}')

ui.run()

[rodja]

This is not supported by the ui.radio element. But you can use the new ui.teleport element to inject arbitrary NiceGUI elements:

radio = ui.radio({x: '' for x in ['banana', 'orange', 'apple']}, value='banana')
with ui.teleport(f'#c{radio.id} > div:nth-child(1) .q-radio__label'):
    ui.label('🍌')
with ui.teleport(f'#c{radio.id} > div:nth-child(2) .q-radio__label'):
    ui.label('🍊')
with ui.teleport(f'#c{radio.id} > div:nth-child(3) .q-radio__label'):
    ui.label('🍏')
ui.label().bind_text_from(radio, 'value')

[pierrecdn]

Thanks for that, indeed I didn't check the latest features, and it seems that one is highly valuable in that case.