问选项卡中的关闭图标
EN

Stack Overflow用户

提问于 2020-01-17 17:54:49

回答 1查看 389关注 0票数 0

背景:在撰写本文时，Fomantic-UI是语义-UI的实时开发分支，总有一天会被卷到语义-UI中，同时也是语义-UI事实上支持的类别。

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

像这样的东西就是目标。

请看我下面的回答。

semantic-ui

fomantic-ui

回答 1

Stack Overflow用户

发布于 2020-01-17 17:54:49

下面的代码片段说明了我的答案。对我来说，第三个按钮和图标的组合是最好的选择。尽管翼片的高度受包括按钮的影响，并且将需要处理。

作为额外的奖励，代码片段中的JS展示了如何在单击close图标时关闭选项卡。

注意:此代码段使用的是FUI的“dist”版本。由于FUI经常更改，因此当您看到代码片段时，如果发生了破坏性的更改，代码片段可能会失败。在撰写本文时，jsdelivr cdn的官方发行版是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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59784969

复制

相似问题

问选项卡中的关闭图标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选项卡中的关闭图标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选项卡中的关闭图标
EN