如何使语义-ui-react 选项卡响应？答案

【问题标题】：How can I make sematic-ui-react Tab responsive?如何使语义-ui-react 选项卡响应？
【发布时间】：2018-09-07 08:24:06
【问题描述】：

我正在开发一个 react 应用程序，我最近开始使用语义 ui react 模块。

不幸的是，我无法使 Tab 对象响应...

显示这一点的一个非常简单的脚本是：

import React from 'react'
import { withRouter } from 'react-router-dom'

import {Tab} from 'semantic-ui-react';

// import NavSection from './NavSection'

var sections = ["SectionA","SectionB","SectionC","SectionD","SectionE","SectionF"]

const NavigatorHeader = () => (
<div>
  <h1>Navigator</h1>
  <div>
    <Tab menu={{ pointing: true }} panes={getPanes(sections)} />
  </div>
</div>
)

export default withRouter(NavigatorHeader)


function getPanes(sections){
  return sections.map( function(section){
    return {
      menuItem: section,
      render: () =>
        <Tab.Pane attacched="false">
          <div>
            <p>
            Some Text that we can change tab from tab. E.g. with the title: <b>{section}</b>
            </p>
          </div>
        </Tab.Pane>
    }
  })
}

标签看起来很棒，内联，但如果我缩小屏幕，它们就会溢出，而我原以为它们会移动到第二行。

看起来这来自我正在使用的 Selenium-ui css (https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css)。当前版本是 2.3.1，但如果我回去使用 2.0.0 之前的版本，它是响应式的。有没有办法获得与新版本相同的行为？

谢谢，米歇尔。谢谢，米歇尔。

【问题讨论】：

标签： semantic-ui semantic-ui-react semantic-ui-css

【解决方案1】：

根据上一个答案，我找到了一种更简单的方法来实现这一点。

我用建议的值定义了一个 CSS：

.wrapped{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

然后将附加的类传递给菜单

<Tab menu={{ pointing: true, className: "wrapped" }} panes={getPanes(sections)} />

无需任何额外的 javascript 即可解决问题。

【讨论】：

这对我有用，但我还必须添加 width: 83vw 以使其换行为多行并保留在屏幕上。

【解决方案2】：

这是我前段时间在常规语义中创建的解决方案。它的行为类似于 Bootstrap，不需要第二组菜单项。它只需要一点点 JS 和 CSS。 JS：

$(function() {
// Set up to handle wrapping of tab menu (tab actuator) items
    $(window).resize(function() {
      checkIfWrapped();
    });

    checkIfWrapped(); // Make sure the function is fired upon document ready
});

// Detect whether a Semantic UI tabular menu is wrapped
function checkIfWrapped() {
    var pos_top_1st = $('.tabular.menu .item').first().position().top;
    $('.tabular.menu .item:not(first-child)').each(function() {
        var pos_top = $(this).position().top;
        if (pos_top > pos_top_1st) {
            $(this).parent().addClass('wrapped');
            return;
        } else if (pos_top == pos_top_1st) {
            $(this).parent().removeClass('wrapped');
        }
    });

HTML 结构。（请注意，如果需要，将 .tabular.menu .item-s 放置在整个 .tabular.menu 内的 div 中允许在 .tabular.menu 中使用单独的 .right.menu）：

      <div id="tabs-menu" class="ui top attached tabular menu">
          <div id="qj-tabs">
              <div class="tab item"></div>
              <div class="tab item"></div>
              <div class="tab item"></div>
          </div>
          <div class="right menu">
              <a class="tab item"><i class="add icon"></i> Add Job</a>
              <a class="tab item"><i class="copy icon"></i> Copy Item</a>
          </div>
      </div>
          <div class="botttom attached tab segment"></div>
          <div class="botttom attached tab segment"></div>
    </div>

CSS：

#qj-tabs {
  display: flex !important;   /* Will not work unless defined as display: flex */
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#tabs-menu .wrapped .item {
  border-radius: 5px !important;
  border: 1px lightgray solid !important; /*  Just styling for the default theme here */
  margin: 0 2px 2px 0 !important;
}

#tabs-menu .wrapped .active.item {
    background-color: lightgray;
}

【讨论】：

