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

6详解AppBar小部件

示例包括返回一页导航箭头或打开抽屉菜单图标。 当上一条路线可用时,导航箭头会自动出现。...当我们将 添加Drawer到Scaffold ,会分配一个菜单图标leading来打开抽屉。...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码将 AppBar 背景颜色更改为深橙色。500添加以访问颜色特定阴影,900即最暗和最亮50。...布局和添加小部件 如何为 AppBar 图标、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了!...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar,当 SliverAppBar

16.3K10

CSS编写规范

,我司也有做得好地方——能用CSS布局就不用js: 便于阅读和交接 不依赖于js,降低制作及修改该布局所要求技术基础 有效避免使用js对其进行操作产生不必要冲突 3、CSS规范化之后,有诸多好处...相关原则有: 1、常用控件、表格、布局和页面做出一套或者多套模板 单选、复选框、按钮、轮播图一张/下一张按钮等,应该根据不同场合提前做好一套或者数套模板,每次使用这些控件应该在这些模板基础上进行相应更改...,更改大小、颜色等。...6、CSS布局不能用js: 便于阅读和交接,不依赖于js,降低制作及修改该布局所要求技术基础,有效避免使用js对其进行操作产生不必要冲突。...右导航 rightsidebar 主导航 mainnav 菜单 menu 子导航 subnav 子菜单 submenu 顶导航 topnav 标题 title 边导航 sidebar 摘要 summary

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

fullPage.js全屏滚动插件

如果你要制作一个全屏网页,使用这个插件在合适不过,QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 <link rel="stylesheet" type="text...设置<em>背景</em><em>颜色</em> anchors (array)定义锚链接 scrollingSpeed (int) 设置<em>滚动</em>速度,单位为毫秒 easing (striing)<em>滚动</em>动画方式 menu (true/false...) 绑定<em>菜单</em>,设定<em>的</em>相关属性与 anchors <em>的</em>值对应后,<em>菜单</em>可以控制<em>滚动</em> navigation (true/false)是否显示项目<em>导航</em> navigationPosition (string)...(string) 左右滑块<em>的</em>箭头<em>的</em><em>背景</em><em>颜色</em> loopBottom (true/false)<em>滚动</em>到最底部后是否滚回顶部 loopTop (true/false)<em>滚动</em>到最顶部后是否滚底部 loopHorizontal...navigationPosition:'right', //<em>导航</em>显示右边 controlArrowColor:'red',//左右滑块<em>背景</em><em>颜色</em> }); });

14.8K20

Axure实战06:创建一个AppleSymbol图标库网站

为了让侧边导航栏放在左边,我们需要固定侧边导航动态面板。 我们在样式工具栏中设置“固定到浏览器”,设置水平固定为“左侧”,垂直固定为“顶部”。 接下来完成里面的内容。...我们为每一个菜单都设置选中时候加背景颜色,只需要把所有的导航菜单结合在一个选项组中,即可实现单选互斥选中效果。 选中全部导航菜单,右键选择“选项组”。 给选项组命名为“导航菜单”。...示例:当我们点击侧边导航导航菜单,内容区域“内联框架”应该展示“导航菜单页面。...我们点击“页面”工具栏,打开“导航菜单”页面,设置页面的背景颜色为#F0F2F5。 拖入一个“矩形1”组件,命名为”name"。...设置大小为150*150,填充颜色为白色#FFFFFF,线段为0,圆角为8,边距(设置里面文字放位置)设置为左右10,100,下2。

2.6K20

深入理解bootstrap

一、入门准备 二、整体架构 A.整体架构 1.CSS12栅格系统:以规则网格阵列来指导和规范网页中版面布已有以及信息分布 2.基础布局组件,排版、代码、表格、按扭、表单等,可以随意应用在任何元素....pre-scrollable可以控制最大高度为340px,并滚动 D.表格 1.基础样式:.table 2.隔行加背景色样式:.table-striped 3.带边框单元格:.table-bordered...navbar样式,其次顶级ul块要应用.nav和.navbar-nav样式 3.使用规则: 菜单样式和菜单项保持一致 被单击链接或者按扭需要应用data-toggle="dropdown" 4.js...用法:$('#id').dropdown();,也包含事件订阅等功能,与modal类似 D.滚动侦测 1.滚动侦测(ScrollSpy)插件是根据滚动位置自动更新导航条中相应导航项 2.用法: 设置滚动容器...样式元素,并且在其内部有li元素,li内鈊a元素才是可以侦测高亮菜单链接,即符合.nav li > a这种选择符条件 3.js用法:$('滚动侦测容器选择符').scrollspy({target

3.4K60

在React Native中构建启动屏

将内容模式设置为“aspect fit”,如下所示: 更改iOS启动屏幕颜色 你可能会问下一个问题是“我如何在 React Native 中更改启动屏幕背景颜色?”...为了在 iOS 中为启动屏幕强制使用一致背景滚动背景设置位置并从下拉菜单中选择 Custom。在弹出窗口中,选择启动屏幕期望颜色。...更改Android启动屏幕颜色更改Android应用启动屏幕背景颜色,请在values文件夹中创建一个名为 colors.xml 文件,并复制下面的代码: /* app/src/main/res...使用 Expo,我们可以以简化和直接方式做到这一点,因为 Expo 允许我们在 app.json 文件中配置我们启动屏幕和图片。 我们将使用上述 App.js 和 Login.js 文件。...启动画面有助于强化应用程序身份,使其容易被用户识别,从而提高品牌建设。 通常,某些配置和资源(字体和检查更新)会在应用准备就绪立即实施。

33410

flutter 起步

一样,但含有一个context参数用于做本地化11. color该颜色为Android中程序切换中应用图标背景颜色,当应用图标背景为透明时12. theme(WidgetsApp不支持)应用程序主题...backgroundColor - 内容背景颜色,默认使用是 ThemeData.scaffoldBackgroundColor 值。...backgroundColor - 内容背景颜色,默认使用是 ThemeData.scaffoldBackgroundColor 值。...actions → List - 一个 Widget 列表,代表 Toolbar 中所显示菜单,对于常用菜单,通常使用 IconButton 来表示;对于不常用菜单通常使用 PopupMenuButton...toolbarOpacity → double1.BottomNavigationBarType.fixed:(代表tab固定不变,也是默认格式)(1).底部tab数: 不超过4个(2).导航背景色,

4.4K20

Js如何实现当网页超过一屏导航菜单始终置顶-吸顶盒效果

前言 我们平时在逛一些电商网站,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部 这是为了方便用户查看商品各类信息或提交订单购物 也就是吸顶盒效果,那这个效果是怎么实现...原生Js 如下是原生js // 初始化函数 function init() { // 获取顶部元素DOM var wrap = document.getElementById("wrap...把顶部导航菜单设置固定 if(scrollTop > 150) { wrap.className = "fix-top"; // 固定顶部样式...,就不得不使用csspositon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容浏览没有滑出导航菜单可见范围,是没有必要把导航菜单置顶,因此,在代码中就需要监听网页滚动跳滑动事件...当超过一定范围以后,才有必要为导航菜单设置固定position样式 其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动到一定范围,就改变背景色,也是一种解决办法

3.3K50

小程序bug

记录下本人在写小程序时遇到一系列难题与bug 菜单隐藏消失动画效果(主要用了animation、transformX控制left值),在设置wx-charts图表在菜单显示隐藏,最后发现在安卓正常运行...可手动删除一些无用数据再setData 3. wx-canvas线状图中多条线展示,点击显示tooltip后苹果手机会出现无法滚动现象。...开发工具不用勾选ES6转ES5,mpvue框架已经自动转换了。只用勾选上传代码时样式自动补全以及上传代码自动压缩 7....小程序cover-view组件有bug,比如本项目中要实现导航菜单遮住所在页面中多张图表需放在最后一张图表组件标签内部, <chart...通过设定固定宽度解决 11. mpvue-echarts饼状图pie在小程序中点击圆环后中间空白部分会随机涂满颜色 12.

84820

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

: true, // //设置每个section顶部padding,当我们要设置一个固定在顶部菜单导航、元素等使用 // paddingTop: "100px", // //...设置每个section底部padding,当我们要设置一个固定在底部菜单导航、元素等使用 // paddingBottom: "100px", // //固定元素,为jquery...navigationPosition: right, // //鼠标移动到小圆点显示出提示信息 // navigationTooltips: ["第一页","第二页","第三页...: true, // //设置每个section顶部padding,当我们要设置一个固定在顶部菜单导航、元素等使用 // paddingTop: "100px", // //...设置每个section底部padding,当我们要设置一个固定在底部菜单导航、元素等使用 // paddingBottom: "100px", // //固定元素,为jquery

11.7K30

最新iOS设计规范五|3大界面要素:控件(Controls)

将除了冠词、并列连词和四个或更少字母介词之外,每个单词首字母都应大写。 按钮标题尽量简短。太长文本可能会使您界面拥挤,并可能在较小屏幕被截断。 只在必要添加边框或背景颜色。...列表和表单高度可以调整,并且表单可以包含索引,这可以更快地定位列表一部分。 使用可预测和逻辑排序值。当可滚动列表固定时,选择器中许多值可能会隐藏。...为了与你设计风格融合并且更准确地传达设计意图,滑块外观是可以更改,包括轨道颜色、“拇指”图标以及左右位置图标。 不要使用滑块来调节音量。如果你APP需要提供音量控制,请使用音量视图。...根据设计风格,自定义开关在其关闭和打开背景颜色,可以使开关在APP中体验更好。 仅在列表中使用开关。开关用在列表中,例如可以打开和关闭设置列表。...若有“清除”按钮,点击它便会立即清空文本字段内容,避免一直点击删除。 适当时候,使用安全文本字段。若需要输入是敏感数据(密码),请始终使用安全提示类文本字段。

8.5K30

「首席架构师推荐」一系列很棒浏览器端JavaScript库资源

chroma.js - 用于各种颜色操作JavaScript库。 color - JavaScript颜色转换和操作库。 colors - 网络颜色更智能默认值。...unslider - 最简单jQuery滑块。 sly - 用于单向滚动JavaScript库,具有基于项目的导航支持。 vegas - 一个jQuery插件,可以为您网页添加漂亮全屏背景。...滚动 scrollMonitor - 滚动监视元素简单快速API。 eadroom - 给你页面一些空间。隐藏您标题,直到您需要它。...simpleParallax - 简单而小巧JavaScript库,可在任何图像添加视差动画 菜单 jQuery-menu-aim - 用户光标瞄准特定下拉菜单触发事件jQuery插件。...full-page-intro-and-navigation - 带有全宽背景图像介绍页面,大胆动画菜单以及导航背后类似iOS模糊效果。 Fluid-Squares- 方形单元流体网格。

6.6K21

「沙里淘金」精选浏览器端JavaScript库资源推荐

chroma.js - 用于各种颜色操作JavaScript库。 color - JavaScript颜色转换和操作库。 colors - 网络颜色更智能默认值。...unslider - 最简单jQuery滑块。 sly - 用于单向滚动JavaScript库,具有基于项目的导航支持。 vegas - 一个jQuery插件,可以为您网页添加漂亮全屏背景。...滚动 scrollMonitor - 滚动监视元素简单快速API。 eadroom - 给你页面一些空间。隐藏您标题,直到您需要它。...simpleParallax - 简单而小巧JavaScript库,可在任何图像添加视差动画 菜单 jQuery-menu-aim - 用户光标瞄准特定下拉菜单触发事件jQuery插件。...full-page-intro-and-navigation - 带有全宽背景图像介绍页面,大胆动画菜单以及导航背后类似iOS模糊效果。 Fluid-Squares- 方形单元流体网格。

5.8K20

如何使用 CSS 设置和自定义水平和垂直滚动

在本节中,我们将按照以下步骤创建一个可滚动侧边栏导航:a)创建带有导航项目的导航栏b)将导航栏样式设置为侧边栏c)将侧边栏位置设置为固定d)使用滚动条管理项目的溢出a)....下面的截图显示了我们即将创建侧边栏:侧边栏要创建上面的侧边栏,我们将在CSS中进行以下更改:将导航显示更改为flex,并将方向设置为column为侧边栏设置背景颜色导航链接添加底部边框增加导航链接字体大小和字体粗细为侧边栏设置固定宽度增加...让我们继续下一节,我们将讨论如何设置滚动样式。自定义滚动条样式您希望为网站滚动条设置样式原因之一是为了在整个网页实现颜色协调。您可能希望将在网站上使用颜色数量保持在一组最小值。...在样式滚动,我们可以为以下属性设置所需值:width - 垂直滚动厚度height - 水平滚动厚度scrollbar-thumb背景颜色 - 随着滚动而来回移动对象scrollbar-track...在本练习中,我们将重用以前样式,但将使用高度来设置滚动厚度,如下所述:将scrollbar-track背景颜色设置为蓝色将scrollbar-thumb背景颜色设置为绿色将滚动高度(厚度)

76600

前端成神之路-CSS高级技巧

1.1 display 显示(重点) 实际开发场景: 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象,不保留位置 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 visibility 隐藏对象,保留位置...CSS用户界面样式 所谓界面样式, 就是更改一些用户操作样式,以便提高更好用户体验。 更改用户鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等。...图所示为网页请求原理图,当用户访问一个网站,需要向服务器发送请求,网页每张图像都要经过一次请求才能展现给用户。...滑动门出现背景 制作网页,为了美观,常常需要为网页元素设置特殊形状背景,比如微信导航栏,有凸起和凹下去感觉,最大问题是里面的字数不一样多,咋办? ?

6.8K30

CSS——06扩展:高级

应用 能写出最常见鼠标样式 能使用精灵图技术,这个技术比较重要 能用滑动门做导航栏案例,这个技术比较重要 1....1.1 display 显示(重点) 实际开发场景: 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象,不保留位置 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 visibility 隐藏对象,保留位置...CSS用户界面样式 所谓界面样式, 就是更改一些用户操作样式,以便提高更好用户体验。 更改用户鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等。...滑动门 先来体会下现实中滑动门,或者你可以叫做推拉门: 滑动门出现背景 制作网页,为了美观,常常需要为网页元素设置特殊形状背景,比如微信导航栏,有凸起和凹下去感觉,最大问题是里面的字数不一样多

4.7K40

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

当用户更改了UI日期或时间,它就会被调用。第一个也是唯一一个参数是一个Date对象,代表了新日期和时间。    ...onTintColor字符串型         当开关打开时候背景颜色。     onValueChange函数         当用户切换开关,调用回调函数。     ...thumbTintColor字符串型         开关按钮背景颜色。     tintColor字符串型         当开关关闭后背景颜色。     ...工具栏可以显示一个标志,导航图标(汉堡包菜单),标题 和副标题和操作列表。标题和子标题被扩展这样以来标志和导航图标显示在左边,标题和副标题在中间并且操作 在右边。         ...底衬出现是因为向视图层次结构添加了一个视图,如果使用不正确的话,这有时候会导致不必要认为视觉效果,例如,如果包装了视图背景颜色不是很明确设置成一个不透明颜色

43640

iOS 9人机界面指南(四):UI元素() - 腾讯ISUX

以下有一些方法可以让滚动内容能正常显示在状态 栏后面: 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态栏背景,同时能确保内容视图不会出现在状态栏后面。...想要保证这样图形始终固定在状态栏后面,你可以用视图控制器(view controller)来让它固定滚动内容一层,又或者可以用滚动视图(scrolling view)来保证图形固定在屏幕顶部。...让内容固定导航栏区域外显示(这个区域由应用statusBarFrame属性来定义)。如果你确定要这样做的话,请给导航栏区域添加固定、与屏幕背景色相同背景色。...可以填充颜色(使用tintColor来定义导航栏中图标与文字颜色使用 barTintColor来填充导航背景色) API注释 导航栏包含于导航控制器(一个管理显示自定义视图层级结构程序对象)中。...举个例子,不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向,最好不要改变不同屏导航背景图片、颜色和透明度。 确保你自定义返回按钮外观与操作仍然像一个返回按钮。

10.1K51

H5C3第四节

360浏览器 fullpage使用 fullPage.js 是一个基于 jQuery 插件,它能够很方便、很轻松制作出全屏网站。...设置每一个section背景颜色 verticalCentered 设定每一个section内容是否垂直居中,默认true, scrollingSpeed 设置滚动速度,默认700毫秒 easing...设置动画方式,一般不修改, 默认是easeInOutCubic, 如果想要修改此参数,需要引入jquery.easing.js css3 是否使用css3 transform来实现滚动效果,默认true...paddingTop/paddingBottom 给每一个section设置一个paddingTop或者paddingBottom,默认值为0,如果需要给页面设置一个固定定位头部菜单或者底部菜单时候...keyboardScrolling 是否可以使用键盘方向键导航,默认true navigation 是否显示导航,默认为false,设置为true,会显示小圆点,作为导航 navigationPositon

5.3K30
领券