通过 bulma 文件上传重用来自 fileInput 的闪亮进度条

Question

问题

我正在使用 library(shinybulma) 设置 Shiny。

为了保持一致，我用bulma 类手工制作了一个文件输入小部件。对于视觉反馈，我需要在 ulpoad 过程中更新的进度条。

查看来自fileInput widget 的源代码，我发现我需要一个容器，其中id 等于我的小部件的id 附加_progress 和类shiny-file-input-progress 和progress-bar .

通过这种方式，我可以方便地依靠 Shiny 来更新进度条。

然而，魔鬼在于细节。我的小部件应该可以选择在span.file-name 旁边包含两个bulma 按钮。进度条应始终占据div.file 中元素定义的宽度（即包括可选的可用按钮）。

为了完成这项工作，我不得不在这里和那里硬编码widths 和min-widths，这在我看来像是一种解决方法，不能很好地与一般的bulma 框架配合使用。

生成的HTML（带有两个可选按钮）

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet"/>
<div class="field" style="width:440px">
  <label class="label">Label</label>
  <div class="file has-name">
    <label class="file-label">
      <input id="a" name="a" type="file" class="file-input"/>
      <span class="file-cta" style="min-width: 160px">
        <span class="file-icon">
          <i class="fa fa-upload"></i>
        </span>
        <span class="file-label">Choose a file...</span>
      </span>
      <span class="file-name" style="width:100%; min-width:200px;">No file selected</span>
    </label>
    <a class="button    reset-file-form">
      <span class="icon  is-small">
        <i class="fa fa-undo"></i>
      </span>
    </a>
    <a class="button is-primary   remove-file-form">
      <span class="icon  is-small">
        <i class="fa fa-minus-circle"></i>
      </span>
    </a>
  </div>
  <!-- normally the is-hidden class is added in this div and the color class would be has-background-light !-->
  <div id="a_progress" class="progress shiny-file-input-progress has-background-info"> 
    <div class="progress-bar has-background-info" style="padding-left:10px; font-size: 10px"></div>
  </div>
</div>

使用这个 sn-p 进度条（在这个 sn-p 中显示，但通常只在上传时显示）跨越正确的宽度，我必须硬编码 widths 和 @ 987654339@，根据有无buttons计算。

min-width 还应该保证span.file-name 在我们上传文件名很短的文件时不会太短。

问题

如何在不定义width/min-width 的情况下让进度条跨越div.file 的整个宽度？理想情况下，这应该本着 bulma 的精神，即使用现有的类而不是定义内联 css。

Answer 1

从您的代码库中显示的内容来看，动作行和进度条行是同级的，如果它们有一个共同的父容器来适应宽度的约束，并且进度条同级将弯曲到这个容器约束，那么您可能可以删除每个兄弟的所有内部宽度样式并将其全部放在父级上。

我运行了代码的本地 POC，它缺少您正在使用的花哨样式，因为我不确定您的所有 CSS 在后台做什么，但我能够删除所有 width 硬编码样式并在顶部根处仅设置一个初始 width，以反映其对其子级的约束。

      <div class="field" style={{ width: "500px" }}>
        <label class="label">Label</label>
        <div>
          <div class="file has-name">
            <label class="file-label">
              <input id="a" name="a" type="file" class="file-input" />
              <span class="file-cta">
                <span class="file-icon">
                  <i class="fa fa-upload"></i>
                </span>
                <span class="file-label">Choose a file...</span>
              </span>
              <span class="file-name">No file selected</span>
            </label>
            <a class="button    reset-file-form">
              <span class="icon  is-small">
                <i class="fa fa-undo"></i>
              </span>
            </a>
            <a class="button is-primary   remove-file-form">
              <span class="icon  is-small">
                <i class="fa fa-minus-circle"></i>
              </span>
            </a>
          </div>
          <div
            id="a_progress"
            class="progress shiny-file-input-progress has-background-info"
            style={{ padding: "15px", backgroundColor: "blue" }}
          >
            <div
              class="progress-bar has-background-info"
              // style="padding-left:10px; font-size: 10px"
            ></div>
          </div>
        </div>
      </div>

如果这是您所希望的，或者我是否可以为解决方案提供任何其他类型的指导，请随时告诉我。