Wot UI

https://wot-ui.cn/en-US
Admin
Wot UI is a beautiful and lightweight uni-app component library built with Vue3+TS, offering over 70...
Tokens:138,632
Snippets:907
Trust Score:4.4
Update:11 months ago
Show doc for...
Tokens:
Raw
### Create Uni-App Starter Project with Wot UI (Bash)

Source: https://wot-ui.cn/en-US/guide/quick-use

Command to quickly create a new uni-app project pre-configured with Wot UI and other plugins using 'create-uni' and the 'wot-starter' template. Requires pnpm to be installed.

```bash
pnpm create uni@latest -t wot-starter <your project name>
```

--------------------------------

### Install Wot UI using npm

Source: https://wot-ui.cn/en-US/guide/quick-use

Installs the Wot UI component library into your project using npm. This method requires additional configuration for automatic component import.

```bash
npm i wot-design-uni
```

```bash
yarn add wot-design-uni
```

```bash
pnpm add wot-design-uni
```

--------------------------------

### Install @uni-ku/root (npm, yarn, pnpm)

Source: https://wot-ui.cn/en-US/component/config-provider

These commands show how to install the `@uni-ku/root` package, which is required for global sharing functionality in Wot UI projects. Installation is supported via npm, yarn, and pnpm.

```bash
npm i -D @uni-ku/root
```

```bash
yarn add -D @uni-ku/root
```

```bash
pnpm add -D @uni-ku/root
```

--------------------------------

### Manage Wot Starter Project

Source: https://wot-ui.cn/en-US/guide/cli-templates

Commands for managing the 'wot-starter' uni-app project. This includes opening the project in VS Code, installing dependencies, and running the development server.

```bash
code <project-name>
```

```bash
pnpm install
```

```bash
pnpm dev
```

--------------------------------

### Install Sass Dependency for Wot UI

Source: https://wot-ui.cn/en-US/guide/quick-use

Installs the Sass preprocessor, which is a dependency for Wot UI. This should be installed as a development dependency.

```bash
npm i sass -D
```

```bash
yarn add sass -D
```

```bash
pnpm add sass -D
```

--------------------------------

### Enable Volar Support for Wot UI

Source: https://wot-ui.cn/en-US/guide/quick-use

Configures `tsconfig.json` to enable Volar support for Wot UI components when using npm installation in CLI projects. This provides better type checking and autocompletion in your IDE.

```json
// tsconfig.json
{
  "compilerOptions": {
    "types": ["wot-design-uni/global"]
  }
}
```

--------------------------------

### Install @vant/area-data for ColPicker

Source: https://wot-ui.cn/en-US/component/col-picker

This section provides instructions on how to install the `@vant/area-data` npm package, which is used as a data source for the ColPicker component. It supports installation via npm, yarn, pnpm, and Bun.

```bash
# via npm
npm i @vant/area-data

# via yarn
yarn add @vant/area-data

# via pnpm
pnpm add @vant/area-data

# via Bun
bun add @vant/area-data
```

--------------------------------

### Basic NoticeBar Usage - HTML

Source: https://wot-ui.cn/en-US/component/notice-bar

Demonstrates the basic usage of the NoticeBar component by setting the 'text' content and a 'prefix' left icon. No external dependencies are required for this basic setup.

```html
<wd-notice-bar text="This is a message notification, this is a message notification, this is a message notification" prefix="warn-bold" />
```

--------------------------------

### Configure Vite for Automatic Component Import with WotResolver

Source: https://wot-ui.cn/en-US/guide/quick-use

Sets up automatic component import using `@uni-helper/vite-plugin-uni-components` in `vite.config.ts`. This solution uses a `WotResolver` to automatically register Wot UI components.

```typescript
// vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

import Components from '@uni-helper/vite-plugin-uni-components'
import { WotResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'


export default defineConfig({
  plugins: [
    // make sure put it before `Uni()`
    Components({
    resolvers: [WotResolver()]
  }), uni()]
});
```

--------------------------------

### HTML & TypeScript: Advanced Color Object for Progress

Source: https://wot-ui.cn/en-US/component/progress

Provides an example of using a more complex color configuration for the wd-progress component with an array of objects, each specifying a color and a percentage breakpoint. This requires corresponding TypeScript setup.

```html
<wd-progress :percentage="percentage" :color="colorObject" />
```

```typescript
import type { ProgressColor } from '@/uni_modules/wot-design-uni/components/wd-progress/types'

const colorObject = ref<ProgressColor>([
  {
    color: 'yellow',
    percentage: 30
  },
  {
    color: 'red',
    percentage: 60
  },
  {
    color: 'blue',
    percentage: 80
  },
  {
    color: 'black',
    percentage: 90
  }
])
const percentage = ref<number>(100)
```

--------------------------------

### Configure easycom for Automatic Component Import

Source: https://wot-ui.cn/en-US/guide/quick-use

Configures the `easycom` feature in `pages.json` to enable automatic import of Wot UI components. This simplifies component usage by eliminating manual import statements.

