### 自定义初始化参数（initParams）

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-display/f2

Example of using custom initialization parameters for the F2 chart.

```APIDOC
## Chart with Custom Initialization Parameters

### Description
This example shows how to initialize the F2 chart with custom parameters, such as setting the pixel ratio for higher resolution rendering.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **data** (Array) - The data source for the chart.
- **initParams** (Object) - Custom initialization parameters for the F2 chart instance.
  - **pixelRatio** (Number) - Sets the device pixel ratio for the chart canvas.
- **setChart** (Function) - A callback function to configure the chart geometry.
  - **chart** (Object) - The F2 chart instance.
    - **interval** (Function) - Defines the interval geometry for the chart.
      - **position** (String) - Specifies the mapping of data fields to the chart axes (e.g., 'genre*sold').

### Request Example
```javascript
<F2
  data={[
    { genre: 'A', sold: 10 },
    { genre: 'B', sold: 20 },
    { genre: 'C', sold: 30 },
  ]}
  initParams={{ pixelRatio: 2 }}
  setChart={chart => chart.interval().position('genre*sold')}
/>
```

### Response
N/A (Component Renders Chart)
```

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

### Basic InputLicenseKeyBoard Usage in React

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-entry/input-license-key-board

Demonstrates the fundamental usage of the InputLicenseKeyBoard component. It shows how to import the component and use it with a placeholder. This example is suitable for simple implementations where default behaviors are sufficient.

```jsx
import React from 'react';
import { PartTitle, InputLicenseKeyBoard, Space } from '@kqinfo/ui';


export default () => (
  <Space vertical size={'8px'}>
    <PartTitle>基础使用</PartTitle>
    <InputLicenseKeyBoard placeholder="请输入车牌号码" />
  </Space>
);
```

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

### F2 Pie Chart Example with Polar Coordinates (React)

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-display/f2

Illustrates the creation of a pie chart using F2 with polar coordinates and custom text labels. This example showcases on-demand loading of F2 modules and plugins for pie charts. Requires '@kqinfo/ui' and specific F2 modules and plugins.

```javascript
import React from 'react';
import { F2 } from '@kqinfo/ui';
// 按需加载
require('@antv/f2/lib/coord/polar');
require('@antv/f2/lib/geom/interval');
require('@antv/f2/lib/geom/adjust/stack');
const f2 = require('@antv/f2/lib/core');
const PieLabel = require('@antv/f2/lib/plugin/pie-label');
// 注册插件
f2.Chart.plugins.register(PieLabel);


export default () => {
  return (
    <F2
      data={[
        { amount: 20, ratio: 0.1, memo: '学习', const: 'const' },
        { amount: 100, ratio: 0.5, memo: '睡觉', const: 'const' },
        { amount: 10, ratio: 0.05, memo: '吃饭', const: 'const' },
        { amount: 30, ratio: 0.15, memo: '讲礼貌', const: 'const' },
        { amount: 10, ratio: 0.05, memo: '其他', const: 'const' },
        { amount: 20, ratio: 0.1, memo: '运动', const: 'const' },
        { amount: 10, ratio: 0.05, memo: '暂无备注', const: 'const' },
      ]}
      setChart={chart => {
        chart.coord('polar', { transposed: true, innerRadius: 0.7, radius: 1 });
        chart.axis(false);
        chart.pieLabel({
          sidePadding: 40,
          label1: data => ({
            fill: '#333333',
            text: '¥' + data.amount.toFixed(2),
            fontWeight: 700,
            fontSize: 10,
          }),
          label2: data => ({ text: data.memo, fill: '#666666' }),
        });
        chart
          .interval()
          .position('const*ratio')
          .color('memo', [
            '#1890FF',
            '#13C2C2',
            '#2FC25B',
            '#FACC14',
            '#F04864',
            '#8543E0',
            '#3436C7',
            '#223273',
          ])
          .adjust('stack');
      }}
    />
  );
};

```

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

### 折线图（Tooltip + timeCat）

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-display/f2

Example of creating a line chart with tooltip and time categorization using F2.

