所有抽屉都由material-drawer元件实例化。这些抽屉的实现方式不同,为每种抽屉提供最佳性能。...对于抽屉外部的主要内容,将其包装在material-content元件中或具有material-content样式类的元素中。 固定性抽屉 固定性抽屉是不能关闭的抽屉。 它们完全由CSS提供。...最后,将打开/关闭抽屉动作连系到抽屉。使用引用变量语法最容易完成。持久抽屉指令将其自身导出为抽屉,这允许其它操作可以轻松使用它。toggle()可用于打开/关闭抽屉。...-- Content goes here --> 在另一侧显示抽屉 所有抽屉都有一个HTML属性end,它将抽屉定位在页面的另一侧,正常(LTR的右侧,RTL的左侧...当可堆叠抽屉打开时,任何现有的可堆叠抽屉将被展开以填充背景中的屏幕。 适用于延期内容。 Inputs: visible bool 抽屉的可见性。
导语 侧滑控件,以前大家用的可能是三方的SlidingMenu控件,最近在看谷歌源码项目,意外的看到一个 DrawerLayout 控件。上网一查,原来这个控件是官方给我们提供的一个侧滑菜单控件。.../DrawerLayout.html DrawerLayout 类的结构图如下: ?...官方中文简介大概如下: DrawerLayout作为窗口内容的顶层容器,允许从窗口的一个或两个垂直边缘拉出交互式“抽屉”视图。...抽屉定位和布局使用android:layout_gravity 子视图对应的属性进行控制,对应于您希望抽屉从哪个侧面出现:左侧或右侧(或支持布局方向的平台版本上的开始/结束)。...请注意,您只能窗口的每个垂直边缘的一个抽屉视图。如果您的布局在窗口的每个垂直边缘配置多个抽屉视图,则会在运行时抛出异常。
由于浮动元素脱离了文档流,因此,容器 wrapper 就相当于一个空标签,其高度就会塌陷为零,使得浮动元素溢出到容器外面。...当容器的高度为 auto,且只包含浮动元素时,如果浮动元素的高度不相同,而剩余空间足够容纳后面的元素时,后面的元素就会上跳到剩余的空间。...,主栏向左浮动,侧栏向右浮动,并且侧栏的高度小于主栏的高度。...页脚便会上跳到侧栏的剩余空间。 很显然,无论是高度塌陷,还是影响兄弟元素的位置,都不是使用浮动的目的。浮动只是为了改变元素的布局,却造成了不必要的影响。因此,需要清除浮动带来的影响。...使用 clear属性 CSS中的 clear属性,用来规定在元素的哪一侧不允许出现浮动元素,可选值有 none | left | right | both,默认值为 none,表示不清除,左右两侧均允许出现浮动元素
程序IT圈 只提供有用的编程技术,关注即可习得新技能 在平时开发中,带有抽屉效果的App,应该还是挺多,今天就来看看这个效果是如何实现的,我们用DrawerLayout控件来实现!.../DrawerLayout.html DrawerLayout 类的结构图如下: ?...官方中文简介大概如下: DrawerLayout作为窗口内容的顶层容器,允许从窗口的一个或两个垂直边缘拉出交互式“抽屉”视图。...抽屉定位和布局使用android:layout_gravity 子视图对应的属性进行控制,对应于您希望抽屉从哪个侧面出现:左侧或右侧(或支持布局方向的平台版本上的开始/结束)。...请注意,您只能窗口的每个垂直边缘的一个抽屉视图。如果您的布局在窗口的每个垂直边缘配置多个抽屉视图,则会在运行时抛出异常。
谷歌官方推出了一种侧滑菜单的实现方式(抽屉效果),即 DrawerLayout,这个类是在Support Library里的,需要加上android-support-v4.jar这个包。...使用注意点 1、DrawerLayout的第一个子元素必须是默认内容,即抽屉没有打开时显示的布局(如FrameLayout),后面紧跟的子元素是抽屉内容,即抽屉布局(如ListView)。...2、抽屉菜单的摆放和布局通过android:layout_gravity属性来控制,可选值为left、right或start、end。 3、抽屉菜单的宽度为 dp 单位而高度和父View一样。...抽屉菜单的宽度应该不超过320dp,这样用户可以在菜单打开的时候看到部分内容界面。...4、打开抽屉: DrawerLayout .openDrawer(); 关闭抽屉:DrawerLayout.closeDrawer( ); 一个典型的布局实例: <android.support.v4
Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定...unlocked (默认值),意思是此时抽屉可以响应打开和关闭的手势操作。...drawerPosition left 和right 设置抽屉导航菜单从哪一侧进行滑动出来,根据共有两个枚举值分别 为:DrawerLayoutAndroid.positions.Left和DrawerLayoutAndroid.positions.Right...settling(停靠中),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。
2、嵌入:FAB处于与 bottom app bar 相同的高度,并且 bar 的形状转换为让 FAB 嵌入在 bottom app bar 中。...例如,屏幕可以根据最适合屏幕内容显示更多或更少的操作。 ? 为展示主要操作,此 bottom app bar 在其主屏幕上使用 FAB 居中的布局。...---- 海拔 Bottom app bar 的海拔高度为8dp。 当与 FAB 配合时,FAB 的静止和凸起高度应该增加,以便在 bottom app bar 上方保持可见。 ?...底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...Drawer 在 bottom app bar 前面打开,并显示 top app bar 以在达到完整高度时关闭抽屉。
type style属性,是必须属性,用来规定样式表的MIME类型,唯一的值为:text/css。...type=blog/">我的主页 这样默认在原窗口打开。 target属性:在新窗口打开链接 我的主页 target="_blank"实现在新窗口打开链接。 ...id属性:书签作用 链接不仅可以跳到别的网页,还可以跳到本网页的某个部分。... height 属性,设定图像的高度,像素值,默认是原图像的高度。
使用的注意事项 主内容视图一定要是 DrawerLayout 的第一个子视图 主内容视图宽度和高度需要 match_parent 必须显示指定侧滑视图的 android:layout_gravity 属性...侧滑视图的宽度以dp为单位,不建议超过320dp(为了总能看到一些主内容视图) 设置侧滑事件:mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene...从左边滑出的抽屉视图(侧滑栏) 一个简单的从左边滑出侧滑栏的例子。 侧滑栏滑出后,后面的视图会有个阴影。 layout 文件 <?xml version="1.0" encoding="utf-8"?...现在侧边栏放的是RelativeLayout。 也可以放一个RecyclerView。 抽屉出来时推动页面 监听侧滑栏的滑动事件,使用ActionBarDrawerToggle。...Android零基础入门教程视频参考
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul...子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素,也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素....children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素 层级菜单 下面是最终的实现效果,如下: ?...使用ul>(li>a{水果}+(ul>li{苹果}*3))*5按Tab键,就可以快速生成需要的HTML代码。 那么下面就是编写样式了。 ?...> 注意:在写这个代码的过程中,发现如果a标签的href = "",这种情况下监听click方法是无法正常触发jquery的特效的,需要设置href=“#”,才可以正常使用jquery特效。
drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产物。...使用步骤: 创建一个DrawerLayout 为了添加导航抽屉,你需要在你的布局界面中声明一个DrawerLayout对象作为布局的根节点。...为了满足从右到左的约定,声明它的值为”start” 代替 “left”(因此这个抽屉将会在右面呈现当布局是RTL时) 在导航View声明时:宽度用dp为单位、高度匹配父View。...为了保证用户无论怎样都能看到主内容的一部分,导航抽屉的宽度不能超过320dp 初始化Drawer List 在你的Activity中,要做的第一件事是初始化导航抽屉的列表项。...你在onItemClick()方法里面做什么, 取决于你的app实现的结构. 在下面的例子中, 选择每一个Item都会在主要内容的布局中插入一个不同的Fragment.
基础知识 默认 TarBar Tabbar[1] 在 app.json 中配置,作用范围为 TabBar 页,常驻页面最底部,占据页面高度 50px,有 iPhone x 全面屏适配。...1 : -1} /> 动画调研 抽屉动画演示 在移动端 UI 中汉堡包菜单配合抽屉式弹出动画是很常见的交互动效之一。...抽屉式动画抽屉式动画要点为 页面容器内有菜单和页面主内容两个子容器 带回弹效果的交互动画会更有趣 https://codepen.io/andrejsharapov/pen/jJXEGq ?...通过对上面抽屉动画所对应页面布局进行分析,我们可以发现,TabBar 组件只能放在当前页面中,作为“主要页面内容”模块被缩小。 ?...TabBar 组件中“加号”中弹出,其中关键点为“同心圆布局”和“动画延迟”。
target: 表示链接的打开方式: _blank 新窗口 _parent 父窗口 ...a href="#a1">跳到a1处 五、*图片标签 img 在网页中插入一张图片 属性:src: 图片名及url地址 alt: 图片加载失败时的提示信息...enctype:提交类型 target: 在何处打开目标 URL。 name:属性为表单起个名字.HTML5不支持。用 id 代替。 ...在 HTML 5 中,type 属性有很多新的值。 ...*name 属性:定义名称,用于存储下拉值的 size:定义菜单中可见项目的数目,html5不支持 disabled 当该属性为 true 时,会禁用该菜单。
checkerboardRasterCacheImages bool 为true时,打开光栅缓存图像的棋盘格 checkerboardOffscreenLayers bool 为true时,打开棋盘格层...showSemanticsDebugger bool 为true时,打开Widget边框,显示布局边界 debugShowCheckedModeBanner bool 为true时,在debug模式下显示右上角的...)抽屉菜单 drawerScrimColor Color 打开侧滑菜单时遮盖在主要内容区的蒙层颜色 backgroundColor Color 内容的背景颜色。...drawerEdgeDragWidth double 水平滑动将要打开侧滑菜单的区域的宽度 extendBody bool 若为true且指定了bottomNavigationBar或者persistentFooterButtons...flexibleSpace显示在AppBar的下方,高度和AppBar高度一样,可以实现一些特殊的效果 [cf22fa2aav.png] 文档地址 示例 BottomAppBar BottomAppBar
DrawerLayout 作者:飞龙 DrawerLayout是android.support.v4中提供的控件,用于实现边栏和侧滑效果。...这里主布局是空的LinearLayout,菜单布局是ListView。为了使菜单布局宽度合适,我将其设置为360dp。...主内容区的布局代码必须放在侧滑菜单布局的前面, 因为 XML 元素按 z 序(层叠顺序)排列,并且抽屉式导航栏必须位于内容顶部。...操作 通过手动侧滑可以打开或关闭边栏,触摸主布局可以关闭边栏。...* 抽屉打开的时候,点击抽屉,drawer的状态就会变成STATE_DRAGGING,然后变成STATE_IDLE */ @Override public void onDrawerStateChanged
那么今天也在这里给大家介绍一下React-Native中的侧滑菜单DrawerLayoutAndroid和第三方框架react-native-side-menu。...导航视图一开始在屏幕上并不可见,不过可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。...有三种状态: unlocked (默认值),意味着此时抽屉可以响应打开和关闭的手势操作。 locked-closed,意味着此时抽屉将保持关闭,不可用手势打开。...onDrawerOpen function 每当导航视图(抽屉)被打开之后调用此回调函数。 onDrawerSlide function 每当导航视图(抽屉)产生交互的时候调用此回调函数。...dragging(拖拽中),表示用户正在与导航条进行交互。 settling(停靠中),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。
因此,我们的设计目标之一就是确保返回手势符合人体工程学,具备高度可靠性且直观易用,并且在安排开发工作时,适当地调低应用抽屉、最近使用等低频导航操作的优先等级,首要考虑返回手势的需求。...应用抽屉和其它侧滑操作 经过多番权衡与谨慎考量,我们最终决定将侧滑设为返回操作,但是在此过程中,尤其是在降低手势对应用的影响方面,我们作出了许多艰难的取舍。...比如说,我们发现 3% 到 7% 的用户 (具体比例因应用而异) 通过侧滑手势打开应用导航抽屉,其余用户则选择点击汉堡形菜单按钮来弹出抽屉。...改变用户的导航习惯并不是我们的目标,因此,我们尝试了许多方法来帮助用户区分抽屉手势和返回手势,不过结果并不乐观,用户试着通过侧滑触发返回操作,但是仍旧拖曳出了抽屉界面,致使用户对返回操作的信任度下降。...我们十分注重对开发者的支持,与此同时,我们也期望为您提供全方位帮助,让您在应用中顺利添加手势导航。
,我们在做导航的侧滑菜单会经常看到它,点击图标变成叉号菜单打开,然后再次点击叉号菜单关闭,恢复成三条横线。...DropCSS将HTML和CSS作为输入,仅返回使用的CSS作为输出。它的自定义HTML和CSS解析器针对99%的用例进行了高度优化,从而避免了处理格式错误的标记或样式表的开销。...在方框中拖动来创建 div 放置在网格内。 虽然这个项目可以为您提供一个基本的布局, 但是本项目不是对 CSS 网格功能的全面介绍。这只是一种快速使用 CSS Grid 网格布局功能的方法。.../Darkmode.js 花几秒钟你也能打造一款 白天/夜间 阅读模式的网站,这个插件使用 css mix-blend-mode 的特性为你的网站添加夜间模式。...该插件具有以下特点: 窗口小部件自动适应窗口大小 能够记住用户的选择 如果操作系统偏好设置为夜间黑暗深色主题的话,则自动显示为“夜间模式 ”(如果浏览器支持“ preferred-color-scheme
官网地址:https://github.com/march08/animated-burgers 一款汉堡动画变换(三条横线) 的CSS插件,说简单点就是三个横线的动画变换,我们在做导航的侧滑菜单会经常看到它...,点击图标变成叉号菜单打开,然后再次点击叉号菜单关闭,恢复成三条横线。...DropCSS将HTML和CSS作为输入,仅返回使用的CSS作为输出。它的自定义HTML和CSS解析器针对99%的用例进行了高度优化,从而避免了处理格式错误的标记或样式表的开销。...在方框中拖动来创建 div 放置在网格内。 虽然这个项目可以为您提供一个基本的布局, 但是本项目不是对 CSS 网格功能的全面介绍。这只是一种快速使用 CSS Grid 网格布局功能的方法。...该插件具有以下特点: 窗口小部件自动适应窗口大小 能够记住用户的选择 如果操作系统偏好设置为夜间黑暗深色主题的话,则自动显示为“夜间模式 ”(如果浏览器支持“ preferred-color-scheme
最大宽度 – max-height 最大高度 min-width 最小宽度 – min-height 最小高度 图片 CSS初始化 normalize.css: 移动端CSS初始化推荐使用normalize.css...Normalize.css:保护了有价值的默认值、修复了浏览器的bug、是模块化的 、拥有详细的文档 Normalize.css官网地址: http://necolas.github.io/normalize.css...,就是设备有多宽,布局视口就多宽 二倍图: 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比,1CSS像素=1物理像素 多倍图: 在标准viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题...属性 多倍图切图 cutterman: 图片 移动端主流方案: 单独制作移动端页面 (主流),通过判断设备,如果是移动设备打开,则跳到移动端页面 响应式兼容移动端 (其次),通过判断屏幕宽度来改变样式...设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式
领取专属 10元无门槛券
手把手带您无忧上云