首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

后台系统设计(上篇:选择)

·列表提供全选和多选操作,以便用户能够列表间移动大量选项。 ·实时显示当前被选中列表/ 「源」 列表的数量比及 「目的」 列表的数量。 ·若列表框内容大于视窗高度,列表框的高度为:N列表+½列表。...下拉选择器。多适用于颜色、日历(日月年)、日期、时间等内容: ? 最佳用法 ·较小的空间下,对多个选项进行选择或内容较为次要且不需要一直显示时,下拉菜单是不错的选择。...·禁用菜单项,而不是隐藏,提高功能的可发现性。 ·下拉菜单文本保持简洁扼要,文本内容限制为单行。 ·请根据具体情况,定义列表项的最小和最大宽度,适应其内容。...·下拉选择器多适用于颜色、日历、日期、时间等内容,若不可输入请将整个区域作为触发区域。...·单选情况下,我们将搜索放在了原有的框体内,流程如下:用户输入关键字>实时匹配检索出选项>用户点击选项>完成操作。 ?

9.6K21

Material Design — 提示框( Dialogs)

全屏提示框(仅限手机) 全屏对话框最适合于复杂的任务,或需要输入法编辑器,因为它可以保存之前将一系列任务组合在一起。...例如,他们可以显示头像,图标,提示语或正交行为(例如添加帐户)。 操作机制: ·立即选择一个选项,提交选项并关闭菜单; ·触摸提示框外部或按下后退键,取消操作并关闭对话框。...确认单个值 确认提示框可以使用列表以外的布局,例如日期选择器,但仍然专注于选定单个值(选择日期,但不选择时间和日期)。 ?...全屏提示框可用于满足以下标准的内容或任务: ·该提示框包含需要输入编辑器(IME)的组件(如选择器或form fields),例如键盘 ·当没有实时保存更改时 ·当app中没有草稿功能时(无法自动存到草稿...全屏提示框支持日期选择器 操作 屏幕顶部放置全屏对话框的确认和离开操作。 确认 屏幕右上角的确认按钮使用描述性动词,例如:保存,发送,分享,更新或创建。

5K101
您找到你想要的搜索结果了吗?
是的
没有找到

最新iOS设计规范五|3大界面要素:控件(Controls)

七、选择器(Pickers) 选择器可以显示一个或多个可滚动的不同值列表,供人们选择。iOS 14及更高版本中,日期选择器支持其他选择值的方式,例如在日历视图中选择日期或使用数字键盘输入日期和时间。...正在编辑的字段的下方或附近显示选择器效果很好。选择器通常显示屏幕底部或弹出窗口中。 日期选择器 日期选择器是用于使用触摸屏,键盘或定点设备选择特定日期,时间或两者的有效界面。...当空间有限时,请使用紧凑的日期选择器。折叠后,紧凑型样式将显示一个按钮,该按钮应用程序的主色显示当前值。...当人们点击按钮时,日期选择器将扩展为模式视图,从而提供对熟悉的日历样式编辑器和时间选择器的访问。模式视图中,人们可以对日期和时间进行多次编辑,然后视图外部轻按确认他们的选择。...使用文本输入框来输入少量信息,例如电子邮件地址。 ? 文本输入框中显示必要的提示,帮助用户更好的输入。当输入框中没有其他文本时,文本输入框可以包含占位符文本。

8.5K30

Axure RP9中文版,交互式原型设计软件Axure RP 9永久版下载安装

,启动软件 13.点击“输入授权” 14.双击打开【axure9注册机】文件夹 15.选中Keygen,鼠标右键点击“管理员身份运行” 温馨提示:若打开没有注册机,说明被电脑杀毒软件隔离了,关闭杀毒软件重新解压即可...16.Licensee输入:ABC,点击“Generate” 17.对应输入被授权人和授权秘钥,点击“提交” 18.勾选不再显示,点击右上角的×,关闭该界面 19.安装结束 教大家Axure中制作一个低代码可视化编辑器的原型模板...案例中增加了13种常用的元件,分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块,你们也可以根据实际需要增加或删除...、多行输入框、数字输入框、密码输入框、月份选择器日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块,所以我们要动态面板里应该要有13个对应的状态。...,这里状态名也是要和type列里每行的值一一对应,有多少个元件类型就增加多少个状态页面,案例中包括了13种常用的元件,分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器日期选择器、时间选择器

4.7K40

Flutte部件目录-Material Components 顶

应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...一个显示应用底部的材质小部件,用于少量视图中进行选择,通常介于3到5之间。 底部导航栏由文本标签,图标或两者的多个项目组成,并放置一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...Date & Time Pickers 日期选择器使用对话窗口移动设备上选择一个日期。 时间选择器使用对话框在移动设备上选择单个时间(小时:分钟格式)。 ?...例如,他们可以显示头像图标阐明潜台词或正交行为(如添加帐户)。 ? AlertDialog 警报是需要确认的紧急中断,通知用户有关情况。 AlertDialog小部件实现了这个组件。 ?...SnackBar 带有可选操作的轻量级消息,简要显示屏幕底部。 ? 信息显示 Image 一个显示图像的小部件。 ? Icon 材质设计图标。 ?

9.4K40

全栈开发工程师微信小程序-上(下)

效果 全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search...}] }] }, tap() { console.log('tap') } }) progress 进度条 percent 百分比0~100 show-info 进度条右侧显示百分比...,多列选择器,时间选择器日期选择器,省市区选择器,默认是普通选择器 // 普通选择器:mode = selector // 多列选择器:mode = multiSelector // 时间选择器:mode...= time // 日期选择器:mode = date // 省市区选择器:mode = region mode的属性: 单选: selector 多选: multiSelector 时间: time...日期: date 省市: region picker-view 嵌入页面的滚动选择器 picker组件是基于picker-view组件实现的. radio-group 单项选择器,是由多个单选项目

