Introduction

fs-dialog is a centered popup (type: center) dialog component based on fs-popup. It supports multiple dialog flow styles such as feedback, confirmation, and multi-button, and is suitable for message prompts, confirmation actions, brief inquiries, and other scenarios. It supports title, content area, action buttons (1-3), primary/secondary actions, and customizable button types. The content area scrolls automatically when overflowing, and the styling closely follows the design spec.

Design Specification

• Centered popup, width adapts to content with a max width limit. Visual details such as corner radius, shadow, and group spacing match the design spec.
• Supports three primary plain-text dialog flow styles:
  1. Brief question / one-line prompt
  2. Brief explanation / description
  3. Title + content area + action area (supports multi-line, secondary action, primary action, acknowledgement button, etc.)
• The action area supports 1-3 buttons; the primary action is highlighted, and the secondary action is on the left.
• The content area supports multi-line text with adaptive alignment, and auto-scrolls when content overflows.
• Buttons support multiple customization capabilities via type/style.

Usage

Import locally by configuring it in the index.json of the page or component where it is needed:

{
  "usingComponents": {
    "fs-dialog": "ava-ui/fxui/fs-dialog/index"
  }
}

Code Demos

1. Type Demo (type)

2. icon Demo

3. Input Demo (input)

4. Rich Text Demo (richtext)

Content Alignment

Supports setting the alignment of the content via the contentAlign property:

Overlay Configuration

Supports customizing the behavior and styling of the overlay via the overlay property:

API

Properties

Property	Description	Type	Options/Format	Default
show	Whether to show	boolean	true/false	false
title	Title	string	—	—
content	Content text	string	—	—
contentAlign	Content alignment	string	left/center/right	center
actions	Action button group	array	[{text, type, style}]	[]
confirmButton	Primary action button	object		{type:'primary'}
cancelButton	Secondary action button	object		—
extStyle	External style	string	—	''
zIndex	Z-index	number	—	10000
inputMode	Whether it is input mode	boolean	true/false	false
inputValue	Input value	string	—	''
inputPlaceholder	Input placeholder	string	—	''
inputMaxlength	Max input length	number	—	2000
overlay	Overlay config	object	Properties passed through to the fs-overlay component	{}
richData	Rich text data	array	Rich text node array	null
richDataStyle	Rich text style	string	CSS style string	''

Button type/style notes:

• type: 'primary' (primary action, orange highlight, default) / 'normal' (plain gray) / 'danger' (red warning)
• style: inline style

richData data structure:

[
  {
    context: "Text content",           // Text content or image URL
    type: "string",               // Type: string (text) or image (image)
    color: "red",                 // Text color
    fontSize: "16",               // Font size (px)
    fontWeight: "bold",           // Font weight
    textDecoration: "underline",  // Text decoration
    width: "50",                  // Image width (px)
    height: "50",                 // Image height (px)
    placeholder: "Placeholder image URL",      // Image placeholder
    onClick: function() {}        // Click event callback
  }
]

Slot

Name	Description
Default	Custom content area

Events

Event name	Description	Callback params
onAction	Click an action button
onConfirm	Click the primary action button	confirmButton
onCancel	Click the secondary action button	cancelButton
onBackClose	Closed by physical back key (passed through from fs-popup)	event
onInput	Input value changed	value (current input)
overlayClick	Click the overlay	event
overlayEnter	Overlay entered	event
overlayLeave	Overlay left	event

Design Notes

• Centered popup, width adapts to content with a max width limit. Visual details such as corner radius, shadow, and group spacing match the design spec.
• The action area supports 1-3 buttons; the primary action is highlighted, the secondary action is on the left, and supports type/style customization.
• The content area supports multi-line text with adaptive alignment, and auto-scrolls when content overflows.
• Supports rich text content, including text styles, images, click interactions, and more.
• Rich text and plain text content are mutually exclusive; rich text takes precedence.
• Supports closing the dialog with the Android physical back key.
• All variables use var.wxss for consistent styling.

contentAlign Property Notes

The contentAlign property sets the alignment of the content, supporting the following three alignment modes:

• center (default): Center alignment, suitable for short prompt text
• left: Left alignment, suitable for longer text content to improve readability
• right: Right alignment, suitable for special scenarios or specific design needs

Usage Example

<!-- Center alignment (default) -->
<fs-dialog
  show="{{showDialog}}"
  title="Prompt"
  content="This is a short prompt text"
  contentAlign="center"
/>

<!-- Left alignment, suitable for long text -->
<fs-dialog
  show="{{showDialog}}"
  title="Detailed Description"
  content="This is a longer text content, using left alignment can improve the reading experience..."
  contentAlign="left"
/>

<!-- Right alignment -->
<fs-dialog
  show="{{showDialog}}"
  title="Special Scenario"
  content="Right-aligned text content"
  contentAlign="right"
/>

overlay Property Configuration

The overlay property configures the overlay behavior and supports all properties passed through to the fs-overlay component. By default, the dialog does not allow closing on overlay click (closeOnOverlayClick: false), which is suitable for strong-interaction / forced-confirmation scenarios.

overlay: {
  closeOnOverlayClick: true,        // Allow closing on overlay click
  backgroundColor: 'rgba(0,0,0,0.5)', // Custom overlay background color
  duration: 500,                    // Animation duration
  zIndex: 12000                     // Overlay z-index
}

Usage Example

<!-- Dialog that allows closing on overlay click -->
<fs-dialog
  show="{{showDialog}}"
  title="Prompt"
  content="Clicking the overlay can close it"
  overlay="{{overlayConfig}}"
>
</fs-dialog>

data: {
  overlayConfig: {
    closeOnOverlayClick: true,
    backgroundColor: 'rgba(59, 130, 246, 0.3)'
  }
}

打开预览

---

For more customization capabilities, please refer to `