首页 > 其他分享 >ant-design-blazor web page页面开发-页面结构

ant-design-blazor web page页面开发-页面结构

时间:2024-07-17 11:44:15浏览次数:15  
标签:web 定义 登录 ... 表单 ant page 页面

page页面文件的代码详细解析:

1.命名空间和布局设置:

@namespace AntDesign.Pro.Template.Pages.User:定义了当前页面的命名空间。
@layout UserLayout:指定了页面使用的布局模板。

2.页面路由:
@page "/user/login":定义了页面的路由地址。

3.页面结构:
页面容器和面包屑导航

Home
Form
Basic Form

...:定义了页面的主要容器。 ...:定义了登录表单的容器。 内容描述:

4.表单组件:
表单和表单项:

<Form Model="@_model" ...>



:定义了一个表单,Model属性绑定了表单的数据模型,OnFinish属性绑定了提交表单时的处理函数。

5.标签页组件:
...:定义了一个标签页组件,用于在账号登录和手机登录之间切换。

6.账号登录:
使用...定义了账号登录的标签页。
包含用户名和密码的输入框,以及相应的图标。

7.手机登录:
使用...定义了手机登录的标签页。
包含手机号码的输入框和验证码的输入框,以及发送验证码的按钮。
其他元素:

:一个自动登录的复选框。
Forgot Password:忘记密码的链接。
<Button Type="primary" HtmlType="submit"...>Log in :登录按钮。

...:其他登录方式的图标和注册账户的链接。 整体来看,这段代码构建了一个具有两种登录方式(账号登录和手机登录)的用户登录界面,使用了Blazor框架和Ant Design组件库来实现界面的布局和样式。

标签:web,定义,登录,...,表单,ant,page,页面
From: https://www.cnblogs.com/hhhelong/p/18306951

相关文章

  • jpa报错 Failed to initialize JPA EntityManagerFactory: Unable to instantiate de
    报错2024-07-1711:18:57.558[][main]o.h.dialect.Dialect:HHH000400:Usingdialect:org.hibernate.dialect.MySQL5InnoDBDialect2024-07-1711:18:57.729[][main]tyManagerFactoryBean:FailedtoinitializeJPAEntityManagerFactory:......
  • E9-控制移动建模应用页面中的提交按钮根据日期条件校验是否可提交
    背景在移动建模页面中提交表单时,有时需要根据表单上的日期字段校验是否满足提交条件,如果满足则可提交,如果不满足则不可提交本期以报餐管理场景为例:实现控制用户只能在指定的时间范围内提交报餐数据实现效果1、若当前时间不在指定的时间范围内,则提交失败;2、若当前时间在指......
  • MarkText A simple and elegant markdown editor, available for Linux, macOS and Wi
    1、这个工具挺不错的,先上一张图,来自github页面截图:2、这个工具是开源的项目,开源地址:https://github.com/marktext官网地址:www.marktext.cc/三个平台都有:可以直接点上面的按钮,找到自己所用电脑的平台,就可以下载。也可以转到Githubreleasepage下载。3、安装:点击【安......
  • 基于web的人力资源管理系统 毕业设计 springboot+Vue+mysql
    介绍在当今企业管理中,人力资源的有效管理对于组织的发展至关重要。为了提高人力资源管理的效率和准确性,我们开发了这个基于Web的人力资源管理系统。该系统旨在为企业提供一个全面、便捷、高效的人力资源管理平台,满足企业对人力资源规划、招聘、培训、绩效管理等方面的需求。......
  • web安全前期的信息收集工作
    首先你需要获得目标网站的真实IP地址,可以通过IP反查域名(web查询)、域名查询IP(web查询)等查出其IP,方便进行后续操作。有个小技巧:CDN流量收费高,所以很多站长可能只会对主站或者流量大的子站点做了CDN,而很多小站子站点又跟主站在同一台服务器或者同一个C段内,此时就可以通过查询子域......
  • 掌握Laravel的策略与授权门面:构建安全的Web应用
    掌握Laravel的策略与授权门面:构建安全的Web应用在构建Web应用时,确保适当的授权检查是至关重要的。Laravel框架提供了策略(Policies)和授权门面(PolicyFacades)作为实现强大、灵活的授权系统的工具。本文将深入探讨Laravel中策略和授权门面的使用方法,并提供详细的代码示例,帮助......
  • dotnet netcore web api 部署 IIS windows 部署 windows server
    .NetCore部署IIS一、服务器环境配置1.1安装ASP.NETCore模块/托管捆绑包ASP.NETCore不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,为了能部署在IIS,必须先安装AspNetCoreModuleV2。安装方式一:安装ASP.NETCore运行时(推荐)下载地址:htt......
  • Nuxt.js头部魔法:轻松自定义页面元信息,提升用户体验
    扫描二维码关注或者微信搜一搜:编程智域前端至全栈交流与成长useHead 函数概述useHead是一个用于在Nuxt应用中自定义页面头部属性的函数。它由Unhead库提供支持,允许开发者以编程和响应式的方式设置每个页面的头部信息。useHead 函数类型useHead(meta:MaybeComputedRef<......
  • Web网页端IM产品RainbowChat-Web的v7.1版已发布
    一、关于RainbowChat-WebRainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统)。► 详细介绍:http://www.52im.net/thread-2483-1-1.html► 版本记录:http://www.52im.net/th......
  • postman使用小技巧:如何快速构建一个页面的测试
    postman使用小技巧:如何快速构建一个页面的测试首先打开一个页面的开发者模式,找到network中的一个name的url。右击点击copyascURL,复制其中内容,然后打开postman直接粘贴在里面。直接粘贴在这个框框中就可以了,然后postman就会自动解析,把各种信息填好。......