页面 "layers" 中的两个语义侧边栏？

Question

环境：Electron桌面单页应用

我有一个项目，我想在其中使用两个 Semantic UI 侧边栏方案。一次只能看到一个方案。我看过这个较早的问题（ Semantic-UI: Two Sidebars Conflict, Only One at a Time? ) 但它只部分回答了我的问题。

做一个简单的测试，将每个侧边栏方案包装在 div 中，我收到了一些 Semantic UI 警告（"Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag"） .在我继续之前，谁能告诉我下面的结构是否可行，或者是否有其他推荐的方法来解决这个问题？

我将 show/hide 这些 "layers" 基于用户交互 - 两个层都需要语义侧边栏功能。

  <body>
  <div id="LAYER-1" class="ui sidebar inverted vertical menu">
    <!-- ************** Sidebar content ************* !-->
  </div>    
  <div class="pusher">
    <!-- ************** Layer content ************* !-->
  </div>

  <div id="LAYER-2" class="ui sidebar inverted vertical menu">
    <!-- ************** Sidebar content ************* !-->
  </div>    
  <div class="pusher">
    <!-- ************** Layer content ************* !-->
  </div>
  </body>

Answer 1

我可以通过为 Semantic 侧边栏设置 context 来解决这个问题。这个答案（Semantic 文档中的) helped to clarify how to specify the context somewhat better than the example

所以我最终得到的是：将每个 "sidebar set" 包装在一个带有 ID 的 div 中，然后将 div 指定为 context。 "layer" div 有指向最顶层 show/hide 的按钮。没有收到任何关于设置的 Semantic 警告。

JS

$('#briefcaseExample .ui.sidebar')
        .sidebar({
            context: $('#briefcaseExample')
        })
        .sidebar('setting', 'transition', 'push')


$('#timelineExample .ui.sidebar')
        .sidebar({
            context: $('#timelineExample')
        })
        .sidebar('setting', 'transition', 'push')

HTML

<body onload="onLoadApp()">

    <div id="briefcaseExample">
        <div class="ui sidebar inverted vertical menu">
            <!-- ************** Sidebar content ************* !-->
            <div id="sidebarTree" style="height: 100%;"></div>
        </div>
        <!-- ************** End Sidebar content ************* !-->

        <div class="pusher">
            <!-- ************** Site content ************* !-->
            <div id="solidBlue"></div>
            <div id="container" width="100%" height="100%">
                <canvas id="c" width="100%" height="100%"></canvas>
            </div>

            <div class="briefcaseSidebarToggle">
                <i class="big sidebar icon grey" onclick="toggleMenu()"></i>
            </div>

            <div class="briefcaseClose">
                <i class="big remove circle icon grey" onclick="hideBriefcase()"></i>
            </div>
            <!-- ************** End Site content ************* !-->
        </div>
    </div>

    <div id="timelineExample">
        <div class="ui sidebar inverted vertical menu">
            <!-- ************** Sidebar content ************* !-->
            <div id="timelineSidebar" style="height: 100%;"></div>
        </div>
        <!-- ************** End Sidebar content ************* !-->

        <div class="pusher">
            <!-- ************** Site content ************* !-->
            <div class="timelineSidebarToggle">
                <i class="big sidebar icon grey" onclick="toggleTimelineMenu()"></i>
            </div>

            <!-- ************** End Site content ************* !-->

            <div id="solidColor">
                <button onclick="showBriefcase()">Show Briefcase</button>
            </div>
        </div>
    </div>
</body>

页面 "layers" 中的两个语义侧边栏？

Two semantic sidebars in "layers" on a page?

javascript

semantic-ui