Alert

Alert components are used to display important notifications or warning messages on a page. They are typically used to inform users about the results of certain actions or to draw attention to important information.

Usage

The MAlert component can display a simple warning or notification message on the page.

Hello Alert

<template>
    <MAlert>Hello Alert</MAlert>
</template>

Type

The type attribute allows you to specify the type of alert to display. The available types are success, primary, warning, and danger.

Success Alert

Primary Alert

Warning Alert

Error Alert

Info Alert

<template>
  <MAlert type="success">Success Alert</MAlert>
  <MAlert type="primary">Primary Alert</MAlert>
  <MAlert type="warning">Warning Alert</MAlert>
  <MAlert type="danger">Danger Alert</MAlert>
  <MAlert type="info">Info Alert</MAlert>
</template>

Show Icon

By setting the showIcon property, an icon can be displayed in the warning message.

Hello Alert

<template>
    <MAlert showIcon>Hello Alert</MAlert>
</template>

Custom Icon

The icon attribute allows you to customize the icon. You can use either a slot or an attribute to achieve this.

Hello Alert

<template>
    <MAlert showIcon> <template #icon><m-icon name="close" /></template>Hello Alert</MAlert>
</template>

Display Title

By setting the title property or using a slot, you can display a title.

Warning Title

Hello Alert

<template>
  <MAlert title="Warning Title">Hello Alert</MAlert>
</template>

Using a slot to set the title:

<template>
  <MAlert>
    <template #title>
      Warning Title
    </template>
    Hello Alert
  </MAlert>
</template>

Show Close Icon

By setting the showClose property, a close icon can be displayed, allowing users to dismiss the alert.

Hello Alert

<template>
  <MAlert showClose>Hello Alert</MAlert>
</template>

Dark

By setting the dark property, a close icon can be displayed, allowing users to dismiss the alert.

Hello Alert

Hello Alert

Hello Alert

Hello Alert

Hello Alert

<template>
  <MAlert dark>Hello Alert</MAlert>
  <MAlert dark type="warning">Hello Alert</MAlert>
  <MAlert dark type="danger">Hello Alert</MAlert>
  <MAlert dark type="success">Hello Alert</MAlert>
  <MAlert dark type="info">Hello Alert</MAlert>
</template>

API

Alert Component

The Alert component is used to display important messages to the user. It can be used to show success, error, warning, or informational messages.

Props

Name	Type	Description	Default
type	string	The type of alert to display. Possible values are success, error, warning, and info.	-
title	string	The title to display inside the alert.	-
closable	boolean	If true, the alert can be closed by the user.	false
close	function	Callback function that is called when the alert is closed.	-
dark	boolean	theme dark of Alerts	-

Example

<template>
  <Alert type="success" title="This is a success alert" closable @close="handleClose" />
</template>

<script>
export default {
  methods: {
    handleClose() {
      console.log('Alert closed');
    }
  }
}
</script>