Spaces:
Sleeping
Sleeping
File size: 4,075 Bytes
746d2f1 |
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 |
---
title: Layouts and Containers
slug: /develop/api-reference/layout
---
# Layouts and Containers
## Complex layouts
Streamlit provides several options for controlling how different elements are laid out on the screen.
<TileContainer>
<RefCard href="/develop/api-reference/layout/st.columns">
<Image pure alt="screenshot" src="/images/api/columns.jpg" />
<h4>Columns</h4>
Insert containers laid out as side-by-side columns.
```python
col1, col2 = st.columns(2)
col1.write("this is column 1")
col2.write("this is column 2")
```
</RefCard>
<RefCard href="/develop/api-reference/layout/st.container">
<Image pure alt="screenshot" src="/images/api/container.jpg" />
<h4>Container</h4>
Insert a multi-element container.
```python
c = st.container()
st.write("This will show last")
c.write("This will show first")
c.write("This will show second")
```
</RefCard>
<RefCard href="/develop/api-reference/execution-flow/st.dialog">
<Image pure alt="screenshot" src="/images/api/dialog.jpg" />
<h4>Modal dialogs</h4>
Insert a modal dialog that can rerun independently from the rest of the script.
```python
@st.experimental_dialog()
def email_form():
name = st.text_input("Name")
email = st.text_input("Email")
```
</RefCard>
<RefCard href="/develop/api-reference/layout/st.empty">
<Image pure alt="screenshot" src="/images/api/empty.jpg" />
<h4>Empty</h4>
Insert a single-element container.
```python
c = st.empty()
st.write("This will show last")
c.write("This will be replaced")
c.write("This will show first")
```
</RefCard>
<RefCard href="/develop/api-reference/layout/st.expander">
<Image pure alt="screenshot" src="/images/api/expander.jpg" />
<h4>Expander</h4>
Insert a multi-element container that can be expanded/collapsed.
```python
with st.expander("Open to see more"):
st.write("This is more content")
```
</RefCard>
<RefCard href="/develop/api-reference/layout/st.popover">
<Image pure alt="screenshot" src="/images/api/popover.svg" />
<h4>Popover</h4>
Insert a multi-element popover container that can be opened/closed.
```python
with st.popover("Settings"):
st.checkbox("Show completed")
```
</RefCard>
<RefCard href="/develop/api-reference/layout/st.sidebar">
<Image pure alt="screenshot" src="/images/api/sidebar.jpg" />
<h4>Sidebar</h4>
Display items in a sidebar.
```python
st.sidebar.write("This lives in the sidebar")
st.sidebar.button("Click me!")
```
</RefCard>
<RefCard href="/develop/api-reference/layout/st.tabs">
<Image pure alt="screenshot" src="/images/api/tabs.jpg" />
<h4>Tabs</h4>
Insert containers separated into tabs.
```python
tab1, tab2 = st.tabs(["Tab 1", "Tab2"])
tab1.write("this is tab 1")
tab2.write("this is tab 2")
```
</RefCard>
</TileContainer>
<ComponentSlider>
<ComponentCard href="https://github.com/okld/streamlit-elements">
<Image pure alt="screenshot" src="/images/api/components/elements.jpg" />
<h4>Streamlit Elements</h4>
Create a draggable and resizable dashboard in Streamlit. Created by [@okls](https://github.com/okls).
```python
from streamlit_elements import elements, mui, html
with elements("new_element"):
mui.Typography("Hello world")
```
</ComponentCard>
<ComponentCard href="https://github.com/lukasmasuch/streamlit-pydantic">
<Image pure alt="screenshot" src="/images/api/components/pydantic.jpg" />
<h4>Pydantic</h4>
Auto-generate Streamlit UI from Pydantic Models and Dataclasses. Created by [@lukasmasuch](https://github.com/lukasmasuch).
```python
import streamlit_pydantic as sp
sp.pydantic_form(key="my_form",
model=ExampleModel)
```
</ComponentCard>
<ComponentCard href="https://github.com/blackary/st_pages">
<Image pure alt="screenshot" src="/images/api/components/pages.jpg" />
<h4>Streamlit Pages</h4>
An experimental version of Streamlit Multi-Page Apps. Created by [@blackary](https://github.com/blackary).
```python
from st_pages import Page, show_pages, add_page_title
show_pages([ Page("streamlit_app.py", "Home", "🏠"),
Page("other_pages/page2.py", "Page 2", ":books:"), ])
```
</ComponentCard>
</ComponentSlider>
|