1.4K40

iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

4.3.3 日期时间选择器 日期时间选择器展示关于日期和时间的组件,比如小时,分钟,天,以及年。 ? API注释 想要了解如何在代码中定义添加日期时间选择器,请参考UIDatePicker....日期时间选择器: 最多可以展示4个独立的滑轮,每一个滑轮表示一个不同的值,比如月份或小时等 每个滑轮的中央使用深色字体来表示当前选中的值 日期时间选择器的大小与iPhone键盘的大小相同,并且不可更改...使用日期时间选择器来让用户选择时间,而不是让用户自己输入一个包含了日期、时间等多个部分的时间值。 尽量地让用户在当前内容中使用日期选择器。最好避免用户使用日期选择器的时候要进入另外一个界面。...选择器: 是日期时间选择器的通用模式 包括一个或多个滑轮,每个滑轮含有一组值 当前选中的值中间,深色标识 不可以自定义大小(选择器的大小与iPhone的键盘相同) 使用选择器可以让用户更容易从一系列不同的值中间进行选择...合适的话,文本框右侧加入清除按钮。轻击清除按钮变可清空当前框内输入的全部内容,无论你原本打算在这个按钮上面展示什么其它图片。 如果可以帮助用户理解的话,可以文本框中加入提示文字。

13.2K30

vue老项目sass和element-ui开发踩坑

多选框如果用 el-checkbox-group 包起来,v-model 的值如果不是数组类型,组件页面上会直接不显示。...覆盖选择框 el-select 右侧的箭头图标,升级element-ui 版本,图标的content值可能发生变化,可以放到全局的 var.scss 中定义一个变量去统一维护。...下拉选择框 el-select 多选默认会撑高输入框,可加上 collapse-tags 属性就会只显示一个,其他全部折叠起来,跟 iview 下拉框组件的 max-tag-coun 类似(iview这个更高级点...,还可以自己设置最多显示的个数)。...filterable,默认是根据 label 来匹配的,不指定 label 时会默认跟 value 一样,所以 el-option 记得要设置 label 属性el-form 表单中 el-date-picker 日期时间选择器校验规则

40820

分享15个有用的,你可能还不知道的CSS小技巧,建议每个前端开发者都了解下

为了优雅地处理它们,你可以使用::before伪元素和content属性,损坏的图片位置显示替代性的消息或图标。...通过使用::before伪元素和content属性,你可以损坏的图片位置插入自定义的内容或图标提醒用户图片无法加载或显示。这样可以改善用户体验,并且使页面看起来更加完整和专业。...通过使用::before伪元素和content属性,你可以损坏的图片位置插入自定义的内容或图标提醒用户图片无法加载或显示。这样可以改善用户体验,并且使页面看起来更加完整和专业。...你可以改变其背景色、边框样式、图标等,突出显示选中状态。 需要注意的是,不同浏览器可能对:checked伪类的支持和样式设置有所差异。...通过使用::placeholder伪元素,你可以为输入框内的占位文本设置样式。

16540

TDesign 更新周报(2022年7月第4周)

组件库Vue2 for Web 发布 0.44.1 Features支持通过 CSS Token 配置组件圆角 Bug FixesDatePicker: 修复重置日期后面板月份未重置问题修复时间选择器滚动错误...0.18.1 FeaturesTable: 树形结构,支持 resetData 重置整个树形结构数据TagInput: 支持标签拖拽Slider: Slider新增showStep属性控制步长刻度值显示...DatePicker: 修复range 选择器开始时间被禁用问题详情见:https://github.com/Tencent/tdesign-vue-next/releases/tag/0.18.1React...配置组件圆角 Bug FixesForm: 修复 form 数字字符串长度校验错误问题List: 修复 ListItem 透传 style 问题DatePicker: 修复重置日期后面板月份未重置问题...、列表项下边框颜色,具体查看文档 Bug FixesTabs: 修复值等于 0 时不能正常切换的问题Textarea: 修复超出 maxcharacter 后,仍能继续输入的问题Picker: 修复因重复定义

2K40

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

1.2 iOS日期选择器         使用DatePickerIOS来iOS上呈现一个日期/时间选择器(selector)。...timeZoneOffsetInMinutes数字型         几分钟内时区偏移。         默认情况下,日期选择器将使用设备的时区。有了这个参数,才有可能迫使某个时区偏移。...icon Image.propTypes.source         标记的自动图标。当定义了系统图标时,它将被忽略。     ...工具栏可以显示一个标志,导航图标(如汉堡包菜单),标题 和副标题和操作列表。标题和子标题被扩展这样以来标志和导航图标显示左边,标题和副标题在中间并且操作 右边。         ...这些都显示图标或小部件右侧的文本。如果不适合,它们将 被放置一个'溢出'菜单。

43740

PubMed使用者指南(一)

1.确定研究的核心内容 2.检索框内输入条目或核心内容 3.按enter健或者点击research 对于许多检索,没有必要使用特殊的标记或语法。...日期和月份是可选的。如果要检索到当前日期为止的日期范围,请不要编辑“当前”日期框。 3.点击检索 检索框内使用单个日期 输入日期,格式为yyyy/mm/dd[日期字段]。...检索框内使用日期范围来检索 每个日期之间使用冒号(:),后跟[日期字段date field]输入日期范围。...一整年的综合检索应该输入2000:2000[dp]而不是2000[dp],检索不同印刷和电子出版年份的引文。 日期范围检索包括印刷和电子出版日期。...当你短语的形式输入检索词时,PubMed将不会执行自动的术语映射,其中包括MeSH术语以及该术语下缩进的任何特定术语。

8.3K10

安卓13又来了?快!扶起我来!

图片照片选择器提供了一个可浏览、可搜索的界面,其中按日期(从最近到最早)顺序向用户呈现其媒体库中的文件。可以指定用户只能看到照片或只能看到视频,并且默认情况下,允许的媒体选择量上限设置为 1。...定义分享限制应用可以声明 android.provider.extra.PICK_IMAGES_MAX 的值,该值表示向用户显示时照片选择器显示的媒体文件数量上限。...需要注意的是:如果选择的上限为 1 张,照片选择器半屏模式打开。...借助此功能,用户可以调节受支持的 Android 启动器中应用图标的色调,继承所选壁纸和其他主题的配色。...以下任何情况下,主屏幕都不会显示带主题的应用图标,而是显示自适应或标准应用图标:如果用户未启用带主题的应用图标如果应用不提供单色应用图标如果启动器不支持带主题的应用图标单色应用图标应是一个 VectorDrawable

83440

超全面的 UI 工作流程指南(三):设计规范

知名大厂基本上都有一套自己的完整规范体系,整理设计规范时,大平台规范体系作为参考,针对产品自身情况增删,整理出我们自己所需要的规范内容,能有效地避免规范内容遗漏缺失。...所以需要在设计的时候考虑到字体的设计效果,然后设计规范中注明。 图标规范 UI 界面中,具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块,产品的每个页面中都有可能存在图标。...输入框 用于单行信息录入文字上下居中显示,支持键盘录入和剪切板输入文本,对特定格式的文本进行处理:密码隐藏显示、身份证、卡号分段显示,标注宽高。 3....组件规范 常用的 UI 组件(Component):表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。...缺省页面 空状态页面:显示对应的页面空状态的图标,增加相应的引导按钮。 无网络状态:没有连接到网络时的提示页面。 404&505页面:发生未知错误时的页面。

1.7K40

超全面的 UI 工作流程指南(三):设计规范

知名大厂基本上都有一套自己的完整规范体系,整理设计规范时,大平台规范体系作为参考,针对产品自身情况增删,整理出我们自己所需要的规范内容,能有效地避免规范内容遗漏缺失。...所以需要在设计的时候考虑到字体的设计效果,然后设计规范中注明。 图标规范 UI 界面中,具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块,产品的每个页面中都有可能存在图标。...输入框 用于单行信息录入文字上下居中显示,支持键盘录入和剪切板输入文本,对特定格式的文本进行处理:密码隐藏显示、身份证、卡号分段显示,标注宽高。 3....组件规范 常用的 UI 组件(Component):表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。...缺省页面 空状态页面:显示对应的页面空状态的图标,增加相应的引导按钮。 无网络状态:没有连接到网络时的提示页面。 404&505页面:发生未知错误时的页面。

4.3K32
领券