DOCSEARCHbyAlgolia
Submit Docs

Wot UI

repository·master·Indexed 25 days ago

https://github.com/moonofweisheng/wot-design-uni

A comprehensive uni-app component library built on Vue 3 and TypeScript for cross-platform mobile development, supporting WeChat, Alipay, and DingTalk Mini Programs, H5, and Apps. It features over 80 high-quality components, built-in internationalization for 15 languages, and theme customization via CSS variables with dark mode support.

Tokens
271.4K
Snippets
818
Records
1.3K
Agent score
81%

What's inside wot-design-uni

  1. Overview of Wot UI

    master

    Wot UI is a high-quality uni-app component library built with Vue 3 and TypeScript. It is inspired by wot-design and is designed to provide a comprehensive set of mobile UI components for multi-platform development.

    Key Features

    • Multi-platform Support: Works across WeChat Mini Programs, Alipay Mini Programs, DingTalk Mini Programs, H5, and Apps.
    • Extensive Component Set: Over 80 high-quality components covering mainstream mobile scenarios.
    • TypeScript Support: Built with TypeScript for a robust type system.
    • Internationalization: Built-in support for 15 languages.
    • Theming: Supports theme customization via CSS variables and includes built-in dark mode support.

  2. Overview of wot-design-uni

    master

    wot-design-uni is a high-quality component library built on vue3 and TypeScript, following the wot design design specifications. It provides over 80 components designed for mobile scenarios and aims to provide unified UI interactions while improving development efficiency.

    Key Features

    • Multi-platform Support: Works across WeChat Mini Programs, Alipay Mini Programs, DingTalk Mini Programs, H5, and Apps.
    • High Quality: 80+ components covering mainstream mobile use cases.
    • Type Safety: Built with TypeScript for a robust component type system.
    • Internationalization: Built-in support for 15 languages.
    • Customization: Supports theme customization via CSS variables and includes built-in dark mode support.

  3. Explore uni-app templates for Wot UI

    master

    Several templates are available for starting uni-app projects with or without deep Wot UI integration. Choose one based on your preferred technology stack and level of integration:

    • wot-starter: Deeply integrated with Wot UI, maintained by the Wot UI team.
    • vitesse-uni-app: A clean, cross-platform template powered by Vite & uni-app (no deep Wot UI integration).
    • unibest: Uses the latest frontend stack, runs via CLI, and offers optional Wot UI support.
    • vite-uniapp-template: A practical-first starter template.
    • uni-plus: A feature-rich development template.
    • uniez-template: Focuses on functionality and developer experience.
    • snail-uni: A framework template built specifically for developers.

  4. Use the Skeleton component for loading states

    master
    The wd-skeleton component displays placeholder graphics while content is loading, reducing user anxiety. It supports various styles and can be used to wrap actual content using slots. When the loading prop is set to false, the skeleton is hidden and the content provided in the default slot is displayed.

  6. Use DatetimePickerView for date and time selection

    master

    The wd-datetime-picker-view component is an encapsulation of the Picker component that provides built-in date and time selection options.

    Data Types and Binding

    • datetime (default): Displays year, month, day, hour, and minute. The v-model value is a timestamp (number).
    • date: Displays year, month, and day. The v-model value is a timestamp (number).
    • year-month: Displays year and month. The v-model value is a timestamp (number).
    • year: Displays year only. The v-model value is a timestamp (number).
    • time: Displays hour and minute. The v-model value is a string in HH:mm format.
    • time (with use-second): Displays hour, minute, and second. The v-model value is a string in HH:mm:ss format.
    • datetime (with use-second): Displays year, month, day, hour, minute, and second. The v-model value is a timestamp (number).
    <wd-datetime-picker-view v-model="value" label="Date Selection" @change="handleChange" />
    import { ref } from 'vue'
import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()
const value = ref<number>(Date.now())

function handleChange({ value }) {
  toast.show('Selected ' + new Date(value))
}

  7. Use ColPicker for multi-column cascading selection

    master

    The ColPicker component is used for cascading selections (e.g., selecting province, city, and district) and supports infinite levels of selection.

    Key Props

    • label: Sets the text displayed on the left side.
    • columns: A two-dimensional array where each inner array represents a column. Each option must contain value and label.
    • v-model: An array of strings representing the currently selected values.
    • column-change: A function used to handle column transitions, especially useful for asynchronous data loading.
    • auto-complete: When set, if columns is empty, the component automatically triggers column-change to fetch and fill data based on the current selection.

    Events

    • @confirm: Emitted when the user confirms the selection. The event object contains a value property (the array of selected values).
    <wd-col-picker 
  label="选择地址" 
  v-model="value" 
  :columns="area" 
  :column-change="columnChange" 
  @confirm="handleConfirm">
</wd-col-picker>

  8. Community support channels

    master

    WotUI provides several channels for learning and exchange:

    • WeChat Official Account: Follow 【阿鱼聊前端】 for insights on frontend development, uni-app, and WotUI.
    • WeChat Groups: Join by adding 【摸鱼小助手】 on WeChat. You must provide your qualification credential (Test ID or Donation ID) when requesting to join.
    • QQ Groups: Currently, all QQ groups (1, 2, and 3) are full. Please use the WeChat Group instead.

  9. WotUI Support Channels

    master

    WotUI provides several ways to stay updated and seek help:

    • WeChat Official Account: Follow 【阿鱼​聊前端】(Fish Talks Frontend) for knowledge sharing regarding frontend, uni-app, and the wot-ui library.
    • WeChat Groups: Add 【摸鱼小助手】(Fish Assistant) on WeChat via the official account. You must provide your group joining credentials when joining.
    • QQ Groups: Note that currently, QQ Groups 1, 2, and 3 are full. It is recommended to use the WeChat groups instead.

  10. Customize Navbar content with slots

    master

    You can replace the default title or buttons with custom content using the following slots:

    • left: Custom content for the left side.
    • title: Custom content for the center (useful for search bars).
    • right: Custom content for the right side.
    • capsule: Custom capsule (when used, the left slot/properties are ignored).
    <wd-navbar title="Title" left-text="Back" left-arrow>
  <template #right>
    <wd-icon name="search" size="18" />
  </template>
</wd-navbar>

  11. Switching between single and multiple selection

    master

    Control the selection mode using the type prop:

    • type="checkbox" (Default): Enables multiple selection. The v-model value must be an Array.
    • type="radio": Enables single selection. The v-model value must be a String, Number, or Boolean.
    <wd-select-picker label="类型切换" v-model="value" :columns="columns" type="radio"></wd-select-picker>