skills.rest
wepn13232
wepn13232COMMUNITY
Explore all skills by this author →
GitHub

element-plus-alert

Explain el-alert attributes, events, and slots for Element Plus alerts.

7|Updated Mar 31, 2026
Search Tags:#frontend#vue#ui-components#api-documentation#element-plus#component-reference#el-alert
One-click install
npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-alert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: element-plus-alert
Source: https://github.com/wepn13232/element-plus-skills/tree/main/alert
Command: npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-alert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a ready reference for every el-alert attribute, event, and slot so developers can configure Element Plus alert dialogs without searching multiple sources.

Core Features & Use Cases

  • Attributes Summary: Lists default values and types such as title, type, description, closable, center, close-text, show-icon, and effect for precise configuration.
  • Events & Slots Guide: Documents the close event signature and available slots including default, title, and icon to customize alert content.
  • Use Case: When building a warning banner, consult this skill to confirm the closable behavior, icon visibility, and how to slot custom titles.

Quick Start

Ask for the el-alert attributes and events needed to display a closable warning banner.

Frequently Asked Questions about element-plus-alert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a closable warning banner using Element Plus alert attributes?▼

To configure a closable warning banner, use the Element Plus alert attributes like type for severity, closable to enable dismissal, and show-icon to display status indicators. Defaults include true for closable and false for center alignment.

What events and slots are available for customizing the el-alert component in Vue?▼

The el-alert component provides a close event triggered upon dismissal, and three slots for customization: default for the description area, title for the main text, and icon to replace the default status icon.

What is the default value of the effect attribute on an Element Plus alert component?▼

The default value of the effect attribute on an Element Plus alert component is light. You can set it to dark to change the visual styling, alongside configuring title, description, and center properties.

Can I use a custom close button text instead of an icon in Element Plus alerts?▼

Yes, you can display custom close button text instead of an icon by setting the close-text attribute on the Element Plus alert component. This replaces the default X icon while keeping the closable functionality intact.

Does the Element Plus alert component support centering the title and description text?▼

Yes, the Element Plus alert component supports centering both title and description text. Set the center attribute to true to vertically and horizontally align the alert content in the middle of the container.

Why is my custom icon slot not rendering in the Element Plus alert component?▼

If the custom icon slot is not rendering, ensure the show-icon attribute is enabled on the Element Plus alert component. The icon slot only overrides the default icon when the overall icon display is activated.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
21

el-tag

Render labeled el-tag components with attributes and events in Vue 3.

Community
Intermediate
BintzGavinBintzGavin
94

example-vue

Integrate Helios into Vue components to manage reactive timelines and visuals.

Community
Intermediate
jiaiyanjiaiyan
8

n-discrete

Create discrete Naive UI APIs for use outside Vue component setup.

Community
Basic
wepn13232wepn13232
7

element-plus-steps

Explain Element Plus el-steps component attributes, events, and slots.

Community
Basic