-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path02_basic_widgets.py
More file actions
253 lines (199 loc) ยท 6.44 KB
/
02_basic_widgets.py
File metadata and controls
253 lines (199 loc) ยท 6.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
"""
Lesson 2: Basic Widgets
======================
In this lesson, you'll learn about Streamlit widgets - the interactive elements
that make your apps dynamic and user-friendly.
Widgets covered:
- Buttons
- Text inputs
- Number inputs
- Sliders
- Select boxes
- Checkboxes
- Radio buttons
"""
import streamlit as st
import random
# Page configuration
st.set_page_config(
page_title="Streamlit Widgets Tutorial",
page_icon="๐๏ธ",
layout="wide"
)
st.title("๐๏ธ Streamlit Widgets Tutorial")
st.markdown("### Making Your Apps Interactive")
# Introduction
st.write("""
Widgets are interactive elements that allow users to input data and control your app.
They're what make Streamlit apps truly interactive!
""")
# 1. BUTTONS
st.header("๐ Buttons")
st.write("Buttons are the simplest widget. They return `True` when clicked, `False` otherwise.")
col1, col2, col3 = st.columns(3)
with col1:
if st.button("Click Me!"):
st.success("Button was clicked! ๐")
else:
st.info("Button hasn't been clicked yet.")
with col2:
if st.button("๐ฒ Roll Dice"):
result = random.randint(1, 6)
st.write(f"You rolled a **{result}**!")
with col3:
if st.button("๐ Celebrate"):
st.balloons()
st.write("Party time! ๐")
# 2. TEXT INPUTS
st.header("๐ Text Inputs")
# Simple text input
user_name = st.text_input("Enter your name:", placeholder="Type your name here...")
if user_name:
st.write(f"Hello, **{user_name}**! ๐")
# Text area for longer text
user_bio = st.text_area("Tell us about yourself:",
placeholder="Write a short bio...",
height=100)
if user_bio:
st.write("**Your bio:**", user_bio)
# Password input
password = st.text_input("Enter password:", type="password")
if password:
st.write("Password entered (hidden for security)")
# 3. NUMBER INPUTS
st.header("๐ข Number Inputs")
col1, col2 = st.columns(2)
with col1:
# Integer input
age = st.number_input("Enter your age:", min_value=0, max_value=120, value=18)
st.write(f"You are **{age}** years old.")
with col2:
# Float input
height = st.number_input("Enter your height (meters):",
min_value=0.5,
max_value=2.5,
value=1.7,
step=0.01)
st.write(f"Your height is **{height}** meters.")
# 4. SLIDERS
st.header("๐๏ธ Sliders")
col1, col2 = st.columns(2)
with col1:
# Integer slider
temperature = st.slider("Temperature (ยฐC):", min_value=-20, max_value=50, value=20)
st.write(f"Temperature: **{temperature}ยฐC**")
# Color temperature indicator
if temperature < 0:
st.info("โ๏ธ It's cold!")
elif temperature > 30:
st.warning("๐ฅ It's hot!")
else:
st.success("๐ Nice temperature!")
with col2:
# Float slider
volume = st.slider("Volume:", min_value=0.0, max_value=1.0, value=0.5, step=0.1)
st.write(f"Volume: **{volume}**")
# Visual volume indicator
volume_bar = "๐" * int(volume * 10)
st.write(volume_bar)
# 5. SELECT BOXES
st.header("๐ Select Boxes")
# Simple selectbox
favorite_color = st.selectbox(
"What's your favorite color?",
["Red", "Blue", "Green", "Yellow", "Purple", "Orange"]
)
st.write(f"Your favorite color is **{favorite_color}**!")
# Selectbox with index
favorite_fruit = st.selectbox(
"Choose your favorite fruit:",
["Apple", "Banana", "Cherry", "Dragon Fruit", "Elderberry"],
index=1 # Default selection
)
st.write(f"You chose **{favorite_fruit}**!")
# 6. CHECKBOXES
st.header("โ๏ธ Checkboxes")
st.write("Select your interests:")
reading = st.checkbox("๐ Reading")
gaming = st.checkbox("๐ฎ Gaming")
sports = st.checkbox("โฝ Sports")
music = st.checkbox("๐ต Music")
coding = st.checkbox("๐ป Coding")
# Show selected interests
interests = []
if reading: interests.append("Reading")
if gaming: interests.append("Gaming")
if sports: interests.append("Sports")
if music: interests.append("Music")
if coding: interests.append("Coding")
if interests:
st.write("**Your interests:**", ", ".join(interests))
else:
st.write("No interests selected yet.")
# 7. RADIO BUTTONS
st.header("๐ Radio Buttons")
# Simple radio buttons
meal_choice = st.radio(
"What would you like for lunch?",
["Pizza", "Burger", "Salad", "Sushi"]
)
st.write(f"You chose **{meal_choice}** for lunch!")
# Radio buttons with custom options
experience_level = st.radio(
"What's your programming experience?",
options=["Beginner", "Intermediate", "Advanced"],
index=0,
help="Select the option that best describes your experience level"
)
st.write(f"Experience level: **{experience_level}**")
# 8. PUTTING IT ALL TOGETHER
st.header("๐ฏ Interactive Calculator")
st.write("Let's create a simple calculator using widgets!")
col1, col2, col3 = st.columns(3)
with col1:
num1 = st.number_input("First number:", value=0)
with col2:
operation = st.selectbox("Operation:", ["+", "-", "*", "/"])
with col3:
num2 = st.number_input("Second number:", value=0)
# Calculate result
if st.button("Calculate"):
if operation == "+":
result = num1 + num2
elif operation == "-":
result = num1 - num2
elif operation == "*":
result = num1 * num2
elif operation == "/":
if num2 != 0:
result = num1 / num2
else:
st.error("Cannot divide by zero!")
result = None
if result is not None:
st.success(f"**Result:** {num1} {operation} {num2} = {result}")
# 9. SESSION STATE (Bonus)
st.header("๐พ Session State")
# Initialize session state
if 'click_count' not in st.session_state:
st.session_state.click_count = 0
st.write("Session state allows you to remember values between interactions.")
if st.button("Count Clicks"):
st.session_state.click_count += 1
st.write(f"Button clicked **{st.session_state.click_count}** times!")
if st.button("Reset Counter"):
st.session_state.click_count = 0
# Footer
st.markdown("---")
st.markdown("**Next lesson:** Data Display - Learn to show tables, charts, and visualizations!")
# Challenge
with st.expander("๐ฏ Challenge: Create Your Own Widget App"):
st.write("""
**Your challenge:** Create a simple app that uses at least 3 different widgets.
Ideas:
- A personality quiz
- A simple game
- A survey form
- A unit converter
Try combining different widgets to create something fun!
""")