[English](./README.md) | 简体中文

# @ray-js/research-bar

[![latest](https://img.shields.io/npm/v/@ray-js/research-bar/latest.svg)](https://www.npmjs.com/package/@ray-js/research-bar) [![download](https://img.shields.io/npm/dt/@ray-js/research-bar.svg)](https://www.npmjs.com/package/@ray-js/research-bar)

> 搜索栏，包含扫码功能

## 安装

```sh
$ npm install @ray-js/research-bar
// 或者
$ yarn add @ray-js/research-bar
```

## 开发

```sh
# 实时编译组件代码
yarn watch
# 实时编译Demo代码
yarn start:tuya
```

## 使用

```tsx
import Foo from '@ray-js/research-bar';

export default function Foo() {
  return (
    <View className={styles.view}>
      <DemoBlock title="基础用法" />
      <View className={styles.line}>
        <Template placeholder="输入搜索关键字" />
      </View>

      <View className={styles.line}>
        <Template placeholder="输入搜索关键字" round />
      </View>

      <DemoBlock title="深色背景" />
      <View className={styles.line}>
        <Template placeholder="输入搜索关键字" themeType="dark" />
      </View>

      <View className={styles.line}>
        <Template placeholder="输入搜索关键字" round themeType="dark" />
      </View>

      <DemoBlock title="扫码功能" />
      <View className={styles.line}>
        <Template showScan />
      </View>
    </View>
  );
}
```