如何为所有实例设置相同的组件子动态宽度？Web组件

Question

假设我在Web应用程序中有一个代表扩展器控件的小组件,即标题文本,展开/折叠的图标和一些内容.

一个非常简单的React实现(伪代码)可能如下所示:

const Expander = ({children, title, onExpandToggle, isExpanded}) => (
  <div>
    <div><span>{title}</span><img src={...} onClick={onExpandToggle} /></div>
    {isExpanded && children}
  </div>
);

此实现显示标题后面的图标,因此图标的位置由标题的长度决定.

它可能看起来像这样:

现在假设下面有多个像这样的人.它变得凌乱:

为了使这个更清洁,所有图标应该从左边有相同的填充.填充不应该是固定的而是动态的,因此最长的标题决定了所有图标的位置:

假设我想将扩展器保留在自己的组件中,是否有一种CSS方法来实现我的目标？

到目前为止,我还没有尝试任何东西,因为我没有起点.在WPF中,我会使用类似的东西SharedSizeGroup,但CSS不存在.

Answer 1

假设您的组件有容器,您可以设置display: flex内部容器和align-self: flex-end图像.

然后用一个div来包装你的组件,该div具有display: inline-block内部最大元素的宽度.

这是一个例子:

.container{
  display: inline-block;
  padding: 3px;
}

.item{
  display: flex;
  flex-direction: row; 
  justify-content: space-between;
}

.item .plus{
  width: 15px;
  height: 15px;
  background-image: url("https://cdn1.iconfinder.com/data/icons/mix-color-3/502/Untitled-43-512.png");
  background-size: cover;
  background-repeat: no-repeat;
  align-self: flex-end;
  margin-left: 10px;
}

<div class="container">
  <div class="item">
    <div>Synonyms</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div>Concept</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div>Term</div>
    <div class="plus"></div>
  </div>
</div>

由于无法使用CSS访问父元素,因此无法影响所有没有共享容器或固定宽度且仅使用CSS的实例.因此,如果你有一个内部实例(最大的实例),它将不能将它的宽度应用于它自己的父或任何祖先,它是其他孩子.

如果您正在使用一个解决方案来设置页面中具有相同大小的所有实例而不共享容器,那么您可以使用JS实现它.

计算每个实例的宽度,保存最大值,然后为其余实例设置此宽度.在这个例子中,我也突出了最大的项目.这些项目都在页面周围,可以在各种div和显示内部或没有任何容器.

var biggestWidth = 0;
var biggestItem;

function setWidth() {
  $(".item").each(function() {
    var currentWidth = $(this).width();
    if (currentWidth > biggestWidth) {
      biggestWidth = Math.ceil(currentWidth);
      biggestItem = $(this);
    }
  });

  $(".item").width(biggestWidth);
  biggestItem.addClass("biggest");
}

$(setWidth());

section {
  width: 40%;
  float: left;
  border: 1px solid black;
  border-radius: 3px;
  margin: 10px;
  padding: 10px;
}

.s1 {
  background-color: #e5e5e5;
  display: table;
}

.item {
  display: inline-block;
  clear: both;
  float: left;
}

.txt {
  float: left;
  display: inline-block;
}

.plus {
  width: 15px;
  height: 15px;
  background-image: url("https://cdn1.iconfinder.com/data/icons/mix-color-3/502/Untitled-43-512.png");
  background-size: cover;
  margin-left: 10px;
  float: right;
}

.shift{
  margin-left: 30%;
}

.clear{
  clear: both;
}

.biggest{
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="s1">
  <div class="item">
    <div class="txt">Synonyms</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div class="txt">Concept</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div class="txt">Term</div>
    <div class="plus"></div>
  </div>
</section>
<section>
  <div class="item">
    <div class="txt">Synonyms</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div class="txt">Concept</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div class="txt">Term</div>
    <div class="plus"></div>
  </div>
</section>

<section>
  <div class="item">
    <div class="txt">Synonyms - Long</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div class="txt">Concept</div>
    <div class="plus"></div>
  </div>
  <div class="item">
    <div class="txt">Term</div>
    <div class="plus"></div>
  </div>
</section>

<div class="item">
  <div class="txt">Synonyms</div>
  <div class="plus"></div>
</div>
<div class="item">
  <div class="txt">Concept</div>
  <div class="plus"></div>
</div>
<div class="item">
  <div class="txt">Term</div>
  <div class="plus"></div>
</div>

<div class="clear"></div>
<div class="shift">
<div class="item">
  <div class="txt">Synonyms</div>
  <div class="plus"></div>
</div>
<div class="item">
  <div class="txt">Concept</div>
  <div class="plus"></div>
</div>
<div class="item">
  <div class="txt">The bigget item is here</div>
  <div class="plus"></div>
</div>
</div>