Git Product home page Git Product logo

tdesign-flutter's Introduction

TDesign Logo

TDesign Flutter技术栈组件库,适合在移动端项目中使用。

特性

  • 提供TDesign设计风格的Flutter UI组件库
  • 支持根据App设计风格定制主题
  • 提供常用Icon库,支持定制替换
  • 根据TDesign规范定义颜色组,可在TDColors中查看,方便适配TDesign规范的组件
  • 色值声明类可以添加默认颜色,实时查看色值默认显示效果

使用方法

  • 在pubbspec.yaml引入依赖。

    dependencies: tdesign_flutter: git: https://github.com/TDesignOteam/tdesign-flutter.git

  • 在文件头部引入:import 'package:tdesign_flutter/td_export.dart'; // 组件库相关的,只需要引入这个文件,里面暴露td前缀所有需要的类

  • 可通过json文件配置颜色/字体尺寸/字体样式/圆角/阴影等主题样式。通过TDTheme.of(context)或者TDTheme.defaultData()获取主题数据。建议组件都使用TDTheme.of(context)的,不需要跟随局部主题的组件,才可以使用TDTheme.defaultData()。

    颜色,字体,圆角等使用示例: TDTheme.of(context).brandNormalColor TDTheme.defaultData().fontM

  • TDesign的Icon不跟随主题,都是ttf格式:

    使用示例: TDIcon(TDIcons.activity)

  • 使用示例:example/lib/tdesign/page

开发规范

  • 组件命名规范:以TD为前缀,组件名称、API名称参考TDesign现有组件和API命名,可以根据flutter原生Widget的特点进行修改。组件API以满足设计要求和使用为准,可根据flutter特点做精简或定制。
  • 组件库用到的所有色值、圆角、字体字号等样式属性需全部定义在主题中。
  • 代码规范遵循腾讯Dart代码规范。
  • 对于系统原有组件,如Text,Image等,应兼容系统原组件功能,只能扩展,不能阉割,以免业务需要使用系统功能时,必须放弃TDesign控件。
  • 示例页面尽量使用ExampleWidget+ExampleItem组合,在ExampleItem的desc写明示例描述;页面写完后,在main.dart中将页面注册进examplePageList即可。

其他技术栈实现

开源协议

TDesign 遵循 MIT 协议

tdesign-flutter's People

Contributors

consonluo avatar luozf12345 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.