navbarMenu в пределах navbarMenu в блестящем - PullRequest
Новая
       40

navbarMenu в пределах navbarMenu в блестящем

0 голосов
/ 21 мая 2018

Если я использую следующий пользовательский интерфейс в Shiny, я получаю примерно тот результат, который мне нужен, но он на самом деле не работает, так как navbarMenu самого низкого уровня отображает метку верхнего уровня и стрелку, указывающую, что она расширяема, но не может зарегистрировать субэлемент.Предметы.Я предполагаю, потому что это предназначено только для элемента верхнего уровня ( navbar Меню).У меня вопрос, есть ли еще один элемент, который будет выполнять нужную задачу подменю?Невозможность группировки по пункту меню быстро станет визуально неэффективной. 

shinyUI(navbarPage("My Application",
                   tabPanel("Component 1"),
                   tabPanel("Component 2"),
                   navbarMenu("More",
                              tabPanel("Sub-Component A"),
                              tabPanel("Sub-Component B"),
                              navbarMenu("Yet More",
                                         tabPanel("Subpart 1"),
                                         tabPanel("Subpart 2"))
                              )
                   )
)

1 Ответ

0 голосов
/ 24 мая 2018

довольно хороший вопрос!

Я не думаю, что есть другой элемент, который вы можете использовать, но вы можете использовать JavaScript, чтобы он работал.

Единственное изменение, которое я сделал в app.R включает файл js, используя: includeScript("script.js").Реальная часть - это сам скрипт: мы определяем 2 обработчика событий:

Нажатие на выпадающий список

Выпадающие списки создаются navbarMenu.К ним не подключен tabPane, поэтому все, что нам нужно, это переопределить поведение по умолчанию, переключая раскрывающийся список (открыть при закрытии или закрыть при открытом состоянии).

Нажатие на вкладку

При нажатии на вкладку необходимо учитывать 3 подзадачи:

Установить активный элемент в содержимом вкладки

Нам нужно показать соответствующий tabPane, по которому щелкнули, в порядкепросмотреть содержимое.Показано tabPane с class: active, поэтому сначала удалите класс active из каждого tabPane, затем добавьте класс active для вкладки, по которой вы щелкнули.

Установка активного элемента в navbar

Та же история, вкладка active визуально представлена ​​в navbar более темным серым цветом.

Закрыть все выпадающие списки

После нажатия на определенную вкладку из navbarMenu, вероятно, будет хорошей идеей закрыть все раскрывающиеся списки, в противном случае они останутся открытыми.

script.js 

$(document).ready(function(){
  $('.dropdown').on('click', function(e){
    $(this).toggleClass('open');

    e.stopPropagation();
    e.preventDefault();
  });

  $('[data-toggle=tab]').on('click', function(e){
    let dv = ($(this).attr('data-value'));

    //Set active element in tabcontents
    $('.tab-pane').removeClass('active');
    $('.tab-pane[data-value="' + dv + '"]').addClass('active');

    //Set active element in navbar
    $('a[data-toggle=tab]').parent().removeClass('active');
    $('a[data-value="' + dv + '"]').parent().addClass("active");

    //Close the dropdowns
    $('.dropdown').removeClass('open');

    e.stopPropagation();
    e.preventDefault();
  });
});

Вы можетебыстро опробуйте его с помощью runGist("https://gist.github.com/dgyurko/e1952c5ecbf9a1315b41b8d7ef1f7a8f")

Обязательно протестируйте в браузере, так как в RStudio Viewer он не работает должным образом!

Демо

demo

...