时间戳

首页 > 解决方案 > 选项卡中的关闭图标

semantic-ui - 选项卡中的关闭图标

问题描述

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

问题：选项卡式的比喻很好理解，在某些用例中包括通过 X 图标关闭选项卡的能力——想想多文档编辑器，例如 VS Code 等。Fomantic-UI 有一个很好的选项卡组件，但没有自动方式包括一个关闭图标，以及具有许多选项的良好按钮和图标组件。它还提供了组合组件的能力——功能强大，责任重大——我发现有时一个小指针会很有用。因此，我提供这个片段来建议一些潜在的解决方案。

像这样的东西是目标...

在此处输入图像描述

请看下面我的回答。

标签： semantic-uifomantic-ui

解决方案

下面的片段说明了我的答案。对我来说，三级按钮和图标组合是最好的选择。尽管选项卡的高度会受到包含按钮的影响，并且需要进行处理。

作为奖励，片段中的 JS 显示了如何在单击关闭图标时关闭选项卡。

注意：此代码段使用 FUI 的“dist”版本。由于 FUI 经常更改，因此如果在您看到它时已经发生了重大更改，则该代码段可能会失败。在撰写本文时，jsdelivr cdn 上的官方版本是 2.8.3。（@2020 年 1 月 17 日）。

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

推荐阅读