Files
ui/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
Sandro Circi 104852a55c chore: use new syntax for css variables (#3258)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2025-02-07 11:24:14 +01:00

26 lines
678 B
Vue

<script setup lang="ts">
const appConfig = useAppConfig()
</script>
<template>
<div>
<UFormField
label="toaster.duration"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
>
<UInput
v-model="appConfig.toaster.duration"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
/>
</UFormField>
</div>
</template>