Close icon in tabs

Question

Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.

Issue: The tabbed metaphor is well understood and in some use cases includes the ability to close a tab via an X icon - think of multi-document editors such as VS Code, etc. Fomantic-UI has a good tab component but no automatic means of including a close icon, and good button and icon components with many options. It also offers the ability to combine components - with much power great responsibility comes - and I find that sometimes a little pointer would be useful. Therefore I provide this snippet to suggest some potential solutions.

Something like this is the target...

See my answer below.

score 0 · Answer 1 · answered Jan 17 '20 at 09:54

The snippet below illustrates my answer. For me the tertiary button & icon combination are the best option. Although the height of the tab is affected by inclusion of the buttons and will need to be worked on.

As a bonus the JS in the snippet shows how to close a tab on click of the close icon.

Note: This snippet is using the the 'dist' versions of FUI. Since FUI changes often, the snippet may fail if there have been breaking changes by the time you see it. At time of writing the official release on jsdelivr cdn is 2.8.3. (@17-Jan-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>

Close icon in tabs

1 Answers1