LimeUI

https://limeui.familyzone.top/components/
Admin
LimeUI is a lightweight, efficient, and flexible cross-platform UI component library built on...
Tokens:277,117
Snippets:2,121
Trust Score:0.7
Update:10 months ago
Show doc for...
Tokens:
Raw
### Basic LimeCascader Usage (Vue 3 Setup)

Source: https://limeui.familyzone.top/components/cascader

Demonstrates the basic implementation of the LimeCascader component using Vue 3 setup syntax. It shows how to control the visibility of the cascader, bind selected values, provide options, set a title, and handle the change event. The example includes a simple options list for geographical locations.

```html
<view class="cell" @click="visible = true">
  <text>地址</text>
  <text v-show="fieldValue == null" style="color: #999;">请选择地址 ></text>
  <text v-show="fieldValue != null">{{fieldValue}}</text>
</view>
<l-cascader 
  v-model:visible="visible" 
  v-model="cascaderValue" 
  :options="options"
  title="请选择所在地区"
  @change="onChange"/>
```

```javascript
const visible = ref(false)
// 设置默认值，如 110000
const cascaderValue = ref('');
const fieldValue = ref<string|null>(null);
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    label: '北京市',
    value: '110000',
    children: [
      {
        value: '110100',
        label: '北京市',
        children: [
          { value: '110101', label: '东城区' },
          { value: '110102', label: '西城区' },
          { value: '110105', label: '朝阳区' },
          // 更多区域...
        ],
      },
    ],
  },
  {
    label: '天津市',
    value: '120000',
    children: [
      {
        value: '120100',
        label: '天津市',
        children: [
          { value: '120101', label: '和平区' },
          { value: '120102', label: '河东区' },
          // 更多区域...
        ],
      },
    ],
  },
];
// 全部选项选择后，会触发 change 事件
const onChange = (value: string, options: UTSJSONObject[]) => {
  fieldValue.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};
```

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

### Installation Instructions

Source: https://limeui.familyzone.top/components/echart

Platform-specific instructions for installing and integrating the ECharts library with uni-app and uni-app-x.

```APIDOC
## Other Platform Dependency Instructions 🌐

### uni-app Non-nvue Environment

- **Recommended to install via `npm`**
  - Installing via npm provides full ES module format support.
```bash
npm install echarts --save
```

- After installation, you can import it directly in your code:
```javascript
import * as echarts from 'echarts'
```

### uni-app-x Non-App Environment

- **Recommended to install via npm** to get the ES module format.
```bash
npm install echarts --save
```

- The ES module format offers better performance and build optimization.
- Import and use via `import`:
```javascript
import * as echarts from 'echarts'
```

> 💡 Note: For H5 and App native environments, you usually don't need to manually import ECharts; the component handles it automatically. Manual import is only necessary if you need to customize the ECharts version or configuration.
```

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

### Complete Footer Example

Source: https://limeui.familyzone.top/components/footer

A comprehensive example combining a logo, navigation links, and copyright information.

```APIDOC
## Complete Footer Example

This example combines a logo, navigation links, and copyright information for a full-featured footer.

```html
<l-footer 
  :logo="{
    icon: '/static/logo.png',
    title: 'Brand Name',
    url: '/pages/index'
  }" 
  :links="[
    {name: 'User Agreement', url: '/pages/agreement'},
    {name: 'Privacy Policy', url: '/pages/privacy'},
    {name: 'Contact Us', url: '/pages/contact'}
  ]" 
  text="Copyright © 2024-2025 LimeUI. All Rights Reserved."
/>
```
```

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

### LimeProgress Component Usage Examples

Source: https://limeui.familyzone.top/components/progress

Examples demonstrating how to use the LimeProgress component with different configurations.

```APIDOC
### Basic Usage

```html
<l-progress :percent="percent"></l-progress>
```

### Displaying Percentage

```html
<l-progress :percent="percent" :show-info="true"></l-progress>
```

### Changing Percentage Text Position

```html
<l-progress :percent="percent" info-type="inner" info-align="start" :show-info="true" info-color="white"></l-progress>
<l-progress :percent="percent" info-align="start" :show-info="true"></l-progress>
<l-progress :percent="percent" info-align="end" :show-info="true"></l-progress>
```

### Customizing Colors

```html
<l-progress :percent="percent" strokeColor="#7232dd"></l-progress>
<l-progress :percent="percent" strokeColor="#7232dd" info-type="inner" info-align="end" :show-info="true" info-color="white" ></l-progress>
```
```

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

