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

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material DesigniOS中的组件(顺便学学英语),以便今后使用的时候完全不虚...为了点击 bottom app bar 的菜单图标后提高可达性,它们从屏幕底部打开不是从侧面打开。 ---- 分解 Navigation drawers 包含嵌入 sheet 的 list。...行为 滚动 Navigation drawers 可以垂直滚动,独立于屏幕内容和 UI 的其余部分。...如果导航目的地列表长于 drawer 的高度,则 drawer 的内容可以 drawer 滚动。 ?...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部不是左侧或右侧边缘的 modal drawers。

3.8K40

html滚动条使用,以及页面有多个div块,如何body页面不使用滚动条,只某个div使用滚动

滚动条基本知识: 建议比价华丽的页面使用overflow:scroll这个样式的滚动条,比较好看。...滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色 我们通过几个实例来讲解上述的样式属性: 1.浏览器窗口永远都不出现滚动条 没有水平滚动条...举例: 2,页面有多个div块,如何...body页面不使用滚动条,只某个div使用滚动条 先说说正常显示的,显示滚动条和不显示滚动条,效果图如下: 代码: iframe 中始终显示滚动条:</h3...,会导致页面内容过多事不能显示超出页面高度的内容,所有要注意协调。

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

    【软件开发规范七】《Android UI设计规范》

    图形限制中央20dp X 20dp区域。 ​编辑 小图标同样有栅格系统。线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。 ​...编辑 ** 分隔线(Dividers) ** ​编辑 Dividers 主要用于管理和分隔列表和页面布局内的内容,以便内容生成更好的视觉效果及空间感。...编辑 当前不可用的选项要显示出来,用户知道特定条件可以触发这些操作。 ​编辑 菜单原地展开,盖住当前选项,当前选项应该成为菜单的第一项。 ​...手机端的侧边抽屉距离屏幕右侧56dp。 ​编辑 侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起时,会保留之前的滚动位置。 ​...编辑 ​编辑 列表较短不需要滚动时,设置和帮助反馈跟随列表后面。 ​

    5.1K20

    Android Design Support Library初探-更新中

    Android Design Support Library的帮助下,我们为所有的开发者,所有的2.1以上的设备,带来了一些重要的material design控件。...action button (悬浮操作按钮) snackbar tabs(选项卡) a motion and scroll framework to tie them together(将这些控件结合在一起的手势滚动框架...) 官方视频简介 Navigation View 抽屉导航是app识别度内部导航的关键,保持这里设计上的一致对app的可用性至关重要,尤其是对第一次使用的用户。...NavigationView 通过提供抽屉导航所需要的框架实现更简单,同时它还能够直接通过菜单资源文件来直接生成导航元素。 ?...icon="@drawable/ic_android" android:title="@string/navigation_item_2"/> group> 被点击过的item会高亮显示抽屉菜单中

    97320

    Material Design — App bars: bottomApp bars: bottom

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material DesigniOS中的组件(顺便学学英语),以便今后使用的时候完全不虚...2、嵌入:FAB处于 bottom app bar 相同的高度,并且 bar 的形状转换为 FAB 嵌入 bottom app bar 中。...底部的导航抽屉从底部的应用栏打开。 抽屉底部应用程序栏前打开,并显示顶部应用程序栏以达到完整高度时关闭抽屉。...Drawer bottom app bar 前面打开,并显示 top app bar 以达到完整高度时关闭抽屉。...不要将导航操作置于bottom app bar中,因为它们可以被临时表面覆盖 top app bar 同时使用 当 bottom app bar 一起使用时,top app bars 可以提供向上导航和其他操作

    2.4K80

    vue3打造接近原生体验的抽屉指令

    ,我们手把手打造一个 手把手打造抽屉指令组件 滑动抽屉是常用的交互体验,也app中随处可见,那么我们h5该如何实现呢?..., 但是你值钱的,不是这个玩意,这玩意你能干,别人也能干 去优化体验问题的经验才是我们应该学习的,这才是各位jym安身立命的资本!...为了优化体验问题,我们还需要解决几个问题,才能形成一个接近原生体验的组件 需要解决的问题 1、抽屉滚动条滑动和拖动冲突问题如何解决?...2、抽屉拖动的性能问题如何解决 3、手势滑动抽屉的动效问题该如何解决 jym不要着急,我们接下来一个个来,从丘处机路过牛家村开始 抽屉滚动条滑动和拖动冲突问题如何解决?...手势滑动抽屉的动效问题该如何解决 这个问题就比较好解决了,之所以需要解决这个问题,原因很简单,我们拖动的时候,是不能有动画的,因为它是js 的实时计算,为了他能跟手 但是,但是当我们划动的时候,就需要有一个效果缓缓弹出和收起了

    46330

    Material Design技术分享

    Part1:什么是Material design   自2014年谷歌I/O大会发布Material Design,至今已经两年多,其遵循纸片墨水的视觉设计,并将物理运动带入到UI设计中,google...因为Material Design本是一种考虑事物本质的设计,将电子屏幕里的UI元素看成是一种不存在于现实世界的新的材质,并赋予它类似纸片墨水的物理特性。...因此Material Design并不是去拟物化的设计。许多人会将把扁平化拟物化对立起来,其实两者并不是对立关系。扁平化其实也有纸片设计的元素,只不过缺少物理世界的立体感。   ...布局之间的滑动是如何相互影响的呢,就appbarlayout来举例,看看如何实现toolbar布局中的RecyclerView(或者任何能滚动的控件)实现配合滑动。...enterAlways:这个flag任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。

    2.2K60

    iOS开发常用之网络

    它使用基于ViewController的容器特性(不是滚动视图)来管理各个子页面,以支持无限分页,源码推荐说明。...TabBarController,支持自定义TabBarItem样式或添加动画 隐藏显示 SlideTapBar - 滚动栏菜单,向上滚动时隐藏tabbar,向下滚动马上显示tabbar。...HYNavBarHidden - 导航条滚动透明,超简单好用的监听滚动,导航条渐隐的UI效果实现。...仿LOL滚动视图 - 仿LOL滚动视图。 答案选择切换页 - 将scrollview和tableview封装在一起初始的时候简单的将数据带上,就可以一页一页的左右来回滑动。...LeeGo.swift - 带来更声明式的,可配置的和易复用的UI开发方式,UI开发变得像玩乐高积木一样简单直观,某种程度上取代ComponentKit。

    23.6K10

    你见过微信侧滑返回的联动效果,但开门效果、百叶窗效果见过吗?

    系统的贝塞尔曲线返回效果 SmartSwipeBack.activityBezierBack(application, null); 侧滑返回的更多用法请戳 这里 效果图: [侧滑返回效果] 1.2 一行代码页面动起来...//为控件添加仿iOS的弹性留白效果: //当纵向不能滚动(或滚动到顶/底)时,若继续拖动,则UI呈现弹性留白效果,释放后平滑恢复 SmartSwipe.wrap(view) .addConsumer...(new SpaceConsumer()) .enableVertical(); 效果图: [弹性留白效果] 1.3 一行代码页面具有弹性 //为控件添加仿MIUI的弹性拉伸效果: //当纵向不能滚动...(或滚动到顶/底)时,若继续拖动,则UI呈现弹性拉伸效果,释放后平滑恢复 SmartSwipe.wrap(view) .addConsumer(new StretchConsumer())...对被侧滑控件的touch事件进行拦截分析,确认是否将其捕获作为侧滑手势 然后计算好侧滑的实时位移(手指滑动的位移,不是不依赖于View的lefttop) 再通过策略模式(Strategy Pattern

    1.5K10

    5分钟掌握8个常用交互组件,轻松进阶原型设计

    接下来我们从实际案例来看一看如何使用弹出菜单。 1. 随意拖出一个组件,这里我们以Mockplus中的按钮组件为例。 ? 2.拖出弹出菜单组件,将按钮右上角的链接点菜单组件相连。 ?...二、弹窗 弹窗弹出面板的操作步骤基本一致,区别在于弹出菜单的四个菜单项都可再设置交互动作,弹窗仅有“是”、“否”两个选项可供设置交互动作。 ?...三、抽屉 抽屉是一个常用的容器型组件,其特点为高度封装、高度可调节性、高度可容纳性,换句话说,您无需自行设计抽屉的细节,只需简单设置几下即可的到一个以多种方式滑出。 ?...将按钮的链接点抽屉连接后,双击抽屉图标即可添加组件。 ? 四、图片轮播 图片轮播组件支持数张图片的乱转展示,同样操作简单。先将图片轮播组件拖入工作区内,双击添加图片即可。 ?...在编辑模式中拖入需要加入滚动区的组件,鼠标点击“+”来扩展滚动区大小,点击“-”来收缩滚动区大小,如果你同时按下Ctrl键,可加速扩展或收缩。 ?

    1.1K100

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

    区别在于列表项可以水平滚动不是垂直滚动Google Play商店应用程序中可以看到这种模式的示例,该应用程序显示了可浏览的多种类别应用程序的轮播。...2.导航和动作 虽然您刚刚了解了可以应用程序主屏幕上使用的几种用户界面模式,但您可能仍需要一种导航至应用程序其他部分的方法。...工具列 您可能已经注意到,Android应用程序中的大多数页面屏幕顶部都包含一个工具栏。...电视应用程序不仅需要考虑这两点,而且电视还使用D-pad控制器不是触摸屏进行交互。 因此,轮播方式效果很好。 用户可以几行项目之间移动,然后水平滚动以查看他们可用的内容。...话虽这么说,并不是所有的应用程序都是一样的,有时您可能需要针对用户应用程序交互的方式提出创造性的解决方案。 所有模式的共同点是它们简单,可用且不会妨碍用户。

    2.7K20

    Flutter容器类组件

    ) ), );; } } 效果图如下: undefined 3.5 Transform注意事项 Transform的变换是应用在绘制阶段,不是应用在布局...由于矩阵变化只会作用在绘制阶段,所以某些场景下,UI需要变化时,可以直接通过矩阵变化来达到视觉上的UI改变,不需要去重新触发build流程,这样会节省layout的开销,所以性能会比较好。...,padding的留白是容器内部,读者需要记住这个差异。...Flutter Material 组件库提供了一些现成的组件来减少我们的开发任务。Scaffold,中文称之为脚手架,为开发者提供了路由页面的整体架构,开发者可以借助它快速便携地实现一个完整的页面。...5.3 Drawer介绍 Scaffold的drawer和endDrawer属性可以分别接受一个Widget来作为页面的左、右抽屉菜单。

    3.9K40

    Material Design — 底部导航(Bottom Navigation)

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material DesigniOS中的组件(顺便学学英语),以便今后使用的时候完全不虚!...底部导航(Bottom Navigation) Material Design链接:底部导航 ? 底部导航 底部导航条能够通过单次点击动作,轻易的进行一级页面之间的切换。...底部导航应该用于: 3-5个重要性相同的一级页面,且需要从app 中任何地方直接访问目的地 (超过6个:app中一直存在的持久抽屉导航persisitent navigation drawer) (不满...滚动 底部导航栏滚动时可以动态地出现和消失: ·向下滚动隐藏底部导航栏 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。...点击icon进行切换时也该避免横向切换页面之间转换(如左右推进)。

    4.1K90

    Anroid Wear OS 手表应用开发 - UI

    ,圆形布局的内容,不会超过显示边界: 导航抽屉栏 为了节省宝贵的显示空间,通常手表应用是没有标题栏的,使用 ViewPager 的时候,也没有 TabLayout 的显示,但因此我们无法很好的确认当前页面...} 复制代码 这里面的 controller.peekDrawer() 是导航栏顶部露出一小部分,提示用户这里是有东西可以下滑的,也可以调用 controller.closeDrawer() 完全隐藏导航栏...操作抽屉栏 当需要对当前页面进行一些操作的时候,但页面里又没有空间再放按钮了怎么办?既然可以从顶部下拉出导航栏,要不在底部上拉出一个操作栏?...,这一部分会在列表滑动时隐藏,列表到顶部和底部时显示: 露出部分默认会显示操作栏第一项的图标,可以布局中添加 app:showOverflowInPeek="true",它显示竖直三个点的省略图标...,列表是沿着表盘左边,曲线排列滚动的。

    2.5K30

    Flutter | 容器组件

    不是 layout 阶段,所以无论对 子组件做何种变化,其占用的空间的大小和在屏幕上的位置都是不变的,因为这些都是布局阶段就确定的,例如: Widget getTest() { return..., UI 需要变化是,可以通过矩阵变换来达到视觉上的 UI 变化,不是重新 build 流程,这样会节省 layout 的开销,所以性能会比较好,例如 Flow 组件,内部就是使用矩阵变换来更新 UI...4) child: Text("hello world"), ), ); } 复制代码 由于 RotatedBox 是作用于 layout 阶段,所以子组件会旋转 90 度(不是绘制内容...幸运的是 Flutter Material 组件库中提供了一些现成的组件来减少我们的开发任务 Scaffold Scaffold 是一个路由页的骨架,使用它可以很容易的拼装出一个完整的页面 我们实现一个页面...由于 Tab 菜单和 Tab 页面的切换需要通过,我们需要通过 TabController 去监听 Tab菜单的切换,然后去切换 Tab 页面, 代码如: _tabController.addListener

    5.5K10
    领券