```json
// pages.json
{
 "easycom": {
  "autoscan": true,
  "custom": {
    "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
  }
 },
 
 // This is the existing content
 "pages": [
  // ......
 ]
}
```

--------------------------------

### Basic Pagination Usage (HTML)

Source: https://wot-ui.cn/en-US/component/pagination

Demonstrates the fundamental setup of the wd-pagination component using v-model to bind the current page and specifying the total number of items and items per page.

```html
<wd-pagination v-model="value" @change="handleChange" />
```

--------------------------------

### ActionSheet API Documentation

Source: https://wot-ui.cn/en-US/component/action-sheet

Documentation for the ActionSheet component, covering its attributes, events, and usage examples.

```APIDOC
## ActionSheet Component

A panel that slides up from the bottom, presenting a set of options.

### Basic Usage

The `visible` attribute controls whether the action sheet is displayed. The `actions` attribute is an array of objects, each object in the array represents an option in the action sheet. The `name` attribute is the name of the option, and the `color` attribute is the text color of the option.

```html
<wd-button @click="show = true">Open ActionSheet</wd-button>
<wd-action-sheet :visible.sync="show" :actions="actions" @select="handleSelect" />
```

```typescript
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      show: false,
      actions: [
        {
          name: 'Option 1'
        },
        {
          name: 'Option 2'
        },
        {
          name: 'Option 3',
          color: '#4D80F0'
        }
      ]
    })

    const handleSelect = item => {
      console.log(item)
    }

    return {
      ...toRefs(state),
      handleSelect
    }
  }
}
```

### Cancel Button

Set the `cancel-text` attribute to display a cancel button at the bottom of the action sheet.

```html
<wd-action-sheet :visible.sync="show" :actions="actions" cancel-text="Cancel" />
```

### Title

Set the `title` attribute to display a title at the top of the action sheet.

```html
<wd-action-sheet :visible.sync="show" :actions="actions" title="Title" />
```

### Option Status

The `actions` array can set the `disabled` attribute to disable an option, and the `loading` attribute to set an option to loading state.

```html
<wd-action-sheet :visible.sync="show" :actions="actions" />
```

```typescript
export default {
  data() {
    return {
      show: false,
      actions: [
        {
          name: 'Option 1',
          disabled: true
        },
        {
          name: 'Option 2',
          loading: true
        },
        {
          name: 'Option 3'
        }
      ]
    }
  }
}
```

### Custom Panel

The action sheet can be used with a slot to customize the panel content.

```html
<wd-action-sheet :visible.sync="show" title="Custom Panel">
  <view style="padding: 15px 15px 150px 15px; color: #333333; font-size: 16px;">
    Custom Content
  </view>
</wd-action-sheet>
```

### Attributes

| Attribute | Description | Type | Default | Version |
|---|---|---|---|---|
| visible | Whether to display the action sheet, supports the .sync modifier | boolean | false | - |
| actions | Options | Action[] | [] | - |
| title | Title | string | - | - |
| cancel-text | Cancel button text | string | - | - |
| close-on-click-action | Whether to close the action sheet when clicking an option | boolean | true | - |
| close-on-click-modal | Whether to close the action sheet when clicking the modal | boolean | true | - |
| duration | Animation duration | number | 200(ms) | - |
| z-index | z-index | number | 10 | - |
| lazy-render | Whether to lazily render the action sheet | boolean | true | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | true | 1.0.0 |

### Action Options

| Key | Description | Type | Default | Version |
|---|---|---|---|---|
| name | Option name | string | - | - |
| subname | Option subname | string | - | - |
| color | Option text color | string | - | - |
| disabled | Whether to disable the option | boolean | false | - |
| loading | Whether to display loading status | boolean | false | - |

### Events

| Event Name | Description | Parameters | Version |
|---|---|---|---|
| select | Triggered when an option is clicked | item: selected option, index: option index | - |
| open | Triggered when the action sheet is opened | - | - |
| opened | Triggered when the action sheet opening animation ends | - | - |
| close | Triggered when the action sheet is closed | - | - |
| closed | Triggered when the action sheet closing animation ends | - | - |
| click-modal | Triggered when the modal is clicked | - | - |
| cancel | Triggered when the cancel button is clicked | - | - |

```

--------------------------------

### Wot UI Component Usage in SFC (HTML)

Source: https://wot-ui.cn/en-US/guide/quick-use

Demonstrates the direct usage of a Wot UI component within a Single File Component (SFC) on platforms that support automatic component import. No explicit import statement is needed for most components.

```html
<wd-toast></wd-toast>
```

--------------------------------

### Basic Pagination Usage (TypeScript)

Source: https://wot-ui.cn/en-US/component/pagination

Provides the corresponding TypeScript code for the basic pagination example, showing how to manage the page value using ref and handle page change events.

```typescript
const value = ref<number>(1)
function handleChange({ value }) {
  console.log(value)
}
```

--------------------------------

### HTML Example of Basic Notify Usage

