Question

Google文档和电子表格插件需要遵循明确的规则，如CSS Package for Add-ons中所述。

但是像标签这样的规格不能更好地匹配这里显示的附加组件的外观和感觉：

enter image description here

此外，Google避免将物化CSS用于文档附加组件。

Answer 1

自从我将"Googly" jQuery UI theme放在一起解决同一问题以来已经过了几年，特别是jQuery UI组件中的How to make a tab panel using HTML Service组件。它只需要一个小的调整就可以在侧边栏中工作。

要使用，您可以复制样式信息并将其嵌入Stylsheet.html，或者从cdn.rawgit.com链接到CSS，例如

<link rel="stylesheet" href="https://cdn.rawgit.com/mogsdad/e13b618322ec87ca8d28/raw/f1f96f797dadf968276c63de4df0bb04fb80646f/googly-jquery-ui.css">

实施例

这是一个示例电子表格插件。该代码基于之前链接的答案，该答案从jQuery UI Tabs example开始。

Stylesheet.html

<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- "Googly" theme CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/mogsdad/e13b618322ec87ca8d28/raw/f1f96f797dadf968276c63de4df0bb04fb80646f/googly-jquery-ui.css">

<!-- The rest is from the default file in the editor -->    
<style>
label {
  font-weight: bold;
}

.branding-below {
  bottom: 54px;
  top: 0;
}

.branding-text {
  left: 7px;
  position: relative;
  top: 3px;
}

.logo {
  vertical-align: middle;
}

.width-100 {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing : border-box;‌
  -moz-box-sizing : border-box;
}

#sidebar-value-block,
#dialog-elements {
  background-color: #eee;
  border-color: #eee;
  border-width: 5px;
  border-style: solid;
}

#sidebar-button-bar,
#dialog-button-bar {
  margin-bottom: 10px;
}
</style>

Sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Use a templated HTML printing scriptlet to import common stylesheet -->
    <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
  </head>
  <body>
    <!-- Use a templated HTML printing scriptlet to import JavaScript. -->
    <?!= HtmlService.createHtmlOutputFromFile('SidebarJavaScript').getContent(); ?>

    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">One</a></li>
        <li><a href="#tabs-2">Two</a></li>
        <li><a href="#tabs-3">Three</a></li>
      </ul>
      <div id="tabs-1">
        <p>Content of tab 1.</p>
      </div>
      <div id="tabs-2">
        <p>Content of tab 2.</p>
      </div>
      <div id="tabs-3">
        <p>Content of tab 3.</p>
      </div>
    </div>
  </body>
</html>

SidebarJavaScript.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>

$(function() {
  $( "#tabs" ).tabs();
});

</script>

Code.gs

/**
 * @OnlyCurrentDoc  Limits the script to only accessing the current spreadsheet.
 */

var SIDEBAR_TITLE = 'Example Sidebar';

/**
 * Adds a custom menu with items to show the sidebar and dialog.
 *
 * @param {Object} e The event parameter for a simple onOpen trigger.
 */
function onOpen(e) {
  SpreadsheetApp.getUi()
      .createAddonMenu()
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

/**
 * Runs when the add-on is installed; calls onOpen() to ensure menu creation and
 * any other initializion work is done immediately.
 *
 * @param {Object} e The event parameter for a simple onInstall trigger.
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Opens a sidebar. The sidebar structure is described in the Sidebar.html
 * project file.
 */
function showSidebar() {
  var ui = HtmlService.createTemplateFromFile('Sidebar')
      .evaluate()
      .setTitle(SIDEBAR_TITLE)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showSidebar(ui);
}

如何使HTML标签符合Google的附加组件CSS规范

1 个答案:

实施例

Stylesheet.html

Sidebar.html

SidebarJavaScript.html

Code.gs