Skip to content

Commit 7c39be2

Browse files
OmbuwebOmbuweb
committed
Added the documentation for the subcategory
1 parent 2c22083 commit 7c39be2

File tree

1 file changed

+133
-0
lines changed

1 file changed

+133
-0
lines changed

‎nativescript-core/color.md

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: Color
3+
---
4+
5+
## Color
6+
7+
The color module provides a common abstraction of a list of known colors and a color object which allows you to create custom colors that you can use to style the UI.
8+
9+
#### Usage
10+
11+
/// flavor javascript
12+
13+
```javascript
14+
const Color = require('@nativescript/core/color').Color
15+
const colors = require('@nativescript/core/color/known-colors')
16+
function createColor() {
17+
// Using hex values to create color;
18+
const colorHex = new Color('#FF00CC')
19+
const colorShortHex = new Color('#F0C')
20+
21+
// Creates the color with 100 alpha, 255 red, 100 green, 100 blue
22+
const colorARGB = new Color(100, 255, 100, 100)
23+
24+
// Creates the color with 100 alpha, 100 red, 100 green, 100 blue
25+
const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 //eslint-disable-line no-bitwise
26+
const colorSingleARGB = new Color(argb)
27+
28+
// Using string values to create colors
29+
const namedColor = 'orangered'
30+
const isKnown = colors.isKnownName(namedColor)
31+
if (isKnown) {
32+
const colorName = new Color(namedColor)
33+
}
34+
35+
// Using supported known colors from @nativescript/core/color/known-colors
36+
const colorKnownName = new Color(colors.OrangeRed)
37+
}
38+
```
39+
40+
///
41+
42+
/// flavor typescript
43+
44+
```typescript
45+
import { Color } from '@nativescript/core/color'
46+
import * as colors from '@nativescript/core/color/known-colors'
47+
import { isKnownName } from '@nativescript/core/color/known-colors'
48+
49+
function createColor() {
50+
// Using hex values to create color;
51+
const colorHex = new Color('#FF00CC')
52+
const colorShortHex = new Color('#F0C')
53+
54+
// Creates the color with 100 alpha, 255 red, 100 green, 100 blue
55+
const colorARGB = new Color(100, 255, 100, 100)
56+
57+
// Creates the color with 100 alpha, 100 red, 100 green, 100 blue
58+
const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100
59+
const colorSingleARGB = new Color(argb)
60+
61+
// Using string values to create colors
62+
const namedColor = 'orangered'
63+
const isKnown: boolean = isKnownName(namedColor)
64+
if (isKnown) {
65+
const colorName = new Color(namedColor)
66+
}
67+
68+
// Using supported known colors from @nativescript/core/color/known-colors
69+
const colorKnownName = new Color(colors.OrangeRed)
70+
}
71+
```
72+
73+
///
74+
75+
#### Color class
76+
77+
Creates a color object from different types of inputs types, as shown below, that stores all color components (alpha (opacity), red, green, blue) in a [0..255] range.:
78+
79+
`Color(knownColor: string)` or <br> `Color(hex: string)` or <br> `Color(argb: number)` or <br> `Color(alpha: number, red: number, green:number, blue: number, type?: 'rgb' \| 'hsl' \| 'hsv')`
80+
81+
#### Properties
82+
83+
| Name | Type | Description |
84+
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
85+
| `a` | `string` | Gets the Alpha component (in the [0, 255] range) of thecolor. This is a read-only property. |
86+
| `r` | `string` | Gets the Red component (in the [0, 255] range) of the color. This is a read-only property. |
87+
| `g` | `string` | Gets the Green component (in the [0, 255] range) of the color. This is a read-only property. |
88+
| `b` | `string` | Gets the Blue component (in the [0, 255] range) of the color. This is a read-only property. |
89+
| `argb` | `number` | Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a read-only property. |
90+
| `hex` | `string` | Gets the Hexadecimal string representation of the color. This is a read-only property |
91+
| `name` | `string` | Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property. |
92+
| `android` | `number` | Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property. |
93+
| `ios` | `UIColor` | Gets the iOS-specific UIColor value representation. This is a read-only property. |
94+
95+
#### Stactic Methods
96+
97+
| Name | Type | Description |
98+
| --------------------------------------------------- | --------- | ------------------------------------------------------------ |
99+
| `equals(value1: Color, value2: Color)` | `boolean` | Compares two `Color` instances |
100+
| `isValid(value: any)` | `boolean` | Validates if a value can be converted to a color. |
101+
| `fromIosColor(value: UIColor)` | `Color` | Creates color from iOS-specific UIColor value representation |
102+
| `mix(color1: Color, color2: Color, amount: number)` | `Color` | Mixes |
103+
| `fromHSL(a, h, s, l)` | `Color` | Returns a new `Color` from HSL. |
104+
| `fromHSV(a, h, s, l)` | `Color` | Returns a new `Color` from HSV. |
105+
106+
#### Instance Methods
107+
108+
| Name | Type | Description |
109+
| ----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
110+
| `equals(value: Color)` | `boolean` | Specifies whether the created Color is equal to the Color parameter. |
111+
| `isDark()` | `boolean` | Returns true if `brightenss < 128` |
112+
| `isLight()` | `boolean` | Returns true if `brightenss >= 128` |
113+
| `getBrightness()` | `number` | Returns the [brightness](http://www.w3.org/TR/AERT#color-contrast). |
114+
| `getLuminance()` | `number` | Returns the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). |
115+
| `setAlpha(a: number)`. `a` is a value between `0` and `255` | `Color` | Return the created color (as a new Color instance) with the provided alpha |
116+
| `toHsl()` | `{ h: number; s: number; l: number; a: number }` | Return the hsl representation of the color. |
117+
| `toHslString()` | `string` | Returns the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color |
118+
| `toHsv()` | `{ h: number; s: number; v: number; a: number }` | Returns the hsv representation of the color. |
119+
| `toHsvString()` | `string` | Returns the [CSS rgb](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color |
120+
| `desaturate(amount: number)` | `Color` | Desaturates the color a given amount, from `0` to `100`. Providing `100` is the same as calling greyscale. |
121+
| `saturate(amount: number)` | `Color` | Saturates the color a given amount, from `0` to `100`. |
122+
| `greyscale()` | `Color` | Completely desaturates a color into greyscale. Same as calling `desaturate(100)` |
123+
| `lighten()` | `Color` | Lightens the color a given amount, from `0` to `100`. Providing `100` will always return white. |
124+
| `brighten(amount: number)` | `Color` | Brightens the color a given amount, from `0` to `100`. |
125+
| `darken(amount:number)` | `Color` | Darkens the color a given amount, from `0` to `100`. Providing `100` will always return `black`. |
126+
| `spin(amount: number)` | `Color` | Spins the hue a given amount, from `-360` to `360`. Calling with `0`, `360`, or `-360` will do nothing (since it sets the hue back to what it was before). |
127+
| `complement()` | `Color` | Returns the color complement |
128+
129+
#### Native Component
130+
131+
| Android | iOS |
132+
| :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- |
133+
| [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color) | [UICOlor](https://developer.apple.com/documentation/uikit/uicolor?language=objc) |

0 commit comments

Comments
 (0)