### Basic Usage of Empty Component - React

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Empty 空状态.md

Shows the basic usage of the Empty component in React, illustrating configurations for title, content, and a button with an click handler. It includes examples with and without an image.

```tsx
import React from 'react'
import { Empty } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {

  return (
    <>
      <DemoBlock title='图片 + 主标题' padding='0'>
        <Empty
          title='空模块的主标题'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 主标题 + 描述' padding='0'>
        <Empty
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 主标题 + 描述 + 按钮' padding='0'>
        <Empty
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
          buttonText='我是按钮'
          onButtonClick={() => alert('OK')}
        />
      </DemoBlock>

      <DemoBlock title='主标题 + 描述' padding='0'>
        <Empty
          image='none'
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 描述' padding='0'>
        <Empty
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>
    </>

  )
}
```

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

### Basic Icon Usage

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Icons 图标.md

Shows how to render various icons with different sizes (16px and 24px) using React components from '@kfe/mix-ui'. It includes examples for different icon types like arrows, Alipay, currency, and badges.

```tsx
import React from 'react'
import {
  ArrowClockwise24,
  ArrowClockwise16,
  ArrowDown24,
  ArrowDown16,
  ArrowSquarePathFill24,
  ArrowSquarePathFill16,
  Alipay24,
  CurrencyBubbleFill24,
  BadgeCgFill24
} from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {
  return (
    <div>
      <DemoBlock title='24px'>
        <ArrowClockwise24 />
        <ArrowDown24 />
        <ArrowSquarePathFill24 />
        <Alipay24 />
        <CurrencyBubbleFill24 />
        <BadgeCgFill24 />
      </DemoBlock>

      <DemoBlock title='16px'>
        <ArrowClockwise16 />
        <ArrowDown16 />
        <ArrowSquarePathFill16 />
      </DemoBlock>
    </div>
  )
}
```

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

### Empty Component: CHIPS Theme Variations

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Empty 空状态.md

Demonstrates the Empty component's CHIPS theme variations for different states. It shows examples for 'chipsLoadingError', 'chipsNoNetwork', and 'chipsContentError', each with a title, the specified image, and a 'Refresh Try' button.

```tsx
import React from 'react'
import { Empty, ConfigProvider } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {

  return (
    <>
      <ConfigProvider theme='dark'>
        <DemoBlock>
          <Empty
            title='chips 页面加载失败'
            theme='CHIPS'
            image='chipsLoadingError'
            buttonText='刷新试试'
          />
        </DemoBlock>

      </ConfigProvider>
      <DemoBlock>
        <Empty
          title='chips 无网络'
          theme='CHIPS'
          image='chipsNoNetwork'
          buttonText='刷新试试'
        />
      </DemoBlock>
      <DemoBlock>
        <Empty
          title='chips 内容加载失败'
          theme='CHIPS'
          image='chipsContentError'
          buttonText='刷新试试'
        />
      </DemoBlock>
    </>

  )
}
```

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

### Tabs Alignment

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Tabs 标签页.md

Demonstrates how to change the alignment of the tab bar using the `align` prop, with examples for 'start' and 'center' alignments.

```tsx
import React from 'react'
import { Tabs } from '@kfe/mix-ui'

export default () => {
  return (
    <div className='demo-tabs'>
      <Tabs align='start'>
        {[1, 2, 3].map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            内容 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs align='center'>
        {[1, 2, 3].map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            内容 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}
```

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

### 运行 Mix-UI 文档处理器

Source: https://github.com/zvip-fe/open-docs/blob/main/README.md

使用 pnpm 或 node 命令运行 Mix-UI 文档处理器。可以指定调试模式以及自定义源目录和目标目录。

```Bash
# 基本用法
pnpm process-mixui

# 或者直接使用
node dist/index.js mixui

# 启用调试模式
node dist/index.js mixui --debug

# 自定义源目录和目标目录
node dist/index.js mixui --source-dir custom/source --target-dir custom/output
```

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

### DOMPurify Sanitization Examples

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/RichText 富文本展示.md

Provides several examples of how DOMPurify sanitizes different types of potentially malicious HTML input, demonstrating its effectiveness against various XSS vectors.

```js
DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); // becomes <p>abc</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // becomes <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table>
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // becomes <ul><li><a href="//google.com">click</a></li></ul>
```

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

