UI

The UI API provides interface interactions: toasts, loading, dialogs, the navigation bar, the tab bar, and more.

Try it online

Live execution

The buttons below call the SDK mock and produce real on-page UI feedback.

showToastToast (none)showLoading

showDialogalertActionSheet

Feedback API demo

Click the buttons to see Toast, Loading, Dialog, and ActionSheet.

Vue

<script setup>
import { ref } from 'vue'
import woo from 'mini-sdk'

const result = ref('')

async function confirmDelete() {
  const { confirm } = await woo.showDialog({
    title: '确认删除',
    content: '删除后无法恢复',
    cancelText: '取消',
    confirmText: '删除',
  })
  if (confirm) {
    woo.showToast({ title: '已删除', icon: 'success' })
  }
}
</script>

<template>
  <button @click="woo.showToast({ title: '成功', icon: 'success' })">Toast</button>
  <button @click="confirmDelete">删除确认</button>
</template>

React

import { useState } from 'react'
import woo from 'mini-sdk'

function MyPage() {
  const [result, setResult] = useState('')

  async function confirmDelete() {
    const { confirm } = await woo.showDialog({
      title: '确认删除',
      content: '删除后无法恢复',
      cancelText: '取消',
      confirmText: '删除',
    })
    if (confirm) {
      woo.showToast({ title: '已删除', icon: 'success' })
    }
  }

  return (
    <>
      <button onClick={() => woo.showToast({ title: '成功', icon: 'success' })}>Toast</button>
      <button onClick={confirmDelete}>删除确认</button>
    </>
  )
}

Import

import woo from 'mini-sdk'
// 或
import { ui } from 'mini-sdk'

Feedback APIs

showToast

Shows a light-weight toast.

woo.showToast(options?: string | ShowToastOptions): Promise<void>

Parameters:

Field	Type	Required	Default	Description
title	string	Yes	""	Text
icon	string	No	"none"	Icon type
duration	number	No	2000	Duration (ms)

// 简写
await woo.showToast('操作成功')

// 完整参数
await woo.showToast({
  title: '保存成功',
  icon: 'success',
  duration: 1500,
})

hideToast

Hides the current toast.

await woo.hideToast()

---

showLoading

Shows a loading indicator.

woo.showLoading(options?: string | ShowLoadingOptions): Promise<void>

Parameters:

Field	Type	Required	Default	Description
title	string	No	""	Text
mask	boolean	No	true	Whether to show a mask

woo.showLoading('加载中...')

// 异步操作
await fetchData()

woo.hideLoading()

hideLoading

Hides the loading indicator.

await woo.hideLoading()

---

showDialog

Shows a modal dialog and waits for user action.

woo.showDialog(options?: ShowDialogOptions): Promise<ShowDialogResult>

Parameters:

Field	Type	Required	Default	Description
title	string	No	""	Title
content	string	No	""	Message
cancelText	string	No	""	Cancel label (if empty, hidden)
confirmText	string	No	""	Confirm label

Return value:

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

const { confirm } = await woo.showDialog({
  title: '确认删除',
  content: '删除后无法恢复，是否继续？',
  cancelText: '取消',
  confirmText: '删除',
})

if (confirm) {
  await deleteItem()
  woo.showToast('删除成功')
}

---

alert

Shows a simple alert (single button).

woo.alert(options?: string | AlertOptions): Promise<void>

Parameters:

Field	Type	Required	Default	Description
title	string	No	""	Title
content	string	No	""	Message
buttonText	string	No	"OK"	Button label

// 简写
await woo.alert('操作完成')

// 完整参数
await woo.alert({
  title: '提示',
  content: '您的积分不足',
  buttonText: '知道了',
})

---

showActionSheet

Shows a bottom action sheet.

woo.showActionSheet(options: ShowActionSheetOptions): Promise<ShowActionSheetResult>

Parameters:

Field	Type	Required	Description
itemList	string[]	Yes	List of item labels

Return value:

interface ShowActionSheetResult {
  index: number  // 用户选择的菜单项索引
}

const { index } = await woo.showActionSheet({
  itemList: ['拍照', '从相册选择', '保存图片'],
})

switch (index) {
  case 0: await takePhoto(); break
  case 1: await chooseFromAlbum(); break
  case 2: await saveImage(); break
}

Navigation bar APIs

setNavigationBarTitle

Sets the page title at runtime.

await woo.setNavigationBarTitle({ title: '新标题' })

setNavigationBarColor

Sets navigation bar colors.

await woo.setNavigationBarColor({
  frontColor: '#ffffff',       // 前景色（标题、按钮）
  backgroundColor: '#6366f1', // 背景色
})

showNavigationBarLoading / hideNavigationBarLoading

Shows or hides the navigation bar loading indicator.

woo.showNavigationBarLoading()
await fetchData()
woo.hideNavigationBarLoading()

TabBar API

showTabBar / hideTabBar

Shows or hides the bottom tab bar.

await woo.hideTabBar()  // 隐藏
await woo.showTabBar()  // 显示

setTabBarBadge / removeTabBarBadge

Sets or removes a tab badge.

// 设置第 2 个 Tab 的徽标
await woo.setTabBarBadge({ index: 1, text: '99+' })

// 移除
await woo.removeTabBarBadge({ index: 1 })

setTabBarItem

Updates a tab item at runtime.

await woo.setTabBarItem({
  index: 0,
  text: '新首页',
  iconPath: '/static/icons/new-home.png',
  selectedIconPath: '/static/icons/new-home-active.png',
})

setTabBarStyle

Updates tab bar styling.

await woo.setTabBarStyle({
  color: '#999999',
  selectedColor: '#6366f1',
  backgroundColor: '#ffffff',
  borderStyle: 'white',
})

showTabBarRedDot / hideTabBarRedDot

Shows or hides a small red dot on a tab.

await woo.showTabBarRedDot({ index: 2 })
await woo.hideTabBarRedDot({ index: 2 })

Image preview

previewImage

Previews images full screen.

await woo.previewImage({
  urls: [
    'https://example.com/img/1.jpg',
    'https://example.com/img/2.jpg',
    'https://example.com/img/3.jpg',
  ],
  current: 'https://example.com/img/2.jpg', // 当前显示的图片
})

API quick reference

Method	Description	Signature
showToast	Show a toast	({ title, icon?, duration? }) → Promise<void>
hideToast	Hide toast	() → Promise<void>
showLoading	Show loading	({ title }) → Promise<void>
hideLoading	Hide loading	() → Promise<void>
showModal	Show a modal	({ title, content, ... }) → Promise<{ confirm, cancel }>
showActionSheet	Show an action sheet	({ itemList }) → Promise<{ tapIndex }>
setNavigationBarTitle	Set the nav bar title	({ title }) → Promise<void>
setNavigationBarColor	Set the nav bar colors	({ frontColor, backgroundColor }) → Promise<void>
showTabBar / hideTabBar	Show or hide the TabBar	() → Promise<void>
setTabBarBadge / removeTabBarBadge	Set or remove a tab badge	({ index, text? }) → Promise<void>
setTabBarStyle	Set TabBar style	({ color, selectedColor, ... }) → Promise<void>
showTabBarRedDot / hideTabBarRedDot	Show or hide a tab red dot	({ index }) → Promise<void>
previewImage	Full-screen image preview	({ urls, current? }) → Promise<void>