RadioButton, Rating, SelectButton, Slider unstyled demo updates

This commit is contained in:
Tuğçe Küçükoğlu 2023-07-26 18:39:58 +03:00
parent bcbfb54ac2
commit e9623c4484
16 changed files with 333 additions and 27 deletions

View file

@ -0,0 +1,47 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
ingredient: '',
code: {
composition: `
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const ingredient = ref('');
<\/script>`
}
};
}
};
</script>