Source: https://wot-ui.cn/en-US/component/notify

This is the basic HTML structure required to render the Notify component. It serves as a placeholder where the notification will be mounted.

```html
<wd-notify />
```

--------------------------------

### Display Confirm Dialog (TypeScript)

Source: https://wot-ui.cn/en-US/component/message-box

Provides an example of a confirmation dialog, which prompts the user to confirm an action. It uses promises to handle the user's choice (confirm or cancel).

```typescript
import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()

function confirm() {
  message
    .confirm({
      msg: 'Prompt text',
      title: 'Title'
    })
    .then(() => {
      console.log('Clicked confirm button')
    })
    .catch(() => {
      console.log('Clicked cancel button')
    })
}
```

--------------------------------

### Theme Customization via ConfigProvider (Vue)

Source: https://wot-ui.cn/en-US/component/config-provider

This example demonstrates theme customization using the `theme-vars` property of the `wd-config-provider` component. By passing an object of CSS variable overrides, you can dynamically change component styles, such as button colors.

```html
<wd-config-provider :theme-vars="themeVars">
  <div style="margin: 16px">
    <wd-button round block type="primary">Submit</wd-button>
  </div>
</wd-config-provider>
```

```typescript
import { ref, reactive } from 'vue'

export default {
  setup() {
    // Values in themeVars will be converted to corresponding CSS variables
    // For example, buttonPrimaryBg will be converted to `--wot-button-primary-bg-color`
    const themeVars = reactive({
      buttonPrimaryBgColor: '#07c160',
      buttonPrimaryColor: '#07c160'
    })
    return {
      themeVars
    }
  }
}
```

--------------------------------

### Basic Step Usage with Vue

Source: https://wot-ui.cn/en-US/component/steps

Demonstrates the fundamental usage of the wd-steps and wd-step components in Vue.js. It utilizes a reactive 'active' variable to control the current step progression. This example requires Vue's reactivity system.

```html
<wd-steps :active="active">
  <wd-step />
  <wd-step />
  <wd-step />
</wd-steps>
```

```ts
import { ref } from 'vue';

const active = ref<number>(0)

function nextStep() {
  active.value = active.value + 1
}
```

--------------------------------

### Dynamically Switch Theme (Vue)

Source: https://wot-ui.cn/en-US/component/config-provider

This code shows how to dynamically switch between light and dark themes using the `theme` property of the `wd-config-provider` component. The example uses Vue's Composition API to change the theme after a delay.

```vue
<wd-config-provider :theme="theme">...</wd-config-provider>
```

```typescript
export default {
  setup() {
    const theme = ref('light')

    setTimeout(() => {
      theme.value = 'dark'
    }, 1000)

    return { theme }
  }
}
```

--------------------------------

### Dual Slider Usage (Vue)

Source: https://wot-ui.cn/en-US/component/slider

Shows how to configure the wd-slider component for dual-slider mode. In this mode, the 'v-model' should be bound to a two-element array to represent the start and end points of the slider range. This example is for a Vue.js environment.

```html
<wd-slider v-model="value" />
```

```typescript
const value = ref<number[]>([10, 30])
```

--------------------------------

### Implement Return Functionality - HTML & TS

Source: https://wot-ui.cn/en-US/component/navbar

Provides an example of implementing the 'return to previous level' functionality in the navbar. It includes setting a left text and arrow, and handling the click event to navigate back using uni.navigateBack.

```html
<wd-navbar title="Title" left-text="Back" left-arrow @click-left="handleClickLeft"></wd-navbar>

```

```typescript
function handleClickLeft() {
  uni.navigateBack()
}

```

--------------------------------

### Create Uni-App Project with Wot Starter Template CLI

Source: https://wot-ui.cn/en-US/guide/cli-templates

Create a uni-app project using the 'wot-starter' template via the create-uni CLI. This template is specifically designed for quick-start projects with deep Wot UI integration.

```bash
pnpm create uni <project-name> -t wot-starter
```

--------------------------------

### Basic Checkbox Usage with Vue.js

Source: https://wot-ui.cn/en-US/component/checkbox

Demonstrates the basic setup of a Wot UI checkbox using Vue.js. It utilizes `v-model` to bind the checkbox state to a reactive variable. This example shows how to import and use the checkbox component in a Vue application.

```html
<wd-checkbox v-model="value">Option</wd-checkbox>
```

```typescript
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      value: true
    })

    return {
      ...toRefs(state)
    }
  }
}
```

--------------------------------

### UseUploadOptions Configuration

Source: https://wot-ui.cn/en-US/component/use-upload

Configuration options for the `startUpload` method.

