css - R Shiny 中的中心选项卡和标题

Question

我想在我的 R Shiny 页面中将我的选项卡和标题居中。我尝试将 div() 与 class=span7 一起使用，但它会抛出缺少参数的错误。

shinyUI(fluidPage(
    headerPanel("Header"),
    mainPanel(
        # Output: Tabset w/ headers ---
        tabsetPanel(type = 'tabs',
                    tabPanel('Tab1'),
                    tabPanel('Tab2',
                        sidebarLayout(
                            sidebarPanel( # input
                                selectInput(id='tab2','Title',
                                    choices=c('A','B','C','D')),
                                submitButton("Submit"),
                                width=4
                            ),
                            mainPanel( # output
                                textOutput('text1')
                            )
                        )
                    )
                    )
    )
))

然后用 div() 包裹 tabsetPanel() 作为

div(
    tabsetPanel(....),
    class='span7'
)

Answer 1

您可以使用自定义 css 样式(并编辑现有的 Shiny 类)实现此目的:

用户界面

fluidPage(theme='style.css',
    headerPanel(h1("Header", align='center')),
    mainPanel(
        # Output: Tabset w/ headers ---
        tabsetPanel(type = 'tabs',

                    tabPanel('Tab1'),
                    tabPanel('Tab2',
                             sidebarLayout(
                                 sidebarPanel( # input
                                     selectInput(inputId ='tab2','Title',
                                                 choices=c('A','B','C','D')),
                                     submitButton("Submit"),
                                     width=4
                                 ),
                                 mainPanel( # output
                                     textOutput('text1')
                                 )
                             )
                    )
                    ), class='flex-center'

        )
    )

CSS

我使用 flex 将选项卡居中。还必须清除在其中一个列类上设置的 float:left 属性。

.flex-center {
  display:flex;
  align-items: center;
  flex-direction:column;
  margin:auto;
}


.col-sm-8 {
  float:none;
}

将 css 保存为“style.css”，保存在您 Shiny 的元素文件夹中名为“www”的子文件夹中。