打开MASA Blazor的正确姿势3.3：组件样式

一、关于组件样式的理解

1、框架和组件

前面我们已经说过，现代前端技术，无论是在框架层面（Blazor、Vue、React等），还是组件层面（Bootstrap、MASA Blazor、ElementUI、AntDesign等），本质上都是对HTML、CSS和JS的组合和封装。框架层面，主要解决HTML和JS的问题；而组件层面，在框架基础上，主要解决CSS样式问题（以上说法可能不全面，但大体是这个意思）。

2、组件样式

每套组件，都会在自己的审美标准上，定义一套CSS样式。这套样式的使用主要通过两种方式：一是组件商在定义组件时自己使用，并选择性的以组件属性的方式，暴露部分可定制的样式出来，使我们可以通过组件属性的方式，便捷的定制组件样式；二是我们也可以直接通过HTML原生元素的class属性，直接使用这套CSS样式。

3、快速掌握MASA Blazor组件样式的方法

如上所述，快速掌握一套新的组件样式的方式，一是掌握样式表中定义的常用样式，这些样式，我们可以直接在HTML原生标签上直接使用；二是掌握组件属性中，常用的样式属性。我觉得通过这两个方式，大概能快速掌握组件样式定义的80%左右范围。

4、补充：MASA Blazor中的Class和Style属性

在MASA Blazor的官方组件中，一般都有Class和Style属性（首字母大写），使用方法虽然和HTML元素的class/style差不多，但两者并不是同一个东西。官方组件中定义的Class/Style，本质上是组件内部通过[Parameter]标注的属性参数（此处指类的属性），接收到父组件传过来的Class/Style值后，在组件的内部使用。这个样式值可能使用在组件内部的div标签上，也可能用在p标签上，甚至是用在其它的官方自定义组件上。

 
 

二、掌握MASA Blazor样式表中的常用样式(class/Class中使用)

1、布局：MASA Blazor定义了两套布局样式，Flex弹性布局和Grid网格布局，这部分在后续章节单独说明。

 

2、颜色：MASA Blazor遵循MaterialDesign风格，定义了一套颜色样式，可用于定义背景颜色和文字颜色。

//基本用法：
<div class = "red"></div> //HTML原生标签上，定义红色背景
<div class = "red lighten-2"></div> //HTML原生标签上，定义红色背景亮两度
<span class = "red--text text--darken-1"></span> //HTML原生标签上，定义红色文本加深一度
<MCard Class="red green--text"></MCard> //MASA Blazor组件标签上，定义红色背景、绿色广西
<MButton Color="primary"></Button> //MASA Blazor组件标签上，定义预设主题色
  • 20个色系：
    • .red 红色
    • .pink 粉色
    • .purple 紫色
    • .deep-purple 深紫色
    • .indigo 蓝紫色
    • .blue 蓝色
    • .light 亮蓝色
    • .cyan 青色
    • .teal 蓝绿色
    • .green 绿色
    • .light-green 亮绿色
    • .lime 柠檬色
    • .yellow 黄色
    • .amber 琥珀色
    • .orange 橙色
    • .deep-orange 深橙色
    • .brown 棕色
    • .blue-grey 蓝灰色
    • .grey 灰色
    • .black 黑色
  • 色系标准色基础上，加深或减淡：
    • .lighten1~5 减淡5个等级
    • .darken1~4 加深4个等级
    • .accent1~4 突出4个等级（主要用于文字）
  • 预制主题色：
    • .primary 主色
    • .secondary 黑暗
    • .accent 着重
    • .info 信息
    • .success 成功
    • .warning 警告
    • .error 出错
    • .none 高亮

 

3、文字

  • 大小（支持响应式）：
    • .text-h1 h1标题
    • .text-h2 h2标题
    • .text-h3 h3标题
    • .text-h4 h4标题
    • .text-h5 h5标题
    • .text-h6 h6标题
    • .text-subtitle-1 副标题1
    • .text-subtitle-2 副标题2
    • .text-body-1 正文1
    • .text-body-2 正文2
    • .text-button 大写加大
    • .text-overline 大写加宽
    • .text-caption 加细
  • 装饰线：
    • .text-decoration-none 无装饰线
    • .text-decoration-line-through 删除线
    • .text-decoration-overline 上划线
    • .text-decoration-underline 下划线
  • 加粗变细：
    • .font-weight-black 加黑加粗
    • .font-weight-bold 明显加粗
    • .font-weight-medium 普通加粗
    • .font-weight-regular 正常
    • .font-weight-light 减淡
    • .font-weight-thin 变细
    • .font-italic 斜体
  • 透明度：
    • .text--primary 在深色主题中为100%透明度，在亮色主题中为87%透明度
    • .text--secondary 在深色主题中为70%透明度，在亮色主题中为60%透明度
    • .text--disabled 在深色主题中为50%透明度，在亮色主题中为38%透明度
  • 对齐（支持响应式）：
    • .text-left 左对齐
    • .text-center 居中
    • .text-right 右对齐
    • .text-justify 两端对齐，改变字与字之间的间距使得每行对齐
  • 大小字转换：
    • .text-lowercase 转为小写
    • .text-uppercase 转为大写
    • .text-capitalize 转为首字母大写
  • 其它：
    • .text-truncate 文本截断，需要在block或inline-block容器中
    • .text-no-wrap 防止文本换行

 

