Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1、Ionic4.x Theming(主题)
Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改。
https://ionicframework.com/docs/theming/advanced
2、Ionic4.x 增加内置主题颜色
找到 src/theme/variables.scss 文件,如下代码新增 favorite 颜色
.ion-color-favorite {
--ion-color-base: #69bb7b;
--ion-color-base-rgb: 105,187,123;
--ion-color-contrast: #ffffff;
--ion-color-contrast-rgb: 255,255,255;
--ion-color-shade: #5ca56c;
--ion-color-tint: #78c288;
}
用法
<ion-button color="favorite">
自定义颜色
</ion-button>
3、修改内置组件默认样式
官方文档:https://ionicframework.com/docs/api/button
在 ionic4.x 组件中有 CSS Custom Properties。我们可以通过 CSS Custom Properties 提供的样式 来修改 ionic4.x 内置组件的默认样式。
找到 src/theme/variables.scss 文件修改 ion-button 的默认样式。
ion-button {
--color: #222; --background:red;
}
4、修改底部 Tabs 背景颜色以及按钮颜色
<ion-tabs>
<ion-tab-bar slot="bottom" color="favorite">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon> <ion-label>Tab One</ion-label>
</ion-tab-button> <ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label> </ion-tab-button>
</ion-tab-bar> </ion-tabs>
.ion-color-favorite {
--ion-color-base: #69bb7b;
--ion-color-base-rgb: 105,187,123;
--ion-color-contrast: #ffffff;
--ion-color-contrast-rgb: 255,255,255;
--ion-color-shade: #5ca56c;
--ion-color-tint: #78c288;
}
contrast 对比色,比如底部 tabs 的颜色是#69bb7b 则里面按钮的颜色是#ffffff
Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色的更多相关文章
- AgileBoot - 如何集成内置数据库H2和内置Redis
本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- kafka删除主题数据和删除主题
1.删除主题 在server.properties中增加设置,默认未开启 delete.topic.enable=true 删除主题命令 /bin/kafka-topics --delete --to ...
- ROS笔记——创建简单的主题发布节点和主题订阅节点
在安装好ROS后,接着学习如何创建节点和节点之间的通信方式,以一个简单的主题发布节点和主题订阅节点说明. 节点是连接ROS网络等可执行文件,是实现某些功能的软件包,也是一个主要计算执行的进程. 一.创 ...
- R语言︱LDA主题模型——最优主题数选取(topicmodels)+LDAvis可视化(lda+LDAvis)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:在自己学LDA主题模型时候,发现该模 ...
- R语言︱LDA主题模型——最优主题...
R语言︱LDA主题模型——最优主题...:https://blog.csdn.net/sinat_26917383/article/details/51547298#comments
- 用js限制网页只能在微信内置浏览器或支付宝内置浏览器中打开
function is_weixinOrAli(){ var ua = navigator.userAgent.toLowerCase(); //判断浏览器的类型 if (ua.match(/Micr ...
- 自用 Pycharm 主题配色分享(主题才是开发第一生产力)
写在前面的话 是的,我又回来了,上一篇[使用 Visual Studio Code(VSCode)搭建简单的 Python + Django 开发环境]才说真香,结果用两天就发现很多恶心的问题拦住了菜 ...
- Unity苹果(iOS)内购接入(Unity内置IAP)
https://www.jianshu.com/p/4045ebf81a1c Unity苹果(iOS)内购接入(Unity内置IAP) Kakarottog ...
随机推荐
- mniGraffle常用快捷键
OmniGraffle 是 Mac 上的绘图利器.Graffle 在很多方面对标 Windows 系统上的 Microsoft Visio,是制作各种文档的绝妙工具. 变换移动 放大:Cmd+Shif ...
- python中IO多路复用、协程
一.IO多路复用 IO多路复用:检测多个socket是否已经发生变化(是否已经连接成功/是否已经获取数据)(可读/可写) import socket def get_data(key): client ...
- C语言Ⅰ博客作业06
这个作业属于哪个课程 C语言程序设计Ⅰ 这个作业要求在哪里 熟练掌握多分支结构,字符型数据类型和逻辑运算符 我在这个课程的目标是 https://www.cnblogs.com/tongyingjun ...
- 29、[源码]-AOP原理-AnnotationAwareAspectJAutoProxyCreatovi
29.[源码]-AOP原理-AnnotationAwareAspectJAutoProxyCreatovi
- 洛谷 P2580 于是他错误的点名开始了 题解
每日一题 day10 打卡 Analysis trie树模板题,只需用到简单的插入和查询就好了 如果想要学trie树,见信息学奥赛一本通·提高篇P82 #include<iostream> ...
- ueditor+flash粘贴word
实现方式: 1.前端引用代码 .粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持 目前项目是用了一种变通的方式: 先把word上传到后台 .poi ...
- bat批处理运用
一.简单批处理内部命令简介 1.Echo 命令 –显示 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法: echo [{on│off}] [mess ...
- jQuery相关方法10
一.链式编程的原理 <script> //构造函数 function Person(age){ this.age=age; this.sayHi=function(txt){ if(txt ...
- 数据库学习之七--视图(View)
一.定义 视图:指计算机数据库中的一个临时虚拟表,其内容由查询定义:同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在. 二.优点 1. 优点: a. ...
- NetworkX系列教程(1)-创建graph
小书匠Graph图论 研究中经常涉及到图论的相关知识,而且常常面对某些术语时,根本不知道在说什么.前不久接触了NetworkX这个graph处理工具,发现这个工具已经解决绝大部分的图论问题(也许只是我 ...