javascript - 麻烦造型扩展 polymer 元素(纸 slider )

Question

我正在尝试扩展 Polymer paper-slider 元素，以便能够获取枚举列表并在 slider 中迭代这些值，而不是仅显示数值。但是我在使样式起作用时遇到了麻烦。如您所见，如果您运行此代码片段，其中包含文本的 div 未正确居中放置在图钉上。我还希望文本的背景颜色与图钉相匹配(最左边的位置应该是灰色，其他位置应该是彩色的)。我还想摆脱它后面的圆形驼峰。非常感谢您的 CSS 帮助!

此外，如果您对如何更有效地执行任何操作有任何建议，请加入。

<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link href="http://www.polymer-project.org/components/paper-slider/paper-slider.html" rel="import">

<polymer-element name="rate-picker" extends="paper-slider" attributes="snaps pin disabled secondaryProgress editable immediateValue">
  <template>

    <link rel="stylesheet" href="http://www.polymer-project.org/components/paper-slider/paper-slider.css">
    <style>
      .pin > #sliderKnob > #sliderKnobInner::after {
        white-space: nowrap;
        content: attr(value);
        width: auto;
        left: calc(15px - 100%);
        background: #3f51b5;
        border: 5px solid #3f51b5;
        border-radius: 5px;
        padding: 0 10px 0 10px;
        height: 12px;
        top: -3px;
        line-height: 10px;
        text-align: center;
        color: #fff;
        font-size: 10px;
        -webkit-transform: scale(0) translate(0);
        transform: scale(0) translate(0);
      }
    </style>

    <template if="{{!disabled}}">
      <core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys>
      <core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys>
    </template>

    <div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}">

      <div class="bar-container">
        <paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryProgress="{{secondaryProgress}}"
                        on-down="{{bardown}}" on-up="{{resetKnob}}"
                        on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress>
      </div>

      <template if="{{snaps && !disabled}}">
        <div class="slider-markers" horizontal layout>
          <template repeat="{{markers}}">
            <div flex class="slider-marker"></div>
          </template>
        </div>
      </template>

      <div id="sliderKnob" on-down="{{expandKnob}}" on-up="{{resetKnob}}"
           on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"
           on-transitionend="{{knobTransitionEnd}}"
           center-justified center horizontal layout>

        <div id="sliderKnobInner" value="{{enumValue}}"></div>

      </div>

    </div>

    <template if="{{editable}}">
      <paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input>
    </template>
  </template>
  <script>
    Polymer('rate-picker', {
      ready: function () {
        this.disabled = false;
        this.snaps = true;
        this.pin = true;
        this.min = 0;
        this.max = 5;
        this.value = 0;
        this.enumValues = ["No rating", "Strongly disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];
        this.enumValue = this.enumValues[this.value];
      },
      immediateValueChanged: function() {
        this.enumValue = this.enumValues[this.immediateValue];
        this.super();
      }
    });
  </script>
</polymer-element>



<polymer-element name="my-element" noscript>
  <template>
    <style>
      :host { font-family: "Helvetica Neue", sans-serif; }
      :host .label { width: 150px; }
    </style>
    <div layout horizontal>
      <div class="label" self-center>RED</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>GREEN</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>BLUE</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>ORANGE</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>PURPLE</div>
      <rate-picker></rate-picker>
    </div>
  </template>
</polymer-element>
<my-element></my-element>

Answer 1

您的 css 具有以下规则，可防止 div 扩展(或使文本居中)。删除它，它将按预期工作。

.pin > #sliderKnob > #sliderKnobInner::after {
  width: 32px;
}

(或)在您自己的内联样式中添加“width: auto”。应该可以。