单个按钮,可显示“显示”或“隐藏”文字。
在显示和隐藏之间切换会导致按钮的宽度发生变化。
我希望按钮占据显示最宽字符串所需的宽度,而不管显示哪个字符串,这样它就占据所需的尽可能小的宽度,但不会晃动显示。
我已经挖掘了各种网站,我的 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>
您可以使用 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