### 调试处理过程

Source: https://github.com/zvip-fe/open-docs/blob/main/README.md

使用 `--debug` 选项运行文档处理器，以查看详细的处理过程信息。这有助于排查问题和理解工具的行为。

```Bash
node dist/index.js mixui --debug
```

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

### 构建项目

Source: https://github.com/zvip-fe/open-docs/blob/main/README.md

构建项目以生成可执行文件。这通常在部署或运行脚本之前完成。

```Bash
pnpm build
```

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

### CyclicRoll Horizontal and Vertical Scrolling Example

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/CyclicRoll 跑马灯.md

Provides a React example showcasing the CyclicRoll component with both horizontal and vertical scrolling. It demonstrates setting the 'direction' prop and includes basic styling.

```tsx
import React from 'react'
import { CyclicRoll } from '@kfe/mix-ui'
import './cyclicRoll.less'

export default () => {
  return (
    <>
      <p>横向滚动</p>
      <CyclicRoll speed={500} direction='horizon' className='mu-cyclic-roll-demo mu-cyclic-roll-demo-horizon' style={{ color: 'blue' }}>
        <p>1</p>
        <p>2</p>
        <p>3</p>
      </CyclicRoll>
      <p>纵向滚动</p>
      <CyclicRoll className='mu-cyclic-roll-demo' speed={30} direction='vertical'>
        <p>1</p>
        <p>2</p>
        <p>3</p>
      </CyclicRoll>
    </>

  )
}
```

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

### 开发模式

Source: https://github.com/zvip-fe/open-docs/blob/main/README.md

启动 tsup 的监听模式进行开发。当文件发生变更时，会自动重新构建项目。

```Bash
pnpm dev
```

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

### Imperative Dialog Creation Example

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Dialog 弹出框.md

Demonstrates an incorrect way to create a Dialog imperatively, where the Dialog does not react to parent component re-renders or state updates. This example highlights a common pitfall when using imperative dialogs with dynamic state.

```jsx
export default function App() {
  const [captcha, setCaptcha] = useState('');
  const showCaptcha = () => {
    return Dialog.confirm({
      title: '短信验证',
      message: (
        <Field
          placeholder="请输入验证码"
          value={captcha} // App 中 captcha 的更新是不会传递到 Dialog 中的
          onChange={setCaptcha}
        />
      ),
    });
  };
  return <Button onClick={showCaptcha}>Show Dialog</Button>;
}
```

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

### Basic HorizontalCard Usage

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/HorizontalCard 横向卡片.md

Shows the fundamental usage of the HorizontalCard component, displaying a title and custom content. This example is suitable for simple card layouts.

```tsx
import React from 'react'
import { DemoBlock } from 'demos'
import { HorizontalCard } from '@kfe/mix-ui'

export default () => {
  return (
    <DemoBlock background='#f6f8fc' title='自定义内容'>
      <HorizontalCard title='标题'>
        自定义内容
      </HorizontalCard>
    </DemoBlock>
  )
}
```

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

### Import Steps Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/steps.md

Demonstrates how to import the Steps component from the '@kfe/mix-ui' library.

```js
import { Steps } from '@kfe/mix-ui';
```

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

### Input Alignment Options

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Input 输入框.md

Shows how to control the text alignment within the Input component using the `align` prop. Examples include center and right alignment.

```tsx
import React, { useState } from 'react'
import { Input, Cell } from '@kfe/mix-ui'

export default () => {
  const [value, setValue] = useState('')
  return (
    <>
      <Cell>
        <Input placeholder='内容居中' value={value} onChange={setValue} align='center' />
      </Cell>
      <Cell>
        <Input placeholder='内容右对齐' value={value} onChange={setValue} align='right' />
      </Cell>
    </>
  )
}
```

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

### 查看帮助信息

Source: https://github.com/zvip-fe/open-docs/blob/main/README.md

显示文档处理工具的帮助信息，包括可用的命令和选项。

```Bash
node dist/index.js --help
```

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

### 安装依赖

Source: https://github.com/zvip-fe/open-docs/blob/main/README.md

安装项目所需的依赖项。通常在克隆仓库后或开始开发前执行此命令。

```Bash
pnpm install
```

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

### Custom Column Order

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/DatetimePicker 时间选择.md

