首页 文章

切换组件中的CSS框架

提问于
浏览
0

我正在使用Angular开发一个UI应用程序,我可以选择以下一个或多个CSS框架:

Bootstrap 4 Foundation Angular Material ng-bootstrap或ngx-bootstrap . 我可以购买的预制模板 . 许多其他人或新人......

是否有最佳实践来设计Angular应用程序,以便更容易切换到另一个不同的CSS框架?

我认为,一个选项是定义一个新的Feature模块,它将导入特定CSS Framework的所有控件,然后,我在其上编写一个包装器并在我的应用程序中使用它 .

例如,我可以将 md-button 与我的 custom-button 包装在模块的组件模板中,并在我的应用程序中使用它 .

这种方法是否有效或者我应遵循标准设计实践吗?

1 回答

  • 1

    你可以这样做,但在我看来,你在浪费你的时间 . 过去有多少次你改变了设计框架?可能永远不会 .

    组件的视图比低级组件(如按钮和输入)要多得多 . 所有的布局和响应都会影响视图的构成 . 例如,假设您使用了材料设计并将 md-button 包装在 my-custom-button 中 . 随着应用程序的成熟,您无疑将在容器周围添加填充或边距,保持这些控件使其外观和感觉更具实质性 . 这一天是在块上切换到新的设计模式,猜猜是什么?即使您可以快速更换这些按钮以获得新外观,但是您不需要使用自己的组件包装每个组件的开销 .

    更有意义的是为每个组件创建单独的模板 .

    假设您在Material中完成了整个应用程序,现在您想切换到New Hotness . 您首先会完成并重命名所有模板:

    login.component.html > login.component.material.html

    然后创建专门针对新框架的新模板:

    login.component.newhotness.html

    接下来,创建一个构建过程,该过程将根据某些配置在构建时交换 templateUrl . 使用此策略,您将能够轻松集成IonicNativeScript等技术,这些技术不会将HTML用于其视图,而是基于XML的完全不同的语法 .

    Key takeaways:

    • 不要使用您自己的变体包装现有库组件

    • 在单独的文件中创建组件模板

    • 当一天切换到新框架时,为每个组件创建新模板,并使用描述包含它的框架的名称定义旧模板

    • 获得报酬! :)

相关问题