diff --git a/website/sidebars.js b/website/sidebars.js index e677d91796..7168b91ac7 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -54,6 +54,7 @@ module.exports = { "widgets/content/header", "widgets/content/footer", "widgets/content/navigation", + "widgets/content/section", "widgets/content/breadcrumbs", "widgets/content/toolbar", "widgets/content/tabs", @@ -80,6 +81,7 @@ module.exports = { "widgets/stat/large_bar_stat", "widgets/stat/small_stat", "widgets/stat/small_series_stat", + "widgets/stat/stat_table", "widgets/stat/tall_stats", "widgets/stat/tall_gauge_stat", "widgets/stat/tall_series_stat", diff --git a/website/widgets/content/section.md b/website/widgets/content/section.md new file mode 100644 index 0000000000..d2e182e0bb --- /dev/null +++ b/website/widgets/content/section.md @@ -0,0 +1,27 @@ +--- +title: Section +keywords: + - section +custom_edit_url: null +--- + + +Render a card displaying a title, a subtitle, and optional components. +Section cards are typically used to demarcate different sections on a page. + +Check the full API at [ui.section_card](/docs/api/ui#section_card). + +```py +q.page['section'] = ui.section_card( + box='1 1 7 1', + title='Your title', + subtitle='Your subtitle', + items=[ + ui.toggle(name='search', label='Search', value=True), + ui.dropdown(name='distribution', label='', value='option0', choices=[ + ui.choice(name=f'option{i}', label=f'Option {i}') for i in range(5) + ]), + ui.date_picker(name='target_date', label='', value='2020-12-25'), + ], +) +``` diff --git a/website/widgets/stat/table_stat.md b/website/widgets/stat/stat_table.md similarity index 56% rename from website/widgets/stat/table_stat.md rename to website/widgets/stat/stat_table.md index 505a8127fc..54cba82d09 100644 --- a/website/widgets/stat/table_stat.md +++ b/website/widgets/stat/stat_table.md @@ -1,5 +1,5 @@ --- -title: Table Stat +title: Stat Table keywords: - stats - table @@ -7,20 +7,18 @@ custom_edit_url: null --- Use this stat if you need to display simple tabular data and don't need the full capabilities of `ui.table`. -Values can have custom font colors provided in hexadecimal, [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), [rgb](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb), [browser supported keywords](https://www.w3.org/wiki/CSS/Properties/color/keywords) (red, blue, green, etc), [Spectrum pallete](https://github.com/h2oai/wave/blob/main/ui/src/index.scss#L63-L81). + +Values can have custom font colors provided in hexadecimal, [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), [rgb](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb), [browser supported keywords](https://www.w3.org/wiki/CSS/Properties/color/keywords) (red, blue, green, etc), [Wave colors](/docs/color-theming/#wave-colors). ```py +values = ['Software Developer', 'New York'] +colors = ['darkblue', '$amber'] + q.page['example'] = ui.stat_table_card( - box='1 1 4 7', + box='1 1 4 4', title='Contacts', - subtitle=f'Last updated: 2022-04-13', + subtitle='Last updated: 2022-04-13', columns=['Name', 'Job', 'City'], - items=[ - ui.stat_table_item( - label='Joe Doe', - values=['Software Developer', 'New York'], - colors=['darkblue', '$amber'] - ) - ] + items=[ui.stat_table_item(label='Joe Doe', values=values, colors=colors) for _ in range(5)] ) ```