Demonstrates how to customize the order of columns in the DatetimePicker using the `columnsOrder` prop. This example sets the order to month, day, year.

```tsx
import React from 'react'
import { DatetimePicker } from '@kfe/mix-ui'

export default () => {
  const [value, setValue] = React.useState(new Date())
  return (
    <DatetimePicker
      type='date'
      columnsOrder={['month', 'day', 'year']}
      minDate={new Date(2020, 0, 1)}
      maxDate={new Date(2025, 10, 1)}
      value={value}
      onChange={setValue}
    />
  )
}
```

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

### 添加新的文档处理器

Source: https://github.com/zvip-fe/open-docs/blob/main/README.md

展示如何通过实现 `IDocProcessor` 接口并在主入口文件中注册来扩展新的文档处理器。这允许工具处理其他组件库的文档。

```TypeScript
// scripts/processors/my-processor.ts
import { IDocProcessor, ProcessOptions } from '../types/index.js';

export class MyProcessor implements IDocProcessor {
  public readonly name = 'my-library';

  async process(options: ProcessOptions = {}): Promise<void> {
    // 实现你的处理逻辑
  }
}

```

```TypeScript
// scripts/index.ts
import { MyProcessor } from './processors/my-processor.js';

const processors: Record<string, IDocProcessor> = {
  mixui: new MixUIProcessor(),
  mylibrary: new MyProcessor(), // 添加新的处理器
};

```

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

### Flex Layout with Direction Control

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Flex 布局.md

Demonstrates how to control the direction of flex items using the 'direction' prop. Examples include 'row' and 'row-reverse' layouts.

```tsx
import React from 'react'
import { Flex } from '@kfe/mix-ui'
import './style.less'

export default () => {
  return (
    <div className='demo-flex'>
      <Flex direction='row'>
        <Flex.Item span={8}>span: 8-1</Flex.Item>
        <Flex.Item span={8}>span: 8-2</Flex.Item>
        <Flex.Item span={8}>span: 8-3</Flex.Item>
      </Flex>
      <Flex direction='row-reverse'>
        <Flex.Item span={8}>span: 8-1</Flex.Item>
        <Flex.Item span={8}>span: 8-2</Flex.Item>
        <Flex.Item span={8}>span: 8-3</Flex.Item>
      </Flex>
    </div>
  )
}
```

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

### Popup Positioning

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Popup 弹出层.md

Illustrates how to control the position of the Popup component using the `position` prop. It provides examples for 'top', 'bottom', 'left', and 'right' positions, triggered by different buttons.

```tsx
import React, { useState } from 'react'
import { Button, Popup, PopupPosition } from '@kfe/mix-ui'

export default () => {
  const [state, setState] = useState<PopupPosition>('')

  const onClose = () => setState('')

  return (
    <>
      <Button onClick={() => setState('top')}>顶部弹出</Button>
      <Button onClick={() => setState('bottom')}>底部弹出</Button>
      <Button onClick={() => setState('left')}>左侧弹出</Button>
      <Button onClick={() => setState('right')}>右侧弹出</Button>

      <Popup
        visible={state === 'top'}
        style={{ height: '30%' }}
        position='top'
        onClose={onClose}
      />
      <Popup
        visible={state === 'bottom'}
        style={{ height: '30%' }}
        position='bottom'
        onClose={onClose}
      />
      <Popup
        visible={state === 'left'}
        style={{ width: '30%', height: '100%' }}
        position='left'
        onClose={onClose}
      />
      <Popup
        visible={state === 'right'}
        style={{ width: '30%', height: '100%' }}
        position='right'
        onClose={onClose}
      />
    </>
  )
}
```

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

### Import Input Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Input 输入框.md

Demonstrates how to import the Input component from the '@kfe/mix-ui' library.

```js
import { Input } from '@kfe/mix-ui';
```

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

### Import Loading Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Loading 加载.md

Demonstrates how to import the Loading component from the '@kfe/mix-ui' library.

```js
import { Loading } from '@kfe/mix-ui';
```

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

### Input with Prefix and Suffix Content

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Input 输入框.md

Shows how to add custom content before (prefix) and after (suffix) the input field. This example uses an emoji as a prefix and a Button component as a suffix.