```APIDOC
## Line Chart with Tooltip and Time Categorization

### Description
This example demonstrates how to create a line chart using the F2 component from `@kqinfo/ui`. It includes configuration for tooltips, time-based categorization on the x-axis, and custom axis label formatting.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **data** (Array) - The data source for the chart. Each object should have a 'date' and 'value' field.
- **recordScale** (Object) - Configuration for data scaling. Specifies tick counts and ranges for axes.
  - **value** (Object) - Scale configuration for the value axis.
    - **tickCount** (Number) - The number of ticks on the value axis.
    - **min** (Number) - The minimum value for the value axis.
  - **date** (Object) - Scale configuration for the date axis.
    - **type** (String) - Set to 'timeCat' for time categorization.
    - **range** (Array) - The range of the date axis.
    - **tickCount** (Number) - The number of ticks on the date axis.
- **setChart** (Function) - A callback function that receives the F2 chart instance. Used to configure chart geometry, coordinates, and plugins.
  - **chart** (Object) - The F2 chart instance.
    - **tooltip** (Function) - Configures the tooltip behavior (e.g., custom, showXTip, showYTip, snap, crosshairsType, crosshairsStyle).
    - **axis** (Function) - Configures axis properties, including label formatting.
    - **line** (Function) - Defines the line geometry for the chart.
      - **position** (String) - Specifies the mapping of data fields to the chart axes (e.g., 'date*value').

### Request Example
```javascript
<F2
  data={[
    { date: '2017-06-05', value: 116 },
    // ... more data points
  ]}
  recordScale={{
    value: { tickCount: 5, min: 0 },
    date: { type: 'timeCat', range: [0, 1], tickCount: 3 },
  }}
  setChart={chart => {
    chart.tooltip({
      custom: true,
      showXTip: true,
      showYTip: true,
      snap: true,
      crosshairsType: 'xy',
      crosshairsStyle: { lineDash: [2] },
    });
    chart.axis('date', {
      label(text, index, total) {
        const textCfg: any = {};
        if (index === 0) textCfg.textAlign = 'left';
        else if (index === total - 1) textCfg.textAlign = 'right';
        return textCfg;
      },
    });
    chart.line().position('date*value');
  }}
/>
```

### Response
N/A (Component Renders Chart)
```

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

### Visible Component Example - React

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/visible

Demonstrates the usage of the Visible component from '@kqinfo/ui' in a React application. This component allows conditional rendering of its children based on the 'visible' prop. It supports both controlled and uncontrolled modes and inherits base events.

```javascript
import React from 'react';
import { Visible, Space, PartTitle, Button } from '@kqinfo/ui';


export default () => {
  const [v, setV] = React.useState(true);
  return (
    <Space vertical size={'10px'}>
      <PartTitle>一般用法</PartTitle>
      <Button onTap={() => setV(x => !x)} type={'primary'}>
        切换可见
      </Button>
      <Visible visible={v}>
        <Space>仅在 visible 为 true 时显示</Space>
      </Visible>
    </Space>
  );
};

```

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

### Kqinfo UI Step: Dashed Style for Progress

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-display/step

Illustrates the 'dashed' style for the Step component, suitable for linear progress indication. This example shows how to apply the dashed type and manage the current step.

```javascript
import React from 'react';
import { Step, Space, PartTitle } from '@kqinfo/ui';


export default () => (
  <Space vertical size={10}>
    <PartTitle>线型（dashed）</PartTitle>
    <Step
      items={['步骤1', '步骤2', '步骤3', '步骤4']}
      current={2}
      type="dashed"
    />
  </Space>
);
```

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

### Integrating InputLicenseKeyBoard with Kqinfo UI Form

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-entry/input-license-key-board

Provides an example of how to integrate the InputLicenseKeyBoard component within the Kqinfo UI `Form` component. This showcases how to use the input for form fields, apply validation rules, and handle form submission.

```jsx
import React from 'react';
import {
  PartTitle,
  InputLicenseKeyBoard,
  Space,
  Form,
  FormItem,
  Button,
} from '@kqinfo/ui';


export default () => {
  const [form] = Form.useForm();
  return (
    <Space vertical size={'8px'}>
      <PartTitle>配合 Form 使用</PartTitle>
      <Form form={form} cell onFinish={console.log} labelWidth={'4em'}>
        <FormItem label={'姓名'} name={'name'} rules={[{ required: true }]} />
        <FormItem
          label={'车牌号码'}
          name={'cardNo'}
          rules={[{ required: true }]
          }
        >
          <InputLicenseKeyBoard
            placeholder="请输入车牌号码"
            title={'FORM车牌输入专用键盘'}
            style={{ '--text-align': 'right' }}
          />
        </FormItem>
      </Form>
      <Button type={'primary'} onTap={() => form.submit()}>
        提交
      </Button>
    </Space>
  );
};

```

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

### KQ UI Single Checkbox: Controlled State Example (React)

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-entry/check-box

Illustrates how to implement a single, controlled CheckBox component in React using the '@kqinfo/ui' library. This example shows how to manage the checked state and handle change events.

```jsx
import React, { useState } from 'react';
import { Space, CheckBox, PartTitle } from '@kqinfo/ui';


export default () => {
  const [checked, setChecked] = useState(false);
  return (
    <Space vertical size={30}>
      <PartTitle>单个复选框（受控）</PartTitle>
      <CheckBox
        checked={checked}
        value={'single'}
        onChange={next => setChecked(next)}
      >
        我已阅读并同意协议
      </CheckBox>
    </Space>
  );
};

```

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

