Question

我正在开发一个反应应用程序，我最近开始使用语义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之前的版本，那么它是响应的..有没有办法在新版本中获得相同的行为？

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

Answer 1

根据之前的回答，我找到了一种更简单的方法来实现这一目标。

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

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

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

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

这解决了这个问题，没有任何额外的JavaScript。

Answer 2

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

import os

os.system("mode con cols=50 lines=20")

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

$(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');
        }
    });

CSS：

      <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>

Answer 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>

如何使sematic-ui-react Tab响应？

3 个答案: