如何在 div 标签内使用带有 streamlit（bootstrap 卡）的 if 语句

Question

如何在 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)

Answer 1

我们在显示时使用样式，如果 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 标签内使用带有 streamlit（bootstrap 卡）的 if 语句

How to use if statment inside div tags with streamlit (bootstrap card)

python

if-statement

streamlit

bootstrap-cards

代码

输出