### Kqinfo UI Picker: Time Selection with Range

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-entry/picker

Demonstrates time selection using the Kqinfo UI Picker component with specified start and end times. The `start` and `end` props are used to define the selectable time range in 'HH:mm' format.

```jsx
import React from 'react';
import { Picker, PartTitle, Space, Button } from '@kqinfo/ui';


export default () => (
  <Space vertical size={'10px'}>
    <PartTitle>时间选择</PartTitle>
    <Picker mode={'time'} start={'09:30'} end={'18:00'}>
      <Button type={'primary'}>选择时间</Button>
    </Picker>
  </Space>
);

```

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

### Create Animation with Kqinfo UI

Source: https://chuauth.cqkqinfo.com/kq-ui/utils/business/create-animation

Demonstrates how to use the `createAnimation` utility from '@kqinfo/ui' to create and apply animations to components. It shows both general usage with a button to trigger animations and a loopable animation example. Note that Remax/One's View does not support the animation property; use '@kqinfo/ui's Space component instead.

```javascript
import React, { useEffect, useRef } from 'react';
import { createAnimation, Button, Space, PartTitle } from '@kqinfo/ui';


export default () => {
  const animation = createAnimation({ duration: 500 });
  const animation2 = createAnimation({ duration: 500 });
  useEffect(() => {
    const start = () => {
      animation2
        .translateX((Math.random() * 1000) % 300)
        .opacity(Math.random())
        .end(start);
    };
    start();
  }, []);
  return (
    <Space vertical size={'10px'} alignItems={'flex-start'}>
      <PartTitle>一般用法</PartTitle>
      <Space
        style={{ width: 100, height: 100, backgroundColor: 'red' }}
        animation={animation}
      />
      <Button
        onTap={() => {
          animation
            .translateX((Math.random() * 1000) % 300)
            .opacity(Math.random());
        }}
        type={'primary'}
      >
        位移
      </Button>
      <PartTitle>循环动画</PartTitle>
      <Space
        style={{ width: 100, height: 100, backgroundColor: 'red' }}
        animation={animation2}
      />
    </Space>
  );
};

```

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

### Kqinfo UI WaterMark: Image Watermark Example

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/water-mark

Illustrates how to use an image as a watermark with the WaterMark component. This example specifies the image source, width, and height for the watermark. It's recommended to use high-resolution images (2x/3x) for clarity on different screen densities.

```jsx
import React from 'react';
import { WaterMark } from '@kqinfo/ui';


export default () => (
  <WaterMark
    height={72}
    width={230}
    image="https://gw.alipayobjects.com/zos/bmw-prod/59a18171-ae17-4fc5-93a0-2645f64a3aca.svg"
  >
    <div style={{ height: 300 }} />
  </WaterMark>
);
```

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

### Initialize WeChat SDK using wxInit

Source: https://chuauth.cqkqinfo.com/kq-ui/utils/one/wx-init

Initializes the WeChat SDK for web applications by calling `wx.config`. This must be done before using any WeChat functionalities. The `wxInit` function from '@kqinfo/ui' handles this process.

```javascript
import React from 'react';
import { wxInit } from '@kqinfo/ui';


wxInit();
```

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

### ConfigProvider: Global Configuration Example (React)

Source: https://chuauth.cqkqinfo.com/kq-ui/components/config/config-provider

Demonstrates how to use ConfigProvider to globally set theme colors, shadow styles, custom no-data components, and enable elderly mode. It imports necessary components from '@kqinfo/ui' and utilizes React hooks for state management and side effects.

```jsx
import React, { useEffect, useState } from 'react';
import {
  ConfigProvider,
  Space,
  PartTitle,
  ColorText,
  Shadow,
  Form,
  FormItem,
  Picker,
  Icon,
  ReTextarea,
  NoData,
  getAddressOptions,
} from '@kqinfo/ui';


export default () => {
  const [form] = Form.useForm();
  const [addressOptions, setAddressOptions] = useState<PickerData[]>([]);
  useEffect(() => {
    getAddressOptions().then(options => setAddressOptions(options));
  }, []);
  return (
    <Space vertical size={'10px'} alignItems={'flex-start'}>
      <PartTitle>主题色</PartTitle>
      <ConfigProvider brandPrimary={'#6227D9'}>
        <ColorText>主题色</ColorText>
      </ConfigProvider>
      <PartTitle>阴影色</PartTitle>
      <ConfigProvider shadowColor={'#ff0000'}>
        <Shadow>
          <div style={{ width: 100, height: 100, background: '#fff' }}>
            我是内容
          </div>
        </Shadow>
      </ConfigProvider>
      <PartTitle>默认占位组件</PartTitle>
      <ConfigProvider renderNoData={() => '我是自定义占位组件'}>
        <NoData />
      </ConfigProvider>
      <PartTitle>适老模式</PartTitle>
      <ConfigProvider elderly>
        <Form form={form} cell onFinish={console.log} labelWidth={'4em'}>
          <FormItem
            label={'密码'}
            name={'password'}
            rules={[{ type: 'password', required: true }]}/>
          <FormItem label={'姓名'} name={'name'} rules={[{ required: true }]} />
          <FormItem
            label={'手机号'}
            name={'phone'}
            rules={[{ type: 'phone', required: true }]}/>
          <FormItem
            label={'身份证号'}
            name={'idCard'}
            rules={[{ type: 'idCard', required: true }]}/>
          <FormItem
            label={'城市'}
            rules={[{ required: true }]}
            name={'city'}
            after={<Icon name={'kq-right'} color={'#666'} />}>
            <Picker cols={3} data={addressOptions}>
              请选择
            </Picker>
          </FormItem>
          <FormItem label={'详情地区'} name={'area'}>
            <ReTextarea placeholder={'请输入地区'} />
          </FormItem>
        </Form>
      </ConfigProvider>
    </Space>
  );
};
```

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

