聚合物 - 纸切换按钮布局答案

【问题标题】：Polymer - Paper Toggle Button Layout聚合物 - 纸切换按钮布局
【发布时间】：2016-06-21 09:00:35
【问题描述】：

我正在学习 Polymer。目前，我的应用中有一个paper-toggle-button 元素，定义如下：

<paper-toggle-button checked="{{ isEnabled }}">enable?</paper-toggle-button>

这个渲染的时候是这样渲染的：

[switch] enable?

我的问题是，有没有办法将标签放在开关的左侧？换句话说，我想像这样显示控件：

enable? [switch]

有人怎么能做到这一点？

【问题讨论】：

标签： css polymer

【解决方案1】：

你不能把标签文本放在之前切换按钮吗？

<span>enable?</span><paper-toggle-button checked="{{isEnabled}}"></paper-toggle-button>

【讨论】：

常识.. 我喜欢它。问题是，样式已关闭。我希望有一种直接的方法来处理现有项目。不幸的是，内置控件没有这个选项。
只是将样式从组件中拉出来？该组件只是将您的标签插入为分布式内容节点；它没有什么特别的。 Google 将此作为一种方便，符合材料设计规范。不可能处理所有排列（左、右、上、下、对角线、时髦），也不应该。

【解决方案2】：

目前不支持。您可以创建功能请求以在左侧为标签添加另一个插入点，将元素包装在自定义元素中并添加该功能或分叉纸张切换按钮并自定义它。

【讨论】：

【解决方案3】：

这个答案对切换按钮的相对大小和位置做出了一些假设，但我试图遵循 Polymer 和 flex 模型。

这里的想法是将左侧调整后的标签放在<span> 中，并将其右侧偏移切换按钮的宽度。切换按钮也需要向左填充；我选择填充 33% 是因为我实际上是在切换开关的中心位置。

本地 CSS：

paper-toggle-button.date-toggle {
    padding-left: calc(33% + 1em);
}

/* position the left label outside the containing box */
span.toggle-left-label {
    position: absolute;
    right: 7em; /* Based on a relatively safe render width of the toggle button */
    /*right: 200%;*/ /* Depending on your use case, you might find percentages friendlier than ems */
}

在纸张元素中的使用：

（这里我将切换按钮置于 2 个标签之间，但您可以只使用 toggle-left-label 跨度）

<paper-menu class="app-menu" attr-for-selected="" selected="">
    <iron-icon icon="date-range"></iron-icon>
    <span>Sort by date:</span><br />
    <paper-toggle-button class="date-toggle">
        <span class="toggle-left-label toggle-label">Newest</span>
        <span>Oldest</span>
    </paper-toggle-button>
</paper-menu>

结果在媒体/查询断点上保持良好的定位，并且不会破坏任何响应式视图。结果：

【讨论】：