Две семантические боковые панели в «слоях» на странице? - PullRequest
Новая
       8

Две семантические боковые панели в «слоях» на странице?

0 голосов
/ 17 сентября 2018

Среда: одностраничное приложение Electron для настольных компьютеров

У меня есть проект, в котором я хотел бы использовать две Semantic UI схемы боковых панелей.Только одна схема будет видна одновременно.Я видел этот предыдущий вопрос ( Семантический пользовательский интерфейс: конфликт двух боковых панелей, только по одному за раз? ), но он лишь частично отвечает на мой вопрос.

Выполнение простого теста, завершение каждогоСхема боковой панели в div, у меня было несколько предупреждений Semantic UI ( "Пришлось перемещать боковую панель. Для оптимальной производительности убедитесь, что боковая панель и толкатель являются прямыми потомками тега вашего тела" ).Прежде чем идти дальше, может кто-нибудь сказать мне, будет ли работать структура ниже или есть какой-то другой рекомендуемый способ сделать это?

Я покажу / скрою эти "слои" на основе взаимодействия с пользователем - оба слоянужна функция семантической боковой панели. 

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

1 Ответ

0 голосов
/ 17 сентября 2018

Я смог решить эту проблему, установив context для Semantic боковой панели. Этот ответ ( Semantic-ui - как использовать боковую панель только в части страницы? (Т.е. с контекстом) ) помог прояснить, как указать context несколько лучше, чем пример в Semantic документах

Итак, чем я закончил: оберните каждый «набор боковых панелей» в div идентификатором, а затем укажите этот div как context. У элементов «layer» есть кнопки, чтобы показать / скрыть самый верхний слой. Не выдается 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>
...