```tsx
import React from 'react'
import { Input, Cell, Button } from '@kfe/mix-ui'

export default () => {
  return (
    <Cell>
      <Input
        prefix='💁'
        suffix={<Button style={{ width: '60px', margin: 0 }} square type='default'>发送</Button>}
        placeholder='请输入短信验证码'
      />
    </Cell>
  )
}
```

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

### Import Button Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Button 按钮.md

Demonstrates how to import the Button component from the '@kfe/mix-ui' library.

```js
import { Button } from '@kfe/mix-ui';
```

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

### Option Filter

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/DatetimePicker 时间选择.md

Shows how to filter options using the `filter` prop, allowing for custom time intervals. This example filters minutes to only show multiples of 5.

```tsx
import React from 'react'
import { DatetimePicker } from '@kfe/mix-ui'

export default () => {
  return (
    <DatetimePicker
      type='time'
      minHour='10'
      maxHour='20'
      defaultValue='12:00'
      filter={(type, options) => {
        if (type === 'minute') {
          return options.filter(option => +option % 5 === 0)
        }
        return options
      }}
    />
  )
}
```

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

### CountDown with Custom Format

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/CountDown 倒计时.md

Shows how to customize the display format of the CountDown component using the 'format' prop. This example sets the format to display days, hours, minutes, and seconds.

```tsx
import React from 'react'
import { CountDown } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <DemoBlock title='自定义格式' padding='12px'>
      <div className='demo-count-down'>
        <CountDown time={30 * 60 * 60 * 1000} format='DD 天 HH 时 mm 分 ss 秒' />
      </div>
    </DemoBlock>
  )
}
```

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

### Import Popup Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Popup 弹出层.md

Demonstrates how to import the Popup component from the '@kfe/mix-ui' library.

```js
import { Popup } from '@kfe/mix-ui';
```

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

### Integrating Picker with Form.Item (Basic)

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Form 表单.md

Shows how to render a Picker component within a Form.Item, displaying the selected value or a placeholder. This setup is a prerequisite for controlling the Picker's visibility.

```tsx
<Picker
  columns={[...]} // Placeholder for column definitions
>
  {value =>
    value || 'Please select'
  }
</Picker>
```

```tsx
<Form.Item
  name='birthday'
  label='Birthday'
>
  <Picker
    columns={[...]} // Placeholder for column definitions
  >
    {value =>
      value || 'Please select'
    }
  </Picker>
</Form.Item>
```

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

### 引入 List 组件

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/List 列表.md

展示如何从 '@kfe/mix-ui' 库中引入 List 组件。这是使用该组件的第一步。

```js
import { List } from '@kfe/mix-ui'
```

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

### Import Skeleton Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Skeleton 骨架屏.md

Imports the Skeleton component from the '@kfe/mix-ui' library. This is a common first step when using the component.

```javascript
import { Skeleton } from '@kfe/mix-ui';
```

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

### Set Square Button Shape

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Button 按钮.md

Demonstrates how to create square-shaped buttons using the 'square' prop. This example shows primary, pay, and default button types with the square attribute applied.

```tsx
import React from 'react'
import { Button } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <DemoBlock title='按钮形状' padding='12px'>
      <div className='demo-button'>
        <Button square type='primary'>
          VIP 会员色
        </Button>
        <Button square type='pay'>
          购买红
        </Button>
        <Button square type='default'>
          知乎蓝
        </Button>
      </div>
    </DemoBlock>
  )
}
```

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

### 加载状态 - Switch

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Switch 开关.md

演示如何通过 `loading` 属性将 Switch 组件设置为加载状态，此时开关同样不可点击。

```tsx
import React from 'react'
import { Switch } from '@kfe/mix-ui'

export default () => {
  return <Switch loading defaultChecked />
}
```

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

### Mix-UI Popup with Rounded Corners

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Popup 弹出层.md

Demonstrates how to use the Mix-UI Popup component with the `round` prop to apply rounded corner styles based on its position. This example shows a basic popup triggered by a button.

```tsx
import React, { useState } from 'react'
import { Button, Popup } from '@kfe/mix-ui'

export default () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setVisible(true)}>圆角弹窗</Button>
      <Popup
        visible={visible}
        closeable
        style={{ height: '30%' }}
        position='bottom'
        round
        onClose={() => setVisible(false)}
      />
    </>
  )
}
```

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

