首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Material Design —Tabs

Tabs Tabs可以轻松浏览和切换不同视图。 选项卡使内容组织处于较高级别,例如在app视图、数据组或功能之间切换。 将Tabs以单行形式显示在其关联内容上方。...固定标签应该使用有限数量标签,并且一致放置将有助于肌肉记忆。 当有许多或可变数量选项卡时,应使用滚动选项卡。 ?...滚动tabs 滚动选项卡在任何特定时刻显示选项卡子集。 它们可以包含更长选项卡标签和比固定选项卡更多选项卡。...当用户不需要直接比较选项卡标签时,滚动选项卡最适合用于浏览触摸界面中上下文。 要在滚动选项卡之间导航,请触摸选项卡或向左或向右滑动内容区域。...要在不导航情况下滚动选项卡,请向左或向右滑动选项卡。 ? 移动端滚动tabs ? pc端滚动tabs

2.4K100

Chrome终于上线这项重磅功能,中国用户苦等多年!

在这样标签栏点击切换页面非常麻烦,而且还很容易手误关闭网页。 但在某些国产浏览器中,许多用户应该都体验过这个功能——滚动标签页。 使用鼠标中键在标签栏上滚动,就可以快速切换标签查看对应页面了。...早在2018年,谷歌Chrome团队工程师就透露称,要在Chrome中新增滚动标签栏功能。 2019年,滚动标签页实验性功能上线,可以由用户手动选择是否开启。...-开关页面 chrome://flags/#scrollable-tabstrip 将Scrollable Tabstrip后面的选项从【Default】更改为【Enabled】。 ?...当打开标签页数量超过浏览器窗口宽度时,此功能可以让用户在标签栏滚动鼠标滚轮,找到想要标签页。 ?...7、Clutter Free 阻止Chrome打开相同网址重复标签。检测目前已打开重复标签页,并提示你关闭它们。

2.3K20

uni-app实现tabbar选项卡切换

