# yr-panel-ui

> yr panel ui

Latest version **1.0.10** (published 2023-12-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install yr-panel-ui
pnpm add yr-panel-ui
yarn add yr-panel-ui
bun add yr-panel-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2023-12-13 |
| First published | 2023-02-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 秋田犬 |
| Maintainers | ysng |

## Links

- npm: https://www.npmjs.com/package/yr-panel-ui
- npm.io page: https://npm.io/package/yr-panel-ui

## Recent versions

- 1.0.10 (latest) — 2023-12-13
- 1.0.6 — 2023-09-19
- 1.0.5 — 2023-09-18
- 1.0.4 — 2023-09-18
- 1.0.3 — 2023-09-15
- 1.0.2 — 2023-09-14
- 1.0.1 — 2023-09-14
- 1.0.0 — 2023-09-14
- 0.0.3 — 2023-02-21
- 0.0.2 — 2023-02-21
- 0.0.1 — 2023-02-21

## README

# yr-panel-ui

猿人 UI 组件库

## 主题

#### 引入

```js
import { ThemeProvider } from 'yr-panel-ui'
```

#### 使用

```js
const theme = {
    Button: {
        // 背景色
        primaryColor: '#8D8D8D',
        plainColor: '#fff',
        steadyColor: '#464754',
        disableColor: '#E3E3E3',
        wordColor: 'rgba(0, 0, 0, 0)',
        // 文本颜色
        mainColor: '#B4E555',
        wordTextColor: '#555555', // 文字按钮
        plainBorderColor: '#B4E555',
        plainTextColor: '#B4E555',
        disableTextColor: '#C5C5C5'
    }
    // ...
}

// Your App
const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <YRButton>My Button</YRButton>
        </ThemeProvider>
    )
}
```

## 按钮

#### 引入

```js
import { YRButton } from 'yr-panel-ui'
```

#### 使用

```js
    // type决定按钮的颜色, 可以通过theme自定义
    <YRButton>default</YRButton> // 默认primary
    <YRButton type="primary">primary</YRButton>
    <YRButton type="steady">steady</YRButton>
    <YRButton type="plain">plain</YRButton>
    <YRButton type="disable">disable</YRButton>
    <YRButton type="word">word</YRButton>
```

## 对话框

#### 引入

```js
import { YRDialog } from 'yr-panel-ui'
```

#### 使用

```js
<YRDialog
    visible={visible} // 控制显示隐藏
    title={title} // 标题
    content={content} // 内容
    positiveText={positiveText} // 确定按钮文案
    negativeText={negativeText} // 取消按钮文案
    positiveClick={() => {}} // 确定事件处理
    negativeClick={() => {}} // 取消事件处理
/>
```

## 图片

#### 引入

```js
import { YRImage } from 'yr-panel-ui'
```

#### 使用

```js
// asset 展示本地存储图片
// defaultSource 加载失败时默认图
<YRImage style={{}} uri={''} defaultSource={''} asset />
```

## 图片区域选取

#### 引入

```js
import { ImageCrop } from 'yr-panel-ui'
```

#### 使用

```js
<YRImageCrop
    style={StyleSheet.absoluteFill}
    imgPath={imgPath}
    point={point}
    ref={imageCropRef}
    isEdit={isEdit}
    onResult={onResult}
/>
```

## Loading

#### 引入

```js
import { YRLoading } from 'yr-panel-ui'
```

#### 使用

```js
<YRLoading isShow={show} />
```

## 播放器

#### 引入

```js
import { YRPlayer } from 'yr-panel-ui'
```

#### 使用

```js
<YRPlayer ref={playerRef} deviceId={''} model={''} onSnapShot={() => {}} />
```

## 扫码

#### 引入

```js
import { YRQRScan } from 'yr-panel-ui'
```

#### 使用

```js
<YRQRScan startScan={startScan} style={StyleSheet.absoluteFill} onScanResult={(event) => {}} />
```

## 开关

#### 引入

```js
import { YRSwitch } from 'yr-panel-ui'
```

#### 使用

```js
<YRSwitch value={switchValue} onValueChange={(val) => {}}></YRSwitch>
```

## topbar

#### 引入

```js
import { yrToast } from 'yr-panel-ui'
```

#### 使用

```js
yrToast('message', 'topbar')
```

## 滚轮选择器

#### 引入

```js
import { YRWheel } from 'yr-panel-ui'
```

#### 使用

```js
<YRWheel
    style={{ height: w(150), width: w(168) }}
    itemStyle={{ textAlign: 'center' }}
    items={items}
    defaultIndex={defaultIndex}
    onChange={(i) => {
        console.log('i:', i)
    }}
/>
```

---
_Source: https://npm.io/package/yr-panel-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._