Streamlit에서 사이드바 꾸미기

오늘은 수업시간에 구글링과, ChatGPT를 활용을 통해 알게된 사이드바 테마 설정에 대해 업로드 하려고 합니다.

 

먼저 일반적으로 Streamlit에서 나타낼 수 있는 사이드바는 다음과 같습니다

 

 

 

sidebar구현 모습

 

 

 

 

 

 

 

sidebar 코드내용은 다음과 같습니다.

option = st.sidebar.selectbox(
    'Menu',
     ('페이지1', '페이지2', '페이지3'))

하지만 다음과 같은 코드를 이용하면 Sidebar를 커스텀 할 수 있습니다.

 

먼저 구현한 모습입니다.

 

 

 

 

streamlit sidebar를 꾸민 모습

 

 

 

 

 

 

 

코드는 다음과 같습니다.

with st.sidebar:
    choice = option_menu("Menu", ["페이지1", "페이지2", "페이지3"],
                         icons=['house', 'kanban', 'bi bi-robot'],
                         menu_icon="app-indicator", default_index=0,
                         styles={
        "container": {"padding": "4!important", "background-color": "#fafafa"},
        "icon": {"color": "black", "font-size": "25px"},
        "nav-link": {"font-size": "16px", "text-align": "left", "margin":"0px", "--hover-color": "#fafafa"},
        "nav-link-selected": {"background-color": "#08c7b4"},
    }
    )

해당 코드는 option_menu 함수를 사용하여 Streamlit 앱의 사이드바에 메뉴를 추가합니다. 

st.sidebar를 사용하여 사이드바에 추가되는 것을 의미합니다.

 

• option_menu 함수는 다음과 같은 변수를 사용합니다.
• label : 메뉴 항목의 레이블
• options : 메뉴에서 선택 가능한 항목 리스트
• icons : 항목에 대한 아이콘 리스트
• menu_icon : 전체 메뉴를 위한 아이콘
• default_index : 기본 선택 항목의 인덱스
• styles : CSS 스타일

위 코드에서는 "Menu"를 레이블로 하고, "페이지1", "페이지2", "페이지3"을 항목으로 하는 메뉴를 만듭니다.

각 항목은 "house", "kanban", "bi bi-robot" 아이콘과 연결됩니다. 전체 메뉴를 위한 아이콘으로 "app-indicator"가 사용되며, 기본 선택 항목의 인덱스는 0으로 설정됩니다. 또한, CSS 스타일을 적용하여 컨테이너 패딩, 아이콘 크기, 링크 텍스트

정렬 등을 지정합니다.

이 코드를 사용하여 Streamlit 앱에 메뉴를 추가하면 사용자가 사이드바에서 페이지를 선택할 수 있습니다.

option_menu 함수는 선택한 값을 반환합니다. 이 값은 해당 페이지를 렌더링하는 데 사용할 수 있습니다.

 

커스텀 목록은 우선,

 

1. 아이콘 변경

 

icons에는 코드에 제가 사용한 아이콘 외에도,

윈도우 + .(점) 을 이용한 아이콘 리스트나,

:(콜론) + 영단어를 이용한 아이콘,

혹은 다음의 무료 사이트에서 마음에 드는 아이콘을 고른 후에

https://icons.getbootstrap.com/

 

 

오른쪽 Icon font 내에 있는 bi bi-2-circle-fill을 추가하면 됩니다.

 

2. 배경색 변경

"nav-link-selected": {"background-color": "색깔"},

다음의 코드 내에 색깔에 해당하는 부분을 변경해주면 됩니다.

원하는 색깔은 다음의 사이트에서 골라서 변경하면 됩니다.

https://www.color-hex.com/color/08c7b4

#08c7b4 Color Hex

 

3. 글씨 크기 및 아이콘 크기 변경

 

 "icon": {"color": "black", "font-size": "25px"},

위의 코드에서 color을 변경하면 icon의 색상을 변경할 수 있고,

font-size를 변경해주면 아이콘의 크기를 변경할 수 있습니다.