公司网站建设的现状,ajax做购物网站,中国网库企业黄页,贵州建筑工程网最近尝试了python的nicegui库#xff0c;虽然可能也有一些不足#xff0c;但个人感觉对于想要开发不过对ui设计感到很麻烦的人来说是很友好的了#xff0c;毕竟nicegui可以利用TailwindCSS和Quasar进行ui开发#xff0c;并且也支持定制自己的css样式。
这里记录一下自己利…最近尝试了python的nicegui库虽然可能也有一些不足但个人感觉对于想要开发不过对ui设计感到很麻烦的人来说是很友好的了毕竟nicegui可以利用TailwindCSS和Quasar进行ui开发并且也支持定制自己的css样式。
这里记录一下自己利用nicegui实现的一个登录的ui界面并未实现具体功能
from nicegui import uidef on_log():# print(label1.text())value1 input1.valuevalue2 input2.valueprint(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).elementinput1 ui.input(账号/邮箱).props(outlined).style(color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;)input2 ui.input(密码,passwordTrue).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)#单个空间用mxbutton1 ui.button(登录,on_clickon_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样式改变
这里主要介绍一下对于每个控件如何改变样式主要有四种方式classes,style,tailwindprops 1.classes方法
功能应用、删除或替换 HTML 类这个可以利用 Tailwind or Quasar给出的参数修改样式
2.style方法
功能应用、删除或替换 CSS 定义。这个使用需要注意的是里面添加的就是CSS样式。
input1 ui.input(账号/邮箱).props(outlined).style(color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;)
3.props方法
功能添加或删除道具。 这允许使用 Quasar 的相关参数修改元素的外观或其布局。 由于 props 只是作为 HTML 属性应用因此它们可以与任何 HTML 元素一起使用。 如果未指定任何值则假定布尔属性为 True。 4.tailwind方法
功能基于Tailwind实现的修改控件CSS样式。使用这个方法时有个问题需要注意就是会导致原本控件无法使用原有的内置函数和属性可以利用.element属性恢复控件。
from nicegui import Tailwind, uiui.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的样式设计能够快速利用现有的样式开发出自己的网页app。
参考网站
NiceGUI
Height - TailwindCSS中文文档 | TailwindCSS中文网输入 | Quasar Framework 中文网 (quasarchs.com)
