mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-27 03:01:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): ColorPicker code for composition (#2160)

Browse Source 
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu 2021-06-08 13:29:56 +08:00 committed by GitHub
parent 5f9971e60e
commit 32449d67b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 420 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
website/docs/en-US/color-picker.md
View File

@ -25,6 +25,24 @@ ColorPicker is a color selector supporting multiple color formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color1 = ref('#409EFF');
const color2 = ref(null);
return {
color1,
color2,
};
},
});
</setup>
-->
```
:::
@ -43,6 +61,22 @@ ColorPicker is a color selector supporting multiple color formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(19, 206, 102, 0.8)');
return {
color,
};
},
});
</setup>
-->
```
:::
@ -81,6 +115,39 @@ ColorPicker is a color selector supporting multiple color formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(255, 69, 0, 0.68)');
const predefineColors = ref([
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577',
]);
return {
color,
predefineColors,
};
},
});
</setup>
-->
```
:::
@ -103,6 +170,23 @@ ColorPicker is a color selector supporting multiple color formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('409EFF');
return {
color,
};
},
});
</setup>
-->
```
:::

84
website/docs/es/color-picker.md
View File

@ -25,6 +25,24 @@ ColorPicker es un selector de color que soporta varios formatos de color.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color1 = ref('#409EFF');
const color2 = ref(null);
return {
color1,
color2,
};
},
});
</setup>
-->
```
:::
@ -43,6 +61,22 @@ ColorPicker es un selector de color que soporta varios formatos de color.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(19, 206, 102, 0.8)');
return {
color,
};
},
});
</setup>
-->
```
:::
@ -81,6 +115,39 @@ ColorPicker es un selector de color que soporta varios formatos de color.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(255, 69, 0, 0.68)');
const predefineColors = ref([
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577',
]);
return {
color,
predefineColors,
};
},
});
</setup>
-->
```
:::
@ -102,6 +169,23 @@ ColorPicker es un selector de color que soporta varios formatos de color.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('409EFF');
return {
color,
};
},
});
</setup>
-->
```
:::

84
website/docs/fr-FR/color-picker.md
View File

@ -25,6 +25,24 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color1 = ref('#409EFF');
const color2 = ref(null);
return {
color1,
color2,
};
},
});
</setup>
-->
```
:::
@ -43,6 +61,22 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(19, 206, 102, 0.8)');
return {
color,
};
},
});
</setup>
-->
```
:::
@ -81,6 +115,39 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(255, 69, 0, 0.68)');
const predefineColors = ref([
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577',
]);
return {
color,
predefineColors,
};
},
});
</setup>
-->
```
:::
@ -102,6 +169,23 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('409EFF');
return {
color,
};
},
});
</setup>
-->
```
:::

84
website/docs/jp/color-picker.md
View File

@ -25,6 +25,24 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color1 = ref('#409EFF');
const color2 = ref(null);
return {
color1,
color2,
};
},
});
</setup>
-->
```
:::
@ -43,6 +61,22 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(19, 206, 102, 0.8)');
return {
color,
};
},
});
</setup>
-->
```
:::
@ -81,6 +115,39 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(255, 69, 0, 0.68)');
const predefineColors = ref([
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577',
]);
return {
color,
predefineColors,
};
},
});
</setup>
-->
```
:::
@ -103,6 +170,23 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('409EFF');
return {
color,
};
},
});
</setup>
-->
```
:::

84
website/docs/zh-CN/color-picker.md
View File

@ -25,6 +25,24 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color1 = ref('#409EFF');
const color2 = ref(null);
return {
color1,
color2,
};
},
});
</setup>
-->
```
:::
@ -43,6 +61,22 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(19, 206, 102, 0.8)');
return {
color,
};
},
});
</setup>
-->
```
:::
@ -81,6 +115,39 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('rgba(255, 69, 0, 0.68)');
const predefineColors = ref([
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577',
]);
return {
color,
predefineColors,
};
},
});
</setup>
-->
```
:::
@ -102,6 +169,23 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const color = ref('409EFF');
return {
color,
};
},
});
</setup>
-->
```
:::