Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7c39be2

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /