搜索文档 /

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有关更多信息,请参见 颜色 主题 先进的主题

以前的
平台的风格
下一个
CSS阴影部分
Baidu