Skip to content

New Crowdin updates #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jaames wants to merge 25 commits into
base: master
Choose a base branch
from
Open

New Crowdin updates #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
3e1305d
New translations advanced.md (Chinese Simplified)
jaames Jul 31, 2020
f868b03
Update source file advanced.md
jaames Jul 31, 2020
36fabf9
New translations index.md (Chinese Simplified)
jaames Aug 1, 2020
41d2b37
Update source file index.md
jaames Aug 14, 2020
64d22f1
New translations advanced.md (Chinese Simplified)
jaames Aug 15, 2020
6712239
Update source file advanced.md
jaames Aug 25, 2020
e4cda45
New translations advanced.md (Chinese Simplified)
jaames Nov 24, 2020
52cf06a
Update source file advanced.md
jaames Nov 25, 2020
01cf57d
New translations colorPicker_api.md (Chinese Simplified)
jaames Dec 27, 2020
7b92316
New translations guide.md (Chinese Simplified)
jaames Dec 27, 2020
7309ce2
Update source file colorPicker_api.md
jaames Feb 16, 2021
2af1c01
Update source file guide.md
jaames Feb 16, 2021
84e8d8a
New translations index.md (Chinese Simplified)
jaames Mar 21, 2021
84e4150
Update source file index.md
jaames Mar 27, 2021
8a6f6f8
Update source file colorPicker_api.md
jaames Mar 27, 2021
291bec5
Update source file guide.md
jaames Mar 27, 2021
7ea3ee9
New translations colorPicker_api.md (Chinese Simplified)
jaames Mar 27, 2021
5d15431
New translations guide.md (Chinese Simplified)
jaames Mar 27, 2021
a466b62
New translations advanced.md (Chinese Simplified)
jaames Apr 6, 2021
2c5da15
New translations colorPicker_api.md (Chinese Simplified)
jaames Apr 6, 2021
36263df
New translations colorPicker_api.md (Chinese Simplified)
jaames Apr 6, 2021
ab6a8ad
New translations guide.md (Chinese Simplified)
jaames Apr 6, 2021
2c46c4d
New translations index.md (Chinese Simplified)
jaames Apr 6, 2021
ea016de
New translations advanced.md (Chinese Simplified)
jaames Jun 30, 2021
a37115b
New translations index.md (Chinese Simplified)
jaames Aug 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 59 additions & 7 deletions docs/advanced.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,15 @@ var colorPicker = new iro.ColorPicker('#picker', {
});
```

There's a few optional box-specific config options that can be used:

| Option | Purpose | Default Value |
|:-----------------|:--------|:--------|
| `boxHeight` | Height of the box, measured in pixels. If this isn't set, it will use the box's width as its height | `null` |

#### Sliders

<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" :layout="[
<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" layoutDirection="horizontal" :layout="[
{
component: 'Slider',
options: {
Expand All @@ -119,6 +125,24 @@ var colorPicker = new iro.ColorPicker('#picker', {
sliderType: 'value',
}
},
{
component: 'Slider',
options: {
sliderType: 'red',
}
},
{
component: 'Slider',
options: {
sliderType: 'green',
}
},
{
component: 'Slider',
options: {
sliderType: 'blue',
}
},
{
component: 'Slider',
options: {
Expand All @@ -131,9 +155,6 @@ var colorPicker = new iro.ColorPicker('#picker', {
sliderType: 'kelvin',
}
},
]"/>

<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[
{
component: 'Slider',
options: {
Expand All @@ -142,8 +163,12 @@ var colorPicker = new iro.ColorPicker('#picker', {
}
},
]"/>
<!--
<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[

]"/> -->

Sliders allow the user to adjust a specific color channel. Currently there are multiple types of sliders available, covering **hue**, **saturation**, **value**, **alpha** and **kelvin temperature**.
Sliders allow the user to adjust a specific color channel. There are multiple slider types available, covering **hue**, **saturation**, **value**, **red**, **green**, **blue**, **alpha** and **kelvin temperature**.

##### `sliderType`

Expand All @@ -155,7 +180,8 @@ var colorPicker = new iro.ColorPicker('#picker', {
{
component: iro.ui.Slider,
options: {
sliderType: 'hue' // can also be 'saturation', 'value', 'alpha' or 'kelvin'
// can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin'
sliderType: 'hue'
}
},
]
Expand All @@ -166,7 +192,7 @@ If `sliderType` is set to `'kelvin'`, the temperature range can be set with thes

| Option | Purpose | Default Value |
|:-----------------|:--------|:--------|
| `minTemperature` | Minimum color temperature, in Kelvin (smallest value is `1000`) | `2200` |
| `minTemperature` | Minimum color temperature, in Kelvin (smallest value is `2000`) | `2200` |
| `maxTemperature` | Maximum color temperature, in Kelvin (largest value is `40000`) | `11000` |

##### `sliderShape`
Expand Down Expand Up @@ -264,6 +290,32 @@ It's also possible to programmatically set the active color, by passing the inde
colorPicker.setActiveColor(1);
```

### Components Using the Active Color

By default, Silder and Box components will reflect whichever color is currently active. However this can be manually overriden with their `activeIndex` option:

```js
var colorPicker = new iro.ColorPicker("#demoWheel", {
layout: [
// default slider, will reflect whichever color is currently active
{
component: iro.ui.Slider,
options: {
sliderType: 'value'
}
},
// this slider will always reflect the color at index 2
{
component: iro.ui.Slider,
options: {
sliderType: 'value',
activeIndex: 2,
}
},
]
});
```

### Adding and Removing Colors

Colors can be added and removed from the color picker at any time:
Expand Down
12 changes: 12 additions & 0 deletions docs/colorPicker_api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ Radius of the control handles, measued in pixels.

**Default value**: `8`

### `activeHandleRadius`

Overrides `handleRadius` for the handle of the currently selected color.

**Default value**: Inherits `handleRadius` value by default

### `handleSvg`

SVG reference for [Custom Handles](/advanced.html#custom-handles). This should be an ID selector that matches your handle SVG.
Expand Down Expand Up @@ -115,6 +121,12 @@ Slider size, measued in pixels.

**Default value**: By default this will be calculated automatically from `padding` and `handleRadius`.

### `boxHeight`

Box control height, measued in pixels.

**Default value**: By default this will be the same value as `width`.

## Properties

### `color`
Expand Down
2 changes: 2 additions & 0 deletions docs/guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,14 @@ var colorPicker = new iro.ColorPicker("#picker", {
| `borderWidth` | Width of the border around the controls. Set to `0` for no border. | `0` |
| `borderColor` | Color of the border. Any valid CSS color is supported. | `"#ffffff"` |
| `handleRadius` | Radius of the control handles. | `8` |
| `activeHandleRadius` | Radius of the control handle for the currently selected color. | Inherits `handleRadius` |
| `handleSvg` | Custom handle SVG, used for [custom handles](/advanced.html#custom-handles). | `null` |
| `handleProps` | Custom handle properties, used for [custom handles](/advanced.html#custom-handles). | `{x:0, y:0}` |
| `wheelLightness` | If set to `false`, the color wheel will not fade to black when the lightness decreases. | `true` |
| `wheelAngle` | Starting angle of the color wheel's hue gradient, measured in degrees. | `0` |
| `wheelDirection` | Direction of the color wheel's hue gradient; either `"clockwise"` or `"anticlockwise"`. | `"anticlockwise"` |
| `sliderSize` | Slider control size. By default this will be calculated automatically. | `undefined` |
| `boxHeight` | Box control height. By default this will be the same as the `width`. | `undefined` |

More details about color picker options, properties, and methods can be found on the [colorPicker API documentation](/colorPicker_api.html).

Expand Down
37 changes: 36 additions & 1 deletion docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,40 @@ layout: Home
home: true
---

::: slot introduction
Modular, design-conscious color picker widget for JavaScript
:::

::: slot feature-colors
Work with colors in hex, RGB, HSV and HSL formats (plus kelvin temperatures!) in one simple, frictionless API.
:::

::: slot feature-colors-example
```js
// Get the color as an RGB string
var rgb = colorPicker.color.rgbString;
// rgb = "{{ rgbString }}"

// Get the color as a HSV object
var hsv = colorPicker.color.hsv;
// hsv = {{ rgbString }}

// Set the color from a hex string
colorPicker.color.hexString = "#fff";

// Set the color from a temperature
colorPicker.color.kelvin = 6000;
```
:::

::: slot feature-multicolor
Add multiple colors to the same color picker for selecting color harmonies and themes.
:::

::: slot feature-components
Create the perfect color picker from a selection of pre-built UI components.
:::

::: slot tutorial-iro-js
### Installation

Expand Down Expand Up @@ -106,4 +140,5 @@ colorPicker.on('color:change', function(color) {
});
```

For a full overview of the available events can be found in the [events documentation](/guide.html#color-picker-events).
For a full overview of the available events can be found in the [events documentation](/guide.html#color-picker-events).
:::
73 changes: 65 additions & 8 deletions docs/zh/advanced.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,15 @@ var colorPicker = new iro.ColorPicker('#picker', {
});
```

可以使用一些可选的特定于盒子的配置选项：

| 选项 | 用途 | 默认值 |
|:----------- |:----------------------------------- |:------ |
| `boxHeight` | 方框的高度，以像素为单位。 如果没有设置，它将使用盒子的宽度作为其高度 | `null` |

#### Sliders 滑块

<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" :layout="[
<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" layoutDirection="horizontal" :layout="[
{
component: 'Slider',
options: {
Expand All @@ -119,6 +125,24 @@ var colorPicker = new iro.ColorPicker('#picker', {
sliderType: 'value',
}
},
{
component: 'Slider',
options: {
sliderType: 'red',
}
},
{
component: 'Slider',
options: {
sliderType: 'green',
}
},
{
component: 'Slider',
options: {
sliderType: 'blue',
}
},
{
component: 'Slider',
options: {
Expand All @@ -130,18 +154,20 @@ var colorPicker = new iro.ColorPicker('#picker', {
options: {
sliderType: 'kelvin',
}
}, ]"/>

<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[
},
{
component: 'Slider',
options: {
sliderType: 'saturation',
sliderShape: 'circle',
}
}, ]"/>
<!--
<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[

]"/> -->

滑块允许用户调整特定的颜色通道。 当前有多种类型的滑块可用，包括 色调 **hue**，饱和度 **saturation**，值 **value**，透明通道 **alpha** 和 冷暖值（开尔文温度） **kelvin temperature**.
滑块允许用户调整特定的颜色通道。 有多种滑块类型可用，包括**色调**，**饱和度**，**值**，**红色**，**绿色**，**蓝色**，**alpha **和**冷暖值（开尔文温度）**。

##### `sliderType 滑块类型`

Expand All @@ -153,7 +179,8 @@ var colorPicker = new iro.ColorPicker('#picker', {
{
component: iro.ui.Slider,
options: {
sliderType: 'hue' //也可以是 'saturation', 'value', 'alpha' 或 'kelvin'
// 也可以是'saturation', 'value', 'red', 'green', 'blue', 'alpha' 或 'kelvin'
sliderType: 'hue'
}
},
]
Expand All @@ -164,7 +191,7 @@ var colorPicker = new iro.ColorPicker('#picker', {

| 选项 | 用途 | 默认值 |
|:---------------- |:------------------------- |:------- |
| `minTemperature` | Kelvin最小色温值(最小值为 `1000`) | `2200` |
| `minTemperature` | Kelvin最小色温值(最小值为 `2000`) | `2200` |
| `maxTemperature` | Kelvin最大色温值(最大值是 `40000`) | `11000` |

##### `sliderShape 滑块形状`
Expand Down Expand Up @@ -262,6 +289,32 @@ colorPicker.on('color:setActive', function(color) {
colorPicker.setActiveColor(1);
```

### 使用活动颜色的组件

默认情况下，Silder 和 Box 组件将反映当前激活的任何颜色。 然而，这可以用他们的 `活动索引` 选项手动覆盖：

```js
var colorPicker = new iro.ColorPicker("#demoWheel", {
layout: [
// 默认滑块，将反映当前处于活动状态的任何颜色
{
component: iro.ui.Slider,
options: {
sliderType: 'value'
}
},
// 此滑块将始终反映索引2处的颜色
{
component: iro.ui.Slider,
options: {
sliderType: 'value',
activeIndex: 2,
}
},
]
});
```

### 添加和删除颜色

颜色可以随时从颜色选择器中添加和删除：
Expand Down Expand Up @@ -298,7 +351,11 @@ colorPicker.setColors([
```svg
<svg>
<defs>
<g id="handle"><!-- 手柄的svg内容开始 --><rect x="0" y="0" width="8" height="8"></rect><!-- 手柄的svg内容结束 --></g>
<g id="handle">
<!-- 手柄的svg内容开始 -->
<rect x="0" y="0" width="8" height="8"></rect>
<!-- 手柄的svg内容结束 -->
</g>
</defs>
</svg>
```
Expand Down
14 changes: 13 additions & 1 deletion docs/zh/colorPicker_api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ title: 颜色选择器 API

**默认值**: `8`

### `activeHandleRadius`

为当前选择的颜色重写 `handleRadius`。

**默认值**: 继承 `handleRadius` 的默认值

### `handleSvg`

[自定义手柄](/advanced.html#自定义手柄)的SVG参考。 这应该是一个与您的手柄SVG匹配的ID选择器。
Expand All @@ -93,7 +99,7 @@ title: 颜色选择器 API

### `wheelLightness`

如果设置为 `false`，当亮度降低时，颜色轮将不会变成黑色。
如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色.

**默认值**: `true`

Expand All @@ -115,6 +121,12 @@ title: 颜色选择器 API

**默认值**: 默认情况下，这将自动以 `padding` 和 `handleRadius` 计算。

### `boxHeight`

盒子控制高度，以像素计量。

**默认值**: 默认情况下，这将与 `宽度` 相同。

## 属性

### `color`
Expand Down
Loading