### Kqinfo UI WaterMark: Text Watermark Example

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/water-mark

Demonstrates how to implement a basic text watermark using the WaterMark component. This example shows setting the content of the watermark to 'Kqinfo UI'. The component requires a child element to define the area where the watermark will be applied.

```jsx
import React from 'react';
import { WaterMark } from '@kqinfo/ui';


export default () => (
  <WaterMark content="Kqinfo UI">
    <div style={{ height: 300 }} />
  </WaterMark>
);
```

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

### LicenseKeyBoard with Event Callbacks and SafeArea in React

Source: https://chuauth.cqkqinfo.com/kq-ui/license-key-board

Demonstrates the use of event callbacks like 'afterShow' and 'afterClose', and the 'safeArea' prop for adapting to full-screen devices. This example shows how to trigger actions when the keyboard appears or disappears and ensures proper display on devices with notches or cutouts. Dependencies include React and '@kqinfo/ui'.

```javascript
import React, { useState } from 'react';
import { Space, LicenseKeyBoard, PartTitle, ReInput, showToast } from '@kqinfo/ui';


export default () => {
  const [val, setVal] = useState('粤B');
  const [visible, setVisible] = useState(false);
  return (
    <Space vertical size={'8px'}>
      <PartTitle>事件与安全区</PartTitle>
      <div onClick={() => setVisible(true)}>
        <ReInput placeholder="请输入内容" value={val} readOnly />
      </div>
      <LicenseKeyBoard
        visible={visible}
        value={val}
        safeArea
        onClose={() => setVisible(false)}
        onInput={v => setVal(prev => prev + v)}
        onDelete={() => setVal(prev => prev.slice(0, prev.length - 1))}
        afterShow={() => showToast('键盘已弹出')}
        afterClose={() => showToast('键盘已收起')}
      />
    </Space>
  );
};

```

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

### Kqinfo UI Icon Component Usage Example

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/icon

This React code snippet demonstrates the basic usage and customization of the Kqinfo UI Icon component. It showcases how to render icons with default settings, custom sizes and colors, and how to handle tap events. The example imports necessary components from '@kqinfo/ui' and defines a list of icon names to render.