```APIDOC
## UseUploadOptions 

### Description
Options for configuring the file upload process.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **action** (string) - Upload URL. Required.
- **header** (Record<string, any>) - Request headers. Optional. Defaults to `{}`.
- **name** (string) - Key corresponding to the file in the form data. Optional. Defaults to `'file'`.
- **formData** (Record<string, any>) - Other form data to be sent with the upload. Optional. Defaults to `{}`.
- **fileType** ('image' | 'video' | 'audio') - The type of file being uploaded. Optional. Defaults to `'image'`.
- **statusCode** (number) - The HTTP status code considered as success. Optional. Defaults to `200`.
- **uploadMethod** (UploadMethod) - A custom function to handle the upload. Optional.
- **onSuccess** (Function) - Callback function executed when the upload is successful. Optional.
- **onError** (Function) - Callback function executed when the upload fails. Optional.
- **onProgress** (Function) - Callback function executed during the upload progress. Optional.

### Request Example
```json
{
  "action": "https://example.com/upload",
  "header": {
    "Authorization": "Bearer your_token"
  },
  "name": "myFile",
  "formData": {
    "userId": "123"
  },
  "fileType": "image",
  "statusCode": 201,
  "onSuccess": "(response) => console.log(response)",
  "onError": "(error) => console.error(error)",
  "onProgress": "(progress) => console.log(progress)"
}
```

### Response
#### Success Response
- N/A (Configuration object)

#### Response Example
```json
// N/A
```
```

--------------------------------

### Create Uni-App Project with Wot UI CLI

Source: https://wot-ui.cn/en-US/guide/cli-templates

Utilize the create-uni CLI to quickly scaffold a new uni-app project. This command automatically sets up a TypeScript project with Pinia state management, Wot UI component library integration, and ESLint support.

```bash
pnpm create uni <your-project-name> --ts -m pinia -u wot -e
```

--------------------------------

### Install Specific Sass Version for Compatibility

Source: https://wot-ui.cn/en-US/guide/common-problems

Ensures compatibility with Dart Sass by installing version 1.78.0 or earlier. This is necessary because newer versions of Dart Sass have deprecated certain APIs that Wot UI may not yet support.

```bash
npm i sass@1.78.0 -D
```

```bash
yarn add sass@1.78.0 -D
```

```bash
pnpm add sass@1.78.0 -D
```

--------------------------------

### Form Validation Error Display with Wot UI

Source: https://wot-ui.cn/en-US/component/form

Illustrates how to configure different error display methods for form validation in Wot UI. The `errorType` prop on `wd-form` can be set to 'message' (default), 'toast', or 'none' to control how validation errors are presented to the user. The example uses 'message' by default and includes the same input fields and submission logic as the basic example.

```html
<wd-form ref="form" :model="model" :errorType="errorType">
  <wd-cell-group border>
    <wd-input
      label="Username"
      label-width="100px"
      prop="value1"
      clearable
      v-model="model.value1"
      placeholder="Please enter username"
      :rules="[{ required: true, message: 'Please enter username' }]"
    />
    <wd-input
      label="Password"
      label-width="100px"
      prop="value2"
      show-password
      clearable
      v-model="model.value2"
      placeholder="Please enter password"
      :rules="[{ required: true, message: 'Please enter password' }]"
    />
  </wd-cell-group>
  <view class="footer">
    <wd-button type="primary" size="large" @click="handleSubmit" block>Submit</wd-button>
  </view>
</wd-form>
```

```typescript
<script lang="ts" setup>
const { success: showSuccess } = useToast()
const errorType = ref<string>('message')
const model = reactive({
  value1: '',
  value2: ''
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: 'Validation passed'
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>
```

--------------------------------

### Basic Transition Usage in HTML

Source: https://wot-ui.cn/en-US/component/transition

Demonstrates the fundamental usage of the wd-transition component by wrapping content and controlling visibility with the 'show' prop and specifying an animation name.

```html
<wd-transition :show="show" name="fade">Content</wd-transition>
```

--------------------------------

### Vue 3: Enable virtualHost for Custom Components (Script Setup)

Source: https://wot-ui.cn/en-US/guide/common-problems

This snippet shows how to enable the virtualHost option in Vue 3 using the script setup syntax. Similar to Vue 2, setting virtualHost to true allows custom nodes to act as virtual components, simplifying WeChat mini program custom component rendering by removing extra outermost tags. The `mergeVirtualHostAttributes` option can further assist in merging attributes.

```typescript
export default {
  // Set custom nodes as virtual to make them behave more like Vue components and remove the extra outermost tag of WeChat mini program custom components
  options: {
    virtualHost: true
  }
}

```

--------------------------------

### Basic File Upload and Selection with useUpload (TypeScript)

Source: https://wot-ui.cn/en-US/component/use-upload

Demonstrates the basic usage of the `useUpload` hook for choosing files and initiating an upload. It shows how to select multiple images, define file upload parameters, and handle upload progress, success, and errors. Dependencies include `@/uni_modules/wot-design-uni`. The input is file objects and upload options, and the output includes upload status and task information.

