闪亮：如何让 navbarPage() 的标题填满 window？

Question

我想让Area 1填满window，Area 2固定宽度。

最终结果应该是这样的：

我的代码如下：

library(shiny)
library(shinythemes)
ui <- fixedPage(
  tags$style(HTML("
          .navbar .navbar-header {float: left; }
          .navbar .navbar-nav {float: right;}
          .container {min-width: 1250px}
        ")
  ),
  navbarPage(
    windowTitle = "GMAP",
    fluid = TRUE,
    title = "Title",
    selected = "Density",
    tabPanel(
      "Introduction",
    ),
    tabPanel(
      "Combination"
    ),
    tabPanel(
      "Density",
      tabsetPanel(
        selected = "Cluster analysis",
        tabPanel(
          "AAAAAAAAA"
        ),
        tabPanel(
          "BBBBBBBB",
          
        ),
      )
    ),
    tabPanel(
      "Effective score",
    ),
    tabPanel(
      "Effective percent"
    ),
    tabPanel(
      "Help"
    ),      
    tabPanel(
      "About"
    )
  )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

我尝试将 navbarPage() 放入 fixedPage() 中，但无法正常工作。你能告诉我如何实现我的目标吗？

编辑版本 2：感谢您的回答！我想将其中一个 tabpanel() 设为左侧，将其他的设为右侧，如下所示：

我尝试通过代码设置填充：

.nav-tabs>li:nth-child(1) {margin-right: 305px; }

但是，如果我这样做，所有第一个选项卡面板都会被更改，如下所示：

我认为这个问题可以通过为我想让它左对齐的tabpanel设置一个唯一的id来解决，但是我不能通过添加id =“density_ui_definition”来实现这个目标。我知道它在 div(id = "XXX") 中是正确的，但是 tabpanel(id = "XXX") 不起作用。我已经在你的代码中制作了相关的chagnes

library(shiny)
library(shinythemes)
ui <-   div(
  tags$style(HTML("
        @media (min-width: 768px) {
            body > div .container-fluid {
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            body > div > .container-fluid {
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            body > div .container-fluid {
                width: 1170px;
            }
        }
        body > div > .container-fluid:nth-of-type(1) {
            margin: 0 auto;
            padding-top: 55px;
        }
        body > div > nav .nav.navbar-nav {
            float: right;
        }
        
        .nav-tabs>li { float: left; margin-bottom: -1px; padding-right: 200px}
        
        ")),
  navbarPage(
    position = "fixed-top",
    windowTitle = "GMAP",
    fluid = TRUE,
    title = div(id = "img-main",
                img(src="logo.png", height = '32px', width = '133px'),
                style = ""),
    selected = "Density",
    tabPanel(
      "Introduction",
    ),
    tabPanel(
      "Combination"
    ),
    tabPanel(
      "Density",
      tabsetPanel(
        selected = "BBBBBBBB",
        tabPanel(
          "AAAAAAAAA",
          tags$img(src = "https://i.stack.imgur.com/EtaJC.png", style = "width: 100%")
        ),
        tabPanel(
          "BBBBBBBB",
          tabsetPanel(
            selected = "CCC",
            tabPanel(
              "CCC"
            ),
            tabPanel(
              "DDD"
            ),
          )
        )
      )
    ),
    tabPanel(
      "Effective score",
    ),
    tabPanel(
      "Effective percent"
    ),
    tabPanel(
      "Help"
    ),      
    tabPanel(
      "About"
    ),
    hr(),
    tags$footer(
      HTML("<p>Copyright © 2022 All Rights Reserved.</p>"), 
      align = "right"
    )
  )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

能帮我修改一下吗？谢谢！

Answer 1

library(shiny)
library(shinythemes)
ui <- div(
    tags$style(HTML("
        @media (min-width: 1200px) {
            body > div > .container-fluid {
                width: 1170px;
            }
        }
        @media (min-width: 992px) {
            body > div > .container-fluid {
                width: 970px;
            }
        }
        @media (min-width: 768px) {
            body > div > .container-fluid {
                width: 750px;
            }
        }
        ")),
    navbarPage(
        windowTitle = "GMAP",
        fluid = TRUE,
        title = "Title",
        selected = "Density",
        tabPanel(
            "Introduction"
        ),
        tabPanel(
            "Combination"
        ),
        tabPanel(
            "Density",
            tabsetPanel(
                selected = "Cluster analysis",
                tabPanel(
                    "AAAAAAAAA"
                ),
                tabPanel(
                    "BBBBBBBB"
                )
            )
        ),
        tabPanel(
            "Effective score"
        ),
        tabPanel(
            "Effective percent"
        ),
        tabPanel(
            "Help"
        ),      
        tabPanel(
            "About"
        )
    )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

将media里面的width改成你想要的数字。

编辑：

library(shiny)
library(shinythemes)
ui <- div(
  tags$style(HTML("
        @media (min-width: 768px) {
            body > div .container-fluid {
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            body > div > .container-fluid {
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            body > div .container-fluid {
                width: 1170px;
            }
        }
        body > div > .container-fluid:nth-of-type(1) {
            margin: 0 auto;
            padding-top: 55px;
        }
        body > div > nav .nav.navbar-nav {
            float: right;
        }
        ")),
  navbarPage(
    position = "fixed-top",
    windowTitle = "GMAP",
    fluid = TRUE,
    title = "Title",
    selected = "Density",
    tabPanel(
      "Introduction"
    ),
    tabPanel(
      "Combination"
    ),
    tabPanel(
      "Density",
      tabsetPanel(
        selected = "AAAAAAAAA",
        tabPanel(
          "AAAAAAAAA",
          tags$img(src = "https://i.stack.imgur.com/EtaJC.png", style = "width: 100%")
        ),
        tabPanel(
          "BBBBBBBB"
        )
      )
    ),
    tabPanel(
      "Effective score"
    ),
    tabPanel(
      "Effective percent"
    ),
    tabPanel(
      "Help"
    ),      
    tabPanel(
      "About"
    )
  )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

闪亮：如何让 navbarPage() 的标题填满 window？

Shiny: How to make the title of navbarPage() fill the window?

html

css

r

shiny

shiny-server

编辑：