谢谢。一个问题：如何触发函数？你在 ComponentDidMount 中设置一个监听器吗？
没有。显示的第一个函数（文档准备函数 - $(function() { xxxxx }）进行了设置，以便如果重新调整窗口大小，则触发 checkIfWrapped()。它还会在文档准备好时触发 checkIfWrapped()。
我没有使用 jQuery，所以我不能直接使用它，但我认为它让我走上了正确的道路。

【解决方案3】：

这是我几周前在常规 Semanitic-ui 中所做的。

! function($) {

  var WinReszier = (function() {
    var registered = [];
    var inited = false;
    var timer;
    var resize = function(ev) {
      clearTimeout(timer);
      timer = setTimeout(notify, 100);
    };
    var notify = function() {
      for (var i = 0, cnt = registered.length; i < cnt; i++) {
        registered[i].apply();
      }
    };
    return {
      register: function(fn) {
        registered.push(fn);
        if (inited === false) {
          $(window).bind('resize', resize);
          inited = true;
        }
      },
      unregister: function(fn) {
        for (var i = 0, cnt = registered.length; i < cnt; i++) {
          if (registered[i] == fn) {
            delete registered[i];
            break;
          }
        }
      }
    };
  }());

  var TabDrop = function(element, options) {
    this.element = $(element);
    var $this = this;
    this.dropdown = $('<div class="ui item right dropdown" data-popup data-content="' + options.text + '" data-position="bottom center">' +
      options.icon +
      '<div class="menu"></div>' +
      '</div>').appendTo($this.element);

    this.click = function() {
      $this.element.removeClass("pointing");
      $this.element.find("a.item").not(this).removeClass("active");
    };

    this.reverseclick = function(el) {
      $this.element.find(".item.right.dropdown .menu a.item").removeClass("active selected");
      $this.element.addClass("pointing");
    };

    WinReszier.register($.proxy(this.layout, this));
    this.layout();
    $(".ui.dropdown").dropdown();
    $("[data-popup]").popup();
  };

  TabDrop.prototype = {
    constructor: TabDrop,

    layout: function() {
      var $main = this;
      var $this = this.element;
      var $drpdwn = this.dropdown;
      var $fullwidth = $this.width() - 25;

      this.element
        .append($drpdwn.find('.ui.item.right'))
        .find('a.item')
        .not('.item.right.dropdown')
        .each(function() {
          var $blockLenght = parseInt($(this).width());
          var $space = $fullwidth - $blockLenght;
          if ($space > $blockLenght) {
            $(this).click($main.reverseclick)
            if ($drpdwn.find('.menu a').length > 0) {
              var $reverse = $drpdwn.find('.menu a:first-child');
              $reverse.click($main.reverseclick).removeClass("selected")
              $reverse.insertBefore($drpdwn);
            }
          } else {
            var $dropItem = $(this)
            $dropItem.click($main.click)
            $drpdwn.find('.menu').append($dropItem);
          }
          $fullwidth = $space;
        });
    }
  };

  $.fn.tabdrop = function(option) {
    return this.each(function() {
      var $this = $(this),
        data = $this.data('tabdrop'),
        options = typeof option === 'object' && option;
      if (!data) {
        $this.data('tabdrop', (data = new TabDrop(this, $.extend({},
          $.fn.tabdrop.defaults, options))));
      }
      if (typeof option == 'string') {
        data[option]();
      }

    });
  };

  $.fn.tabdrop.defaults = {
    text: 'More',
    icon: '<i class="icon align justify m-0"></i>'
  };

  $.fn.tabdrop.Constructor = TabDrop;

}(window.jQuery);

var Tabs = {
  tabDrop: function() {
    setTimeout(function() {
      $('.tabdrop').tabdrop({
        text: 'More Configuration'
      });
    }, 1000)
  }
};
$(document).on("ready", function() {
  $('.menu .item').tab();
  Tabs.tabDrop();
  $(window).resize(function() {
    Tabs.tabDrop();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
<div class="ui top attached pointing menu tabdrop">
  <a class="item" data-tab="tab1">Tab Item 1</a>
  <a class="item" data-tab="tab2">Tab Item 2</a>
  <a class="item" data-tab="tab3">Tab Item 3</a>
  <a class="item" data-tab="tab4">Tab Item 4</a>
  <a class="item" data-tab="tab5">Tab Item (A very long tab title)</a>
</div>

【讨论】：