Toast

It is not bread. It is toast.

Example

Basic

Show Code

<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

<script lang="ts" setup>
import { RToastProvider } from 'roughness'
</script>

<template>
  <RToastProvider>
    <App />
  </RToastProvider>
</template>

<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>

Usage

Props

Name	Type	Default Value	Description
duration
graphicsOptions
open
size
type

Events

Name	Type	Description
update:open

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-toast-color

ToastProvider Slots

Name	Type	Description
default

ToastProvider Styles

Name	Type	Default Value	Description
--r-toast-provider-base-size
--r-toast-provider-gap-size