Toast
It is not bread. It is toast.
Example
Basic
Show Code
vue
<script lang="ts" setup>
import { RButton, RToast } from 'roughness'
import { ref } from 'vue'
let open = ref(false)
function toggle() {
open.value = !open.value
}
</script>
<template>
<RButton @click="toggle">Toggle</RButton>
<RToast v-model:open="open">Clunk!</RToast>
</template>Clunk!
Composition
Show Code
vue
<script lang="ts" setup>
import { RToastProvider } from 'roughness'
</script>
<template>
<RToastProvider>
<App />
</RToastProvider>
</template>vue
<script lang="ts" setup>
import { useToast } from 'roughness'
const toast = useToast()
function add() {
toast('Yummy!', {
type: ['primary', 'info', 'success', 'warning', 'error', 'comment'][Math.floor(Math.random() * 6)],
})
}
</script>
<template>
<RButton @click="add">Add</RButton>
</template>