### LimeFooter Installation and Usage (HTML)

Source: https://limeui.familyzone.top/components/footer

Shows how to use the LimeFooter component for quick preview after installation. This involves importing the component and using the provided tag in the HTML.

```html
<!-- 代码位于 uni_modules/lime-footer/components/lime-footer -->
<lime-footer />
```

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

### Component Usage Examples

Source: https://limeui.familyzone.top/components/text-ellipsis

Examples demonstrating various ways to use the LimeTextEllipsis component, including basic usage, multi-line truncation, custom ellipsis, and expand/collapse functionality.

```APIDOC
## Component Usage Examples

### Basic Usage

```html
<l-text-ellipsis content="This is a very long piece of text that will be automatically truncated when it exceeds one line."></l-text-ellipsis>
```

### Multi-line Truncation

```html
<l-text-ellipsis 
  :rows="2" 
  content="This is a very long piece of text that will be automatically truncated when it exceeds two lines. This is a very long piece of text that will be automatically truncated when it exceeds two lines."
></l-text-ellipsis>
```

### Custom Ellipsis Symbol

```html
<l-text-ellipsis 
  content="This is a very long piece of text that will be automatically truncated when it exceeds one line." 
  dots="---"
></l-text-ellipsis>
```

### Expand/Collapse Functionality

```html
<l-text-ellipsis 
  :rows="2" 
  expand-text="Show More" 
  collapse-text="Show Less" 
  content="This is a very long piece of text that will be automatically truncated when it exceeds two lines. This is a very long piece of text that will be automatically truncated when it exceeds two lines. This is a very long piece of text that will be automatically truncated when it exceeds two lines."
></l-text-ellipsis>
```

### Custom Action Button Position

```html
<l-text-ellipsis 
  :rows="2" 
  expand-text="Show More" 
  collapse-text="Show Less" 
  position="right" 
  content="This is a very long piece of text that will be automatically truncated when it exceeds two lines. This is a very long piece of text that will be automatically truncated when it exceeds two lines."
></l-text-ellipsis>
```

### Custom Action Button Color

```html
<l-text-ellipsis 
  :rows="2" 
  expand-text="Show More" 
  collapse-text="Show Less" 
  action-color="#ff5500" 
  content="This is a very long piece of text that will be automatically truncated when it exceeds two lines. This is a very long piece of text that will be automatically truncated when it exceeds two lines."
></l-text-ellipsis>
```
```

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

### LimeFooter Full Configuration (HTML)

Source: https://limeui.familyzone.top/components/footer

Presents a comprehensive example of the LimeFooter component, combining a brand logo, navigation links, and copyright information for a complete footer setup.

```html
<l-footer 
  :logo="{
    icon: '/static/logo.png',
    title: '品牌名称',
    url: '/pages/index'
  }" 
  :links="[
    {name: '用户协议', url: '/pages/agreement'},
    {name: '隐私政策', url: '/pages/privacy'},
    {name: '联系我们', url: '/pages/contact'}
  ]" 
  text="Copyright © 2024-2025 LimeUI. All Rights Reserved." 
/>
```

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

### Install LimeEchart via CLI

Source: https://limeui.familyzone.top/components/echart

Instructions for installing the lime-echart plugin into a CLI project by downloading and extracting it to the src/uni_modules directory.

```bash
# Download the plugin to the src/uni_modules directory
mkdir -p src/uni_modules
# Extract the plugin to the above directory
```

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

### LimeRate Component Usage Examples

Source: https://limeui.familyzone.top/components/rate

Examples demonstrating various ways to use the LimeRate component, including basic usage, custom icons, styling, and event handling.

