From 3e1305d0eff4dcaebec6982cc3f983642bfb7b80 Mon Sep 17 00:00:00 2001 From: James Date: Fri, 31 Jul 2020 22:10:55 +0100 Subject: [PATCH 01/25] New translations advanced.md (Chinese Simplified) --- docs/zh/advanced.md | 58 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 44 insertions(+), 14 deletions(-) diff --git a/docs/zh/advanced.md b/docs/zh/advanced.md index 58ffb1c..62aaa8a 100644 --- a/docs/zh/advanced.md +++ b/docs/zh/advanced.md @@ -262,24 +262,50 @@ colorPicker.on('color:setActive', function(color) { 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 -//为颜色选择器添加颜色 -//这会将颜色添加到colors数组的末尾 +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: + +```js +// add a color to the color picker +// this will add the color to the end of the colors array colorPicker.addColor('rgb(100%, 100%, 100%)'); -//您还可以为新颜色指定索引 -//在索引0添加颜色 +// you can also specify an index for the new color +// add a color at index 0 colorPicker.addColor('rgb(100%, 100%, 100%)', 0); -//删除索引1处的颜色 +// remove the color at index 1 colorPicker.removeColor(1); ``` -您也可以用 `setColors` 方法一次性替换所有颜色： +You can also replace all of the colors at once with the `setColors` method: ```js colorPicker.setColors([ @@ -291,19 +317,23 @@ colorPicker.setColors([ ## 自定义手柄 -默认情况下，颜色选择器使用圆形控制手柄，可以使用 `handleRadius` 选项进行调整。 然而，可以覆盖这个并使用你自己的SVG来创建自定义手柄。 +By default, the color picker uses circular control handles which can be adjusted with the `handleRadius` option. However, it's possible to override this and use your own SVGs to create custom handles. -手柄的SVG需要放置在页面HTML内的某处，并且SVG内容也需要包装在具有唯一 `id` 的 `` 标签内，该标签本身包装在 `` 标签中： +Handle SVGs need to be placed somewhere within the page HTML, and the SVG content also needs to be wrapped inside a `` tag with a unique `id`, which itself is wrapped in a `` tag: ```svg - + + + + + ``` -然后，在创建颜色选择器时，确保` handleSvg `选项是与手柄SVG匹配的 **id选择器 **： +Then when the color picker is created, make sure the `handleSvg` option is an **id selector** which matches the handle SVG: ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -311,7 +341,7 @@ var colorPicker = new iro.ColorPicker('#picker', { }); ``` -自定义手柄SVG将被绘制为中心点在 `x 0, y 0` ，但是如果需要调整手柄的位置，` handleProps` 选项用于更改中心点： +The custom handle SVG will be drawn as if the center point is at `x 0, y 0`, but if you need to adjust the position of the handle, the `handleProps` option can be used to change the center point: ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -320,4 +350,4 @@ var colorPicker = new iro.ColorPicker('#picker', { }); ``` -建议在 Codepen 上查看交互式 [自定义手柄演示](https://codepen.io/rakujira/pen/vbeENp?editors=1010) 以更好地了解此功能的运作方式。 \ No newline at end of file +It's recommended to check out the interactive [Custom Handle Demo](https://codepen.io/rakujira/pen/vbeENp?editors=1010) on Codepen to get a better understanding of how this feature works. \ No newline at end of file From f868b03297f95620b8ffdd80e442a3a484f9cf09 Mon Sep 17 00:00:00 2001 From: James Date: Fri, 31 Jul 2020 23:11:24 +0100 Subject: [PATCH 02/25] Update source file advanced.md --- docs/advanced.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/advanced.md b/docs/advanced.md index 6fb520f..0c4a1bf 100644 --- a/docs/advanced.md +++ b/docs/advanced.md @@ -264,6 +264,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: From 36fabf978190fc49025700e49ef388aad6249fe6 Mon Sep 17 00:00:00 2001 From: James Date: Sun, 2 Aug 2020 00:28:03 +0100 Subject: [PATCH 03/25] New translations index.md (Chinese Simplified) --- docs/zh/index.md | 74 ++++++++++++++++++++++++++++++++---------------- 1 file changed, 50 insertions(+), 24 deletions(-) diff --git a/docs/zh/index.md b/docs/zh/index.md index 21b0d42..753a6f5 100644 --- a/docs/zh/index.md +++ b/docs/zh/index.md @@ -3,6 +3,32 @@ layout: 首页 home: true --- +::: slot introduction A modern, SVG-based color picker widget for vanilla 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 ### 安装 @@ -12,66 +38,66 @@ home: true $ npm install @jaames/iro --save ``` -如果您使用的是Webpack或Rollup之类的模块捆绑器，请将iro.js导入您的项目中： +Then if you are using a module bundler like Webpack or Rollup, import iro.js into your project: ```js -//使用ES6模块语法 +// Using ES6 module syntax import iro from '@jaames/iro'; -//使用CommonJS模块 +// Using CommonJS modules const iro = require('@jaames/iro'); ``` ##### 也可使用 CDN -将此脚本拖放到您页面的 HTML `` 中： +Drop this script into the `` of your page's HTML: ```html ``` -当您手动包含这样的库时，iro.js将在 `window.iro` 上全局可用。 +When you manually include the library like this, iro.js will be made globally available on `window.iro`. ##### 也可下载并自己托管 -**[开发版本](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.js)**
未压缩，包括源注释。 用于调试。 +**[Development version](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.js)**
Uncompressed, with source comments included. Intended for debugging. -**[生产版本](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.min.js)**
缩小和优化的版本。 +**[Production version](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.min.js)**
Minified and optimized version. ### 颜色选择器设置 -首先， 我们需要一个具有唯一标识符的HTML元素 (例如一个 `id` 属性) 作为颜色选择器的容器： +First, we need a HTML element with a unique identifier (such as an `id` attribute) to act as a container for the color picker: ```html
``` -然后使用 JavaScript 创建一个新的 `iro.ColorPicker` 与您选择的容器元素匹配的 CSS 选择器： +Then use JavaScript to create a new `iro.ColorPicker` with a CSS selector that matches your chosen container element: ```js var colorPicker = new iro.ColorPicker('#picker'); ``` -您还可以在此处使用DOM对象而不是CSS选择器 -- 如果将iro.js集成到使用诸如Vue，React等框架构建的应用程序中，这可能更合适。 +You can also use a DOM object instead of a CSS selector here -- this might be more suitable if you're integrating iro.js into an application built with a framework such as Vue, React, etc. ### 颜色选择器选项 -可以通过将一组选项传递给 `iro.ColorPicker` 的第二个参数来自定义颜色选择器： +The color picker can be customized by passing a set of options to the second `iro.ColorPicker` parameter: ```js var colorPicker = new iro.ColorPicker("#picker", { - //设置颜色选择器的大小 + // Set the size of the color picker width: 320, - //将初始颜色设置为纯红色 + // Set the initial color to pure red color: "#f00" }); ``` -颜色选择器选项的完整列表可以在 [选项文档](guide.html#颜色选择器选项) 中找到。 +A full list of color picker options can be found in the [options documentation](guide.html#color-picker-options). ### 使用颜色 -每个颜色选择器都有一个 color 对象来存储当前选中的颜色。 +Each color picker has a color object which stores the currently selected color. ```js @@ -79,29 +105,29 @@ var hex = colorPicker.color.hexString; console.log(hex); // hex = "#ff0000" ``` -每当您设置这些颜色属性时，颜色选择器将自动更新以匹配它！ +Whenever you set any of these color properties, the color picker will automatically update to match it! ```js colorPicker.color.hsl = { h: 180, s: 100, l: 50 }; -// 颜色选择器更新以匹配hsl(180, 100, 50) +// Color picker updates to match hsl(180, 100, 50) ``` -有关颜色属性的完整列表，请参见[颜色文档](/guide.html#使用颜色)。 +A full list of color properties can be found in the [color documentation](/guide.html#working-with-colors). ### 事件 -通过事件，您可以在某些事情发生后运行自己的代码，例如，当选定的颜色发生更改或用户与颜色选择器进行交互时。 +Events let you to run your own code after certain things have happened, like when the selected color has changed or when the user has interacted with the color picker. -拾色器的 [`on`](colorPicker_api.html#on) 方法可用于附加在触发特定事件时将调用的函数。 例如，我们可以添加一个监听器，当颜色被更改时触发： +The color picker's [`on`](colorPicker_api.html#on) method can be used to attach functions that will be called whenever a particular event is fired. For example, we can add a listener that fires whenever the color is changed: ```js -//收听颜色选择器的color:change事件 -//color:change回调接收当前颜色 +// listen to a color picker's color:change event +// color:change callbacks receive the current color colorPicker.on('color:change', function(color) { - //将当前颜色记录为十六进制字符串 + // log the current color as a HEX string console.log(color.hexString); }); ``` -关于可用事件的全面概述，可在 [事件文档](/guide.html#颜色选择事件) 中找到。 \ No newline at end of file +For a full overview of the available events can be found in the [events documentation](/guide.html#color-picker-events). ::: \ No newline at end of file From 41d2b375883c841e7b26578273bb50ec210727c3 Mon Sep 17 00:00:00 2001 From: James Date: Fri, 14 Aug 2020 21:42:41 +0100 Subject: [PATCH 04/25] Update source file index.md --- docs/index.md | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 303e5f4..76eb31b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -3,6 +3,40 @@ layout: Home home: true --- +::: slot introduction +A modern, SVG-based color picker widget for vanilla 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 @@ -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). \ No newline at end of file +For a full overview of the available events can be found in the [events documentation](/guide.html#color-picker-events). +::: \ No newline at end of file From 64d22f1bac403c61b62e43069413e81463bb1bc3 Mon Sep 17 00:00:00 2001 From: James Date: Sat, 15 Aug 2020 21:20:57 +0100 Subject: [PATCH 05/25] New translations advanced.md (Chinese Simplified) --- docs/zh/advanced.md | 55 +++++++++++++++++++++++++++++++-------------- 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/docs/zh/advanced.md b/docs/zh/advanced.md index 62aaa8a..f8dc230 100644 --- a/docs/zh/advanced.md +++ b/docs/zh/advanced.md @@ -100,7 +100,7 @@ var colorPicker = new iro.ColorPicker('#picker', { #### Sliders 滑块 - - - + -滑块允许用户调整特定的颜色通道。 当前有多种类型的滑块可用，包括 色调 **hue**，饱和度 **saturation**，值 **value**，透明通道 **alpha** 和 冷暖值（开尔文温度） **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 滑块类型` -可以使用 `sliderType` 选项指定滑块类型： +The type of slider can be specified with the `sliderType` option: ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -153,14 +173,15 @@ var colorPicker = new iro.ColorPicker('#picker', { { component: iro.ui.Slider, options: { - sliderType: 'hue' //也可以是 'saturation', 'value', 'alpha' 或 'kelvin' + // can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin' + sliderType: 'hue' } }, ] }); ``` -如果 `sliderType` 设置为 `kelvin`, 色温范围可以用这些选项设置： +If `sliderType` is set to `'kelvin'`, the temperature range can be set with these options: | 选项 | 用途 | 默认值 | |:---------------- |:------------------------- |:------- | @@ -169,7 +190,7 @@ var colorPicker = new iro.ColorPicker('#picker', { ##### `sliderShape 滑块形状` -`sliderShape` 选项也可用于使滑块变为圆形： +The `sliderShape` option can also be used to make the slider circular: ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -186,11 +207,11 @@ var colorPicker = new iro.ColorPicker('#picker', { ## 多颜色选择器 -iro.js支持随时在同一颜色选择器上具有多种可选颜色，这对于希望用户能够处理颜色主题的情况非常有用！ +iro.js supports having more than one selectable colors on the same color picker at any time, which can be useful for situations where you want the user to be able to work with color themes or harmonies! ### 设置 -`colors` [配置选项](/guide.html#颜色选择器选项) 可以用来为颜色选择器提供一份颜色列表。 任何 [支持的颜色格式](/color_api.html#支持的颜色格式) 将在这里工作： +The `colors` [config option](/guide.html#color-picker-options) can be used to provide an intial list of colors to the color picker. Any [supported color format](/color_api.html#supported-color-formats) will work here: ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -204,9 +225,9 @@ var colorPicker = new iro.ColorPicker('#picker', { ### 使用多个颜色 -颜色对象数组可用于** get **和** set **，每种颜色的值可以在颜色选择器的` colors `属性中找到。 此数组将在 [设置](#设置) 期间以相同的颜色传递给颜色选择器。 +An array of color objects which can be used to **get** and **set** the value of each color can be found on the color picker's `colors` property. This array will be in the same order as the colors passed to the color picker during [setup](#setup). -值得查阅[使用颜色指南](/guide.html#使用颜色)，以了解有关这些单个颜色对象如何工作的更多信息，但这里有一个简要概述： +It's worth checking out the [working with colors guide](/guide.html#working-with-colors) to learn more about how these individual color objects work, but here's a quick overview: ```js //将第一种颜色设置为新值 @@ -223,7 +244,7 @@ colorPicker.colors.forEach(function (color) { ### 事件 -在处理[事件](/guide.html#颜色选择事件)时，请务必记住所有颜色更改事件将针对每种颜色触发 (例如` color:change ` ，` input:change `，` input:start `等)。 要找到触发事件的颜色，您可以使用颜色的 `index` 属性： +When working with [events](/guide.html#color-picker-events), it's important to remember that all of the color-change events (like `color:change`, `input:change`, `input:start`, etc) will fire for every color. To find which color fired the event, you can use the color's `index` property: ```js colorPicker.on('color:change', function(color) { @@ -238,7 +259,7 @@ colorPicker.on('color:change', function(color) { ### 活动颜色 -“活动”颜色是指最近由用户选择的颜色。 当在同一颜色选择器上使用多个颜色时，颜色选择器的 `color` 属性将永远反映当前活动的颜色： +The 'active' color refers to the color that was most recently selected by the user. When working with multiple colors on the same color picker, the colorPicker's `color` property will always reflect the currently active color: ```js //记录活动颜色的十六进制值 @@ -248,7 +269,7 @@ console.log(colorPicker.color.hexString); var activeColorIndex = colorPicker.color.index; ``` -当活动颜色改变时， `color:setActive` 事件将会触发： +Whenever the active color changes, the `color:setActive` event will fire: ```js colorPicker.on('color:setActive', function(color) { @@ -256,7 +277,7 @@ colorPicker.on('color:setActive', function(color) { }); ``` -也可以通过将所需颜色的索引传递到 `setActiveColor` 方法来设置活动颜色： +It's also possible to programmatically set the active color, by passing the index of the desired color to the `setActiveColor` method: ```js colorPicker.setActiveColor(1); From 671223935ee0038daf4e74542b0ea6a359b10cf0 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 25 Aug 2020 09:21:38 +0100 Subject: [PATCH 06/25] Update source file advanced.md --- docs/advanced.md | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/docs/advanced.md b/docs/advanced.md index 0c4a1bf..13c44b9 100644 --- a/docs/advanced.md +++ b/docs/advanced.md @@ -100,7 +100,7 @@ var colorPicker = new iro.ColorPicker('#picker', { #### Sliders - - - + -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` @@ -155,7 +174,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' } }, ] From e4cda45dce67b958f1af99374655d133afbe6982 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 24 Nov 2020 00:18:44 +0000 Subject: [PATCH 07/25] New translations advanced.md (Chinese Simplified) --- docs/zh/advanced.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/zh/advanced.md b/docs/zh/advanced.md index f8dc230..ef1eac6 100644 --- a/docs/zh/advanced.md +++ b/docs/zh/advanced.md @@ -98,6 +98,12 @@ var colorPicker = new iro.ColorPicker('#picker', { }); ``` +There's a few optional box-specific config options that can be used: + +| 选项 | 用途 | 默认值 | +|:----------- |:--------------------------------------------------------------------------------------------------- |:------ | +| `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 滑块 Date: Sun, 27 Dec 2020 19:45:32 +0000 Subject: [PATCH 10/25] New translations guide.md (Chinese Simplified) --- docs/zh/guide.md | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/docs/zh/guide.md b/docs/zh/guide.md index 409ffca..e1d93ba 100644 --- a/docs/zh/guide.md +++ b/docs/zh/guide.md @@ -67,26 +67,27 @@ var colorPicker = new iro.ColorPicker("#picker", { ### 可选选项 -| 选项 | 用途 | 默认值 | -|:----------------- |:------------------------------------------------------ |:----------------- | -| `width` | 控件的总宽度。 | `300` | -| `color` | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。 | `"#ffffff"` | -| `colors` | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。 | null | -| `display` | 颜色选择器根元素的 CSS 显示值。 | `"block"` | -| `id` | 颜色选择器根元素的 HTML ID。 | `null` | -| `layout` | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。 | `null` | -| `layoutDirection` | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`. | `"vertical"` | -| `padding` | 在控制手柄周围填充。 | `6` | -| `margin` | 各个组件之间的间隙。 | `12` | -| `borderWidth` | 控制点边框的宽度。 设置为 `0` 表示无边框。 | `0` | -| `borderColor` | 边框的颜色。 支持任何有效的 CSS 颜色。 | `"#ffffff"` | -| `handleRadius` | 控制手柄的半径 | `8` | -| `handleSvg` | 自定义手柄SVG，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `null` | -| `handleProps` | 自定义手柄属性，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `{x:0, y:0}` | -| `wheelLightness` | 如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色. | `true` | -| `wheelAngle` | 色轮的色调渐变的起始角度，以度为单位。 | `0` | -| `wheelDirection` | 颜色轮的色调渐变方向；可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 | `"anticlockwise"` | -| `sliderSize` | 滑块控制大小。 默认情况下，这将自动计算。 | `undefined` | +| 选项 | 用途 | 默认值 | +|:----------------- |:-------------------------------------------------------------------- |:----------------- | +| `width` | 控件的总宽度。 | `300` | +| `color` | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。 | `"#ffffff"` | +| `colors` | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。 | null | +| `display` | 颜色选择器根元素的 CSS 显示值。 | `"block"` | +| `id` | 颜色选择器根元素的 HTML ID。 | `null` | +| `layout` | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。 | `null` | +| `layoutDirection` | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`. | `"vertical"` | +| `padding` | 在控制手柄周围填充。 | `6` | +| `margin` | 各个组件之间的间隙。 | `12` | +| `borderWidth` | 控制点边框的宽度。 设置为 `0` 表示无边框。 | `0` | +| `borderColor` | 边框的颜色。 支持任何有效的 CSS 颜色。 | `"#ffffff"` | +| `handleRadius` | 控制手柄的半径 | `8` | +| `handleSvg` | 自定义手柄SVG，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `null` | +| `handleProps` | 自定义手柄属性，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `{x:0, y:0}` | +| `wheelLightness` | 如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色. | `true` | +| `wheelAngle` | 色轮的色调渐变的起始角度，以度为单位。 | `0` | +| `wheelDirection` | 颜色轮的色调渐变方向；可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 | `"anticlockwise"` | +| `sliderSize` | 滑块控制大小。 默认情况下，这将自动计算。 | `undefined` | +| `boxHeight` | Box control height. By default this will be the same as the `width`. | `undefined` | 更多关于颜色选择器选项、属性和方法的详细信息可以在 [颜色选择器API 文档](/colorPicker_api.html) 中找到。 From 7309ce2b9e9e6ff2f21df15835213bc702c511cf Mon Sep 17 00:00:00 2001 From: James Date: Tue, 16 Feb 2021 13:05:29 +0000 Subject: [PATCH 11/25] Update source file colorPicker_api.md --- docs/colorPicker_api.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/colorPicker_api.md b/docs/colorPicker_api.md index 3278938..667d292 100644 --- a/docs/colorPicker_api.md +++ b/docs/colorPicker_api.md @@ -115,6 +115,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` From 2af1c019f92b22aa8848e9fb5efdc166cc47d651 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 16 Feb 2021 13:05:30 +0000 Subject: [PATCH 12/25] Update source file guide.md --- docs/guide.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/guide.md b/docs/guide.md index 7860402..cb1619e 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -89,6 +89,7 @@ var colorPicker = new iro.ColorPicker("#picker", { | `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). From 84e8d8afe40c2a775a57f31da5303a5dc3410fc6 Mon Sep 17 00:00:00 2001 From: James Date: Sun, 21 Mar 2021 02:01:33 +0000 Subject: [PATCH 13/25] New translations index.md (Chinese Simplified) --- docs/zh/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh/index.md b/docs/zh/index.md index 753a6f5..fc644d1 100644 --- a/docs/zh/index.md +++ b/docs/zh/index.md @@ -3,7 +3,7 @@ layout: 首页 home: true --- -::: slot introduction A modern, SVG-based color picker widget for vanilla JavaScript. ::: +::: 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. ::: From 84e4150244a007c194a8f68e7c5f9aa8d740e2d4 Mon Sep 17 00:00:00 2001 From: James Date: Sat, 27 Mar 2021 11:50:24 +0000 Subject: [PATCH 14/25] Update source file index.md --- docs/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 76eb31b..577853e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,7 +4,7 @@ home: true --- ::: slot introduction -A modern, SVG-based color picker widget for vanilla JavaScript. +Modular, design-conscious color picker widget for JavaScript ::: ::: slot feature-colors From 8a6f6f8c828c71c3b7b846719f77064414a60e42 Mon Sep 17 00:00:00 2001 From: James Date: Sat, 27 Mar 2021 12:50:08 +0000 Subject: [PATCH 15/25] Update source file colorPicker_api.md --- docs/colorPicker_api.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/colorPicker_api.md b/docs/colorPicker_api.md index 667d292..6fda5ff 100644 --- a/docs/colorPicker_api.md +++ b/docs/colorPicker_api.md @@ -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. From 291bec5a1c26fefd481946122dedbd3582f31950 Mon Sep 17 00:00:00 2001 From: James Date: Sat, 27 Mar 2021 12:50:10 +0000 Subject: [PATCH 16/25] Update source file guide.md --- docs/guide.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/guide.md b/docs/guide.md index cb1619e..d98d180 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -83,6 +83,7 @@ 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` | From 7ea3ee901c5099c56a278da036c9e6d9b9ae3131 Mon Sep 17 00:00:00 2001 From: James Date: Sat, 27 Mar 2021 12:50:14 +0000 Subject: [PATCH 17/25] New translations colorPicker_api.md (Chinese Simplified) --- docs/zh/colorPicker_api.md | 38 ++++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/docs/zh/colorPicker_api.md b/docs/zh/colorPicker_api.md index 9f92771..19a5db4 100644 --- a/docs/zh/colorPicker_api.md +++ b/docs/zh/colorPicker_api.md @@ -79,41 +79,47 @@ title: 颜色选择器 API **默认值**: `8` +### `activeHandleRadius` + +Overrides `handleRadius` for the handle of the currently selected color. + +**Default value**: Inherits `handleRadius` value by default + ### `handleSvg` -[自定义手柄](/advanced.html#自定义手柄)的SVG参考。 这应该是一个与您的手柄SVG匹配的ID选择器。 +SVG reference for [Custom Handles](/advanced.html#custom-handles). This should be an ID selector that matches your handle SVG. -**默认值**: `null` (使用默认手柄) +**Default value**: `null` (default handle is used) ### `handleProps` -[自定义手柄](/advanced.html#自定义手柄) 的属性。 +Properties for [Custom Handles](/advanced.html#custom-handles). -**默认值**: `{ x: 0, y: 0 }` +**Default value**: `{ x: 0, y: 0 }` ### `wheelLightness` -如果设置为 `false`，当亮度降低时，颜色轮将不会变成黑色。 +If set to `false`, the color wheel will not fade to black when the lightness decreases. -**默认值**: `true` +**Default value**: `true` ### `wheelAngle` -色轮的色调渐变的起始角度，以度为单位。 +Starting angle of the color wheel's hue gradient, measured in degrees. -**默认值**: `0` +**Default value**: `0` ### `wheelDirection` -颜色轮的色调渐变方向，可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 +Direction of the color wheel's hue gradient, either `"clockwise"` or `"anticlockwise"`. -**默认值**: `"anticlockwise"` +**Default value**: `"anticlockwise"` ### `sliderSize` -滑块大小，以像素为单位。 +Slider size, measued in pixels. -**默认值**: 默认情况下，这将自动以 `padding` 和 `handleRadius` 计算。 +**Default value**: By default this will be calculated automatically from `padding` and `handleRadius`. ### `boxHeight` @@ -151,7 +157,7 @@ The ID value passed to the color picker config. ## 事件方法 -**参数：** +**Arguments:** * `{Number}` width 宽度 * `{Number}` height 高度 @@ -235,7 +241,7 @@ Set the currently 'active' color (the color that is selected and highlighted). Replaces all the colors currently on the color picker with a new set of colors. -**参数：** +**Arguments:** * `{Color []}` 新的颜色值 @@ -261,7 +267,7 @@ Force the color picker to rerender. Used internally to dispatch an event. All function arguments after the event type will be passed to the event callback. -**参数：** +**Arguments:** * `{String}` [事件类型](#事件) @@ -287,7 +293,7 @@ Similar to `color:change`, except this is only fired whenever the color is chang ### `input:start` -Fired whenever the users starts interacting with the color picker controls. 此事件的回调将收到当前的颜色对象。 +Fired whenever the users starts interacting with the color picker controls. This event's callbacks will receive the current color object. ### `input:move` From 5d15431c3e04818b60d7565f0858dfac10e5d75d Mon Sep 17 00:00:00 2001 From: James Date: Sat, 27 Mar 2021 12:50:15 +0000 Subject: [PATCH 18/25] New translations guide.md (Chinese Simplified) --- docs/zh/guide.md | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/docs/zh/guide.md b/docs/zh/guide.md index e1d93ba..c2e9281 100644 --- a/docs/zh/guide.md +++ b/docs/zh/guide.md @@ -67,27 +67,28 @@ var colorPicker = new iro.ColorPicker("#picker", { ### 可选选项 -| 选项 | 用途 | 默认值 | -|:----------------- |:-------------------------------------------------------------------- |:----------------- | -| `width` | 控件的总宽度。 | `300` | -| `color` | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。 | `"#ffffff"` | -| `colors` | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。 | null | -| `display` | 颜色选择器根元素的 CSS 显示值。 | `"block"` | -| `id` | 颜色选择器根元素的 HTML ID。 | `null` | -| `layout` | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。 | `null` | -| `layoutDirection` | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`. | `"vertical"` | -| `padding` | 在控制手柄周围填充。 | `6` | -| `margin` | 各个组件之间的间隙。 | `12` | -| `borderWidth` | 控制点边框的宽度。 设置为 `0` 表示无边框。 | `0` | -| `borderColor` | 边框的颜色。 支持任何有效的 CSS 颜色。 | `"#ffffff"` | -| `handleRadius` | 控制手柄的半径 | `8` | -| `handleSvg` | 自定义手柄SVG，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `null` | -| `handleProps` | 自定义手柄属性，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `{x:0, y:0}` | -| `wheelLightness` | 如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色. | `true` | -| `wheelAngle` | 色轮的色调渐变的起始角度，以度为单位。 | `0` | -| `wheelDirection` | 颜色轮的色调渐变方向；可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 | `"anticlockwise"` | -| `sliderSize` | 滑块控制大小。 默认情况下，这将自动计算。 | `undefined` | -| `boxHeight` | Box control height. By default this will be the same as the `width`. | `undefined` | +| 选项 | 用途 | 默认值 | +|:-------------------- |:--------------------------------------------------------------------------------------- |:----------------------- | +| `width` | 控件的总宽度。 | `300` | +| `color` | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。 | `"#ffffff"` | +| `colors` | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。 | null | +| `display` | 颜色选择器根元素的 CSS 显示值。 | `"block"` | +| `id` | 颜色选择器根元素的 HTML ID。 | `null` | +| `layout` | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。 | `null` | +| `layoutDirection` | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`. | `"vertical"` | +| `padding` | 在控制手柄周围填充。 | `6` | +| `margin` | 各个组件之间的间隙。 | `12` | +| `borderWidth` | 控制点边框的宽度。 设置为 `0` 表示无边框。 | `0` | +| `borderColor` | 边框的颜色。 支持任何有效的 CSS 颜色。 | `"#ffffff"` | +| `handleRadius` | 控制手柄的半径 | `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` | 更多关于颜色选择器选项、属性和方法的详细信息可以在 [颜色选择器API 文档](/colorPicker_api.html) 中找到。 From a466b62bfee704aa9aca5a4b72b40ea0c6261d9f Mon Sep 17 00:00:00 2001 From: James Date: Tue, 6 Apr 2021 02:42:25 +0100 Subject: [PATCH 19/25] New translations advanced.md (Chinese Simplified) --- docs/zh/advanced.md | 82 +++++++++++++++++++++------------------------ 1 file changed, 39 insertions(+), 43 deletions(-) diff --git a/docs/zh/advanced.md b/docs/zh/advanced.md index ef1eac6..55d4460 100644 --- a/docs/zh/advanced.md +++ b/docs/zh/advanced.md @@ -98,11 +98,11 @@ var colorPicker = new iro.ColorPicker('#picker', { }); ``` -There's a few optional box-specific config options that can be used: +可以使用一些可选的特定于盒子的配置选项： -| 选项 | 用途 | 默认值 | -|:----------- |:--------------------------------------------------------------------------------------------------- |:------ | -| `boxHeight` | Height of the box, measured in pixels. If this isn't set, it will use the box's width as its height | `null` | +| 选项 | 用途 | 默认值 | +|:----------- |:----------------------------------- |:------ | +| `boxHeight` | 方框的高度，以像素为单位。 如果没有设置，它将使用盒子的宽度作为其高度 | `null` | #### Sliders 滑块 @@ -167,11 +167,11 @@ There's a few optional box-specific config options that can be used: ]"/> --> -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**. +滑块允许用户调整特定的颜色通道。 有多种滑块类型可用，包括**色调**，**饱和度**，**值**，**红色**，**绿色**，**蓝色**，**alpha **和**冷暖值（开尔文温度）**。 ##### `sliderType 滑块类型` -The type of slider can be specified with the `sliderType` option: +可以使用 `sliderType` 选项指定滑块类型： ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -179,7 +179,7 @@ var colorPicker = new iro.ColorPicker('#picker', { { component: iro.ui.Slider, options: { - // can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin' + // 也可以是'saturation', 'value', 'red', 'green', 'blue', 'alpha' 或 'kelvin' sliderType: 'hue' } }, @@ -187,16 +187,16 @@ var colorPicker = new iro.ColorPicker('#picker', { }); ``` -If `sliderType` is set to `'kelvin'`, the temperature range can be set with these options: +如果 `sliderType` 设置为 `kelvin`, 色温范围可以用这些选项设置： -| Option | Purpose | Default Value | -|:---------------- |:--------------------------------------------------------------- |:------------- | -| `minTemperature` | Minimum color temperature, in Kelvin (smallest value is `2000`) | `2200` | -| `maxTemperature` | Maximum color temperature, in Kelvin (largest value is `40000`) | `11000` | +| 选项 | 用途 | 默认值 | +|:---------------- |:------------------------- |:------- | +| `minTemperature` | Kelvin最小色温值(最小值为 `2000`) | `2200` | +| `maxTemperature` | Kelvin最大色温值(最大值是 `40000`) | `11000` | ##### `sliderShape 滑块形状` -The `sliderShape` option can also be used to make the slider circular: +`sliderShape` 选项也可用于使滑块变为圆形： ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -213,11 +213,11 @@ var colorPicker = new iro.ColorPicker('#picker', { ## 多颜色选择器 -iro.js supports having more than one selectable colors on the same color picker at any time, which can be useful for situations where you want the user to be able to work with color themes or harmonies! +iro.js支持随时在同一颜色选择器上具有多种可选颜色，这对于希望用户能够处理颜色主题的情况非常有用！ ### 设置 -The `colors` [config option](/guide.html#color-picker-options) can be used to provide an intial list of colors to the color picker. Any [supported color format](/color_api.html#supported-color-formats) will work here: +`colors` [配置选项](/guide.html#颜色选择器选项) 可以用来为颜色选择器提供一份颜色列表。 任何 [支持的颜色格式](/color_api.html#支持的颜色格式) 将在这里工作： ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -231,9 +231,9 @@ var colorPicker = new iro.ColorPicker('#picker', { ### 使用多个颜色 -An array of color objects which can be used to **get** and **set** the value of each color can be found on the color picker's `colors` property. This array will be in the same order as the colors passed to the color picker during [setup](#setup). +颜色对象数组可用于** get **和** set **，每种颜色的值可以在颜色选择器的` colors `属性中找到。 此数组将在 [设置](#设置) 期间以相同的颜色传递给颜色选择器。 -It's worth checking out the [working with colors guide](/guide.html#working-with-colors) to learn more about how these individual color objects work, but here's a quick overview: +值得查阅[使用颜色指南](/guide.html#使用颜色)，以了解有关这些单个颜色对象如何工作的更多信息，但这里有一个简要概述： ```js //将第一种颜色设置为新值 @@ -250,7 +250,7 @@ colorPicker.colors.forEach(function (color) { ### 事件 -When working with [events](/guide.html#color-picker-events), it's important to remember that all of the color-change events (like `color:change`, `input:change`, `input:start`, etc) will fire for every color. To find which color fired the event, you can use the color's `index` property: +在处理[事件](/guide.html#颜色选择事件)时，请务必记住所有颜色更改事件将针对每种颜色触发 (例如` color:change ` ，` input:change `，` input:start `等)。 要找到触发事件的颜色，您可以使用颜色的 `index` 属性： ```js colorPicker.on('color:change', function(color) { @@ -265,7 +265,7 @@ colorPicker.on('color:change', function(color) { ### 活动颜色 -The 'active' color refers to the color that was most recently selected by the user. When working with multiple colors on the same color picker, the colorPicker's `color` property will always reflect the currently active color: +“活动”颜色是指最近由用户选择的颜色。 当在同一颜色选择器上使用多个颜色时，颜色选择器的 `color` 属性将永远反映当前活动的颜色： ```js //记录活动颜色的十六进制值 @@ -275,7 +275,7 @@ console.log(colorPicker.color.hexString); var activeColorIndex = colorPicker.color.index; ``` -Whenever the active color changes, the `color:setActive` event will fire: +当活动颜色改变时， `color:setActive` 事件将会触发： ```js colorPicker.on('color:setActive', function(color) { @@ -283,27 +283,27 @@ colorPicker.on('color:setActive', function(color) { }); ``` -It's also possible to programmatically set the active color, by passing the index of the desired color to the `setActiveColor` method: +也可以通过将所需颜色的索引传递到 `setActiveColor` 方法来设置活动颜色： ```js 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: +默认情况下，Silder 和 Box 组件将反映当前激活的任何颜色。 然而，这可以用他们的 `活动索引` 选项手动覆盖： ```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 + // 此滑块将始终反映索引2处的颜色 { component: iro.ui.Slider, options: { @@ -315,24 +315,24 @@ var colorPicker = new iro.ColorPicker("#demoWheel", { }); ``` -### Adding and Removing Colors +### 添加和删除颜色 -Colors can be added and removed from the color picker at any time: +颜色可以随时从颜色选择器中添加和删除： ```js -// add a color to the color picker -// this will add the color to the end of the colors array +//为颜色选择器添加颜色 +//这会将颜色添加到colors数组的末尾 colorPicker.addColor('rgb(100%, 100%, 100%)'); -// you can also specify an index for the new color -// add a color at index 0 +//您还可以为新颜色指定索引 +//在索引0添加颜色 colorPicker.addColor('rgb(100%, 100%, 100%)', 0); -// remove the color at index 1 +//删除索引1处的颜色 colorPicker.removeColor(1); ``` -You can also replace all of the colors at once with the `setColors` method: +您也可以用 `setColors` 方法一次性替换所有颜色： ```js colorPicker.setColors([ @@ -344,23 +344,19 @@ colorPicker.setColors([ ## 自定义手柄 -By default, the color picker uses circular control handles which can be adjusted with the `handleRadius` option. However, it's possible to override this and use your own SVGs to create custom handles. +默认情况下，颜色选择器使用圆形控制手柄，可以使用 `handleRadius` 选项进行调整。 然而，可以覆盖这个并使用你自己的SVG来创建自定义手柄。 -Handle SVGs need to be placed somewhere within the page HTML, and the SVG content also needs to be wrapped inside a `` tag with a unique `id`, which itself is wrapped in a `` tag: +手柄的SVG需要放置在页面HTML内的某处，并且SVG内容也需要包装在具有唯一 `id` 的 `` 标签内，该标签本身包装在 `` 标签中： ```svg - - - - - + ``` -Then when the color picker is created, make sure the `handleSvg` option is an **id selector** which matches the handle SVG: +然后，在创建颜色选择器时，确保` handleSvg `选项是与手柄SVG匹配的 **id选择器 **： ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -368,7 +364,7 @@ var colorPicker = new iro.ColorPicker('#picker', { }); ``` -The custom handle SVG will be drawn as if the center point is at `x 0, y 0`, but if you need to adjust the position of the handle, the `handleProps` option can be used to change the center point: +自定义手柄SVG将被绘制为中心点在 `x 0, y 0` ，但是如果需要调整手柄的位置，` handleProps` 选项用于更改中心点： ```js var colorPicker = new iro.ColorPicker('#picker', { @@ -377,4 +373,4 @@ var colorPicker = new iro.ColorPicker('#picker', { }); ``` -It's recommended to check out the interactive [Custom Handle Demo](https://codepen.io/rakujira/pen/vbeENp?editors=1010) on Codepen to get a better understanding of how this feature works. \ No newline at end of file +建议在 Codepen 上查看交互式 [自定义手柄演示](https://codepen.io/rakujira/pen/vbeENp?editors=1010) 以更好地了解此功能的运作方式。 \ No newline at end of file From 2c5da15a082422f95adcade47598d486a8b2c536 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 6 Apr 2021 02:42:27 +0100 Subject: [PATCH 20/25] New translations colorPicker_api.md (Chinese Simplified) --- docs/zh/colorPicker_api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh/colorPicker_api.md b/docs/zh/colorPicker_api.md index 19a5db4..e24e7e8 100644 --- a/docs/zh/colorPicker_api.md +++ b/docs/zh/colorPicker_api.md @@ -81,7 +81,7 @@ title: 颜色选择器 API ### `activeHandleRadius` -Overrides `handleRadius` for the handle of the currently selected color. +为当前选择的颜色重写 `手柄半径`。 **Default value**: Inherits `handleRadius` value by default From 36263df3fc8891ff9f6e4db52ca14f48a2117021 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 6 Apr 2021 03:46:31 +0100 Subject: [PATCH 21/25] New translations colorPicker_api.md (Chinese Simplified) --- docs/zh/colorPicker_api.md | 106 ++++++++++++++++++------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/docs/zh/colorPicker_api.md b/docs/zh/colorPicker_api.md index e24e7e8..5ba26b7 100644 --- a/docs/zh/colorPicker_api.md +++ b/docs/zh/colorPicker_api.md @@ -81,97 +81,97 @@ title: 颜色选择器 API ### `activeHandleRadius` -为当前选择的颜色重写 `手柄半径`。 +为当前选择的颜色重写 `handleRadius`。 -**Default value**: Inherits `handleRadius` value by default +**默认值**: 继承 `handleRadius` 的默认值 ### `handleSvg` -SVG reference for [Custom Handles](/advanced.html#custom-handles). This should be an ID selector that matches your handle SVG. +[自定义手柄](/advanced.html#自定义手柄)的SVG参考。 这应该是一个与您的手柄SVG匹配的ID选择器。 -**Default value**: `null` (default handle is used) +**默认值**: `null` (使用默认手柄) ### `handleProps` -Properties for [Custom Handles](/advanced.html#custom-handles). +[自定义手柄](/advanced.html#自定义手柄) 的属性。 -**Default value**: `{ x: 0, y: 0 }` +**默认值**: `{ x: 0, y: 0 }` ### `wheelLightness` -If set to `false`, the color wheel will not fade to black when the lightness decreases. +如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色. -**Default value**: `true` +**默认值**: `true` ### `wheelAngle` -Starting angle of the color wheel's hue gradient, measured in degrees. +色轮的色调渐变的起始角度，以度为单位。 -**Default value**: `0` +**默认值**: `0` ### `wheelDirection` -Direction of the color wheel's hue gradient, either `"clockwise"` or `"anticlockwise"`. +颜色轮的色调渐变方向，可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 -**Default value**: `"anticlockwise"` +**默认值**: `"anticlockwise"` ### `sliderSize` -Slider size, measued in pixels. +滑块大小，以像素为单位。 -**Default value**: By default this will be calculated automatically from `padding` and `handleRadius`. +**默认值**: 默认情况下，这将自动以 `padding` 和 `handleRadius` 计算。 ### `boxHeight` -Box control height, measued in pixels. +盒子控制高度，以像素计量。 -**Default value**: By default this will be the same value as `width`. +**默认值**: 默认情况下，这将与 `宽度` 相同。 ## 属性 ### `color` -An [`iro.Color`](/colorPicker_api.html) object representing the currently selected color. Updating this color object will also update the seclected color in the picker. +[`iro.Color`](/colorPicker_api.html) 对象代表当前选中的颜色。 更新此颜色对象也会更新选择器中的选定颜色。 -**See also:** [Using the Selected Color](/guide.html#color-picker-options) +另请参见：[使用选定的颜色](/guide.html#颜色选择器选项) ### `colors` -An array of [`iro.Color`](/colorPicker_api.html) objects representing the currently selected colors, used for [multicolor](/advanced.html#multicolor). Updating any of these color objects will also update the seclected color in the picker. +代表当前选定颜色的 [`iro.Color`](/colorPicker_api.html) 对象数组，用于[多颜色](/advanced.html#多颜色选择器)。 更新任何这些颜色对象也将更新选择器中的选定颜色。 ### `el` -The HTML element being used as the color picker container. +使用 HTML 元素作为颜色选择器容器。 ### `base` -The HTML element being used as the color picker's base element. +使用 HTML 元素作为颜色选择器的基本元素。 ### `props` -The initial configeration options passed to the color picker. +初始配置选项传递到颜色选择器。 ### `id` -The ID value passed to the color picker config. +将ID值传递到颜色选择器配置。 ## 事件方法 -**Arguments:** +**参数：** * `{Number}` width 宽度 * `{Number}` height 高度 ### `on` -Add a listener to a color picker event. +将监听器添加到颜色选择器事件中。 -**Arguments:** +**参数：** * `{String | Array}` [事件类型](#事件) * `{Function}` 回调 -**Example:** +**示例︰** ```js //做一个处理函数 @@ -186,14 +186,14 @@ example.on("color:change", colorChangeCallback); ### `off` -Remove event listeners that were registered with `on`. +删除在 `on` 上注册的事件侦听器。 -**Arguments:** +**参数：** * `{String | Array}` [事件类型](#事件) * `{Function}` 回调 -**Example:** +**示例︰** ```js //做一个处理函数 @@ -214,7 +214,7 @@ example.off("color:change", colorChangeCallback); ### `addColor` -Add another selectable color to the color picker. +添加另一个可选择的颜色到颜色选择器。 **参数：** @@ -223,7 +223,7 @@ Add another selectable color to the color picker. ### `removeColor` -Remove a color from the color picker. +从颜色选择器中移除颜色。 **参数：** @@ -231,7 +231,7 @@ Remove a color from the color picker. ### `setActiveColor` -Set the currently 'active' color (the color that is selected and highlighted). +设置当前的“活动”颜色 (选定并高亮的颜色)。 **参数：** @@ -239,9 +239,9 @@ Set the currently 'active' color (the color that is selected and highlighted). ### `setColors` -Replaces all the colors currently on the color picker with a new set of colors. +将当前颜色选择器上的所有颜色替换为新的颜色。 -**Arguments:** +**参数：** * `{Color []}` 新的颜色值 @@ -249,72 +249,72 @@ Replaces all the colors currently on the color picker with a new set of colors. ### `resize` -Set the color picker to a new size. +将颜色选择器设置为新的大小。 -**Arguments:** +**参数：** * `{Number}` width 宽度 ### `reset` -Reset the color picker back to the original color value passed to the color picker config. +将颜色选择器重置为传递到颜色选择器配置的原始颜色值。 ### `forceUpdate` -Force the color picker to rerender. +强制选取颜色者重新渲染。 ### `emit` -Used internally to dispatch an event. All function arguments after the event type will be passed to the event callback. +用于内部发送事件。 事件类型之后的所有函数参数都将传递给事件回调。 -**Arguments:** +**参数：** * `{String}` [事件类型](#事件) ### `deferredEmit` -Used internally to dispatch an deferred event. Deferred events are stored until an event listener for them is added with `on`. +用于内部发送延期事件。 延迟事件将被存储到事件监听器添加到 `on` 上。 -**Arguments:** +**参数：** * `{String}` [事件类型](#事件) ## 事件 -The color picker's [on](#on) method can be used to register callbacks for color picker events, such as when the selected color changes or when the user begins interacting with the picker. These callbacks can also be removed with the [off](#off) method. +颜色选择器的 [on](#on) 方法可用于注册颜色选择器事件的回调，例如，当选定的颜色发生更改或用户开始与选择器进行交互时。 这些回调也可以使用 [off](#off) 方法被删除。 ### `color:change` -Fired whenever the color changes -- either when the user interacts with the controls, or when it is set via code. This event's callbacks will receive the color object that changed, as well as an object which reflects which h,s,v channels changed. It is safe to modify the `color` object within callbacks for this event. +当颜色发生变化时 -- 当用户与控制器交互时，或者当它是通过代码设置时 -- 触发。 此事件的回调将收到更改的颜色对象，以及一个反映 h,s,v 频道改变的对象。 在回调中修改此事件的 `color` 对象是安全的。 ### `input:change` -Similar to `color:change`, except this is only fired whenever the color is changed with *direct user input*. Callbacks for this event recieve exactly the same parameters as `color:change`. It is also safe to modify the `color` object within callbacks for this event. +类似于 `color:change`，除非这只是在颜色与 *直接用户输入* 改变时才触发的。 回调此事件接收的参数与 `color:change` 完全相同。 在回调中修改此事件的 `color` 对象也是安全的。 ### `input:start` -Fired whenever the users starts interacting with the color picker controls. This event's callbacks will receive the current color object. +每当用户开始与色彩选择器控制交互时都会触发。 此事件的回调将收到当前的颜色对象。 ### `input:move` -Fired when the user moves their pointer/mouse after beginning interaction. This event's callbacks will receive the current color object. +当用户在开始交互后移动他们的指针/鼠标时触发。 此事件的回调将收到当前的颜色对象。 ### `input:end` -Fired whenever the user stops interacting with the color picker controls. This event's callbacks will receive the current color object. +每当用户停止与色彩选择器控件交互时触发。 此事件的回调将收到当前的颜色对象。 ### `color:init` -Fired whenever a new color is created. This event's callbacks will receive the new creat color object. +每次创建新颜色时都会触发。 此事件的回调将收到新的创建颜色对象。 ### `color:remove` -Fired when a color is removed from the color picker. This event's callbacks will receive the removed color object +当从颜色选择器中移除颜色时触发。 此事件的回调将接收删除的颜色对象。 ### `color:setActive` -Fired whenever the 'active' color is switched. This event's callbacks will receive the active color object. +切换“活动”颜色时触发。 此事件的回调将收到活动的颜色对象。 ### `mount` -Fired when the colorPicker's UI has been mounted to the DOM and is ready for user interaction. The colorPicker object is passed to this event's callback function. \ No newline at end of file +当颜色选择器的界面已安装到 DOM 并准备好用户交互时触发。 颜色选择器对象会传递到此事件的回调函数中。 \ No newline at end of file From ab6a8ade3540b7b9a53db0441675545146f8adda Mon Sep 17 00:00:00 2001 From: James Date: Tue, 6 Apr 2021 03:46:33 +0100 Subject: [PATCH 22/25] New translations guide.md (Chinese Simplified) --- docs/zh/guide.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/docs/zh/guide.md b/docs/zh/guide.md index c2e9281..13dde6d 100644 --- a/docs/zh/guide.md +++ b/docs/zh/guide.md @@ -67,28 +67,28 @@ var colorPicker = new iro.ColorPicker("#picker", { ### 可选选项 -| 选项 | 用途 | 默认值 | -|:-------------------- |:--------------------------------------------------------------------------------------- |:----------------------- | -| `width` | 控件的总宽度。 | `300` | -| `color` | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。 | `"#ffffff"` | -| `colors` | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。 | null | -| `display` | 颜色选择器根元素的 CSS 显示值。 | `"block"` | -| `id` | 颜色选择器根元素的 HTML ID。 | `null` | -| `layout` | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。 | `null` | -| `layoutDirection` | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`. | `"vertical"` | -| `padding` | 在控制手柄周围填充。 | `6` | -| `margin` | 各个组件之间的间隙。 | `12` | -| `borderWidth` | 控制点边框的宽度。 设置为 `0` 表示无边框。 | `0` | -| `borderColor` | 边框的颜色。 支持任何有效的 CSS 颜色。 | `"#ffffff"` | -| `handleRadius` | 控制手柄的半径 | `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` | +| 选项 | 用途 | 默认值 | +|:-------------------- |:------------------------------------------------------ |:----------------- | +| `width` | 控件的总宽度。 | `300` | +| `color` | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。 | `"#ffffff"` | +| `colors` | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。 | null | +| `display` | 颜色选择器根元素的 CSS 显示值。 | `"block"` | +| `id` | 颜色选择器根元素的 HTML ID。 | `null` | +| `layout` | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。 | `null` | +| `layoutDirection` | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`. | `"vertical"` | +| `padding` | 在控制手柄周围填充。 | `6` | +| `margin` | 各个组件之间的间隙。 | `12` | +| `borderWidth` | 控制点边框的宽度。 设置为 `0` 表示无边框。 | `0` | +| `borderColor` | 边框的颜色。 支持任何有效的 CSS 颜色。 | `"#ffffff"` | +| `handleRadius` | 控制手柄的半径 | `8` | +| `activeHandleRadius` | 当前选中颜色的控制句柄半径。 | 继承 `句柄半径` | +| `handleSvg` | 自定义手柄SVG，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `null` | +| `handleProps` | 自定义手柄属性，用于 [自定义手柄](/advanced.html#自定义手柄)。 | `{x:0, y:0}` | +| `wheelLightness` | 如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色. | `true` | +| `wheelAngle` | 色轮的色调渐变的起始角度，以度为单位。 | `0` | +| `wheelDirection` | 颜色轮的色调渐变方向；可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 | `"anticlockwise"` | +| `sliderSize` | 滑块控制大小。 默认情况下，这将自动计算。 | `undefined` | +| `boxHeight` | 盒子控制高度. 默认情况下，这将与 `宽度` 相同。 | `undefined` | 更多关于颜色选择器选项、属性和方法的详细信息可以在 [颜色选择器API 文档](/colorPicker_api.html) 中找到。 From 2c46c4d28417f0b97b5798299b76613e7fd2406f Mon Sep 17 00:00:00 2001 From: James Date: Tue, 6 Apr 2021 03:46:34 +0100 Subject: [PATCH 23/25] New translations index.md (Chinese Simplified) --- docs/zh/index.md | 72 ++++++++++++++++++++++++------------------------ 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/docs/zh/index.md b/docs/zh/index.md index fc644d1..3943c45 100644 --- a/docs/zh/index.md +++ b/docs/zh/index.md @@ -3,31 +3,31 @@ layout: 首页 home: true --- -::: slot introduction Modular, design-conscious color picker widget for JavaScript ::: +::: slot introduction 适用于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 通过一个简单，无摩擦的API处理十六进制，RGB，HSV和HSL格式的颜色(还有开尔文温度！)。 ::: ::: slot feature-colors-example ```js -// Get the color as an RGB string -var rgb = colorPicker.color.rgbString; +// 获取颜色为 RGB 字符串 +var rgb = colorPicker.color。 gbString; // rgb = "{{ rgbString }}" -// Get the color as a HSV object -var hsv = colorPicker.color.hsv; +// 将颜色作为一个 HSV 对象 +var hsv = colorPicker.color. sv; // hsv = {{ rgbString }} -// Set the color from a hex string -colorPicker.color.hexString = "#fff"; +// 设置十六进制字符串的颜色 +colorPicker.color。 exString = "#fff"; -// Set the color from a temperature -colorPicker.color.kelvin = 6000; +// 从温度设置颜色 +color.color.kelvin = 6000; ``` ::: -::: slot feature-multicolor Add multiple colors to the same color picker for selecting color harmonies and themes. ::: +::: slot feature-multicolor 将多个颜色添加到同一个选取器以选择主题。 ::: -::: slot feature-components Create the perfect color picker from a selection of pre-built UI components. ::: +::: slot feature-components 从预构建界面组件中创建完美的颜色选择器。 ::: ::: slot tutorial-iro-js ### 安装 @@ -38,66 +38,66 @@ colorPicker.color.kelvin = 6000; $ npm install @jaames/iro --save ``` -Then if you are using a module bundler like Webpack or Rollup, import iro.js into your project: +如果您使用的是Webpack或Rollup之类的模块捆绑器，请将iro.js导入您的项目中： ```js -// Using ES6 module syntax +//使用ES6模块语法 import iro from '@jaames/iro'; -// Using CommonJS modules +//使用CommonJS模块 const iro = require('@jaames/iro'); ``` ##### 也可使用 CDN -Drop this script into the `` of your page's HTML: +将此脚本拖放到您页面的 HTML `` 中： ```html ``` -When you manually include the library like this, iro.js will be made globally available on `window.iro`. +当您手动包含这样的库时，iro.js将在 `window.iro` 上全局可用。 ##### 也可下载并自己托管 -**[Development version](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.js)**
Uncompressed, with source comments included. Intended for debugging. +**[开发版本](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.js)**
未压缩，包括源注释。 用于调试。 -**[Production version](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.min.js)**
Minified and optimized version. +**[生产版本](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.min.js)**
缩小和优化的版本。 ### 颜色选择器设置 -First, we need a HTML element with a unique identifier (such as an `id` attribute) to act as a container for the color picker: +首先， 我们需要一个具有唯一标识符的HTML元素 (例如一个 `id` 属性) 作为颜色选择器的容器： ```html
``` -Then use JavaScript to create a new `iro.ColorPicker` with a CSS selector that matches your chosen container element: +然后使用 JavaScript 创建一个新的 `iro.ColorPicker` 与您选择的容器元素匹配的 CSS 选择器： ```js var colorPicker = new iro.ColorPicker('#picker'); ``` -You can also use a DOM object instead of a CSS selector here -- this might be more suitable if you're integrating iro.js into an application built with a framework such as Vue, React, etc. +您还可以在此处使用DOM对象而不是CSS选择器 -- 如果将iro.js集成到使用诸如Vue，React等框架构建的应用程序中，这可能更合适。 ### 颜色选择器选项 -The color picker can be customized by passing a set of options to the second `iro.ColorPicker` parameter: +可以通过将一组选项传递给 `iro.ColorPicker` 的第二个参数来自定义颜色选择器： ```js var colorPicker = new iro.ColorPicker("#picker", { - // Set the size of the color picker + //设置颜色选择器的大小 width: 320, - // Set the initial color to pure red + //将初始颜色设置为纯红色 color: "#f00" }); ``` -A full list of color picker options can be found in the [options documentation](guide.html#color-picker-options). +颜色选择器选项的完整列表可以在 [选项文档](guide.html#颜色选择器选项) 中找到。 ### 使用颜色 -Each color picker has a color object which stores the currently selected color. +每个颜色选择器都有一个 color 对象来存储当前选中的颜色。 ```js @@ -105,29 +105,29 @@ var hex = colorPicker.color.hexString; console.log(hex); // hex = "#ff0000" ``` -Whenever you set any of these color properties, the color picker will automatically update to match it! +每当您设置这些颜色属性时，颜色选择器将自动更新以匹配它！ ```js colorPicker.color.hsl = { h: 180, s: 100, l: 50 }; -// Color picker updates to match hsl(180, 100, 50) +// 颜色选择器更新以匹配hsl(180, 100, 50) ``` -A full list of color properties can be found in the [color documentation](/guide.html#working-with-colors). +有关颜色属性的完整列表，请参见[颜色文档](/guide.html#使用颜色)。 ### 事件 -Events let you to run your own code after certain things have happened, like when the selected color has changed or when the user has interacted with the color picker. +通过事件，您可以在某些事情发生后运行自己的代码，例如，当选定的颜色发生更改或用户与颜色选择器进行交互时。 -The color picker's [`on`](colorPicker_api.html#on) method can be used to attach functions that will be called whenever a particular event is fired. For example, we can add a listener that fires whenever the color is changed: +拾色器的 [`on`](colorPicker_api.html#on) 方法可用于附加在触发特定事件时将调用的函数。 例如，我们可以添加一个监听器，当颜色被更改时触发： ```js -// listen to a color picker's color:change event -// color:change callbacks receive the current color +//收听颜色选择器的color:change事件 +//color:change回调接收当前颜色 colorPicker.on('color:change', function(color) { - // log the current color as a HEX string + //将当前颜色记录为十六进制字符串 console.log(color.hexString); }); ``` -For a full overview of the available events can be found in the [events documentation](/guide.html#color-picker-events). ::: \ No newline at end of file +关于可用事件的全面概述，可在 [事件文档](/guide.html#颜色选择事件) 中找到。 ::: \ No newline at end of file From ea016de9c84a9524d356175b470adbb73b9a7929 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 1 Jul 2021 00:31:58 +0100 Subject: [PATCH 24/25] New translations advanced.md (Chinese Simplified) --- docs/zh/advanced.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/zh/advanced.md b/docs/zh/advanced.md index 55d4460..78b9058 100644 --- a/docs/zh/advanced.md +++ b/docs/zh/advanced.md @@ -351,7 +351,11 @@ colorPicker.setColors([ ```svg - + + + + + ``` From a37115b147a9b4f33e506072667f8c7b0dc76339 Mon Sep 17 00:00:00 2001 From: James Date: Sun, 14 Aug 2022 09:01:58 -0700 Subject: [PATCH 25/25] New translations index.md (Chinese Simplified) --- docs/zh/index.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/zh/index.md b/docs/zh/index.md index 3943c45..b365d08 100644 --- a/docs/zh/index.md +++ b/docs/zh/index.md @@ -3,9 +3,13 @@ layout: 首页 home: true --- -::: slot introduction 适用于JavaScript的模块化、注重设计的拾色器小部件 ::: +::: slot introduction +适用于JavaScript的模块化、注重设计的拾色器小部件 +::: -::: slot feature-colors 通过一个简单，无摩擦的API处理十六进制，RGB，HSV和HSL格式的颜色(还有开尔文温度！)。 ::: +::: slot feature-colors +通过一个简单，无摩擦的API处理十六进制，RGB，HSV和HSL格式的颜色(还有开尔文温度！)。 +::: ::: slot feature-colors-example ```js @@ -25,9 +29,13 @@ color.color.kelvin = 6000; ``` ::: -::: slot feature-multicolor 将多个颜色添加到同一个选取器以选择主题。 ::: +::: slot feature-multicolor +将多个颜色添加到同一个选取器以选择主题。 +::: -::: slot feature-components 从预构建界面组件中创建完美的颜色选择器。 ::: +::: slot feature-components +从预构建界面组件中创建完美的颜色选择器。 +::: ::: slot tutorial-iro-js ### 安装