```typescript
import { useUpload } from '@/uni_modules/wot-design-uni'

const { startUpload, abort, chooseFile, UPLOAD_STATUS } = useUpload()

// Choose files
const files = await chooseFile({
  accept: 'image',
  multiple: true,
  maxCount: 9
})

// Start upload
const file = {
  url: 'file://temp/image.png',
  status: UPLOAD_STATUS.PENDING,
  percent: 0
}

startUpload(file, {
  action: 'https://upload-url',
  onSuccess(res) {
    console.log('Upload successful', res)
  },
  onError(err) {
    console.log('Upload failed', err) 
  },
  onProgress(progress) {
    console.log('Upload progress', progress)
  }
})

// Abort upload
abort()
```

--------------------------------

### Round Tag Styles - HTML

Source: https://wot-ui.cn/en-US/component/tag

Illustrates the usage of the 'round' property for wd-tag components, resulting in rounded corners. Includes examples with different tag types.

```html
<wd-tag round>Tag</wd-tag>
<wd-tag type="primary" round>Tag</wd-tag>
<wd-tag type="danger" round>Tag</wd-tag>
<wd-tag type="warning" round>Tag</wd-tag>
<wd-tag type="success" round>Tag</wd-tag>
```

--------------------------------

### Wot UI Tooltip Basic Usage Example

Source: https://wot-ui.cn/en-US/component/tooltip

Demonstrates the basic usage of the Wot UI Tooltip component with different placement options. It shows how to set content and control visibility using v-model and the `useQueue` hook for closing the tooltip when clicking outside.

```html
<view @click="closeOutside">
  <wd-tooltip @change="handleChange" placement="top" content="top prompt text">
    <wd-button>top</wd-button>
  </wd-tooltip>
</view>
```

```typescript
import { useQueue } from '@/uni_modules/wot-design-uni'

const { closeOutside } = useQueue()

const show = ref<boolean>(false)
```

--------------------------------

### Wot UI Basic Button Usage

Source: https://wot-ui.cn/en-US/component/button

Demonstrates the basic usage of Wot UI buttons with different predefined types like primary, success, info, warning, and danger. No external dependencies are required beyond the Wot UI library.

```html
<wd-button>Primary Button</wd-button>
<wd-button type="success">Success Button</wd-button>
<wd-button type="info">Info Button</wd-button>
<wd-button type="warning">Warning Button</wd-button>
<wd-button type="error">Danger Button</wd-button>
```

--------------------------------

### Switch Basic Usage (TypeScript)

Source: https://wot-ui.cn/en-US/component/switch

Provides the TypeScript code for initializing the `checked` variable used in the basic Switch usage example. It sets the initial state to true.

```typescript
const checked = ref<boolean>(true)
```

--------------------------------

### Disabled Slider (Vue)

Source: https://wot-ui.cn/en-US/component/slider

Illustrates how to disable the wd-slider component using the 'disabled' prop. When disabled, the slider will not be interactive, preventing any changes to its value. This example is for a Vue.js environment.

```html
<wd-slider v-model="value" disabled />
```

--------------------------------

### Search Component Basic Usage and Events (HTML/TypeScript)

Source: https://wot-ui.cn/en-US/component/search

Demonstrates the basic setup of the wd-search component, including v-model binding and event handlers for focus, blur, search, clear, cancel, and change events. Handles user interactions with the search input.

```html
<wd-search v-model="value" @focus="focus" @blur="blur" @search="search" @clear="clear" @cancel="cancel" @change="change" maxlength="10" />
```

```typescript
const value = ref<string>('')

function focus() {
  console.log('Focus')
}
function blur() {
  console.log('Blur')
}
function search() {
  console.log('Search')
}
function clear() {
  console.log('Reset')
}
function cancel() {
  console.log('Cancel')
}
function change({ value }) {
  console.log('Input', value)
}
```

--------------------------------

### Password Input with Grid Spacing (Vue)

Source: https://wot-ui.cn/en-US/component/password-input

Illustrates customizing the spacing between the input grids in the PasswordInput component using the `gutter` property. This example sets a spacing of 10px.

```html
<!-- Password input box -->
<wd-password-input v-model="value" :gutter="10" :focused="showKeyboard" @focus="showKeyboard = true" />
```

--------------------------------

### TypeScript: Basic Toast Usage with useToast

Source: https://wot-ui.cn/en-US/component/use-toast

Demonstrates the basic usage of the `useToast` hook in TypeScript. It shows how to import the hook, initialize it, and display a simple prompt message.

```typescript
import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()

function showToast() {
  toast.show('Prompt message')
}
```

--------------------------------

### Wot UI Grid Content Slot

Source: https://wot-ui.cn/en-US/component/grid

Example of customizing the content of wd-grid-item using the default slot, allowing for complex HTML structures like images.

```html
<wd-grid>
  <wd-grid-item>
    <image class="img" :src="joy" />
  </wd-grid-item>
  <wd-grid-item>
    <image class="img" :src="joy" />
  </wd-grid-item>
  <wd-grid-item>
    <image class="img" :src="joy" />
  </wd-grid-item>
</wd-grid>
```

--------------------------------

### Maximum Upload Limit (HTML)

Source: https://wot-ui.cn/en-US/component/upload