```APIDOC
## Basic Usage

Use `v-model` to bind the current rating value.

```html
<l-rate v-model="value" />
```

```javascript
import { ref } from 'vue';
const value = ref(2);
```

## Custom Icons

Use the `icon` prop for selected icons and `void-icon` for unselected icons.

```html
<l-rate v-model="value" icon="heart-filled" void-icon="heart" />
```

## Custom Styles

Customize icon size and colors using `size`, `color`, and `void-color` props.

```html
<l-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-color="#eee"
/>
```

## Custom Count

Set the `count` prop to change the total number of rating icons.

```html
<l-rate v-model="value" :count="6" />
```

## Step Increment

Use the `step` prop to define the increment value (between 0 and 1).

```html
<l-rate v-model="value" :step="0.1" />
```

## Clearable

Set `clearable` to `true` to allow resetting the rating to 0 by clicking again.

```html
<l-rate v-model="value" :clearable="true" />
```

## Disabled State

Use the `disabled` prop to make the rating component non-interactive.

```html
<l-rate v-model="value" :disabled="true" />
```

## Listening to Change Event

Use the `@change` event to get the current rating value when it changes.

```html
<l-rate v-model="value" @change="onChange" />
```

```javascript
const onChange = (currentValue) => {
  console.log('Current value: ' + currentValue);
};
```
```

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

### LimeCascader with Initial Value (Vue 3 Setup)

Source: https://limeui.familyzone.top/components/cascader

Illustrates how to initialize the LimeCascader component with a default value using Vue 3 setup syntax. The `v-model` directive is used to set the initial selection. The example demonstrates binding the selected value to a ref and updating a display text based on the selection.

```html
<view class="cell" @click="visible2 = true">
  <text>地址</text>
  <text v-show="fieldValue2 == null" style="color: #999;">请选择地址 ></text>
  <text v-show="fieldValue2 != null">{{fieldValue2}}</text>
</view>
<l-cascader 
  v-model:visible="visible2" 
  v-model="cascaderValue2" 
  :options="options2"
  title="请选择所在地区"
  @change="onChange2"/>
```

```javascript
const visible2 = ref(false)
// 设置默认值
const cascaderValue2 = ref('120119');
const fieldValue2 = ref<string|null>(null);
const options2 = areaList;
const onChange2 = (value: string, options: UTSJSONObject[]) => {
  fieldValue2.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};
```

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

### Private Iconify Installation

Source: https://limeui.familyzone.top/components/icon

Instructions for installing the necessary packages to privatize Iconify. This involves using yarn or npm to add `@iconify/json`, `@iconify/tools`, and `@iconify/utils`.

```bash
yarn add @iconify/json @iconify/tools @iconify/utils
```

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

### LimeBadge Custom Position Examples

Source: https://limeui.familyzone.top/components/badge

Provides examples of positioning the LimeBadge in different locations relative to its child element: top-left, top-right, bottom-left, and bottom-right. Dependencies: `lime-shared`, `lime-style`.

```html
<l-badge content="5" position="top-left">
  <view class="box"></view>
</l-badge>

<l-badge content="5" position="top-right">
  <view class="box"></view>
</l-badge>

<l-badge content="5" position="bottom-left">
  <view class="box"></view>
</l-badge>

<l-badge content="5" position="bottom-right">
  <view class="box"></view>
</l-badge>
```

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

### Vue 2 Setup for Composition API

Source: https://limeui.familyzone.top/components/transition

Instructions for integrating the LimeTransition component, which uses the Composition API, into a Vue 2 project. This involves installing and using the `@vue/composition-api` plugin in the main application file.

```javascript
// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```

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

### LimeTyping in a Chat Interface Example

Source: https://limeui.familyzone.top/components/typing

Provides an example of integrating the LimeTyping component within a chat interface to visually represent the 'other party is typing' status. This enhances the user's perception of real-time interaction.

```html
<view class="chat-container">
  <view class="message-item message-received">
    <text>你好，有什么可以帮助你的？</text>
  </view>
  <view class="message-item message-received">
    <l-typing></l-typing>
  </view>
  <view class="message-item message-sent">
    <text>我想咨询一下产品的使用方法</text>
  </view>
</view>
```

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

### Bar Chart Configuration Example

Source: https://limeui.familyzone.top/components/echart

Provides a comprehensive configuration object for creating a bar chart using ECharts. This example includes settings for tooltips, legends, axes, and series data, serving as a reusable template for bar chart implementations.

```javascript
// Chart configuration example - Bar chart
const chartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    confine: true
  },
  legend: {
    data: ['热度', '正面', '负面']
  },
  xAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#999999'
        }
      },
      axisLabel: {
        color: '#666666'
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
      axisLine: {
        lineStyle: {
          color: '#999999'
        }
      },
      axisLabel: {
        color: '#666666'
      }
    }
  ],
  series: [
    {
      name: '热度',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      data: [300, 270, 340, 344, 300, 320, 310]
    },
    {
      name: '正面',
      type: 'bar',
      stack: '总量',
      label: {
        show: true
      },
      data: [120, 102, 141, 174, 190, 250, 220]
    },
    {
      name: '负面',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        position: 'left'
      },
      data: [-20, -32, -21, -34, -90, -130, -110]
    }
  ]
}
```

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

