Polymer 1.x:如何在 <paper-toolbar> 中对齐按钮和按钮文本?
Polymer 1.x: How to align buttons and button text inside <paper-toolbar>?
In this JSBin 我需要:
- 将工具栏中的两个按钮与视口的右边缘齐平(右对齐)并且
- 将文本垂直对齐到按钮的中间
Please provide a working JSBin example of how to do that.
代码
http://jsbin.com/nimoyomali/1/edit?html,输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button style="background:white;
color:black;
height:100%;
border-radius:0px;
margin:0;
border-left:solid 1px black;"
>Button 1</paper-button>
<paper-button style="background:white;
color: black;
height: 100%;
border-radius: 0px;
margin: 0;
border-left: 1px solid black;
vertical-align: middle;"
>Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
要让文本在 paper-button
内居中,您可以尝试 -
paper-button {
--paper-button: {
@apply(--layout-vertical);
@apply(--layout-center-center);
};
}
paper-toolbar
具有默认的左右填充 16px
。摆脱它的最简单方法是在右侧按钮上应用 -16px
右边距。
请参阅此 jsbin 以获取工作演示。
And here is the JSbin with the margin applied.
代码
http://jsbin.com/vikazaqedu/3/edit?html,输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="paper-button/paper-button.html">
<style is="custom-style">
paper-button {
--paper-button: {
@apply(--layout-vertical);
@apply(--layout-center-center);
};
background:white;
color:black;
height:100%;
border-radius:0;
border-left:solid 1px black;
margin:0;
}
paper-button.last {
margin: 0 -16px 0 0;
}
</style>
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button>Button 1</paper-button>
<paper-button class="last">Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
In this JSBin 我需要:
- 将工具栏中的两个按钮与视口的右边缘齐平(右对齐)并且
- 将文本垂直对齐到按钮的中间
Please provide a working JSBin example of how to do that.
代码
http://jsbin.com/nimoyomali/1/edit?html,输出<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button style="background:white;
color:black;
height:100%;
border-radius:0px;
margin:0;
border-left:solid 1px black;"
>Button 1</paper-button>
<paper-button style="background:white;
color: black;
height: 100%;
border-radius: 0px;
margin: 0;
border-left: 1px solid black;
vertical-align: middle;"
>Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
要让文本在 paper-button
内居中,您可以尝试 -
paper-button {
--paper-button: {
@apply(--layout-vertical);
@apply(--layout-center-center);
};
}
paper-toolbar
具有默认的左右填充 16px
。摆脱它的最简单方法是在右侧按钮上应用 -16px
右边距。
请参阅此 jsbin 以获取工作演示。
And here is the JSbin with the margin applied.
代码
http://jsbin.com/vikazaqedu/3/edit?html,输出<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="paper-button/paper-button.html">
<style is="custom-style">
paper-button {
--paper-button: {
@apply(--layout-vertical);
@apply(--layout-center-center);
};
background:white;
color:black;
height:100%;
border-radius:0;
border-left:solid 1px black;
margin:0;
}
paper-button.last {
margin: 0 -16px 0 0;
}
</style>
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button>Button 1</paper-button>
<paper-button class="last">Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>