Streamlit, мощная библиотека Python, завоевала значительную популярность среди специалистов по данным и разработчиков, поскольку позволяет с легкостью создавать интерактивные и управляемые данными веб-приложения. В этой статье блога мы углубимся в различные методы и приемы создания привлекательных и интуитивно понятных макетов в Streamlit. Мы предоставим примеры кода для демонстрации каждого метода, что позволит вам повысить визуальную привлекательность и удобство использования ваших приложений Streamlit.

1. Столбцы Streamlit.
   Столбцы Streamlit позволяют разделить макет вашего приложения на несколько разделов, позволяя располагать контент рядом или стопкой. Вы можете использовать метод st.columnsдля создания столбцов и последующего заполнения их различными компонентами.

import streamlit as st
col1, col2 = st.columns(2)
with col1:
    st.header("Column 1")
    st.button("Button 1")
with col2:
    st.header("Column 2")
    st.button("Button 2")

2. Контейнеры Streamlit.
   Контейнеры позволяют группировать компоненты вместе, что упрощает организацию и структурирование макета вашего приложения. Метод st.containerвозвращает контейнер, который можно использовать для хранения нескольких компонентов.

import streamlit as st
container = st.container()
with container:
    st.header("Container Title")
    st.text("This is inside the container")
    st.button("Button")

3. Сетчатый макет Streamlit с помощью CSS.
   Streamlit позволяет использовать CSS для создания расширенных макетов сетки. Вы можете использовать собственные классы CSS, чтобы определить структуру макета и стиль вашего приложения.

import streamlit as st
st.markdown(
    """
    <style>
    .row {
        display: flex;
    }
    .column {
        flex: 50%;
        padding: 5px;
    }
    </style>
    """,
    unsafe_allow_html=True
)
st.markdown('<div class="row">', unsafe_allow_html=True)
st.markdown('<div class="column">', unsafe_allow_html=True)
st.header("Column 1")
st.button("Button 1")
st.markdown('</div>', unsafe_allow_html=True)
st.markdown('<div class="column">', unsafe_allow_html=True)
st.header("Column 2")
st.button("Button 2")
st.markdown('</div>', unsafe_allow_html=True)
st.markdown('</div>', unsafe_allow_html=True)

4. Сетчатый макет Streamlit с st.beta_columns:
   Метод st.beta_columnsStreamlit предлагает простой способ создания макетов в виде сетки. Он автоматически делит доступную ширину на столбцы одинакового размера.

import streamlit as st
col1, col2 = st.beta_columns(2)
with col1:
    st.header("Column 1")
    st.button("Button 1")
with col2:
    st.header("Column 2")
    st.button("Button 2")

5. Вкладки Streamlit.
   Вкладки Streamlit позволяют организовать содержимое вашего приложения на нескольких вкладках, предоставляя пользователям понятный и интуитивно понятный интерфейс. Вы можете использовать метод st.tabsдля создания вкладок и заполнения их компонентами.

import streamlit as st
tabs = st.tabs(["Tab 1", "Tab 2"])
with tabs[0]:
    st.header("Tab 1 Content")
    st.button("Button 1")
with tabs[1]:
    st.header("Tab 2 Content")
    st.button("Button 2")

В этой статье мы рассмотрели различные методы создания привлекательных и интуитивно понятных макетов в Streamlit. Мы рассмотрели столбцы, контейнеры, макеты сеток Streamlit с помощью CSS, макеты сеток с помощью st.beta_columnsи вкладки. Каждый метод предлагает различные возможности для организации и структурирования контента вашего приложения. Используя эти методы макетирования, вы можете улучшить взаимодействие с пользователем и создавать визуально привлекательные приложения Streamlit.