From 1107c61138c7d7d96884f1d839e0598e85a7f642 Mon Sep 17 00:00:00 2001 From: Greg Swinehart Date: Thu, 2 May 2024 14:32:15 -0700 Subject: [PATCH] Initial UI article tweaks --- docs/user-interfaces.qmd | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/user-interfaces.qmd b/docs/user-interfaces.qmd index d04ec2fb..f435e276 100644 --- a/docs/user-interfaces.qmd +++ b/docs/user-interfaces.qmd @@ -1,5 +1,5 @@ --- -title: User interfaces +title: Laying out your app editor: markdown: wrap: sentence @@ -17,7 +17,7 @@ Here, we'll use the following dashboard as motivation to learn about some import See the [gallery](/gallery), [layouts](/layouts), and [components](/components) for more UI design inspiration. ::: -## Basic dashboard +## A quick start Before we walk through a more sophisticated dashboard, consider this basic dashboard with a header (i.e., page title) and a sidebar layout. In the sidebar, there are a couple [inputs](/components/#inputs) for getting different views of the data, and in the main content area, is a [plotly output](jupyter-widgets.qmd). That output is also placed in a card to give it some depth and the ability to go full screen. The card isn't critical when there is only one output, but they come highly recommended when there are multiple outputs to display. @@ -46,9 +46,11 @@ with ui.card(full_screen=True): return px.histogram(load_penguins(), x=input.var(), nbins=input.bins()) ``` -## Sophisticated dashboard +## Layout and components -Now let's work up to a more sophisticated dashboard by walking through components and layouts that are useful for dashboards step-by-step. +Now let's work up to a more sophisticated dashboard by walking through layouts and components that are useful for dashboards step-by-step. + + ### Sidebar layout @@ -233,7 +235,7 @@ with ui.popover(title="Popover title"): ``` -### All together now +## Building a complete dashboard Let's put it all together to create a dashboard for exploring restaurant tipping data.