332 Value Boxes

App

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 800
import faicons as fa
from shiny.express import input, render, ui

ui.input_slider("number", "Select an amount", 0, 100, 20)

with ui.value_box(
    showcase=fa.icon_svg("piggy-bank", width="50px"),
    theme="green"
):
    "Save"
    @render.text 
    def save(): 
        return f"${input.number()}"
## file: requirements.txt
faicons

Edit this app

#| standalone: true
#| components: [editor, viewer]
#| layout: horizontal
#| viewerHeight: 800
import faicons as fa
from shiny.express import input, render, ui

ui.input_slider("number", "Select an amount", 0, 100, 20)

with ui.value_box(
    showcase=fa.icon_svg("piggy-bank", width="50px"),
    theme="green"
):
    "Save"
    @render.text 
    def save(): 
        return f"${input.number()}"
## file: requirements.txt
faicons

The source code for this exercise is at https://github.com/posit-conf-2024/intro-to-shiny-for-python/tree/main/docs/apps/332-value-boxes.