DOCSEARCHbyAlgolia
Submit Docs

Wot UI Component Library

website·Indexed 32 days ago

https://v2.wot-ui.cn

A comprehensive UI component library featuring a wide array of elements such as ActionSheet, Calendar, Form, Grid, and Input. It includes a dedicated CLI (@wot-ui/cli), global configuration via ConfigProvider, and specialized AI integration tools including documentation indices, MCP Server, and Agent Skills.

Tokens
96.4K
Snippets
609
Records
652
Agent score
48%

What's inside Wot UI

  1. Overview of CalendarView component

    The wd-calendar-view component provides a flexible calendar panel for selecting single dates, multiple dates, date ranges, weeks, months, and date-times. It is designed to serve as the underlying panel for business-specific calendar pickers.

  2. Overview of wot-ui AI Skills

    Skills are 'superpower templates' for AI Agents (such as Trae, Cursor, and Cline) that provide complete, reusable solutions for specific development problems. They enable AI to handle wot-ui tasks more accurately than simple documentation reading.

  3. Overview of Wot UI V2 Features

    Wot UI V2 is a UI library built with Vue 3 and TypeScript, designed for high aesthetic quality and AI-friendliness. It provides over 80 high-quality components covering mainstream mobile scenarios. Key features include:

    • Multi-platform Support: Compatible with WeChat Mini Programs, Alipay Mini Programs, DingTalk Mini Programs, H5, and native APPs.
    • Developer Experience: Strong type system via TypeScript and an AI-friendly design system.
    • Customization: Supports dark mode, internationalization (15 built-in language packs), and theme customization via CSS variables.

  4. Use new Preview components in v2

    Wot UI v2 introduces dedicated components for image and video previews. These can replace direct calls to uni.previewImage or custom-built preview layers.

    Available components/hooks:

    • ImagePreview / useImagePreview
    • VideoPreview / useVideoPreview

  5. Use the Empty component for placeholder displays

    The wd-empty component is used to provide a fallback placeholder UI when there is no data to display. You can customize the icon and the tip text to provide context to the user.
    <wd-empty icon="no-result" tip="当前搜索无结果" />

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

    The wd-tag component is used to mark statuses or summarize primary 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>

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

    Migrating from Wot UI v1 to v2 involves more than just a package update. It includes changes to form validation, theme variables, component naming, and engineering configurations. The recommended migration order is: 1. Update dependencies and paths, 2. Update high-impact components (Form, Dialog, Cascader), 3. Perform style and platform regression testing.

  9. Understand the wot-ui Design Token architecture

    wot-ui V2 uses a three-layer CSS variable architecture to manage themes. 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 or text color (e.g., --wot-button-primary-bg: var(--wot-primary-6);).

  10. 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 and improving product consistency. The framework is built on four core pillars:

    1. Unification (归一): Ensures a single set of components behaves consistently across all platforms. It abstracts platform differences to provide unified APIs, interactions, styles, and events, strictly following Design Tokens and consistent icon rules.
    2. Pragmatism (务实): Focuses on efficient, concise interfaces without redundant functions or decorations, maintaining controllable density and high reusability.
    3. Openness (开放): Implements a three-layer controllable architecture (Atomic Layer $\rightarrow$ Semantic Layer $\rightarrow$ Component Configuration Layer). This allows multiple business lines to share a common base while customizing the upper layers.
    4. Friendliness (友好): Prioritizes both end-user experience and developer experience. It is deeply integrated with uni-app engineering to be out-of-the-box ready, easy to maintain, and collaborative for design and frontend teams.

  11. Use Wot UI llms.txt resources for AI indexing

    Wot UI provides two structured text files designed for Large Language Models (LLMs) to help AI tools better understand, index, and retrieve component documentation, examples, and best practices.

    • llms.txt: A structured overview containing all components and their documentation links.
    • llms-full.txt: Full documentation including implementation details and code examples.
    Overview: https://wot-ui.cn/llms.txt
Full Docs: https://wot-ui.cn/llms-full.txt

  12. Control VideoPreview using component instance (ref)

    For component-based control, use a Vue ref to access the VideoPreviewInstance and call its open and close methods.
    <template>
  <wd-video-preview ref="videoPreviewRef" />
  <wd-button @click="openPreview">打开预览</wd-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { VideoPreviewInstance, PreviewVideo } from '@/uni_modules/wot-ui/components/wd-video-preview/types'

const videoPreviewRef = ref<VideoPreviewInstance>()

const video: PreviewVideo = {
  url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
  poster: 'https://wot-ui.cn/assets/panda.jpg',
  title: '视频预览'
}

function openPreview() {
  videoPreviewRef.value?.open(video)
}
</script>