DOCSEARCHbyAlgolia
Submit Docs

Wot UI Component Library

website·Indexed 32 days ago

https://v1.wot-ui.cn/

An AI-friendly component library for uni-app featuring a comprehensive set of UI components including ActionSheet, Avatar, Calendar, Form, Input, and Layout. It provides global configuration via ConfigProvider for dark mode and theme customization, and is designed to be easily understood by AI tools like VSCode, Cursor, and TRAE.

Tokens
91.9K
Snippets
574
Records
656
Agent score
50%

What's inside Wot UI

  1. Overview of wot-design-uni component library

    wot-design-uni is a UI component library built with Vue 3 and TypeScript, following the wot design specifications. It provides over 80 high-quality components designed to improve development efficiency and provide a unified UI interaction experience. Key capabilities include support for dark mode, internationalization (with 15 built-in language packs), and theme customization via CSS variables.

  2. Overview of ColPicker Multi-column Selector

    The wd-col-picker component is a multi-column selector designed for cascading selections (e.g., selecting Province, City, and District). It supports infinite levels of selection and provides a high-quality interaction experience for hierarchical data.

  4. Use the Avatar component to display user profiles

    The wd-avatar component represents a user or entity and supports three display types: images, text, or icons. It can be used as a standalone element or within an avatar group.
    <!-- Image avatar -->
<wd-avatar src="https://example.com/avatar.jpg" />
<!-- Text avatar -->
<wd-avatar text="U" />
<!-- Icon avatar -->
<wd-avatar icon="user" />

  5. Use the Gap component for layout spacing

    The wd-gap component is used in page layouts as an alternative to margin or padding, or as a placeholder element (typically at the bottom of a page). It allows developers to define a specific height and background color to create visual separation between elements.

  6. Implement basic electronic signature

    Use the wd-signature component to provide a basic signing area. The @confirm event returns a SignatureResult object containing the temporary file path of the generated image. To improve exported image quality, set export-scale to 2 or higher.
    <wd-signature @confirm="confirm" @clear="clear" :export-scale="2" background-color="#ffffff" />
    function confirm(result: SignatureResult) {
  if (result.success) {
    uni.previewImage({
      urls: [result.tempFilePath]
    })
  }
}

function clear() {
  // Logic to clear local image state
}

  7. Create a video carousel

    The wd-swiper supports video URLs in the list array.

    Important Constraints: Embedded videos are only supported on h5, 微信小程序 (WeChat Mini Program), and 钉钉小程序 (DingTalk Mini Program). Other platforms are not supported.

    Key props for video control:

    • autoplayVideo: Set to false to prevent videos from playing automatically.
    • stopAutoplayWhenVideoPlay: Stops the carousel from sliding to the next item while a video is playing.
    <wd-swiper
  :list="videoList"
  autoplay
  stopAutoplayWhenVideoPlay
  :autoplayVideo="false"
  :indicator="{ type: 'fraction' }"
  indicator-position="top-right"
></wd-swiper>
    const videoList = ref([
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4'
])

  8. Implement a basic ActionSheet menu

    The wd-action-sheet component provides a menu that slides up from the bottom. Use v-model to control visibility and the actions prop to define the menu items. Each action object can include a name, subname (description), and color.
    <wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
    const show = ref<boolean>(false)
const actions = ref([
  { name: '选项1' },
  { name: '选项2' },
  { name: '选项3', subname: '描述信息' }
])

function showActions() { show.value = true }
function close() { show.value = false }

function select({ item, index }) {
  console.log(`Selected: ${item.name}, Index: ${index}`)
}

  9. Implement basic pagination with wd-pagination

    Use the wd-pagination component to split large datasets into pages. Bind the current page number using v-model. The total number of pages is automatically calculated based on the total (total number of items) and page-size (items per page, defaults to 10) properties.
    <wd-pagination v-model="value" :total="100" :page-size="10" @change="handleChange" />
    import { ref } from 'vue';

const value = ref<number>(1);
function handleChange({ value }) {
  console.log('Current page:', value);
}

  10. Install Sass for Wot UI

    Wot UI depends on sass. It is critical to use a version of Sass equal to or earlier than 1.78.0, as Dart Sass 3.0.0 introduces API changes that are currently incompatible with the component library.
    npm i sass -D
# or
yarn add sass -D
# or
pnpm add sass -D

  11. Switch the active language in Wot UI

    Use the Locale.use method to switch the current language of the Wot UI components. You must import the corresponding language pack from wot-design-uni/locale/lang/.
    import { Locale } from 'wot-design-uni'
// Import the English language pack
import enUS from 'wot-design-uni/locale/lang/en-US'

Locale.use('en-US', enUS)

  12. Implement custom icon fonts in wd-icon

    To use icons beyond the built-in set, import a third-party iconfont CSS file (containing the @font-face and specific icon classes) and use the class-prefix attribute to specify the custom font family class.
    /* src/iconfont/index.css */
@font-face {
  font-family: "fish";
  src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2');
}

.fish {
  font-family: "fish" !important;
}

.fish-kehuishouwu:before {
  content: "\e627";
}

    <!-- In app.vue --> <style> @import '@/iconfont/index.css'; </style>

    <!-- Usage: class-prefix matches the CSS class 'fish' --> <wd-icon class-prefix="fish" name="kehuishouwu" />