### Basic Rich Text Rendering

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/RichText 富文本展示.md

Shows a basic example of rendering rich text content using the RichText component. The content includes HTML tags like <p>, <h2>, and <ul>.

```tsx
/* eslint-disable no-useless-escape */
import React from 'react'
import { RichText } from '@kfe/mix-ui'

const content = `<p>这是一个富文本内容示例。</p>
<h2>标题示例</h2>
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>`

export default () => {
  return (
    <div className='demo-rich-text'>
      <RichText content={content} />
    </div>
  )
}
```

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

### 引入 Switch 组件

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Switch 开关.md

展示如何从 '@kfe/mix-ui' 库中引入 Switch 组件。

```js
import { Switch } from '@kfe/mix-ui';
```

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

### Mix-UI Popup Teleportation with ConfigProvider

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Popup 弹出层.md

Shows how to use the `teleport` prop with the Mix-UI Popup to mount it to a specified DOM node, enabling `ConfigProvider` to take effect. This example attaches the popup to a div referenced by `wrapperRef`.

```tsx
import React from 'react'
import { Button, Popup } from '@kfe/mix-ui'

export default () => {
  const [visible, setVisible] = React.useState(false)
  const wrapperRef = React.useRef<HTMLDivElement>(null)

  return (
    <div ref={wrapperRef} className='popup-teleport-demo'>
      <Button
        onClick={() => setVisible(true)}
      >点击
      </Button>
      <Popup
        teleport={() => wrapperRef.current}
        visible={visible}
        closeable
        title='标题'
        description='这是一段很长很长的描述这是一段很长很长的描述这是一段很长很长的描述这是一段很长很长的描述'
        style={{ height: '30%' }}
        position='bottom'
        round
        onClose={() => setVisible(false)}
      />
    </div>
  )
}
```

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

### Import Image Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Image 图片.md

Demonstrates how to import the Image component from the @kfe/mix-ui library into your JavaScript project. This is the first step to using the component.

```javascript
import { Image } from '@kfe/mix-ui';
```

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

### Popover 弹出位置值

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Popover 气泡弹出框.md

列出了 Popover 组件 `placement` 属性支持的所有值，并简要说明了每个位置的含义。

```bash
top           # 顶部中间位置
top-start     # 顶部左侧位置
top-end       # 顶部右侧位置
left          # 左侧中间位置
left-start    # 左侧上方位置
left-end      # 左侧下方位置
right         # 右侧中间位置
right-start   # 右侧上方位置
right-end     # 右侧下方位置
bottom        # 底部中间位置
bottom-start  # 底部左侧位置
bottom-end    # 底部右侧位置
```

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

### Import Flex Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Flex 布局.md

Demonstrates how to import the Flex component from the '@kfe/mix-ui' library using JavaScript.

```js
import { Flex } from '@kfe/mix-ui';
```

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

### Flex Layout with Column Spacing (Gutter)

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Flex 布局.md

Explains how to set spacing between column elements using the 'gutter' prop. It shows examples of applying horizontal spacing and both horizontal and vertical spacing using an array.

```tsx
import React from 'react'
import { Flex } from '@kfe/mix-ui'
import './style.less'

export default () => {
  return (
    <div className='demo-flex'>
      <Flex gutter={16}>
        <Flex.Item span={8}>span: 8</Flex.Item>
        <Flex.Item span={8}>span: 8</Flex.Item>
        <Flex.Item span={8}>span: 8</Flex.Item>
      </Flex>
      <Flex gutter={[16, 16]}>
        <Flex.Item span={8}>span: 8</Flex.Item>
        <Flex.Item span={8}>span: 8</Flex.Item>
        <Flex.Item span={8}>span: 8</Flex.Item>
      </Flex>
    </div>
  )
}
```

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

### Import Typography Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Typography 文本.md

Demonstrates how to import the Typography component from the '@kfe/mix-ui' library.

```js
import { Typography } from '@kfe/mix-ui';
```

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

### Accessing Checkbox and CheckboxGroup Instance Methods

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Checkbox 复选框.md

Demonstrates how to use `useRef` to get references to Checkbox and CheckboxGroup instances and call their respective methods like `toggle` and `toggleAll`. This is useful for imperative control over the component's state.