```jsx
import React from 'react';
import { Icon, Space, PartTitle, showToast } from '@kqinfo/ui';


const renderItem = (name: string) => (
  <Space
    justify={'center'}
    size={'10px'}
    alignItems={'center'}
    vertical
    style={{
      background: '#fff',
      width: '30vw',
      height: '30vw',
      border: '1px solid #eee',
    }}
  >
    <Icon name={name as any} size={40} color={'#333'} />
    {name}
  </Space>
);


const names = [
  'kq-search',
  'kq-loading',
  'kq-down',
  'kq-loading2',
  'kq-yes',
  'kq-add',
  'kq-clear',
  'kq-clear2',
  'kq-notice',
  'kq-zengjia',
  'kq-right',
  'kq-tip',
  'kq-jianshao',
  'kq-xingxing',
  'kq-xiangji',
  'kq-voice',
  'kq-biaoqing',
  'kq-album',
  'kq-jia',
  'kq-filter',
  'kq-left',
  'kq-mobile',
  'kq-keshi',
  'kq-yiyuan',
  'kq-home',
  'kq-tongzhi',
  'kq-shuaxin',
  'kq-shoucang',
  'kq-zan',
  'kq-eye',
  'kq-weixin',
  'kq-yisheng',
  'kq-chuangzuo',
  'kq-zhibo',
  'kq-rili',
  'kq-jiankang',
  'kq-kanjian',
  'kq-bukanjian',
  'kq-zhuanlan',
  'kq-shijian',
  'kq-zan1',
  'kq-shoucang1',
  'kq-zhibozhong',
  'kq-bofang',
  'kq-zanting',
  'kq-caidan',
  'kq-time',
  'kq-shouye',
  'kq-tag',
  'kq-fenge',
  'kq-zhengque',
  'kq-sousuo',
  'kq-xihuan',
  'kq-buxihuan',
  'kq-erweima',
  'kq-shang',
  'kq-xia',
  'kq-shanchu',
  'kq-dizhi',
  'kq-zuo',
  'kq-you',
  'kq-shangjiantou',
  'kq-xiajiantou',
  'kq-fuzhi',
  'kq-xiay',
  'kq-shangy',
  'kq-img',
  'kq-tel',
  'kq-video',
];


export default () => (
  <Space vertical size={'10px'} alignItems={'flex-start'}>
    <PartTitle>基本用法</PartTitle>
    <Space flexWrap={'wrap'}>{names.map(renderItem)}</Space>


    <PartTitle>自定义大小与颜色</PartTitle>
    <Space size={'16px'}>
      {/* 数字表示 rpx */}
      <Icon name={'kq-search'} size={40} color={'#2f54eb'} />
      {/* 字符串可使用 css 尺寸，如 px/em */}
      <Icon name={'kq-yes'} size={'32px'} color={'#52c41a'} />
      <Icon name={'kq-clear'} size={'1.6em'} color={'#d4380d'} />
    </Space>


    <PartTitle>加载图标自动旋转</PartTitle>
    <Space size={'16px'}>
      <Icon name={'kq-loading'} size={40} color={'#1890ff'} />
      <Icon name={'kq-loading2'} size={40} color={'#fa8c16'} />
    </Space>


    <PartTitle>事件与可点击</PartTitle>
    <Space>
      <Icon
        name={'kq-shuaxin'}
        size={36}
        color={'#595959'}
        onTap={() => showToast({ title: '点击图标' })}
      />
    </Space>
  </Space>
);

```

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

### OpenWeapp - Jump to Mini Program

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/open-weapp

The OpenWeapp component allows for navigating to other mini-programs or specific pages within the current mini-program. It requires WeChat SDK initialization on the web端.

```APIDOC
## OpenWeapp Jump to Mini Program

### Description
Navigates to a specified mini-program or a page within the current mini-program. The `children` prop only supports inline styles. Web端 requires WeChat SDK initialization before use.

### Method
N/A (This is a React component, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Props
- **children** (ReactElement<any, string | JSXElementConstructor<any>>) - Required - The content to display. Only inline styles are supported.
- **username** (string) - Required (for web端) - The original ID of the mini-program account, starting with 'gh_'.
- **path** (string) - Required - The path to navigate to within the mini-program.
- **appId** (string) - Required (for mini-program端) - The appId of the mini-program to navigate to.
- **onLaunch** ((e: any) => void) - Optional - Callback function executed upon successful launch.
- **envVersion** ("develop" | "release" | "trial") - Optional - The environment version to open the mini-program in. Defaults to the current environment.
- **className** (string) - Optional - Additional CSS class names.
- **style** (CSSProperties) - Optional - Inline styles for the component.

### Request Example
```jsx
import React from 'react';
import { Space, PartTitle, OpenWeapp } from '@kqinfo/ui';
import { View } from 'remax/one';

export default () => (
  <Space vertical size={'10px'} alignItems={'flex-start'}>
    <PartTitle>General Usage</PartTitle>
    <OpenWeapp
      onLaunch={() => alert('Simulated success')}
      path={'pages/index/index'}
      username={'gh_d9c1c80f9bfa'}
    >
      <View style={{ width: 100, height: 100, background: '#eee' }}>Open</View>
    </OpenWeapp>

    <PartTitle>Jump to Current Mini Program Page (WeChat端)</PartTitle>
    <OpenWeapp onLaunch={() => alert('Jump successful')} path={'pages/home/index'}>
      <View
        style={{ display: 'inline-block', padding: 10, background: '#fafafa' }}
      >
        Jump within current mini program
      </View>
    </OpenWeapp>

    <PartTitle>Jump to Other Mini Programs (WeChat端)</PartTitle>
    <OpenWeapp
      appId={'wx1234567890abcdef'}
      path={'pages/entry/index'}
      onLaunch={() => alert('Jump to other mini program successful')}
    >
      <View
        style={{ display: 'inline-block', padding: 10, background: '#fafafa' }}
      >
        Jump to other mini program
      </View>
    </OpenWeapp>

    <PartTitle>Set Environment Version</PartTitle>
    <OpenWeapp
      envVersion={'trial'}
      path={'pages/index/index'}
      username={'gh_d9c1c80f9bfa'}
    >
      <View
        style={{ display: 'inline-block', padding: 10, background: '#fafafa' }}
      >
        Trial version jump
      </View>
    </OpenWeapp>
  </Space>
);
```

### Response
#### Success Response (N/A - Component)
N/A

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

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

### Icon Component API

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/icon

Documentation for the Icon component, detailing its properties, usage, and examples.

```APIDOC
## Icon 图标

