颜色实用程序

Quasar提供了一组有用的功能,可以在大多数使用情况下轻松操作颜色,而没有集成专用库的较高额外成本。

帮助Tree-Shake

你会注意到所有的例子都从Quasar导入colors对象。 但是,如果您只需要一种方法,那么您可以使用ES6解构来帮助Tree Shaking嵌入该方法而不是所有的colors

setBrand()示例:

// 我们导入所有的`colors`
import { colors } from 'quasar'
// 解构只保留需要的东西
const { setBrand } = colors

setBrand('primary', '#f33')

TIP

有关UMD版本的使用,请参见此处.

颜色转换

这些函数将颜色作为字符串或对象并将其转换为另一种格式。

函数源格式目的地格式说明
rgbToHex对象字符串将RGB/A颜色对象({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})转换为HEX/A作为字符串的表示(#RRGGBB<AA>)。如果Alpha通道出现在原始对象中,它也将出现在输出中。
rgbToHsv对象对象将RGB/A颜色对象({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})转换为HSV/A作为对象的表示({ h: [0-360], s: [0-100], v: [0-100}, a: [0-100]})。如果Alpha通道出现在原始对象中,它也将出现在输出中。
hexToRgb字符串对象将HEX/A颜色字符串(#RRGGBB <AA>)转换为其RGB/A表示形式({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})。如果Alpha通道出现在原始对象中,它也将出现在输出中。
textToRgb字符串对象将HEX/A颜色字符串(#RRGGBB <AA>)或RGB/A颜色字符串(rgb(R,G,B <,A>))转换为它的RGB/A表示形式({ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>})。如果Alpha通道出现在原始对象中,它也将出现在输出中。
hsvToRgb字符串对象将HSV/A颜色对象({ h: [0-360], s: [0-100], v: [0-100}, a: [0-100]})转换为RGB/A表示作为对象的表示({r:[0-255],g:[0-255],b:[0-255} <,a:[0-100]>})。如果Alpha通道出现在原始对象中,它也将出现在输出中。

颜色处理

这些功能对颜色进行更改或提取特定信息。

lighten (color, percent)

使color变亮(如果percent为正值)或使其变暗(如果percent为负值)。

一个HEX/A字符串或RGB/A字符串表示的color参数和一个应用于color的变亮/变暗的percent(0至100或-100至0)参数。 返回经计算过的color的HEX字符串表示形式。

luminosity (color)

计算color相对亮度

一个HEX/A字符串、RGB/A字符串或RGB/A对象表示的“color”参数。 返回0到1之间的值。

亮度(颜色)

计算color颜色对比

接受HEX/A字符串、RGB/A字符串或RGB/A对象作为color。 返回0到255之间的值。小于128的值将被视为深色。

blend (fgColor, bgColor)

计算两种颜色的blend.

接受HEX/A字符串或RGB/A对象作为fgColor/bgColor。 如果fgColor的alpha通道是完全不透明的,那么结果将是fgColor。 如果bgColor的Alpha通道是完全不透明的,那么生成的混合颜色也将是不透明的。 返回与fgColor的输入相同的类型。

changeAlpha (color, offset)

Increments or decrements the alpha of a string color.

Accepts a HEX/A String as color and a number between -1 and 1 (including edges) as offset. Use a negative value to decrement and a positive number to increment (ex: changeAlpha('#ff0000', -0.1) to decrement alpha by 10%). Returns HEX/A String.

品牌(Brand)颜色的动态变化(动态主题颜色)

WARNING

这仅在支持CSS变量的浏览器(自定义属性)上受支持。

它不会在IE11上工作,但它会恢复到CSS主题中的品牌颜色。

您可以在运行时动态定制品牌颜色: primary, secondary, accent, dark, positive, negative, info, warning。这意味着您可以使用默认颜色主题构建应用程序的一个构建版本,但显示时使用运行时所选的一个。

主要颜色配置使用存储在根元素(:root)中的CSS自定义属性完成。每个属性的名称都是--q-color-${name}(例如:--q-color-primary--q-color-secondary),并且应该具有有效的CSS颜色作为值。

CSS自定义属性使用与普通CSS相同的继承规则,因此只能重新定义所需的颜色,其余的将从父元素继承。

推荐的工作流程是在htmldocument.documentElement)或bodydocument.body)元素上设置自定义的颜色属性。这将允许您通过删除自定义颜色来恢复为默认颜色。

有关CSS自定义属性(变量)的更多信息:http://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

辅助方法 - setBrand

colors实用程序中,Quasar提供了一个辅助方法用于设置自定义颜色:setBrand(colorName,colorValue[,element])

参数类型必需说明
colorName字符串primary, secondary, accent, dark, positive, negative,
info, warning之一
colorValue字符串有效的CSS颜色值
element元素-(默认:document.body)设置自定义属性的元素。

使用辅助方法设置品牌颜色的示例:

import { colors } from 'quasar'

colors.setBrand('info', '#DDD')
colors.setBrand('primary', '#33F')
colors.setBrand('primary', '#F33', document.getElementById('rebranded-section-id'))

辅助方法还将负责为品牌颜色设置相关的自定义属性,所以这是推荐的使用方式,而不是原始的JavascriptsetProperty()

辅助方法 - getBrand

colors实用程序中,Quasar提供了一个辅助方法,用于获取自定义颜色:getBrand(colorName [,element])

参数类型必需说明
colorName字符串primary, secondary, accent, dark, positive, negative,
info, warning 之一
element元素-(默认值:document.body)将读取自定义属性的元素。

使用辅助方法获取自定义颜色的示例:

import { colors } from 'quasar'

colors.getBrand('primary') // '#33F'
colors.getBrand('primary', document.getElementById('rebranded-section-id'))

这个辅助方法所做的就是包装原始Javascript的getPropertyValue()方法以方便使用。 等同于原始Javascript的示例:

// 等同于原始Javascript中的colors.getBrand('primary'):

getComputedStyle(document.documentElement)
  .getPropertyValue('--q-color-primary') // #0273d4

创建动态自定义颜色

您可以使用setBrandgetBrand来定义要在您的应用程序中使用的自定义品牌颜色。 这种新的自定义颜色用法的一个示例:

$primary-darkened = darken($primary, 10%)

:root
  --q-color-primary-darkened $primary-darkened

.text-primary-darkened
  color $primary-darkened !important
  color var(--q-color-primary-darkened) !important
.bg-primary-darkened
  background $primary-darkened !important
  background var(--q-color-primary-darkened) !important
import { colors } from 'quasar'

const { lighten, setBrand } = colors

const newPrimaryColor = '#933'
setBrand('primary', newPrimaryColor)
setBrand('primary-darkened', lighten(newPrimaryColor, -10))