```typescript
import { useRef } from 'react';
import type { CheckboxInstance, CheckboxGroupInstance } from '@kfe/max-ui';

const checkboxRef = useRef<CheckboxInstance>();
const checkboxGroupRef = useRef<CheckboxGroupInstance>();

checkboxRef.current?.toggle();
checkboxGroupRef.current?.toggleAll();
```

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

### Customize Button Second Line Text

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Button 按钮.md

Illustrates how to add and customize the second line of text on a button using the 'secondText' prop. This example applies custom second text to primary, pay, and default button types.

```tsx
import React from 'react'
import { Button } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <DemoBlock title='按钮第二行文本' padding='12px'>
      <div className='demo-button'>
        <Button type='primary' secondText='立即购买'>新会员首月仅 0.3 元/天</Button>
        <Button type='pay' secondText='立即购买'>新会员首月仅 0.3 元/天</Button>
        <Button type='default' secondText='立即购买'>新会员首月仅 0.3 元/天</Button>
      </div>
    </DemoBlock>
  )
}
```

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

### Import Icons

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Icons 图标.md

Demonstrates how to import specific icon components from the '@kfe/mix-ui' library for use in a React application.

```js
import { ArrowClockwise24 } from '@kfe/mix-ui';
```

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

### Import Lazyload Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Lazyload 懒加载.md

This snippet shows how to import the Lazyload component from the '@kfe/mix-ui' library. This is the initial step required before using the component in your project.

```javascript
import { Lazyload } from '@kfe/mix-ui';
```

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

### CountDown Manual Control with Refs

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/CountDown 倒计时.md

Illustrates manual control of the CountDown component using refs. The 'start', 'pause', and 'reset' methods can be called on the ref to manage the countdown. Includes 'autoStart={false}' and an 'onFinish' event handler.

```tsx
import React, { useRef } from 'react'
import { CountDown, Toast, Button } from '@kfe/mix-ui'
import type { CountDownInstance } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  const ref = useRef<CountDownInstance>(null)
  return (
    <DemoBlock title='手动控制' padding='12px'>
      <div className='demo-count-down'>
        <CountDown
          ref={ref}
          time={3000}
          millisecond
          format='HH:mm:ss:SS'
          autoStart={false}
          onFinish={() => Toast.info('倒计时结束')}
        />
        <br />
        <Button
          text='开始'
          onClick={() => ref.current?.start()}
        />
        <Button
          text='暂停'
          onClick={() => ref.current?.pause()}
        />
        <Button
          text='重置'
          onClick={() => ref.current?.reset()}
        />
      </div>
    </DemoBlock>
  )
}
```

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

### Import WechatOverlay

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/WechatOverlay 微信遮罩.md

Demonstrates how to import the WechatOverlay component from the '@kfe/mix-ui' library.

```js
import { WechatOverlay } from '@kfe/mix-ui';
```

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

### Basic Image Usage

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Image 图片.md

Demonstrates the fundamental usage of the Image component with a source URL and CSS class.

```tsx
import React from 'react'
import { Image } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <>
      <DemoBlock title='一、基础用法' padding='0'>
        <div className='demo-image'>
          <Image className='demo-class' src='https://picd.zhimg.com/50/v2-871cf0c7c844eb7c10500f983411f1a9.webp' />
        </div>
      </DemoBlock>
    </>
  )
}
```

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

### Basic Tabs Usage and Styles

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Tabs 标签页.md

Shows the basic implementation of the Tabs component with different display styles: line, capsule, jumbo (with descriptions and signs), and card. It includes examples of how to structure TabPane elements and pass data for custom display.

