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

UI

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'保存在闪亮的项目文件夹中名为'www'的子文件夹中。

Answer 2

fluidPage(theme='style.css',
                title = 'my app',
    headerPanel(
        h1("Header", align='center')),
        # 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=12
                                 ),
                                 mainPanel( # output
                                     textOutput('text1')
                                 )
                             )
                    ),
                    tabPanel('Tab3'),
                    tabPanel('Tab4'),
                    tabPanel('Tab5')

                    ), class='tab-panel'


    )

选项卡的css选择器原来是.nav-tabs，所以我将其设置为显示flex和居中。

我还定义了一个tab-panel类，并将其中的所有div设置为100％的宽度，我认为这可以解决您的空白问题？
.nav-tabs {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

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

.tab-panel > div {
  width: 100%;
}