最近Pythonのniceguiライブラリを試してみました｡欠点もあるかもしれませんが､開発したいけどUIデザインに悩んでいる人にはとても優しいと個人的には感じています｡やっぱりniceguiはTailwindCSSやQuasarを使ってUI開発ができるので､独自の CSS スタイルのカスタマイズもサポートしています。
nicegui を使用して実装したログイン UI インターフェイスの記録です (特定の機能は実装されていません)。
from nicegui import ui
def on_log():
# print(label1.text())
value1 = input1.value
value2 = input2.value
print(value1,value2)
#log ui
img = ui.image('img\991138.jpg').props("absolute-top text-center").tailwind('h-screen')
# with ui.image("img\991138.jpg").props("center no-repeat"):
with ui.label('').classes("absolute top-1/4 inset-x-1/3 w-1/3 rounded bg-slate-300 shadow-2xl bg-white opacity-80"):
#使用网格布局才能使text-center生效
with ui.grid():
label1 = ui.label('欢迎访问！').tailwind("text-center text-2xl text-dark my-2")
#发现一个问题，使用tailwind时无法获得控件的值,也就是说tailwind本身作为一个类仅仅起到修改控件
#样式的作用，而且使用后就覆盖了原本的类的自身函数,可以利用.element解决此问题
# input1 = ui.input('账号/邮箱').tailwind('text-blue-700','px-10').element
input1 = ui.input('账号/邮箱').props("outlined").style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')
input2 = ui.input('密码',password=True).props("outlined").style('padding-left: 2.5rem;padding-right: 2.5rem;')
#'gap:10em'是CSS中的一种属性值，用于设置元素之间的间距。它表示间距的大小为10个字符的宽度。
# 这个属性通常用于布局调整，可以在水平或垂直方向上增加或减少元素之间的间距。
with ui.row().style('gap:12em'):
link1 = ui.link('忘记密码').tailwind('ml-10 w-1/3 text-left')
link2 = ui.link('注册账号').tailwind('ml-9 text-right')
#单个空间用mx
button1 = ui.button('登录',on_click=on_log).tailwind('mx-10 my-3')
# label2 = ui.label('label ').style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')
ui.run()効果：
CSSスタイルの変更
ここでは主に各コントロールのスタイルを変更する方法を紹介します 主にクラス、スタイル、テイルウィンド、プロップの4つがあります
1.クラスメソッド
機能: HTML クラスを適用、削除、または置換します。これは、 Tailwind または Quasarによって指定されたパラメーターを使用してスタイルを変更できます。
2.スタイルメソッド
機能: CSS 定義を適用、削除、または置換します。これを使用する際に注意する必要があるのは、CSS スタイルが内部に追加されることです。
input1 = ui.input('账号/邮箱').props("outlined").style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')3.propsメソッド
機能: 小道具を追加または削除します。
これにより、 Quasarの関連パラメータを使用して 要素の外観やレイアウトを変更できるようになります。小道具は HTML 属性としてのみ適用されるため、任意の HTML 要素で使用できます。
値が指定されていない場合、Boolean プロパティは True であるとみなされます。
4.追い風法
機能: Tailwindに基づいてコントロールの CSS スタイルを変更します。この方法を使用する場合、元のコントロールでは元の組み込み関数とプロパティが使用できなくなるという問題があるため、.element プロパティを使用してコントロールを復元できます。
from nicegui import Tailwind, ui
ui.label('Label A').tailwind.font_weight('extrabold').text_color('blue-600').background_color('orange-200')
ui.label('Label B').tailwind('drop-shadow', 'font-bold', 'text-green-600')
red_style = Tailwind().text_color('red-600').font_weight('bold')
label_c = ui.label('Label C')
red_style.apply(label_c)
ui.label('Label D').tailwind(red_style)
ui.run()つまり、nicegui を使用すると、UI スタイルのデザインにあまり注意を払う必要がなく、既存のスタイルをすぐに使用して独自の Web アプリを開発できます。
参考サイト：
高さ - TailwindCSS 中国語ドキュメント | TailwindCSS 中国語 Web サイト入力 | Quasar Framework 中国語 Web サイト (quasarchs.com)