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