Streamlit - 멀티 페이지 사이드바 메뉴 시각화하기(streamlit_option

AI & ML/Streamlit (Web Dashboard)

Streamlit - 멀티 페이지 사이드바 메뉴 시각화하기(streamlit_option_menu)

luvris2 2022. 5. 30. 12:08

사이드바 메뉴 위한 모듈 설치 및 설정

스트림릿 옵션 메뉴 설치

pip install streamlit-option-menu

필요한 라이브러리 호출

import streamlit as st
from streamlit_option_menu import option_menu
import streamlit.components.v1 as html
from  PIL import Image
import numpy as np
import pandas as pd
import plotly.express as px
import io

메뉴 소스 코드

with st.sidebar:
    choose = option_menu("App Gallery", ["About", "Photo Editing", "Project Planning"],
                         icons=['house', 'camera fill', 'kanban'],
                         menu_icon="app-indicator", default_index=0,
                         styles={
        "container": {"padding": "5!important", "background-color": "#fafafa"},
        "icon": {"color": "orange", "font-size": "25px"}, 
        "nav-link": {"font-size": "16px", "text-align": "left", "margin":"0px", "--hover-color": "#eee"},
        "nav-link-selected": {"background-color": "#02ab21"},
    }
    )

구현 화면

소스 코드 설명

with st.sidebar:
    choose = option_menu("메뉴 타이틀", ["메뉴 이름1", "메뉴 이름2", "메뉴 이름3... 등등"],
                         icons=['메뉴 아이콘1', '메뉴 아이콘2', '메뉴 아이콘3'],
                         menu_icon="메뉴 타이틀 아이콘", default_index=0,
                         styles={
                         # default_index = 처음에 보여줄 페이지 인덱스 번호
        "container": {"padding": "5!important", "background-color": "#fafafa"},
        "icon": {"color": "orange", "font-size": "25px"}, 
        "nav-link": {"font-size": "16px", "text-align": "left", "margin":"0px", "--hover-color": "#eee"},
        "nav-link-selected": {"background-color": "#02ab21"},
    } # css 설정
    )