Прогресс бар плотно прилегает к другому контенту - PullRequest
Новая
       56

Прогресс бар плотно прилегает к другому контенту

0 голосов
/ 21 января 2020

Предыстория: на момент написания, Fomanti c -UI - это разветвленная ветка разработки Semanti c -UI, которая однажды будет свернута в Semanti c -UI и пока что является поддерживаемый фактом род Semanti c -UI.

Проблема: FUI предоставляет как способный модальный компонент , так и полезный индикатор выполнения . Требование состоит в том, чтобы индикатор выполнения отображался в моде, тесно связанном с нижней частью сегмента модального заголовка. Согласно моему GIF ниже. В этом случае пользователь ищет что-то на сервере, где происходит асинхронный процесс c, и мне нужно показать пользователю некоторые указания на действия в другом месте.

enter image description here

Использование стандартного индикатора выполнения 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>

1 Ответ

0 голосов
/ 21 января 2020

Ответ заключался в создании 2 новых CSS классов, основанных на классах FUI поставщика, но с использованием меньшего размера бара sh. 

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