Mastering UI Components: Toast, Progress, Action Sheet, Modal, and Navigator

Message Toast

Code Structure

<toast bindchange="...">
    Message content
</toast>

Attributes

duration – display time in milliseconds, default 1500

bindchange – event triggered when duration expires

Progress Bar

Code Structure

<progress percent="20" />

Attributes

percent – percentage 0~100

show-info – display percentage

stroke-width – bar width in px

color – bar color

active – true/false, show animation

Action Sheet

Code Structure

<action-sheet>
  <action-sheet-item>xxx</action-sheet-item>
  ...
  <action-sheet-cancel>Cancel</action-sheet-cancel>
</action-sheet>

Contains multiple items and a cancel button.

Attributes

bindchange – triggered when background or cancel button is clicked

Modal Dialog

Code Structure

<modal title="Title" confirm-text="confirm" ...>
  Dialog content.
</modal>

Attributes

title – title

no-cancel – hide cancel button

confirm-text – confirm button text

cancel-text – cancel button text

bindconfirm – event on confirm click

bindcancel – event on cancel or overlay click

Navigator

Code Structure

<navigator url="navigate?title=navigate">
Navigate to new page
</navigator>

Attributes

url – navigation link

redirect – true/false, close current page

hover-class – style on click

Source Code Download

Send message ‘ 04 ’ to automatically receive the download link.

Click “Read Original” to view the article list