@gzbapp/components v1.3.5
name: '@gzbapp/components'
@gzbapp/components
是严格根据 SAPP UI 规范定制的一套组件库,主要用于工作宝应用前台。
SAPP UI 规范定制2.0-更新于2023-05
特点
- 组件高度自治, 业务解耦
- 支持深色模式
- 适配移动端和桌面端
- 支持多语言
安装
$ yarn add @gzbapp/components
因为 @gzbapp/components SAPP 开发套件的一部分,也可以通过 @gzbapp/packages
安装:
$ yarn add @gzbapp/packages
配置
以 @gdjiami/cli 为例, package.json 配置如下:
{
// ...
"jm": {
"importPlugin": [
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
},
{
"libraryName": "@gzbapp/components",
"libraryDirectory": "es",
"style": "css"
}
]
}
}
我们使用了和 antd 一样的源代码组织结构,通过 babel-import-plugin 来实现按需导入代码和样式。
基本用法
初始化多语言
@gzbapp/components
依赖于 @gzbapp/i18n
来实现多语言,所以在入口处,需要进行多语言初始化:
/**
* App entry
*/
import ready from '@gzbapp/runtime'
import i18n, { initial, addAppBundles, AvailableLanguge } from '@gzbapp/i18n'
import { I18n } from '@gzbapp/components'
import React from 'react'
import ReactDOM from 'react-dom'
import App from '~/containers/App'
ready().then(async () => {
if (window.GZBSupport) {
// 初始化 i18n
await initial({
supportBackend: true,
backendName: 'demo',
})
// 加载组件库多语言
await I18n.initial()
// 本地多语言
addAppBundles({
[AvailableLanguge.zh]: {
hello: '你好',
},
[AvailableLanguge.tw]: {
hello: '你好',
},
[AvailableLanguge.en]: {
hello: 'hello',
},
})
ReactDOM.render(<App />, document.getElementById('root'), () => {
console.log('首次渲染完成, 耗时 ', performance.now() + ' ms')
})
}
})
组件使用
用法和 Antd 一样,具体组件用法见组件 API。
import React from 'react'
import { ScrollView, Button } from '@gzbapp/components'
export default function ButtonDemo() {
return (
<ScrollView className="jm-bg-main">
<div className="jm-btns">
<Button>hello</Button>
<Button loading>hello</Button>
<Button loading danger>
hello
</Button>
</div>
<Button type="block">hello</Button>
<Button type="block" danger>
hello
</Button>
<Button type="rounded">hello</Button>
<Button type="rounded" disabled>
hello
</Button>
<Button type="rounded" danger>
hello
</Button>
<Button type="rounded" danger loading>
hello
</Button>
</ScrollView>
)
}
因为导入语句会经过 babel-import-plugin
处理, 最终编译结果为:
import ScrollView from '@gzbapp/components/es/scroll-view'
import '@gzbapp/components/es/scroll-view/style/css'
import Button from '@gzbapp/components/es/button'
import '@gzbapp/components/es/button/style/css'
所以说 import-plugin 的配置非常重要,它可以确保按需导入样式和组件。
Typescript 类型
所有组件的 Typescript 类型声明都定义在导出变量 T 中, 例如你可以通过下面的代码导入 Avatar 组件的 AvatarProps
import { T } from '@gzbapp/components'
export interface MyProps extends T.Avatar.AvatarProps {}
SAPP UI 规范定制2.0 更新记录
- app-layout组件封装完成(20230706)
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
11 months ago
11 months ago
11 months ago
10 months ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
1 year ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago