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 樣式（並編輯現有的閃亮類）來實現此目的：

用戶界面

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;
}

在閃亮的項目文件夾中名為“www”的子文件夾中將 css 保存為“style.css”。

Answer 2

另一個答案不是定義新樣式，而是查看當前正在應用的樣式並對其進行編輯。 您可以通過在瀏覽器中打開您的應用程序並使用 chrome 開發人員工具來查看 css 選擇器。

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%;
}