SolidMatrix.SolidBlazor

设计目标

SolidMatrix.SolidBlazor 旨在设计一款基于Blazor，用于非流式布局界面开发的的UI框架

HTML 与 CSS，为网页设计而生。 网页天然是流式布局的。但流式布局在大多数情况下，不适合用于应用界面的开发。 CSS3的新特性，让更多布局形式有了更好的操作性。 SolidMatrix.SolidBalzor旨在开发一套组件，以弹性布局优先，同时兼顾固定布局，流式布局。 同时，尽可能提供更大的灵活性与方便，兼顾其自适应与自响应的能力。

设计原则

  • flex优先
    布局元素都将优先使用Flex特性。 Flex可以实现横向和纵向的栈式布局Stack Layout。 对于网格布局Grid Layout，CSS3最新特性grid将提供很大的便利性，但其尚未获得普遍的支持。 因此依然使用Flex特性来实现网格布局。
  • rem 与 em 单位优先
    区别于使用固定的长度单位，如与设备关联的px或者与现实度量衡关联的 mm, cm 等，rem 与 em 具有更好的自适应能力。在不同的设备，或全局统一调整框架的尺寸时，更好的便利性。
  • line-height 优于 height
  • css variable 优先

抽象组件

基础组件

  • SolidBlank: SolidComponentBase
    空元素
  • SolidFlexContainer: SolidFlexContainerBase
    弹性布局；Container
  • SolidFlexItem: SolidFlexItemBase
    弹性布局；Item
  • SolidFlexConjoint: SolidFlexConjointBase
    弹性布局；同为Container 和 Item
  • SolidStack: SolidFlexConjoint
    弹性布局；栈式布局组件。 用于纵向或者横向布局元素。
  • SolidGrid: SolidFlexConjoint
    弹性布局；网格布局组件
  • SolidPane: SolidFlexConjoint
    弹性布局；最常用的组件组件，默认 flex-direction: column flex-wrap: nowrap justify-content: flex-start align-items: stretch flex: 1 1 0% align-self: auto
  • SolidFixed
    固定布局；
  • SolidFlow
    流式布局：

UI组件