### Private Iconify Configuration

Source: https://limeui.familyzone.top/components/icon

Configuration example for `lime-icons.config.js`. This file defines input sources for custom SVGs, output directories for generated icons, and a list of specific icons to include.

```javascript
// 在根目录新建一个lime-icons.config.js文件
// lime-icons.config.js
module.exports = {
	// 输入的文件目录，自有的SVG，如果没有则不需要
	input: {
		prefix: "my-icons",
		dir: '/static/svg',
	},
	// 输出的配置
	output: {
		// 输出的文件目录
		dir: '/static/icons',
		// 输出的文件的格式，如果是JSON则是一个图标合集
		// file: 'icons.json',
		// 如果是SVG则是每个图标做为单独的文件
		file: '*.svg',
	},
	// 指定使用的图标
	icons: [
		'el:address-book',
		'uil:12-plus',
		'icon-park-outline:abdominal',
		'icon-park-outline:acoustic'
	]
}
```

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

### Quick Preview

Source: https://limeui.familyzone.top/components/tabbar

Instructions on how to quickly preview the LimeTabbar component after importing the plugin.

```APIDOC
## Quick Preview

After importing the plugin, you can directly use the following tag to view the demo effect:

### HTML
```html
<!-- Code located at uni_modules/lime-tabbar/components/lime-tabbar -->
<lime-tabbar />
```
```

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

### Quick Preview of LimePullRefresh Component

Source: https://limeui.familyzone.top/components/pull-refresh

Provides a simple example of how to use the `lime-pull-refresh` component directly for quick testing or demonstration purposes after installation.

```html
<!-- Code located in uni_modules/lime-pull-refresh/components/lime-pull-refresh -->
<lime-pull-refresh />
```

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

### Vue 2 Usage with Composition API

Source: https://limeui.familyzone.top/components/icon

Instructions and code examples for using the LimeIcon component in a Vue 2 project. This requires installing and enabling the `@vue/composition-api` plugin and then configuring `Vue.use(limeIcons)` with appropriate arguments.

```javascript
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

// 配置svg指定路径，后期可上传到后端，不占用本地空间，如果使用的是`iconify`也可以不配置这一步
import {limeIcons} from '@/uni_modules/lime-icon'

Vue.use(VueCompositionAPI)

// 示例1 配置icons地址
Vue.use(limeIcons, ['https://xxx.cn/static/icons', null])

// 示例2 配置icons集合json
import icons from './static/icons/icons.json'
Vue.use(limeIcons, [null, icons])
```

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

### Vue Poster Component Example with Data

Source: https://limeui.familyzone.top/components/poster

This snippet shows a Vue.js template and script setup for the L-Poster component. It defines the posterData object, which structures the content, styles, and layout of the poster. The posterData includes nested elements for images, text, and views, with specific styling applied to each. It also includes a callback function 'onSuccess' to handle the poster generation result.

