Skip to content

Commit

Permalink
docs: improve colorPicker docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pointhalo
pointhalo committed Aug 20, 2024
1 parent 51f76a6 commit 72f8c43
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 89 deletions.
167 changes: 104 additions & 63 deletions content/input/colorpicker/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,47 +7,67 @@ icon: doc-colorPlatteNew
brief: Quickly and easily select colors, and provide a dropper tool to pick colors
---



## Demos

### How to import

ColorPicker component supported from v2.64.0

```jsx import
import { ColorPicker } from '@douyinfe/semi-ui';
```


### Basic Use

#### In portal

```jsx live=true
import React from 'react';
import { ColorPicker, Button } from '@douyinfe/semi-ui';
function Demo(){
return <div>
<ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}/>

<br/>
<div>自定义 trigger</div>

<ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}>
<Button> Trigger </Button>
</ColorPicker>

</div>
function Demo() {
return (
<div>
<ColorPicker
alpha={true}
onChange={value => {
console.log(value);
}}
usePopover={true}
/>

<br />
<div>自定义 trigger</div>

<ColorPicker
alpha={true}
onChange={value => {
console.log(value);
}}
usePopover={true}
>
<Button> Trigger </Button>
</ColorPicker>
</div>
);
}

```

#### Normal display

```jsx live=true
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
return <ColorPicker alpha={true} onChange={value=>{console.log(value)}}/>
import React from 'react';

function Demo() {
return (
<ColorPicker
alpha={true}
onChange={value => {
console.log(value);
}}
/>
);
}

```

### Eyedropper Color Picker
Expand All @@ -58,13 +78,20 @@ Use `eyeDropper={true}` to enable the eyedropper function, which supports pickin
To enable this function, the current web page must be deployed in a secure context such as HTTPS or localhost domain name, otherwise it will have no effect. The user's browser version must be Chromium > 95
</Notice>


```jsx live=true
import React from 'react';
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value)}}/>
function Demo() {
return (
<ColorPicker
alpha={true}
eyeDropper={true}
onChange={value => {
console.log(value);
}}
/>
);
}

```

### Default Value
Expand All @@ -76,68 +103,82 @@ The defaultValue (uncontrolled) and value (controlled) you pass in should also b
We provide a static tool function `colorStringToValue` on the component class to convert common color strings to this object, supporting direct passing of strings such as rgb(57,197,187) #39c5bb and hsv(176,71,77).

```jsx live=true
import React from 'react';
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
return <div>
<ColorPicker
defaultValue={ColorPicker.colorStringToValue("rgb(57,197,187)")}
onChange={(value)=>{
console.log(value)
}} className={""} alpha={true}/>
</div>

function Demo() {
return (
<div>
<ColorPicker
defaultValue={ColorPicker.colorStringToValue('rgb(57,197,187)')}
onChange={value => {
console.log(value);
}}
alpha={true}
/>
</div>
);
}

```

### Controlled

Controlled use by passing in value

```jsx live=true
import React from 'react';
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
const [value,setValue] = useState(ColorPicker.colorStringToValue("#39c5bb"));
function Demo() {
const [value, setValue] = useState(ColorPicker.colorStringToValue('#39c5bb'));
console.log(value);
return <div>
<ColorPicker value={value} onChange={(value)=>{
setValue(value)
}} className={""} alpha={true}/>
</div>

return (
<div>
<ColorPicker
value={value}
onChange={value => {
setValue(value);
}}
alpha={true}
/>
</div>
);
}

```


### Rendering additional elements at the top and bottom

Use `topSlot` and `bottomSlot` to render additional elements at the top and bottom

```jsx live=true
import React from 'react';
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
return <ColorPicker topSlot={<div>
TopSlot
</div>} bottomSlot={<div>Bottom Slot</div>} alpha={true} onChange={value=>{console.log(value)}}/>
function Demo() {
return (
<ColorPicker
topSlot={<div>TopSlot</div>}
bottomSlot={<div>Bottom Slot</div>}
alpha={true}
onChange={value => {
console.log(value);
}}
/>
);
}

```

### API Table