Illustrates how to limit the number of uploaded files using the 'limit' prop. In this example, the maximum number of files allowed is set to 3.

```html
<wd-upload
  :file-list="fileList"
  :limit="3"
  action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
  @change="handleChange"
></wd-upload>
```

--------------------------------

### Customizing Radio Selected Color with Vue

Source: https://wot-ui.cn/en-US/component/radio

Explains how to change the color of the selected radio button using the `checked-color` prop. This allows for theme customization. The example is in Vue.

```html
<wd-radio-group v-model="value" checked-color="#fa4350">
  <wd-radio value="1">WOT</wd-radio>
  <wd-radio value="2">Merchant Backend</wd-radio>
</wd-radio-group>
```

```typescript
import { ref } from 'vue';

const value = ref<number>(1);

```

--------------------------------

### ChooseFileOption Configuration

Source: https://wot-ui.cn/en-US/component/use-upload

Configuration options for the `chooseFile` method.

```APIDOC
## ChooseFileOption 

### Description
Options for configuring the file selection process.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **multiple** (boolean) - Whether to support multiple file selection. Optional. Defaults to `false`.
- **sizeType** (Array) - Specifies the image size types to allow. Optional. Defaults to `['original', 'compressed']`.
- **sourceType** (Array) - Specifies the source of file selection (e.g., 'album', 'camera'). Optional. Defaults to `['album', 'camera']`.
- **maxCount** (number) - Maximum number of files that can be selected. Optional. Defaults to `9`.
- **accept** ('image' | 'video' | 'media' | 'file' | 'all') - Accepted file types. Optional. Defaults to `'image'`.
- **compressed** (boolean) - Whether to compress video files. Optional. Defaults to `true`.
- **maxDuration** (number) - Maximum duration for video selection in seconds. Optional. Defaults to `60`.
- **camera** ('back' | 'front') - Specifies the camera direction to use. Optional. Defaults to `'back'`.
- **extension** (string[]) - Filters files by extension (platform-dependent). Optional.

### Request Example
```json
{
  "multiple": true,
  "maxCount": 5,
  "accept": "video",
  "sourceType": ["camera"],
  "camera": "front"
}
```

### Response
#### Success Response
- N/A (Configuration object)

#### Response Example
```json
// N/A
```
```

--------------------------------

### Pagination with Text Tips (HTML)

Source: https://wot-ui.cn/en-US/component/pagination

Illustrates how to display text tips, such as current page and total items, by setting the `show-message` attribute along with `total` and `page-size`.

```html
<wd-pagination 
  v-model="value" 
  :total="total" 
  :page-size="page" 
  @change="handleChange" 
  show-icon 
  show-message
/>
```

--------------------------------

### Inline Radio Display with Vue

Source: https://wot-ui.cn/en-US/component/radio

Demonstrates how to display radio buttons horizontally on the same line using the `inline` prop. This is useful for compact layouts. The example uses Vue.

```html
<wd-radio-group v-model="value" inline>
  <wd-radio value="1">Radio 1</wd-radio>
  <wd-radio value="2">Radio 2</wd-radio>
</wd-radio-group>
```

```typescript
import { ref } from 'vue';

const value = ref<number>(1);

```

--------------------------------

### Configure Vite for UniKuRoot and Uni (Vite)

Source: https://wot-ui.cn/en-US/component/config-provider

This JavaScript/TypeScript snippet demonstrates how to configure Vite for a project using Wot UI's global sharing. It shows how to import and use `UniKuRoot()` and `@dcloudio/vite-plugin-uni` in your `vite.config.(js|ts)` file.

```typescript
// vite.config.(js|ts)

import { defineConfig } from 'vite'
import UniKuRoot from '@uni-ku/root'
import Uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [
    // ...plugins
    UniKuRoot(),
    Uni()
  ]
})
```

--------------------------------

### Using Slots for Customization - HTML

Source: https://wot-ui.cn/en-US/component/navbar

Demonstrates how to customize the left and right sides of the navigation bar using slots. This example shows adding a search icon to the right slot.

```html
<wd-navbar title="Title" left-text="Back" left-arrow>
  <template #right>
    <wd-icon name="search" size="18" />
  </template>
</wd-navbar>

```

--------------------------------

### HTML: Basic Progress Bar Usage

Source: https://wot-ui.cn/en-US/component/progress

Demonstrates the fundamental usage of the wd-progress component by setting a percentage value.

```html
<wd-progress :percentage="30" />
```

--------------------------------

### Basic Loading Indicator Usage (HTML)

Source: https://wot-ui.cn/en-US/component/loading

Demonstrates the basic implementation of the Wot UI Loading component. This is suitable for indicating loading states in buttons or for simple page prompts. It requires no additional configuration for its default appearance.

```html
<wd-loading />
```

--------------------------------

### Custom Length Password Input (Vue)

Source: https://wot-ui.cn/en-US/component/password-input

Shows how to set a custom password length for the PasswordInput component using the `length` property. This example configures the input for a 4-digit password.