```html
<template>
  <l-poster :board="posterData" />
</template>

<script setup>
const posterData = {
  style: {
    background: `linear-gradient(180deg,#ff971b 0%, #ff5000 100%)`,
    width: '750rpx',
    paddingBottom: "40rpx",
  },
  children: [
    {
      src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
      type: "image",
      style: {
        background: "#fff",
        objectFit: "cover",
        marginLeft: "40rpx",
        marginTop: "40rpx",
        width: "84rpx",
        border: "2rpx solid #fff",
        boxSizing: "border-box",
        height: "84rpx",
        borderRadius: "50%"
      }
    },
    {
      type: "view",
      style: {
        marginTop: "40rpx",
        paddingLeft: "20rpx",
        display: "inline-block"
      },
      children: [
        {
          text: "隔壁老王",
          type: "text",
          style: {
            display: "block",
            paddingBottom: "10rpx",
            color: "#fff",
            fontSize: "32rpx",
            fontWeight: "bold"
          }
        },
        {
          text: "为您挑选了一个好物",
          type: "text",
          style: {
            color: "rgba(255,255,255,.7)",
            fontSize: "24rpx"
          },
        },
      ],
    },
    {
      type: 'view',
      style: {
        marginLeft: "40rpx",
        marginTop: "30rpx",
        padding: "32rpx",
        boxSizing: "border-box",
        background: "#fff",
        borderRadius: "16rpx",
        width: "670rpx",
        boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
      },
      children: [
        {
          src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
          type: "image",
          style: {
            objectFit: "cover",
            objectPosition: "50% 50%",
            width: "606rpx",
            height: "606rpx"
          },
        },
        {
          type: 'view',
          style: {
            marginTop: "32rpx",
            color: "#FF0000",
            fontWeight: "bold",
            fontSize: "28rpx",
          },
          children: [
            {
              type: 'text',
              text: "￥",
              style: {
                verticalAlign: "bottom"
              }
            },
            {
              text: "39",
              type: "text",
              style: {
                verticalAlign: "bottom",
                fontSize: "58rpx",
                lineHeight: "58rpx",
                // #ifdef APP
                marginBottom: '-4px'
                // #endif
              }
            },
            {
              text: ".39",
              type: "text",
              style: {
                verticalAlign: "bottom"
              }
            },
            {
              text: "￥59.99",
              type: "text",
              style: {
                verticalAlign: "bottom",
                paddingLeft: "10rpx",
                fontWeight: "normal",
                textDecoration: "line-through",
                color: "#999999"
              }
            }
          ],
        },
        {
          type: 'view',
          style: {
            marginTop: "32rpx",
            fontSize: "26rpx",
            color: "#8c5400"
          },
          children: [
            {
              text: "自营",
              type: "text",
              style: {
                color: "#212121",
                background: "#ffb400"
              }
            },
            {
              text: "30天最低价",
              type: "text",
              style: {
                marginLeft: "16rpx",
                background: "#fff4d9",
                textDecoration: "line-through"
              }
            },
            {
              text: "满减优惠",
              type: "text",
              style: {
                marginLeft: "16rpx",
                background: "#fff4d9"
              }
            },
          ]
        },
        {
          type: 'view',
          style: {
            marginTop: "30rpx"
          },
          children: [
            {
              text: "360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝",
              type: "text",
              style: {
                paddingRight: "32rpx",
                boxSizing: "border-box",
                lineClamp: 2,
                color: "#333333",
                lineHeight: "1.8em",
                fontSize: "36rpx",
                width: "468rpx",
              }
            },
            {
              text: "limex.qcoon.cn",
              type: "qrcode",
              style: {
                width: "128rpx",
                height: "128rpx"
              }
            }
          ]
        }
      ]
    }
  ]
}

const onSuccess = (res) => {
  console.log('海报生成成功:', res.tempFilePath)
}
</script>
```

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

### Quick Preview

Source: https://limeui.familyzone.top/components/checkbox

After importing the plugin, you can directly use the following tag to preview the demonstration effect.

```APIDOC
## Quick Preview

Import the plugin and use the following tag for a preview:

```html
<!-- Code is located at uni_modules/lime-checkbox/components/lime-checkbox -->
<lime-checkbox />
```
```

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

### Basic LimeTyping Usage

Source: https://limeui.familyzone.top/components/typing

Demonstrates the most basic implementation of the LimeTyping component using its default configuration. No additional properties are required for this simple use case.

```html
<l-typing></l-typing>
```

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

### Basic LimeLoading Usage

Source: https://limeui.familyzone.top/components/loading

Demonstrates the most straightforward way to use the l-loading component without any custom configurations.

```html
<l-loading></l-loading>
```

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

### Basic Usage

Source: https://limeui.familyzone.top/components/floating-panel

Demonstrates the basic usage of the LimeFloatingPanel component with default settings.

```APIDOC
## Basic Usage

The FloatingPanel has a default height of `100px`. Users can drag it to expand, reaching `60%` of the screen height.

### Code Example

```html
<l-floating-panel>
  <view>Content</view>
</l-floating-panel>
```

```

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

### Basic Dropdown Menu Usage (HTML)

Source: https://limeui.familyzone.top/components/dropdown-menu

Demonstrates the fundamental usage of the dropdown menu with options and default values. It requires `l-dropdown-menu` and `l-dropdown-item` components.

```html
<l-dropdown-menu>
  <l-dropdown-item v-model="value1" :options="option1"></l-dropdown-item>
  <l-dropdown-item v-model="value2" :options="option2"></l-dropdown-item>
