文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

折叠屏上应用设计规范，了解一下？

深入理解布局 深入理解布局指南 介绍了布局容器的相关概念，它提供了一个整体框架，可帮助开发者思考如何在屏幕上排列导航栏、工具栏和内容等界面元素。...包括适当缩放以展示更多内容，如示例中的副标题和日期，以及较小的组合技术，例如在紧凑型的布局中对内容进行视觉分组并保持其相关性等。...△ 响应式界面可根据屏幕尺寸变化而调整内容布局 设想一下，当您调整浏览器窗口大小时，如果浏览器回退了一个页面，或者重定向到另一个页面，又或者修改了历史记录，这种体验非常奇怪。...第二种是增加另一个页面，根据您构建的应用不同，可以采用与列表/详情或者以另一个面板补充主面板功能相同的方案。...△ 平均分布在铰链两侧的八栏网格 (蓝背景) 适配示例 现在我们来看如何在运行期间利用好折叠状态。Jetpack Window Manager 库提供了相应的 API，可以检测应用窗口是否存在折叠。

6.7K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Elastic 的 Kibana 导航在 9.2 版本中根据用户反馈进行刷新

    超过 70% 的用户对新的导航感到沮丧，重要的应用程序如 Stack Monitoring 缺失。...刷新后的导航适用于 Elastic Cloud 的 无服务器，以及在 Elastic Cloud Hosted 和本地部署中启用解决方案视图的任何空间。导航刷新有什么新变化？...改进的折叠模式 – 只需一次点击即可访问主要和子菜单项。悬停菜单 – 快速导航，无需额外点击。始终可见的次级导航面板 – 轻松切换页面，例如索引管理和集成，不会丢失当前的位置。...，同时保持旧导航的正常工作。...焕然一新的外观和专用侧边栏应用我们还在重构旧代码，以引入新的 CSS 网格布局，将界面组织在指定的容器中，提供持久化的侧边栏，允许您在 Kibana 中导航时与聊天代理互动。期待您的反馈！

    20010

    搭建后台管理系统的思路

    ok 有了根之后，我们需要有一个 layout 页面，这个页面来承载我们的侧边栏，顶部栏 layout...页面他是两栏布局的，一栏是我们的侧边导航栏， 侧边栏 如何完成这个两栏布局 可以使用 float 可以使用弹性布局 display: flex 也可以使用定位 侧边导航栏，可能我们需要来研究 element-ui...的组件 NavMenu 导航菜单 侧边导航栏需要我们路由的一些信息，比如路由对应的组件，就像 router-link 对应的 router-view 如果菜单是二级菜单，三级菜单，需要怎么处理 如果需要折叠菜单...，需要怎么处理，这里就需要阅读 折叠菜单组件 也就是说侧边菜单来其实就是一个个的 router-link 然后扩展菜单项是否有 icon 小图标，是否有标题存在，那么路由就需要设置 meta 属性了 顶部栏...需要注意是否需要点击跳转的，定位到那一级菜单的问题 需要研究 Breadcrumb 面包屑 关闭展开侧边栏按钮 需要使用 vuex 来存储打开与否的这个状态值，通过 vuex 来更改状态 AppMain.vue

    3.4K20

    《vue3+ts+element-plus 后台管理系统系列三》之路由侧边栏

    本项目侧边栏和路由是绑定在一起的，所以你只有在 @/router/index.js 下面配置对应的路由，侧边栏就能动态的生成了。大大减轻了手动重复编辑侧边栏的工作量。...// 当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1 hidden: true // (默认 false) //当设置 noRedirect...// 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面 // 若你想不管路由下面的 children 声明的个数都显示你的根路由 // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则...，在面包屑中点击会重定向去的地址 hidden: true, // 不在侧边栏显示 alwaysShow: true, //一直显示根路由 meta: { roles: ['admin','...constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。 asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。

    5.4K10

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

    当点击进入新页面时，其导航栏的左侧会出现一个返回按钮，并带有前一页面的标题。 有时，导航栏的右侧也会有一个控件，如“编辑”或“完成”按钮，用于管理活动视图中的内容。...三、侧边栏（Sidbars） 侧边栏在iPhone上使用较少，更多的用在iPad。它提供了应用程序的导航，在侧边栏中选择一项可以使人们导航到特定的内容。例如，“邮件”中的边栏显示所有邮箱的列表。...允许用户隐藏侧边栏以为其内容创造更多空间，并使用内置的边缘滑动手势再次显示侧边栏。避免在默认情况下隐藏边栏。 侧边栏中的标题要保持简洁明了。省略不必要和多余的词。...如果由于水平空间有限而无法显示某些标签，则最后一个标签会变为“更多”标签，从而需要在另一个页面上显示的其他标签。 通常，使用标签栏在应用程序级别组织信息。...通常，在iPhone上使用三到五个标签；如果需要，在iPad上可以接受更多一些。 当人们导航到您应用中的其他区域时，请不要隐藏标签栏。标签栏可为您的应用启用全局导航，因此它在任何地方都应保持可见。

    14.9K10

    HarmonyOS NEXT 头像制作项目系列教程之 --- 侧边栏项目组件设计

    HarmonyOS NEXT 头像制作项目系列教程之 --- 侧边栏项目组件设计项目源码地址项目源码已发布到GitCode平台, 方便开发者进行下载和使用。...harmonyOSAvatar项目效果演示 主页面效果如下：侧边栏效果如下1. 概述本教程详细介绍HarmonyOS应用中侧边栏项目组件（SlideBarItem）的实现。...侧边栏项目组件是构建应用侧边栏的基础单元，负责展示主菜单项和对应的二级菜单，并处理用户交互逻辑。2....组件结构SlideBarItem组件是一个可折叠的列表项，包含以下主要部分：主菜单：显示一级菜单项，点击后可展开或收起二级菜单二级菜单：当主菜单被点击展开后，显示相关的子菜单项列表3....总结SlideBarItem组件是构建HarmonyOS应用侧边栏的基础单元，通过合理的组件设计和数据管理，实现了可折叠的多级菜单结构。开发者可以基于此组件快速构建功能丰富的应用侧边栏。

    38500

    折叠屏 ③ | 华为资深专家解读折叠屏组合页面设计及多任务设计要求

    一起来看看规范的详细内容吧~ 一 组合页面设计 不管是哪种折叠方式，对用户来说是新增了一块可折叠的屏幕，而这新增的屏幕使得1+1大于2，手机能变换为平板。...1.多层级 多层级关系有完整的多层结构，例如复杂的系统设置菜单，海量内容（如综合电商的商品，视频、图片或音乐的媒体资源，新闻网站的海量新闻）的门户及多级分类子页面。...为了达成“用户可感知当前位置”的要求，避免用户的迷失感，页面组合中左侧页面需固定显示根列表，用户随时可以通过对左侧的操作，重新回到一级子列表中；也可以通过选择一级列表中的分支入口，快速进入另一个一级分支...页面组合中右侧页面的操作可以保持普通手机的“层层深入”，并借助返回操作“层层退出”的导航定义。...2.悬浮窗面板 悬浮面板 3.侧边栏 从属信息默认以侧边栏形式显示，通过界面比例和视觉效果表现从属关系，不影响主要信息的展示，同时能快速浏览或操作从属信息。

    1.2K30

    【Vuejs】212- 如何优雅的在 vue 中添加权限控制

    第一个是侧边菜单栏，需要控制显示与隐藏。 第二个就是页面内的各个按钮，弹窗等。 流程 如何获取用户权限？...真正的问题 上面的需求有提到我们主要解决两个问题，侧边菜单栏的显示 & 页面内操作。...子路由全都没权限时不应该显示本身（例：当用户列表和用户组都没有权限时，用户也不应该显示在侧边栏） 默认重定向的路由没有权限时，应寻找 children 中有权限的一项重定向（例：用户路由重定向到用户列表路由...这一点可能和我们项目本身架构有关，我们项目的侧边栏下还有子级，是以下图中的 tab 切换展现的，正常情况当点击药品管理后页面会重定向到入库管理的 tab 切换页面，但当入库管理没有权限时，则应该直接重定向到出库管理界面...子路由全都没权限时不应该显示本身（例：当用户列表和用户设置都没有权限时，用户也不应该显示在侧边栏） 通过存储路由配置到 vuex 中，生成侧边栏设置，获取权限后修改 vuex 中的配置控制显示 & 隐藏

    4.1K30

    鸿蒙5开发宝藏案例分享---三折叠应用开发分享

    话不多说，直接上干货，结合代码带大家玩转三折叠屏开发！ ​**​三折叠的三种状态与断点适配​**​ 三折叠手机（如Mate XT）有​**​三种核心状态​**​，对应不同布局策略： 1. ​...）​**​：平板布局，断点 `lg` ​**​关键技巧​**​：用​**​断点（breakpoint）​**​ 而非设备类型做布局判断，保证代码通用性： ``` // 根据断点切换Tabs位置（底部→侧边栏...BarPosition.Start : BarPosition.End // lg时侧边栏，其他态底部 }) { ... } .vertical(this.currentWidthBreakpoint...**​典型布局场景实战​**​ 场景1：侧边导航栏（F态→G态动态迁移） ​**​效果​**​：小屏时底部导航栏，大屏（≥840vp）变左侧导航栏。 ​...页面动态调整导航栏（Home.ets） @StorageProp('windowWidth') winWidth: number = 0; build() { if (this.winWidth >

    30400

    为任意屏幕尺寸构建 Android 界面

    △ 更改之前的 Trackr 样式 上图是我们进行更改之前的 Trackr 样式，您会发现不管在什么设备或屏幕下，都会有一个单窗口任务列表以及用于导航到归档或设置页面的底部应用栏。...导航到应用任意一个顶层布局，但仍然可以通过选择界面中某个单项任务而导航到详情页面的 Fragment。...△ JetNews 侧边抽屉导航栏展示 回到 JetNews，我们可以看到在大屏状态下，侧边的抽屉导航栏会以模态的方式出现，但它会延伸到整个屏幕而出现大量空白区域。...其中比较有趣的一点是思考应用如何在不同尺寸布局之间转换，例如对于可折叠手机，应用可能会从较大的屏幕变为较小的屏幕。...获取更好的用户体验 在前文中，我们提到为了提供更好的用户体验，请添加对应用有意义的功能，如支持可折叠设备。

    5.7K20

    vue项目管理_vue适合做管理系统吗

    vue后台管理系统流程(面试必选) 后台页面的权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能 我们前端所要做的是: 不同的权限对应着不同的路由,同时侧边栏也需要根据不同的权限...登入界面 登录: 当用户填写完账号和密码后向服务端验证是否正确, 服务端返回一个token, 拿到token之后(我会将这个token存储到cookie中,保证刷新页面后能记住用户登录), 前端会根据token...== -1){next()}, 否则全部重定向到登入页面 下面是store/permission.js 这里就是干一件是,通过用户权限和之前在router.js里面asyncRouterMap的每一个页面所需要的权限做匹配...(推荐集) icon: ‘svg-name’侧边栏中显示的图标 noCache: true 如果fasle，页面将不会被缓存(默认为false) 侧边栏高亮问题: element-ui官方給了default-active...所以你授权的域名是vue-element-admin.com,你就必须重定向到vue-element-admin.com/xxx/下面，所以你需要写一个重定向的服务，如vue-element-admin.com

    2.1K30

    解读 chevron navigation：导航中的折叠指示与层级路径

    借助 chevron navigation，设计师不仅可向用户传递“后退”或“展开”等功能信息，还能在面包屑和侧边栏等组件中体现层级关系 。...面包屑导航（Breadcrumbs）面包屑组件常用右向 chevron（>）作为层级分隔符，直观表达当前位置的层级路径，便于用户快速回溯到上级或根级页面 。...侧边导航菜单在多级侧边栏中，chevron 常用于指示子菜单的可展开性，当菜单项包含子项时，右向 chevron 提示用户点击可查看下级列表 。...保持图标使用的一致性至关重要，避免在不同模块中赋予 chevron 图标多重含义，以免增加用户学习成本 。...标题：解读 chevron navigation：导航中的折叠指示与层级路径

    52910

    obsidian 第三方插件推荐

    其他的三方插件推荐（有些功能重复，选一个即可）：一、 文件与侧边栏管理 插件名称核心作用File Explorer Note Count​在左侧文件管理器（File Explorer）中显示每个文件夹内的笔记数量...Recent Files Obsidian​【推荐】增强“最近文件”功能，提供侧边栏面板或弹窗，快速访问历史记录。...四、 任务与日历管理 插件名称核心作用Calendar​【推荐】在侧边栏显示日历视图，点击日期可快速创建或跳转到每日笔记。...八、 界面美化与隐藏 插件名称核心作用Obsidian Hider​隐藏 Obsidian 界面的各种元素（如标题栏、状态栏、工具栏），实现极简沉浸式写作。...Tray​最小化 Obsidian 到系统托盘，而不是任务栏，保持后台运行。

    42300

    Vue-Element-Admin使用

    , // 引入的具体view，因为是一级路由，因此为统一的Layout redirect: '/excel/export-excel',// 路由重定向，即输入一级路由后这里为"excel"后重定向地址...: 'noRedirect' // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面 // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面...activeMenu: '/article/list' } 其中activeMenu意思是路由到该路径下后，在导航栏高亮指定的路由地址 创建多级路由（如三级路由），需要在上一级的根文件下添加一个...侧边导航栏默认展开 可以通过default-openeds来进行设置，首先找到侧边栏代码vue-element-admin/src/layout/components/Sidebar/index.vue...使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

    2.3K10

    鸿蒙5开发宝藏案例分享---Pura X开发案例分享

    24 // 外屏高度 : 48 // 内屏高度 ) .aspectRatio(1) // 保持正方形 2️⃣ ​**​内容显隐控制​**​ ​**​痛点​**​：外屏需隐藏非核心元素（如Banner...底层视频（全屏） Image($r('app.media.video_bg')) .objectFit(ImageFit.Cover) // 关键：保持比例填充 // 2....侧边悬浮控件（带弹性留白） Scroll() { Column() { Blank().layoutWeight(3) // 上方弹性占位 Button("点赞")...**​ ​**​交互效果​**​： - 上滑 → 隐藏标题栏/底栏 - 下滑 → 渐显复原 ​**​核心代码​**​： // 监听滚动偏移量 .onScrollFrameBegin((offset...**​转场动画优化​**​ 内屏→外屏时，用页面接续保证流畅性： // 在pageTransition中定义共享元素 PageTransition() { PageTransitionEnter

    25710

    postman使用

    导入工作环境.png 二、发送请求和查看响应 1.发送请求 Postman的界面分为 左边的侧边栏 和 右边的请求构建器 两部分。请求构建器允许你可以快速的创建几乎任何类型的请求。...如果一切设置正确，你将会被重定向到Postman的服务器，他将获取你的access token 并且发送到Postman的app，这样就给Postman添加了token，给他设置一个name，让你在以后可以快速的访问...4.Requests History 所有你使用Postman发送的request都将保存在左侧边栏的History中，他会帮助你通过尝试不同的request来生成一个新的request，而不必浪费你太多的时间...重定向设置.png General ---- Trim keys and values in request body 如果你使用表单数据或者URL编码模式来发送数据到服务器，这项设为true后就引起所有参数修整...Open history/collection requests in a new tab 设置为 true，当你点击左侧边栏历史或者收藏里面的request时，会在一个新的tab中打开。

    2.8K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券