TinyNG 是基于 Angular + TypeScript 的前端 UI 组件库,旨在为开发人员带来更高效的开发体验和统一的视觉交互风格。TinyNG 已经在华为内部使用四年,支撑数百个企业产品,拥有强大的稳定性和可靠性。现在,我们将TinyNG开源,让更多的开发人员能够体验它所带来的惊喜和效率提升。如果您正在寻找一款 Angular UI组件库,我们真诚地邀请您来尝试使用TinyNG,并享受它所带来的卓越体验和无限可能。同时,我们也期待您的反馈和建议,让 TinyNG 变得更加完善和易用。我们相信,开源后的 TinyNG 将会得到更多的注重和关注,并且会有更多的人参与其中,为它的发展和壮大做出更大的贡献。欢迎体验TinyNG !
组件多
TinyNG 包含了丰富的用户界面组件,非常易于集成和使用。目前,TinyNG 已经开源了 70 多个基础组件,并将逐步开源 100 多个组件,涵盖了企业级全场景,可以满足各种不同领域的需求。
每个组件都提供了详细的功能介绍和示例,初学者也可以轻松地理解和使用。此外,我们致力于不断完善和改进组件,以满足开发者日益增长的需求。
主题灵活
TinyNG 可以根据业务需求快速切换主题风格,非常灵活方便;也可以轻松打造独具特色的主题风格,提高开发效率。
内置主题
TinyNG 首创零配置使用默认主题,无需手动写入加载 theme-default.css 的代码,从而简化了使用流程。此外,TinyNG还为用户提供了内置的四套主题,可以根据实际设计需求进行自由切换。这些主题包含丰富的颜色和样式,满足了各种不同场景下的设计要求,使页面设计更加美观大方。
theme-blue.
css theme-green.
css theme-purple.
css theme-red.css
自定义主题
业内传统的组件库一般采用 Less/Sass 作为主题,需要编译后才能使用。这不仅增加了开发者的工作量,还侵入了业务项目的编译配置,给项目带来了不必要的麻烦。TinyNG采用了全新的方式,使用 CSS Var 自定义主题,免编译主题,让主题定制更加便捷;同时也支持 JavaScript 在运行时更改变量。CSS Var 主题不仅简单易用,还可以让开发者更加专注于业务逻辑的实现。另外,TinyNG 还支持在 JavaScript 代码中指定一个品牌色,来快速创建一套自定义主题,这样用户不需要自己编写复杂的主题样式,最轻松实现主题的个性化定制。
主题配置平台
TinyNG 拥有一款强大的主题配置平台,可以让主题定制变得更加简单和直观。通过所见即所得的方式,用户可以轻松编译主题色、场景色、组件色(颜色、字体、边框、阴影)等,实现个性化的主题定制,让项目更加美观和独特。除此之外,主题配置平台还提供了一键发布到 npmjs.org 的功能,让用户可以更加方便地分享和使用自己定制的主题。
微组件
TinyNG 的微组件具有单组件独立版本号管理的特点,每个组件都可以单独安装或升级,这使得组件的管理更加灵活和方便。如果您使用了多个组件,只需要升级其中一个,就能够免去全量测试,提高开发效率和稳定性。
性能超高
TinyNG 的组件库涉及到海量数据的组件(如 Select、Tree、Table 等),都已经内置虚拟滚动功能,可以保持丝滑稳定的用户体验。这一特性极大地提升了组件的性能和响应速度,使得高负载的应用程序也能够轻松运行。虚拟滚动是一种优化技术,它只在屏幕上显示当前可见的部分数据,而不是将所有数据一次性加载到页面中。这样可以避免大量的 DOM 操作,减少页面的渲染时间,从而提高了页面的性能和响应速度。
除此之外,TinyNG 的组件库还支持高性能 OnPush 模式,这意味着当组件的输入属性发生变化时,组件只会在需要更新时才重新渲染,从而避免了不必要的 DOM 操作,进一步提高了组件库的性能和响应速度。
企业级安全
企业级安全是我们一直以来的核心关注点,我们致力于保障客户的信息安全,所有接口杜绝XSS攻击,让您百分之百放心。我们的安全技术团队不断更新升级,采用最先进的技术手段,为您的数据保驾护航。
国际化
在国际化方面,TinyNG 不仅提供了五种常用语言,还支持自定义新语言,以满足不同客户的需求。TinyNG 可以适应各种语言环境,让您的用户可以用自己熟悉的语言使用您的产品,提高用户体验和满意度。
开箱即用
TinyNG 采用开箱即用的设计,让您能够立即开始使用。详尽而易于理解的文档示例,让您能够轻松上手,快速掌握产品的使用方式。
TinyNG 提供了 CLI 脚手架工具,只需一键项目初始化,让您可以快速搭建项目。
同步升级
同时,我们与 Angular 保持同步升级,TinyNG 支持所有 Angular 活跃版。
继承
TinyNG 采用面向对象的继承,可以轻松地扩展基础组件的功能,节省代码的编写,使得应用程序更加容易维护和管理。例如:所有组件都继承自TiBaseComponent 获得 id 相关功能,所有表单组件都继承自 TiFormComponent 免去编写 Angular 表单相关函数。
组合
TinyNG 采用组合模式,通过自由组合各种基础组件和自定义组件,来实现所需的复杂组件。每个基础组件都可以根据需要进行配置和自定义,以适应不同场景的需求。例如:Select 组件,就是由不同层次的大小组件组合而成。
面向对象
我们在设计 TinyNG 的时候采用了面向对象的架构,这意味着我们的代码具有更低的重复率,远远超过其他竞争对手(例如谷歌等)一个数量级。我们相信,面向对象编程是编写可复用高质量代码的关键,它可以更加灵活的复用代码,从而提高整个项目的可维护性和可扩展性,更加高效地实现功能和解决问题。
总之,我们为 TinyNG 注入了我们的心血和热情,希望能够为广大开发者提供便捷、高效、可靠的组件解决方案。TinyNG 作为一款易用、高效的开源组件库,已经准备好在各种应用场景中展现其杰出的性能和功能。我们期待更多的开发者、设计师、产品经理以及爱好者加入我们的行列,一起推进这个组件库的发展,共同打磨出更加完善、优秀的产品,为用户创造更好的体验和价值。现在就加入我们,体验 TinyNG 带来的乐趣吧!
其他说明
目前OpenTiny项目已经开源啦!OpenTiny 是一套华为云出品的企业级组件库解决方案,适配 PC 端 / 移动端等多端,涵盖 Vue2 / Vue3 / Angular 多技术栈,拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具,可帮助开发者高效开发 Web 应用。如果你对跨端、跨框架的OpenTiny项目 感兴趣,欢迎参与到OpenTiny的开源社区中来,一起将它建设得更好!
对于OpenTiny开源项目,欢迎直接添加下小助手微信:opentiny-official,有需要也可以一起交流前端技术,一起玩开源。
OpenTiny 官网:https://opentiny.design/
OpenTiny 代码仓库:https://github.com/opentiny/
Vue 组件库:https://github.com/opentiny/tiny-vue(欢迎 Star)
Angluar组件库:https://github.com/opentiny/ng(欢迎 Star)
CLI工具:https://github.com/opentiny/tiny-cli(欢迎 Star)
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net