我如何獲得UiApp按鈕看起來像一個HTML服務按鈕

Question

我知道我需要完全從UiApp過渡，但在那之前我想至少與樣式匹配。

有誰有setStlyeAttribute（S），使了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"); 

}