以统一的图标集提供常用功能与业务图标，支持尺寸与颜色自定义，部分加载类图标自动旋转。

### Description

Provides common functional and business icons with a unified icon set, supporting custom size and color. Some loading-related icons rotate automatically.

### Method

N/A (Component Documentation)

### Endpoint

N/A (Component Documentation)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```javascript
import React from 'react';
import { Icon, Space, PartTitle, showToast } from '@kqinfo/ui';

const renderItem = (name) => (
  <Space
    justify={'center'}
    size={'10px'}
    alignItems={'center'}
    vertical
    style={{
      background: '#fff',
      width: '30vw',
      height: '30vw',
      border: '1px solid #eee',
    }}
  >
    <Icon name={name} size={40} color={'#333'} />
    {name}
  </Space>
);

const names = [
  'kq-search',
  'kq-loading',
  'kq-down',
  'kq-loading2',
  'kq-yes',
  'kq-add',
  'kq-clear',
  'kq-clear2',
  'kq-notice',
  'kq-zengjia',
  'kq-right',
  'kq-tip',
  'kq-jianshao',
  'kq-xingxing',
  'kq-xiangji',
  'kq-voice',
  'kq-biaoqing',
  'kq-album',
  'kq-jia',
  'kq-filter',
  'kq-left',
  'kq-mobile',
  'kq-keshi',
  'kq-yiyuan',
  'kq-home',
  'kq-tongzhi',
  'kq-shuaxin',
  'kq-shoucang',
  'kq-zan',
  'kq-eye',
  'kq-weixin',
  'kq-yisheng',
  'kq-chuangzuo',
  'kq-zhibo',
  'kq-rili',
  'kq-jiankang',
  'kq-kanjian',
  'kq-bukanjian',
  'kq-zhuanlan',
  'kq-shijian',
  'kq-zan1',
  'kq-shoucang1',
  'kq-zhibozhong',
  'kq-bofang',
  'kq-zanting',
  'kq-caidan',
  'kq-time',
  'kq-shouye',
  'kq-tag',
  'kq-fenge',
  'kq-zhengque',
  'kq-sousuo',
  'kq-xihuan',
  'kq-buxihuan',
  'kq-erweima',
  'kq-shang',
  'kq-xia',
  'kq-shanchu',
  'kq-dizhi',
  'kq-zuo',
  'kq-you',
  'kq-shangjiantou',
  'kq-xiajiantou',
  'kq-fuzhi',
  'kq-xiay',
  'kq-shangy',
  'kq-img',
  'kq-tel',
  'kq-video',
];

export default () => (
  <Space vertical size={'10px'} alignItems={'flex-start'}>
    <PartTitle>基本用法</PartTitle>
    <Space flexWrap={'wrap'}>{names.map(renderItem)}</Space>

    <PartTitle>自定义大小与颜色</PartTitle>
    <Space size={'16px'}>
      <Icon name={'kq-search'} size={40} color={'#2f54eb'} />
      <Icon name={'kq-yes'} size={'32px'} color={'#52c41a'} />
      <Icon name={'kq-clear'} size={'1.6em'} color={'#d4380d'} />
    </Space>

    <PartTitle>加载图标自动旋转</PartTitle>
    <Space size={'16px'}>
      <Icon name={'kq-loading'} size={40} color={'#1890ff'} />
      <Icon name={'kq-loading2'} size={40} color={'#fa8c16'} />
    </Space>

    <PartTitle>事件与可点击</PartTitle>
    <Space>
      <Icon
        name={'kq-shuaxin'}
        size={36}
        color={'#595959'}
        onTap={() => showToast({ title: '点击图标' })}
      />
    </Space>
  </Space>
);
```

### Response

#### Success Response (200)

N/A (Component Documentation)

#### Response Example

N/A (Component Documentation)

### Usage Instructions

*   `size`: Supports `number` (rpx) or string dimensions (e.g., `px`, `em`); defaults to `fontSize` value. When providing a number, please input in rpx. Refer to `src/icon/index.tsx:14-21`, `src/icon/index.tsx:24-27`.
*   `color`: Icon color.
*   `name`: Icon name, taking values from the icon set keys.
*   Loading icons (`kq-loading`, `kq-loading2`) rotate automatically. Refer to `src/icon/index.tsx:39-47`.
*   Inherits `ViewProps`, allowing for `style`, `className`, `onTap`, and other events and styles.

### API

| Property Name | Description | Type | Default Value |
|---|---|---|---|
| size | Icon size, defaults to the value of fontSize. If a number is provided, please input in rpx. | `string | number` | `-` |
| className | - | `string` | `-` |
| style | - | `CSSProperties` | `-` |
| name | - | `IconFontNames` | `(Required)` |
| color | - | `string | string[]` | `-` |
```

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

### OpenWeapp: Jump to Mini Programs (React)

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/open-weapp

Demonstrates how to use the OpenWeapp component to navigate to different mini-programs. It supports jumping to the current mini-program, other mini-programs, and specifying the environment version. The component requires initialization with the WeChat SDK on the web. The children prop only supports inline styles.

```jsx
import React from 'react';
import { Space, PartTitle, OpenWeapp } from '@kqinfo/ui';
import { View } from 'remax/one';


export default () => (
  <Space vertical size={'10px'} alignItems={'flex-start'}>
    <PartTitle>一般用法</PartTitle>
    <OpenWeapp
      onLaunch={() => alert('模拟成功')}
      path={'pages/index/index'}
      username={'gh_d9c1c80f9bfa'}
    >
      <View style={{ width: 100, height: 100, background: '#eee' }}>打开</View>
    </OpenWeapp>


    <PartTitle>跳转当前小程序页面（微信端）</PartTitle>
    <OpenWeapp onLaunch={() => alert('跳转成功')} path={'pages/home/index'}>
      <View
        style={{ display: 'inline-block', padding: 10, background: '#fafafa' }}
      >
        当前小程序内跳转
      </View>
    </OpenWeapp>


    <PartTitle>跳转其他小程序（微信端）</PartTitle>
    <OpenWeapp
      appId={'wx1234567890abcdef'}
      path={'pages/entry/index'}
      onLaunch={() => alert('跳转其他小程序成功')}
    >
      <View
        style={{ display: 'inline-block', padding: 10, background: '#fafafa' }}
      >
        跳转其他小程序
      </View>
    </OpenWeapp>


    <PartTitle>设置环境版本</PartTitle>
    <OpenWeapp
      envVersion={'trial'}
      path={'pages/index/index'}
      username={'gh_d9c1c80f9bfa'}
    >
      <View
        style={{ display: 'inline-block', padding: 10, background: '#fafafa' }}
      >
        体验版跳转
      </View>
    </OpenWeapp>
  </Space>
);

```

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

### Tile Component Usage Example - React

Source: https://chuauth.cqkqinfo.com/kq-ui/components/layout/tile

Demonstrates various ways to use the Tile component from '@kqinfo/ui' in a React application. It showcases different configurations for titles, subtitles, tags, sizes, background colors, and image placements, suitable for different entry point scenarios.

```jsx
import React from 'react';
import { Tile, Space, PartTitle } from '@kqinfo/ui';


export default () => {
  return (
    <Space vertical size={'10px'}>
      <PartTitle>一般用法</PartTitle>
      <Space size={'10px'} alignItems="stretch">
        <Tile
          title={'预约挂号'}
          tag={'热门推荐'}
          light
          size={'large'}
          vertical
          backgroundColor={'#5686e9'}
          image={
            'https://smp.med.gzh365.com/views/fe-his-app/images/home/yygh-old.png'
          }
        />
        <Space size={'10px'} vertical flex={1}>
          <Tile
            title={'门诊缴费'}
            light
            backgroundColor={'#ebaa57'}
            image={
              'https://smp.med.gzh365.com/views/fe-his-app/images/home/mzjf-old.png'
            }
          />
          <Tile
            title={'住院缴费'}
            light
            backgroundColor={'#EA7C62'}
            image={
              'https://smp.med.gzh365.com/views/fe-his-app/images/home/zyyj-old.png'
            }
          />
        </Space>
      </Space>
      <PartTitle>子标题</PartTitle>
      <Space size={'10px'} alignItems="stretch">
        <Tile
          image={`https://smp.med.gzh365.com/views/fe-his-app/images/home/doctor-old.png`}
          title={'凯小桥|主治医生'}
          subtitle={'心脑血管科'}
          size={'large'}
          tag={'历史医生'}
          backgroundColor={'#5686E9'}
          vertical
          light
        />
        <Tile
          image={`https://smp.med.gzh365.com/views/fe-his-app/images/home/dept-old.png`}
          title={'心脑血管疾病科'}
          subtitle={'冠心病、心绞痛'}
          size={'large'}
          tag={'历史科室'}
          backgroundColor={'#00B8A9'}
          vertical
          light
        />
      </Space>
      <PartTitle>列表用法</PartTitle>
      <Space vertical size={'10px'}>
        <Tile
          title={'预约挂号'}
          size={'small'}
          image={
            'https://smp.med.gzh365.com/views/fe-his-app/images/home/yygh-old.png'
          }
        />
        <Tile
          title={'报告查询'}
          size={'small'}
          image={
            'https://smp.med.gzh365.com/views/fe-his-app/images/home/bgcx-old.png'
          }
        />
      </Space>
      <PartTitle>自定义颜色与非白字</PartTitle>
      <Space size={'10px'} alignItems="stretch">
        <Tile
          title={'健康百科'}
          subtitle={'文章与科普'}
          backgroundColor={'#F0F2F5'}
          image={
            'https://smp.med.gzh365.com/views/fe-his-app/images/home/doctor-old.png'
          }
        />
        <Tile
          title={'在线客服'}
          backgroundColor={'#E6FFFB'}
          image={
            'https://smp.med.gzh365.com/views/fe-his-app/images/home/dept-old.png'
          }
        />
      </Space>
    </Space>
  );
};
```

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

### PartTitle Component API

Source: https://chuauth.cqkqinfo.com/kq-ui/components/general/part-title

Documentation for the PartTitle component, including its properties, usage examples, and API details.

```APIDOC
## PartTitle Component

