[ Live Core App](<%= item.core %>){.btn .btn-primary .w-100 .m-1 target="_blank"}
+::: + +:::{.g-col-sm-6 .g-col-12} +[ Live Express App](<%= item.express %>){.btn .btn-primary .w-100 .m-1 target="_blank"}
+::: +:::: + +<% } %> + +::: diff --git a/components/_partials/components.css b/components/_partials/components.css index 4337146e..5a054042 100644 --- a/components/_partials/components.css +++ b/components/_partials/components.css @@ -19,13 +19,13 @@ The article pages (/components/_____/index.qmd) get styling from here. /* Add rule and spacing between sections */ -section.level2:not(:first-child) h2 { +section.level2:not(:first-child) h2, section.level3:not(:first-child) h2 { border-top: 1px solid var(--bs-primary); padding-top: 5rem !important; margin-top: 5rem !important; } -section.level2:not(:first-child) > :last-child { +section.level2:not(:first-child) > :last-child, section.level3:not(:first-child) > :last-child { margin-bottom: 0; } diff --git a/components/inputs/action-button/app-kitchensink-core.py b/components/inputs/action-button/app-kitchensink-core.py new file mode 100644 index 00000000..61ffaea1 --- /dev/null +++ b/components/inputs/action-button/app-kitchensink-core.py @@ -0,0 +1,59 @@ +from shiny import App, reactive, render, ui + +# Create the UI +app_ui = ui.page_fluid( + # Add Font Awesome CSS in the head + ui.tags.head( + ui.tags.link( + rel="stylesheet", + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css", + ) + ), + # Main layout + ui.layout_column_wrap( + ui.card( + ui.card_header("Action Button Examples"), + # Basic button with width parameter + ui.input_action_button(id="btn1", label="Basic Button", width="200px"), + ui.output_text("click_count_btn1"), + ui.br(), # Add spacing + # Button with icon and disabled state + ui.input_action_button( + id="btn2", + label="Disabled Button with Icon", + icon=ui.tags.i(class_="fa-solid fa-shield-halved"), + disabled=True, + ), + ui.output_text("click_count_btn2"), + ui.br(), # Add spacing + # Button with custom class and style attributes + ui.input_action_button( + id="btn3", + label="Styled Button", + class_="btn-success", + style="margin-top: 20px;", + ), + ui.output_text("click_count_btn3"), + ), + width="100%", + ), +) + + +# Define the server +def server(input, output, session): + @render.text + def click_count_btn1(): + return f"Button 1 clicks: {input.btn1() or 0}" + + @render.text + def click_count_btn2(): + return f"Button 2 clicks: {input.btn2() or 0}" + + @render.text + def click_count_btn3(): + return f"Button 3 clicks: {input.btn3() or 0}" + + +# Create and return the app +app = App(app_ui, server) diff --git a/components/inputs/action-button/app-kitchensink-express.py b/components/inputs/action-button/app-kitchensink-express.py new file mode 100644 index 00000000..1ea5ed42 --- /dev/null +++ b/components/inputs/action-button/app-kitchensink-express.py @@ -0,0 +1,51 @@ +from shiny import reactive +from shiny.express import input, ui, render + +ui.page_opts(full_width=True) + +# Add Font Awesome CSS for icons +ui.head_content( + ui.HTML( + '' + ) +) + +# Create a layout with some spacing +with ui.layout_column_wrap(width="100%"): + with ui.card(): + ui.card_header("Action Button Examples") + + # Basic button with width parameter + ui.input_action_button(id="btn1", label="Basic Button", width="200px") + + @render.text + def click_count_btn1(): + return f"Button 1 clicks: {input.btn1() or 0}" + + ui.br() # Add some spacing + + # Button with icon and disabled state + ui.input_action_button( + id="btn2", + label="Disabled Button with Icon", + icon=ui.tags.i(class_="fa-solid fa-shield-halved"), + disabled=True, + ) + + @render.text + def click_count_btn2(): + return f"Button 2 clicks: {input.btn2() or 0}" + + ui.br() # Add some spacing + + # Button with custom class and style attributes + ui.input_action_button( + id="btn3", + label="Styled Button", + class_="btn-success", + style="margin-top: 20px;", + ) + + @render.text + def click_count_btn3(): + return f"Button 3 clicks: {input.btn3() or 0}" diff --git a/components/inputs/action-button/index.qmd b/components/inputs/action-button/index.qmd index f7d7cc29..ecd819c8 100644 --- a/components/inputs/action-button/index.qmd +++ b/components/inputs/action-button/index.qmd @@ -28,6 +28,13 @@ listing: - title: reactive.event href: https://shiny.posit.co/py/api/reactive.event.html signature: reactive.event(*args, ignore_none=True, ignore_init=False) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Action Button + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETAMJSoFJmTZwmAVQCS+tKgD6OpgF4mOrFADmcK40ADY6qgAU+kwxTMYiqqpMAGKkwiIA7nAsjLYmAMr5vBBWNkw2UKrRsb5kASwYFZHVsTUcGHX+DSFcANZRJa1DMVIhnrpgLGTYIdk2cGQTeC3DsWxSNONgbGRkqCyIAPSHhKoQAFYNhCHEWqqhUFIYJDCHUOdQAB6HPQBGLIcaGkALRQLI5eCHABsGAA7BgAEwnFgAqAhEIYGBcZ4opYrVoAShWBOWgxixgAslAuEwQlBsLdFmSfO06QytGRXCQwjAIK4MnQ0ANVizno9msyRb5COLXE0NFEwCJZBxSEwAEIcshqgCin1gqFmLAmJPxq2M6qgLA4hCYvy1aoyHGsTCdqhdqEesAWGjNw18XFQHNcMjkpFc9t2pAiHFUW1+ZAgAEYlrSoL84GMJpbrbbNVGDPhXbHrFsEQAGcuoT4m0ki1q+RlBzkUT5kRXXG29Lm3cgRxMpsCmyWrXy-OgREnk0SJViewhcfx+oYWh0lJ0um1qqBqJiqDgsdOzJJTCxwZcN9qB4Oh1V8yPaiDC+vDWPxxMIvEjl90jNZsAACIHkecBJPmj7Fi6DgkIWdYvkMW4QJ4tT1BgHARNcVosK4Ww0FAwI5D0SR4QRnCZqowJsGiihVEOcHwbE+6Hr8x6eAAKnQWhKBesTDgxjYcs2ritu2EydoQ3YkFofYJhAn50TxMRjhOU5xDOJ7zouilqeBjrOmwTCEFoUyMIZdIokwO4ntMsyWbsdAcJG2TaQGEBCbe4YPtG2mtG+EyyQAzF+DGtL+mZbPkNmgRqa7BSFMSYSiOH+YmBFaIQhDZMa+A+bEUwzHAWwwI8-hcMC2qoIgTAVtWADccUvnx8ECXswYiR2PQST20mcoFtbLk1wxuqWExJpWACkDVMMORIGHNxgAXANBcLY1i2CwGiKHQ+jqDQrCbQq15kBITYchIG0oneBKICsAACKjqHQHRwG2Ky7WZXbdTJA6Tjd36SAsWh0CUNDZmuTBJh9EkHEwIBHRgslJpOTCCEw5YAL4TPod0PRoz2vcy73iZJva9R+v3LlIZBAyDYMFtVUO9DDcNuRyCPkwSKN0GjmNgNjzL3ZQj340yrRE51JM9f2EABRT-1UzTTCg2AuklAFjPM-DgXI6jGNY3NRimOYlhWQD1PA6UtguM46BeKI6ARC47gcOdB10LNYDowAukAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPE2MdzoiABM4defMtYoAczgB9YqjIsAFDTGADbBngDuHLZkbAC8ACp0xnAAlE4QAMRMAIK2tkwAYqTC2eFwLIxwTADCAMq1TDSCvCQQLM4cGGxitp6tFOT+8kwjFp0AEvEAsgAyQxCji0wA5AA8wVwA1iJwwbGyYCxk2MHl3XBkB0xsojT7YGxkZKgsiAD0b4S2EABWLBiEYLEYy2GjBKCiAGMN5QH5QdRvDYAIxYbya5AAtFAyhV4G8AGwYADsGAATJ8dDDQhgYFwAToDgA+ZbDUZpCDs+RZaqiKAUJhQJjg7DA4SRGKsSqsVDiLhueTithjDDC0V9YjBYwwCAROhofyRaJxA4ARgADGaAKQHFKIVkjRXKwgQ2z+W32pYuZ10XrdKD2OhDMDZCQcUhMABCpjI4YAoupYKhTu0wJyFksRlkI1AWBxCEwkdHw47DRKZXr4BRHOmMy4jKZPOJJKRPIWnqR-FF7kiyBATQdzOCkbt7tnc-mo+2IAOmKXjWBSRbUOobekMyMAAI2AMYCjqS41pb2GhMQF5zbq4zkVu9k1uu2H9c7MjGOgLGgHScxhYm08bQibK8TAgPWZAYD2fZukwzRmgAvgca7ri4SKBikmY5HkkrwNKsoQPK06PqMWZFgsjp5uGUB2EwtgcCwUBIqc+RHHyciESMdYQCYZCNqGLZtt+8xPosXYHBBpIDh6T5DiOBwACK0fRjGRiRs4cBKACSrQSWxSzkRAsQuGQ7j-Bw-iAjmLCePcNBQBiFQbPkNl2Zwuy2BibBQMEMi2DaeCSeuNF0QxcC2AkSRwH5Olpk+W6UDue4Hk+x5-uel7XmJ97+Rmogvm+jSfippIpQBQEgZxpjgb2pJQTB8FgIhtadChUFMFkuRMVKLAyoQcoNUsxFTqpEqEMYRxKOZOgClRRwnFUfJkHQHBtuUWXKqBPHNjq-EdqtwmhaJvYAMzaUJozSXsBy1McSlfqQJ2nX+FlWQdEB2cYhCEOUKaRQ9rDXXA9wwBCbhcBiMaoIgTCLsuADc90ZtF66xXYDi7hoiUBXAJ5ngBaXcRBh2ZTpiw5a+74FYNh3FYBkNlVxlUQITaG1QhEBgLBAC6QA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/action-button/thumbnail.png b/components/inputs/action-button/thumbnail.png new file mode 100644 index 00000000..d1d0d967 Binary files /dev/null and b/components/inputs/action-button/thumbnail.png differ diff --git a/components/inputs/action-link/app-kitchensink-core.py b/components/inputs/action-link/app-kitchensink-core.py new file mode 100644 index 00000000..8aa0c0b2 --- /dev/null +++ b/components/inputs/action-link/app-kitchensink-core.py @@ -0,0 +1,38 @@ +from shiny import App, reactive, render, ui + +# Define the UI +app_ui = ui.page_fillable( + # Add Font Awesome CSS in the head section + ui.tags.head( + ui.tags.link( + rel="stylesheet", + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css", + ) + ), + + # First card + ui.card( + ui.card_header("Action Link Demo"), + # Create an action link with an icon + ui.input_action_link( + id="demo_link", + label="Click Me!", + icon=ui.tags.i(class_="fa-solid fa-shield-halved"), + ), + ui.output_text("link_clicks"), + full_screen=True, + height="300px", + id="card1", + ), +) + + +# Define the server +def server(input, output, session): + @render.text + def link_clicks(): + count = input.demo_link() or 0 + return f"The link has been clicked {count} times" + +# Create and return the app +app = App(app_ui, server) diff --git a/components/inputs/action-link/app-kitchensink-express.py b/components/inputs/action-link/app-kitchensink-express.py new file mode 100644 index 00000000..3c2351f9 --- /dev/null +++ b/components/inputs/action-link/app-kitchensink-express.py @@ -0,0 +1,30 @@ +from shiny import reactive +from shiny.express import input, render, ui + +# Add Font Awesome CSS in the head section +ui.head_content( + ui.HTML( + '' + ) +) + +# Set page title +ui.page_opts(fillable=True) + + +# Create a card to hold the action link +with ui.card(full_screen=True, height="300px", id="card1"): + ui.card_header("Action Link Demo") + + # Create an action link with an icon + ui.input_action_link( + id="demo_link", + label="Click Me!", + icon=ui.tags.i(class_="fa-solid fa-shield-halved"), + ) + + # Display the click count + @render.text + def link_clicks(): + count = input.demo_link() or 0 + return f"The link has been clicked {count} times" diff --git a/components/inputs/action-link/index.qmd b/components/inputs/action-link/index.qmd index 5dd6e803..b376f6ca 100644 --- a/components/inputs/action-link/index.qmd +++ b/components/inputs/action-link/index.qmd @@ -28,6 +28,13 @@ listing: - title: reactive.event href: https://shiny.posit.co/py/api/reactive.event.html signature: reactive.event(*args, ignore_none=True, ignore_init=False) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Action Link + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETACJwaXOEzJsrAVQCS+tKgD6OpgF4mOrFADmcK4WADYhUABGIXAAFPpMCUzGIqqqTABipMIiAO5wLIxWAMIAyiW8ENa2TLZQaSxwshyk8Ym+ZAEsGLWqcZWJA+2dGCFcANZ9A1OJUiGeumAsZNjR7HBwZAt4rdMDbFI082BsZGSoLIgA9JeEqhAAVl2EIcRaqjThUhgkMJdQ91AAB6XUYRFiXGhZAC0UDyBXglwAbBgAOwYABMNxY4KgYQwMC432xWx2UwAlKSydsDP0EsZ0hw6EsmIQoHRVKTfKz2ZNdly2apXD0NHEwCImqQmAAZcamOAwYgLKmkgbGIpSKAUJhQSoyOSS0YQMZMHIcGzayocEg03Y+DgYLioLRkVx65oQVyGiYq3YcVRHdQKz3jEm021McIROBzBZFUaEY0AWTgAEJQ+HElbSJ4hv4uhwYs8oNjXEcaFAoQVRmly5XONHVFC2LjFBywMqwwMO7bfK8zs7XBRAWRRV7XM8rWMWErqbaaFowq4WIQpJRPAAVOhaJQ+hK2Dj+E5HADMAAZT6hAenff6FtzVABGa8JDsUmlGOUWCBWGxWBp0RQ6H0dQaFYDRAJiR1nQkPsnTICQGmxd0yUQUkAAEVHUOgMCHTYwxAiNxnHeMpxiFDdxZV5yC8Co4IwQNiGDI0yKYQQmFPCipDILQ6EqGgFnXaovRqYsmCjSgWRIuA0hAEgtHIABfaw+HyBZ9A-dVpC1HU0i4njKl-bV0GcdAaLEVAYhcdwOAQ8CNDfMAFIAXSAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPCMoATOHXPGO8+QGImAQUuWmAMVLDXAdzgWRjgmAGEAZQjeCCYyNlCEqE8WOAkOUnl7DCTLAH0SckoyAAp5JgqmbIAJABUAWQAZMtjKtoByAB4AGy4AawtugF5ZMBYybG6ghLgyUaY2URoRsDYyMlQWRAB6bcJLCAArFgxCbuJjSxpuqFFTxm2oQ6h1bd6AIxZtml8AWihAsF4NsAGwYADsGAATHsdI9ut0MDAuKcdKMAHztcqVACU8jxEGcTAisyYqCgAHNQpIyFMshwsJS4HliKgyCwSjQOAioO8pkNanRjHACY4IC4wqIoBQmFAmIRbp4yMQFsRukqErL0qQmL0IH15P4OPEqgyFXRLJzjAi8ixCKJKAKhXBzAkOBS1isAMwABh9qHUo3MHEsK3NlgAjKMcYhsRVsuG8rkbGUwK5tbFGv0mAAROAwYjRsVtCVSmVQWLiSQ6vUDI0miu8Qpx00YIymPJVjIQPK1lptNohlbWAu9-pBlttG7vODDUZhXqEAb1OAAQgnrQHTdIQ2yZEpJw4JTOUB0eRWNCgv2CvU8l+vnFnll+bCg3RklmjeBbos3TBcOYcCwqA3Dw8ShGcHBLvKFzkC2AACogQNYdAYBQ6hzH+1g0Lq-QFIufQcjGk6VCQxjkEwQwxCYZAYCOxBjvqJQ4kwghMD6JEVKIZDGHQsQ0KMtSarWCynkwM6UPKBFwJ4IBkeQAC+cR8EEozyGACkALpAA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/action-link/thumbnail.png b/components/inputs/action-link/thumbnail.png new file mode 100644 index 00000000..b719f98b Binary files /dev/null and b/components/inputs/action-link/thumbnail.png differ diff --git a/components/inputs/checkbox-group/app-kitchensink-core.py b/components/inputs/checkbox-group/app-kitchensink-core.py new file mode 100644 index 00000000..3754ca7e --- /dev/null +++ b/components/inputs/checkbox-group/app-kitchensink-core.py @@ -0,0 +1,38 @@ +from shiny import App, reactive, render, ui + +# Create sample choices with HTML formatting for demonstration +choices = { + "red": ui.span("Red", style="color: #FF0000;"), + "green": ui.span("Green", style="color: #00AA00;"), + "blue": ui.span("Blue", style="color: #0000AA;"), +} + +app_ui = ui.page_fluid( + ui.card( + ui.card_header("Color Selection Demo"), + # Using input_checkbox_group with all its parameters + ui.input_checkbox_group( + id="colors", # Required: unique identifier + label="Choose colors", # Required: label text + choices=choices, # Required: choices as dict with HTML formatting + selected=["red", "blue"], # Optional: pre-selected values + inline=True, # Optional: display choices inline + width="300px", # Optional: CSS width + ), + # Add some spacing + ui.hr(), + # Output for selected values + ui.output_text("selected_colors"), + ) +) + + +def server(input, output, session): + @render.text + def selected_colors(): + if input.colors(): + return f"You selected: {', '.join(input.colors())}" + return "No colors selected" + + +app = App(app_ui, server) \ No newline at end of file diff --git a/components/inputs/checkbox-group/app-kitchensink-express.py b/components/inputs/checkbox-group/app-kitchensink-express.py new file mode 100644 index 00000000..cfd6607f --- /dev/null +++ b/components/inputs/checkbox-group/app-kitchensink-express.py @@ -0,0 +1,34 @@ +from shiny import reactive +from shiny.express import input, render, ui + +ui.page_opts(full_width=True) + +# Create sample choices with HTML formatting for demonstration +choices = { + "red": ui.span("Red", style="color: #FF0000;"), + "green": ui.span("Green", style="color: #00AA00;"), + "blue": ui.span("Blue", style="color: #0000AA;"), +} + +with ui.card(): + ui.card_header("Color Selection Demo") + + # Using input_checkbox_group with all its parameters + ui.input_checkbox_group( + id="colors", # Required: unique identifier + label="Choose colors", # Required: label text + choices=choices, # Required: choices as dict with HTML formatting + selected=["red", "blue"], # Optional: pre-selected values + inline=True, # Optional: display choices inline + width="300px", # Optional: CSS width + ) + + # Add some spacing + ui.hr() + + # Simple output to show selected values + @render.text + def selected_colors(): + if input.colors(): + return f"You selected: {', '.join(input.colors())}" + return "No colors selected" diff --git a/components/inputs/checkbox-group/index.qmd b/components/inputs/checkbox-group/index.qmd index 8613c6bc..2b6406e4 100644 --- a/components/inputs/checkbox-group/index.qmd +++ b/components/inputs/checkbox-group/index.qmd @@ -26,6 +26,13 @@ listing: href: https://shiny.posit.co/py/api/ui.input_checkbox_group.html signature: ui.input_checkbox_group(id, label, choices, *, selected=None, inline=False, width=None) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Checkbox Group + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETAMJSoFVrFQAbOE0JtiHQnBZMA7hzJsmACQAVAFkAGSYaQRgLOQgAc3DBJnUYUhYyOgsOUn1HZ1d3AF4mEH0mMqZdMClVSsQmHQwWVCgIAApKgCU4GvxWMmw7AsqSG0E6wwAxCYAGWemAbkqASjxS8srYqUpa+o5G5rbKgHEtg160gbghomJRunHZkRFZxbAVtbLKgCMbLTgdhpNFrtMAAIV+-3O-UGw1uYyYhjm0yer3eEAAvvp9GhUAB9HRMIoNZqxOC4mi-DiqdoQcq7DCEKB0akfOn0xnM3FsaTqOggkxwuhMADKcDssiytIAInAUstVrS2WVjABVFhceJcVBaMi4xxwQgAay+xAAHrjNsQtKhPN5fFAbDZeGR3M0MvAKHQWKy6Q0tTq9dyjSbzZbrTSlUqqdcRoJvb0EUwugBHHTVOpaCAcVP2KmUOQ0DgaH2RmxQL5i64mJzEFj2WNeyoSRMptPdOplitOiimsglpW5FxuAqD-LN4ytjjphxOIfuKDuVQuYReHz+YJhCJ0KJkGKxftsuviiiqArASrVJsVMA-P6VAC646YAHlUHJSA66qgpABaI8Gk8mHkB0-m9RVI3KLgbC4K4AjoP4n1fd9oBsOolyaMseFHNxeAgaCIH+cCINtVQfGuABmWZUFNK9EyQyVP1MYVhRInwDzRCDjBEVRVFYRh7CBQgNQPBo2D5DjI2MZ8dW1YQt1YMUAO6ICQLcES9itMhZNxHsyBBf9ZG6PVBXjCSyiWfQLIMaz1BoBS6EUPl-TICRNNkiQ6xYdVSCWRBWQAARUXkMF01lbIU48jIbFhWl8g8ODs5yGRM2K-KIiCpDILQ6FpGhKgATStCKlNUOoQAAcgkcqMAAK2cNokui2KlkxMAD0y7LaUqAA5YgHBM4rDJ6LFrJxQlRHQVocXxDgPI0RyljAdF7yAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPCMoATOHXPGO8+faxQA5nAD6xVGRYAKGmMAGyCPAHcOSzI2AF4AFTpjOABKRwgAYiYAYVEoClZYVCC4JkI2Yg5COF0I6KYACTiAWQAZJhpBGDzJCFd2wSZrGFIWMjo8jlJ5Moqq3RimEHkmFaZZMFFLdcQmZxZUKAg-dYAlOC38VjJsYpj1kiDBHfSAMReABk-3gG515Lxlqt1q5RJRtrsOBh9odjmAAOKgiDrcyjG5wO5EYiPOjPT4AQTxn1+YH+gJW6wARkEkuC9gcjusAELUuSXVG3e5Yp5MdJfd4E4mkiAAXzStTYEIwhCgdEsfmSiDJkulso8bDE1josKyXLoTAAynBihJJhAmAARODDP5pVY8pgAVRYXD6RlMHjKcEIAGsKcR1B4QcRjKgmOKmFAQrxfEwDuN4BQ6Cwlc43WQPeqfX6A0GQ8czXbVpEMQ9BMnLvazgBHeybHbGCAcGslSKUSQ0Dg2JV2oJQClGjFZcrEFglUtJ5ErTLV2vnHa9-tBJgUdRkburGaVaoxTdzcyVuA1jh10rlLe6KC6SyVYThxqtfp0LpkHqudcrUfGiiWGLAdabSdKRZdYAF190yAB5HxTUjHYtDgABaT8vW-JgpEjJJkwLQteAgIIuHRBIknApgoMkUhYMGDh9l7Hhd2qXD8IgORsMLCIolidYAGZPlQdRJ3tMiYKCHYsn1fUw0iaIlVSJFWMyPFLEsVhGBKaFCBdFNITYLVZKVTJ9T4IoSmDMgTGEMhiGUYgwlYI0UPONCMOqJUAAFRAgTUMBXNdWOsGg7K-c4PV1fwFXfXgArTKVQvlRVWJwlZRDIYw6DNGh1gATWDQKHMsHYQAAcnMQqMAAKwqI5ovHMLklFMAIuS1KzXWAA5KyatyiRznWeQwGFECgA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/checkbox-group/thumbnail.png b/components/inputs/checkbox-group/thumbnail.png new file mode 100644 index 00000000..f6eac67b Binary files /dev/null and b/components/inputs/checkbox-group/thumbnail.png differ diff --git a/components/inputs/checkbox/app-kitchensink-core.py b/components/inputs/checkbox/app-kitchensink-core.py new file mode 100644 index 00000000..1a406c7a --- /dev/null +++ b/components/inputs/checkbox/app-kitchensink-core.py @@ -0,0 +1,46 @@ +from shiny import App, reactive, render, ui + +# Define the UI +app_ui = ui.page_fluid( + # Card containing all elements + ui.card( + ui.card_header("Checkbox Demo"), + # Basic checkbox with default value (False) + ui.input_checkbox(id="basic", label="Basic checkbox"), + ui.output_text("basic_value"), # Individual output for basic checkbox + + # Checkbox with initial value set to True + ui.input_checkbox( + id="preset_value", label="Checkbox with preset value", value=True + ), + ui.output_text("preset_value_text"), # Individual output for preset checkbox + + # Checkbox with custom width + ui.input_checkbox( + id="custom_width", + label="Checkbox with custom width (300px)", + value=False, + width="300px", + ), + ui.output_text("custom_width_text") # Individual output for custom width checkbox + ) +) + + +# Define the server +def server(input, output, session): + @render.text + def basic_value(): + return f"Value: {input.basic()}" + + @render.text + def preset_value_text(): + return f"Value: {input.preset_value()}" + + @render.text + def custom_width_text(): + return f"Value: {input.custom_width()}" + + +# Create the app +app = App(app_ui, server) diff --git a/components/inputs/checkbox/app-kitchensink-express.py b/components/inputs/checkbox/app-kitchensink-express.py new file mode 100644 index 00000000..644fa59f --- /dev/null +++ b/components/inputs/checkbox/app-kitchensink-express.py @@ -0,0 +1,33 @@ +from shiny import reactive +from shiny.express import input, ui, render + +ui.page_opts(full_width=True) + +with ui.card(): + ui.card_header("Checkbox Demo") + + # Basic checkbox with default value (False) + ui.input_checkbox(id="basic", label="Basic checkbox") + + @render.text + def basic_value(): + return f"Value: {input.basic()}" + + # Checkbox with initial value set to True + ui.input_checkbox(id="preset_value", label="Checkbox with preset value", value=True) + + @render.text + def preset_value_text(): + return f"Value: {input.preset_value()}" + + # Checkbox with custom width + ui.input_checkbox( + id="custom_width", + label="Checkbox with custom width (300px)", + value=False, + width="300px", + ) + + @render.text + def custom_width_text(): + return f"Value: {input.custom_width()}" diff --git a/components/inputs/checkbox/index.qmd b/components/inputs/checkbox/index.qmd index 27b44687..0ae70f50 100644 --- a/components/inputs/checkbox/index.qmd +++ b/components/inputs/checkbox/index.qmd @@ -25,6 +25,13 @@ listing: - title: ui.input_checkbox() href: https://shiny.posit.co/py/api/ui.input_checkbox.html signature: ui.input_checkbox(id, label, value=False, *, width=None) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: checkbox + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETACJwaXOEzJsrAVQCS+tKgD6OpgF4mOrFADmcK40ADY6qgAU+kwxTMYAwlB0qkwk5FBcXP5MUCEhTHAhcPDkLNGxvoRJkeWxFRwYVcmutlDqdFFg8baEANYARsQAHqbFxLpgAJR4tXVxTABCUCwchKk9A8NMAO4cNkzqNFBaIcLyuVpWEQBiuSxwk7N1vlyoWmSuhBuDQxEcqp4Jv1lqsJhIQlB+oVAWAlis1l84H0fhNpk96hhiO83h8KEMyJ1gfDXOcwnBURJ5g41Ap-lpckwsWQcUwaIImETVuskZshuiYvz5t0eT8dns2LwIHsOAzSZdWHBhGRiEwACp0S6Cl4QHGfb7DKIQObG3gAiaoKT3D5y8n4JgQqEhGHC5FbXb7C1wK1MG1gn0XOCedWao0mtGh42+Jm6vEE82WxUkgOuWMUmLGamqWmqen5aPvVnsz3exGuvkRuaChL6kbuiWELQsZXMXaqGxahqvd56kUGwV1f4whtNxiuVvt-D92IO6ETF28sX7YfNsVtiURADMAAYt6gho9JxWTf6yZ5biF7jMjybx2wYdvd3zD8fw8eo9ju7HOsvR7eU3B8VRdMmEzbNc0ZD9hDZOhUkbFdb25MtZkeCAUP0IxRgsCArBsKx7joRQ6H0Q4FQIjQ-h1d4JHzMgJHuFgVlISZEFmAABFR2gwVMKxIzlCCTMkImYwUpDILQ6CNGgJgANQDRAmBALsyAwPihIAXwmWY2I4jQuIAshZhI4tExtf98SEljrxiUTxMkmS5IUpSsATa0A3UzSK20yhOO4uoSJ-GAx3+GwzIJYSrMkRVbNZeyyXkxTKOUgKgrXdywHQgwIASKQoAoaxbBydBnHQLxRHQCIXHcDg6I0QiULANSAF0gA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPE2MdzoiABM4defMtYoAczgB9YqjIsAFDTGADbBngDuHLZkbAC8ACp0xnAAlE4QkTEWHBiEUHS2-imI8kxl2bn5tp5sYvZ0-rJgAMK1hADWAEbE6kwAInAwxE1pEKXlAMRMAEJQLByETIRtXT1MmWxM9jRQIcJSUMHJTP4AYocsqeNlLkamnstwHd3q-lGxTZ1zC03mwVCdODBD5gWbzRaPZ49EbXJiwgACNnqGAo6jIsO2TC+4M8ByOcCKJQg5RJIjgZGMdGJNCaADVDslEEwQHcyBhsQsigBfJrpElTVpPVa9Da8CAcSSHJh446XYRkYhMRLJWG3CAmMgPFYvN62EFaOBy3EMuT4Jj-QHApqCqEiiWbA1y6Um37O-EJJJXYnlBFIhwojTo71lTGO8nG-GeVFkQmwkmiClUpg0sD0-FMlnq0xYbThmUElI8sB8yZMG3C9b2pbGFgK5iRaJsVU5VlaoU6uPld5NQg1usRKIxX6dsoWoEg8svStZXu1pQNrL+ADMAAYV6h1Gl8CO3clYudgpc8DuF3Emqv1+ph8GmKMSb7KMjoxi4DRq3OYAPG1HA7Gb-HyUpak6RNDNWVyPtGC-GJuV5CAwC5ABdIA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/checkbox/thumbnail.png b/components/inputs/checkbox/thumbnail.png new file mode 100644 index 00000000..24267469 Binary files /dev/null and b/components/inputs/checkbox/thumbnail.png differ diff --git a/components/inputs/dark-mode/thumbnail.png b/components/inputs/dark-mode/thumbnail.png new file mode 100644 index 00000000..a7a80885 Binary files /dev/null and b/components/inputs/dark-mode/thumbnail.png differ diff --git a/components/inputs/date-range-selector/app-kitchensink-core.py b/components/inputs/date-range-selector/app-kitchensink-core.py new file mode 100644 index 00000000..56fa1462 --- /dev/null +++ b/components/inputs/date-range-selector/app-kitchensink-core.py @@ -0,0 +1,73 @@ +from datetime import date +from shiny import App, reactive, render, ui + +# Define the UI +app_ui = ui.page_fluid( + # Add descriptive text + ui.h2("Date Range Input Example"), + ui.markdown( + """ + This example demonstrates a date range input with various customization options: + - Custom date format (mm/dd/yyyy) + - Restricted date range (2020-2025) + - Week starting on Monday + - Custom separator + """ + ), + # Layout wrapper + ui.layout_column_wrap( + # Date range input with all parameters + ui.input_date_range( + id="date_range", + label="Select Date Range", + start=date(2023, 1, 1), # Initial start date + end=date(2023, 12, 31), # Initial end date + min=date(2020, 1, 1), # Minimum allowed date + max=date(2025, 12, 31), # Maximum allowed date + format="mm/dd/yyyy", # Display format + startview="decade", # Initial view when opened + weekstart=1, # Week starts on Monday (0=Sunday, 1=Monday) + language="en", # Language for month/day names + separator=" → ", # Custom separator between dates + width="100%", # Width of the input + autoclose=True, # Close the calendar when a date is selected + ), + # Card to display selected range + ui.card( + ui.card_header("Selected Date Range"), + ui.output_text("selected_range"), + ), + ), + # Additional date info output + ui.output_ui("date_info"), +) + + +# Define the server +def server(input, output, session): + @render.text + def selected_range(): + date_range = input.date_range() + if date_range is None: + return "No dates selected" + + start, end = date_range + return f"Start date: {start}\nEnd date: {end}" + + @render.ui + def date_info(): + date_range = input.date_range() + if date_range is None: + return ui.p("Please select a date range", class_="text-muted") + + start, end = date_range + days = (end - start).days + + return ui.div( + ui.p(f"Number of days selected: {days}"), + class_="mt-3", + ) + + +# Create and return the app +app = App(app_ui, server) diff --git a/components/inputs/date-range-selector/app-kitchensink-express.py b/components/inputs/date-range-selector/app-kitchensink-express.py new file mode 100644 index 00000000..d70a2fbd --- /dev/null +++ b/components/inputs/date-range-selector/app-kitchensink-express.py @@ -0,0 +1,64 @@ +from datetime import date +from shiny import reactive +from shiny.express import input, ui, render + +ui.page_opts(full_width=True) + +# Add some descriptive text +ui.h2("Date Range Input Example") +ui.markdown( + """ +This example demonstrates a date range input with various customization options: +- Custom date format (mm/dd/yyyy) +- Restricted date range (2020-2025) +- Week starting on Monday +- Custom separator +""" +) + +with ui.layout_column_wrap(): + # Create a date range input with all possible parameters + ui.input_date_range( + id="date_range", + label="Select Date Range", + start=date(2023, 1, 1), # Initial start date + end=date(2023, 12, 31), # Initial end date + min=date(2020, 1, 1), # Minimum allowed date + max=date(2025, 12, 31), # Maximum allowed date + format="mm/dd/yyyy", # Display format + startview="decade", # Initial view when opened + weekstart=1, # Week starts on Monday (0=Sunday, 1=Monday) + language="en", # Language for month/day names + separator=" → ", # Custom separator between dates + width="100%", # Width of the input + autoclose=True, # Close the calendar when a date is selected + ) + + # Add a card to display the selected range + with ui.card(): + ui.card_header("Selected Date Range") + + @render.text + def selected_range(): + date_range = input.date_range() + if date_range is None: + return "No dates selected" + + start, end = date_range + return f"Start date: {start}\nEnd date: {end}" + + +# Add some additional information about the selection +@render.ui +def date_info(): + date_range = input.date_range() + if date_range is None: + return ui.p("Please select a date range", class_="text-muted") + + start, end = date_range + days = (end - start).days + + return ui.div( + ui.p(f"Number of days selected: {days}"), + class_="mt-3", + ) diff --git a/components/inputs/date-range-selector/index.qmd b/components/inputs/date-range-selector/index.qmd index c9e0774b..2bd64252 100644 --- a/components/inputs/date-range-selector/index.qmd +++ b/components/inputs/date-range-selector/index.qmd @@ -27,6 +27,13 @@ listing: signature: ui.input_date_range(id, label, *, start=None, end=None, min=None, max=None, format='yyyy-mm-dd', startview='month', weekstart=0, language='en', separator=' to ', width=None, autoclose=True) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Date Range Selector + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAEygrIEt4nvVi6ZVuzgAdCPUZMAzgAtOEbLxj9BTAILo8TOnCiEuANzjbdEFnDraArp3HiAxEwAicGgrhMyszwFUAkuJoqAD6tkwAvEy2WFAA5nAhNAA2tiwAFOJM2UxO6iwsrHDShHScqEaeFAAeZFk5MbIATJlgziJMAEpQEAlM-hCo1kIAotWwqMliYACUePXZMTBQdADWLMQA7hCZEDn7TKJgRyd7OQAq8tJMcOMqU0UwpNJkdCLXUMIUOj19CkNCTacbxMQwrTjEazXQhQsiMTgAL3YEL2xAqKOkiAWTAAtEwAMKwqRsb40ATLITpGAwAD0BRp2EZ2Bm2LxnWKr04BjghRJnjevU86SaAAZRTjRU0AKwss7ZPEAdTgcFWMjIKy4vSYpCYAFlSGxsKyCUTmNI4KgVuwBNiTsdjnKmHNsU4ADJQbCQwFvdCWbExZIer0hEipGAQEKbH27A45Jztb4Cv6DYZMIEgqDJZJMS1veAUOjSbH7GL-YYhPkhJNwGOxg6cFgRI6V6tHeaOutMQMAIzgySbYAAyn24AYXB1uoK28W6y8NRE+cKxQBmbQARnXc2yTgGwM4mbVGq+Yg7dcojcXktXTDXTW0y7XW9y-Qge4P5+PM9jMAUC5ES9FddN20Z9dQUbhrGYTNki2HlP1Pb8oGqP8KAAqV1zvJgHyfJxdSQiCoKzWDeREL8DjJOgKQHak6RYBkmTbbcXE4aRJg9JgKIpMj9jnQRDE4OBNgHCxCCgCxGOfXcuAPfjBLTHxUVQSgeW4nJNmVVZeLICINyYpUVUPQRrh1fVzHY9IRQiQdrDM7B1wiUzDVlTt9kDXprHiOAB0oCS3V+Dy+gopgnnIWQ6XY6B4CLBCDnNXNrToAcmEAJMJDnwJjCReKQ4qtOE6CYXsyHUyhj2ily1IbbwBzXEURQAUl8pgFUq2RtRoLwfF4FM6hi-YoGGYhCBg80InOOhrBMDLhqqTrRKmMz8s2BSmE+PleGuc0pm5FgyOdGKnHxFZCjhVgWLYpRNtHChClbGKYlEugMlUxZOAwB6WBCHwxMsVphy267x2+ScEiOPbypejAvQBEIajIVpLu2qtfmmMG61R7J0effIWD3UgDzWhQyW1YYAX9V6ofLWxWkrQniFB9tZXsCB4zcDwOs8c06GMOhxAsdrOe59IyzIbQKZFmRimkFEZixR0AAEzAsOgMFh7E+Yl-6eSRwV0hlsiW2RyIuoBDADZ15y604dqzb+a4ADlSDgWXwZ0OAyGsOg9iOB3So1q6VIdMitO0D8ohtk9O10d3PY4o5B3VNQ+UQJgQC0gBfURxBGcxj2TkBzwzwP5cVywMFsNW3GPEJad15263Do3hdNkRtYSXWyKtqvq3WpgHYgJ3ntd6O9hiVBWgABSmKBzT9sdVo6Vt0qG6fpBCAdYZxGBhgDxmYuDm4c7Dlvbs7Q1riidIPzxLSZmb7BorIqOPZH16ccMWtytH9IaG9yDe3y4g1sPQbRHNtPOZ9C6Y07MvaQq9qJkBxMuacMVd6OAJLoDoPQbpu2fuzFa6AgjoCNpoMewQwicG0ALSwsowBpwALpAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAEygrIEt4nvVi6ZVuzgAdCPUZMAzgAtOEbLxj9BTOnCiEuANzESGzOQuwY4AD1Qbp05aqELUAVzJ4mTzm40QWcOuPEPLCgAczgAfWJUMmkAChonABtE8IB3ThYyWQBeABU6JzgASgCIAGImAEEWFhlGOFY4aUI6TmjOPSYKczJAzgxZACZY0TAAEREmACUoCDCmAEkIZyEAUXNYVESxMBKIIJgoOgBrFmJUiBGIJhumUfuwcVz5WwtN7caYUmkyOhFbKDCCjqWbzRwuJjpLJMHRHTjEJy2QiIsiMTgAL3Y8OuUS430Q4gAtEwAMIoqRsYE0ASHISxGAwAD0NUZ2DZ2D2xKmTV+nG0cFqlIafzmDVigwADJLCZLBgBWTlMADqcDgxxkZCOXDmTFITAAsqQ2NgiaTyUY4KgjuwBAFHvbxHtxFDZO5+okoNgEWRwiREk4YBA0n9ULEigTrrcKiSNJNAUKQaLeMsIS6mFBkkx+DZOAAjD5Wv7wCh0aTiW5ujDgn1C8IisJXCsVjLZUa1+s7PDlps3D25uCJVtgADKA7g2iYE2BM1Foy7kZ7Py12SF4qlAGY3ABGbdFNxMCpLThcDMarVA-Q9m6UFgrkRrwabphbwZuddbvc3Q8QY+cU83i9ux7GAFDvCgHwlbdd33Cp9QUbgA3TZJzgFQCFybQ5zDAuAHzlbdXyYd9PwPA0oHMBDmAzRIUMFEQgKbak6FpIcGWZFhWXZOcv0nThpC2T0mEY2l6IrJdBB0Tg4FSIdfEIKBfC4kijxPRIYUk1JIVkShdVQSgBRE25UlVY4xLIbId24lU1TPQRbD1Q0fAE2IJWyYcnEc7Bt2yBzjT2K8mA9OYnFCOAh0oRSKgAGVBYL5kYpgvnIWRmQE6B4DLdDRMta1UToIcmEAJMI7nwbiyR+KRpGyv5cqYfsyCM7ShQy-z0kyHJRi3CUJQAUgi5UMmhYgaC6LTkxWAybigFxiEIajKryAo4Bg0k5oaLIGjk7ZHLoTTtPjSZeJkMd+RYeinXQipqlqQE5LoWpUVYXj+KUdaju2E7EzCei0yCW6WDDCN-N+o4WHCLT5L8EYR2OihainBoZy+3ZSn8gABbxfDoDBul6TLbl8YbKve2G61BHDwwmpt2zJphsjGlwMGp0Uw0p5thqZsFbAAOVIOBAf8q8NDIJw6GuUYeYvWwifHWH7ggVnblMtwALpjnLwFm4hZF64aFGYdNTUIVECYEBTIAX1EcRVh8C9jZAG8LceeXncumo6h4eSWF-UhTwUISsT1KBc29EaGml7RsXEdGbz8DAPHEAmL3CP3iAB+i1dp+myEZkRSeZvzbk4dnc47Xhud5-mey10XK1DUYAAVtigSq3pl9ML0+zsmFm5vpHCIcccJGAXH05HndEg3XCYFWk47dPPVsOnYgA4lTKKHPsAy+jq+uIIvZ0RsryCUNdbALmA37HahuETfW5Ou3jWkR290pnubH70YYDIQl1znM7xDAGbAAukAA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/date-range-selector/thumbnail.png b/components/inputs/date-range-selector/thumbnail.png new file mode 100644 index 00000000..ac1d283a Binary files /dev/null and b/components/inputs/date-range-selector/thumbnail.png differ diff --git a/components/inputs/date-selector/app-kitchensink-core.py b/components/inputs/date-selector/app-kitchensink-core.py new file mode 100644 index 00000000..6c86633c --- /dev/null +++ b/components/inputs/date-selector/app-kitchensink-core.py @@ -0,0 +1,137 @@ +from datetime import date + +from shiny import App, render, ui + +app_ui = ui.page_fluid( + ui.panel_title("Date Input Parameters Demo"), + ui.layout_column_wrap( + # Basic date input example + ui.card( + ui.card_header("Default date input"), + ui.input_date("date1", "", value="2024-01-01"), + ui.output_text("selected_date1"), + ), + # Date input with minimum and maximum date constraints + ui.card( + ui.card_header("Date input with min/max"), + ui.input_date( + "date2", + "", + value=date(2024, 1, 1), + min="2024-01-01", + max="2024-12-31", + ), + ui.output_text("selected_date2"), + ), + # Date input with custom date format + ui.card( + ui.card_header("Custom format (mm/dd/yy)"), + ui.input_date( + "date3", + "", + value="2024-01-01", + format="mm/dd/yy", + ), + ui.output_text("selected_date3"), + ), + # Date input that opens to decade view + ui.card( + ui.card_header("Start in decade view"), + ui.input_date("date4", "", value="2024-01-01", startview="decade"), + ui.output_text("selected_date4"), + ), + # Date input with week starting on Monday + ui.card( + ui.card_header("Week starts on Monday"), + ui.input_date("date5", "", value="2024-01-01", weekstart=1), + ui.output_text("selected_date5"), + ), + # Date input with German language localization + ui.card( + ui.card_header("German language"), + ui.input_date("date6", "", value="2024-01-01", language="de"), + ui.output_text("selected_date6"), + ), + # Date input with custom width + ui.card( + ui.card_header("Custom width"), + ui.input_date("date7", "", value="2024-01-01", width="400px"), + ui.output_text("selected_date7"), + ), + # Date input where calendar doesn't auto-close + ui.card( + ui.card_header("Autoclose disabled"), + ui.input_date("date8", "", value="2024-01-01", autoclose=False), + ui.output_text("selected_date8"), + ), + # Date input with specific dates disabled + ui.card( + ui.card_header("Specific dates disabled"), + ui.input_date( + "date9", + "", + value="2024-01-01", + datesdisabled=["2024-01-15", "2024-01-16", "2024-01-17"], + ), + ui.output_text("selected_date9"), + ), + # Date input with weekend days disabled + ui.card( + ui.card_header("Weekends disabled"), + ui.input_date( + "date10", + "", + value="2024-01-01", + daysofweekdisabled=[0, 6], # 0 = Sunday, 6 = Saturday + ), + ui.output_text("selected_date10"), + ), + width="300px", + ), +) + + +def server(input, output, session): + # Server functions remain unchanged + @render.text + def selected_date1(): + return f"Selected date: {input.date1()}" + + @render.text + def selected_date2(): + return f"Selected date: {input.date2()}" + + @render.text + def selected_date3(): + return f"Selected date: {input.date3()}" + + @render.text + def selected_date4(): + return f"Selected date: {input.date4()}" + + @render.text + def selected_date5(): + return f"Selected date: {input.date5()}" + + @render.text + def selected_date6(): + return f"Selected date: {input.date6()}" + + @render.text + def selected_date7(): + return f"Selected date: {input.date7()}" + + @render.text + def selected_date8(): + return f"Selected date: {input.date8()}" + + @render.text + def selected_date9(): + return f"Selected date: {input.date9()}" + + @render.text + def selected_date10(): + return f"Selected date: {input.date10()}" + + +app = App(app_ui, server) diff --git a/components/inputs/date-selector/app-kitchensink-express.py b/components/inputs/date-selector/app-kitchensink-express.py new file mode 100644 index 00000000..c5a86d5d --- /dev/null +++ b/components/inputs/date-selector/app-kitchensink-express.py @@ -0,0 +1,114 @@ +from datetime import date + +from shiny.express import input, render, ui + +ui.page_opts(title="Date Input Parameters Demo", full_width=True) + +with ui.layout_column_wrap(width="300px"): + with ui.card(full_screen=False, height="auto"): + ui.card_header("Default date input") + # Basic date input + ui.input_date("date1", "", value="2024-01-01") + + @render.text + def selected_date1(): + return f"Selected date: {input.date1()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Date input with min/max") + # Date input with min and max dates + ui.input_date( + "date2", + "", + value=date(2024, 1, 1), + min="2024-01-01", + max="2024-12-31", + ) + + @render.text + def selected_date2(): + return f"Selected date: {input.date2()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Custom format (mm/dd/yy)") + # Date input with custom format + ui.input_date( + "date3", "", value="2024-01-01", format="mm/dd/yy" + ) + + @render.text + def selected_date3(): + return f"Selected date: {input.date3()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Start in decade view") + # Date input with decade view + ui.input_date("date4", "", value="2024-01-01", startview="decade") + + @render.text + def selected_date4(): + return f"Selected date: {input.date4()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Week starts on Monday") + # Date input with week starting on Monday + ui.input_date("date5", "", value="2024-01-01", weekstart=1) + + @render.text + def selected_date5(): + return f"Selected date: {input.date5()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("German language") + # Date input with German language + ui.input_date("date6", "", value="2024-01-01", language="de") + + @render.text + def selected_date6(): + return f"Selected date: {input.date6()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Custom width") + # Date input with custom width + ui.input_date("date7", "", value="2024-01-01", width="400px") + + @render.text + def selected_date7(): + return f"Selected date: {input.date7()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Autoclose disabled") + # Date input with autoclose disabled + ui.input_date("date8", "", value="2024-01-01", autoclose=False) + + @render.text + def selected_date8(): + return f"Selected date: {input.date8()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Specific dates disabled") + # Date input with specific dates disabled + ui.input_date( + "date9", + "", + value="2024-01-01", + datesdisabled=["2024-01-15", "2024-01-16", "2024-01-17"], + ) + + @render.text + def selected_date9(): + return f"Selected date: {input.date9()}" + + with ui.card(full_screen=False, height="auto"): + ui.card_header("Weekends disabled") + # Date input with specific days of week disabled + ui.input_date( + "date10", + "", + value="2024-01-01", + daysofweekdisabled=[0, 6], # 0 = Sunday, 6 = Saturday + ) + + @render.text + def selected_date10(): + return f"Selected date: {input.date10()}" diff --git a/components/inputs/date-selector/index.qmd b/components/inputs/date-selector/index.qmd index f3935793..8e5713b1 100644 --- a/components/inputs/date-selector/index.qmd +++ b/components/inputs/date-selector/index.qmd @@ -27,6 +27,13 @@ listing: signature: ui.input_date(id, label, *, value=None, min=None, max=None, format='yyyy-mm-dd', startview='month', weekstart=0, language='en', width=None, autoclose=True, datesdisabled=None, daysofweekdisabled=None) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Date Selector + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAEygrIEt4nvVi6ZVuzgAdCOPqMmAZwAWnCNl4x+gpgEF0eJnUos4dHQFdO48WlQB9U0wC8TU1igBzOFZoAbUywAU4pkDHTmcIOE8rLjJPOH8wABERJgBJCFRjIQAFKDpYOAo6GSZ4uBhiUTAASjwAoKdPKGxiDKsSbxgIKwB3XNR-CCDBpgBiJgAhKBlOQmEKXjSMpjgAD1hUGNqh4IxCHL9NrbqQ3boWKzk4KAM6OJKaKGNPITY5xXSyCuqDw+23lpfYhUAQBGCo6CpgpgANyg3jgdgqACYAAyIgAsAFpkcCsaCqjUBj8jhhmmR3pEVmQ4jJwnBCBQziDPgSfl9CVtRolXgshF1OGQ5EwYIpuMZmFAICwhVBlqLmACmCQIDIyLlFGQZN9iSd9uyiU4dedLtdbkk-rz+YLhRAAPQwGXMrVbJzmqwA-pEw5AkSIsFOokQ-D+n4wuF2d0o9E6YHRtmerbWhFgSOY7G4v16+PS5ZJlMY4GIjEAZjxLPjcfjTlJ5IoyypFRpMXpcEZPsdmaCFY5xTNPKYfIFiuMKukCpoAntHw7gQNew9leOeyNV0McQAwsOyNJx3RJ0xfDAYDaWCwbdhsJV21mXTy3SJ51nAt6KEWM4+goGy+-Q8Z4UjUamOLYm+75MDuk5Joex6nueIGel2+ohNWLS1vWYCNnSDJ3i+V6HAhgycr27xMAK7BMMQqCUEUW6sHSK7QpwcBdP6s6nA+iE7EuFwrjcFQAMpkDkQiKLRuwGAxTG4Z6N7ku6z5wGikKftCsK-rmAG4um+CyIJghQoxXRJgYYliPiwbEshZAUnW1K0s2rYUIpZnTkw+FBIR3LEQOgpdHAcAANY6UJiguORAwALKkGw2AsYubHmTOcVnNxJoVAA6n5gUqkJRSkEwkWSo0Ukca6clgACACsSlgJCP5-smGlpsB2m+QF2WCHYwJuc6SEZDWlK2U2WGVcVgzdSMPaeYs3lMAA4oY9oDA0EAuMYrhwEwnjELsnicAAXuwnCkLFnHxS5gysclxqrhU827hKm0Sqt62jYcMn-Pe8kAGzVbVqn1XmTWlo9K1rW4RmmeNF29WSKEDQ2dnDSIP3OayX5DB5G3mv2lpDiOzB8iwAonTq7E-Jdy6pWAG74zjRNyK9PUYKVn3lSIADsv3aXV6noppzU6ITApJmiyLIqgyyM0MVZ9XDNkI0NLbYXAnOo3h6MEZNWN9l0Fx6IqsL6DkrDEHAMgQAA5EIDxbhihBbTSJNzgl2yGilN1gBoGTbQ7G0sJwMhQAARjELBS9DzO3mVAIABxczoPP-nzQOQjbPvEDSdgAGKwjSUMWbLVmoYNmFK7HUvjZj8xebjMiUYQnA0NMsxm6wAfB6HTtndeSWUx7fH143zcAkU-uByHLbh8SLMUGT8byQAnHBj6fi7gyJw1ydAaWa9BCPY8dy2djAEngH5lV2mn5pwIo+Cm9n8CqsALoa+rLsy7DRfw+hiNlyIS9qy2JXLW1dpq41av5fQwhsCj3bhPMOLlLpzyZm7a6vEwAZQCvoWB49O6AJKlHT650vRswoMCZEy8syr2IVsDegNt6UPjNFGQxAaAQIPvA4+yIdBfRfoEUYyJ7BMD4sYQq2AeFCL4uwYwpwio0Ncq-JmllrJoQwvZZW5CK6KLpsLCoRYxYS2XmyS8EhTEGBoLIQwUJVzmh0JZHQNIZBTFIJURABxRh8SsYYMCoj6RHWVLoUoUARK+LkE9SeeoAACehJSGAwKhA45jLGKwcnAYEvhXH+j0GQGRAwaD8V-lKAEiAmAgHNBgEEGSAC+EJTGDGifoOJCS9RJLUUjCgiIMluJctk3JYECkpJbiUspPIKk+mqbUg4DTYl0HiZSRJcALFtL-i+LpWT8h9PyWATxgzimlPKQCIsEyap1KCNM64cy6wLKWYU5WaI1k9I2XQPJAzS5FJEMMg5Ih7mVBqScqZMSLnNMGK025lUHk-F6c8-p2zClDP2aM8FvzJlRMBU0+ZLTFnJLecrL6ELDhQpebC3ZHyEXvDGRQPFyL-mosabM4Fe8sXLNSezfFWxCUwp2W8+FIzyUAlZdS8wtKZmXKnCCplYKRAxzZUMDlWyuX2R5V8ig0rBWnMCOc9FVzMU3JScrBeMrBhyteYqvZvKMgUrgAatVAK6Wiuudi9RIJkSGqCMa4l3KzXKrSS6m1pjLBCK0H0SwNhOAOK8XQExYAqlPyAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAEygrIEt4nvVi6ZVuzgAdCOPqMmAZwAWnCNgxwAHqjpwZM3jH6DeEVAFcyeJpogs4dc8c7jx9rFADmcAPrFUZGQAouMgAbOABeUTAAEREmAEkjUyYABSg6WDgKOh1IuBhiCPMaYyCgjwB3ThYyOVCAFTpjOABKRwgK6qZnIKhsYlMPEiDjGAhytNQ-CqqaiIBmAAZ51FUIpsRxJk2mdrlOzgxCVJY-IpKPGUJNSlCAMSggmThzOThOVzkycJRTfLA1ja2gOchzoLA8Lyg1jofgiORoUGKQjYFEMJjIqwBgM2AGImAAhKAyTiEYQoxRozFY5zk-rIuAwsB0gCMBSYEVZADd7o0vgAmea8gAsAFp5kzRSy-q0sVsAAKWKEYCiqdEQGWbaw0WRwEKEChg5l+f5q9WAzRkYx0NU0CIAZR1cD1cBYpLgiCYIBpZAwhqaAF92RITZsdnsDkcTsVShcrhBbvdHs9Xu9PhEEWRfsbTcCjuC4JCbAzomSEkJQzBFAB6GBQFZS4NY3HFuCoxLlxRMKBWJg11SumSUoH7L0eOkwhumiJ03kFQfq9n4OcyrlDMJj-lC8xMrdNPBLrEVuMRDcisUS2cT9W9vkCkVM3nC2aSveXzYtIOm+WURXK1WmzXarq+qjiIvJGusr5YualrWnaDpOi6dLup6pY+qBRoBmA0pbKGOagpGZwxnA1x3A8TxMC8bwfF86aZhB2b7CCYIQlCDIAMLGDIGbMDQAg1kIfgwDAlYsCwlbYNgLT1qaTYxF62ycB0hCcdxTC8XQ-H7tSpYgRQ46moCU4iLMrILuYK48set4Sue+BqXx7BfEJIliRJgamu++5flYNhKmof7qgBjxAc6ulwLM4H7maGQwWpcEhYhIjIV6aEUBF-qBpSuGMRGpzRpcxFxqRiYUcm1Fpj8qz0eqeHMfmrF2mQqRCB21iHNYTAcpwcBlBikGySWaIKR0bUFp13W9ZB2lomFDJ0oKplYXZFlhFZQo2WKrJcc1XU9V8o3WH1XkKr5v77kF8HAfNkWQdFFpWnFYD2glrrJah10ZVhH44Ypuy1QR+WxvGZFJlRqbfBmVVaTloJ5gW0IRAA6sRADWshNYIOikEwACypBsNgfUyUwzatmWv3bKj6PNYorhMNjeNWD00MYCOY5GRQACsi2ctyq1gCeG3PpTcAo9tgihEynmQd5P7+edcBasFjpXSInM3QZWzQQ9NpPZdzqvR6KV0urn3YSGFP-Xl5wFSRCbkZRKY0ZVfzVTKtVww1YAAOI2DWardBArjGG4YjSeqA0tvJoa+xpXZMIHwehyzbMiHNIgAGw88tfM3utZ6bXZich+4+1h9Ln4nXQfkqgrSv6wamca5rFgxTr8UqwbSFG+9Tdm99FsdFbUY20DxUO2V4O0VDU0w3V8PsSp0hTNURMRyTcmlsNuzKVxy+VKvs+szp7OMiIADs2fmbna2nuKhfmCvMxgIKizLEdMtVzXAUyhdCVhefZumttawT1i9buKE0SpTgIA-uWVLZzwBqPQqwMSqO3KhDOiLMmKe0LBEAAgj8QgQRiCPFYJwGQUAABGIQWBrxlJHMm29OxEJIWQlgFDqG0JTifNOHM4AAA4r6dRvgLayBdha0WIaQsI48K7qllqdeWkE-6d0bhQARQCDIgMes9NRhtIGmGgZouBDZsrhnwtbIidsQalTBs7SGrtsG5hYngp6qBHScBoMSfs5DKE0OdPQxsG9BptgpjIDxhAvE+LpDoDh-juFH1TnpKKWx+EAE4LwtzZEtF82SVp5zvrZPJLdYnxK4c6UIwBb42SZNzOyNSzxMizg0sR+dxRMkvmAAAuiUmU8iZSKOrmdFRitAJqLCukrRpodG6z0QhAxxsRBTNMYCcxTEkHWKKvbUGTsKqOKzDVOeuCEZgGRqLb8cTOEBLoeHBhISo5b1DBEzx3iSQEyxlqMoVNyk3J4TNdmt00lnwoEyeYWSW5mVSZsApjT77PmhcIbAMhiA0G+aLX5tCqnzHMBnXpOImDzCYKEJgtpjBM2wLi4lpL2CWgJvuAZWIhnfzruMhCYUwXTPVLMjuCyIFLNBfMDCgYwB+m6UAA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/date-selector/thumbnail.png b/components/inputs/date-selector/thumbnail.png new file mode 100644 index 00000000..b1397c43 Binary files /dev/null and b/components/inputs/date-selector/thumbnail.png differ diff --git a/components/inputs/numeric-input/app-kitchensink-core.py b/components/inputs/numeric-input/app-kitchensink-core.py new file mode 100644 index 00000000..060e2f11 --- /dev/null +++ b/components/inputs/numeric-input/app-kitchensink-core.py @@ -0,0 +1,59 @@ +from shiny import App, reactive, render, ui + +app_ui = ui.page_fluid( + ui.h2("Numeric Input Demo"), + ui.layout_column_wrap( + ui.card( + ui.card_header("Basic Numeric Input"), + ui.input_numeric(id="basic", label="Basic numeric input", value=10), + ui.output_text("basic_value"), + ), + ui.card( + ui.card_header("With Min/Max"), + ui.input_numeric( + id="with_min_max", + label="With min and max values", + value=5, + min=0, + max=10, + ), + ui.output_text("minmax_value"), + ), + ui.card( + ui.card_header("With Step Size"), + ui.input_numeric( + id="with_step", label="With step size", value=0, min=0, max=100, step=5 + ), + ui.output_text("step_value"), + ), + ui.card( + ui.card_header("With Custom Width"), + ui.input_numeric( + id="with_width", label="With custom width", value=42, width="200px" + ), + ui.output_text("width_value"), + ), + width=1 / 2, + ) +) + + +def server(input, output, session): + @render.text + def basic_value(): + return f"Current value: {input.basic()}" + + @render.text + def minmax_value(): + return f"Current value: {input.with_min_max()}" + + @render.text + def step_value(): + return f"Current value: {input.with_step()}" + + @render.text + def width_value(): + return f"Current value: {input.with_width()}" + + +app = App(app_ui, server) diff --git a/components/inputs/numeric-input/app-kitchensink-express.py b/components/inputs/numeric-input/app-kitchensink-express.py new file mode 100644 index 00000000..02c56fae --- /dev/null +++ b/components/inputs/numeric-input/app-kitchensink-express.py @@ -0,0 +1,46 @@ +from shiny import reactive +from shiny.express import input, ui, render + +# Set page title +ui.page_opts(full_width=True) + +ui.h2("Numeric Input Demo") + +with ui.layout_column_wrap(width=1 / 2): + with ui.card(): + ui.card_header("Basic Numeric Input") + ui.input_numeric(id="basic", label="Basic numeric input", value=10) + + @render.text + def basic_value(): + return f"Current value: {input.basic()}" + + with ui.card(): + ui.card_header("With Min/Max") + ui.input_numeric( + id="with_min_max", label="With min and max values", value=5, min=0, max=10 + ) + + @render.text + def minmax_value(): + return f"Current value: {input.with_min_max()}" + + with ui.card(): + ui.card_header("With Step Size") + ui.input_numeric( + id="with_step", label="With step size", value=0, min=0, max=100, step=5 + ) + + @render.text + def step_value(): + return f"Current value: {input.with_step()}" + + with ui.card(): + ui.card_header("With Custom Width") + ui.input_numeric( + id="with_width", label="With custom width", value=42, width="200px" + ) + + @render.text + def width_value(): + return f"Current value: {input.with_width()}" diff --git a/components/inputs/numeric-input/index.qmd b/components/inputs/numeric-input/index.qmd index a2ac7686..38559218 100644 --- a/components/inputs/numeric-input/index.qmd +++ b/components/inputs/numeric-input/index.qmd @@ -26,6 +26,13 @@ listing: href: https://shiny.posit.co/py/api/ui.input_numeric.html signature: ui.input_numeric(id, label, value, *, min=None, max=None, step=None, width=None) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Numeric Input + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPrSoA+jqYBeJjqxQA5nGM0ANjtUAKfUy9WOGNgCYPMAA5LXg6DkImAEkIVC1hABE4GGJdMABKPE9vaycobGIE4xIXGAhjAHc6NA8IbwafDEIoOnccxsbrFrbjNml1OiCAISgWSKZQ8InY+LJ0rI7O3N8uOeMIMI1Itw5Vc3SAIzHI9Il8w7gnA7BR8ajN6ai1hLOmeSgXOHMARgAGRb1ZYNaxFMjrCgADzIQWO92MHy+C2yQM6gOB3Va7VRwKaPVUfQGGiCAHUOGQ2EwALJcAD0VKgkORSwxqzixUe20IdVxyz2N0q5LYxhgXBFjLOLN5TAuVxuZIpTFF9SgaiVjPeny0cBYkpx0s1X3MAFYUQaGsrzH8zeavDBGb9rVK0TbeaCEhC4NCgsr7ZCEVq4Mz9d50ctMW0edKIwT+lBBqShUwAMoUVApjgALyDmVduOsLzIGy2EW5ztx-PSgopxhYabesuu6QVlLrcHT42zb0R2qtEkt1vVkMdg7bqBN5YaYbdvjBnu96THAaRufL066vnxUZnzSxhPjxObSYAwlo64wmGTVBTgwaC+yi5zS9vzZWwNXhYLr2wG1BLk2wBbJhCDPMgLy-G98ENXsABZ-AkCC2Bufw-j+VAmTASdQzzVkMDnYooRhKs9hrHsc3XKccO8RDfiYWkmHgpYMn0ZiDDY9QaFYDRFCGQsJHwsgJBYHVxlIDJECWAABFRBgwQilg4pg4UiZdtTccTyykMgtDoeoaHSU86BUYQyMQJgQELDBlO5DIAF90n0KSZI0OSvXmHFFN9RlVLgdSJJDLwtJ0vSDJ04zoLgMyLIfDAPxFMU-XU+zMLYhppMoWT5I8uBOKXMi-M0uBtN0ph9LAQzwtM8zLLisckoc1LvHStQXKyhpFMQnyCoCyQiuC0rQqMygTMDKKaqFKoSLYeqUsc6B0AsUR0DcIxTA4ITuI0ViwFsgBdIA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPE2MdzoiABM4defIDETAMpxhqKAHM4TSTIAGzkISyxfOAB9YlQyFgAKGmMgoKiAdw5bMjYAXgAVOmM4AEonMI4MNgAmBNkwADljeDoOQiYASQgTYQAROBhierKIeUyci0qgqGxiUyiSIOaIDLo0BMzsvIBGJgB6JmqSxHkmM6ZxtkmMQig6WwTj0-OX8Nv7qLYxezo6sAAhKAsNpMJotEFdHrDZ4vM7hIzzMLgwgJLK5eoAIyBbXq5mmGLgQXRAOx7SRDhBCLIuKYUigSzguW2AAYRjDYQABGw-DAUdTUiCw872GhMLHAwhROkMx4nQVC2GiMjGOiCmj1ADCKpswmlxUQTBAVIw4rajwAvvVyi9Ltd3g8nvKhW87rZPt8HH8AOocCYAWS4ez9UHU0KdsPh3URzQpKPZCt4tmJlyiMC4qZDNPxhOJPomacFUDsTBgIdp9OKLBpesZAFZzAXcsyGyGmcz4+c2eGXlzKDy+QKEyKS1xS+opRW4LKO0KlSq1ZrtZRdZODUao2QMCmCxn1BaraNw7aXfdp93zie3V8oD9vb6rm4KKh3BwAF5yMAjBORnpRcmtONzyFNF6hTFgnyzKACSJeo8yucC4GfYF32rScmwbLh0JLVsWWbVgn1yWsZyYLsE17OwHF5DRBwVYcENQCcZUdBMXjnVUmHVMAtToHVywZNdjTAp99zAa1zmPSp7TPb9JNdd0b09WD7yYLVwKUH0tjDGSMCpP8YwAuogNhECwBTTYckg6Dc2UwhjDU5hzLYVCGVyAAWapzEc4lqmZZlUFDUSjNIhVyP7ajiOHRzGOKaSWLONiFy4pdyD4-VDUE+8MiyHIRPkMBzQAXSAA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/numeric-input/thumbnail.png b/components/inputs/numeric-input/thumbnail.png new file mode 100644 index 00000000..35c33fad Binary files /dev/null and b/components/inputs/numeric-input/thumbnail.png differ diff --git a/components/inputs/password-field/app-kitchensink-core.py b/components/inputs/password-field/app-kitchensink-core.py new file mode 100644 index 00000000..b18cb8db --- /dev/null +++ b/components/inputs/password-field/app-kitchensink-core.py @@ -0,0 +1,54 @@ +from shiny import App, render, ui + +# Define the UI +app_ui = ui.page_fluid( + # Card container + ui.card( + ui.card_header("Password Input Example"), + # Create password input + ui.input_password( + id="pwd", + label="Enter Password", + value="default123", + width="300px", + placeholder="Type your password here", + ), + # Checkbox to show/hide password + ui.input_checkbox( + id="show_password", + label="Show actual password", + value=False, + ), + # Output for password length + ui.output_text("password_length"), + # Output for masked password + ui.output_text("password_masked"), + ) +) + + +# Define the server +def server(input, output, session): + # Show current input length + @render.text + def password_length(): + pwd = input.pwd() + if not pwd: + return "No password entered" + return f"Password length: {len(pwd)} characters" + + # Show masked or actual password based on checkbox + @render.text + def password_masked(): + pwd = input.pwd() + if not pwd: + return "" + + if input.show_password(): + return f"Password: {pwd}" + else: + return f"Masked password: {'*' * len(pwd)}" + + +# Create and return the app +app = App(app_ui, server) diff --git a/components/inputs/password-field/app-kitchensink-express.py b/components/inputs/password-field/app-kitchensink-express.py new file mode 100644 index 00000000..a0287335 --- /dev/null +++ b/components/inputs/password-field/app-kitchensink-express.py @@ -0,0 +1,43 @@ +from shiny.express import input, render, ui + +# Set page title +ui.page_opts(full_width=True) + +with ui.card(): + ui.card_header("Password Input Example") + + # Create password input + ui.input_password( + id="pwd", + label="Enter Password", + value="default123", + width="300px", + placeholder="Type your password here", + ) + + # Checkbox to show/hide password + ui.input_checkbox( + id="show_password", + label="Show actual password", + value=False, + ) + + # Show current input length + @render.text + def password_length(): + pwd = input.pwd() + if not pwd: + return "No password entered" + return f"Password length: {len(pwd)} characters" + + # Show masked password + @render.text + def password_masked(): + pwd = input.pwd() + if not pwd: + return "" + + if input.show_password(): + return f"Password: {pwd}" + else: + return f"Masked password: {'*' * len(pwd)}" diff --git a/components/inputs/password-field/index.qmd b/components/inputs/password-field/index.qmd index 2e7b6aa9..39ac469e 100644 --- a/components/inputs/password-field/index.qmd +++ b/components/inputs/password-field/index.qmd @@ -25,6 +25,13 @@ listing: - title: ui.input_password href: https://shiny.posit.co/py/api/ui.input_password.html signature: ui.input_password(id, label, value='', *, width=None, placeholder=None) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Password Field + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFUBiJgBE4NLnCZk2BgKoBJVWlQB9JUwC8TJVigBzONZoAbJdIAUqkxBTJoAwlB00kwk5FD6dIHBzoQR-onBSRwYKZHWxlCydAFgAApQLCwA7oJRZhCoCsIAogAesKhecMpgAJR46RkhTKFSUBRMqOVVNbz1jQMZzlwNZNaTFdWRARCDu7zS9t2oldLd-Tt7GV5QAEZwXodgTeRyTGUbNWcLewBuUD5wR6yGhQBReMgARgATABmL4XS5BSocaRGR4wgAMGNQLXhiOCHSghDgbGIXkKjwAKthUAZsMQFHQJlNNlFjFI8Xs+t8gmFjIQANY3YgtQzEVikyoAek4smZH0iPKcWWWjWshH5QpF23xQRRj3YxEqaxZn3wSqut3ujwAypKmESyAp-vLporzQjEX8AfYAGL-Fhwc6XbmejKaADyjRWTBogldrKYnQgriMSucDLIK2sFBaZGK6zd0msydTbG6ocukejjVj8Zg5QFcCihdZ6aymezufzR1NuQbLCbp16weCPVU47UU80Oj0EAMRgMgboPzkqmBrDkq6KqrIEk7jQkgYqHFIPUQA00dqN0UZUnIsxjpbTnoAAvfChhuwMN62aiXKDLPxzyVY4okcXcsBOYClQ4GgmAgYhhDAi8wz2KQnToHZugAOXFP9IiYSgKCkYclQwxkdhobp3iLJNAKMRAmBAZM-DAnoAF9ojYCJHTkFhulUS8mGvSomAHIcmHjR1nS8BMZhucpmyknYNTgQVhVxN8PzkL84DzH9dHk-tG2bYDUMuMCHEfRooP8SdLjghCkImE4LN1CisKYQSwCEtC9XgyDDWNAj7Pc-FPKomi+2kJiQDAjjBP8oivEDcLEUi2NugAWVMlsYrigByAAqQqmGK+iIDYk5OKSvywlGcYoAgKJMsXB10EsdBrLEVA-CsWwOCPLc5EnMAOIAXSAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbDOAD1R04LFkw4xUxOmTERUAVzJ4mQiABM4dZfI4AdCPoDETAMpwZqKAHM4TMhzIAbOPp1ZrcAPrFUZFgAoaeUdHTwB3DjUyNgBeABU6eTgASn19COimN0IoOjV-ZMR9JhKsjgwcvM82OCgNOn9dMAAFKBEwqTUmAEk5RSYAUT5YVGcm1IMIUqZjAGEhKAomS3bO2QUyYtK3Lg3PFZYOvMap6dLImKbUMLUmvC2zpkcoACM4R0uwAfJNJlbVvJ3B5nABuUEcSU+GhoUGCZAAjAAmADMQNOjwiUViTWRAAZcag+GjHiVRlBCHA2MRHPVPnFsKhbNhiPI6Ms2oc1jUhMTShNgXMaoQANYvYh8OzEVhUsIAek4GnZANu6LKGF2ik8hCFovFJxJYjUn3YxDC+w5R1u+GB02ebw+TRMMqY5LI8nBSs5gOtqumYIhcBiADFwSw4PdVfzVcYnaamIRWaoZBqZM4IFZosCAAKqeoYCh8Taq6Gey2eNMZtgFIq+0rXLoxdaKLA3Ao2840JgQYgWG41g3TIRuuhTJoAOSlB0tTEoFCEVvbJSHrKmNCa-y9XQr0UQTBAaf89eSAF942xcq7NCwmmlo6ZnTA2sK4F0p51s7nNPn+EXpiW31Uj4sM++SFIuyw3EwjYpi2oHgRwnbdr2aj9gOS7mCuTA3mAt4GghTZkBgJpmgBoGoWhy4jkwa4tBanS7iA9bHjetYlO8YbkQOlGrk0ACyT4vqW9F7gA5AAVCJTBiU8lCHjcJ4sWAx4ALpAA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/password-field/thumbnail.png b/components/inputs/password-field/thumbnail.png new file mode 100644 index 00000000..bb8f759c Binary files /dev/null and b/components/inputs/password-field/thumbnail.png differ diff --git a/components/inputs/radio-buttons/app-kitchensink-core.py b/components/inputs/radio-buttons/app-kitchensink-core.py new file mode 100644 index 00000000..54de3256 --- /dev/null +++ b/components/inputs/radio-buttons/app-kitchensink-core.py @@ -0,0 +1,36 @@ +from shiny import App, reactive, render, ui + +# Create sample choices with HTML content +choices = { + "choice1": ui.span("Choice 1", style="color: red;"), + "choice2": ui.span("Choice 2", style="color: blue;"), + "choice3": ui.span("Choice 3", style="color: green;"), +} + +# Define the UI +app_ui = ui.page_fluid( + ui.card( + ui.card_header("Radio Buttons Example"), + # Create radio buttons with all possible parameters + ui.input_radio_buttons( + id="radio_demo", # Required: unique identifier + label="Demo Radio Group", # Required: label text + choices=choices, # Required: choices as dict with HTML content + selected="choice1", # Optional: initial selected value + inline=True, # Optional: display buttons inline + ), + # Output for displaying selection + ui.output_text("selection"), + ) +) + + +# Define the server +def server(input, output, session): + @render.text + def selection(): + return f"You selected: {input.radio_demo()}" + + +# Create and return the app +app = App(app_ui, server) diff --git a/components/inputs/radio-buttons/app-kitchensink-express.py b/components/inputs/radio-buttons/app-kitchensink-express.py new file mode 100644 index 00000000..4b6fc7f0 --- /dev/null +++ b/components/inputs/radio-buttons/app-kitchensink-express.py @@ -0,0 +1,30 @@ +from shiny import reactive +from shiny.express import input, render, ui + +# Set page title +ui.page_opts(full_width=True) + +# Create sample choices with HTML content +choices = { + "choice1": ui.span("Choice 1", style="color: red;"), + "choice2": ui.span("Choice 2", style="color: blue;"), + "choice3": ui.span("Choice 3", style="color: green;"), +} + +# Create a card to contain the radio buttons and output +with ui.card(): + ui.card_header("Radio Buttons Example") + + # Create radio buttons with all possible parameters + ui.input_radio_buttons( + id="radio_demo", # Required: unique identifier + label="Demo Radio Group", # Required: label text + choices=choices, # Required: choices as dict with HTML content + selected="choice1", # Optional: initial selected value + inline=True, # Optional: display buttons inline + ) + + # Display the current selection + @render.text + def selection(): + return f"You selected: {input.radio_demo()}" diff --git a/components/inputs/radio-buttons/index.qmd b/components/inputs/radio-buttons/index.qmd index 7b3dec75..a0d5b4c4 100644 --- a/components/inputs/radio-buttons/index.qmd +++ b/components/inputs/radio-buttons/index.qmd @@ -26,6 +26,13 @@ listing: href: https://shiny.posit.co/py/api/ui.input_radio_buttons.html signature: ui.input_radio_buttons(id, label, choices, *, selected=None, inline=False, width=None) +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Radio Buttons + core: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETAMJSoFVrFQAbOE0JtiHQnBZMA7hzJsmACQAVAFkAGQdSCnJ9R2dXdwBeJhB9JlSmXSInFzgARgzEJh0MFlQoCAAKDJMs1yY8-FYybDt4jJIbQQKpVQBuDIBKPBS0tpq4ACZ8wo5i0oqqsaZJhpYmlrbiDroCgCMbLTg+sEHh1NHYuABmKaKSssqwaouma5W1uFaiTc6mAHMpShHE4QAC++iMTAAInAaFx7D57ABVACS+jQqAA+jomIkiqVfnAMTR9hxVJUIGlphhCFA6GTTpSqTS6Ri2NJ1HQHgAlKCqDjEJgAIS0ZDIpHcAFEAB7WOwDIYUxmpYxmaSWOi8-lMHYisUQdxeHxMKA2GxMAQsFgcPb2Uoa+AUOgsBmUopcVAijEavnEDE60Xi8lKpWkz7e-kY9QwYgZCRMYxcuAARx03QKWggHBT9lJlDksI0LuDNigOzgNk+0OjTB5PqYAHEGFpULHlTXk6m4KoCiWy2aKFKyEWlTFsix4qO4nGEx2OGmHGN3FB3HzZJ5vL5AqFwuQ88PGSxy3BZF3PpPcq340wAPKoOSkE0FLjeDgm1hHk+qJjyE0HfeUrgbDheIAjoA5pxvO9+WgGwCj5EoSx4f09XcQC4X3YFgyva8RQ9YQaEEJh4NsKBsC4X53zsWRoP3IpiFwz0BzIB5Dyo+8DGOBVKX6fQeIMfjjGhWEIHhNl3zoRQ6H0dQaHEyTyndEUJHosg8IkQ9LWg-pEAZAABFQOQwJiGRkyjj3Y8ptP3KQyC0OgKRoDIAE16LMz8ChARSyAwcNfSjYhLLBMBwQE0xzEsMovxsuyKQRY10DRdAcVEdBynRLEOHUjRJL4sAQQAXSAA + express: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPCMoATOHXPGO8+QGImAZTjDUUAOZwmksgAbOQh7LB84AH1iVDIWAAoaY0DAyIB3DksyNgBeABU6YzgASkcIFwBhUSgKVlhUYKZCNmIOQjhdDOymAAk8gFkAGSbSCnJ5Ztb23RymEHkmRaZZIha2uABGFcQmMJYvCHiVirX2pi38VjJsYJyVkkDBHdFLAG4V4rwFpfvTuAAmba7DgYfZQQ7HP5MQGXFjXW73YiPOg7ABGgSK7zAn2+i1+UzgAGYgXsDkcwCcCUxibD4XA7kQkU8mN5RJQsTiIABfMqVaq1KBNKB0Sz+YgjchQLj+Nh+OhQSwccWo0xkUi6cGi4imExkeRdNjAjCEYWWeLFRC4o0mkWRWUKmzkgBKCqVTAAQqr1UwAKLqerBD5lJZMPliWryxXKr0QTocbpQFJMAQ6DjovxeeXwCh0FhWsJGUyRSNKyIqshq2NHCAhkOZBkl4iRawwYgrcyhphOuAAR3sLx2xggHD7fkylEkNA4NitIcCUFRcECDIAInBW13XeKAOIMYyoduLFzdvscAdMeeLwL+DR6mu1xaTdYsHJP6Yd4+9-twSw7N8dJgoF0RUJCYA1egGYYSHICdZyWFglzgCQfwZf8Lg-JgAHlYiVaBAh2Lh4w4RNWEQ5DRSkRMijgxYuECLh6QKIoMOwyRSETHZFX2eceHLStdDohirVKCArRcFcOG4qAeGyPxCGMOhRHIUjggkXCrQAASU6w6AwCh1DvENrBoFSkLYw4LRoiwyAUmsaBWABNbVTPInYQELMgMEbZt12Ic0eTAeQwC5ABdIA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/radio-buttons/thumbnail-old.png b/components/inputs/radio-buttons/thumbnail-old.png new file mode 100644 index 00000000..c72b8ac3 Binary files /dev/null and b/components/inputs/radio-buttons/thumbnail-old.png differ diff --git a/components/inputs/radio-buttons/thumbnail.png b/components/inputs/radio-buttons/thumbnail.png new file mode 100644 index 00000000..f9df4987 Binary files /dev/null and b/components/inputs/radio-buttons/thumbnail.png differ diff --git a/components/inputs/select-multiple/app-kitchensink-core.py b/components/inputs/select-multiple/app-kitchensink-core.py new file mode 100644 index 00000000..2b33452a --- /dev/null +++ b/components/inputs/select-multiple/app-kitchensink-core.py @@ -0,0 +1,113 @@ +from shiny import App, render, ui + +# Sample data for different types of choices +simple_choices = ["A", "B", "C", "D"] +dict_choices = {"a": "Option A", "b": "Option B", "c": "Option C"} +grouped_choices = { + "Group 1": {"g1a": "Group 1 - A", "g1b": "Group 1 - B"}, + "Group 2": {"g2a": "Group 2 - A", "g2b": "Group 2 - B"}, +} + +app_ui = ui.page_fluid( + ui.layout_column_wrap( + # Basic select with simple choices + ui.card( + ui.card_header("Basic Select"), + ui.input_select( + id="select1", + label="Basic select (simple list)", + choices=simple_choices, + selected="A", + ), + ui.output_text("selected_value1"), + ), + # Select with dictionary choices + ui.card( + ui.card_header("Dictionary Choices"), + ui.input_select( + id="select2", + label="Select with dictionary choices", + choices=dict_choices, + selected="a", + ), + ui.output_text("selected_value2"), + ), + # Select with grouped choices + ui.card( + ui.card_header("Grouped Choices"), + ui.input_select( + id="select3", + label="Select with grouped choices", + choices=grouped_choices, + selected="g1a", + ), + ui.output_text("selected_value3"), + ), + # Multiple select + ui.card( + ui.card_header("Multiple Select"), + ui.input_select( + id="select4", + label="Multiple select", + choices=simple_choices, + selected=["A", "B"], + multiple=True, + ), + ui.output_text("selected_value4"), + ), + # Select with custom width + ui.card( + ui.card_header("Custom Width"), + ui.input_select( + id="select5", + label="Select with custom width", + choices=simple_choices, + width="200px", + ), + ui.output_text("selected_value5"), + ), + # Select with size parameter + ui.card( + ui.card_header("Box Style"), + ui.input_select( + id="select6", + label="Select with size parameter", + choices=simple_choices, + size="4", # Shows 4 items at once + ), + ui.output_text("selected_value6"), + ), + width="300px", + heights_equal="row" + ), +) + + +def server(input, output, session): + + @render.text + def selected_value1(): + return f"Selected: {input.select1()}" + + @render.text + def selected_value2(): + return f"Selected: {input.select2()}" + + @render.text + def selected_value3(): + return f"Selected: {input.select3()}" + + @render.text + def selected_value4(): + return f"Selected: {input.select4()}" + + @render.text + def selected_value5(): + return f"Selected: {input.select5()}" + + @render.text + def selected_value6(): + return f"Selected: {input.select6()}" + + +app = App(app_ui, server) diff --git a/components/inputs/select-multiple/app-kitchensink-express.py b/components/inputs/select-multiple/app-kitchensink-express.py new file mode 100644 index 00000000..bfcd90b5 --- /dev/null +++ b/components/inputs/select-multiple/app-kitchensink-express.py @@ -0,0 +1,98 @@ +from shiny.express import input, render, ui + +# Sample data for different types of choices +simple_choices = ["A", "B", "C", "D"] +dict_choices = {"a": "Option A", "b": "Option B", "c": "Option C"} +grouped_choices = { + "Group 1": {"g1a": "Group 1 - A", "g1b": "Group 1 - B"}, + "Group 2": {"g2a": "Group 2 - A", "g2b": "Group 2 - B"}, +} + +# Page options +ui.page_opts(full_width=True) + +with ui.layout_column_wrap(width="300px", heights_equal=True): + # Basic select with simple choices + with ui.card(): + ui.card_header("Basic Select") + ui.input_select( + id="select1", + label="Basic select (simple list)", + choices=simple_choices, + selected="A", + ) + + @render.text + def selected_value1(): + return f"Selected: {input.select1()}" + + # Select with dictionary choices + with ui.card(): + ui.card_header("Dictionary Choices") + ui.input_select( + id="select2", + label="Select with dictionary choices", + choices=dict_choices, + selected="a", + ) + + @render.text + def selected_value2(): + return f"Selected: {input.select2()}" + + # Select with grouped choices + with ui.card(): + ui.card_header("Grouped Choices") + ui.input_select( + id="select3", + label="Select with grouped choices", + choices=grouped_choices, + selected="g1a", + ) + + @render.text + def selected_value3(): + return f"Selected: {input.select3()}" + + # Multiple select + with ui.card(): + ui.card_header("Multiple Select") + ui.input_select( + id="select4", + label="Multiple select", + choices=simple_choices, + selected=["A", "B"], + multiple=True, + ) + + @render.text + def selected_value4(): + return f"Selected: {input.select4()}" + + # Select with custom width + with ui.card(): + ui.card_header("Custom Width") + ui.input_select( + id="select5", + label="Select with custom width", + choices=simple_choices, + width="200px", + ) + + @render.text + def selected_value5(): + return f"Selected: {input.select5()}" + + # Select with size parameter + with ui.card(): + ui.card_header("Box Style") + ui.input_select( + id="select6", + label="Select with size parameter", + choices=simple_choices, + size="4", # Shows 4 items at once + ) + + @render.text + def selected_value6(): + return f"Selected: {input.select6()}" diff --git a/components/inputs/select-multiple/index.qmd b/components/inputs/select-multiple/index.qmd index 42f75037..cdfb3cca 100644 --- a/components/inputs/select-multiple/index.qmd +++ b/components/inputs/select-multiple/index.qmd @@ -44,6 +44,13 @@ listing: - title: Core file: app-variation-select-list-with-grouped-choices-core.py shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFGw4AxMgAPCH2jpHKYF4+ftFEyMFhEZEO0QDK3r4ipOgUnOSsyABG3qQA7ogJQaHhEGmOINEAjKLRKNEAwuyknMRwyG01rQBCHcjdvf2DLeOEk2AtXRNTfQNDK2AAvonJ9Y0OMAoWBeg+ugAqDApwe3WpyACU9ykNjoak7m4eVAAe-miADcoFY4NEXqonqoYRBZHQ2HIgXIbK53EQvhQfkQvKxWIUIE9qu8HAABKRwuRYf4UR7w5AgsE2ImPSJSCgKBgNOjREBoihYWI5ZnbaKw9SYPRiTA2DTaTg4pFyaEQBZgCi4dAIFDquAAnYAXSAA +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Select + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFUBiJgGVYqADZwm0qGShMagoxxo05lYWWyo4LJsRpNCbYh0IvVLHz6cAD6Xj5+rgC8TMDKYCLxEvEAQklM8QDC6fEAIvEAuqrSvmRh3r4uTDEg8VDxiBlgAPKoZBykojlgAEYNTa3tnWn4TYT98YMdEEzZYAC+qgDmDArO0uURVTWqTHtNAOKrqEwAjP21YEun9UiHx2dMALRdo-HXfXfxR8Rrjy8jeZ4Xb7b4PABMF3e4NujTBvxO4Oer2SV3BnzhYB+fyRAPiQNUizU0HQISU1SYSiwUCWoRoeiU0gAFCC9lS9FBsL8yiQGTAICEAO50NAsmb7CWaFJQQKEVhwAyEYSCjhkNisIIGTwVSKsiWUjgYQhQOjMvX6-ZU42mkJsOBQWR0FlgaWy7QKuBK+IASmB4otEqpXFQCjKLA9SrFAejvGkUXi4cVZHO+HNMb2HJ6CvjLplvnlSaYTMC-C1eg4LDI3qSafT4UqLCiJeCmwbfvTFsTnoocfiiVT-pjvtr+qp3JDZQoAA8yM6u0q4BsAG5QBlwFPDwcSzfRzRaCPK1XqkpK6Ymnj13Vby2G61m68Wq0mjZ2h1yZ25Upnug8TI6-xgDuHZBhAE4hPOs4jtGHC9mAEGQgOHb6pm2bxPuhYqmqVinqQ57alsLA1g+MaXi4UQnjy-4sO2SH7BBi45rcNHpkB6ZjqGYHTpBcEHouIQrmuCGsfqwmSu6GFHkwKwIou+ENiOT6mlGwG3s+tr2o6zrYussxUT6zExiBYEQcptGxjmEEAMxEWZGZQFmeg5uh3ZMJh6rSWssmkYRiG2d5UQeesraRAZSH0bB1xMVB+yiQG7FkJxcAznOvHLquChwNZgGhTFOV7JoACyCh6O0wQFt2CmqUp0VslVL4ae+8RFSVHBlc5XrZTVBoYMGobgQepm0TBFkHgALDZtkoY5TXFaVWoQRNZn+c2BjBS4eUxuFURxAk3QjAUG3RjAs2tQYUQACp0Blh25V18WJclCapfx6VwONnXEbF+XiS5bmeAolaMK5MFqpVRrPoN0aKfVb5OlkANkEDADqINsPpd2Gr1YYDV1ErDU9SYAKyLbRU1OQewNYYQCNAyq0ig75S1UU2mqhN5N0WnTao5uCAAMvOoFOJPRl9o6GuOfVcSlSZ8QJGXEx9IsbXuFN-YEABehioCasBwBQdBg3ekNxXV6mw86KTEFO2iOAY6PEYGmOgX1Jm4-s+M8UmABswsdmTaGq5JGtazr8D677dbMytbNURz+rBzm70SEwe7eIKrijbwFAwK4JhuBAfhdaLjsYBLk5Jdx4UvWuPuKwGotc2wOaWfzgsR0wdocEsbBkCwIRwAAjgoq45gwgrxHqm7VsSxRwB44Z0Eu75YxIZcSOGLCBKQ3qIKoeoAAJSBAjoYFxeqyPPz1y+uTI7yOUhkAodAzDQAcy9IjQgFjGAQact+LGAPeg5D4yDkKfCu5857lQXGlQSt9d7EQfk-F+b9uyLk-t-eC-8J7EglCA4+YCz6DgvtAns1cMqWXgffPWyDzCoJgRg52ZAf4Hkod6ABQC8FHxPkQiUJCq7X1GlQxBNDn50LAO1HsjCJwsKTEI9hOCD7cMIRA4hUCBGvUJsI6MSCxGvwkalaRoZZHdi0QowBuD9j4J4aovh6ir6vS9togMuiUEGPfkY5hEEnHmKAaoNAJwYhiFQEyAJZIODrzkEvOg08FgFCAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbDOAD1R04LFkw4xUxOmTERUAVzJ4mQiABM4dZfI4AdCPoDETAMqxUAGzhM1UMlCY0pNjjRqbKMstlTCmxGiZCNmIOQmF9FnFLOAB9YNDw0QBeJmBdMABBDOUMgCEcpgyAYUKMgBEMgF19NTCyeJCwv1SQDKgMxCKwAHlUMg5SJmz8boAjTu6+gaGC0YzCSYzpwYgmUrAAX30AcwZ5XzVGxJamNrWmS4yAcX3UJgBGSbawHYeOpG7b4gPHpgBaYZlV4PCafG53P6AuabPD6S5XMDfX4AJmeGR2KI+XQhP3uKIBQPmrxRYJxSMhBOhGVh+m2BggxgAClAdtZiP1Vix9DosKy4hyyCwABQ0eQWCyxADuHDUZDYyQAKnR5HAAJT6fQy+VMXkWKDYH4NEgWeQwCDSuhoYUyuUKjIAZgADE7UHxCmw4BwdmwhbE4ABHeRQCxKlXqxDwhHGPJQKKEVhwKyEGTatisaJWIJNJJRy5p3UcDCEKB0NTCtWRi4IhG8ktl2KeqAaOjC-JxsKmJNwFMZDXVmuFjBcBQNFjdlNtgeDhGy5IZcfJshPfB5mcI-VjJPzsCx+OJpdMYVRCRZiwcFhkDWr6frhLNFjJE8xY4PuG3meLnsUNQ7kbv9cmH7NcawAAVUFsMAoPgyBAhENECL8UzgI4ADcQ1VB4KyrQCayEMh5DoNYaAyEwJx-LoQBHRQMCQ5cK22MBNQHYwyMPAs6hTVZS2wbMTm5AcCzrUty0rODLmEhsmxbNswHKepuLoXjihzCIwH7QDeWosdyKnXDZ1-BdyLRG99MuTdt1I8imA4hTSB4viHxycTB3vJJkk441VJYACzLolCdw+XyZ2Aj8mHAyhIOg2CwoQg9vxQ2J0NNOAUWwly8LgAiiMcKylxQyjtNo4yGIyZia1Y6yCz2PEUMc3NBI4HVJNEnD1xaxs4GbTRZORQ51m8vsXK0uRFFiOi9LMucjKXB1nLCmsLNDPLvxspr0xqg46rctTgtwnbH02w5XySPbAP8wyQSClzQsAiL1E0KD+BiwC4oupKMLgB10oWhF8MI4iVuQtRCtGshitm0qmIZCqmAAWXFAYYni3tGuaot61a4aMZEzrutbDIEYsJGszY78hrCkbR3G3SMoMnc6IAFnmsymCWnciZJ6w6JZsyDqfTM4gOs71wu5J0iyYE5iqEWZxgRGOBiMNVVloDyvXe6ouely3vIxLktVRmftZ-6cpIsAyeB0HRwh78jbVRj1cuSr2PWoJ5EvRg1rtNchJxstjfa-2jmknqSg9sgvYAdVleUKc0ottJppdJv06awDogBWXn9PZoHUzdwgI692049MvnvIF08he81Wa1L+0wBRF03Rzwdbo1iDHuinW4EQvW0M+zPA-003AYtgfrZorOoadpgXdWgsogAL2sVBS1gLLNF9t2WpHwcOtDgnd2IPhTG8Kx46D4cweT79U9w9O6IANjbwC84n12dRXteN-gCg6BvzvJXZ8VgTrCDrgiH+O5majHnqYEIUpRCMzEBQGAog7D+AgOEG6c8wJdzoE9GCvd+75UHilZ++9AJj1yp-BKIMzhFRfrPCAWwqhAA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/select-multiple/thumbnail.png b/components/inputs/select-multiple/thumbnail.png new file mode 100644 index 00000000..02cea77c Binary files /dev/null and b/components/inputs/select-multiple/thumbnail.png differ diff --git a/components/inputs/select-single/app-kitchensink-core.py b/components/inputs/select-single/app-kitchensink-core.py new file mode 100644 index 00000000..2b33452a --- /dev/null +++ b/components/inputs/select-single/app-kitchensink-core.py @@ -0,0 +1,113 @@ +from shiny import App, render, ui + +# Sample data for different types of choices +simple_choices = ["A", "B", "C", "D"] +dict_choices = {"a": "Option A", "b": "Option B", "c": "Option C"} +grouped_choices = { + "Group 1": {"g1a": "Group 1 - A", "g1b": "Group 1 - B"}, + "Group 2": {"g2a": "Group 2 - A", "g2b": "Group 2 - B"}, +} + +app_ui = ui.page_fluid( + ui.layout_column_wrap( + # Basic select with simple choices + ui.card( + ui.card_header("Basic Select"), + ui.input_select( + id="select1", + label="Basic select (simple list)", + choices=simple_choices, + selected="A", + ), + ui.output_text("selected_value1"), + ), + # Select with dictionary choices + ui.card( + ui.card_header("Dictionary Choices"), + ui.input_select( + id="select2", + label="Select with dictionary choices", + choices=dict_choices, + selected="a", + ), + ui.output_text("selected_value2"), + ), + # Select with grouped choices + ui.card( + ui.card_header("Grouped Choices"), + ui.input_select( + id="select3", + label="Select with grouped choices", + choices=grouped_choices, + selected="g1a", + ), + ui.output_text("selected_value3"), + ), + # Multiple select + ui.card( + ui.card_header("Multiple Select"), + ui.input_select( + id="select4", + label="Multiple select", + choices=simple_choices, + selected=["A", "B"], + multiple=True, + ), + ui.output_text("selected_value4"), + ), + # Select with custom width + ui.card( + ui.card_header("Custom Width"), + ui.input_select( + id="select5", + label="Select with custom width", + choices=simple_choices, + width="200px", + ), + ui.output_text("selected_value5"), + ), + # Select with size parameter + ui.card( + ui.card_header("Box Style"), + ui.input_select( + id="select6", + label="Select with size parameter", + choices=simple_choices, + size="4", # Shows 4 items at once + ), + ui.output_text("selected_value6"), + ), + width="300px", + heights_equal="row" + ), +) + + +def server(input, output, session): + + @render.text + def selected_value1(): + return f"Selected: {input.select1()}" + + @render.text + def selected_value2(): + return f"Selected: {input.select2()}" + + @render.text + def selected_value3(): + return f"Selected: {input.select3()}" + + @render.text + def selected_value4(): + return f"Selected: {input.select4()}" + + @render.text + def selected_value5(): + return f"Selected: {input.select5()}" + + @render.text + def selected_value6(): + return f"Selected: {input.select6()}" + + +app = App(app_ui, server) diff --git a/components/inputs/select-single/app-kitchensink-express.py b/components/inputs/select-single/app-kitchensink-express.py new file mode 100644 index 00000000..bfcd90b5 --- /dev/null +++ b/components/inputs/select-single/app-kitchensink-express.py @@ -0,0 +1,98 @@ +from shiny.express import input, render, ui + +# Sample data for different types of choices +simple_choices = ["A", "B", "C", "D"] +dict_choices = {"a": "Option A", "b": "Option B", "c": "Option C"} +grouped_choices = { + "Group 1": {"g1a": "Group 1 - A", "g1b": "Group 1 - B"}, + "Group 2": {"g2a": "Group 2 - A", "g2b": "Group 2 - B"}, +} + +# Page options +ui.page_opts(full_width=True) + +with ui.layout_column_wrap(width="300px", heights_equal=True): + # Basic select with simple choices + with ui.card(): + ui.card_header("Basic Select") + ui.input_select( + id="select1", + label="Basic select (simple list)", + choices=simple_choices, + selected="A", + ) + + @render.text + def selected_value1(): + return f"Selected: {input.select1()}" + + # Select with dictionary choices + with ui.card(): + ui.card_header("Dictionary Choices") + ui.input_select( + id="select2", + label="Select with dictionary choices", + choices=dict_choices, + selected="a", + ) + + @render.text + def selected_value2(): + return f"Selected: {input.select2()}" + + # Select with grouped choices + with ui.card(): + ui.card_header("Grouped Choices") + ui.input_select( + id="select3", + label="Select with grouped choices", + choices=grouped_choices, + selected="g1a", + ) + + @render.text + def selected_value3(): + return f"Selected: {input.select3()}" + + # Multiple select + with ui.card(): + ui.card_header("Multiple Select") + ui.input_select( + id="select4", + label="Multiple select", + choices=simple_choices, + selected=["A", "B"], + multiple=True, + ) + + @render.text + def selected_value4(): + return f"Selected: {input.select4()}" + + # Select with custom width + with ui.card(): + ui.card_header("Custom Width") + ui.input_select( + id="select5", + label="Select with custom width", + choices=simple_choices, + width="200px", + ) + + @render.text + def selected_value5(): + return f"Selected: {input.select5()}" + + # Select with size parameter + with ui.card(): + ui.card_header("Box Style") + ui.input_select( + id="select6", + label="Select with size parameter", + choices=simple_choices, + size="4", # Shows 4 items at once + ) + + @render.text + def selected_value6(): + return f"Selected: {input.select6()}" diff --git a/components/inputs/select-single/index.qmd b/components/inputs/select-single/index.qmd index e8c9ab66..eddffb3a 100644 --- a/components/inputs/select-single/index.qmd +++ b/components/inputs/select-single/index.qmd @@ -42,6 +42,13 @@ listing: - title: Core file: app-variation-select-list-with-grouped-choices-core.py shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFOxCOQcjKYF4+fqEE9sEOoQDK3r4iUIGk6BSc5MgARt6kAO6IUTGxIKWxjqEAjKEo5WDVonUhYADC7KScxHDITVGt1QBCLaEdXT19I4SDbaPtnd291XNgAL7RgZVBoQBMLQ27zbRji5NHA3vTKKcTvbvTRHurNwt3yLurGxVB31sOAEpNkFDKR3G4PFQAB7+UIANygVjgoSBqgBqgxEFkdDYcjhchsrncRDBFAhRC8rFYWQgAOK-2QAAEpFi5FhoRQKtjkAikTY6T9HFIKAoGIE6KEQESKFhwsl+WtQpj1Jg9GJMDYNNpOBS8XJ0RAZmAKLh0AgUMa4DD1gBdIA +- id: kitchen-sink + template: ../../_partials/components-detail-kitchen-sink.ejs + contents: + - title: Select + core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFUBiJgGVYqADZwm0qGShMagoxxo05lYWWyo4LJsRpNCbYh0IvVLHz6cAD6Xj5+rgC8TMDKYCLxEvEAQklM8QDC6fEAIvEAuqrSvmRh3r4uTDEg8VDxiBlgAPKoZBykojlgAEYNTa3tnWn4TYT98YMdEEzZYAC+qgDmDArO0uURVTWqTHtNAOKrqEwAjP21YEun9UiHx2dMALRdo-HXfXfxR8Rrjy8jeZ4Xb7b4PABMF3e4NujTBvxO4Oer2SV3BnzhYB+fyRAPiQNUizU0HQISU1SYSiwUCWoRoeiU0gAFCC9lS9FBsL8yiQGTAICEAO50NAsmb7CWaFJQQKEVhwAyEYSCjhkNisIIGTwVSKsiWUjgYQhQOjMvX6-ZU42mkJsOBQWR0FlgaWy7QKuBK+IASmB4otEqpXFQCjKLA9SrFAejvGkUXi4cVZHO+HNMb2HJ6CvjLplvnlSaYTMC-C1eg4LDI3qSafT4UqLCiJeCmwbfvTFsTnoocfiiVT-pjvtr+qp3JDZQoAA8yM6u0q4BsAG5QBlwFPDwcSzfRzRaCPK1XqkpK6Ymnj13Vby2G61m68Wq0mjZ2h1yZ25Upnug8TI6-xgDuHZBhAE4hPOs4jtGHC9mAEGQgOHb6pm2bxPuhYqmqVinqQ57alsLA1g+MaXi4UQnjy-4sO2SH7BBi45rcNHpkB6ZjqGYHTpBcEHouIQrmuCGsfqwmSu6GFHkwKwIou+ENiOT6mlGwG3s+tr2o6zrYussxUT6zExiBYEQcptGxjmEEAMxEWZGZQFmeg5uh3ZMJh6rSWssmkYRiG2d5UQeesraRAZSH0bB1xMVB+yiQG7FkJxcAznOvHLquChwNZgGhTFOV7JoACyCh6O0wQFt2CmqUp0VslVL4ae+8RFSVHBlc5XrZTVBoYMGobgQepm0TBFkHgALDZtkoY5TXFaVWoQRNZn+c2BjBS4eUxuFURxAk3QjAUG3RjAs2tQYUQACp0Blh25V18WJclCapfx6VwONnXEbF+XiS5bmeAolaMK5MFqpVRrPoN0aKfVb5OlkANkEDADqINsPpd2Gr1YYDV1ErDU9SYAKyLbRU1OQewNYYQCNAyq0ig75S1UU2mqhN5N0WnTao5uCAAMvOoFOJPRl9o6GuOfVcSlSZ8QJGXEx9IsbXuFN-YEABehioCasBwBQdBg3ekNxXV6mw86KTEFO2iOAY6PEYGmOgX1Jm4-s+M8UmABswsdmTaGq5JGtazr8D677dbMytbNURz+rBzm70SEwe7eIKrijbwFAwK4JhuBAfhdaLjsYBLk5Jdx4UvWuPuKwGotc2wOaWfzgsR0wdocEsbBkCwIRwAAjgoq45gwgrxHqm7VsSxRwB44Z0Eu75YxIZcSOGLCBKQ3qIKoeoAAJSBAjoYFxeqyPPz1y+uTI7yOUhkAodAzDQAcy9IjQgFjGAQact+LGAPeg5D4yDkKfCu5857lQXGlQSt9d7EQfk-F+b9uyLk-t-eC-8J7EglCA4+YCz6DgvtAns1cMqWXgffPWyDzCoJgRg52ZAf4Hkod6ABQC8FHxPkQiUJCq7X1GlQxBNDn50LAO1HsjCJwsKTEI9hOCD7cMIRA4hUCBGvUJsI6MSCxGvwkalaRoZZHdi0QowBuD9j4J4aovh6ir6vS9togMuiUEGPfkY5hEEnHmKAaoNAJwYhiFQEyAJZIODrzkEvOg08FgFCAA + express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbDOAD1R04LFkw4xUxOmTERUAVzJ4mQiABM4dZfI4AdCPoDETAMqxUAGzhM1UMlCY0pNjjRqbKMstlTCmxGiZCNmIOQmF9FnFLOAB9YNDw0QBeJmBdMABBDOUMgCEcpgyAYUKMgBEMgF19NTCyeJCwv1SQDKgMxCKwAHlUMg5SJmz8boAjTu6+gaGC0YzCSYzpwYgmUrAAX30AcwZ5XzVGxJamNrWmS4yAcX3UJgBGSbawHYeOpG7b4gPHpgBaYZlV4PCafG53P6AuabPD6S5XMDfX4AJmeGR2KI+XQhP3uKIBQPmrxRYJxSMhBOhGVh+m2BggxgAClAdtZiP1Vix9DosKy4hyyCwABQ0eQWCyxADuHDUZDYyQAKnR5HAAJT6fQy+VMXkWKDYH4NEgWeQwCDSuhoYUyuUKjIAZgADE7UHxCmw4BwdmwhbE4ABHeRQCxKlXqxDwhHGPJQKKEVhwKyEGTatisaJWIJNJJRy5p3UcDCEKB0NTCtWRi4IhG8ktl2KeqAaOjC-JxsKmJNwFMZDXVmuFjBcBQNFjdlNtgeDhGy5IZcfJshPfB5mcI-VjJPzsCx+OJpdMYVRCRZiwcFhkDWr6frhLNFjJE8xY4PuG3meLnsUNQ7kbv9cmH7NcawAAVUFsMAoPgyBAhENECL8UzgI4ADcQ1VB4KyrQCayEMh5DoNYaAyEwJx-LoQBHRQMCQ5cK22MBNQHYwyMPAs6hTVZS2wbMTm5AcCzrUty0rODLmEhsmxbNswHKepuLoXjihzCIwH7QDeWosdyKnXDZ1-BdyLRG99MuTdt1I8imA4hTSB4viHxycTB3vJJkk441VJYACzLolCdw+XyZ2Aj8mHAyhIOg2CwoQg9vxQ2J0NNOAUWwly8LgAiiMcKylxQyjtNo4yGIyZia1Y6yCz2PEUMc3NBI4HVJNEnD1xaxs4GbTRZORQ51m8vsXK0uRFFiOi9LMucjKXB1nLCmsLNDPLvxspr0xqg46rctTgtwnbH02w5XySPbAP8wyQSClzQsAiL1E0KD+BiwC4oupKMLgB10oWhF8MI4iVuQtRCtGshitm0qmIZCqmAAWXFAYYni3tGuaot61a4aMZEzrutbDIEYsJGszY78hrCkbR3G3SMoMnc6IAFnmsymCWnciZJ6w6JZsyDqfTM4gOs71wu5J0iyYE5iqEWZxgRGOBiMNVVloDyvXe6ouely3vIxLktVRmftZ-6cpIsAyeB0HRwh78jbVRj1cuSr2PWoJ5EvRg1rtNchJxstjfa-2jmknqSg9sgvYAdVleUKc0ottJppdJv06awDogBWXn9PZoHUzdwgI692049MvnvIF08he81Wa1L+0wBRF03Rzwdbo1iDHuinW4EQvW0M+zPA-003AYtgfrZorOoadpgXdWgsogAL2sVBS1gLLNF9t2WpHwcOtDgnd2IPhTG8Kx46D4cweT79U9w9O6IANjbwC84n12dRXteN-gCg6BvzvJXZ8VgTrCDrgiH+O5majHnqYEIUpRCMzEBQGAog7D+AgOEG6c8wJdzoE9GCvd+75UHilZ++9AJj1yp-BKIMzhFRfrPCAWwqhAA + image: thumbnail.png --- :::{#example} diff --git a/components/inputs/select-single/thumbnail-old.png b/components/inputs/select-single/thumbnail-old.png new file mode 100644 index 00000000..54740151 Binary files /dev/null and b/components/inputs/select-single/thumbnail-old.png differ diff --git a/components/inputs/select-single/thumbnail.png b/components/inputs/select-single/thumbnail.png new file mode 100644 index 00000000..02cea77c Binary files /dev/null and b/components/inputs/select-single/thumbnail.png differ diff --git a/components/inputs/selectize-multiple/app-kitchensink-core.py b/components/inputs/selectize-multiple/app-kitchensink-core.py new file mode 100644 index 00000000..afa09b95 --- /dev/null +++ b/components/inputs/selectize-multiple/app-kitchensink-core.py @@ -0,0 +1,42 @@ +from shiny import App, reactive, render, ui + +# Sample data for states +states = { + "East Coast": {"NY": "New York", "NJ": "New Jersey", "CT": "Connecticut"}, + "West Coast": {"WA": "Washington", "OR": "Oregon", "CA": "California"}, + "Midwest": {"MN": "Minnesota", "WI": "Wisconsin", "IA": "Iowa"}, +} + +app_ui = ui.page_fluid( + ui.h2("Input Selectize Demo"), + ui.input_selectize( + id="state", + label="Choose state(s):", + choices=states, + selected=["NY", "CA"], + multiple=True, + options={ + "placeholder": "Select states...", + "plugins": ["clear_button"], + "render": ui.js_eval( + '{option: function(item, escape) {return "