首页
学习
活动
专区
圈层
工具
发布

后台系统设计(下篇:输入)

三、Slider 滑块 从一个范围值中进行滑动选择的控件。通常由一条水平线(水平或垂直)、可移动手柄和标签(有滑块标签、范围标签、值标签)组成。  外观 单滑块,选择单一的值: ?...双滑块,用于选择值的范围: ? 分段式,不允许选择任意值,默认贴靠分段的值: ? 垂直和水平,根据值的特点及页面情况更加合适的布局: ? 图标数值文本 ?...带有输入框,可输入文本字段,输入数据与滑块同步 ? 最佳用法 ·当用户设置连续值(如音量或亮度)或一系列离散值(如屏幕分辨率设置)时,可使用滑块。...根据具体的使用情景我们将滑块细分为:单滑块(单值)、双滑块(可选择范围)、分段式滑块(非范围内的任意值)和带输入框滑块(和输入控件保持同步),以及相应的水平或垂直方向。...对于书写及阅读习惯从左向右的人群而言,值的范围一般为左小右大,上大下小。 ·如果你不允许滑块选取任意值,请使用分段的步骤点。 ·如果滑块可编辑,当鼠标悬停在手柄上时,手柄高亮显示,并出现手型光标。

5.9K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    UNITE Gallery-主题食用文档

    //填充滑块项的左侧 slider_item_padding_right: 0,                //滑块项的右侧填充 slider_transition: "slide",                    ...: "easeInOutQuad",    //幻灯片变化的过渡缓动功能 slider_control_swipe:true,                    //true,false - 启用滑动控制...: true,                    //启用滑块元素上的箭头 slider_arrows_skin: "",                        //滑块箭头的外观,如果为空...//top, middle, bottom , left, right, center - 关闭手柄尖端根据面板方向对齐手柄杆 strippanel_handle_offset: 0,                ...//根据 valign 的车把偏移 strippanel_handle_skin: "",                    //手柄的皮肤,如果为空,则从图库皮肤继承 strippanel_background_color

    3.7K20

    代码实验室--带你一步步理解使用 ConstraintLayout

    AutoConnect 自动连接 Inference 推理 UI Builder UI 生成器 其中 Handle 不知如何翻译更佳, 目前想到可供选择的有 '手柄' '纽' '轴' '操作点' '...手柄的类型: Figure B. 在这个控件中我们可以看到不同的手柄 改变尺寸的手柄: 类似于其它你可能已经用过的绘图设计程序, 调整尺寸的手柄允许你改变控件的尺寸....相对约束定位控件: 当一个控件上有至少两个对立的连接时, 比如上和下, 或者左和右, 你可以看到一个可以让你沿着对立连接的轴调整控件位置的滑块. 这也被称为横向或纵向偏量....继续, 改变垂直偏量至75%, 而横向偏量到75%. 下面的图可用作参考. 控制控件的内部尺寸: 控件内部的线允许你控制它的尺寸, 你可以点击特定的线看看它的具体运作方式....ic_star 图片已经被约束垂直偏量 81%. 你可以通过选中控件查看 Inspector 面板的方式查看包含ic_star 的 ImageView 的垂直偏量, 如之前讨论的一样.

    3.4K60

    QT系统学习系列:1.2样式表子控件查阅

    类别 子控件名称 说明 查看子控件样式表应用 滑动条,滑动块相关 ::handle QScrollBar、QSplitter,QSlider 的手柄(滑块) 滑动条,滑动块相关 ::groove QSlider...滑动条,滑动块相关 ::add-page QScrollBar在手柄(滑块)和增加行之间的区域 滑动条,滑动块相关 ::sub-line QScorllBar减少行的按钮,即按下该按钮滚动条减少一行...滑动条,滑动块相关 ::sub-page QScrollBar在手柄(滑块)和减少行之间的区域 箭头相关 ::down- arrow QComboBox、QHeaderView 排序指示器、QScrollBar...、 QRadioButton、 QMenu( 可被选中的)、QGroupBox(可被选中的)的指示器 选项卡栏,选项卡部件,可停靠窗口 ::pane QTabWidget的面板(边框) 选项卡栏,选项卡部件...QStatusBar 中的一个项 菜单相关 ::icon QAbstractItemView或QMenu的图标 菜单相关 ::cmenu-arrow 带有菜单的QToolButton的箭头 菜单相关

    2.1K10

    Material Design —卡片(Cards)

    卡片集合内的卡片可以包含一个唯一的数据组,例如带有动作的清单,带有动作的笔记以及带有照片的笔记。 不要让卡片上带有过多无用的信息或操作。 内容层次 使用卡内的层次结构来引导用户注意最重要的信息。...卡片集合的筛选和分类 卡片收藏可按照日期,文件大小,字母顺序或其他参数进行排序或筛选。 集合中的第一个项目位于左上角 顺序从左到右,从上到下进行 ? 从左到右,从上到下 滚动 卡片集合只能垂直滚动。...对于依赖焦点遍历进行导航(手柄和键盘)的页面,卡片应具有主要操作或打开包含主要和补充操作的新视图。 ? 选择操作 ?...补充操作 使用图标,文本和UI控件(通常放置在卡的底部)明确调出卡内的补充操作。 除了溢出菜单之外,补充操作限制为两个操作。 ? ?...UI控件 与主内容内联放置的UI控件(如滑块)可以修改主内容的视图。 例如,可以选择日期的滑块,评分内容的星星,或选择日期范围的分段按钮。 ? ? ? 溢出菜单(可选) 溢出菜单通常放置在卡的右上角。

    6K100

    HTC VIVE☀️二、人物基于Player,实现与物体的交互

    Interactable组件 所有交互最基础的组件(所有要交互的UI、物体必添加)。...手柄高亮、震动的实现 Hand下两个物体的ControllerHoverHighlight组件,包含高亮效果的Material,更改其Material便可改变手柄高亮效果。...(500); 物体响应Hand交互的事件 InteractableHoverEvents:挂载到要交互的物体上,当手柄碰到该物体,基于碰撞的不同阶段,触发该物体不同事件。...勾选则保持原有关系 Attach Ease In:抓取时是否有缓动,即物体慢慢吸附到指定物体上 Snap Attach Ease In Curve:缓动类型 Snap Attach Ease In Time...:缓动时间 On Pick Up:拿起时事件 On Detach From Hand:被手柄释放实现的事件 大家还有什么问题,欢迎在下方留言!

    32110

    图扑虚拟现实解决方案,实现 VR 数智机房

    VR 虚拟场景内三维立体的呈现出机房内资产、容量、动环、设备等关键要素,搭配图扑 HT 独具创新的 VR 手电筒透视巡检功能,为多项业务信息提供实时采集、处理、监控、透视业务,帮助运维人员准确掌握业务的动态运行情况及空间分部特征...通过抓取、挪动等操作,对机柜内任意设备进行上下架处理、端口链路查询,或对资产对象的型号、位置、CPU 负载等信息,进行交互式调取查阅。支持自定义机柜颜色为用户打造专属的视觉体验。...VR 容量管理 平台支持通过底层应用接口,将监测到的功耗、冷量、剩余空间进行同步上传,选以分类、组合、排序等 UI 组态风格,生成含有功率、承重、IP 地址等多要素 2D 可视化面板。...图扑软件支持自定义风格、布局、菜单工具条等内容,能承载十万以上级别的 2D、3D、UI 的表格树通用组件图元量,满足海量物联网设备和数据场景需求。...当面对海量、多源、异构动环数据,以往传统的人工运维方式常常会造成整体监控不完善、异常发现不及时、时间原因不明确以及控制决策无体系的问题。

    1K20

    图扑虚拟现实解决方案,实现 VR 数智机房

    通过抓取、挪动等操作,对机柜内任意设备进行上下架处理、端口链路查询,或对资产对象的型号、位置、CPU 负载等信息,进行交互式调取查阅。支持自定义机柜颜色为用户打造专属的视觉体验。...VR 容量管理平台支持通过底层应用接口,将监测到的功耗、冷量、剩余空间进行同步上传,选以分类、组合、排序等 UI 组态风格,生成含有功率、承重、IP 地址等多要素 2D 可视化面板。...图扑软件支持自定义风格、布局、菜单工具条等内容,能承载十万以上级别的 2D、3D、UI 的表格树通用组件图元量,满足海量物联网设备和数据场景需求。...VR 动环监控动力环境监控系统主要针对机房内的空调、电源、蓄电池组、UPS、发电机等设备以及温湿度、烟雾、漏水、门禁等环境变量,实现遥控、遥信、遥测、遥调等功能。...当面对海量、多源、异构动环数据,以往传统的人工运维方式常常会造成整体监控不完善、异常发现不及时、时间原因不明确以及控制决策无体系的问题。

    89810

    图扑虚拟现实解决方案,实现 VR 数智机房

    通过抓取、挪动等操作,对机柜内任意设备进行上下架处理、端口链路查询,或对资产对象的型号、位置、CPU 负载等信息,进行交互式调取查阅。支持自定义机柜颜色为用户打造专属的视觉体验。...VR 容量管理平台支持通过底层应用接口,将监测到的功耗、冷量、剩余空间进行同步上传,选以分类、组合、排序等 UI 组态风格,生成含有功率、承重、IP 地址等多要素 2D 可视化面板。...图扑软件支持自定义风格、布局、菜单工具条等内容,能承载十万以上级别的 2D、3D、UI 的表格树通用组件图元量,满足海量物联网设备和数据场景需求。...VR 动环监控动力环境监控系统主要针对机房内的空调、电源、蓄电池组、UPS、发电机等设备以及温湿度、烟雾、漏水、门禁等环境变量,实现遥控、遥信、遥测、遥调等功能。...当面对海量、多源、异构动环数据,以往传统的人工运维方式常常会造成整体监控不完善、异常发现不及时、时间原因不明确以及控制决策无体系的问题。

    94920

    VRTK☀️六、基础配置、实现与UI交互

    基础配置 1、我的Unity版本 2018.4.11.c1 2、导入SDK SteamVR(版本1.2.3)、VRTK(版本3.1.0)或VRTK(版本3.2.1) 两个版本下载地址:下载地址 为实现将手柄替换为手模型...手柄射线交互 效果:类似激光笔,按下Trigger,通过指针(Pointer)对于UI进行选择,适合于远距离交互 参考场景:VRTK 34 1️⃣ Canvas设置 新建比例0.003、分辨率3的、带有一个...Button的3DCanvas Canvas添加 VRTK_UICanvas 2️⃣ 手柄设置 右手手柄添加 VRTK_UIPointer Enjoy!...手柄碰撞交互 直接通过手柄触控交互,适合于近距离交互 1️⃣ 手柄设置: a、完成“一手柄射线”所示设置 b、右手手柄再添加 VRTK_InteractTouch,该组件是UI碰撞条件之一 2️⃣ Canvas...设置 Canvas上的 VRTK_UICanvas 组件——AutoActivateWithinDistance,设置0.2 该属性指:当手柄与UI按钮的距离小于0.2,会自动触发按钮事件。

    39210

    😎web手柄终极适配方案

    前言掘金:https://juejin.cn/post/7528405614440726582最近用手柄玩星铁和绝区零的时候,发现他们的手柄适配做的很舒服,就突发奇想,web这边有没有现成的手柄库。...GitHub不说废话,先贴仓库链接,web-gamepad需求分析需求不高,能像游戏一样,支持以下功能适配全部标准手柄按键(如:xbox、ps5)支持多场景ui控制与切换支持多个手柄输入思路俗话说,技术为需求服务...w3c手柄文档既然有标准,那就很简单了,可以用标准的key值做为参数去绑定事件。不遵守标准的,可以设计成自定义传参兼容。...我的设计思路如下:全局一个manager管理多个ui组件的事件(controller)切换,切换某个controller,就只触发该controller下的事件,这样就能实现像星铁一样切换事件多个ui组件...切换,必然要有回溯之前ui场景的功能。

    25000

    Sketch 94 mac,草图94中文最新版支持M1,支持macOS Ventura 13

    :Sketch for mac(矢量绘图UI设计软件) 图片新功能:增强您的 Symbols 工作流程我们重新设计了 Inspector 中的覆盖面板,使使用 Symbol 实例变得比以往更快、更容易。...首先,您现在可以通过沿选择框边缘的任意点拖动来水平或垂直调整大小。其次,如果选择太小而无法舒适地调整大小,则选择框会显得稍大,以便更容易拖动其边缘。...现在,只要将鼠标悬停在其边缘或调整手柄大小,选择的宽度和高度就会出现。我们还移除了选区边缘的调整大小手柄,仅将它们留在四个角上。...如果在将鼠标悬停在手柄上时按住 ⌘ 键,您将看到线条的角度。我们修复了在插入或复制粘贴位图后关闭文档时会发生的内存泄漏。修复了无法通过拖动未填充区域来移动带有边框但没有填充的选定形状的问题。...修复了在画板之外扩展的带有阴影或模糊的叠加层无法正确渲染的问题。修复了一个错误,在该错误中,分离包含具有缩放文本的嵌套实例的符号会将文本重置为其原始大小。

    12.9K70

    2.5 VR扫描:索尼关闭曼彻斯特工作室;Oculus Quest更新V13系统

    Oculus Quest更新V13系统,默认开启手势识别,可与手柄自由切换 据悉,Oculus Quest将于本周更新V13系统,除提升手势追踪稳定性、更新手势教学步骤之外,还开启了手势识别的头显默认开启与手柄的自由切换...据悉,Quest从V12版开始提供beta版手势识别测试,不过此前使用时需要用手柄手动选择切换至手势,而现在Quest已开启手柄和手势的自动切换。用户在放下手柄后,就能自动触发手势识别。...据悉,Glass Enterprise Edition 2基于Android,同时谷歌分享了新的开源应用和代码示例,包括可以为新开发者提供帮助的示例布局和UI组件。...据悉,MREAL Display MD-20的视场角约为水平70度×40度垂直、单眼显示分辨率为2560×1600、显示频率约为60Hz、传感器分辨率为单眼2560×2048、传感器视场角为水平81度×...垂直69度,且MREAL显示器主体+头戴式装置总重量约620g。

    82710

    4.3 VR扫描:苹果申请自动驾驶汽车VR系统专利,可用于缓解晕动症

    苹果申请自动驾驶汽车VR系统专利,可用于缓解晕动症 近日,苹果一项用于自动驾驶汽车的VR系统专利曝光。据外媒资料显示,苹果的VR系统能大幅改变车辆内、外部环境,给乘客带来更多乐趣。...未来的汽车将没有车窗,利用显示屏和VR系统向乘客呈现真实或“人造”的周围环境。该专利的目的是缓解晕动症,同时也揭示了苹果在VR和自动驾驶汽车领域的愿景。...Facebook为其VR社交应用Spaces更新虚拟化身设计 Facebook宣布将为其VR社交应用Facebook Spaces推出更多可自定义的虚拟化身和虚拟角色。...Tree Tech新型手柄控制器能在VR中完美兼容键鼠 近日,TreeTech开发了一款新型手柄控制器,首次在实现了VR中键盘和鼠标功能的统一。...该手柄控制器前端具有WASD键设置的迷你版本,以及游戏者主要使用的Q、E、shift和control键;后面的触摸板充当鼠标。据悉,该手柄控制器将于今年第三季度生产并在第四季度上市。

    782110

    HTC VIEW☀️十一、使用激光指针与物体交互:一直显示激光——(VR交互机制3-Use)

    Use两种实现方式: 1、使用手柄点击,按下Trigger键触发 2、使用激光指针悬停在物体上,按下Trigger键 2019.06.26更新: 写了一套逻辑,只要勾选isHTC,自动帮你把UI从PC...实现射线与物体的交互,可出现选中效果。 若不勾选,则只实现手柄触碰到之后才交互。...需要注意的是:右手手柄按下扳机键点击物体想触发Use事件,要在此时关闭瞬移效果 原先:右手手柄按下圆盘键激光击中物体,按下扳机键,触发Use事件。...关闭方法1: 右手手柄VRTK_InteractUse_UnityEvents——Toggle为false 激光与UI的交互: 单纯实现与UI Collider的交互,直接用上面的“与物体的交互”就OK...了,但要实现UI Scroll View的滑动效果,则还要: 1、先完成与物体交互手柄的操作步骤,UI上可不添加Interactable 2、在想要交互的手柄上,比如RightController,添加

    36210

    低压无功补偿电容柜浅谈

    ,并作电缆的短路保护,由于开关手柄为旋转操作,特别适用于抽屉式开关柜中安装使用。...接触器带有抑制涌流装置,能有效地减小合闸涌流对电容的冲击和抑制开断时的过电压。 使用环境条件:安装地点的海拔不超过2000m。 安装条件:安装面与垂直面倾斜度不大于±5°。...CJ19-25~43接触器可用螺钉安装,也可借底部的滑块扣装在35mm标准卡轨上。面罩上有一个可拆卸的长方形白色小牌,用户可用它打印项目代号等。...水平母排规格一般根据进线柜额定电流进行选择,但要满足动稳定和热稳定要求;垂直母排额定电流一般为1000A。 常用的母线结构型式有矩形、槽形和管形等。...冲击耐压试验时,被试品不得带有过电压保护元件,电流互感器的二次侧应短路并接地,低电流比的电流互感器允许将一次侧短接。

    1.8K10

    「ZenSphere」冥想应用开发纪实:与 CodeBuddy 一起打造纯净之境

    构造渐变背景与能量球的基本结构; 搭好底部的三个控制按钮; 把音频播放这块先预留接口; 后续还安排了粒子动效和全屏切换功能。...样式:细节上的舒服才最动人 主逻辑之外,CodeBuddy 还细细把 UI 调了好几处: 按钮用的是半透明圆角扁平样式,点一下会轻轻放大,还带柔和阴影; 音量滑块走的是磨砂透明风,圆形发光的拖动手柄特别亮眼...全局样式方面,它还顺手把 App.vue 的默认导航栏去掉了,加了 overflow: hidden,背景强制设成了纯黑,避免出现滚动条或乱入 UI。...像粒子动效的销毁控制、音频状态同步 UI 的精细处理,都是些容易被忽略的小细节,但它都没落下。 我几乎没写几行 Vue 的代码,就能把这个极简冥想 App 顺利搭好,这种“由想法驱动构建”的感觉很棒。...比起以前手动调 UI 和逻辑,这次更像在和一个靠谱的队友并肩完成作品。 下次有新点子,再试试看它还能做出什么花样。

    29910

    Vue.Draggable 文档总结

    特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的...,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动 filter: selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器...,拖放可以引起区域滚动 scrollFn:function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配...== 'b') } } componentData Object,默认值:null 用来结合UI组件的,可以理解为代理了UI组件的定制信息 包含两项:props和on props...用来代理UI组件需要绑定的属性(:) on用来代理UI组件需要绑定的事件(@) <draggable element="el-collapse" :list="list" :component-data

    13.1K20
    领券