```html
<!-- Password input box -->
<wd-password-input v-model="value" :length="4" :focused="showKeyboard" @focus="showKeyboard = true" />
<wd-number-keyboard v-model="value" v-model:visible="showKeyboard" :maxlength="4" @blur="showKeyboard = false"></wd-number-keyboard>
```

--------------------------------

### Setting Step Titles and Descriptions with Vue

Source: https://wot-ui.cn/en-US/component/steps

Illustrates how to customize individual steps by providing `title` and `description` props to the `wd-step` component. It also includes a button to advance to the next step, controlled by the `nextStep` function.

```html
<wd-steps :active="active" align-center>
  <wd-step title="Step 1" description="Register an account" />
  <wd-step title="Step 2" description="Login and bind phone number" />
  <wd-step title="Step 3" description="Complete personal information" />
</wd-steps>
<wd-button size="small" @click="nextStep">Next Step</wd-button>
```

```ts
import { ref } from 'vue';

const active = ref<number>(0)

function nextStep() {
  active.value = active.value + 1
}
```

--------------------------------

### Wot UI Cell with Custom Content

Source: https://wot-ui.cn/en-US/component/cell

Provides examples of customizing the content of a wd-cell using default slots, title slots, and icon slots for advanced layouts.

```html
<wd-cell title="Title">
  <view>Custom Content</view>
</wd-cell>
```

```html
<wd-cell value="Content">
  <view slot="title">
    <view>Title</view>
    <view style="margin-top: 5px; font-size: 12px; color: #999;">Subtitle</view>
  </view>
</wd-cell>
```

```html
<wd-cell title="Title" value="Content">
  <view slot="icon" class="custom-icon"></view>
</wd-cell>
```

--------------------------------

### Basic Usage

Source: https://wot-ui.cn/en-US/component/progress

Demonstrates the basic usage of the Progress component by setting the percentage.

```APIDOC
## Basic Usage

Set the percentage using `percentage`.

```html
<wd-progress :percentage="30" />
```
```

--------------------------------

### Basic Fab Usage with Buttons

Source: https://wot-ui.cn/en-US/component/fab

Demonstrates the basic implementation of the Fab component, including setting its type, position, direction, and disabled state. It also shows how to add multiple action buttons with icons and click handlers.

```html
<wd-fab :disabled="disabled" :type="type" :position="position" :direction="direction">
  <wd-button @click="showToast('Triple Like')" :disabled="disabled" custom-class="custom-button" type="primary" round>
    <wd-icon name="github-filled" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('Add to Favorites')" :disabled="disabled" custom-class="custom-button" type="success" round>
    <wd-icon name="star" size="22px"></wd-icon>
  </wd-button>

  <wd-button @click="showToast('Give Coin')" :disabled="disabled" custom-class="custom-button" type="error" round>
    <wd-icon name="money-circle" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('Like')" :disabled="disabled" custom-class="custom-button" type="warning" round>
    <wd-icon name="thumb-up" size="22px"></wd-icon>
  </wd-button>
</wd-fab>
```

--------------------------------

### Radio Props Priority with Vue

Source: https://wot-ui.cn/en-US/component/radio

Illustrates the priority of props when set on both the `wd-radio-group` and individual `wd-radio` components. Props on the individual radio have higher precedence. This example uses Vue.

```html
<wd-radio-group v-model="value" shape="button" disabled checked-color="#f00">
  <wd-radio value="1" :disabled="false" checked-color="#000">Merchant Backend</wd-radio>
  <wd-radio value="2" :disabled="false">WOT</wd-radio>
  <wd-radio value="3">Merchant Intelligence</wd-radio>
</wd-radio-group>
```

```typescript
import { ref } from 'vue';

const value = ref<number>(1);

```

--------------------------------

### Basic Tag Usage - HTML

Source: https://wot-ui.cn/en-US/component/tag

Demonstrates the basic usage of the wd-tag component, showing how to set different tag types like primary, danger, warning, and success.

```html
<wd-tag custom-class="space">Tag</wd-tag>
<wd-tag custom-class="space" type="primary">Tag</wd-tag>
<wd-tag custom-class="space" type="danger">Tag</wd-tag>
<wd-tag custom-class="space" type="warning">Tag</wd-tag>
<wd-tag custom-class="space" type="success">Tag</wd-tag>
```

--------------------------------

### Wot UI Icon: Basic Usage

Source: https://wot-ui.cn/en-US/component/icon

Demonstrates how to display a built-in icon using the 'name' attribute. No external dependencies are required for basic usage.

```html
<wd-icon name="add-circle"></wd-icon>
```

--------------------------------

### useToast API

Source: https://wot-ui.cn/en-US/component/use-toast

Reference for the useToast composable, including its methods and configurable options.

