当前位置:   article > 正文

python GUI nicegui初识一(登录界面创建)

nicegui

最近尝试了python的nicegui库,虽然可能也有一些不足,但个人感觉对于想要开发不过对ui设计感到很麻烦的人来说是很友好的了,毕竟nicegui可以利用TailwindCSS和Quasar进行ui开发,并且也支持定制自己的css样式。

这里记录一下自己利用nicegui实现的一个登录的ui界面(并未实现具体功能)

  1. from nicegui import ui
  2. def on_log():
  3. # print(label1.text())
  4. value1 = input1.value
  5. value2 = input2.value
  6. print(value1,value2)
  7. #log ui
  8. img = ui.image('img\991138.jpg').props("absolute-top text-center").tailwind('h-screen')
  9. # with ui.image("img\991138.jpg").props("center no-repeat"):
  10. 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"):
  11. #使用网格布局才能使text-center生效
  12. with ui.grid():
  13. label1 = ui.label('欢迎访问!').tailwind("text-center text-2xl text-dark my-2")
  14. #发现一个问题,使用tailwind时无法获得控件的值,也就是说tailwind本身作为一个类仅仅起到修改控件
  15. #样式的作用,而且使用后就覆盖了原本的类的自身函数,可以利用.element解决此问题
  16. # input1 = ui.input('账号/邮箱').tailwind('text-blue-700','px-10').element
  17. input1 = ui.input('账号/邮箱').props("outlined").style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')
  18. input2 = ui.input('密码',password=True).props("outlined").style('padding-left: 2.5rem;padding-right: 2.5rem;')
  19. #'gap:10em'是CSS中的一种属性值,用于设置元素之间的间距。它表示间距的大小为10个字符的宽度。
  20. # 这个属性通常用于布局调整,可以在水平或垂直方向上增加或减少元素之间的间距。
  21. with ui.row().style('gap:12em'):
  22. link1 = ui.link('忘记密码').tailwind('ml-10 w-1/3 text-left')
  23. link2 = ui.link('注册账号').tailwind('ml-9 text-right')
  24. #单个空间用mx
  25. button1 = ui.button('登录',on_click=on_log).tailwind('mx-10 my-3')
  26. # label2 = ui.label('label ').style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')
  27. ui.run()

效果:

CSS样式改变

这里主要介绍一下对于每个控件如何改变样式,主要有四种方式:classes,style,tailwind,props

 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属性恢复控件。

  1. from nicegui import Tailwind, ui
  2. ui.label('Label A').tailwind.font_weight('extrabold').text_color('blue-600').background_color('orange-200')
  3. ui.label('Label B').tailwind('drop-shadow', 'font-bold', 'text-green-600')
  4. red_style = Tailwind().text_color('red-600').font_weight('bold')
  5. label_c = ui.label('Label C')
  6. red_style.apply(label_c)
  7. ui.label('Label D').tailwind(red_style)
  8. ui.run()

总之,利用nicegui我们无需在过多关注于ui的样式设计,能够快速利用现有的样式开发出自己的网页app。

参考网站:

NiceGUI

Height - TailwindCSS中文文档 | TailwindCSS中文网输入 | Quasar Framework 中文网 (quasarchs.com)

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/206380?site
推荐阅读
相关标签
  

闽ICP备14008679号