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自定义属性 部分的 API参考．例如，请参见按钮CSS自定义属性．

全局变量

为了使整个应用程序的主题化更容易，Ionic提供了几个全局变量。betway东盟体育app有关更多信息，请参见颜色，主题和先进的主题．