```APIDOC
## useToast API

This composable allows for the convenient display of toast lightweight prompt messages.

### Methods

#### `show(options)`
Shows a general toast message.

#### `success(options)`
Shows a success toast message.

#### `error(options)`
Shows an error toast message.

#### `info(options)`
Shows an informational toast message.

#### `warning(options)`
Shows a warning toast message.

#### `loading(options)`
Shows a loading toast message. This toast requires manual closing.

#### `close()`
Manually closes the currently displayed toast message.

### Options

| Parameter | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| `msg` | The content of the toast message. | `string` | - | `''` |
| `duration` | The duration in milliseconds before the toast automatically closes. Set to `0` for no automatic closing. | `number` | - | `2000` |
| `direction` | The layout direction of the toast content. | `string` | `vertical` / `horizontal` | `horizontal` |
| `iconName` | The name of the icon to display. | `string` | `success` / `error` / `warning` | `''` |
| `iconSize` | The size of the left icon. | `number` | - | - |
| `iconClass` | Custom class name for the icon. | `string` | - | `''` |
| `classPrefix` | The prefix for custom icon class names. | `string` | - | `'wd-icon'` |
| `position` | The position of the toast box on the screen. | `string` | `top` / `middle` / `bottom` | `middle-top` |
| `zIndex` | The z-index of the toast. | `number` | - | `100` |
| `loadingType` | The type of loading indicator. | `string` | `ring` | `outline` |
| `loadingColor` | The color of the loading indicator. | `string` | - | `#4D80F0` |
| `selector` | A unique identifier for the toast instance. | `string` | - | `''` |
| `cover` | Whether to display a transparent mask over the content. | `boolean` | - | `false` |
| `opened` | Callback function executed after the toast is fully displayed. | `Function` | - | - |
| `closed` | Callback function executed after the toast is fully closed. | `Function` | - | -

```

--------------------------------

### Tag Events Handling - HTML and TypeScript

Source: https://wot-ui.cn/en-US/component/tag

Provides examples of handling click and close events for wd-tag components. It includes managing a list of tags with different properties and logging event details.

```html
<wd-tag v-for="(tag, index) in tags" :key="index" round closable @click="handleClick(index)" @close="handleClose(index)">{{tag.value}}</wd-tag>
```

```typescript
const tags = ref([
  {
    plain: true,
    closable: true,
    type: 'primary',
    value: 'Tag 1'
  }
])

function handleClick(index) {
  console.log('click:index' + index)
}
function handleClose(order) {
  tags.value = tags.value.filter((value, index) => index !== order)
  console.log('close:index' + order)
}
```

--------------------------------

### Basic Card Usage in HTML

Source: https://wot-ui.cn/en-US/component/card

Demonstrates the basic usage of the Wot UI Card component by setting a title and providing content through the default slot. It also shows how to include a footer slot with a button.

```html
<wd-card title="Business Analysis">
  Generally, the disciplinary inspection committee or the party committee handling the report will meet with the complainant to discuss the handling opinions or review conclusions. A copy of the review conclusions and decisions should be given to the complainant.
  <template #footer>
    <wd-button size="small" plain>View Details</wd-button>
  </template>
</wd-card>
```

--------------------------------

### Setting Radio Button Size with Vue

Source: https://wot-ui.cn/en-US/component/radio

Demonstrates how to adjust the size of the radio buttons using the `size` prop. Currently, only 'large' is available as a specific size option. This example is for Vue.

```html
<wd-radio-group v-model="value" size="large">
  <wd-radio value="1">WOT</wd-radio>
  <wd-radio value="2">Merchant Backend</wd-radio>
</wd-radio-group>
```

```typescript
import { ref } from 'vue';

const value = ref<number>(1);

```

--------------------------------

### Basic Upload Usage with File List and Change Event (TypeScript)

Source: https://wot-ui.cn/en-US/component/upload

Provides the corresponding TypeScript code for the basic upload usage. It initializes a reactive 'fileList' ref with an example image URL and defines the 'action' URL for uploads. The 'handleChange' function updates the 'fileList' with the files received from the upload event.

```typescript
const fileList = ref<any[]>([
  {
    url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
  }
])

const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'

function handleChange({ fileList: files }) {
  fileList.value = files
}
```

--------------------------------

### InputNumber - Asynchronous Change

Source: https://wot-ui.cn/en-US/component/input-number

Demonstrates how to use the `before-change` attribute to validate and intercept input value changes asynchronously. The example shows a loading indicator that resolves after a delay, allowing or preventing the change.

```APIDOC
## Asynchronous Change 

Through `before-change`, you can validate and intercept before the input value changes.

### Request Example
```html
<wd-input-number v-model="value" :before-change="beforeChange" />
```

### Request Example
```typescript
import { ref } from 'vue'
import { useToast } from '@/uni_modules/wot-design-uni'
import type { InputNumberBeforeChange } from '@/uni_modules/wot-design-uni/components/wd-input-number/types'
const { loading, close } = useToast()

const value = ref<number>(1)
 
const beforeChange: InputNumberBeforeChange = (value) => {
  loading({ msg: `Updating to ${value}...` })
  return new Promise((resolve) => {
    setTimeout(() => {
      close()
      resolve(true)
    }, 500)
  })
}
```
```
Tokens:
Raw