vuetify-swatches
Version:
Color Swatch component for Vuetify3.
159 lines (129 loc) • 5.46 kB
Markdown
# Vuetify Swatches
[](https://www.jsdelivr.com/package/npm/vuetify-swatches)
[](https://www.npmjs.com/package/vuetify-swatches)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/vuetify-swatches/file/README.md)
[](https://www.npmjs.com/package/vuetify-swatches)
[](https://gitpod.io/#https://github.com/logue/vuetify-swatches)
[](https://twitter.com/logue256)
⚠ This is for Vuetify3. If you are using Vuetify2, please use 1.0.x.
This project is a remake of [saintplay's vue-swatches](https://saintplay.github.io/vue-swatches/) with [Vuetify](https://vuetifyjs.com/).
Unlike the original version, it provides a UI based on Vuetify, such as ripple effects and dark mode.
This library is positioned as a complement to Vuetify and provides a minimal UI. Use the[Menu Component](https://vuetifyjs.com/components/menus/) if you want to display a pop-up menu, and the [Card component](https://vuetifyjs.com/components/cards/) if you want to display a palette.
## Usage
In this example, the selected color is assigned to `selected`.
```vue
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import VSwatches from 'vuetify-swatches';
const selected: Ref<string> = ref('#ffffff');
</script>
<template>
<v-swatches v-model="selected" />
</template>
<style>
@import 'vuetify-swatches/dist/style.css';
</style>
```
The method of specifying `swatches` is the same as [nested-color of Vue Swatches](https://saintplay.github.io/vue-swatches/examples/#nested-colors).
If you want to make the color palette appear when you click it, combine it with VMenu.
```vue
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import VSwatches from 'vuetify-swatches';
const palette: Ref<string[] | string[][]> = ref([
[
'#ffb7b7',
'#ffdbb7',
'#ffffb7',
'#b7ffb7',
'#b7ffff',
'#b7b7ff',
'#ffb7ff',
'#ffffff',
],
[
'#ff5555',
'#ffa555',
'#ffff55',
'#55ff55',
'#55ffff',
'#5555ff',
'#ff55ff',
'#aaaaaa',
],
[
'#ff0000',
'#ff7f00',
'#ffff00',
'#00ff00',
'#00ffff',
'#0000ff',
'#ff00ff',
'#555555',
],
[
'#7f0000',
'#7f4c00',
'#7f7f00',
'#007f00',
'#007f7f',
'#00007f',
'#7f007f',
'#000000',
],
]);
const selected: Ref<string> = ref('#ffffff');
</script>
<template>
<v-menu offset-y>
<template #activator="{ props }">
<v-btn v-bind="props" class="mb-3" min-width="auto" :color="selected">
<v-icon
:color="selected"
style="filter: invert(100%) grayscale(100%) contrast(100)"
>
mdi-menu-down
</v-icon>
</v-btn>
</template>
<v-swatches v-model="selected" :swatches="palette" />
</v-menu>
</template>
<style>
@import 'vuetify-swatches/dist/style.css';
</style>
```
### Options
Most props other than size and placement are the same as [v-btn](https://vuetifyjs.com/en/api/v-btn/).
| Variables | Type | Default | Info |
| --------- | -------------- | -------------------------- | -------------------------------------------------------------------------- |
| size | string | 2rem | Swatch Button size |
| icon | string | mdi-checkbox-marked-circle | checked icon |
| icon-size | string | 1rem | checked icon size |
| disabled | boolean | false | Removes the ability to click or target the component. |
| rounded | number\|string | undefined | Applies a large border radius on the button. |
| variant | string [^1] | undefined | The variant prop gives you easy access to several different button styles. |
| elevation | number\|string | undefined |
| border | number\|string | undefined |
[^1] Available variants are: elevated(default), flat, tonal, outlined, text, and plain.
### CDN Usage
```html
<!-- Vue core -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.3.14/dist/vuetify.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vuetify@3.3.14/dist/vuetify.min.js"
/>
<!-- Markdown wasm -->
<script src="https://cdn.jsdelivr.net/npm/vuetify-swatches@1.4.3/dist/index.iife.min.js"></script>
<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const app = createApp();
app.use(vuetify).component(VSwatches).mount('#app');
</script>
```
## LICENSE
©2022-2025 by Logue. Licensed under the [MIT License](LICENSE).