我正在学习聚合物。目前,我的应用中有一个paper-toggle-button
元素定义如下:
<paper-toggle-button checked="{{ isEnabled }}">enable?</paper-toggle-button>
渲染时,渲染如下:
[switch] enable?
我的问题是,有没有办法将标签放在开关的左边?换句话说,我想像这样显示控件:
enable? [switch]
有人能做到吗?
答案 0 :(得分:2)
您是否只能在切换按钮前添加标签文字?
<span>enable?</span><paper-toggle-button checked="{{isEnabled}}"></paper-toggle-button>
答案 1 :(得分:0)
目前不支持。您可以创建一个功能请求,为左侧的标签添加另一个插入点,将该元素包装在自定义元素中,然后添加该功能或分叉纸张切换按钮并进行自定义。
答案 2 :(得分:0)
这个答案对你的切换按钮的相对大小和位置做了一些假设,但是我试图按照聚合物&amp; amp; flex模型。
这里的想法是将左侧调整后的标签放在<span>
中,并将其右侧偏移到切换按钮的宽度。切换按钮也需要向左填充;我选择以33%填充,因为我实际上是在切换周围居中标签。
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>
结果在媒体/查询断点上保持良好的定位,并且不会破坏任何响应式视图。结果: