Блог

Я меняю стиль блестящего приложения, и довольно сложно изменить дизайн. Я хочу иметь основную навигацию с tabPanel помощью (готово), а затем две tabsetPanel . На следующем изображении результат, которого я хочу достичь с помощью моих изменений в CSS.

 tabPanel(
    "Attribute specification",
    tags$main(
        id = "element",
        class = "container",
        
        # Main panel for displaying outputs ----
        mainPanel(
            class = "col-xs-12 col-sm-12 col-md-12 inside-tabs",
            # Output: Tabset w/ plot, summary, and table ----
            tabsetPanel(type = "tabs",
                        tabPanel(
                            "Plot", 
                            plotOutput("distPlot3")
                        ),
                        tabPanel("Summary", verbatimTextOutput("summary")),
                        tabPanel("Table", tableOutput("table"))
            )
        )
    )
)
 

Это код, который я написал для создания первой панели вкладок, а следующий код — это CSS

 .inside-tabs {
    margin-left: -32px;
    margin-top: -16px;
}

.inside-tabs > .nav {
    margin-left: -30px;
    margin-right: -30px;
}

.tab-content {
    margin-left: 30px;
    margin-right: 30px;
}

.nav-tabs > li > a {
    border: 1px solid #ddd;
    padding-left: 75px;
    padding-right: 75px;
    background-color: #fcfcfc;
}

.nav-tabs > li.active > a {
    border: 1px solid #ddd;
    padding-left: 75px;
    padding-right: 75px;
    background-color: #ffffff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: none;
    border-top: none;
    box-shadow: none;
    color: #30256c;
    font-weight: 300;
}

.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus:hover {
    border: none;
    color: #ddd;
    color: #30256c;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #30256c;
}
 

Результат такой

результирующий HTML-код

   <div class="tab-pane active" data-value="Attribute specification" id="tab-5432-3">
    <main id="element" class="container">
      <div class="col-sm-8 col-xs-12 col-sm-12 col-md-12 inside-tabs">
        <div class="tabbable">
          <ul class="nav nav-tabs" data-tabsetid="5738">
            <li class="active">
              <a href="#tab-5738-1" data-toggle="tab" data-value="Plot" aria-expanded="true">Plot</a>
            </li>
            <li>
              <a href="#tab-5738-2" data-toggle="tab" data-value="Summary" aria-expanded="true">Summary</a>
            </li>
            <li>
              <a href="#tab-5738-3" data-toggle="tab" data-value="Table" aria-expanded="true">Table</a>
            </li>
          </ul>
          <div class="tab-content" data-tabsetid="5738">
            <div class="tab-pane active" data-value="Plot" id="tab-5738-1">
              <div id="distPlot3" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 400px"></div>
            </div>
            <div class="tab-pane" data-value="Summary" id="tab-5738-2">
              <pre id="summary" class="shiny-text-output noplaceholder shiny-bound-output"></pre>
            </div>
            <div class="tab-pane" data-value="Table" id="tab-5738-3">
              <div id="table" class="shiny-html-output shiny-bound-output"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
 

Я не могу выровнять вкладки по центру, потому что стиль указан в ul теге. Если я проверю с помощью инструмента разработчика, я увижу, что есть «граница», от которой я не могу избавиться.

Есть идеи? Кроме того, как я могу реализовать вторую панель вкладок, где вы можете выбрать страну?