@netjoy/njoyd v1.0.2
背景
「组件化」一直是前端工程师绕不开的话题,不管是日常业务开发、封装业务组件,还是基础设施建设开发 UI 组件或基础组件;亦或者是 React
、Vue
、Angular
等 MV*框架,都是秉承着组件作为基础原子概念,所以可以肯定的是: 组件是下一代 web 技术的发展关键 。
但业界并没有对组件化有一个准确的定义,都是一些主观的意识,一般都是以程序模式设计思想里的“高内聚、低耦合、高扩展、可复用”的几个基本概念来描述,组件内部要保证逻辑的集中和完整,组件外部要提供可扩展性 api,并且独立性、简单可用性要保证。几个小的组件可层层嵌套,组合成一个大的组件,提供给外部使用,就像搭积木一样。
随着公司业务的不断增长,组件化除了为业务带来一致的设计语言和工作效率提升外,也为设计团队的产出和协作方式带来了影响和变化。UI 团队在进行需求设计的同时,前端团队也可逐步沉淀出一套适用于多平台、多业务的组件库,以此来提升设计和协同效率,并最终实现公司价值甚至商业价值。
介绍
NjoyDesign 是云想科技提供的一个企业级业务组件库,通过长期的业务沉淀和积累打造的高性能、稳定、高复用性的组件库,目前已经在公司创新业务线、短剧业务线上落地应用,预计将组件库涵盖组件业务场景整体提升 65%以上,部分组件提效 200%以上。
需要的环境
"antd": ">=4.0.0"
"react": ">=16.9.0"
"node": ">=16.18.0"
快速上手
安装
# 通过npm安装 $ npm install @nj/njoyd # 通过yarn安装 $ yarn install @nj/njoyd
使用组件
# 引入组件 $ import { Login, Preview } from '@nj/njoyd' # 引入样式 $ import '@nj/njoyd/dist/esm/njoyd.less'
定制主题
全局主题
在工程的
index.tsx
中添加全局主题配置,主题参数参考 Antdtheme、NjoydTheme。import { Config } from '@nj/njoyd'; Config.set({ theme: { colorPrimary: '#1677ff', }, });
import { Config, SearchInput } from '@nj/njoyd'; Config.set({ theme: { colorPrimary: '#1677ff', }, }); export default () => { return <SearchInput></SearchInput>; };
单个组件主题
在组件支持定制主题的前提下,使用
theme
传入主题参数配置单个组件主题,主题参数参考 Antdtheme、NjoydTheme。import { SearchInput } from '@nj/njoyd'; export default () => { return <SearchInput theme={{ colorPrimary: 'red' }}></SearchInput>; };
import { Config, SearchInput } from '@nj/njoyd'; export default () => { return <SearchInput theme={{ colorPrimary: 'red' }}></SearchInput>; };
AntdTheme
基于 Antd 主题定制 字段,挑选出部分进行兼容支持,允许用户进行单独定制,其他未支持的字段则使用
Antd
默认值,只是不支持单独定制。属性名 描述 类型 默认值 colorPrimary
品牌色是体现产品特性和传播理念最直观的视觉元素之一 string
#1677ff
borderRadius
基础组件的圆角大小,例如按钮、输入框、卡片等 number
6
colorError
失败按钮、错误状态提示( Result
)组件string
#ff4d4f
colorInfo
Alert
、Tag
、Progress
等组件都有用到该组梯度变量string
#1677ff
boxShadow
控制元素阴影样式 string
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
colorTextPlaceholder
控制占位文本的颜色 string
rgba(0, 0, 0, 0.25)
NjoydTheme
继承所有
AntdTheme
的属性属性名 描述 类型 默认值