Стиль tabsetPanel в Shiny AppsCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Стиль tabsetPanel в Shiny Apps

Сообщение Anonymous »

Я меняю стиль приложения Shiny, и изменить дизайн довольно сложно. Я хочу иметь основную навигацию с помощью tabPanel (готово), а затем два tabsetPanel. На следующем изображении показан результат, которого я хочу достичь с помощью изменений в CSS.
[img]https://i.sstatic. net/VeubY.png[/img]

Код: Выделить всё

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-кода:

Код: Выделить всё




[list]
[*]
[url=#tab-5738-1]Plot[/url]

[*]
[url=#tab-5738-2]Summary[/url]

[*]
[url=#tab-5738-3]Table[/url]

[/list]














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


Подробнее здесь: https://stackoverflow.com/questions/656 ... shiny-apps
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»