0

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

问题：FUI 提供了功能强大的模态组件和有用的进度条组件。要求是如何让进度条出现在与模态标题段底部紧密连接的模态中。根据我下面的 gif。在这个用例中，用户正在服务器上搜索正在发生异步过程的东西，我需要向用户显示其他地方的一些操作指示。

在此处输入图像描述

使用标准进度条 CSS 意味着进度条没有连接到标题。

$('#b1').on('click', function(e) {

  $('#m1').modal('show')

  $('#m1').find('.theProgress-bar').show();

  setTimeout(function() {
    $('#m1').find('.theProgress-bar').css({
      visibility: 'hidden'
    });
  }, 5000)

})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>
    <div class="ui tiny blue indeterminate progress">
      <div class="bar">
        <div class="progress"></div>
      </div>
    </div>
    <div class="content">
      <p>Note the progress bar is NOT tight against the line that separates the header from the content.</p>
      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>

4

1 回答 1

0

答案是基于供应商 FUI 类创建 2 个新的 CSS 类，但使用更小的条形尺寸。

$('#b1').on('click', function(e) {

  $('#m1').modal('show')

  $('#m1').find('.theProgress-bar').show();

  setTimeout(function() {
    $('#m1').find('.theProgress-bar').css({
      visibility: 'hidden'
    });
  }, 5000)

})
.theProgress-bar {
  display: none;
  height: .15rem;
  background-color: rgba(5, 114, 206, 0.2);
  width: 100%;
  overflow: hidden;
}

.theProgress-bar-indeterminate-value {
  width: 100%;
  height: 100%;
  background-color: rgb(5, 114, 206);
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>
    <div class="theProgress-bar">
      <div class="theProgress-bar-indeterminate-value">
        <div class="progress">Pulsating (default)</div>
      </div>
    </div>
    <div class="content">
      <p>Note the progress bar is tight against the line that separates the header from the content.</p>
      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>

于 2020-01-21T00:04:51.103 回答