4、间距

  • 外边距：.m {l|r|t|b|x|y|a}-{0~16|n1~n16|auto}：
    • 如.ml-4 左外边距4个单位，1个单位等于4个像素
    • 如.mx-n2 左右水平方向外边距负2个单位
    • 如.ma-6 四边的外边距6个单位
    • 如.mx-auto 水平居中
  • 内边距：.p {l|r|t|b|x|y|a}-{0~16|n1~n16|auto}：
    • 内边距，使用方法和外边距一样

 

5、边框半径

  • 所有边角：.rounded-{0|sm|md|lg|xl|pill|circle} 无圆角、小圆角、中圆角、大圆角、加大圆角、药丸、圆形
    • 如.round-md或.round：中圆角
    • 如.round-circle：圆形
  • 指定边角：.rounded-{r|l|t|b|tl|tr|br|bl}-{0|sm|md|lg|xl|pill|circle} 指定边角
    • 如.round-l-sm 左上和左下小圆角
    • 如.round-tl-sm 左上小圆角

 

6、溢出：当子元素超过父元素容器的边界时，设置子元素的溢出效果

  • .overflow-auto 自动添加滚动条
  • .overflow-hidden 隐藏子元素的溢出内容
  • .overflow-visible 显示子元素的溢出内容
  • .overflow-{x|y}-{auto|hidden|visible} 指定X轴或Y轴的溢出效果

 

7、浮动（支持响应式）：

  • .float-left 向左浮动
  • .float-right 向右浮动
  • .float-start 向起点浮动
  • .float-end 向终点浮动
  • .float-none 无浮动

 
 

三、MASA Blazor组件属性中常用样式属性(属性中使用)

 

1、Class和Style样式：<div Class="red">...

  • 等效于class和style，虽然两者不是同一个东西

 

2、阴影（海拔）：<div Elevation="10">...

  • 值取0~24，值越大，阴影越大，离用户视觉越近。

 

3、边框大小类：

  • Dense：布尔值，降低组件高度，更加紧凑
  • Prominent：布尔值，增加组件高度，突出显示
  • Outlined：布尔值，背影透明薄边框
  • Rounded：布尔值，圆角
  • Shaped：布尔值，左上角和右下角圆角
  • Tile:布尔值，方形
  • Fab：布尔值，圆形
  • Border：枚举值，边框。Borders.Right/Borders.Left/Borders.Top/Borders.Bottom
  • Height：数值，高度
  • Weight：数值，宽度
  • MaxHeight/MinHeight：数值，最高/最小高度
  • MaxWidth/MinWidth：数值，最大/最小宽度

 

4、主题：

  • Light：布尔值，亮色主题
  • Dark：布尔值，深色主题
  • Color：颜色，十六进制或rgb()或rgba
  • TextColor：文本颜色，十六进制或rgb()或rgba

 

5、绝对定位：

  • Absolute：布尔值，开启绝对定位
  • Left：布尔值，与Absolute结合使用，靠左
  • Right：布尔值，与Absolute结合使用，靠右
  • Top：布尔值，与Absolute结合使用，靠上
  • Bottom：布尔值，与Absolute结合使用，靠下

 

6、过渡动画：<MMenu Transition="slide-x-transition">...

  • fab-transition：旋转过渡
  • fade-transition：淡入淡出
  • scale-transition：尺寸渐变伸缩
  • scroll-x-transition：自左向右滚动
  • scroll-x-reverse-transition：自右向左滚动
  • scroll-y-transition：自上而下滚动
  • scroll-y-reverse-transition：自下而上滚动
  • slide-x-transition：自左向右滑入
  • slide-x-reverse-transition：自右向左滑入
  • slide-y-transition：自上而下滑入
  • slide-y-reverse-transition：自下而上滑入
  • <ExpandTransition><MCard Show=true...></MCard></ExpandTransition>：特殊，是一个包裹组件，子元素隐藏显示时，延Y轴放大
  • <ExpandXTransition><MCard Show=true...></MCard></ExpandTransition>：特殊，是一个包裹组件，子元素隐藏显示时，延X轴放大

 

7、补充说明：①以上属性，并不是所有组件都适用。汇总的目的，是熟悉这些常用属性，这样在查询或使用一个组件时，大多数属性都已经熟悉，这样能够大大提高效率；②如果熟悉CSS，会感觉组件库的样式定义，比较凌乱，也会受限，如果无法满足要求，完全可以使用HTML和CSS手动定义组件。

 
 

posted @ 2023-02-13 18:13  functionMC  阅读(467)  评论(0)  编辑  收藏  举报