Ember.js 组件按钮可能有固定的值列表之一，如何使其使用最长字符串的最小宽度？

Question

单个按钮，可显示“显示”或“隐藏”文字。

在显示和隐藏之间切换会导致按钮的宽度发生变化。

我希望按钮占据显示最宽字符串所需的宽度，而不管显示哪个字符串，这样它就占据所需的尽可能小的宽度，但不会晃动显示。

我已经挖掘了各种网站，我的 google-foo 无法找到这个答案。

Ember 代码...

<div ...attributes>
{{#let (unique-id) as |passwordId|}}
<label class="block uppercase" for="{{passwordId}}">password</label>
<div class="flex flex-row">
    <div class="border-2 border-besler-blue p-2">
        <input class="outline-none" id="{{passwordId}}" type="{{if this.isHidden "password" "text"}}" value="{{@startValue}}" placeholder="{{@placeholder}}">
    </div>
    <div class="border-r-2 border-y-2 border-besler-blue p-2 bg-gray-200">
        <button type="button" {{on "click" this.toggleShow}}>{{if this.isHidden "Show" "Hide"}}</button>
    </div>
</div>
{{/let}}
</div>

编辑更新并应用答案 给出的答案是正确的。只需澄清一点，最长的文本必须是第二项。

<div ...attributes>
    {{#let (unique-id) as |passwordId|}}
    <label class="block uppercase" for="{{passwordId}}">password</label>
    <div class="flex flex-row">
        <div class="border-2 border-besler-blue p-2">
            <input class="outline-none" id="{{passwordId}}" type="{{if this.isHidden " password" "text" }}"
                value="{{@startValue}}" placeholder="{{@placeholder}}">
        </div>
        <button class="border-r-2 border-y-2 border-besler-blue p-2 bg-gray-200 text-center" type="button"
            {{on "click" this.toggleShow}}>
            <div style="position: relative">
                <div class="absolute {{if this.isHidden " opacity-0"}}">Hide</div>
                <div class="{{if (not this.isHidden) " opacity-0"}}">Show</div>
            </div>
        </button>
    </div>
    {{/let}}
</div>

Answer 1

您可以使用 CSS 实现此目的，方法是将两个文本叠加在一起并将非活动文本隐藏起来。

我在这里做了一个可运行的演示，重现了原来的问题：

    <button {{on "click" this.increment}}>
      Click<br>
      {{#if (isEven this.count)}}
        This is Even
      {{else}}
        Odd
      {{/if}}
    </button>

如果我们将这些纯文本值更改为包含在我们可以设置样式的元素中，并更改以下位置：

    <button {{on "click" this.increment}}>
      Click<br>
      <div style="position: relative">
        <span style="position: absolute">Odd</span>  
        <span>This is Even</span>
      </div>
    </button>

最终看起来像这样

然后如果我们添加回显示/隐藏逻辑：

    <button {{on "click" this.increment}}>
      Click<br>
      <div style="position: relative">
        <span style="position: absolute; {{if (isEven this.count) "opacity:0;"}}">Odd</span>  
        <span style={{if (isEven this.count) "" "opacity:0;"}}>This is Even</span>
      </div>
    </button>

在这里玩一下

看起来像这样： https://imgur.com/a/wLU83Dm