CSS变量
betway东盟体育app离子元件是用 CSS变量 方便自定义应用程序。CSS变量允许一个值存储在一个地方,然后在多个其他地方引用。它们还可以在运行时动态更改CSS(以前需要一个CSS预处理器)。CSS变量使它比以往任何时候都更容易覆盖离子组件,以匹配品牌或主题。betway东盟体育app
设置值
全局变量
属性中的CSS变量可以在应用程序中全局设置
:根
选择器。它们也可以只应用于特定模式。看到
betway东盟体育app离子变量
有关ionion提供的全局变量的更多信息。betway东盟体育app
当使用Ionic CLI启动Abetway东盟体育appngular项目时
src /主题/ variables.scss
文件创建的地方,你可以覆盖默认的离子变量。betway东盟体育app
/*为所有模式设置变量*/
:根
{
/*设置整个应用程序的背景*/
——ion-background-color
:
# ff3700
;
/*设置整个应用的字体族*/
——ion-font-family
:
苹果系统
,
BlinkMacSystemFont
,
“Helvetica Neue”
,
“Roboto”
,
无衬线
;
}
/*设置整个应用程序的文本颜色只有iOS */
.ios
{
——ion-text-color
:
# 000
;
}
/*设置整个应用程序的文本颜色只有材料设计*/
。海事
{
——ion-text-color
:
# 222
;
}
组件的变量
要为特定组件设置CSS变量,请将变量添加到它的选择器中。看到 betway东盟体育app离子变量 有关ionion提供的组件级变量的更多信息。betway东盟体育app
/*设置所有离子按钮元素的颜色*/
ion-button
{
——颜色
:
# 222
;
}
/*使用.fancy-button类设置离子按钮的背景*/
.fancy-button
{
——背景
:
# 00 ff00
;
}
通过JavaScript设置变量
CSS变量也可以通过JavaScript来改变 setProperty () :
常量
埃尔
=
文档
.
querySelector
(
“.fancy-button”
)
;
埃尔
.
风格
.
setProperty
(
“——背景”
,
“# 36454 f '
)
;
获得值
使用CSS
的
var CSS()函数
可以用于获取CSS变量的值,以及任意数量的回退值(如果需要的话)。在下面的例子中
——背景
属性的值
——木炭
变量,如果已定义,则使用
# 36454 f
.
.fancy-button
{
——背景
:
var
(
——木炭
,
# 36454 f
)
;
}
使用JavaScript
CSS变量的值可以在JavaScript中使用 getPropertyValue () :
常量
埃尔
=
文档
.
querySelector
(
“.fancy-button”
)
;
常量
颜色
=
埃尔
.
风格
.
getPropertyValue
(
“——炭”
)
;
betway东盟体育app离子变量
组件的变量
betway东盟体育app离子提供了存在于组件级别的变量,例如
——背景
和
——颜色
.组件接受的自定义属性列表,请查看
CSS自定义属性
部分的
全局变量
为了使整个应用程序的主题化更容易,Ionic提供了几个全局变量。betway东盟体育app有关更多信息,请参见