</l-dropdown-menu>
```

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

### Install Dependencies for WeChat Mini Program and Web

Source: https://limeui.familyzone.top/components/lottie

Installs the necessary Lottie libraries for WeChat Mini Programs and web development. 'lottie-miniprogram' is for WeChat, and 'lottie-web' is for web.

```bash
npm install lottie-miniprogram --save
npm install lottie-web --save
```

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

### Install ECharts using npm

Source: https://limeui.familyzone.top/components/echart

This command installs the ECharts library as a dependency for your project. It is recommended for uni-app and uni-app-x non-App environments to ensure proper ES module format support.

```bash
npm install echarts --save
```

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

### JavaScript: Vue 2 Composition API Setup

Source: https://limeui.familyzone.top/components/cell

Shows the necessary configuration in main.js for using the Composition API in a Vue 2 project. This involves importing and using '@vue/composition-api', which is required for plugins that rely on Composition API features in Vue 2 environments.

```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```

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

### Vue 2 Usage Instructions

Source: https://limeui.familyzone.top/components/color-picker

Instructions for using the component in a Vue 2 project with Vue Composition API.

```APIDOC
## Vue 2 Usage Instructions

Add the following code to your `main.js` in a Vue 2 project:

```javascript
// Usage in Vue 2 project
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';

Vue.use(VueCompositionAPI);
```

For detailed configuration, please refer to the official documentation: Vue Composition API.
```

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

### Quick Preview of LimeFloatingPanel Component

Source: https://limeui.familyzone.top/components/floating-panel

Provides a quick way to preview the LimeFloatingPanel component by using its dedicated tag after plugin installation. This tag, `lime-floating-panel`, is specifically for demonstration purposes within the uni_modules directory.

```html
<!-- 代码位于 uni_modules/lime-floating-panel/components/lime-floating-panel -->
<lime-floating-panel />
```

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

### Nested Structure Example for Poster (JavaScript)

Source: https://limeui.familyzone.top/components/poster

A comprehensive example demonstrating how to create a nested structure for a poster using 'view', 'text', and 'image' elements. This illustrates hierarchical arrangement and styling of poster components.

```javascript
{
  type: "view",  // 父容器
  style: { padding: "20rpx", background: "#ffffff" },
  children: [
    {
      type: "text",  // 子元素1
      text: "标题文本",
      style: { fontSize: "32rpx", fontWeight: "bold" }
    },
    {
      type: "view",  // 子元素2(嵌套容器)
      style: { marginTop: "10rpx" },
      children: [
        {
          type: "image",  // 嵌套容器的子元素
          src: "https://example.com/image.jpg",
          style: { width: "100rpx", height: "100rpx" }
        }
      ]
    }
  ]
}
```

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

### Quick Preview Tag (HTML)

Source: https://limeui.familyzone.top/components/dropdown-menu

Shows the tag used for a quick preview of the dropdown menu component within the project structure. This is a demonstration tag, distinct from the component's usable tag.

```html
<!-- 代码位于 uni_modules/lime-dropdown-menu/components/lime-dropdown-menu -->
<lime-dropdown-menu />
```

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

### LimeCascader with Custom Field Names (Vue 3 Setup)

Source: https://limeui.familyzone.top/components/cascader

Shows how to customize the field names used within the options data for the LimeCascader component using Vue 3 setup syntax. The `keys` prop allows mapping custom property names (like 'name', 'code', 'items') to the component's expected 'label', 'value', and 'children' fields.

```html
<view class="cell" @click="visible3 = true">
  <text>地址</text>
  <text v-show="fieldValue3 == null" style="color: #999;">请选择地址 ></text>
  <text v-show="fieldValue3 != null">{{fieldValue3}}</text>
</view>
<l-cascader 
  v-model:visible="visible3" 
  v-model="cascaderValue3" 
  :options="options3" 
  :keys="keys"
  title="请选择所在地区"
  @change="onChange3"/>
```

```javascript
const visible3 = ref(false)
const cascaderValue3 = ref('');
const fieldValue3 = ref<string|null>(null);
const options3 = [
  {
    name: '北京市',
    code: '110000',
    items: [
      {
        code: '110100',
        name: '北京市',
        items: [
          { code: '110101', name: '东城区' },
          { code: '110102', name: '西城区' },
          // 更多区域...
        ],
      },
    ],
  },
  // 更多省份...
];

