样式处理及调试

前言

1. 无论做小程序端还是PC端，首先需要配置 整体框架，比如菜单栏，导航栏等
2. 然后再开发页面，将页面地址链接绑定到菜单栏中，通过菜单栏点击实现页面跳转
3. 接下来将 页面排版 好，再对单个 组件样式 进行调整

在可视化开发(微搭)中：

• 页面 整体框架 可以通过 页面布局 实现，微搭提供了多种页面布局方式

• 页面 内容排版 可以通过 布局组件 实现（普通容器、网格布局、卡片等...）

• 组件样式 可以通过以下几种方式实现：

  • 快捷配置

  • 组件CSS（支持AI生成）

  • 应用主题

  • 全局CSS

本篇文章将讲解如何自定义调整样式

页面布局

页面布局主要针对于 菜单栏 、顶部导航栏 、页面主体 这几块进行排版

平台提供了多种默认布局模式，您可以选择某个布局做二次调整，然后在页面中引用该布局即可

具体操作如下：

进入可视化应用后，切换到 页面布局

针对移动端，也有标准的底部tab栏布局方案：

调整好logo、title、菜单栏属性 后，在页面中引用布局即可

页面中引用 页面布局

页面排版

页面排版遵循的是从上往下，从左到右的原则

组件是页面组成的最小原子，组件的位置是按照该原则进行排列

举例：

下图页面中有两个 按钮 组件，他们按照从上往下，从左到右的顺序排列

如果期望将 按钮2 放到最右边，呈现两端对齐。这个需求按钮组件本身并不方便做到，我们推荐使用 普通容器 或 网格布局 进行实现

普通容器解决方案

通过普通容器组件，将按钮1和按钮2放置到普通容器中，并设置 端对齐 即可实现两端对齐

普通容器还有其他的对齐方式，比如居中、左对齐、右对齐、水平居中、上对齐、下对齐等等

网格布局解决方案

组件文档

网格布局比较容易理解，就是将页面分割为 行和列，类比excel单元格，最多可以分为12列，可以将组件拖入列单元格中，即可实现排版

因此在上述的需求中，只需要将按钮1和按钮2放置到列单元格中，即可实现平分的效果

当然这个效果并不是我们想要的，我们期望将按钮2能够贴着右边，因此我们可以设置第二个列对齐方式为 右对齐

对比

网格布局 更多是用在容器等分和排版顺序上

普通容器 就是一个盒子，没有自带任何样式，因此可以善用普通容器进行布局

因此在上述组件对齐的案例中，我们更推荐使用 普通容器 进行实现

样式

快捷配置

在 可视化应用 新建的组件中，右侧会有当前选中组件的配置模块，切换到样式模块，即可看到很多的快捷配置，详情参考 组件样式配置

快捷配置中，可以调整 文字、布局、边框、背景色、阴影、圆角、透明度、定位等属性，如果不清楚名词的含义可以 AI 咨询

如果您想实现动态样式，请参考 组件样式的动态控制

组件CSS

如果样式属性面板中的配置不能满足业务需求，您可以在组件的 CSS 编辑面板中，编写样式 API，通过样式选择器，实现组件样式的精细化控制

详情参考 自定义CSS

如何调试组件样式

首先介绍一些基础知识：

浏览器中的页面都是由组件堆叠起来的，每个组件可以指定 class 或者 id ，class 相当于组件的标签，可以多个，id 相当于组件的ID，只能有一个

CSS样式是通过 class 或者 id 来指定给哪个标签所在的组件提供样式

因此调整样式的顺序如下：

1. 找到要调整样式的组件 class 或者 id
   组件的class或id需要通过 浏览器调试工具 查找，您可以右键页面「检查」调出 浏览器调试工具

• 切换到 Elements 选项

• 点击 选中按钮，点击后按钮会高亮

• 选中 想要调试的组件，此时右侧组件树中该 组件的位置 会高亮，可以看到该节点的class或者id

如果没有定位到具体的组件，可以在右侧组件树中继续查找

2. 根据class编写css

如上图中的场景，我希望将选中的组件的字体颜色改为红色，则需要编写如下样式：

:scope .wd-tabs__item.is-selected {
    color: red;
}

.wd-tabs__item.is-selected 是当前选中div的class，因为看到该div下有样式 color: var(--wd-tabs-heder-item-color-selected) ，因此可以判定文字样式是由当前div控制的，因此可以通过该class修改样式

注意

若修改样式没有生效，大概率原因是找错了组件位置，可以多检查调试下

也可能是样式优先级不够，可以在编写的样式后加上 !important

:scope .wd-tabs__item.is-selected {
    color: red !important;
}

示例参考：顶部选项卡自定义样式

应用主题

如果您希望修改一些默认样式，比如主题色，字体大小，圆角，字体等，则可以使用 应用主题 统一调整，为了方便修改应用的整体样式，可视化中提供了多套不同的主题

详情请参考 应用主题

全局CSS

如果应用主题不够满足您的定制话，您可以编写全局CSS，全局修改统一属性

也可以全局定义 class样式，在组件中绑定class，从而实现样式的复用

参考文档：代码编辑器

调试案例

有时候我们希望在数据表格中，有些列是用标签组件展示，会更加显眼一些

但是当该列内容过长，超出标签宽度时，超出部分会自动显示为省略号

我们希望调大一些宽度，让他不要显示省略号，此时我们会按照如下思路操作：

1. 调整列宽为 150px
   此时发现并没有生效，但是 编辑区 的组件选中框(下图中组件选中的蓝色边框)宽度是变化了的，证明组件宽度确实改变了，但是没有解决内部组件的宽度，此时我们需要用 浏览器调试工具 进行调试，找到对应的组件，然后调整宽度

2. 打开浏览器调试工具，切换到 Elements 选项，点击 选中按钮，选中标签组件
   根据调试可以看到 width: 150px 是写进去了，但是没有生效，因此我们需要排查一下子组件是否有其他的样式有所影响

3. 在调试工具中展开组件，选中子组件
   可以发现在 编辑区 组件高亮了，但是它的宽度并没有撑满，所以在这里我们需要给他设置宽度，width:100%

可以看到当前子组件的class为 wd-tag-item ，因此我们可以通过这个类名来设置样式

4. 打开样式编辑器，在 CSS 中追加样式

:scope .wd-tag-item {
    width: 100%;
}

可以发现样式在编辑器中展示了，且在页面上生效了

但是发现这个文字的省略号还没去掉，因此我们需要继续排查，我们继续找子组件的样式

5. 选中下一层子组件，查看样式

这里我们看到该子组件有个 max-width: 60px ，这就是导致外层组件无论多宽，展示文字的宽度最宽只有 60px，因此我们调整该组件样式，class为 wd-tag__text

6. 打开样式编辑器，在 CSS 中继续添加样式

:scope .wd-tag__text {
    max-width: unset;
}

此时效果正确，因此整体解决方案为，追加如下CSS样式：

:scope .wd-tag-item {
    width: 100%;
}

:scope .wd-tag__text {
    max-width: unset;
}

解释

样式表中自带的 :root 样式是通过快捷设置中配置的样式生成而来