### Description

A component used to display section titles with various styling and functional options.

### Method

N/A (Component Documentation)

### Endpoint

N/A (Component Documentation)

### Parameters

#### Props

- **required** (boolean) - Optional - Displays a required asterisk.
- **bold** (boolean) - Optional - Makes the text bold. Defaults to `true`.
- **className** (string) - Optional - Custom CSS class name.
- **full** (boolean) - Optional - Fills the font color.
- **offsetX** (number) - Optional - Left offset in rpx units.
- **elderly** (boolean) - Optional - Enables elderly mode, increasing the size.
- **action** (ReactNode) - Optional - Action element to display on the right side of the title.
- **style** (CSSProperties) - Optional - Inline styles for the component.
- **round** (boolean) - Optional - Applies rounded corners.

### Request Example

```javascript
import React from 'react';
import { Space, PartTitle, Button } from '@kqinfo/ui';

export default () => (
  <Space vertical size={'10px'} alignItems={'stretch'}>
    <PartTitle>General Usage</PartTitle>
    <PartTitle required>Required</PartTitle>
    <PartTitle required bold={false}>
      Required Light Font
    </PartTitle>
    <PartTitle required bold={false} full>
      Filled Font Color
    </PartTitle>
    <PartTitle required bold={false} round>
      Rounded Corners
    </PartTitle>
    <PartTitle
      required
      bold={false}
      full
      action={<Button size={'action'}>Action</Button>}
    >
      Action Button
    </PartTitle>

    <PartTitle>Offset offsetX</PartTitle>
    <PartTitle offsetX={-20}>Shift Left 20rpx</PartTitle>
    <PartTitle offsetX={20}>Shift Right 20rpx</PartTitle>

    <PartTitle>Elderly Mode elderly</PartTitle>
    <PartTitle elderly>Elderly Mode Title</PartTitle>
  </Space>
);
```

### Response

#### Success Response (N/A for component)

- **N/A** (N/A) - N/A

#### Response Example

N/A (Component Documentation)
```

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

### F2 Bar Chart Example (React)

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-display/f2

Demonstrates how to create a basic bar chart using the F2 charting component from Kqinfo UI. It includes dynamic data updates and specific geometric configurations for intervals. Requires '@kqinfo/ui' and specific F2 modules.

```javascript
import React, { useEffect, useState } from 'react';
import { F2 } from '@kqinfo/ui';
// 按需加载柱状图几何
require('@antv/f2/lib/geom/interval');


const getData = () => [
  { genre: 'Sports', sold: parseInt(String(Math.random() * 100)) },
  { genre: 'Strategy', sold: parseInt(String(Math.random() * 100)) },
  { genre: 'Action', sold: parseInt(String(Math.random() * 100)) },
  { genre: 'Shooter', sold: parseInt(String(Math.random() * 100)) },
  { genre: 'Other', sold: parseInt(String(Math.random() * 100)) },
];


export default () => {
  const [data, setData] = useState(getData());
  useEffect(() => {
    const id = setInterval(() => setData(getData()), 2000);
    return () => clearInterval(id);
  }, []);
  return (
    <F2
      data={data}
      setChart={chart => {
        chart
          .interval()
          .position('genre*sold')
          .color('genre');
      }}
    />
  );
};

```

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

### Disabled InputLicenseKeyBoard Example

Source: https://chuauth.cqkqinfo.com/kq-ui/components/data-entry/input-license-key-board

Demonstrates how to disable the InputLicenseKeyBoard component using the `disabled` prop. A disabled input cannot be interacted with, providing a way to control user input based on application state.

```jsx
import React from 'react';
import { PartTitle, InputLicenseKeyBoard, Space } from '@kqinfo/ui';


export default () => (
  <Space vertical size={'8px'}>
    <PartTitle>禁用的</PartTitle>
    <InputLicenseKeyBoard placeholder="请输入车牌号码" disabled />
  </Space>
);
```