进度条紧跟其他内容

Question

背景：在撰写本文时，Fomantic-UI是Semantic-UI的实时开发分支，有一天将被集成到Semantic-UI中，同时，它实际上是Semantic-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>

Answer 1

答案是根据供应商的FUI类创建2个新的CSS类，但使用较小的条形。

进度条紧跟其他内容

问题描述投票：0回答：1

1个回答

最新问题

进度条紧跟其他内容

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1