样式

“样式”面板可让您自定义应用的外观和风格。您可以设置主题背景,选择微件变体,还可以创建自定义样式。

全局样式:一次为多个微件设置样式

使用主题背景设置应用级样式

“样式”标签顶部的主题背景选择器用于控制应用中微件的默认外观。Google 应用制作工具目前提供两种主题背景:

  • Material:用于实现 Material Design(Google 标准视觉风格)的主题背景。使用此主题背景可构建类似于 Google 收藏夹的应用(如 InboxKeep)。

  • Plain:更简单的主题背景,可提供常规外观和风格。您可以在简单主题背景的基础上打造自己独特的视觉风格。

使用 CSS 自定义微件

如果要调整 Material 微件或美化 Plain 主题背景,您可以通过编写自己的层叠样式表 (CSS) 来自定义微件。

Google 应用制作工具微件及其子组件内置了 CSS 类,它们具有 app- 前缀,后跟各自的名称。要更改微件的外观,请使用主题背景选择器下方的文本区域将您自己的 CSS 添加到这些类。示例:

/* Adds rounded corners to button widgets */
    .app-Button {
      border-radius: 10px;
    }

    /* Sets font size for rows in list panels */
    .app-ListPanelRow {
      font-size: 1.2em;
    }
    

您还可以使用所有 CSS 选择器为您的应用设置样式:

/* Turns off link underlines. */
    .app-Link:link {
      text-decoration: none;
    }

    /* Changes color of disabled buttons. */
    .app-Button[disabled] {
      background-image: none;
      background-color: white;
    }
    

针对不同屏幕尺寸设置样式

用户可能会通过屏幕或大或小的设备访问您的应用。您可以通过添加自适应设计来改善用户的应用体验;这种设计会根据屏幕尺寸(也称为屏幕分辨率)更改布局。

要根据不同的屏幕尺寸自动调整布局,请使用全局 CSS 中的媒体查询。如需了解自适应设计,请参阅自适应网页设计基础知识。如需查看示例,请参阅自适应布局网格

在页面编辑器中测试特定于尺寸的样式

要测试样式设置,您可以手动调整画布大小或者应用特定的屏幕分辨率。在页面编辑器中更改分辨率不会影响已发布的应用,并且其他开发者将不会看到更改。刷新页面即可将画布恢复为原始自定义尺寸。

要选择特定的屏幕分辨率,请在页面编辑器顶部点击“设备分辨率”(Device resolutions) devices

您可以在右上角看到画布的屏幕尺寸,除非您选择了自定义分辨率;如果您选择了“自定义”分辨率,自定义尺寸将位于“属性编辑器”内的尺寸值中。

管理屏幕分辨率

如需添加屏幕分辨率,请点击“设备分辨率”(Device resolutions) devices,然后点击添加分辨率 (Add resolution)。您也可以依次点击“设置”settingschevron_right应用设置chevron_right添加分辨率 (Add resolution)。

如需修改和删除屏幕分辨率,请转至“设置”settingschevron_right应用设置,然后找到视口分辨率 (Viewport resolutions) 部分。将光标指向您要修改或删除的分辨率,然后点击“修改”mode_edit 或“删除”delete

微件样式:为单个微件设置样式

微件主题背景

使用主题背景选择器可轻松为微件应用样式。选择一个微件,然后从操作栏的下拉列表内的一系列主题背景中进行选择。

主题背景选择器

Material 主题背景为大多数微件提供了多个变体。例如,面板微件具有形似一页白纸的 Paper 变体以及可在面板下方显示微件的 Transparent 变体等。

特定于微件的 CSS

“样式”标签具有可输入自定义 CSS 的文本区域,因此您可以根据具体规格调整选定微件的样式。微件样式也具有 .app- 前缀,后跟微件所在的页面的名称,其后是微件本身的名称。选定微件后,它会显示在自动填充弹出式窗口的顶部。

示例:

/* Changes color of SampleButton1 to yellow */
    .app-NewPage-SampleButton1 {
      background-image: none;
      background-color: yellow;
    }

    /* Sets font in SampleListPanel1's rows to bold */
    .app-NewPage-SampleListPanel1Row {
      font-weight: bold;
    }
    

自定义变体

您还可以使用 Google 应用制作工具创建您自己的变体。要创建变体,请使用“样式”标签的“CSS”部分,然后创建名称遵循 app-[WidgetType]--[VariantName] 格式的类。示例:

.app-Button--RedButton {
      background-image: none;
      background-color: red;
    }
    

创建名称合适的类后,如果选择该微件,您的变体会显示在操作栏的变体下拉列表中。

使用 styles 属性添加其他样式

您可以使用“属性编辑器”中的 Display 下的 styles 属性向“样式”面板外部的微件添加样式。在“样式”下定义一个类,并将其添加到该属性中。以这种方式分配的样式不需要常规的 app- 前缀。例如:

.specialSubmitButton {
      background-image: none;
      background-color: red;
    }