Значок закрытия во вкладках - PullRequest
Новая
       62

Значок закрытия во вкладках

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

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

Проблема: метафора с вкладками хорошо понятна и в некоторых случаях включает возможность закрывать вкладку с помощью значка X - подумайте о многодокументных редакторах, таких как Код VS и др. c. Fomanti c -UI имеет хороший компонент для вкладок, но не имеет автоматического c средства для включения значка закрытия, а также хороших компонентов для кнопок и значков со многими опциями. Он также предлагает возможность комбинировать компоненты - с большой мощностью приходит большая ответственность - и я считаю, что иногда небольшой указатель будет полезен. Поэтому я предоставляю этот фрагмент, чтобы предложить некоторые потенциальные решения.

Примерно такова цель ...

enter image description here

См. Мой ответ ниже.

1 Ответ

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

Фрагмент ниже иллюстрирует мой ответ. Для меня комбинация третичной кнопки и значка - лучший вариант. Хотя на высоту вкладки влияет включение кнопок и нужно будет поработать.

В качестве бонуса JS во фрагменте показывает, как закрывать вкладку при нажатии на значок закрытия.

Примечание. В этом фрагменте используются версии FUI 'dist'. Поскольку FUI ​​часто меняется, фрагмент кода может перестать работать, если к моменту его просмотра произошли критические изменения. На момент написания официального релиза на jsdelivr cdn 2.8.3. (17 января 2020 г.) 

$('.menu .item')
  .tab();

$('.tabCloser').on('click', function() {

// get the parent of the icon, meaning the anchor.
	var parent = $(this).parent();
  
  // get the tab name from the anchor.
	var tabName = parent.data('tab');

	// erase elements with the matching tab name
  $('[data-tab=' + tabName + ']').remove();

  // Click the first remaining tab if any.
	if ($('a.item').length > 0){
		$('a.item').first().trigger('click');
  }

})
.daContent {
margin: 2em;
}
<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>
<div class='daContent'>
  <p>
  The tabs below illustrate 3 options:
  <ul>
    <li>First uses a button of class <i>ui basic icon button</i></li>
    <li>Second is a simple icon with class <i>close icon</i></li>
    <li>Third uses a button with class <i>ui tertiary icon button</i></li>
  </ul>
  None require additional JavaScript or CSS. 

  </p>
  <div class="ui top attached tabular menu">
    <a class="active item" data-tab="first">First 
      <button class="ui basic icon button tabCloser">
        <i class="close icon"></i>
      </button>
    </a>
    <a class="item" data-tab="second">Second <i class="close icon tabCloser"></i></a>
    <a class="item" data-tab="third">Third 
      <button class="ui tertiary icon button tabCloser">
        <i class="close icon"></i>
      </button>
    </a>
  </div>
  <div class="ui bottom attached active tab segment" data-tab="first">
    Ideally there should be no border around the button, and for mouse users a mouse-over UI change without reverting to additional code. 
  </div>
  <div class="ui bottom attached tab segment" data-tab="second">
    Better - no border, but also no mouse-over UI effect. And the icon cramps the tab text too much. We  could fix both with custom CSS / JS but the aim is for no additional code.
  </div>
  <div class="ui bottom attached tab segment" data-tab="third">
    Best - no border, plus a mouser effect. 
  </div> 
</div>
</body>
...