首页
学习
活动
专区
圈层
工具
发布

Material Design — App bars: topApp bars: top

手机和平板电脑上标题的默认位置取决于平台。  ? 如果标题文本很长,请使用 prominent app bar 并将标题折叠为两行 ? ?...任何剩余的或次要的动作都应放置在 overflow menu 中(3) ---- 行为 滚动 滚动时,e top app bar 可保留原位,或以下列方式转换: ·向上滚动隐藏 top app bar...在滚动时,它们会增加海拔并让内容在它们后面滚动 ? 当向上滚动时,使用带有图像的 prominent top app bars 可以转换为正常的 top app bars。...当 top app bar 转换为 contextual action bar,会发生以下更改: ·Bar颜色改变 ·导航图标被关闭图标替换 ·Top app bar 标题文本转换为 contextual...Bar  当 top app bar 变换为 contextual action bar 时,bar 应更改颜色以指示状态更改。

3.1K60

Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

下面是CollapsingToolbarLayout的属性说明: app:contentScrim : 指定布局内部未展开时的背景颜色。...app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。 app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。...上述属性在代码中的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...setCollapsedTitleTextAppearance : 设置未展开时的标题文字字体。 setCollapsedTitleTextColor : 设置未展开时的标题文字颜色。...Toolbar的互动,还包括标题文字的样式渐变(文字大小、颜色、间距等等),连背景图片都可以实现折叠的渐变效果。

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

    CollapsingToolbarLayout使用

    CollapsingToolbarLayout 可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题...,直至高度缩为Toolbar的高度并成为Toolbar的背景色;向下滑动列表时,Header部分逐渐显示。...注意,没有设置这个属性时,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?...,使顶部视图展开时图片能够延伸到状态栏位置显示,如效果图中所示;contentScrim内容遮罩,上下滚动时图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色;通常这样设置:app:contentScrim...attr/colorPrimary",即显示为Toolbar颜色,应用的主题色;layout_collapseMode折叠模式,设置其他控件滚动时自身的交互行为,有两种取值:parallax,折叠视差效果

    3.1K60

    HTML之marquee(文字滚动)详解

    1️⃣  标签简介 是 HTML 中实现文字或图片滚动效果的标签特点:可以让文字或图片水平或垂直滚动仅适用于简单动画注意:该标签 已被 HTML5 弃用,现代网页推荐使用... downbehavior滚动行为scroll(默认) / slide / alternatescrollamount滚动速度,数值越大越快scrollamount="10"scrolldelay滚动延迟...(毫秒)scrolldelay="50"loop循环次数loop="3"(0 表示无限循环)bgcolor背景颜色bgcolor="#f0f0f0"height / width高度和宽度height="...垂直滚动<marquee direction="up" scrollamount="2" height="100">垂直向上滚动文字</marquee>3.3 往返滚动<marquee... + transform)JavaScript / jQuery 滚动效果CSS 滚动示例:<div class="scroll-text">这是CSS滚动文字</div><style

    44110

    【JSjQuery——功能实现】传送门(蓝桥杯真题-2458)【合集】

    本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码,最终实现该功能。...当页面滚动到顶部、中间或底部位置时,对应的侧边按钮(即,顶部、中间或底部按钮)添加激活样式(即 **.active-color**),其余按钮样式变为默认(即 **.default-color**)。...#lift:设置侧边栏的样式,包括宽度、高度、背景颜色、固定位置、居中显示和使用 Flexbox 布局。 #lift a:设置侧边栏链接的样式,包括宽度、高度、居中显示和去除下划线。....line:设置分隔线的样式。 .default-color 和 .active-color:分别设置链接的默认颜色和激活颜色。...toFunction 函数将页面滚动到指定的高度。 3. 页面滚动: 当用户滚动页面时,触发 $(window).scroll 事件。

    1.2K00

    fullPage.js全屏滚动插件

    }); 4.参数设置 传递对象形式 参数 说明 resize (true/false)字体是否随着窗口缩放而缩放 slidesColor 设置背景颜色 anchors (array)定义锚链接...是否显示左右滑块的项目导航 slidesNavPosition (string)左右滑块的项目导航的位置,可选 top 或 bottom controlArrowColor (string) 左右滑块的箭头的背景颜色...autoScrolling (true/false) 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条 scrollOverflow (true/false)内容超过满屏后是否显示滚动条...loopBottom 不兼容 5.常用方法 -- -- moveSectionUp() 向上滚动 moveSectionDown() 向下滚动 moveTo(section, slide) 滚动到...moveSlideRight() slide 向右滚动 moveSlideLeft() slide 向左滚动 setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动 setAllowScrolling

    18.4K20

    06-移动端开发教程-fullpage框架

    窗口缩放时自动调整。 可设置滚动宽度,背景颜色,滚动速度,循环选项,回调,文本对齐方式等。...2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件,需要依赖jQuery,要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...文件,jQuery,如果设置了options中css3: false*,如果你用除了jQuery的默认linear 和swing缓动的效果之外的缓动效果的话,需要添加 jQuery UI library...函数 无 设置背景颜色 anchors 数组 无 定义锚链接 scrollingSpeed 整数 700 滚动速度,单位为毫秒 easing 字符串 easeInQuart 滚动动画方式 menu 布尔值...字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal

    6.4K90

    06-移动端开发教程-fullpage框架

    窗口缩放时自动调整。 可设置滚动宽度,背景颜色,滚动速度,循环选项,回调,文本对齐方式等。...2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件,需要依赖jQuery,要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...文件,jQuery,如果设置了options中css3: false*,如果你用除了jQuery的默认linear 和swing缓动的效果之外的缓动效果的话,需要添加 jQuery UI library...函数 无 设置背景颜色 anchors 数组 无 定义锚链接 scrollingSpeed 整数 700 滚动速度,单位为毫秒 easing 字符串 easeInQuart 滚动动画方式 menu 布尔值...字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal

    6.3K50

    前端中那些让你头疼的英文单词

    ---- head 头部 body 身体 h 这是标题,比如一级标题h1,h1~h6 p 段落 div 区块(最常用的标签之一,里面可以放任何内容) span 存放的是特殊效果的文字和小图片 img 图片...(alt里面放置的是网络不好时的替换文本,src填写的是路径,title填写的是提示文本) a 超链接(herf内容是跳转地址,当然此处有一个工作中常用的功能,那便是跳转网站新建一个标签,不用占本网站的位置...,hidden溢出隐藏,auto溢出滚动(超出内容才加滚动条),scroll溢出滚动(无论内容是否溢出都会加滚动条)) display 转变格式(inline行内,inline-block行内块,block...鼠标滑过 onmouseout 鼠标离开 上面的内容如果哪一个单词忘记了具体的用法,可以点击链接查看具体内容:JavaScript入门 ---- for和while都是循环时使用 array 数组 push...children 子级的 addClass 添加类 removeClass删除类 hover 鼠标滑过 eq 找下标 animate 自定义动画函数 slideUp 隐藏(向上滑,就是把东西收起来,就隐藏了

    2.8K20

    Web前端上万字的知识总结

    属性:     (1)  dir: 文本的显示方向,默认是从左向右     (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文     (3) version:定义创作文档的HTML...  属性:     (1)、text: 页面文字的颜色     (2)、bgcolor: 页面背景的颜色(用十六进制的颜色表示)     (3)、background: 页面的背景图像(所需的是图片的...URL)     (4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动条的滚动而动)     (5)、link: 页面默认的链接颜色     ...背景颜色         background-image 背景图片          background-repeat 背景图片如何重复     Background-position 设置背景图片水平和垂直的位置...       background 组合设置背景属性   属性值:     Background-repeat:repeat 平铺     repeat-x  X方向上平铺  repeat-y Y方向上平铺

    4.7K100

    web前端基础知识总结

    属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2、背景图像(所需的是图片的URL) (4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动条的滚动而动) (5)、link: 页面默认的链接颜色...的属性值都是text/css,javascript使用的样式表都是text/javascript Media的属性值:screen 计算机显示屏(默认)  tv(电视) projection 剧场  ... 颜色  background-color 背景颜色 background-image 背景图片 background-repeat 背景图片如何重复 Background-position 设置背景图片水平和垂直的位置...background 组合设置背景属性 属性值: Background-repeat:repeat 平铺 repeat-x  X方向上平铺 repeat-y Y方向上平铺  no-repeat不平铺

    4.9K60

    niRvana · 轻拟物主题4.8完美版

    段落文本标记: Gutenberg默认不支持段落内部分文本设置色彩。本主题进行了扩展,可以设置文本背景、颜色等。就像这样的标记 还有更多方便的小工具等你来尝试!...逻辑:打开页面算1次,若从来没有统计过,那么用点赞数据来显示 5、修复:网络不通畅时,重复多次点赞的问题 6、更改:非登录状态时,请求不再带入nonce信息(缓存未登录状态页面不再报错) 7、更改:使用新的信息通知功能及通知样式...8、修复:分类页随机滚动头部文章时,默认有20个,影响体验,现改为5个 9、更新:内置的FontAwesome字体到5.8.2版本 v1.5.6 1、优化:相关文章默认看不到文章标题的问题。...2、1.4.4的BUG修复 v1.4.4 1、 修复代码高亮显示在某些情况下无法横向滚动的BUG 2、修复小标题遮挡其他内容的BUG v1.4.3 1、顶部图片跨域不再空白,而是显示一个深蓝色的默认背景...图片无法生成封面的问题 3、文章内容较短而边栏很长时,在某些尺寸屏幕上出现的滚动问题 4、部分样式问题 5、部分插件无法正常使用jQuery的问题 6、引入Autoprefixer解决旧版浏览器前缀的问题

    10K10

    BootStrap基础知识

    = 24px) h5 / 5级标题(1.25rem = 20px) h6 / 6级标题(1rem = 16px) / .display-1 使用在h1-h6标签使标题字体更大更粗 / .display...-2 使用在h1-h6标签使标题字体更大更粗 / .display-3 使用在h1-h6标签使标题字体更大更粗 / .display-4 使用在h1-h6标签使标题字体更大更粗 small / 创建字体更小颜色更淡的字体...(白色背景上看不清楚) text-white 白色文本(白色背景上看不清楚) 背景颜色 类名 作用 bg-primary 重要的背景颜色 bg-success 执行成功背景颜色 bg-info 信息提示背景颜色...bg-warning 警告背景颜色 bg-danger 危险背景颜色 bg-secondary 副标题背景颜色 bg-dark 深灰背景颜色 bg-light 浅灰背景颜色 表格 基本使用 例: 滚动位置时,距离顶部的偏移图元。 默认为 10px。

    3.1K10

    最新iOS设计规范四|3大界面要素:视图(Views)

    优化警示框文本,使其在任何方向上都无需滚动就能很好地阅读。 警示框标题和内容 尽可能写一些短小的、描述性比较强的多文本警告标题。...集合的布局是可以随时更改的。但需要注意的是,如果你是在用户进行查看集合或者正在与之进行交互时来更改动态布局的话,请确保更改是有意义的且是易于跟踪的。...用户经常会在滚动时使用非常大幅度的动作,如此便会非常难以避免在同一屏幕中对相邻的滚动视图进行交互操作。...文本视图可以是任何高度,并可以通过滚动的方式显示额外的内容。 默认情况下,文本视图中的文本是左对齐的,并使用黑色的系统字体。如果文本视图可编辑,则在视图内部点击时,屏幕下方会弹出键盘。 ?...虽然你可以使用各种类型的字体、颜色以及对齐方式,但必须保持内容的可读性。采用动态类型文本是个好办法,这样如果用户在设备上更改文字大小,你的文本内容仍然会有友好的体验。

    13.2K31

    H5C3第四节

    360浏览器 fullpage的使用 fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。...("往下滚动"); } }); 常用参数 属性名称 描述 sectionsColor 设置每一个section的背景颜色 verticalCentered 设定每一个section的内容是否垂直居中...,默认true, scrollingSpeed 设置滚动的速度,默认700毫秒 easing 设置动画的方式,一般不修改, 默认是easeInOutCubic, 如果想要修改此参数,需要引入jquery.easing.js...css3 是否使用css3 transform来实现滚动效果,默认true,不用修改,CSS3的动画效率比较js高。...autoScrolling 是否使用插件的滚动方式,默认true,如果选择false,会出现浏览器子代的滚动条,将不会按页滚动,按照滚动进行滚动。

    6.7K30

    HTML-CSS基础学习

    CSS文件 网站的风格维护起来简单,只需要修改对应的CSS文件 浏览器的页面更友好 开发与维护的成本降低 页面性能提高 CSS存在继承关系,就近原则使用CSS属性 CSS基本语法 选择符+属性+属性值...,使用于块元素,内联元素使设置于first-letter一样 ::selection 设置浏览器默认的背景颜色和文字颜色 ::placeholder CSS3样式属性 字体属性 font-style...tab-size 制表格的长度 overflow-wrap 当内容超过指定容器的边界时是否断行 word-break 对象内文本的字内换行行为,默认normal,允许字内换行 text-align...背景颜色 background-image 背景图像 background-repeat 背景图像如何铺排填充 background-attachment 背景图像随着对象内容滚动或者固定 background-position...AJAX jQuery

    6.2K30

    2021 最新 IntelliJ IDEA 详细配置步骤演示(图文版)

    User contrast scrollbars: 使编辑器滚动条更加可见。...默认情况下,此选项是禁用的,您可以移动所有内容而无需任何额外的键。...单击-按钮以删除所选的项目。 单击编辑图标按钮以添加或更改所选操作的图标。您只能将PNG或SVG文件用作图标。 单击上移按钮或下移按钮向上或向下移动所选项目。...Data Sharing(数据共享) 选中这个发送使用情况统计信息复选框后,将会允许JetBrains收集你使用IntelliJ IDEA时最常使用的功能和操作的统计信息。 4....File Colors(文件颜色) 使用此页面可以设置不同的背景颜色,以区分特定范围的项目文件。 \1. Enable file color(启用文件颜色) 2.

    2.8K10

    Flutter中构建布局 顶

    使用Scaffold是最容易的,它是Material Components库中的一个小部件,它提供了一个默认横幅,背景颜色,并且具有添加抽屉,小吃店和底部表单的API。...,非Material应用程序不包含AppBar,标题或背景颜色。...如果您想在非Material应用程序中使用这些功能,您必须自己构建它们。 此应用程序将背景颜色更改为白色,将文本更改为深灰色以模仿Material应用程序。 而已!...Container 许多布局会自由使用Container来使用填充分隔小部件,或者添加边框或边距。 您可以通过将整个布局放入Container并更改其背景颜色或图像来更改设备的背景。...每个图像使用一个Container来添加一个圆形的灰色边框和边距。 包含图像行的列使用容器将背景颜色更改为浅灰色。

    48.3K10

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

    当用户更改了UI的日期或时间时,它就会被调用。第一个也是唯一一个参数是一个Date对象,代表了新的日期和时间。    ...onTintColor字符串型         当开关打开时候的背景颜色。     onValueChange函数         当用户切换开关时,调用回调函数。     ...thumbTintColor字符串型         开关按钮的背景颜色。     tintColor字符串型         当开关关闭后的背景颜色。     ...keyboardShouldPersistTaps布尔型         当为假时,当键盘向上摒弃键盘时,轻击外部关注文本输入。当为真时,滚动视图不会抓取轻击,键盘不会自动 摒弃。...底衬的出现是因为向视图层次结构添加了一个视图,如果使用不正确的话,这有时候会导致不必要的认为视觉效果,例如,如果包装了的视图的背景颜色不是很明确的设置成一个不透明的颜色。

    3.5K40
    领券