Guide for migrating Quarto Dashboard layout/formatting to Shiny Express

What would you like to do?

Give feedback or suggest an improvement

Description

@cwickham Here's the outline I had for people who are trying to port from Quarto Dashboard to Shiny Express.

• Overview
  • Why you might need to go from Quarto Dashboard to Shiny Express
• Structure
  • Cards and code chunks
    • Quarto: code chunk is card, or alternatively, ::: {.card}
    • Shiny: ui.card()
    • Card titles
      • Quarto: #| title
      • Shiny: ui.card_header
    • Card padding
      • Quarto: #| padding: 0px
      • Shiny: not sure… ui.card(style = "--bs-card-spacer-y: 0; --bs-card-spacer-x: 0;") works but can’t be the best way.
    • Expandable
      • Quarto: #| expandable: false
      • Shiny: argument on ui.card: full_screen: True/False
  • Rows and columns
    • Quarto: H2 headers provide structure
    • Shiny: structure is provided by ui.layout_columns
    • Column-major orientation is well supported in Quarto, not as well supported in Shiny
    • Fill/flow is fillable/fill
  • Multi-page layouts
    • Quarto: H1 headers
    • Shiny Express: ui.nav_panel
    • Shiny Core: ui.page_navbar
  • Tabs
    • Quarto: {.navset}
    • Shiny: ui.navset_card_tabs
  • Sidebars
    • Global
      • Quarto: # {.sidebar}
      • Shiny: ui.sidebar
    • Page-level
      • Quarto: ## {.sidebar}
      • Shiny: ui.nav_panel + ui.layout_sidebar
    • Card-level
      • Quarto: #| content: card-sidebar
      • Shiny: ui.card / ui.layout_sidebar
        https://shiny.posit.co/py/layouts/sidebars/#sidebar-within-a-card
  • Toolbars
    • Quarto: {.toolbar}
    • Shiny: TBD
• Data display
  • Plots: switch to @render.plot if not already
  • Tables: switch to @render.data_frame or @render_widget if not already
  • Value boxes: ui.value_box
  • Dynamic content: f-strings or, if reactive, @render.express
• Text/paragraph formatting
  • Use ui.markdown() for continuous blocks of Markdown
  • For finer grained control, need to use HTML tags: ui.tags.strong(...), etc.
• Theming
  • TBD (brand.yml)
• Static assets
  • Quarto: foo_files/ subdir
  • Shiny: put files in ./www/ directory--but don't include "www" in the URL path, e.g. www/logo.png would be <img src="logo.png">