# 使用 bslib 的现代闪亮应用程序使用 bslib 的 Bootstrap 5 组件和布局构建专业的 Shiny 仪表板。该技能侧重于取代传统 Shiny 方法的现代 UI/UX 模式。 ## 快速入门 **单页仪表板：** 图书馆（闪亮）库（bslib） ui <- page_sidebar( title = "我的仪表板", theme = bs_theme(version = 5), # 默认预设“闪亮” 侧边栏 = 侧边栏（ selectInput("变量", "变量", 选择 = 名称(mtcars)) ), 布局列换行（宽度=1/3，填充=假， value_box(标题 = "用户", 值 = "1,234", 主题 = "主要"), value_box(title = "收入", value = "$56K", theme = "成功"), value_box(标题 = "增长", value = "+18%", 主题 = "信息") ), 卡（全屏=真， card_header("情节"), 绘图输出（“绘图”）））服务器 <- 函数（输入、输出、会话）{ 输出$plot <- renderPlot({ hist(mtcars[[输入$变量]]，主要=输入$变量) }) } 闪亮的应用程序（用户界面，服务器） **多页仪表板：** ui <- page_navbar( title = "分析平台", 主题 = bs_theme(版本 = 5), nav_panel("概述",overview_ui), nav_panel("分析",analysis_ui), nav_panel("报告", reports_ui) ） ## 核心概念 ### 页面布局 * **`page_sidebar()`** \-- 带侧边栏的单页仪表板（最常见） * **`page_navbar()`** \-- 带有顶部导航栏的多页面应用程序 * **`page_fillable()`** \-- 自定义排列的视口填充布局 * **`page_fluid()`** \--长格式内容的滚动布局有关详细指导，请参阅 [page-layouts.md]()。 ### 网格系统 * **`layout_column_wrap()`** \-- 具有自动换行功能的统一网格（大多数情况下推荐） * **`layout_columns()`** \-- 精确控制的 12 列 Bootstrap 网格有关详细指导，请参阅 [grid-layouts.md]()。 ### 卡牌仪表板内容的主要容器。支持页眉、页脚、多个正文部分和全屏扩展。有关详细指导，请参阅 [cards.md]()。 ### 超值盒使用可选图标、迷你图和内置主题显示关键指标和 KPI。有关详细指导，请参阅 [value-boxes.md]()。 ### 导航 * **页面级** ：用于多页面应用程序的“page_navbar()” * **组件级** ：`navset_card_underline()`、`navset_tab()`、`navset_pill()` 用于选项卡式内容有关详细指导，请参阅 [navigation.md]()。 ### 侧边栏 * **页面级** : `page_sidebar()` 或 `page_navbar(sidebar = ...)` * **组件级**：卡片内的`layout_sidebar()` * 支持条件内容、动态打开/关闭、手风琴有关详细指导，请参阅 [sidebars.md]()。 ### 填充布局填充系统控制组件如何调整大小以填充可用空间。关键概念：可填充容器、填充物品、填充载体。当容器具有定义的高度时，填充就会激活。有关详细指导，请参阅 [filling.md]()。 ### 主题 * **`bs_theme()`** 使用 Bootswatch 主题进行快速造型 * **自定义颜色** : `bg`、`fg`、`primary` 影响数百条 CSS 规则 * **字体** ：用于排版的 `font_google()` * **动态主题** : `input_dark_mode()` \+ `session$setCurrentTheme()` 有关详细指导，请参阅 [theming.md]()。 ### 用户界面组件 * **手风琴** \-- 可折叠部分，在侧边栏中特别有用 * **工具提示** \-- 悬停触发的帮助文本 * **Popovers** \-- 用于辅助 UI/输入的点击触发容器 * **Toasts** \-- 临时通知消息请参阅 [accordions.md]()、[tooltips-popovers.md]() 和[toasts.md]()。 ### 图标 **推荐：`bsicons`包**（Bootstrap Icons，专为bslib设计）： bsicons::bs_icon(“图形向上”) bsicons::bs_icon("人", 大小 = "2em") 浏览图标： **替代方案：`fontawesome` 包：** fontawesome::fa(“信封”) **仅图标触发器的可访问性：** 当图标用作工具提示、弹出框或类似交互元素（无随附文本）的唯一触发器时，屏幕阅读器必须可以访问它。默认情况下，图标包将图标标记为装饰性 (`aria-hidden="true"`)，这将它们隐藏在辅助技术之外。 * **`bsicons::bs_icon()`** ：提供 `title` — 这会自动设置 `a11y = "sem"` 工具提示（ bs_icon("info-circle", title = "更多信息"), “此处的工具提示内容” ） * **`fontawesome::fa()`** : 设置 `a11y = "sem"` 并提供 `title` 工具提示（ fa("circle-info", a11y = "sem", title = "更多信息"), “此处的工具提示内容” ） “标题”应描述触发器的用途（例如，“更多信息”、“设置”），而不是图标本身（例如，不是“信息圈图标”）。 ### 特殊输入 * **`input_switch()`** \-- 切换开关（现代复选框替代品） * **`input_dark_mode()`** \-- 深色模式切换 * **`input_task_button()`** \-- 用于长时间运行操作的按钮 * **`input_code_editor()`** \-- 带有语法高亮的代码编辑器 * **`input_submit_textarea()`** \-- 显式提交的文本区域有关详细指导，请参阅 [inputs.md]()。 ## 常见工作流程 ### 构建仪表板 1. 选择页面布局：`page_sidebar()`（单页）或`page_navbar()`（多页） 2.使用`bs_theme()`添加主题（考虑Bootswatch以快速启动） 3. 创建带有过滤/控件输入的侧边栏 4. 在关键指标顶部添加值框（在容器上设置“fill = FALSE”） 5. 使用`layout_column_wrap()`或`layout_columns()`排列卡片 6. 在所有可视化卡上启用 `full_screen = TRUE` 7. 添加 `thematic::thematic_shiny()` 用于情节主题 ### 现代化现有应用程序请参阅 [migration.md]() 了解遗留模式到现代等效模式的完整映射。关键步骤： 1. 将 `fluidPage()` 替换为 `page_sidebar()` 或 `page_navbar()` 2. 将 `fluidRow()`/`column()` 替换为 `layout_columns()` 3. 将输出包装在 `card(full_screen = TRUE)` 中 4. 添加 `主题 = bs_theme(版本 = 5)` 5. 将关键指标转换为“value_box()”组件 6. 将 `tabsetPanel()` 替换为 `navset_card_underline()` ## 指南 1. **优先使用 bslib 页面函数**（`page_sidebar()`、`page_navbar()`、`page_fillable()`、`page_fluid()`）而不是传统的等效函数（`fluidPage()`、`navbarPage()`） 2. **使用`layout_column_wrap()`或`layout_columns()`**进行网格布局，而不是`fluidRow()`/`column()`，后者不支持填充布局 3. **构建仪表板时将输出包裹在`card(full_screen = TRUE)`**中——全屏扩展是一项高价值功能 4. **在包含值框的`layout_column_wrap()`容器上设置`fill = FALSE`**（它们不应拉伸到填充高度） 5. **固定 Bootstrap 版本** : 包含 `theme = bs_theme(version = 5)` 或预设主题 6. **在服务器中使用`thematic::thematic_shiny()`**，使基本 R 和 ggplot2 绘图与应用程序主题匹配 7. **使用响应式宽度**，例如 `layout_column_wrap()` 中的 `width = "250px"` 来自动调整列 8. 当侧边栏有许多控件时，使用 `accordion()` **对侧边栏输入进行分组** 9. **请参阅[migration.md]()**了解将旧版 Shiny 模式映射到现代 bslib 等效项 ## 避免常见错误 1.避免直接嵌套`card()`容器。 `navset_card_*()` 函数已经是卡片； `nav_panel()` 内容直接进入其中，而不用 `card()` 包装 2. 仅使用`layout_columns()`和`layout_column_wrap()`来布局多个元素。单个孩子应该直接传递给他们的容器函数。 3. 切勿嵌套 `page_*()` 函数。每个应用程序仅使用一个顶级页面功能。 ## 参考文件 * **[migration.md]()** \-- 旧版 Shiny 到现代 bslib 迁移指南 * **[page-layouts.md]()** \-- 页面级布局函数和模式 * **[grid-layouts.md]()** \-- 多列网格系统 * **[cards.md]()** \-- 卡组件和功能 * **[value-boxes.md]()** \-- 指标和 KPI 的值框 * **[navigation.md]()** \-- 导航容器和模式 * **[sidebars.md]()** \-- 侧边栏布局和组织 * **[filling.md]()** \-- 可填充容器和填充项目 * **[theming.md]()** \-- 基本主题（颜色、字体、Bootswatch）。请参阅 **shiny-bslib-theming** 技能以了解高级主题 * **[accordions.md]()** \-- 可折叠部分和侧边栏组织 * **[tooltips-popovers.md]()** \-- 悬停工具提示和点击触发的弹出窗口 * **[toasts.md]()** \-- 临时通知消息 * **[inputs.md]()** \-- 特殊 bslib 输入小部件 * **[best-practices.md]()** \-- bslib 特定模式和常见问题

闪亮的 Bslib

包含技能