问进度条与其他内容紧密相关
EN

Stack Overflow用户

提问于 2020-01-21 08:04:51

回答 1查看 53关注 0票数 0

背景:在撰写本文时，Fomantic-UI是语义-UI的实时开发分支，总有一天会被卷到语义-UI中，同时也是语义-UI事实上支持的类别。

问题: FUI提供了一个功能强大的modal component和一个有用的progress bar component。要求是如何让进度条出现在紧密连接到模式头片段底部的模式中。根据我下面的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>

semantic-ui

fomantic-ui

回答 1

Stack Overflow用户

发布于 2020-01-21 08:04:51

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

$('#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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59832501

复制

相似问题

问进度条与其他内容紧密相关
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问进度条与其他内容紧密相关EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问进度条与其他内容紧密相关
EN