Hi everyone, as a part of a series on sharing components, I will share a solution for using beautiful Antd components in a Streamlit application called Streamlit-antd. It makes our lives easier when developing complex features.
Install
pip install streamlit-antd
Usage
Tabs
from streamlit_antd.tabs import st_antd_tabs
event = st_antd_tabs([{"Label": op} for op in options], key="labs_tab")
logger.info(f"event : {event}")
Cascader
from streamlit_antd.cascader import st_antd_cascader
selected = st_antd_cascader(
options,
multiple=multiple,
disabled=disabled,
key=f"{key}_cascader_machine",
**{"defaultValue": saved_value, **kwargs},
)
Table
from streamlit_antd.table import st_antd_table
df = pd.DataFrame(data)
st_antd_table(df, color_backgroud="#f9f6f1", hidden_columns=["Index"])
Breadcrumb
from streamlit_antd.breadcrumb import st_antd_breadcrumb
items = [
{"Label": "My Applications"},
{"Label": f"Application({application.name})"},
{"Label": "Edit Documentation"},
]
clicked_event = st_antd_breadcrumb(items)
if clicked_event:
if clicked_event["payload"]["Label"] == "My Applications":
router.redirect(*router.build("show_applications"))
elif clicked_event["payload"]["Label"].startswith("Application"):
router.redirect(
*router.build("show_application", {"name": application.name})
)
Pager
from streamlit_antd.pager import st_pager
jobs = st_pager(
lambda page, limit: JobManager.get_jobs(
application_name=application.name,
offset=((page - 1) * limit),
limit=limit,
)[1],
job_count,
page_size=100,
key="job-pager",
)
Result
from streamlit_antd.result import Action, st_antd_result
title = "Job Created Successfully!"
sub_title = f"job name: {job_name}. The job running takes a few minutes, please wait."
actions = [
Action("show_job", "Job details", primary=True),
Action("create", "Create a new job"),
Action("edit", "Back edit"),
]
clicked_event = st_antd_result(title, sub_title, actions)
Card
from streamlit_antd.cards import Action, Item, st_antd_cards
items = [
Item(
**{
"id": dataset.name,
"title": dataset.title,
"description": dataset.description,
"email": dataset.creator,
"cover": dataset.get_image_cover(resize="238x160,s"),
"actions": [
Action("config", "SettingOutlined"),
Action("edit", "EditOutlined"),
Action("open", "FolderOpenOutlined"),
],
}
)
for dataset in datasets
if (not tag or tag == "All") or tag in dataset.tags
]
event = st_antd_cards(items)
if event and event["action"] in ("detail", "click", "open"):
router.redirect(
*router.build("show_dataset", {"dataset_name": event["payload"]["id"]})
)
Steps
from streamlit_antd.steps import Item, st_antd_steps
items = [
Item(
"Initialization",
"In this stage, the system is being set up and initialized to prepare for the task. This includes configuring the necessary settings, loading any required data, and initializing any resources that will be used during the task.", # noqa: E501
),
Item(
"PreProcessing",
"In this stage, the task is being submitted to the system for processing. This involves sending the task request to the server and waiting for a response to confirm that the task has been accepted.",
),
Item(
"Running",
"In this stage, the task is actively being processed by the system. This involves running the necessary algorithms and computations to complete the task, and monitoring the progress to ensure that the task is proceeding as expected.", # noqa: E501
),
Item(
"PostProcessing",
"In this stage, the task has been completed and the results are being retrieved from the system. This involves retrieving the output data generated by the task, saving it to a designated location, and closing any resources that were used during the task.", # noqa: E501
),
]
st_antd_steps(
items, current, process=process, error=error, direction="vertical"
)
Another interesting similar project is streamlit-antd-components, which provides a wealth of examples but lacks commonly used components such as Table.