Question

我知道我需要完全从UiApp过渡，但在那之前我想至少匹配样式。

有没有人使用setStlyeAttribute来使UiApp按钮看起来像这里列出的HTML按钮：https://developers.google.com/apps-script/add-ons/css#buttons

谢谢。

Answer 1

我能够读取htmlService css文件并提取我所能提供的内容。

function testButtonUi(){
  // https://ssl.gstatic.com/docs/script/css/add-ons.css

  var StyleButtonBlueActive = {
    'background': '#357ae8',
    'border': '1px solid #2f5bb7',
    'color': '#fff',
    'cursor': 'default',
    'font-family': 'arial, sans-serif',
    'font-size': '11px',
    'font-weight': 'bold',
    'height': '29px',
    'line-height': '27px',
    'margin': '0',
    'min-width': '72px',
    'outline': '0',
    'padding': '0 8px',
    'text-align': 'center',
    'white-space': 'nowrap',
    'display': 'inline-block',
    'padding': '0'
  };

    var StyleButtonGrayActive = {
    'background': '#e2e2e2',
    'border': '1px solid #ccc',
    'color': '#111',
    'cursor': 'default',
    'font-family': 'arial, sans-serif',
    'font-size': '11px',
    'font-weight': 'bold',
    'height': '29px',
    'line-height': '27px',
    'margin': '0',
    'min-width': '72px',
    'outline': '0',
    'padding': '0 8px',
    'text-align': 'center',
    'white-space': 'nowrap',
    'display': 'inline-block',
    'padding': '0'
  };

 var app = UiApp.createApplication();
 var panel = app.createHorizontalPanel(); 

 var buttonBlue = app.createButton('Translate').setStyleAttributes(StyleButtonBlueActive);
 var buttonGray = app.createButton('Close').setStyleAttributes(StyleButtonGrayActive);

 panel.add(buttonBlue);
  panel.add(buttonGray);
 app.add(panel); 
 SpreadsheetApp.getUi().showModalDialog(app, "title");

}

如何让UiApp按钮看起来像HTMLService按钮

1 个答案: