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

时间:2015-12-22 17:19:10

标签: css polymer

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

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

渲染时,渲染如下:

[switch] enable?

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

enable? [switch]

有人能做到吗?

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

Toggle button centered between labels before clicking Toggle button centered between labels after clicking