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

这篇具有很好参考价值的文章主要介绍了python GUI nicegui初识一(登录界面创建)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近尝试了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()

效果:

python GUI nicegui初识一(登录界面创建),python,web,nicegui,python,开发语言

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

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的样式设计,能够快速利用现有的样式开发出自己的网页app。

参考网站:

NiceGUI

Height - TailwindCSS中文文档 | TailwindCSS中文网输入 | Quasar Framework 中文网 (quasarchs.com)文章来源地址https://www.toymoban.com/news/detail-629148.html

到了这里,关于python GUI nicegui初识一(登录界面创建)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python创建一个GUI(Tkinter)选择文件的界面获取文件路径

    1、点击【选择路径可以选择文件】 2、【确定(开始执行)】 这个按钮没有绑定函数,大家可以根据自己的需求绑定函数

    2024年02月11日
    浏览(67)
  • 基于flask的web应用开发——登录界面

    打算在云服务器上部署一个 TODO LIST 来练手,也就是一个代办事项提醒表。 本节学习使用 flask 库制作出一个登录界面,并且使用Redis数据库实现账号密码加载功能,关于注册界面我们下次再加上。 注意!!!请确保你安装了 redis 数据库,否则会因为无法登录数据库而报错。

    2024年02月08日
    浏览(63)
  • 更改SAP GUI登录界面信息

    在SAP GUI的登录界面,左部输入登录信息如客户端、用户名、密码等,右部空余部分可维护一些登录信息文本,如登录的产品、客户端说明及注意事项等,此项操作详见SAP Notes 205487 – Own text on SAPGui logon screen 维护文档使用的事务码是:SE61,可以对各类文档进行维护并不仅限

    2024年02月16日
    浏览(36)
  • Java模拟QQ登录界面(GUI)

    链接: https://pan.baidu.com/s/13JJFyg14CbShs_HzLAoW6w?pwd=pwu3 提取码: pwu3  对每个文本框进行监控,鼠标定在哪的时候,下边框变为蓝色 用户光标定到文本框的时候,要是没有输入信息,就把里面的提示文字给清除掉,给用户一个好的体验 登录的时候对账号和密码检验,要是账号和密码都是ad

    2024年02月03日
    浏览(38)
  • Python 可视化 web 神器:streamlit、Gradio、dash、nicegui;低代码 Python Web 框架:PyWebIO

    官网:https://streamlit.io/ github:https://github.com/streamlit/streamlit API 参考:https://docs.streamlit.io/library/api-reference 最全 Streamlit 教程:https://juejin.cn/column/7265946243196436520 Streamlit-中文文档:https://github.com/wanghanbinpanda/Streamlit-Documentation-Chinese/blob/main/README.md 框架对比:Gradio、Streamlit 和

    2024年02月01日
    浏览(57)
  • Matlab GUI界面美化:创建令人愉悦的用户界面

    Matlab GUI界面美化:创建令人愉悦的用户界面 在Matlab中,创建一个美观且易于使用的图形用户界面(GUI)对于增强用户体验至关重要。通过使用适当的颜色、布局和交互元素,可以使GUI更加吸引人,并且更易于导航和操作。本文将介绍一些简单而有效的方法,帮助您美化Matl

    2024年02月03日
    浏览(37)
  • 【MATLAB】制作二阶系统的时域分析GUI界面:登录界面的设计和二阶系统时域分析界面

    首先,在命令行窗口输入guide,进入gui向导进行创建GUI,如图: 使用静态文本标识标题和账号密码名称: 双击静态文本,在检查器页面中修改名称: 还可以修改字体大小(根据需求设置合适大小): 然后设置两个可编辑文本作为输入框(同样可修改参数): 最后设置一个“

    2024年04月28日
    浏览(36)
  • 【Unity 3D】图形界面GUI的讲解及在C#中实现用户登录界面的实战(附源码)

    需要源码请点赞关注收藏后评论区留言并且私信~~~ 在游戏开发过程中,游戏界面占据了非常重要的地位,玩家启动游戏的时候,首先看到的就是游戏的UI,其中包含图片、按钮和高级控件等等,UGUI和GUI是Unity 3D中最常用的两个UI系统。 GUI是Graphical User Interface的缩写,Unity的图

    2024年02月10日
    浏览(43)
  • Python 创建 Web 应用程序和用户界面库之flexx使用详解

    Flexx 是一个强大的 Python 库,用于创建交互式的 Web 应用程序和用户界面。它提供了灵活的组件和布局管理器,使开发者可以轻松构建具有丰富交互性和动态性的应用。本文将详细介绍 Flexx 库的特性、用法,并通过丰富的示例代码展示其在实际项目中的应用。 Flexx 是一个基于

    2024年04月17日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包