| Parameter | Description | Type | Default value |
|---------------|------------|---------------|------|
| onChange | User selected color callback | (value)=>void | - |
| alpha | Whether to enable transparency selection | boolean | true |
| bottomSlot | Bottom rendering additional elements | ReactNode | - |
| className | Class name | string | - |
| defaultFormat | Default format for manual input | rgba hex hsva | hex |
| defaultValue | Default value | Object | - |
| eyeDropper | Whether to enable the eyedropper color picker | boolean | true |
| height | Height | number | 280 |
| style | Style | CSSProperties | - |
| topSlot | Top rendering additional elements | ReactNode | - |
| width | Width | number | 280 |
| usePopover | Whether to put in Popover rendering | boolean | false |
| popoverProps | When placing a Popover, the props passed to the Popover | Popover Props | - |
| Parameter | Description | Type | Default value |
| ------------- | ------------------------------------------------------- | ------------- | ------------- |
| onChange | User selected color callback | (value)=>void | - |
| alpha | Whether to enable transparency selection | boolean | true |
| bottomSlot | Bottom rendering additional elements | ReactNode | - |
| className | Class name | string | - |
| defaultFormat | Default format for manual input | rgba hex hsva | hex |
| defaultValue | Default value | Object | - |
| eyeDropper | Whether to enable the eyedropper color picker | boolean | true |
| height | Height | number | 280 |
| style | Style | CSSProperties | - |
| topSlot | Top rendering additional elements | ReactNode | - |
| width | Width | number | 280 |
| usePopover | Whether to put in Popover rendering | boolean | false |
| popoverProps | When placing a Popover, the props passed to the Popover | Popover Props | - |
63 changes: 37 additions & 26 deletions content/input/colorpicker/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ brief: 快速便捷地选择颜色，并提供滴管工具取色

### 如何引入

ColorPicker 从 v2.64.0 开始支持

```jsx import
import { ColorPicker } from '@douyinfe/semi-ui';
Expand All @@ -24,28 +25,27 @@ import { ColorPicker } from '@douyinfe/semi-ui';
#### 放在弹层

```jsx live=true
import React from 'react';
import { ColorPicker, Button } from '@douyinfe/semi-ui';
function Demo(){
function Demo() {
return <div>
<ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}/>

<ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}/>
<br/>
<div>自定义 trigger</div>

<ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}>
<ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}>
<Button> Trigger </Button>
</ColorPicker>

</div>
</div>;
}

```

#### 正常展示
```jsx live=true
import React from 'react';
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
return <ColorPicker alpha={true} onChange={value=>{console.log(value)}}/>
function Demo() {
return <ColorPicker alpha={true} onChange={value=>{console.log(value);}}/>;
}

```
Expand All @@ -60,9 +60,10 @@ function Demo(){


```jsx live=true
import React from 'react';
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value)}}/>
function Demo() {
return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value);}}/>;
}

```
Expand All @@ -76,14 +77,16 @@ function Demo(){

```jsx live=true
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
import React from 'react';

function Demo() {
return <div>
<ColorPicker
defaultValue={ColorPicker.colorStringToValue("rgb(57,197,187)")}
onChange={(value)=>{
console.log(value)
}} className={""} alpha={true}/>
</div>
console.log(value);
}} className={""} alpha={true}/>
</div>;

}

Expand All @@ -95,14 +98,18 @@ function Demo(){

```jsx live=true
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
const [value,setValue] = useState(ColorPicker.colorStringToValue("#39c5bb"));
console.log(value);
import React from 'react';
function Demo() {
const [value, setValue] = useState(ColorPicker.colorStringToValue("#39c5bb"));
return <div>
<ColorPicker value={value} onChange={(value)=>{
setValue(value)
}} className={""} alpha={true}/>
</div>
<ColorPicker
value={value}
onChange={(value)=>{
setValue(value);
}}
alpha={true}
/>
</div>;

}

Expand All @@ -114,11 +121,15 @@ function Demo(){
使用 `topSlot` 和 `bottomSlot` 在顶部和底部渲染额外元素

```jsx live=true
import React from 'react';
import { ColorPicker } from '@douyinfe/semi-ui';
function Demo(){
return <ColorPicker topSlot={<div>
TopSlot
</div>} bottomSlot={<div>Bottom Slot</div>} alpha={true} onChange={value=>{console.log(value)}}/>
function Demo() {
return <ColorPicker
topSlot={<div> TopSlot</div>}
bottomSlot={<div>Bottom Slot</div>}
alpha={true}
onChange={value=>{console.log(value);}}
/>;
}

```
Expand Down

0 comments on commit 72f8c43

Please sign in to comment.