如何在 div 标签内使用带有 streamlit(bootstrap 卡)的 if 语句
How to use if statment inside div tags with streamlit (bootstrap card)
如何在 div 标签中使用 if statement
和 streamlit ?
我正在使用 bootstrap card 和 streamlit 来显示来自 dataframe 的信息。
我需要的是能够在 bootstrap 卡片 不为空时显示内容,并在其为空时隐藏信息。
代码:
def card(ID,name,nickname,mother_name,bd):
return f'''
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">ID: {ID}</h5>
<h6 class="card-subtitle mb-2 text-muted">Name: {name}</h6>
<p class="card-text">Nickname: {nickname}</p>
<p class="card-text">Date of Birth: {bd}</p>
<p class="card-text">Mother Name: {mother_name}</p>
</div>
</div>
'''
st.markdown("""
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
""",unsafe_allow_html=True)
df_result_search = pd.DataFrame()
with st.sidebar.form(key='search_form',clear_on_submit= False):
regular_search_term=st.text_input("Enter Search Term")
if st.form_submit_button("search"):
df_result_search = df[df['name'].str.contains(regular_search_term)|df['nickname'].str.contains(regular_search_term)|df['mother_name'].str.contains(regular_search_term)]
st.write("{} Records ".format(str(df_result_search.shape[0])))
for index ,row in df_result_search.iterrows():
st.markdown(card(
row[0],
row[1],
row[2],
row[3],
row[4],
),unsafe_allow_html=True)
我们在显示时使用样式,如果 none 我们隐藏它。结果将最多显示 5 列。必要时打开宽屏模式。
代码
import math
import streamlit as st
import pandas as pd
data = {
'ID': [1, 2, 3, 4, 5, 6, 7, 8, 9],
'name': ['peter', 'john', 'james', 'james', 'james', 'james', 'james', 'james', 'james'],
'nickname': ['pet', 'jon', None, 'james', 'jem', 'jack', 'jo', 'mes', 'ja'],
'mother_name': ['maria', 'linda', 'ana', 'beth', 'vivian', 'rose', 'meg', 'sharon', 'neda'],
'bd': ['2000-05-15', '2006-09-12', '2004-10-25', '1999-01-08', '2009-12-14', '2001-11-20', '1999-05-12', '2009-01-28', '2009-03-14']
}
st.markdown("""
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
""",unsafe_allow_html=True)
def card(ID,name,nickname,mother_name,bd, v1, v2, v3, v4):
return f'''
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">ID: {ID}</h5>
<h6 class="card-subtitle mb-2 text-muted" style="display: {v1};">Name: {name}</h6>
<p class="card-text" style="display: {v2};">Nickname: {nickname}</p>
<p class="card-text" style="display: {v3};">Date of Birth: {bd}</p>
<p class="card-text" style="display: {v4};">Mother Name: {mother_name}</p>
</div>
</div>
'''
df = pd.DataFrame(data)
st.write(df)
df_result_search = pd.DataFrame()
with st.sidebar.form(key='search_form',clear_on_submit= False):
regular_search_term=st.text_input("Enter Search Term")
if st.form_submit_button("search"):
df_result_search = df[df['name'].str.contains(regular_search_term) |
df['nickname'].str.contains(regular_search_term) |
df['mother_name'].str.contains(regular_search_term)]
rec = df_result_search.shape[0]
st.write("{} Records ".format(str(rec)))
num_rows = max(1, math.ceil(rec/5))
# Save cards data temporarily.
dv = 'inherit'
cards = []
for index, row in df_result_search.iterrows():
v1 = dv if row[1] is not None else 'none'
v2 = dv if row[2] is not None else 'none'
v3 = dv if row[3] is not None else 'none'
v4 = dv if row[4] is not None else 'none'
cards.append([row[0], row[1], row[2], row[3], row[4], v1, v2, v3, v4])
# Show the card data.
if len(cards):
for r in range(num_rows):
num_cols = min(5, max(1, rec))
c = st.columns(num_cols)
for m in range(num_cols):
if len(cards):
mycard = cards.pop(0)
c[m].markdown(card(*mycard), unsafe_allow_html=True)
输出
如何在 div 标签中使用 if statement
和 streamlit ?
我正在使用 bootstrap card 和 streamlit 来显示来自 dataframe 的信息。
我需要的是能够在 bootstrap 卡片 不为空时显示内容,并在其为空时隐藏信息。
代码:
def card(ID,name,nickname,mother_name,bd):
return f'''
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">ID: {ID}</h5>
<h6 class="card-subtitle mb-2 text-muted">Name: {name}</h6>
<p class="card-text">Nickname: {nickname}</p>
<p class="card-text">Date of Birth: {bd}</p>
<p class="card-text">Mother Name: {mother_name}</p>
</div>
</div>
'''
st.markdown("""
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
""",unsafe_allow_html=True)
df_result_search = pd.DataFrame()
with st.sidebar.form(key='search_form',clear_on_submit= False):
regular_search_term=st.text_input("Enter Search Term")
if st.form_submit_button("search"):
df_result_search = df[df['name'].str.contains(regular_search_term)|df['nickname'].str.contains(regular_search_term)|df['mother_name'].str.contains(regular_search_term)]
st.write("{} Records ".format(str(df_result_search.shape[0])))
for index ,row in df_result_search.iterrows():
st.markdown(card(
row[0],
row[1],
row[2],
row[3],
row[4],
),unsafe_allow_html=True)
我们在显示时使用样式,如果 none 我们隐藏它。结果将最多显示 5 列。必要时打开宽屏模式。
代码
import math
import streamlit as st
import pandas as pd
data = {
'ID': [1, 2, 3, 4, 5, 6, 7, 8, 9],
'name': ['peter', 'john', 'james', 'james', 'james', 'james', 'james', 'james', 'james'],
'nickname': ['pet', 'jon', None, 'james', 'jem', 'jack', 'jo', 'mes', 'ja'],
'mother_name': ['maria', 'linda', 'ana', 'beth', 'vivian', 'rose', 'meg', 'sharon', 'neda'],
'bd': ['2000-05-15', '2006-09-12', '2004-10-25', '1999-01-08', '2009-12-14', '2001-11-20', '1999-05-12', '2009-01-28', '2009-03-14']
}
st.markdown("""
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
""",unsafe_allow_html=True)
def card(ID,name,nickname,mother_name,bd, v1, v2, v3, v4):
return f'''
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">ID: {ID}</h5>
<h6 class="card-subtitle mb-2 text-muted" style="display: {v1};">Name: {name}</h6>
<p class="card-text" style="display: {v2};">Nickname: {nickname}</p>
<p class="card-text" style="display: {v3};">Date of Birth: {bd}</p>
<p class="card-text" style="display: {v4};">Mother Name: {mother_name}</p>
</div>
</div>
'''
df = pd.DataFrame(data)
st.write(df)
df_result_search = pd.DataFrame()
with st.sidebar.form(key='search_form',clear_on_submit= False):
regular_search_term=st.text_input("Enter Search Term")
if st.form_submit_button("search"):
df_result_search = df[df['name'].str.contains(regular_search_term) |
df['nickname'].str.contains(regular_search_term) |
df['mother_name'].str.contains(regular_search_term)]
rec = df_result_search.shape[0]
st.write("{} Records ".format(str(rec)))
num_rows = max(1, math.ceil(rec/5))
# Save cards data temporarily.
dv = 'inherit'
cards = []
for index, row in df_result_search.iterrows():
v1 = dv if row[1] is not None else 'none'
v2 = dv if row[2] is not None else 'none'
v3 = dv if row[3] is not None else 'none'
v4 = dv if row[4] is not None else 'none'
cards.append([row[0], row[1], row[2], row[3], row[4], v1, v2, v3, v4])
# Show the card data.
if len(cards):
for r in range(num_rows):
num_cols = min(5, max(1, rec))
c = st.columns(num_cols)
for m in range(num_cols):
if len(cards):
mycard = cards.pop(0)
c[m].markdown(card(*mycard), unsafe_allow_html=True)