大家好,我正在建设一个简单的网络应用程序与streamlit在python。我需要添加3个按钮,但他们必须在同一行。显然,下面的代码将它们放在三个不同的行上
st.button('Button 1')st.button('Button 2')st.button('Button 3')
st.button('Button 1')
st.button('Button 2')
st.button('Button 3')
字符串你有什么建议吗?
w3nuxt5m1#
很明显这个应该可以了
col1, col2, col3 = st.columns([1,1,1])with col1: st.button('1')with col2: st.button('2')with col3: st.button('3')
col1, col2, col3 = st.columns([1,1,1])
with col1:
st.button('1')
with col2:
st.button('2')
with col3:
st.button('3')
字符串
8ehkhllq2#
如果你像我一样,它可能会困扰你,列等间距,使布局没有视觉吸引力,因为按钮看起来相距甚远。经过大量的CSS挖掘,我发现了一个非常简单的方法,不需要安装任何其他库。可以(至少对于当前版本的streamlit)应用以下CSS使列仅与按钮一样宽。我在文件的顶部包含了这个:
st.markdown(""" <style> div[data-testid="column"] { width: fit-content !important; flex: unset; } div[data-testid="column"] * { width: fit-content !important; } </style> """, unsafe_allow_html=True)
st.markdown("""
<style>
div[data-testid="column"] {
width: fit-content !important;
flex: unset;
}
div[data-testid="column"] * {
</style>
""", unsafe_allow_html=True)
字符串然后(对于我的用例):
col1, col2, col3 = st.columns([1,1,1]) with col1: st.button(...) with col2: st.button(...) with col3: st.download_button(...)
st.button(...)
st.download_button(...)
型
pobjuy323#
我有一个类似的问题-添加一个动作按钮到一个表。我来到了以下方法:
import streamlit as st # # Show users table colms = st.columns((1, 2, 2, 1, 1)) fields = ["№", 'email', 'uid', 'verified', "action"] for col, field_name in zip(colms, fields): # header col.write(field_name) for x, email in enumerate(user_table['email']): col1, col2, col3, col4, col5 = st.columns((1, 2, 2, 1, 1)) col1.write(x) # index col2.write(user_table['email'][x]) # email col3.write(user_table['uid'][x]) # unique ID col4.write(user_table['verified'][x]) # email status disable_status = user_table['disabled'][x] # flexible type of button button_type = "Unblock" if disable_status else "Block" button_phold = col5.empty() # create a placeholder do_action = button_phold.button(button_type, key=x) if do_action: pass # do some action with row's data button_phold.empty() # remove button
import streamlit as st
# # Show users table
colms = st.columns((1, 2, 2, 1, 1))
fields = ["№", 'email', 'uid', 'verified', "action"]
for col, field_name in zip(colms, fields):
# header
col.write(field_name)
for x, email in enumerate(user_table['email']):
col1, col2, col3, col4, col5 = st.columns((1, 2, 2, 1, 1))
col1.write(x) # index
col2.write(user_table['email'][x]) # email
col3.write(user_table['uid'][x]) # unique ID
col4.write(user_table['verified'][x]) # email status
disable_status = user_table['disabled'][x] # flexible type of button
button_type = "Unblock" if disable_status else "Block"
button_phold = col5.empty() # create a placeholder
do_action = button_phold.button(button_type, key=x)
if do_action:
pass # do some action with row's data
button_phold.empty() # remove button
字符串它工作得很好。对象-user_table-是一个与DataFrame非常相似的字典,其中每个键-是一个列(即Python术语中的list)。下面是它的样子(注意“阻塞”-这是操作的结果):x1c 0d1x
user_table
list
ryoqjall4#
对this answer进行了一点泛化,以使用动态数量的按钮:
import streamlit as st # 1.18.1button_text = "foo", "bar", "baz"for text, col in zip(button_text, st.columns(len(button_text))): if col.button(text): col.write(f"{text} clicked")
import streamlit as st # 1.18.1
button_text = "foo", "bar", "baz"
for text, col in zip(button_text, st.columns(len(button_text))):
if col.button(text):
col.write(f"{text} clicked")
字符串如果文本不一定是唯一的:
button_text = "foo", "bar", "foo"pairs = zip(button_text, st.columns(len(button_text)))for i, (text, col) in enumerate(pairs): if col.button(text, key=f"{text}-{i}"): col.write(f"{text}-{i} clicked")
button_text = "foo", "bar", "foo"
pairs = zip(button_text, st.columns(len(button_text)))
for i, (text, col) in enumerate(pairs):
if col.button(text, key=f"{text}-{i}"):
col.write(f"{text}-{i} clicked")
4条答案
按热度按时间w3nuxt5m1#
很明显这个应该可以了
字符串
8ehkhllq2#
如果你像我一样,它可能会困扰你,列等间距,使布局没有视觉吸引力,因为按钮看起来相距甚远。
经过大量的CSS挖掘,我发现了一个非常简单的方法,不需要安装任何其他库。可以(至少对于当前版本的streamlit)应用以下CSS使列仅与按钮一样宽。我在文件的顶部包含了这个:
字符串
然后(对于我的用例):
型
pobjuy323#
我有一个类似的问题-添加一个动作按钮到一个表。我来到了以下方法:
字符串
它工作得很好。对象-
user_table
-是一个与DataFrame非常相似的字典,其中每个键-是一个列(即Python术语中的list
)。下面是它的样子(注意“阻塞”-这是操作的结果):x1c 0d1xryoqjall4#
对this answer进行了一点泛化,以使用动态数量的按钮:
字符串
如果文本不一定是唯一的:
型