文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基础篇章：关于 React Native 之 DrawerLayoutAndroid 组件的讲解

Android 中的 DrawerLayout 就是一个抽屉导航组件，所以这个组件的功能当然也是一样的。...，on-drag：是当拖拽开始的时候隐藏键盘 onDrawerClose func 每当导航视图被关闭时调用的函数 onDrawerOpen func 当导航视图被打开后调用该方法 onDrawerSlide...抽屉可以有3种状态： dle（空闲），表示现在导航条上没有任何正在进行的交互。 dragging（拖拽中），表示用户正在与导航条进行交互。...settling（停靠中），表示用户刚刚结束与导航条的交互，导航条正在结束打开或者关闭的动画。...renderNavigationView 该方法用于渲染一个可以从屏幕一边拖入的导航视图 statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕，并绘制状态栏的背景，使其能够在覆盖到状态栏

2.4K70

AngularDart Material Design 应用布局 顶

要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值即可。 建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。...material-spacer 占用标题和任何导航链接之间的空间。 需要在标题之后和任何导航元素之前放置。 material-navigation 导航元素将显示在头部的左侧。...对于抽屉外部的主要内容，将其包装在material-content元件中或具有material-content样式类的元素中。 固定性抽屉 固定性抽屉是不能关闭的抽屉。 它们完全由CSS提供。...-- Content here --> 导航样式 抽屉中的导航元素样式也由app_layout提供。...当可堆叠抽屉打开时，任何现有的可堆叠抽屉将被展开以填充背景中的屏幕。 适用于延期内容。 Inputs: visible bool  抽屉的可见性。

4K30
您找到你想要的搜索结果了吗？
是的
没有找到

模态对话框-B 类产品设计细节：对话框 vs 抽屉

何时使用模态在重要的警告时使用，避免出现严重问题、或修正已出现的问题。例如：用户未保存就要关闭时，弹出模态对话框提示用户保存。   2....抽屉的模态 vs 非模态   项目管理工具 Jira 的帮助文档入口在页面右侧，点开后从右侧划入非模态抽屉展示内容，这样便于用户进行对照查看和操作：   搜索功能入口在页面左侧中的导航中，点开后从左侧划入模态抽屉进行交互...原来由左侧划入的模态抽屉，点击左侧导航后从左侧划入：   当前版本使用非模态对话框模态对话框，点击顶部导航后在 icon 下方出现：   4....模态抽屉 vs 气泡卡片   文档工具 中，产品功能和交互都很简洁轻量，没有出现对话框组件，在文档中插入图片或文件、编辑导航、导入文档等稍重的操作使用抽屉，而插入表情、标签等位置指向明确、操作很轻的使用气泡卡片...例如：为一个表单选择组件，从应用场景来看，对话框和抽屉皆可；从交互维度，该表单的填写需要参考表单的父级页面中的内容，则确定选择非模态抽屉模态对话框，不需要再从长短考虑。

1.7K20

【React Native 安卓开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

有三种状态： unlocked (默认值)，意味着此时抽屉可以响应打开和关闭的手势操作。 locked-closed，意味着此时抽屉将保持关闭，不可用手势打开。...on-drag 当拖拽开始的时候隐藏软键盘。 onDrawerClose function 每当导航视图（抽屉）被关闭之后调用此回调函数。...onDrawerStateChanged function 每当抽屉的状态变化时调用此回调函数。抽屉可以有3种状态： idle（空闲），表示现在导航条上没有任何正在进行的交互。...dragging（拖拽中），表示用户正在与导航条进行交互。 settling（停靠中），表示用户刚刚结束与导航条的交互，导航条正在结束打开或者关闭的动画。...--save 安装好后再package.json中可以看到如下配置： ?

6.6K40

android侧滑菜单控件DrawerLayout使用方法详解

使用步骤： 创建一个DrawerLayout 为了添加导航抽屉，你需要在你的布局界面中声明一个DrawerLayout对象作为布局的根节点。...同时在DrawerLayout内部添加两个view: 添加一个View，它包含应用的主内容（当抽屉隐藏时你的主要布局）； 添加另一个View它包含了导航抽屉； 如下面例子所示：该布局使用了DrawerLayout...它包含了两个子节点：一个FrameLayout它包含了主要内容（在运行时将会被Fragment替换） 和 一个ListView作为导航抽屉,上面titlebar 上图标，负责打开、关闭抽屉； <?...为了保证用户无论怎样都能看到主内容的一部分，导航抽屉的宽度不能超过320dp 初始化Drawer List 在你的Activity中，要做的第一件事是初始化导航抽屉的列表项。...具体该怎么做根据你APP的内容来定，但是导航抽屉通常包含一个Listview，所以还需要一个相匹配的Adapter（比如 ArrayAdapter 或者 SimpleCursorAdapter） 下面的例子

2.2K10

Material Design — App bars: bottomApp bars: bottom

位置 Bottom app bars 根据 FAB 的存在及其在 bar 中的位置具有三种不同的布局。 这些布局决定了可以包含在该 bar 中的操作的数量。 1、FAB 在中间 ?...底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开，并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...Drawer 在 bottom app bar 前面打开，并显示 top app bar 以在达到完整高度时关闭抽屉。...---- 位置 导航 Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer，但该 bar 本身不包含任何导航操作（例如向上导航至主屏幕或一个关闭图标...App 导航应放置在另一个组件中，例如 top app bar 或嵌入在屏幕中。 ?

2.3K80

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

差不多翻译完iOS组建后，回来翻译MD～ Navigation drawer（抽屉式导航／汉堡导航） Material Design链接：Navigation drawer Navigation drawer...如果优先考虑进行帐户切换，则可以将帐户切换器放置在导航抽屉的 header 区域 ?...在这种情况下， top app bar 是该内容的更合适的地方。...Dismissible standard drawers 可用于内容优先（如照片库）的布局或用户不太可能经常切换目的地的 app，且应该使用可见的 navigation menu icon 来打开和关闭抽屉...·首先列出最有可能被用户频繁访问的项目 ·如果使用帐户切换器，请将其放在 drawer 的顶部 ---- 状态 Navigation drawer 中的目的地采用 list 项目的形式。

3.8K40

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

顾名思义，您以列表格式显示数据，当单击该列表中的项目时，它将打开一个显示更多详细信息的新屏幕。 尽管此模式称为列表和详细信息，但没有理由也不能将相同的逻辑应用于网格设计。...当您的应用程序中只有几个部分时，此模式很有用，因为它为用户提供了一种快速简便的方法来更改视图。 但是，如果要在选项卡中放入五个或更多项目，则应考虑将导航操作移到抽屉中。...根据Android的材料设计指南，选项卡也可以存在于屏幕底部，如Google+应用程序所示。 导航抽屉 导航抽屉是一个视图，可以从应用程序的侧面滑出，以便向用户显示选项列表。...这种设计模式在Android应用程序中经常使用，以提供一种方法来更改应用程序中的部分或执行不必绑定到任何屏幕的全局操作。...用户可以在几行项目之间移动，然后水平滚动以查看他们可用的内容。 当用户找到要查看的项目时，可以选择该项目以查看详细信息屏幕，该屏幕提供了该项目的操作列表。

2.6K20

iOS好用的第三方侧边栏控件——MMDrawerController

iOS好用的第三方侧边栏控件——MMDrawerController 一、引言         很多应用程序都采用了侧边栏这样的界面结构，MMDrawerController是一个轻量级的侧边栏抽屉控件...，其支持左侧抽屉和右侧抽屉，可以很好的支持导航控制器，并且支持开发者对手势和动画进行自定义。...点击导航栏时可以关闭侧边栏 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边栏...，drawerSide参数为要切换的侧边栏，animated设置是否有动画效果，completion会在切换完成后执行 //注意：如果在切换一个关着的侧边栏时，如果另一个侧边栏正在开启状态，则此方法不会有任何效果...时，开发者可以导入MMDrawerController+Subclass.h文件，这个文件中提供了许多控制器的监听方法供开发者重写，解析如下： //出现单击手势会回调的方法 如果要重写 必须调用父类的此方法

2.8K20

Flutter 可折叠边栏

一个可在Flutter应用中创建可折叠的侧边栏导航抽屉的 Flutter 插件。...Flutter使开发人员可以轻松使用导航抽屉，而无需其他人就无需编写大部分代码。 在本博客中，我们将探讨Flutter中 的**可折叠侧边栏。...利用Material Design的移动应用程序有两个必不可少的导航选择。这些导航是“选项卡和抽屉”。抽屉是选项卡的一种可选选择，因为有时移动应用程序没有足够的空间来帮助选项卡。 抽屉是不可见的侧屏。...它是一个向左滑动的菜单，在大多数情况下，它包含应用程序中的重要连接，并且在显示时拥有一半的屏幕。 该演示视频展示了如何在Flutter中创建可折叠的侧边栏。...当_fsbStatus等于FSBStatus.FSB_OPEN时，抽屉将关闭。否则，它们将打开。

6.2K50

《精通reactvue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件

一个抽屉(Drawer)组件会有如下需求点: 能控制抽屉是否可见 能手动配置抽屉的关闭按钮 能控制抽屉的打开方向 关闭抽屉时是否销毁里面的子元素(这个问题是工作中频繁遇到的问题) 指定 Drawer 挂载的...HTML 节点, 可以将抽屉挂载在任何元素上 点击蒙层可以控制是否允许关闭抽屉 能控制遮罩层的展示 能自定义抽屉弹出层样式 可以设置抽屉弹出层宽度 能控制弹出层层级 能控制抽屉弹出方向(上下左右) 点击关闭按钮时能提供回调供开发者进行相关操作...和setIsDesChild, 这个属性用来根据用户传入的destroyOnClose属性俩判断是否该更新这个state, 如果destroyOnClose为true,说明要更新,那么此时当用户点击关闭按钮的时候...主要用来控制抽屉组件的渲染位置,默认会渲染到body下, 为了提供更灵活的配置,我们需要让抽屉可以渲染到任何元素下,这样又怎么实现呢?...false, 那么就为最近的父元素, 他如果传一个dom元素,那么将挂载到该元素下,所以以上代码我们会分情况考虑,还有一点要注意,当抽屉打开时,我们要让父元素溢出隐藏,不让其滚动,所以我们在这里要设置一下

1.7K31

(一)开源C# WPF控件库《MaterialDesignInXAML》强力推荐

导航目录： 首页 支持主题风格切换 按钮 输入验证框 标签 卡片 图标 分组框 进度条 对话框 抽屉 简单提示 1、首页 从首页卡片布局就觉得很爽有没有？...有相关项目界面需求时，使用这种方式展示数据很直观。 ? 首页 2、支持主题风格切换 该控件库配有数十种颜色风格，满足大部分配色要求。 ?...主题配色 3、按钮 界面开发中，交互式按钮用的比较多了，看下图，圆形按钮、图标按钮、按钮进度、按钮文字提示等等，Web中常见的效果WPF中也可以简单使用了。 ?...该控件库实现了较多的验证器，可直接使用，代码使用简单，且界面提示很友好，类似手机端输入、错误提示。 ?...抽屉 12、简单提示 最后一个比较有用的是提示信息，这种方式不用弹框（免得用户点击关闭，即时加定时器自动关闭也不是很友好），可用于提示性的信息，看一眼即可这种。 ?

4.1K10

iOS第三方类库IIViewDeck使用方法

项目需要用到左侧右侧各有一个抽屉视图，而这个类库可以极其简单的实现这个功能，不单单是左右各一个，它可以随意设置上下左右的抽屉视图，简直是360度想怎么抽怎么抽，这里记录一下使用方法。...就像QQ、知乎之类的效果一样，也很简单，为了方便，这里我们将中间视图包装成Nav导航视图，然后以换出左视图为例，在导航栏上左侧添加一个按钮，在按钮响应中实现唤出左侧视图： //.h文件 @property...现在可以通过滑动开启、关闭左右视图，那还有没有别的方法呢？可不可以在打开左右视图后，随便点击一下中间视图部分就可以回来呢？这是很常见的用户习惯。...还有，既然上面实现了再次点击按钮返回中间界面，说明中间界面的控件是可以响应的，那用户不小心点击到了不该点的怎么办，可不可以在打开左右视图后，禁止中间界面控件的响应呢？当然是可以的。...好像还漏了一个事情，从上面的图可以看出，左边和右边视图出现时占据屏幕的宽度是不一样的，在实际的项目中，往往也是根据需要占据不同的宽度，那么怎么设置呢？

60820

开源C# WPF控件库《MaterialDesignInXAML》强力推荐

导航目录： 首页 支持主题风格切换 按钮 输入验证框 标签 卡片 图标 分组框 进度条 对话框 抽屉 简单提示 1、首页 从首页卡片布局就觉得很爽有没有？...有相关项目界面需求时，使用这种方式展示数据很直观。 首页 2、支持主题风格切换 该控件库配有数十种颜色风格，满足大部分配色要求。...主题配色 3、按钮 界面开发中，交互式按钮用的比较多了，看下图，圆形按钮、图标按钮、按钮进度、按钮文字提示等等，Web中常见的效果WPF中也可以简单使用了。...该控件库实现了较多的验证器，可直接使用，代码使用简单，且界面提示很友好，类似手机端输入、错误提示。...抽屉 12、简单提示 最后一个比较有用的是提示信息，这种方式不用弹框（免得用户点击关闭，即时加定时器自动关闭也不是很友好），可用于提示性的信息，看一眼即可这种。

3.5K30

VUE-项目结构

3.项目结构 开始编码前，我们先了解下项目的结构。...最终结论：一切路由后的内容都将通过App.vue在index.html中显示。...App.vue的锚点位置 --> main.js使用了App.vue组件，并把该组件渲染在index.html文件中（id为“app”的div中） 3.3.页面布局 接下来我们一起看下页面布局。...包含左，上，中三部分： 里面使用了Vuetify中的2个组件和一个布局元素： v-navigation-drawer ：导航抽屉，主要用于容纳应用程序中的页面的导航链接。...v-toolbar：工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作，动态选择是否打开导航抽屉，实现可伸缩的侧边栏。 v-content：并不是一个组件，而是标记页面布局的元素。

1.9K20

Android Q 手势导航背后的故事

简而言之，采用这款新系统导航模式后，用户无需借助任何虚拟按键，只要滑动手势便能完成多种操作，包括: 返回上一级 (边缘侧滑)，返回主屏 (从底部向上滑动)和启动设备助手 (从左下角或右下角斜向滑动)。...Android 进军该领域后，团队也一直在努力挖掘手势导航的潜在价值，希望为用户带来更多裨益: 手势导航速度更快，使用起来更加自然，也更符合人体工程学 相较于虚拟导航按键，手势导航的意向性更高 (在按键导航的情景下...应用抽屉和其它侧滑操作 经过多番权衡与谨慎考量，我们最终决定将侧滑设为返回操作，但是在此过程中，尤其是在降低手势对应用的影响方面，我们作出了许多艰难的取舍。...在定性研究中，我们发现经过最初 1 到 3 天的磨合期，用户逐渐熟悉操作后，便可以顺利区分这两种手势。而且一旦适应后，大多数用户反而不想切换回三键导航 (尽管设备依旧提供这个选项)。...在 Android Q 模式下，返回手势在最初 3 天的使用频率较低，但过了这段时间之后，用户每天进行返回操作的次数将与三键导航及 Android P 导航中的次数持平。 开发者该如何应对？

2.1K50
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券