Layout
Tabs
tab1 , tab2 , tab3 = st . tabs ([ "Cat" , "Dog" , "Owl" ])
with tab1 :
st . header ( "A cat" )
st . image ( "https://static.streamlit.io/examples/cat.jpg" , width = 200 )
with tab2 :
st . header ( "A dog" )
st . image ( "https://static.streamlit.io/examples/dog.jpg" , width = 200 )
with tab3 :
st . header ( "An owl" )
st . image ( "https://static.streamlit.io/examples/owl.jpg" , width = 200 )
Containers
with st . container ( border = True ):
st . write ( "This is inside the container" )
st . text_input ( "Name" )
container = st . container ( border = True )
container . write ( "This is inside the container" )
st . write ( "This is outside the container" )
Columns
col1 , col2 , col3 = st . columns ( 3 )
with col1 :
st . header ( "A cat" )
st . image ( "https://static.streamlit.io/examples/cat.jpg" )
with col2 :
st . header ( "A dog" )
st . image ( "https://static.streamlit.io/examples/dog.jpg" )
with col3 :
st . header ( "An owl" )
st . image ( "https://static.streamlit.io/examples/owl.jpg" )
for columns with specific width
col1 , col2 , col3 = st . columns ([ 1 , 2 , 2 ])
Expander
st . bar_chart ({ "data" : [ 1 , 5 , 2 , 6 , 2 , 1 ]})
with st . expander ( "See explanation" ):
st . write ( '''
The chart above shows some numbers I picked for you.
I rolled actual dice for these, so they're *guaranteed* to
be random.
''' )
st . image ( "https://static.streamlit.io/examples/dice.jpg" )