Skip to content

Message

Silent message notification, displayed in the vertical center area of ​​the screen

Examples

Message types

Placement

UI customization

js
DialogMessage('Hello', { icon: false })
DialogMessage('Hello', { closeButton: true })
DialogMessage('Hello', { duration: 0 })
DialogMessage('Hello', { offset: 100 })

API

ts
type MessageContent = string | VNode

function DialogMessage(
  message?: MessageContent,
  callback?: Function,
  options?: MessageOptions
): Function

The setting options MessageOptions details

ts
interface MessageOptions {
  /**
   * Custom class name
   */
  customClass?: string
  /**
   * Message types
   * @default `info`
   */
  messageType?: 'info' | 'warning' | 'error' |'success'
  /**
   * Message type icon
   * @default true
   */
  icon?: boolean
  /**
   * Display close button
   * @default false
   */
  closeButton?: boolean
  /**
   * The number of milliseconds to automatically close the dialog
   *
   * set to 0 to disable auto close
   *
   * @default 3000
   */
  duration?: number
  /**
   * The distance to the top of viewport
   * @default 32
   */
  offset?: string | number
  /**
   * The placement of the message dialog
   * @default `top`
   */
  placement?: 'top' | 'bottom'
  /**
   * Display pill rounded style
   * @default true
   */
  pill?: boolean
}

Released under the MIT License.