open-index/open-npm huggingface dataset:
npm package: @lego-mobile/avatar
Description: lego-avatar 头像
Latest version: 0.1.1

# Avatar 头像

用于展示用户头像

## 安装

```sh
npm install @lego-mobile/avatar --save
# or
yarn add @lego-mobile/avatar
```

## 依赖

* @lego-mobile/lego-style
* @lego-mobile/lego-icon-svg

* 组件依赖的样式文件（仅按需引用时需要)

```less
@import '~@lego-mobile/avatar/lib/style/index.less';
```

## 基本使用

<code hideActions='["CSB", "EXTERNAL"]' src="./docs/demo-1.tsx" />

## API

|参数|说明|类型|默认值|
|----|----|----|-----|
|prefixCls|自定义class前缀|string|`lego`|
|classname|自定义class|string|-|
|style|自定义style|object|-|
|size|内置默认头像尺寸|[`xl`, `lg`, `md`, `sm`]|`md`|
|circle|是否圆角头像|bool|false|
|text|文本类型头像|string|-|
|image|自定义头像|string|-|
npm package: @lego-mobile/customer-card
Description: customer-card 客户卡片
Latest version: 0.1.1

# CustomerCard - 客户卡片

客户信息卡片。

## 安装

```sh
npm install @lego-mobile/customer-card --save
# or
yarn add @lego-mobile/customer-card
```

### 规则

- 客户信息卡片
  - 基本信息：客户经济号、客户名称、客户头像（可选）
  - 自定义模块，如资产信息等
- 头部信息
- 底部信息

## 代码演示

### 基本使用

<code hideActions='["CSB", "EXTERNAL"]' src="./docs/demo-1.tsx" />

### 基金投顾-潜客列表

<code hideActions='["CSB", "EXTERNAL"]' src="./docs/demo-2.tsx" />

### 基金投顾-断点线索

<code hideActions='["CSB", "EXTERNAL"]' src="./docs/demo-3.tsx" />

### 售后服务-产品报告

<code hideActions='["CSB", "EXTERNAL"]' src="./docs/demo-4.tsx" />

### API

| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
|prefixCls|类名前缀|`String`|`lego`|
|classnames|自定义类名|`String`|''|
|basic|基础卡片|`boolean`|`false`|
|custId|客户号|`String`|''|
|custName|客户姓名|`String`|''|
|avatar|是否需要展示客户头像|`ReactNode|boolean`|`false`|
|labels|客户标签|`ReactNode`|`null`|
|onClick|客户信息区域点击事件|`Function`|-|
|header|自定义顶部信息|`ReactNode`|`null`|
|footer|自定义底部信息|`ReactNode`|`null`|
|extra|卡片右上角的操作区域|`ReactNode`|`null`|
npm package: @lego-mobile/icon
Description: 语义化的矢量图形。
Latest version: 0.0.3

# Icon

语义化的矢量图形。

## 安装

```sh
npm install @lego-mobile/icon --save
# or
yarn add @lego-mobile/icon
```

### 基本使用

通过 @lego-mobile/icon 引用 `Icon` 组件，不同主题的 `Icon` 组件名为图标名加主题做为后缀。

<code src="./docs/demo-1.tsx" />

### 使用 icon-font

通过设置 iconFontUrl，使用组件。

<!-- <code src="./docs/demo-2.tsx" /> -->

### 使用案例

自定义Icon图标，通过svg传入Component。

聊TA首页快捷入口。

<!-- <code src="./docs/demo-3.tsx" /> -->

## API

| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| prefixCls | string | 'lego-icon' | 类名前缀 |
| classname | string | '' | 自定义类名 |
| style | string | '' | 自定义样式 |
| theme | string | 'default' | 主题，可选值 `default`、`primary`、`success`、`warning`、`danger` |
| size | string | 'md' | 大小，可选值 `sm`、`md`、`lg`、`xl` |
| type | string | - | 使用icon font时传入type |
| iconFontUrl | string | - | `iconFontUrl` 地址 |
| kind | string | - | 内置 icon 类型，可选值 `''`、`result`、`avatar`、`customer`、`product` |
| component | React.ComponentType&lt;React.SVGProps&lt;SVGSVGElement&gt;&gt; | - | 本地svg文件 |

## 自定义 Iconfont 图标

参照 `@ant-design/icons`，提供 `createFromIconfont` 方法，方便开发者调用在 [iconfont.cn](iconfont.cn) 上自行管理的图标。

其本质上是组件在渲染前会自动引入 `iconfont.cn` 项目中的图标符号集，并且创建了一个 `<use>` 标签来渲染图标的组件。

详见 [iconfont.cn 使用帮助](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code) 查看如何生成symbol代码的 js 地址。

```jsx | pure
import Icon from '@lego-mobile/icon';

const iconFontUrl = '//at.alicdn.com/t/font_231705_2jvwx00c2ym.js';

ReactDOM.render(
  <div className="grid">
    <Icon type="eclipse" iconFontUrl={iconFontUrl} />
    <Icon type="up" iconFontUrl={iconFontUrl} />
    <Icon type="left" iconFontUrl={iconFontUrl} />
  </div>
, mountNode);
```

## 自定义 SVG 图标

可以通过配置 [svgr](https://github.com/smooth-code/svgr) 来将 svg 图标作为 React 组件导入。

本示例以 webpack 为参考，使用 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来实现，其他实现方式请参阅 [svgr 文档](https://www.smooth-code.com/open-source/svgr/docs/getting-started/)。

```js | pure
// webpack.config.js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
},
```

```jsx | pure
import Icon from '@lego-mobile/icon';
import { ReactComponent as YourSvg } from 'path/to/yourSvg.svg'; // path to your '*.svg' file.

ReactDOM.render(<Icon component={YourSvg} />, mountNode);
```
npm package: @lego-mobile/media-card
Description: ## Get Started
Latest version: 0.1.0

# Your Package

## Get Started

按开发环境的要求，运行和调试项目

运行和调试组件

```
pnpm run dev
```

运行测试用例

```
pnpm run test
```

按照社区规范和最佳实践，生成构建产物

```
pnpm run build
```

继续创建更多项目要素

```
pnpm run new
```
npm package: @lego-mobile/nav-bar
Description: 位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。
Latest version: 0.0.2

# NavBar 标签栏

位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。

### 规则

- 可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。
- 可在导航栏中使用 SegmentedControl 对内容进行层级划分。
- 避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了；如果已经有了 SegmentedControl ，一般只搭配一个『返回按钮』或者『当前视图的控件』。
- 为图标和文字控件，提供更大的点击热区。

## 安装

```sh
npm install @lego-mobile/nav-bar --save
# or
yarn add @lego-mobile/nav-bar
```

## 代码演示

### 基本使用

<code hideActions='["CSB", "EXTERNAL"]' src="./docs/demo-1.tsx" />

## API

属性 | 说明 | 类型 | 默认值
----|-----|------|------
| mode   | 模式   | string |  'dark' enum{'dark', 'light'} |
| search   | search-bar，搜索  | boolean |  fasle |
| icon   | 出现在最左边的图标占位符  | ReactNode |  - |
| leftContent   | 导航左边内容      | any |    无  |
| rightContent   | 导航右边内容      | any |    无  |
| onLeftClick   | 导航左边点击回调      | (e: Object): void |    无  |

若为搜索框，请移步参照搜索框 API。