Dialogs and feedback

Feedback components are used to show messages to the user and to collect the results of their actions.

Component comparison

Component	Blocks interaction?	User interaction?	Use case
Toast	No	No	Light feedback (success/failure)
Loading	Yes (mask)	No	Waiting for async work
Dialog	Yes	Yes (confirm/cancel)	Confirm important actions
Alert	Yes	Yes (OK)	Informational message
ActionSheet	Yes	Yes (choose an item)	Multi-option actions from the bottom

Toast

Non-blocking; dismisses automatically.

// 最简用法
await woo.showToast('操作成功')

// 完整参数
await woo.showToast({
  title: '保存成功',
  icon: 'success',    // 'success' | 'error' | 'loading' | 'none'
  duration: 2000,     // 持续时间（ms）
})

// 手动关闭
await woo.hideToast()

When to use

• Action feedback: save succeeded, delete succeeded
• Non-critical info: network status changes

Loading

A masked loading indicator that blocks user interaction.

// 最简用法
woo.showLoading('加载中...')

// 完整参数
woo.showLoading({
  title: '提交中...',
  mask: true,  // 是否显示遮罩（默认 true）
})

// 异步操作完成后关闭
try {
  await submitForm()
  woo.showToast('提交成功')
} finally {
  woo.hideLoading()
}

Note

showLoading and showToast are mutually exclusive: calling showLoading dismisses the current Toast, and vice versa.

Dialog

A modal dialog that waits for the user to choose an option.

const result = await woo.showDialog({
  title: '提示',
  content: '确认退出登录？',
  cancelText: '取消',
  confirmText: '退出',
})

if (result.confirm) {
  await logout()
}

Options

Field	Type	Default	Description
title	string	""	Title
content	string	""	Body text
cancelText	string	""	Cancel button label (empty hides the button)
confirmText	string	""	Confirm button label

Return value

interface ShowDialogResult {
  confirm: boolean  // 是否点击确认
  cancel: boolean   // 是否点击取消
}

Alert

A simple message with a single button.

// 最简用法
await woo.alert('操作完成')

// 完整参数
await woo.alert({
  title: '温馨提示',
  content: '您的会员即将到期，请及时续费',
  buttonText: '我知道了',
})

ActionSheet

A list of actions that slides up from the bottom.

try {
  const { index } = await woo.showActionSheet({
    itemList: ['拍照', '从相册选择', '从文件选择'],
  })

  switch (index) {
    case 0: takePhoto(); break
    case 1: chooseFromAlbum(); break
    case 2: chooseFromFile(); break
  }
} catch (err) {
  // 用户点击取消或遮罩关闭
  if (err.code === BridgeErrorCode.UserCancelled) {
    console.log('用户取消选择')
  }
}

Return value

interface ShowActionSheetResult {
  index: number  // 选择的项索引（从 0 开始）
}

Combined example

async function deleteItem(id: string) {
  // 1. 确认对话框
  const { confirm } = await woo.showDialog({
    title: '确认删除',
    content: '删除后无法恢复，是否继续？',
    cancelText: '取消',
    confirmText: '删除',
  })

  if (!confirm) return

  // 2. 显示加载
  woo.showLoading('删除中...')

  try {
    // 3. 执行删除
    await woo.request.del(`/api/items/${id}`)

    // 4. 成功提示
    woo.showToast({ title: '删除成功', icon: 'success' })

    // 5. 返回列表页
    setTimeout(() => woo.navigateBack(), 1500)
  } catch (err) {
    // 6. 错误提示
    woo.showToast({ title: '删除失败', icon: 'none' })
  } finally {
    woo.hideLoading()
  }
}