开源的腾讯tdesign源码

526 阅读1分钟

本文参加了由公众号@若川视野 发起的每周源码共读活动,点击了解详情一起参与。

tdesign是腾讯开源的企业级设计体系,包含桌面端,移动端,小程序端。 tdesign官网地址

技术选型:lesscss.org/

开发语言:www.typescriptlang.org/

源码地址

  1. github1s
  2. github

目录结构

├── examples // 组件文档与 demos
├── script // 构建代码
├── site // 站点代码
├── src // 组件代码
├── test // 测试文件

组件功能分类

// 基础
export * from './button';
export * from './icon';

// 布局
export * from './grid';
export * from './layout';
export * from './divider';
export * from './space';

// 导航
export * from './affix';
export * from './anchor';
export * from './breadcrumb';
export * from './dropdown';
export * from './menu';
export * from './pagination';
export * from './steps';
export * from './tabs';

// 输入
export * from './cascader';
export * from './checkbox';
export * from './color-picker';
export * from './date-picker';
export * from './form';
export * from './input-adornment';
export * from './input';
export * from './range-input';
export * from './input-number';
export * from './radio';
export * from './select';
export * from './slider';
export * from './switch';
export * from './tag-input';
export * from './select-input';
export * from './textarea';
export * from './transfer';
export * from './time-picker';
export * from './tree-select';

// 数据展示
export * from './avatar';
export * from './badge';
export * from './calendar';
export * from './card';
export * from './comment';
export * from './list';
export * from './loading';
export * from './progress';
export * from './skeleton';
export * from './swiper';
export * from './table';
export * from './tag';
export * from './tooltip';
export * from './tree';
export * from './collapse';

// 消息提醒

export * from './alert';
export * from './dialog';
export * from './drawer';
export * from './message';
export * from './notification';
export * from './popconfirm';
export * from './popup';
export * from './upload';

// 全局配置
export * from './config-provider';

举个button的目录例子,理解组件组成

├── style
├── button.ts
├── const.ts
├── index.ts
├── porps.ts
├── type.ts