DOCSEARCHbyAlgolia
Submit Docs

Wot UI Component Library

website·Indexed 32 days ago

https://wot-ui.cn

A comprehensive UI component library featuring a wide array of mobile-optimized components including ActionSheet, Calendar, Form, Grid, and Input. It provides a dedicated AI toolchain via @wot-ui/cli, supports global configuration through ConfigProvider, and offers specialized tools like ImgCropper and Keyboard for enhanced user interaction.

Tokens
95.1K
Snippets
583
Records
630
Agent score
67%

What's inside Wot UI

  1. Overview of Wot UI features and capabilities

    Wot UI is a UI library built with Vue 3 and TypeScript, designed for mobile development across multiple platforms including WeChat Mini Programs, Alipay Mini Programs, DingTalk Mini Programs, H5, and APP.

    Key features include:

    • 80+ high-quality components covering mainstream mobile scenarios.
    • AI-friendly design system and programming practice solutions.
    • Full TypeScript support for a robust component type system.
    • Internationalization support with 15 built-in language packs.
    • Theme customization via CSS variables.
    • Native support for Dark Mode.

  2. Understand wot-ui design values for uni-app development

    wot-ui follows a set of design values aimed at providing a consistent development experience for cross-platform mobile development using uni-app. The core values are:

    • Unification (归一): A single component set with consistent behavior across all platforms. It abstracts platform differences to provide unified APIs, interactions, styles, and events, strictly following Design Tokens and consistent icon rules.
    • Pragmatism (务实): Focuses on efficient, concise interfaces without redundant functions or decorations, ensuring controllable density and high reusability.
    • Openness (开放): Uses a three-layer controllable architecture (Atomic Layer $\rightarrow$ Semantic Layer $\rightarrow$ Component Configuration Layer). This allows different business lines to share a common foundation while customizing the upper layers.
    • Friendliness (友好): Prioritizes both end-user experience and developer experience, ensuring deep integration with uni-app engineering for out-of-the-box usability, maintainability, and collaboration between design and frontend teams.

  3. Use the Empty component for placeholder displays

    The wd-empty component is used for fallback placeholder displays. You can customize the displayed icon using the icon attribute and the descriptive text using the tip attribute.
    <wd-empty icon="no-result" tip="当前搜索无结果" />

  5. Use the wd-tag component for status and content labeling

    The wd-tag component is used to mark statuses or summarize main content. It supports various types and visual variants to distinguish different categories of information.
    <wd-tag>标签</wd-tag>
<wd-tag type="primary">常用标签</wd-tag>
<wd-tag type="danger">危险标签</wd-tag>
<wd-tag type="warning">警告标签</wd-tag>
<wd-tag type="success">成功标签</wd-tag>

  6. Understand the wot-ui Design Token architecture

    wot-ui V2 uses a three-layer CSS variable architecture for its theme system. This allows for flexible customization by overriding variables at different levels of abstraction:

    1. Base Variables: Pure visual constants without business meaning (e.g., --wot-blue-6: #1C64FDFF;).
    2. Semantic Variables: Map base variables to business scenarios (e.g., --wot-primary-6: var(--wot-blue-6);).
    3. Component Variables: The top layer that maps semantic variables to specific UI component properties like background colors or borders (e.g., --wot-button-primary-bg: var(--wot-primary-6);).

  7. Migrate Wot UI from v1 to v2 (Overview)

    Upgrading from Wot UI v1 to v2 involves more than just a package update. It includes changes to the form validation system, theme variables, component naming, and engineering configurations. The recommended migration order is: 1. Dependency and path replacement, 2. High-impact component updates (Form, Dialog, Cascader), 3. Style and platform regression testing.

  8. Use the Gap component for layout spacing

    The wd-gap component provides a spacing placeholder for page layouts. It can be used as a replacement for margin or padding, or as a placeholder element at the bottom of a page. By default, it renders a transparent gap with a height of 14px.
    <wd-gap />

  9. Configure Grid item navigation

    To make grid items act as links, set clickable on the wd-grid container. Then, on the wd-grid-item, specify the url and the link-type (e.g., navigateTo, switchTab, reLaunch, redirectTo).
    <wd-grid clickable>
  <wd-grid-item link-type="navigateTo" url="/pages/button/Index" icon="edit" text="Navigate to ..." />
</wd-grid>

  10. Customize navigation bar content using slots

    The wd-navbar provides slots for full customization of the left, title, and right areas. This is useful for adding search bars or custom icons.
    <wd-navbar title="Title">
  <template #left>
    <wd-icon name="left" size="24px" class="wd-navbar__arrow" />
  </template>
  <template #title>
    <view class="search-box">
      <wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
    </view>
  </template>
  <template #right>
    <wd-icon name="search-line" size="18" />
  </template>
</wd-navbar>

  11. Configure dark mode in Wot UI

    Set the theme prop of wd-config-provider to dark to enable dark style for all Wot components within its scope. Note that ConfigProvider only affects Wot components and does not automatically change the global page background or text color.

    Prerequisite: You must import the theme variable file in your entry file (e.g., App.vue) before using dark mode.

    <wd-config-provider theme="dark">
  <wd-button type="primary">Dark Mode Button</wd-button>
</wd-config-provider>
    /* App.vue - npm installation */
@use '@wot-ui/ui/styles/theme/index.scss' as *;

/* App.vue - uni_modules installation */
@use '@/uni_modules/wot-ui/styles/theme/index.scss' as *;

  12. Implement a 'Load More' list using wd-loadmore

    The wd-loadmore component is used to indicate the loading status at the bottom of a list. It is typically paired with the onReachBottom lifecycle hook in uni-app to trigger data fetching when the user scrolls to the end of the page.
    <template>
  <view class="container">
    <view v-for="index in num" :key="index" class="list-item">
      <!-- List Content -->
    </view>
    <wd-loadmore :state="state" @reload="loadmore" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'

const state = ref('loading')
const num = ref(0)
const max = ref(60)

onReachBottom(() => {
  if (num.value === 45) {
    state.value = 'error'
  } else if (num.value < max.value) {
    loadmore()
  } else if (num.value === max.value) {
    state.value = 'finished'
  }
})

onLoad(() => {
  loadmore()
})

function loadmore() {
  setTimeout(() => {
    num.value = num.value + 15
    state.value = 'loading'
  }, 200)
}
</script>