diff --git a/packages/api-generator/src/locale/en/v-color-picker.json b/packages/api-generator/src/locale/en/v-color-picker.json
index 2298362721e..b59cc267bc4 100644
--- a/packages/api-generator/src/locale/en/v-color-picker.json
+++ b/packages/api-generator/src/locale/en/v-color-picker.json
@@ -5,6 +5,7 @@
"dotSize": "Changes the size of the selection dot on the canvas",
"flat": "Removes elevation",
"hideCanvas": "Hides canvas",
+ "hideSliders": "Hides sliders",
"hideInputs": "Hides inputs",
"hideModeSwitch": "Hides mode switch",
"mode": "Sets mode of inputs. Available modes are 'rgba', 'hsla', and 'hexa'. Can be synced with the `.sync` modifier.",
diff --git a/packages/docs/src/examples/v-color-picker/usage.vue b/packages/docs/src/examples/v-color-picker/usage.vue
index 8b5739237e4..561a9145bb8 100644
--- a/packages/docs/src/examples/v-color-picker/usage.vue
+++ b/packages/docs/src/examples/v-color-picker/usage.vue
@@ -33,6 +33,7 @@
booleans: [
'disabled',
'hide-canvas',
+ 'hide-sliders',
'hide-inputs',
'hide-mode-switch',
'show-swatches',
diff --git a/packages/docs/src/pages/en/components/color-pickers.md b/packages/docs/src/pages/en/components/color-pickers.md
index 6e5eaab6d77..5a9e3da3ff6 100644
--- a/packages/docs/src/pages/en/components/color-pickers.md
+++ b/packages/docs/src/pages/en/components/color-pickers.md
@@ -41,7 +41,7 @@ Adjust the elevation of the `v-color-picker` component using the **elevation** o
#### Inputs
-The number inputs can be hidden with the `hide-inputs` prop. You can also hide the mode switch icon with the `hide-mode-switch` prop. The mode can also be controlled externally through the `mode` prop.
+The number inputs can be hidden with the `hide-inputs` prop, and the sliders can be hidden with the `hide-sliders` prop. You can also hide the mode switch icon with the `hide-mode-switch` prop. The mode can also be controlled externally through the `mode` prop.
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.ts b/packages/vuetify/src/components/VColorPicker/VColorPicker.ts
index e30c5115fd6..7d991c051a1 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPicker.ts
+++ b/packages/vuetify/src/components/VColorPicker/VColorPicker.ts
@@ -35,6 +35,7 @@ export default mixins(Elevatable, Themeable).extend({
},
flat: Boolean,
hideCanvas: Boolean,
+ hideSliders: Boolean,
hideInputs: Boolean,
hideModeSwitch: Boolean,
mode: {
@@ -106,7 +107,7 @@ export default mixins(Elevatable, Themeable).extend({
return this.$createElement('div', {
staticClass: 'v-color-picker__controls',
}, [
- this.genPreview(),
+ !this.hideSliders && this.genPreview(),
!this.hideInputs && this.genEdit(),
])
},
@@ -166,7 +167,7 @@ export default mixins(Elevatable, Themeable).extend({
},
}, [
!this.hideCanvas && this.genCanvas(),
- this.genControls(),
+ (!this.hideSliders || !this.hideInputs) && this.genControls(),
this.showSwatches && this.genSwatches(),
])
},
diff --git a/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts b/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts
index eca39aaf432..f42fbf6f1d1 100644
--- a/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts
+++ b/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts
@@ -71,6 +71,17 @@ describe('VColorPicker.ts', () => {
expect(wrapper.find('.v-color-picker__canvas').exists()).toBe(false)
})
+ it('should hide sliders', () => {
+ const wrapper = mountFunction({
+ propsData: {
+ hideSliders: true,
+ },
+ })
+
+ expect(wrapper.html()).toMatchSnapshot()
+ expect(wrapper.find('.v-color-picker__preview').exists()).toBe(false)
+ })
+
it('should hide inputs', () => {
const wrapper = mountFunction({
propsData: {
@@ -82,6 +93,20 @@ describe('VColorPicker.ts', () => {
expect(wrapper.find('.v-color-picker__edit').exists()).toBe(false)
})
+ it('should hide controls', () => {
+ const wrapper = mountFunction({
+ propsData: {
+ hideInputs: true,
+ hideSliders: true,
+ },
+ })
+
+ expect(wrapper.html()).toMatchSnapshot()
+ expect(wrapper.find('.v-color-picker__edit').exists()).toBe(false)
+ expect(wrapper.find('.v-color-picker__preview').exists()).toBe(false)
+ expect(wrapper.find('.v-color-picker__controls').exists()).toBe(false)
+ })
+
it('should return hex if given hex', async () => {
const fn = jest.fn()
const wrapper = mountFunction({
diff --git a/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap b/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap
index 17e4666f0f0..d7cc302d448 100644
--- a/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap
+++ b/packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap
@@ -296,6 +296,25 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
`;
+exports[`VColorPicker.ts should hide controls 1`] = `
+
+`;
+
exports[`VColorPicker.ts should hide inputs 1`] = `