企业网站建设策划书苏州手机网站设计

企业网站建设策划书,苏州手机网站设计,青海h5页面制作,济南知名网站建设平台视频地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ #x1f4cb; 目录 概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结 概述 TextInput 是控件库中的基础文本输入框组件#xff0c;支持验证、提示、图标、多种尺寸和状态#xff0c;…视频地址https://www.bilibili.com/video/BV1jomdBBE4H/ 目录概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结概述TextInput是控件库中的基础文本输入框组件支持验证、提示、图标、多种尺寸和状态适用于表单输入、搜索、数据录入等场景。设计理念文本输入框采用清晰易用设计具有以下特点功能完整支持多种输入类型、验证、提示等状态清晰正常、聚焦、错误、禁用、只读等状态明确尺寸多样支持 small、medium、large 三种尺寸图标支持支持左侧和右侧图标文字图标和图片图标品牌标识左下角自动包含品牌标识圆圈红字PC主题统一所有样式配置都在代码中方便定制适用场景表单输入用户名、邮箱、密码等表单字段搜索功能搜索框、筛选输入数据录入各种文本数据输入验证输入需要验证的输入场景特性✨ 核心特性✅多种输入类型支持 text、email、number、password、tel、url✅标签和提示支持标签、提示文本、错误提示✅图标支持支持左侧和右侧图标文字图标和图片图标✅清除按钮支持显示清除按钮✅多种尺寸支持 small、medium、large 三种尺寸✅状态管理支持禁用、只读、必填等状态✅长度限制支持最大长度限制✅验证功能支持自定义验证函数✅品牌标识自动包含左下角品牌标识✅主题配置所有样式都可通过代码配置 视觉特点正常状态白色背景 灰色边框聚焦状态主色边框高亮错误状态红色边框 红色错误提示禁用状态灰色背景 灰色文字 灰色边框只读状态正常样式但不可编辑快速开始基础用法import{TextInput}from../components/baseEntry Component struct MyPage{State inputValue:stringbuild(){Column({space:20}){// 基础输入框TextInput({value:$inputValue,placeholder:请输入内容})// 带标签的输入框TextInput({value:$inputValue,placeholder:请输入用户名,label:用户名})// 带提示的输入框TextInput({value:$inputValue,placeholder:请输入邮箱,label:邮箱,hint:请输入有效的邮箱地址})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}关于双向绑定TextInput使用Link实现双向绑定需要使用$variableName语法State inputValue:stringTextInput({value:$inputValue// 使用 $ 创建双向绑定})API 参考Props属性名类型默认值说明valueLink string-输入框值必需双向绑定placeholderstring请输入占位符文本labelstring?undefined标签文本可选hintstring?undefined提示文本可选显示在输入框下方errorMessagestring?undefined错误提示文本可选优先级高于 hintinputSizesmall | medium | largemedium输入框尺寸disabledbooleanfalse是否禁用readonlybooleanfalse是否只读requiredbooleanfalse是否必填maxLengthnumber?undefined最大长度typetext | email | number | password | tel | urltext输入类型leftIconResourceStr?undefined左侧图片图标可选leftTextIconstring?undefined左侧文字图标可选优先级高于 leftIconrightIconResourceStr?undefined右侧图片图标可选rightTextIconstring?undefined右侧文字图标可选优先级高于 rightIconshowClearButtonbooleantrue是否显示清除按钮showBrandbooleantrue是否显示品牌标识inputWidthstring | number?undefined输入框宽度validatorBuilderParam (value: string) ValidationResult?undefined验证函数可选onChangeBuilderBuilderParam (value: string) void?undefined值变化回调可选ValidationResult 接口属性名类型说明validboolean验证是否通过messagestring?验证消息可选尺寸规格尺寸高度字体大小图标大小内边距左右small32vp12vp16vp12vpmedium40vp14vp18vp14vplarge48vp16vp20vp16vp使用示例1. 基础输入框Entry Component struct InputExample1{State inputValue:stringbuild(){Column({space:15}){TextInput({value:$inputValue,placeholder:请输入内容})Text(当前值${this.inputValue||(空)}).fontSize(14).fontColor(#666666)}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}2. 不同尺寸Entry Component struct InputExample2{State inputValue:stringbuild(){Column({space:15}){TextInput({value:$inputValue,placeholder:小尺寸,inputSize:small})TextInput({value:$inputValue,placeholder:中等尺寸默认,inputSize:medium})TextInput({value:$inputValue,placeholder:大尺寸,inputSize:large})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}3. 不同输入类型Entry Component struct InputExample3{State emailValue:stringState passwordValue:stringState phoneValue:stringbuild(){Column({space:15}){TextInput({value:$emailValue,placeholder:请输入邮箱,type:email,label:邮箱地址})TextInput({value:$passwordValue,placeholder:请输入密码,type:password,label:密码})TextInput({value:$phoneValue,placeholder:请输入手机号,type:tel,label:手机号})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}4. 带标签和提示Entry Component struct InputExample4{State usernameValue:stringState contentValue:stringState errorValue:stringbuild(){Column({space:15}){TextInput({value:$usernameValue,placeholder:请输入用户名,label:用户名,hint:用户名长度为3-20个字符})TextInput({value:$contentValue,placeholder:请输入内容,label:内容,hint:这是提示信息})TextInput({value:$errorValue,placeholder:请输入内容,label:内容,errorMessage:输入内容有误请重新输入})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}5. 必填和状态Entry Component struct InputExample5{State requiredValue:stringState disabledValue:string禁用状态State readonlyValue:string只读状态build(){Column({space:15}){TextInput({value:$requiredValue,placeholder:请输入内容,label:必填项,required:true})TextInput({value:$disabledValue,placeholder:请输入内容,label:禁用状态,disabled:true})TextInput({value:$readonlyValue,placeholder:请输入内容,label:只读状态,readonly:true})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}6. 带图标Entry Component struct InputExample6{State usernameValue:stringState emailValue:stringbuild(){Column({space:15}){TextInput({value:$usernameValue,placeholder:请输入用户名,leftTextIcon:U,// U User用户label:用户名})TextInput({value:$emailValue,placeholder:请输入邮箱,leftTextIcon:,rightTextIcon:✓,// ✓ Check确认label:邮箱})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}7. 最大长度限制Entry Component struct InputExample7{State inputValue:stringbuild(){Column({space:15}){TextInput({value:$inputValue,placeholder:最多输入10个字符,label:内容,maxLength:10,hint:已输入${this.inputValue.length}/10 个字符})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}8. 自定义验证import{TextInput,ValidationResult}from../components/baseEntry Component struct InputExample8{State emailValue:string// 邮箱验证函数BuildervalidateEmail(value:string):ValidationResult{if(!value){return{valid:false,message:邮箱不能为空}}constemailRegex/^[^\s][^\s]\.[^\s]$/if(!emailRegex.test(value)){return{valid:false,message:请输入有效的邮箱地址}}return{valid:true}}build(){Column({space:15}){TextInput({value:$emailValue,placeholder:请输入邮箱,label:邮箱,validator:this.validateEmail})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}主题配置TextInput 的所有样式都通过ComponentTheme配置所有配置都在代码中不依赖JSON文件。修改默认颜色import{ComponentTheme}from../theme/ComponentTheme// 修改主色影响聚焦状态的边框颜色ComponentTheme.PRIMARY_COLOR#007AFF// 修改错误色影响错误状态的边框和提示颜色ComponentTheme.ERROR_COLOR#FF3B30// 修改边框颜色ComponentTheme.BORDER_COLOR#E5E5E5// 修改圆角ComponentTheme.BORDER_RADIUS8批量配置import{ComponentTheme}from../theme/ComponentTheme// 使用 setTheme 方法批量配置ComponentTheme.setTheme({primaryColor:#007AFF,errorColor:#FF3B30,borderRadius:8,spacing:16})最佳实践1. 尺寸选择推荐根据使用场景选择尺寸small用于紧凑空间、表格内输入medium默认尺寸适用于大多数场景large用于重要输入或大屏幕显示2. 标签和提示标签用于说明输入框的用途提示文本提供输入指导或格式要求错误提示显示验证错误信息必填标识使用required属性显示红色星号3. 输入类型text普通文本输入默认email邮箱输入会触发邮箱键盘password密码输入自动隐藏输入内容number数字输入会触发数字键盘tel电话号码输入urlURL 输入4. 图标使用左侧图标用于标识输入类型如用户图标、邮箱图标右侧图标用于显示状态如成功图标、错误图标清除按钮自动显示在有内容时方便快速清除5. 验证功能使用validator属性进行自定义验证验证函数返回ValidationResult对象验证失败时显示错误提示可以结合errorMessage属性显示错误信息6. 状态管理禁用状态使用disabled属性适用于不可编辑的场景只读状态使用readonly属性适用于仅展示的场景必填状态使用required属性显示红色星号标识7. 响应式设计使用inputWidth属性控制输入框宽度在小屏幕上考虑使用 smaller 尺寸保持输入框之间的合理间距常见问题Q1: TextInput 和其他输入框有什么区别A: TextInput 是基础文本输入框与其他输入框的区别TextInput基础文本输入框支持多种输入类型PasswordInput专门的密码输入框支持显示/隐藏切换NumberInput数字输入框支持步进器和范围限制SearchInput搜索输入框支持清除按钮和历史记录TextArea多行文本输入框支持字数统计Q2: 如何实现双向绑定A: 使用Link和$语法State inputValue:stringTextInput({value:$inputValue// 使用 $ 创建双向绑定})Q3: 如何自定义验证A: 使用validator属性BuildervalidateEmail(value:string):ValidationResult{if(!value){return{valid:false,message:邮箱不能为空}}constemailRegex/^[^\s][^\s]\.[^\s]$/if(!emailRegex.test(value)){return{valid:false,message:请输入有效的邮箱地址}}return{valid:true}}TextInput({value:$emailValue,validator:this.validateEmail})Q4: 如何禁用清除按钮A: 设置showClearButton为falseTextInput({value:$inputValue,showClearButton:false})Q5: 如何控制输入框宽度A: 使用inputWidth属性TextInput({value:$inputValue,inputWidth:300// 固定宽度})TextInput({value:$inputValue,inputWidth:100%// 百分比宽度})Q6: 如何监听输入变化A: 使用onChangeBuilder属性BuilderhandleChange(value:string){console.info(输入值变化,value)// 处理输入变化}TextInput({value:$inputValue,onChangeBuilder:this.handleChange})总结TextInput 是控件库中的基础文本输入框组件具有以下核心特性功能完整支持多种输入类型、验证、提示等状态清晰正常、聚焦、错误、禁用、只读等状态明确尺寸多样三种尺寸满足不同场景需求图标支持支持左侧和右侧图标易于使用简单的 API开箱即用主题配置所有样式都可通过代码配置品牌标识自动包含品牌标识保持视觉统一关键要点✅ 使用$variableName创建双向绑定✅ 使用label属性添加标签✅ 使用hint或errorMessage显示提示✅ 使用type属性选择输入类型✅ 使用validator属性进行自定义验证✅ 使用inputSize属性选择合适尺寸✅ 通过ComponentTheme自定义全局样式适用场景表单输入搜索功能数据录入验证输入下一篇预告PasswordInput密码输入框详解本文档属于《鸿蒙PC UI控件库开发系列文章》第7篇