const keys = {label: 'name', value: 'code', children: 'items'}
const onChange3 = (value: string, options: UTSJSONObject[]) => {
  fieldValue3.value = options.map((item: UTSJSONObject):any|null => (item['name'])).join('/');
};
```

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

### Quick Preview Component

Source: https://limeui.familyzone.top/components/keyboard

Shows how to quickly preview the LimeKeyboard component by directly using the `<lime-keyboard />` tag after importing the plugin. The component's source is located in `uni_modules/lime-keyboard/components/lime-keyboard`.

```html
<!-- 代码位于 uni_modules/lime-keyboard/components/lime-keyboard -->
<lime-keyboard />
```

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

### Vue 2 Usage Instructions

Source: https://limeui.familyzone.top/components/notice-bar

Instructions for integrating the component into a Vue 2 project using the Composition API.

```APIDOC
## Vue 2 Usage Instructions

### Description

To use this component in a Vue 2 project, you need to install the Vue Composition API plugin. Add the following code to your `main.js` file.

### Method

```javascript
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```

For more detailed configuration, please refer to the official documentation on Vue Composition API.
```

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

### LimeLayout Alignment Options (HTML)

Source: https://limeui.familyzone.top/components/layout

Shows how to control horizontal (`justify`) and vertical (`align`) alignment of columns within a row. Supported values include 'start', 'center', 'end', 'around', 'between', and 'evenly' for justify, and 'start', 'center', 'end', 'stretch' for align.

```html
<!-- 水平对齐 -->
<l-row :gap="[0,10]" justify="start">
	<l-col span="6"><text>span: 6</text></l-col>
	<l-col span="6"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" justify="center">
	<l-col span="6"><text>span: 6</text></l-col>
	<l-col span="6"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" justify="end">
	<l-col span="6"><text>span: 6</text></l-col>
	<l-col span="6"><text>span: 6</text></l-col>
</l-row>
<!-- 垂直对齐 -->
<l-row :gap="[0,10]" align="start">
	<l-col span="12"><text>span: 6</text></l-col>
	<l-col span="12"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" align="center">
	<l-col span="12"><text>span: 6</text></l-col>
	<l-col span="12"><text>span: 6</text></l-col>
</l-row>
<l-row :gap="[0,10]" align="end">
	<l-col span="12"><text>span: 6</text></l-col>
	<l-col span="12"><text>span: 6</text></l-col>
</l-row>
```

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

### LimeButton Icon Button Example

Source: https://limeui.familyzone.top/components/button

Illustrates how to use icons within buttons via the 'icon' property, which can be combined with text or used alone for icon-only buttons. This enhances usability and visual appeal. The 'shape="circle"' example shows an icon-only button.

```html
<l-button icon="home" type="primary">首页</l-button>
<l-button icon="plus" shape="circle" type="primary"></l-button>
```

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

### LimeBarcode: Basic Usage

Source: https://limeui.familyzone.top/components/barcode

Demonstrates the most basic usage of the l-barcode component by simply providing the text to be encoded. No other configurations are needed for this initial setup.

```html
<l-barcode text="1234567890"></l-barcode>
```

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

### Basic LimeBadge Usage

Source: https://limeui.familyzone.top/components/badge

Demonstrates the simplest way to use the LimeBadge component by providing content. It requires the `lime-shared` and `lime-style` plugins.

```html
<l-badge content="5">
  <view class="box"></view>
</l-badge>
```

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

### Different Theme Types

Source: https://limeui.familyzone.top/components/notice-bar

Demonstrates the use of different built-in theme types: info, success, warning, and danger.

```APIDOC
## Different Theme Types

### Description

The notification bar supports various built-in theme types that can be applied using the `type` prop. These include 'info' (default), 'success', 'warning', and 'danger'.

### Method

```html
<l-notice-bar type="info" text="这是一条普通通知"></l-notice-bar>
<l-notice-bar type="success" text="这是一条成功通知"></l-notice-bar>
<l-notice-bar type="warning" text="这是一条警示通知"></l-notice-bar>
<l-notice-bar type="danger" text="这是一条错误通知"></l-notice-bar>
```
```

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

### LimeDivider Component Usage in Uni-app

Source: https://limeui.familyzone.top/components/divider

Demonstrates how to use the LimeDivider component within a uni-app project after installation. This is the tag used for previewing the component.

```html
<!-- 代码位于 uni_modules/lime-divider/components/lime-divider -->
<lime-divider />
```

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

### LimeTabbar Demo Usage (Vue)

Source: https://limeui.familyzone.top/components/tabbar

Shows how to quickly use the LimeTabbar component for a demonstration after installing the plugin. The component can be directly used with the `<lime-tabbar />` tag.

```html
<!-- 代码位于 uni_modules/lime-tabbar/components/lime-tabbar -->
<lime-tabbar />
```

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

### LimeDateTimePicker Item Filtering (JavaScript)

Source: https://limeui.familyzone.top/components/date-time-picker

Provides an example JavaScript function for the 'customFilter' prop in LimeDateTimePicker. This function filters the 'month' options to only include those divisible by 6.

```javascript
import type { DateTimePickerColumn, TimeModeValues } from '@/uni_modules/lime-date-time-picker'
const filter = (type: TimeModeValues, columns: DateTimePickerColumn): DateTimePickerColumn => {
	if (type == 'month') {
	    return columns.filter((option) => parseInt(option.value) % 6 == 0);
	}
	return columns
}
```

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

### Basic LimeUpload Usage (Vue)

Source: https://limeui.familyzone.top/components/upload

Demonstrates the basic integration of the LimeUpload component. The `@add` event is triggered when files are selected, providing a `LimeUploadFile` object. This is the fundamental setup for file selection.

```html
<l-upload @add="handleAdd"/>
```

```javascript
import type { LimeUploadFile} from '@/uni_modules/lime-upload';

const handleAdd = (files: LimeUploadFile[]) => {
    console.log('选择的文件:', files)
}
```

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

### HTML: Chinese Capital Amount Display with LimeAmount

Source: https://limeui.familyzone.top/components/amount

A specific example of using the `capital` attribute to display amounts in Chinese capital format with the LimeAmount component.

```html
<l-amount :value="123456.123" :capital="true"/>
```

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

### Basic Usage

Source: https://limeui.familyzone.top/components/color-picker

Demonstrates the basic usage of the LimeColorPicker component with `v-model`.

```APIDOC
## Basic Usage

Color picker supports multiple color encoding formats, including `HEX`, `HSB`, and `RGB`.

### HTML
```html
<l-color-picker v-model="color"></l-color-picker>
```

### JavaScript
```javascript
import { ref } from 'vue';

const color = ref('#FA8C16');
```
```

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

### Vue 2 Usage Instructions

Source: https://limeui.familyzone.top/components/checkbox

Instructions for using the plugin with Vue 2.

```APIDOC
## Vue 2 Usage Instructions

The plugin uses `composition-api`. If you want to use it in Vue 2, please follow the official tutorial for `vue-composition-api` configuration.

Key code to add in `main.js` for Vue 2:

```javascript
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
```

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

### Basic Navbar Usage (HTML)

Source: https://limeui.familyzone.top/components/navbar

Demonstrates the simplest usage of the LimeNavbar component by setting only the title. It's a basic setup for a navigation bar.

```html
<l-navbar title="标题文字" :fixed="false"></l-navbar>
```

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

### Progress Bar with Info Position and Alignment (Vue)

Source: https://limeui.familyzone.top/components/progress

Customize the position and alignment of the progress percentage display. 'info-type' can be 'inner' or 'outer', and 'info-align' can be 'end' or 'start'.

```html
<l-progress :percent="percent" info-type="inner" info-align="start" :show-info="true" info-color="white"></l-progress>
<l-progress :percent="percent" info-align="start" :show-info="true"></l-progress>
<l-progress :percent="percent" info-align="end" :show-info="true"></l-progress>
```

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

### Basic Dropdown Menu Configuration (JavaScript)

Source: https://limeui.familyzone.top/components/dropdown-menu

Provides the JavaScript configuration for the basic dropdown menu, defining the reactive state for selected values and the options for each dropdown item. Uses Vue's `ref` for reactive variables.

```javascript
const value1 = ref(0);
const value2 = ref('a');
const option1 = [
  { label: '全部商品', value: 0 },
  { label: '新款商品', value: 1, disabled: true },
  { label: '活动商品', value: 2 },
];
const option2 = [
  { label: '默认排序', value: 'a' },
  { label: '好评排序', value: 'b' },
  { label: '销量排序', value: 'c' },
];
```
Tokens:
Raw