bs4dash/shinydashboard 的侧边栏选项卡和皮肤布局
问题描述 投票：0回答：1
我正在开发一个闪亮应用程序的用户界面......它看起来非常丑陋。我遇到三个问题：
- 我正在尝试在某些部分使用
来尝试颜色（从侧边栏开始！）。当我使用这个时，它不起作用。相反，“light”一词打印在侧边栏中。skin = 'light' - 完整的标题标题是“绩效指标” - 没有足够的空间来显示标题。将
添加到width = '450px'
函数会导致header = dashboardHeader()
错误。Error in FUN(X[[i]], ...) : Expected an object with class 'shiny.tag'. - 为什么选项卡项是并排设置的？我想让它们垂直对齐。
如何解决这三个问题？
该应用程序的代码如下：
library(shiny)
library(bs4Dash)
library(shinyWidgets)
library(plotly)
library(DT)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(
title = "Performance Indicators"
),
sidebar = dashboardSidebar(
skin = 'light',
sidebarMenu(
bs4SidebarMenuItem(tabName = "subtab1",
text = "Page 1"
# ,icon = shiny::icon("chart-bar")
),
bs4SidebarMenuItem(tabName = "subtab2",
text = "Page 2"
# ,icon = shiny::icon("chart-bar")
),
bs4SidebarMenuItem(tabName = "subtab3",
text = "Page 3"
# ,icon = shiny::icon("chart-bar")
)
)
),
body = dashboardBody(
tabItems(
tabItem(tabName = "subtab1",
fluidRow(
column(2,
box(
title = strong("Settings"),
solidHeader = TRUE,
width = 12,
dateRangeInput('dateRange',
label = 'For the time period:',
#DEFAULT
start = Sys.Date()-365, end = Sys.Date()-1),
radioButtons("time_breakdown", label = "Time period breakdown",
choices = c("Daily", "Weekly", "Monthly"),
selected = "Weekly"),
pickerInput(
inputId = "conversion_type",
label = "Conversion Type",
choices = NULL
),
pickerInput(
inputId = "first_breakdown",
label = "First breakdown:",
choices = NULL,
options = list(`actions-box` = TRUE, `live-search` = TRUE)),
pickerInput(
inputId = "sec_breakdown",
label = "Second breakdown:",
choices = NULL,
selected = "",
options = list(title = "Please select", `live-search` = TRUE))
)
),
column(6,
box(
title = strong("Page 1"),
solidHeader = TRUE,
width = 12,
plotlyOutput('graph_acq'))),
column(4,
box(
width = 12,
title = strong("MOM-YOY Breakdown"),
solidHeader = TRUE,
radioGroupButtons(
inputId = "mom_yoy_period",
label = "Time Period",
choices = c("Weekly", "Monthly"),
status = "acq_class",
selected = "Weekly"
),
DTOutput("yoy_wow"))
)
)
),
tabItem(tabName = "subtab2",
fluidRow(
column(3,
box(width = 12,
title = strong("Settings"),
solidHeader = TRUE,
pickerInput(
inputId = "week_range",
label = "Week Range",
choices = week_boundaries$description,
selected = week_boundaries$description[2]),
pickerInput(
inputId = "application_last_week",
label = "Application",
choices = NULL,
options = list(`actions-box` = TRUE, `live-search` = TRUE),
multiple = TRUE),
prettyCheckboxGroup(
inputId = "channel_last_week",
label = "Channel:",
choices = NULL,
status = "primary",
outline = TRUE,
animation = "jelly"
)
)
),
column(2,
box(width = 12,
title = "Step 1",
solidHeader = FALSE,
status = "warning",
footer = fluidRow(
column(
width = 6,
descriptionBlock(
h2('444')
)
),
column(
width = 6,
descriptionBlock(
h3('Target: 444')
)
)
)
)
),
column(2,
box(width = 12,
title = "Step 2",
solidHeader = FALSE,
status = "warning",
footer = fluidRow(
column(
width = 6,
descriptionBlock(
h2('444')
)
),
column(
width = 6,
descriptionBlock(
h3('Target: 444')
)
)
)
)
),
column(2,
box(width = 12,
title = "Step 3",
solidHeader = FALSE,
status = "warning",
footer = fluidRow(
column(
width = 6,
descriptionBlock(
h2('444')
)
),
column(
width = 6,
descriptionBlock(
h3('Target: 444')
)
)
)
)
),
column(2,
box(width = 12,
title = "Step 4",
solidHeader = FALSE,
status = "warning",
footer = fluidRow(
column(
width = 6,
descriptionBlock(
h2('444')
)
),
column(
width = 6,
descriptionBlock(
h3('Target: 444')
)
)
)
)
)
),
fluidRow(
column(6,
box(width = 12,
plotlyOutput("last_week_funnel")
)
),
column(3,
box(width = 12,
title = "Activations WOW",
solidHeader = TRUE,
DTOutput("wow_activations"))
)
)
),
tabItem(tabName = "subtab3",
fluidRow(
column(2,
box(width = 12,
title = strong("Page 3"),
solidHeader = TRUE,
dateRangeInput('dateRange_page3',
label = 'For the time period:',
start = Sys.Date()-365, end = Sys.Date()),
radioButtons("time_breakdown_first_market", label = "Time period breakdown",
choices = c("Daily", "Weekly", "Monthly"),
selected = "Daily"),
h5("Breakdown"),
pickerInput(
inputId = "first_breakdown_first_market",
label = "First breakdown:",
choices = NULL,
options = list(`actions-box` = TRUE, `live-search` = TRUE)),
pickerInput(
inputId = "sec_breakdown_first_market",
label = "Second breakdown:",
choices = NULL,
selected = "",
options = list(title = "Please select", `live-search` = TRUE))
)
),
column(10,
box(
width = 12,
height = 1200,
plotlyOutput("graph")
)
)
)
)
)
),
controlbar = dashboardControlbar()
),
server = function(input, output) {
}
)
非常感谢！
1个回答
0
投票
投票
请尽量使您的示例尽可能简单且可重现。目前还没有。
这不是最小的，因为您已经包含了近 300 行代码。你真的希望我们经历这些吗？它不可重现，因为当我运行代码时它给出了
Error: object 'week_boundaries' not found您的问题不是关于特定的 UI 元素，而是关于总体布局。所以我删除了 UI 元素并用
'p("text")library(shiny)
library(bs4Dash)
library(shinyWidgets)
library(plotly)
library(DT)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(
title = "Performance Indicators"
),
sidebar = dashboardSidebar(
skin = 'light',
sidebarMenu(
bs4SidebarMenuItem(tabName = "subtab1",
text = "Page 1"
# ,icon = shiny::icon("chart-bar")
),
bs4SidebarMenuItem(tabName = "subtab2",
text = "Page 2"
# ,icon = shiny::icon("chart-bar")
),
bs4SidebarMenuItem(tabName = "subtab3",
text = "Page 3"
# ,icon = shiny::icon("chart-bar")
)
)
),
body = dashboardBody(
tabItems(
tabItem(tabName = "subtab1",
fluidRow(
column(2,p("text")),
column(6,p("text")),
column(4,p("text"))
)),
tabItem(tabName = "subtab2",
fluidRow(
column(3,p("text1")
),
column(2,p("text")),
column(2,p("text")),
column(2,p("text")),
column(2,p("text"))
),
fluidRow(
column(6,p("text")),
column(3,p("text"))
)
),
tabItem(tabName = "subtab3",
fluidRow(
column(2,p("text")),
column(10,p("text"))
)
)
)
),
controlbar = dashboardControlbar()
),
server = function(input, output) {
}
)
最新问题
- ADF 管道将数据从位于 Teams 通道中的 Excel 文件加载到 SQL Server
- Galera 集群：更新查询后所有节点速度变慢并出现连接过多错误
- firebase init genkit 不受支持
- 在 YAML 文件中添加多个资源时管道失败
- 更新项目后，每行执行测试命令时出错
- Java 可选流收集器从两个源列出，否则为空？
- 我的 JavaScript 代码无法在 Visual Studio Code 中运行
- 按评论点赞数等动态属性排序时如何实现光标分页？
- 使用多核的 Pip 构建选项
- Kotlin/Multik 库：类命名以及如何索引数组中的元素
- npx react-native 链接命令的替代品
- 使用 Karate 为包含 DAO 的 API 构建组件测试？
- ByteBuddy 通过参数转换调用同一类中的构造函数
- 为什么我的 Glue Crawler 排除模式不适用？
- 如果 import_playbook 中存在变量，如何跳过 vars_prompt？
- 我是编码新手，我很想用海龟画画
- 在 Docker PHP 容器内使用 mysqldump 命令
- 使用 .razor.css 时 Blazor/Razor 组件中的样式问题
- 如何在不先创建付款意图的情况下显示 Stripe PaymentElement 表单？
- 如何使用 Nuxt 3 创建动态导航结构？
© www.soinside.com 2019 - 2024. All rights reserved.