SelectButton pt demo completed
parent
5920b444a8
commit
a360a2d3cd
|
@ -6,7 +6,9 @@
|
||||||
:options="options"
|
:options="options"
|
||||||
aria-labelledby="basic"
|
aria-labelledby="basic"
|
||||||
:pt="{
|
:pt="{
|
||||||
button: { class: 'bg-primary ' }
|
label: ({ state }) => ({
|
||||||
|
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||||
|
})
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,11 +23,28 @@ export default {
|
||||||
options: ['Off', 'On'],
|
options: ['Off', 'On'],
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />`,
|
<SelectButton
|
||||||
|
v-model="value"
|
||||||
|
:options="options"
|
||||||
|
aria-labelledby="basic"
|
||||||
|
:pt="{
|
||||||
|
label: ({ state }) => ({
|
||||||
|
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||||
|
})
|
||||||
|
}"/>`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
|
<SelectButton
|
||||||
|
v-model="value"
|
||||||
|
:options="options"
|
||||||
|
aria-labelledby="basic"
|
||||||
|
:pt="{
|
||||||
|
label: ({ state }) => ({
|
||||||
|
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||||
|
})
|
||||||
|
}"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -42,7 +61,16 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
|
<SelectButton
|
||||||
|
v-model="value"
|
||||||
|
:options="options"
|
||||||
|
aria-labelledby="basic"
|
||||||
|
:pt="{
|
||||||
|
label: ({ state }) => ({
|
||||||
|
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
|
||||||
|
})
|
||||||
|
}"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue