xudongjin2019 / StreamlitAntdComponents

A Streamlit component to display Antd-Design

Streamlit-Antd-Components

A Streamlit component to display Antd-Design.

Check out the Demo App for more example.

highlight

• support streamlit theme(light or dark mode,or custom theme)
• support Bootstrap Icon
• more style params
• multiple nested items in menu and tree

Install

pip install streamlit-antd-components

Usage

This library now provides component blow:

• buttons A group of buttons component.
• tabs A tabs component.
• segmented Segmented Controls.
• menu A versatile menu for navigation
• tree A hierarchical list structure component.
• cascader Chooses cascade items in one float layer for better user experience.
• switch Switching between two states or on-off state
• divider A divider line separates different content
• transfer Double column transfer choice box
• alert Alert component for feedback

buttons example

import streamlit as st
from streamlit_antd_components import buttons

btn = buttons(['button1', 'button2', 'button3'], align='center', shape='round', format_func='title')
st.write(f'The selected button label is: {btn}')

tabs example

import streamlit as st
from streamlit_antd_components import tabs

tab = tabs(['tab1', 'tab2', 'tab3'], align='center', format_func='title')
st.write(f'The selected tab label is: {tab}')

menu example

import streamlit as st
from streamlit_antd_components import menu, MenuItem

item = menu([
    MenuItem('menu1', icon='house'),
    MenuItem('menu2', icon='app', children=[
        MenuItem('menu3', icon='twitter'),
        MenuItem('disabled', disabled=True),
    ]),
], format_func='title', open_all=True)
st.write(f'The selected menu label is: {item}')

tree example

import streamlit as st
from streamlit_antd_components import tree, TreeItem

item = tree([
    TreeItem('tree1', icon='table'),
    TreeItem('tree2', icon='table', children=[
        TreeItem('tree3', icon='image'),
        TreeItem('disabled', disabled=True),
    ]),
], index=0, format_func='title', open_all=True, checkbox=True, show_line=True)
st.write(f'The selected tree label is: {item}')

cascader example

import streamlit as st
from streamlit_antd_components import cascader, CasItem

item = cascader(
    items=[
        CasItem('cas1', icon='google'),
        CasItem('cas2', icon='twitter', children=[
            CasItem('cas3', icon='apple'),
            CasItem('disabled', disabled=True),
        ]),
        CasItem('cas4'),
    ], index=0, format_func='title', clear=True)
st.write(f'The selected cascader label is: {item}')

switch example

import streamlit as st
from streamlit_antd_components import switch, BsIcon

s = switch(value=True, checked=BsIcon('sun'), unchecked=BsIcon('moon'))
st.write(f'switch return value :{s}')

divider example

from streamlit_antd_components import divider

divider(label='divider', icon='house')

transfer example

import streamlit as st
from streamlit_antd_components import transfer

t = transfer(
    items=[f'item{i}' for i in range(20)],
    index=[0, 1],
)
st.write(f'The transfer label is {t}')

segmented example

import streamlit as st
from streamlit_antd_components import segmented

s = segmented(
    items=[f'item{i}' for i in range(5)],
)
st.write(f'The segmented label is {s}')

alert example

from streamlit_antd_components import alert

alert('some message', icon=True)