Центральная кнопка Streamlit

Question

Как центрировать кнопку с помощью Streamlit, чтобы кнопка оставалась доступной для нажатия? Вот небольшой пример кнопки, которая возвращает случайные числа:

 import streamlit as st 
 import numpy as np

 if st.button('Click'): 
     rand = np.random.standard_normal()
     st.write(str(rand))

Я видел решения с уценкой для заголовка, но не для интерактивного элемента, такого как кнопка.

Answer 1

Прямо сейчас это не поддерживается в Streamlit, но мы работаем над этим (см. Нашу дорожную карту для получения дополнительной информации). Не стесняйтесь добавлять свои идеи в обсуждение Customizable Layout for Streamlit.

И спасибо за использование Streamlit!

Answer 2

      col1, col2, col3 = st.beta_columns(3)
if col2.button('Click'):
    st.write('hello')

Answer 3

TL;ДР;

      import streamlit as st

st.markdown("----", unsafe_allow_html=True)
columns = st.columns((2, 1, 2))
button_pressed = columns[1].button('Click Me!')
st.markdown("----", unsafe_allow_html=True)

Вы получите следующий результат (если по умолчанию: узкие настройки Streamlit страницы):

Стримлитные колонки

Документы Streamlit определяют columns() следующим образом:

      columns = st.columns(spec)

гдеspecsлибоintилиlist(или кортеж). Например,st.columns([3, 1, 2])создает 3 столбца, где первый столбец в 3 раза шире второго, а последний столбец в 2 раза шире. Следовательно, вы можете поиграть с их относительной шириной.

Что более полезно, вы получите список столбцов, поэтому вы можете обращаться к ним как к последовательным числам. Вы можете использовать это в случае гибкого количества столбцов:

      import streamlit as st
import random

column_qty = random.randint(1, 10)  # random number of columns on each run
buttons_pressed = []  # here we will collect widgets
st.markdown("----", unsafe_allow_html=True)

#  create all columns with arbitrary relative widths
columns = st.columns([random.randint(1, 3) for _ in range(column_qty)]) 

# Show widgets in them
for x, col in enumerate(columns):
    # if you need a static widget, just use: `col.text("some text")`
    buttons_pressed.append(col.checkbox(f'{x}')) # add widgets to the list
st.markdown("----", unsafe_allow_html=True)
st.text(f'Total columns: {column_qty}')

# Check each widget for its state
for x, btn in enumerate(buttons_pressed):
    if btn:
        st.write(f"{x}")  # NOTE: some columns may be dropped next run! 

Очень полезная вещь для гибких форм ввода.

Answer 4

Насколько я знаю, стандартного способа выровнять кнопку по центру нет. Однако я нашел быстрое решение. Это неправильный способ, но работает.

Вы можете попробовать:

      col1, col2, col3 , col4, col5 = st.beta_columns(5)

with col1:
    pass
with col2:
    pass
with col4:
    pass
with col5:
    pass
with col3 :
    center_button = st.button('Button')

Следующее создаст 5 столбцов, и вы можете центрировать кнопку в третьем столбце, в то время как остальные 4 останутся пустыми. Это просто быстрое исправление, а не правильный способ, однако он сработал за меня. Надеюсь, вам понравилось.

Answer 5

Чтобы создать 3 столбца, выберите центральный и добавьте к нему кнопку, вы можете использовать:

      import streamlit as st  # 1.18.1

if st.columns(3)[1].button("click me"):
    st.write("clicked")

Однако это не центрирует кнопку внутри столбца, поэтому взлом CSS кажется текущим вариантом, но я подозреваю, что классы ненадежны:

      style = "<style>.row-widget.stButton {text-align: center;}</style>"
st.markdown(style, unsafe_allow_html=True)

with st.empty():
    if st.button("click me"):
        st.button("clicked!")

Другой подход к центрированию, следующий существующим ответам, заключается в том, чтобы заставить контейнер кнопки быть меньше, чтобы он занимал большую часть или все пространство в нем, функционально центрируя его:

      col = st.columns(7)[3]  # use an odd number and pick the middle element
clicked = col.button("click me")

Возможно, лучше оставить 3 столбца, но сделать первый и последний большими, а средний — примерно под размер кнопки. Отрегулируйте по вкусу:

      col = st.columns((3, 1, 3))[1]  # adjust to taste, possibly using floats
clicked = col.button("click me")

Удаление свойства flex с помощью пользовательского CSS может помочь сделать его устойчивым к разным размерам экрана, чтобы текст кнопки не сжимался при сжатии.

Ни один из этих подходов не является полностью удовлетворительным, поэтому мне любопытно узнать о каких-либо новых разработках.

См. также Как центрировать заголовок и изображение в потоке?.

Answer 6

Использовать:

      _, _, _, col, _, _, _ = st.columns([1]*6+[1.18])
clicked = col.button('Button')

Answer 7

для решения этой проблемы вы можете использовать:

      col1, col2, col3 = st.columns([0.26, 0.3, 0.1])
with col1:
   pass
with col2:
   btn = st.button("your_button")
   if btn:
      st.write('clicked')
with col3:
   pass

В этом коде известно, что наша кнопка будет размещена в начале второго столбца (col2). Чтобы отрегулировать положение кнопки влево или вправо, вы можете просто изменить ширину первого столбца col1(0,26). Регулируя процент ширины col1, вы можете соответствующим образом перемещать кнопку. Убедитесь, что сумма процентов ширины для всех столбцов остается меньше или равна 1. Процент ширины третьего столбца (col3) не влияет на размещение кнопки.