Skip to content

docs(color-picker): 优化文档api 格式 新增colorpicker 英文文档 #109

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.

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

Merged
merged 5 commits into from
Dec 31, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 2 additions & 12 deletions packages/devui-vue/docs/components/color-picker/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export default defineComponent({
:::

### 基础面板自定义
设置可供选择的基础面板颜色样本
设置可自定义配置的基础面板颜色样本
:::demo

```vue
Expand Down Expand Up @@ -151,20 +151,10 @@ export default defineComponent({
d-color-picker 参数

| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
| ------------ | --------- | ------ | ------------------------------------------- | --------------------------- |
| :---: | :---: | :---: | :---: | :---: |
| mode | `String` | `rgb` | 切换颜色模式 | [颜色模式](#颜色模式) | |
| dotSize | `Number` | `15` | 调色板圆点大小 | | |
| swatches | `Array` | | 预定义样本面板 | [色块样本](#基础面板自定义) | |
| show-alpha | `Boolean` | `true` | 是否展示透明度进度条 | [透明度展示](#颜色透明度) | |
| show-history | `Boolean` | `true` | 是否展示历史颜色 | [历史颜色展示](#历史颜色) | |
| v-model | `String` | | 绑定颜色Value支持(hex , rgb , hsl , hsv ) | | |



d-color-picker 事件

| 事件 | 类型 | 说明 | 跳转 Demo |
| ---- | ---- | ---- | --------- |
| | | | |
| | | | |
| | | | |
2 changes: 1 addition & 1 deletion packages/devui-vue/docs/components/ripple/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ Card 组件
### API

| 参数 | 类型 | 默认 | 说明 |
| :-------------: | :-------: | :---------: | :-------------------------------- |
| :---: | :---: | :---: | :---: |
| color | `string` | `#00000050` | 可选,默认当前文本颜色 |
| initial-opacity | `number` | `0.1` | 可选,初始交互效果透明度大小 |
| final-opacity | `number` | `0.1` | 可选,结束交互效果长按透明度大小 |
Expand Down
17 changes: 8 additions & 9 deletions packages/devui-vue/docs/components/statistic/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,14 +164,14 @@ export default {

### d-statistic

| 参数 | 类型 | 默认 | 说明 |
| ------------------ | ------------------ | -------- | ---------------- |
| title | `string \| v-slot` | - | 数值的标题 |
| extra | `string \| v-slot` | - | 额外内容 |
| value | `number \| string` | - | 数值内容 |
| group-separator | `string` | , | 设置千分位标识符 |
| precision | `number` | - | 设置数值精度 |
| suffix | `string \| v-slot` | - | 设置数值的后缀 |
| 参数 | 类型 | 默认 | 说明 |
| :---: | :---: | :---: | :---: |
| title | `string \| v-slot` | - | 数值的标题 |
| extra | `string \| v-slot` | - | 额外内容 |
| value | `number \| string` | - | 数值内容 |
| group-separator | `string` | - | 设置千分位标识符 |
| precision | `number` | - | 设置数值精度 |
| suffix | `string \| v-slot` | - | 设置数值的后缀 |
| prefix | `string \| v-slot` | - | 设置数值的前缀 |
| title-style | `style` | - | 标题样式 |
| content-style | `style` | - | 内容样式 |
Expand All @@ -182,4 +182,3 @@ export default {
| easing | `string` | quartOut | 数字动画效果 |
| start | `boolean` | false | 是否开始动画 |


158 changes: 158 additions & 0 deletions packages/devui-vue/docs/en-US/components/color-picker/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
# ColorPicker

### When to use

Allows users to use various interactive methods to select colors

### Basic Usage

:::demo

```vue
<template>
<d-color-picker></d-color-picker>
</template>
```

:::

### Color transparency

Allows users to dynamically adjust the display alpha mode, which is true by default
:::demo

```vue
<template>
<d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
<d-color-picker v-model="color" :show-alpha="show"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
setup() {
const show = ref(true)
const color = ref('rgba(83, 199, 212, 0.72)')
const isShowAlpha = () => {
show.value = !show.value
}
return {
color,
isShowAlpha,
show
}
}
})
</script>
```

:::

### Color mode

Set dynamic output color mode
:::demo

```vue
<template>
<d-color-picker v-model="color" mode="hex"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
setup() {
const color = ref('#FF6827A1')
return {
color
}
}
})
</script>
```

:::

### Historical color

Customize whether to display historical colors. By default, it is true
:::demo

```vue
<template>
<d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
<d-color-picker :show-history="show" v-model="color" mode="hsl"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
setup() {
let show = ref(true)
const isShowAlpha = () => {
show.value = !show.value
}
const color = ref('hsla(353, 1, 0.58, 1)')
return {
color,
isShowAlpha,
show
}
}
})
</script>
```

:::

### Foundation panel customization
Sets a customizable base panel color swatch
:::demo

```vue
<template>
<d-color-picker :swatches="colors" v-model="color"></d-color-picker>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'

export default defineComponent({
setup() {
const colors = [
'#f44336',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#2196f3',
'#03a9f4',
'#00bcd4',
'#009688',
'#4caf50'
]
const color = ref('rgba(155, 39, 176, 1)')
return {
color,
colors
}
}
})
</script>
```

:::

### d-color-picker

| parameter | type | default | introduce | Jump Demo |
| :---: | :---: | :---: | :---: | :---: |
| mode | `String` | `rgb` | Toggle color mode | [mode](#color-mode) | |
| dotSize | `Number` | `15` | Palette dot size | | |
| swatches | `Array` | | Predefined sample panels | [swatches](#foundation-panel-customization) | |
| show-alpha | `Boolean` | `true` | Show transparency progress bar | [Color transparency](#color-transparency) | |
| show-history | `Boolean` | `true` | Show historical colors | [show-history](#historical-color) | |
| v-model | `String` | | Binding color value support(hex , rgb , hsl , hsv ) | | |
4 changes: 2 additions & 2 deletions packages/devui-vue/docs/en-US/components/ripple/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,8 +200,8 @@ Card Component

### API

| 参数 | 类型 | 默认 | 说明 |
| :-------------: | :-------: | :---------: | :---------------------------------------------------------------------------- |
| parameter | type | default | introduce |
| :---: | :---: | :---: | :---: |
| color | `string` | `#00000050` | Choose Default current text color |
| initial-opacity | `number` | `0.1` | Choose Initial interaction Opacity size |
| final-opacity | `number` | `0.1` | Choose, end the interactive effect and press the Opacity size for a long time |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ Prefix and suffix slots
### d-statistic

| parameter | type | default | introduce |
| ------------------ | ------------------ | -------- | ---------------------------- |
| :---: | :---: | :---: | :---: |
| title | `string \| v-slot` | - | Title of value |
| extra | `string \| v-slot` | - | Extra content |
| value | `number \| string` | - | Value content |
Expand Down