```tsx
import React from 'react'
import { Tabs } from '@kfe/mix-ui'
import './style.less'

const items = Array.from({ length: 3 }, (_, i) => i + 1)
const signItems = [
  {
    title: '头1',
    content: '内容1',
    description: '哈哈哈哈',
    sign: {
      content: <img src='https://pic2.zhimg.com/v2-aac9df70bbd91b55b6d4fb12719af3e0.png' />,
      left: '0px',
      top: '0px'

    }
  },
  {
    title: '头2',
    content: '内容2',
    description: '哈哈哈哈',
    sign: {
      content: <img src='https://pic2.zhimg.com/v2-aac9df70bbd91b55b6d4fb12719af3e0.png' />,
      left: '10px',
      bottom: '10px'

    }
  },
  {
    title: '头3',
    content: '内容3',
    description: '哈哈哈哈',
    sign: {
      content: <img src='https://pic2.zhimg.com/v2-aac9df70bbd91b55b6d4fb12719af3e0.png' />,
      right: '20px',
      top: '20px'

    }
  }
]

export default () => {
  return (
    <div className='demo-tabs'>
      <Tabs defaultActive={2}>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            下划线标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs border type='capsule'>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            胶囊标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs border type='capsule2'>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            胶囊2标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs border type='jumbo'>
        {signItems.map((item, index) => (
          <Tabs.TabPane
            key={index}
            title={item.title}
            description={item.content}
            sign={item.sign}
          >
            {item.content}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs type='card'>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            卡片标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}
```

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

### 引入 Page 组件

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Page 页面布局.md

展示如何从 '@kfe/mix-ui' 包中引入 Page 组件。这是一个基础的 JavaScript 导入语句。

```js
import { Page } from '@kfe/mix-ui';
```

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

### Import Sticky Component

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Sticky 粘性布局.md

This snippet shows how to import the Sticky component from the '@kfe/mix-ui' library into your JavaScript project.

```js
import { Sticky } from '@kfe/mix-ui';
```

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

### Custom Form Item - Mix UI

Source: https://github.com/zvip-fe/open-docs/blob/main/docs/mix-ui/Form 表单.md

Illustrates how to create and use custom form items with Mix UI's Form component. It requires the custom component to provide a `value` prop and an `onChange` event, demonstrated with a mobile input example.

```tsx
import React from 'react'
import { Button, Input, Form, Space, Picker, ArrowDown24 as ArrowDown } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

const columns = [
  { text: '86 🇨🇳', value: '86' },
  { text: '87 🇺🇸', value: '87' },
  { text: '88 🏳️‍🌈', value: '88' },
  { text: '89 🏳️‍⚧️', value: '89' },
  { text: '90 🇴🇲', value: '90' },
  { text: '91 🇵🇪', value: '91' },
  { text: '92 🇩🇪', value: '92' }
]

interface MobileInputValue {
  prefix: string
  value: string
}

interface MobileInputProps {
  value?: MobileInputValue
  onChange?: (value: MobileInputValue) => void
}

// 自定义表单项
const MobileInput: React.FC<MobileInputProps> = ({
  value = { prefix: '', value: '' },
  onChange
}) => {
  const trigger = (changedValue: Partial<MobileInputValue>) => {
    onChange?.({ ...value, ...changedValue })
  }

  const onMobileChange = (value: string) => {
    trigger({ value })
  }

  const onPrefixChange = (prefix: string) => {
    trigger({ prefix })
  }

  return (
    <Picker
      popup
      value={value.prefix}
      placeholder={false}
      columns={columns}
      onConfirm={onPrefixChange}
    >
      {(_, selectRow: any, actions) => {
        return (
          <Space>
            <Space align='center' onClick={() => actions.open()}>
              <div>+{selectRow?.text}</div>
              <ArrowDown style={{ display: 'block' }} />
            </Space>
            <Input
              value={value.value}
              placeholder='请输入手机号'
              onChange={onMobileChange}
            />
          </Space>
        )
      }}
    </Picker>
  )
}

export default () => {
  const [form] = Form.useForm()

  const checkMobileInput = (_, value: MobileInputValue) => {
    if (value.prefix && value.value) {
      return Promise.resolve()
    }
    if (!value.prefix) Promise.reject(new Error('请选择国家区号!'))
    return Promise.reject(new Error('手机号不能为空!'))
  }

  const onFinish = values => {
    console.log(values)
  }

  return (
    <DemoBlock title='自定义表单项' padding='12px 0'>
      <Form
        layout='vertical'
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button block>
              提交
            </Button>
          </div>
        }
      >
        <Form.Item name='name' label='姓名'>
          <Input placeholder='请输入用户姓名' />
        </Form.Item>
        <Form.Item
          initialValue={{ prefix: '86', value: '' }}
          name='mobile'
          label='手机号'
          rules={[{ required: true }, { validator: checkMobileInput }]}
        >
          <MobileInput />
        </Form.Item>
      </Form>
    </DemoBlock>
  )
}
```