FxAlert

Displays important alert messages on pages.

Attributes

Parameter	Description	Type	Options	Default
title	Alert title	string	—	—
type	Alert type	string	success/warning/info/error	info
description	Auxiliary text. Can also be passed via default slot	string	—	—
closable	Whether alert can be closed	boolean	—	true
center	Whether text is centered	boolean	—	true
close-text	Custom close button text	string	—	—
show-icon	Whether to show icon	boolean	—	false
effect	Alert theme	string	light/dark	light

Slot

Name	Description
—	Description content
title	Title content

Events

Event Name	Description	Parameters
close	Triggered when alert is closed	—

Basic Usage

Non-floating elements on the page that won't disappear automatically.

The Alert component provides four types, specified by the type property, with default value info.

<template>
  <fx-alert
    title="Success alert content"
    type="success">
  </fx-alert>
  <fx-alert
    title="Info alert content"
    type="info">
  </fx-alert>
  <fx-alert
    title="Warning alert content"
    type="warning">
  </fx-alert>
  <fx-alert
    title="Error alert content"
    type="error">
  </fx-alert>
</template>

Expand Copy Copy

Themes

The Alert component provides two different themes: light and dark.

Change theme by setting the effect property, default is light.

<template>
  <fx-alert
    title="Success alert content"
    type="success"
    effect="dark">
  </fx-alert>
  <fx-alert
    title="Info alert content"
    type="info"
    effect="dark">
  </fx-alert>
  <fx-alert
    title="Warning alert content"
    type="warning"
    effect="dark">
  </fx-alert>
  <fx-alert
    title="Error alert content"
    type="error"
    effect="dark">
  </fx-alert>
</template>

Expand Copy Copy

Custom Close Button

Customize close button with text or other symbols.

In Alert component, you can set whether it's closable, close button text and close callback. The closable attribute determines if it can be closed (accepts boolean, default true). Use close-text to replace the default close icon (must be text). Set close event for close callback.

<template>
  <fx-alert
    title="Non-closable alert"
    type="success"
    :closable="false">
  </fx-alert>
  <fx-alert
    title="Custom close-text"
    type="info"
    close-text="Got it">
  </fx-alert>
  <fx-alert
    title="Alert with callback"
    type="warning"
    @close="hello">
  </fx-alert>
</template>

<script>
  export default {
    methods: {
      hello() {
        alert('Hello World!');
      }
    }
  }
</script>

Expand Copy Copy

With Icon

Improves readability when indicating certain states.

Set show-icon property to display Alert icon, which better conveys your message.

<template>
  <fx-alert
    title="Success alert content"
    type="success"
    show-icon>
  </fx-alert>
  <fx-alert
    title="Info alert content"
    type="info"
    show-icon>
  </fx-alert>
  <fx-alert
    title="Warning alert content"
    type="warning"
    show-icon>
  </fx-alert>
  <fx-alert
    title="Error alert content"
    type="error"
    show-icon>
  </fx-alert>
</template>

Expand Copy Copy

Centered Text

Use center property to horizontally center text.

<template>
  <fx-alert
    title="Success alert content"
    type="success"
    center
    show-icon>
  </fx-alert>
  <fx-alert
    title="Info alert content"
    type="info"
    center
    show-icon>
  </fx-alert>
  <fx-alert
    title="Warning alert content"
    type="warning"
    center
    show-icon>
  </fx-alert>
  <fx-alert
    title="Error alert content"
    type="error"
    center
    show-icon>
  </fx-alert>
</template>

Expand Copy Copy

With Description

Contains title and content for more detailed alerts.

Besides required title property, you can set description property for additional context (supports single line text with auto-wrapping).

<template>
  <fx-alert
    title="Alert with description"
    type="success"
    description="Here's a tongue twister: Black gray fertilizer will volatilize gray black fertilizer volatilization; Gray black fertilizer will volatilize black gray fertilizer exertion. Black gray fertilizer will volatilize gray black fertilizer black gray volatilization turns gray...">
  </fx-alert>
</template>

Expand Copy Copy

With Icon and Description

Example with both icon and description.

<template>
  <fx-alert
    title="Success alert content"
    type="success"
    description="Description text description text description text"
    show-icon>
  </fx-alert>
  <fx-alert
    title="Info alert content"
    type="info"
    description="Description text description text description text"
    show-icon>
  </fx-alert>
  <fx-alert
    title="Warning alert content"
    type="warning"
    description="Description text description text description text"
    show-icon>
  </fx-alert>
  <fx-alert
    title="Error alert content"
    type="error"
    description="Description text description text description text"
    show-icon>
  </fx-alert>
</template>

Expand Copy Copy