Python Web GUI フレームワーク - NiceGUI チュートリアル (1)

一部の単純なシナリオでは Streamlit を推奨することもできますが、streamlit は実際には柔軟性が低く、そのコアメカニズムによって制限されています。 NiceGUI は、Web Web サイトの構築に使用したり、独立した exe にパッケージ化したりできる柔軟な Web フレームワークです。

基本的な要素

ラベル

いくつかのテキストを表示します。

from nicegui import ui
ui.label('some label')
ui.run()

ここに画像の説明を挿入します

アイコン

これらの要素は、Quasar の QIcon に基づいて実装されています。

from nicegui import ui
ui.icon('thumb_up', color='primary').classes('text-5xl')
ui.run()

ここに画像の説明を挿入します

アバター

アバター要素は、Quasar の QAvatar によって実装されます。

from nicegui import ui
ui.avatar('favorite_border', text_color='grey-11', square=True)
ui.avatar('img:https://nicegui.io/logo_square.png', color='blue-2')
ui.run()

ここに画像の説明を挿入します

リンク

ハイパーリンクを作成します。

ハイパーリンクを作成します。ページ内の特定の場所にジャンプするには、ui.link_target("name") を使用してリンク可能なアンカーを配置し、ui.link(target="#name") を使用してそのアンカーにリンクします。

from nicegui import ui
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
ui.run()

ここに画像の説明を挿入します

ボタン

この要素は Quasar の QBtn に基づいて実装されています。

color パラメーターは、Quasar のような色、Tailwind カラー、または CSS カラーを受け入れます。Quasar カラーが使用されている場合、ボタンはテキストの色を含む Quasar テーマに従ってスタイル設定されます。「赤」のような色は、Quasar カラーでもあり、CSS カラーでもあることに注意してください。この場合、Quasar の色が使用されます。

from nicegui import ui
ui.button('Click me!', on_click=lambda: ui.notify(f'You clicked me!'))
ui.run()

ここに画像の説明を挿入します

バッジ

バッジ要素は Quasar の QBadge に基づいています。

from nicegui import ui
with ui.button('Click me!', on_click=lambda: badge.set_text(int(badge.text) + 1)):
    badge = ui.badge('0', color='red').props('floating')
ui.run()

ここに画像の説明を挿入します

トグル

これらのオプションは、値のリストとして、または値をラベルにマッピングする辞書として指定できます。オプションを操作した後、update() を呼び出して UI 内のオプションを更新します。

from nicegui import ui
toggle1 = ui.toggle([1, 2, 3], value=1)
toggle2 = ui.toggle({
    
    1: 'A', 2: 'B', 3: 'C'}).bind_value(toggle1, 'value')
ui.run()

ここに画像の説明を挿入します

ラジオの選択

from nicegui import ui
radio1 = ui.radio([1, 2, 3], value=1).props('inline')
radio2 = ui.radio({
    
    1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'value')
ui.run()

ここに画像の説明を挿入します

ドロップダウン選択

from nicegui import ui
select1 = ui.select([1, 2, 3], value=1)
select2 = ui.select({
    
    1: 'One', 2: 'Two', 3: 'Three'}).bind_value(select1, 'value')
ui.run()

ここに画像の説明を挿入します

チェックボックス

from nicegui import ui
checkbox = ui.checkbox('check me')
ui.label('Check!').bind_visibility_from(checkbox, 'value')
ui.run()

ここに画像の説明を挿入します

スイッチ

from nicegui import ui
switch = ui.switch('switch me')
ui.label('Switch!').bind_visibility_from(switch, 'value')
ui.run()

ここに画像の説明を挿入します