聚合物 - 纸张切换按钮布局

Question

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

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

渲染时，渲染如下：

[switch] enable?

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

enable? [switch]

有人能做到吗？

Answer 1

您是否只能在切换按钮前添加标签文字？

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

Answer 2

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

Answer 3

这个答案对你的切换按钮的相对大小和位置做了一些假设，但是我试图按照聚合物＆amp; amp; 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>

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