Pt demo review
parent
a40dba06d4
commit
65275ff32a
|
@ -4,9 +4,7 @@
|
|||
<Rating
|
||||
v-model="value"
|
||||
:pt="{
|
||||
onIcon: () => ({
|
||||
class: 'text-orange-400'
|
||||
})
|
||||
onIcon: { class: 'text-orange-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
@ -23,9 +21,7 @@ export default {
|
|||
<Rating
|
||||
v-model="value"
|
||||
:pt="{
|
||||
onIcon: () => ({
|
||||
class: 'text-orange-400'
|
||||
})
|
||||
onIcon: { class: 'text-orange-400' }
|
||||
}"
|
||||
/>`,
|
||||
options: `
|
||||
|
@ -34,9 +30,7 @@ export default {
|
|||
<Rating
|
||||
v-model="value"
|
||||
:pt="{
|
||||
onIcon: () => ({
|
||||
class: 'text-orange-400'
|
||||
})
|
||||
onIcon: { class: 'text-orange-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
@ -57,9 +51,7 @@ export default {
|
|||
<Rating
|
||||
v-model="value"
|
||||
:pt="{
|
||||
onIcon: () => ({
|
||||
class: 'text-orange-400'
|
||||
})
|
||||
onIcon: { class: 'text-orange-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
:options="options"
|
||||
aria-labelledby="basic"
|
||||
:pt="{
|
||||
label: ({ state }) => ({
|
||||
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||
button: ({ context }) => ({
|
||||
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
|
@ -28,10 +28,11 @@ export default {
|
|||
:options="options"
|
||||
aria-labelledby="basic"
|
||||
:pt="{
|
||||
label: ({ state }) => ({
|
||||
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||
button: ({ context }) => ({
|
||||
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
|
||||
})
|
||||
}"/>`,
|
||||
}"
|
||||
/>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
|
@ -40,8 +41,8 @@ export default {
|
|||
:options="options"
|
||||
aria-labelledby="basic"
|
||||
:pt="{
|
||||
label: ({ state }) => ({
|
||||
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||
button: ({ context }) => ({
|
||||
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
|
@ -66,8 +67,8 @@ export default {
|
|||
:options="options"
|
||||
aria-labelledby="basic"
|
||||
:pt="{
|
||||
label: ({ state }) => ({
|
||||
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||
button: ({ context }) => ({
|
||||
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
|
|
|
@ -3,14 +3,10 @@
|
|||
<div class="card flex justify-content-center">
|
||||
<Slider
|
||||
v-model="value"
|
||||
class="w-14rem"
|
||||
:pt="{
|
||||
handle: {
|
||||
class: 'bg-orange-400 border-900'
|
||||
},
|
||||
range: {
|
||||
class: 'bg-orange-400'
|
||||
}
|
||||
root: { class: 'w-14rem' },
|
||||
handle: { class: 'bg-orange-400 border-900' },
|
||||
range: { class: 'bg-orange-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
@ -26,14 +22,10 @@ export default {
|
|||
basic: `
|
||||
<Slider
|
||||
v-model="value"
|
||||
class="w-14rem"
|
||||
:pt="{
|
||||
handle: {
|
||||
class: 'bg-orange-400 border-900'
|
||||
},
|
||||
range: {
|
||||
class: 'bg-orange-400'
|
||||
}
|
||||
root: { class: 'w-14rem' },
|
||||
handle: { class: 'bg-orange-400 border-900' },
|
||||
range: { class: 'bg-orange-400' }
|
||||
}"
|
||||
/>`,
|
||||
options: `
|
||||
|
@ -41,14 +33,10 @@ export default {
|
|||
<div class="card flex justify-content-center">
|
||||
<Slider
|
||||
v-model="value"
|
||||
class="w-14rem"
|
||||
:pt="{
|
||||
handle: {
|
||||
class: 'bg-orange-400 border-900'
|
||||
},
|
||||
range: {
|
||||
class: 'bg-orange-400'
|
||||
}
|
||||
root: { class: 'w-14rem' },
|
||||
handle: { class: 'bg-orange-400 border-900' },
|
||||
range: { class: 'bg-orange-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
@ -68,14 +56,10 @@ export default {
|
|||
<div class="card flex justify-content-center">
|
||||
<Slider
|
||||
v-model="value"
|
||||
class="w-14rem"
|
||||
:pt="{
|
||||
handle: {
|
||||
class: 'bg-orange-400 border-900'
|
||||
},
|
||||
range: {
|
||||
class: 'bg-orange-400'
|
||||
}
|
||||
root: { class: 'w-14rem' },
|
||||
handle: { class: 'bg-orange-400 border-900' },
|
||||
range: { class: 'bg-orange-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -4,9 +4,9 @@
|
|||
<TriStateCheckbox
|
||||
v-model="value"
|
||||
:pt="{
|
||||
checboxBox: () => ({
|
||||
class: value ? 'bg-green-500 border-white' : undefined
|
||||
})
|
||||
checbox: {
|
||||
class: value ? 'bg-teal-500 border-white' : undefined
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
|
||||
|
@ -24,9 +24,9 @@ export default {
|
|||
<TriStateCheckbox
|
||||
v-model="value"
|
||||
:pt="{
|
||||
checboxBox: () => ({
|
||||
class: value ? 'bg-green-500 border-white' : undefined
|
||||
})
|
||||
checbox: {
|
||||
class: value ? 'bg-teal-500 border-white' : undefined
|
||||
}
|
||||
}"
|
||||
/>`,
|
||||
options: `
|
||||
|
@ -35,9 +35,9 @@ export default {
|
|||
<TriStateCheckbox
|
||||
v-model="value"
|
||||
:pt="{
|
||||
checboxBox: () => ({
|
||||
class: value ? 'bg-green-500 border-white' : undefined
|
||||
})
|
||||
checbox: {
|
||||
class: value ? 'bg-teal-500 border-white' : undefined
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
|
||||
|
@ -59,9 +59,9 @@ export default {
|
|||
<TriStateCheckbox
|
||||
v-model="value"
|
||||
:pt="{
|
||||
checboxBox: () => ({
|
||||
class: value ? 'bg-green-500 border-white' : undefined
|
||||
})
|
||||
checbox: {
|
||||
class: value ? 'bg-teal-500 border-white' : undefined
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
|
||||
|
|
Loading…
Reference in New Issue