>{{item.name}} 首先我们使用 定义了一个滚动视图区域...:元素滚动添加过渡效果 添加:scroll-into-view前 ` 添加后 我们在滚动元素view做了如下事情 1.循环动态数据 2.绑定class属性使当前被点击元素高亮 3.绑定id属性与...}, 选项卡已经跟页面关联了 接下来我们来开发滑块视图y轴滚动区域 我们在滑块视图要展示每一个栏目下文章列表,并且文章列表可以滑动(纵向滑动) 要实现上面需求我们在滑块视图里面在嵌套一个滚动区域...这里解决办法是给滑块视图一个具体高度,不过这个高度需要我们计算滑块视图高度= 导航栏高度-底部选项卡高度-顶部滑块高度 1.给顶部选项卡一个高度 100rpx 2.页面加载时候获取当前窗口可使用窗口高度...我们还要用这个高度减去顶部滑块选项卡高度即可得到滑块视图y轴滚动区域高度 在页面加载时设置顶部选项卡高度 let res = uni.getSystemInfo({

6.7K20

摹客RP,新增图文选项卡组件

接下来一起来看看具体更新内容吧: 摹客RP 新增图文选项卡组件 新增辅助画板做弹窗时滑入、推入等效果 图层树中同层级节点支持拖拽,以调整图层顺序 修复大画板导出图片内容错误问题...、字高属性,深度定义可变字体风格 摹客RP 新增图文选项卡组件 本次更新,新增图文选项卡组件,可用于快速制作手机项目底部导航等模块内容,你只需要在编辑窗口选中图标,在图标库中挑选合适图标进行替换即可...一大波优化更新来袭 摹客RP 性能 优化编组导致操作卡顿问题。 组件 图片及基本形状组件支持翻转操作。 新增内容面板支持设置是否滚动及是否显示滚动条。...项目与页面 页面回收站支持以树结构展示所有已删内容。 修复从网页项目类型修改为移动项目后,项目变为横屏问题。 修复页面树异常滚动问题。...新增画板适应内容功能,使画板尺寸与内部组件整体尺寸一致。 优化多人编辑时组件锁定功能稳定性。 修复多选组件转为面板后,图层顺序发生改变问题。

1.5K20

介绍两款k8s dashboard

工作负载选项卡将列出所选Kubernetes集群所有工作负载。 命名空间过滤器。左侧“名称空间”过滤器帮助您按您有权访问名称空间快速进行过滤。所选名称空间上所有工作负载将显示在右侧。...您可以使用活动选项卡在特定工作负载概述,日志,事件和YAML之间切换。 日志标签。Infra App会自动实时聚合来自不同容器和容器该工作负载所有日志。...默认情况下,滚动滚动到底部时,日志流送程序将自动刷新。当您将滚动条从底部移开时,日志流将停止自动滚动。 活动标签。...在 event选项卡中,Infra App将自动获取与此工作负载有关所有相关事件-例如卷,端点,控制器等。 YAML标签。YAML选项卡将显示用于设置工作负载YAML文件。 主要配置。...Infra App使端点超链接,因此您可以单击它以在Web浏览器中查看结果(如果支持)。 ConfigMaps。

1.7K10

最新iOS设计规范三|3大界面要素:栏(Bars)

视图(Views) 包含用户在APP中看到基本内容,例如:文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。 控件(Controls) 控件,是用于触发操作并传达信息。...大标题绝对不能与内容竞争,但是在某些应用中,大标题粗体会帮助人们浏览和搜索时进行快速定位。例如:在选项卡式布局中,大标题有助于说明活动选项卡,并指示用户何时已滚动到顶部。...保持状态栏可读,并不意味着其背后内容交互。...因为模态视图为人们提供了一种单独体验,使他们在完成后便会被解雇,所以这不是应用程序整体导航一部分。 选项卡功能不可用时,请勿删除或禁用该选项卡。...为了使界面具有预测性,选择一个选项卡应始终影响直接连接到选项卡视图,而不影响屏幕上其他位置视图。例如,在拆分视图左侧选择一个选项卡不应导致拆分视图右侧突然改变。

9.8K10

2023 年了解即将推出 CSS 功能

使工具提示更加动态。...在下面的示例中, shape-overflow: clip 将允许内容溢出形状,但它将被限制在元素笔画框内: 滚动捕捉(scroll snap) CSS 滚动捕捉模块提供属性可让您通过定义捕捉位置来控制平移和滚动行为...当用户滚动滚动容器内溢出内容时,内容可以被捕捉到位,从而提供分页和滚动定位。...它们将成为我们网络开发工具包宝贵补充,使处理媒体元素变得更加容易,并改善我们网站上整体用户体验。...子网格一个缺点是:它们很难调试。如果它们变得难以调试:使用网格检查器来可视化布局。在检查器面板中,你将看到许多不同选项卡。其中一个选项卡是“网格”选项卡

18630

从零开始Android:常见UI设计模式

轮播 有时,仅凭一个列表是不够。 如果您应用具有各种类别,并且可以很好地用图像表示内容,则轮播模式可能对您有用。 在此模式中,您将采用列表和详细信息模式,并在同一屏幕上多次使用它。...区别在于列表项可以水平滚动而不是垂直滚动。 在Google Play商店应用程序中可以看到这种模式示例,该应用程序显示了浏览多种类别应用程序轮播。...在Google Keep应用程序中可以找到一个示例,该应用程序使您可以更改便笺颜色,向该便笺中添加其他人以及溢出菜单中存在许多其他操作。...浮动动作按钮 浮动操作按钮模式使开发人员可以突出显示用户在应用程序一部分中可以执行单个操作。...用户可以在几行项目之间移动,然后水平滚动以查看他们可用内容。 当用户找到要查看项目时,可以选择该项目以查看详细信息屏幕,该屏幕提供了该项目的操作列表。

2.6K20

VBA专题10-25:使用VBA操控Excel界面之一个示例程序

当打开工作簿时, 1.1 激活特定工作表(名为Sample)。 1.2 开始3行被冻洁。 1.3一个特定行(行50)向上滚动并成为解冻窗格顶部行。...1.4 活动工作表滚动区域限制为某个单元格区域(A4:H100)。 1.5 一个自定义选项卡(名为Custom)被激活。...如果激活工作表是标准工作表,那么Custom选项卡是可见。 4....如果取消选取(或选取)指定内置复选框(例如,在“视图”选项卡“编辑栏”复选框),那么禁用(或启用)自定义控件(例如,在“视图”选项卡G5B1按钮)。 5....注:如果你有兴趣,你可以到知识星球App完美Excel社群下载这本书完整中文版电子书。 欢迎在下面留言,完善本文内容,让更多的人学到更完美的知识。

2.2K10

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

右箭头键或左箭头键 在功能区或窗格中从一个选项卡移至另一选项卡。 Tab 键或 Shift+Tab 在功能区、窗格、视图或对话框上命令或项目之间移动。 上箭头键或下箭头键 在列表中元素之间移动。...P 使线平行显示。 约束平行于另一条线段新线段方向。将鼠标悬停在现有线段上,然后按键盘快捷键。释放键将设置约束并闪烁将其约束到线段。 E 使线垂直显示。 约束垂直于另一条线段新线段方向。...在范围选项卡步骤设置中定义步骤数量范围内向前移动。 Ctrl+Shift+Down 上一步。 在范围选项卡步骤设置中定义步骤数量范围内向后移动。...Ctrl+滚动鼠标滚轮 放大或缩小表比例。 Ctrl+0 将表比例重置回 100%。 Shift+滚动鼠标滚轮 水平滚动表窗口。 Ctrl+F 显示查找和替换命令。...按时间选项卡步骤设置中定义步骤数量向前移动。 Ctrl+Shift+Left 后退。 按时间选项卡步骤设置中定义步骤数量向后移动。

65520

iOS 11 更大导航 (官方翻译版)

在大多数情况下,标题帮助人们了解他们正在查看内容。但是,如果导航栏标题似乎是多余,可以将标题留空。例如,Notes不会为当前注释标题,因为第一行内容提供了所需所有上下文。 ?...大标题 当您需要特别强调上下文时,请使用较大标题。在一些应用程序中,大标题大胆大胆文字可以帮助人们浏览和搜索。例如,在标签布局中,大标题可以帮助澄清活动选项卡,并在用户滚动到顶部时通知用户。...手机使用这种方法,而音乐使用大标题来区分专辑,艺术家,播放列表和收音机等内容区域。当用户开始滚动内容时,大标题转换为标准标题。大标题在所有应用程序中都没有意义,不应与内容竞争。...虽然Clock应用程序具有标签式布局,但是大型标题是不必要,因为每个标签都有一个不同识别的布局。有关开发人员指导,请参阅prefersLargeTitles。...如果您导航栏包含多个文本按钮,那些按钮文本可能会一起运行,使按钮无法区分。通过在按钮之间插入固定空间项来添加分隔。

2.8K30

Techsmith Camtasia Studio2023最新版本功能介绍

Camtasia(以前称为Camtasia Studio)是一个功能强大录屏工具,轻松记录电脑上发生事情,将结果转换为精美的演示文稿,然后与世界分享。...Camtasia 2023支持专业声音:确保听众听到您想要,Camtasia 2023新Emphasize音频效果使您可以轻松地在视频中所有声音之间建立平衡。...Camtasia 2023创建自定义资产:扩展了对视频资产控制和定制,使用“快速属性编辑器”和“自动快速属性”创建自己重复使用自定义资产。...010.现在,组中组会自动以其父组作为前缀来命名。 011.通过双击选项卡,添加了对重命名“组”选项卡支持。 012.现在,在时间线上“组”上绘制了音频波形,以表示“组”内音频。...019.修复了一个错误,该错误导致仅将网络摄像头录制内容从“媒体库”拖到“画布”时无法拖动。 020.修复了导致拖动播放头时时间轴向上滚动错误。

1.8K30

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴一般被用来减少页面滚动,当在单个页面中呈现很多内容模块时。 通过以下术语来理解手风琴: 手风琴标题: 呈现内容模块标签或缩略图,同时也用来展开内容,在某些实现中,也用来隐藏内容模块。...选项卡 选项卡是一个内容分层模块集合,被称为选项卡面板,一次只能显示内容一个面板。每个选项卡面板都有相关联选项卡元素,当被激活,显示其相关联面板。...选项卡列表 被包含在 tablist 元素中选项卡元素组合。 选项卡 选项卡列表中一个元素,作为其中一个内容面板标签,可以激活以显示对应内容面板。...当选项卡列表包含焦点,移动焦点到当前页面 tab 序列中选项卡列表外下一个元素,一般情况是内容面板第一个聚焦元素,或内容面板本身。...如果选项卡列表是水平,它不会监听 Down Arrow 或 Up Arrow 光标键,即使焦点在选项卡列表内,使用这些键仍会提供浏览器常规滚动功能。

4.4K30

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

Scroll: 表示向下滚动时,这个View会被滚出屏幕范围直到隐藏. enterAlways: 表示向上滚动时,这个View会随着滚动手势出现,直到恢复原来位置. enterAlwaysCollapsed...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...除此之外,在设计 Toolbar 时候,Google也留给了开发者很多定制修改余地,这些定制修改属性在API文档中都有详细介绍,如: 设置导航栏图标; 设置Applogo; 支持设置标题和子标题...如果设计需求不要求选项卡在切换时附带有图标的切换效果,仅仅文字颜色发生变化以响应用户点击事件,那么TabLayout和ViewPager建立联系可以用官方提供方法,它可以做到交互双向联动,也就是点击...相互建立联系方法如下: setupWithViewPager(ViewPager viewPager) 如果选项卡里带有图标或者仅仅只有图标时就麻烦了,那个选项卡会变得什么都没有了。

2.2K90

现代浏览器探秘(part4):事件处理

因为选项卡内部内容由渲染器进程处理,所以浏览器进程会把事件类型(如touchstart)及其坐标发送到渲染器进程。 渲染器进程通过查找事件目标并运行附加事件侦听器来适当地处理事件。 ?...2:将鼠标悬停在页面图层上 了解非快速滚动区域 由于JavaScript是运行在主线程上,所以当合成页面时,合成器线程会标记页面的一个区域,该区域将事件处理程序附加为“非快速滚动区域”。...因此合成器平滑滚动能力被破坏了。 ? 图4:在覆盖整个页面的非快速滚动区域进行输入 为了缓解这种情况,你可以在事件侦听器中传递passive:true选项。...图5:一个部分内容被固定为水平滚动网页 ? 或者你可以使用CSS规则(例如touch-action)来完全消除事件处理程序。 ?...这些很重要,但我们也应该考虑浏览器如何获取我们编写代码。 现代浏览器将继续致力于为用户提供更好Web体验。 反过来通过使代码对浏览器友好,也可以改善你用户体验。

1.3K20

深入理解浏览器原理

2.1.4 运行流程 渲染进程共享:开启浏览器新窗口或新选项卡时,创建新浏览器进程,并创建RenderView。不同页面/iframe共享同个渲染进程。...如有设置导航或关闭选项卡时发出警报“离开这个网站吗?” 包含JavaScript代码选项卡所有内容都由渲染进程处理。...渲染进程处理页面内容 渲染进程负责选项卡内发生所有事情。在渲染器进程中 主线程:处理您发送给用户大部分代码。...非快速滚动区域 1) 合成页面时,合成器线程标记页面的一个区域,该区域将事件处理程序附加为“非快速滚动区域”。...事件处理 下面程序中,整个页面都被标记为非快速滚动区域,合成器线程也必须与主线程通信,并在每次输入事件进入时等待它,最终影响合成器平滑滚动能力。

4.5K31
领券