Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI article updates #145

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

UI article updates #145

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1107c61
Initial UI article tweaks
gregswinehart May 2, 2024
034a249
Merge branch 'main' into UI-docs
schloerke Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions docs/user-interfaces.qmd
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: User interfaces
title: Laying out your app
editor:
markdown:
wrap: sentence
Expand All @@ -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.

Expand Down Expand Up @@ -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.

<!-- TODO: Callout layout and components galleries -->

### Sidebar layout

Expand Down Expand Up @@ -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.

Expand Down
Loading