Streamlit 이모티콘 넣기 & 사이드바 꾸미기 (streamlit_option_menu)

< 이모티콘 넣기 >

•  streamlit을 이용해 웹화면을 구성할때 이모티콘을 넣어서 꾸미고 싶다면

 

• 해당 사이트를 참고해서 이모티콘 문구를 텍스트 우측에 넣어주면 이미지로 출력됨
• 참조 링크 : https://streamlit-emoji-shortcodes-streamlit-app-gwckff.streamlit.app/

A faster way to build and share data apps

 

•  Shortcodes 문구를 그대로 복사붙여넣기 해주면된다! 갯수가 몇만개가 넘어가기 때문에 대략적인 원하는 이미지 단어를 아는게 좋음.

st.markdown("### 기능 소개 :grey_exclamation:")

 

< 사이드바 꾸미기 >

• 먼저 일반적으로 Streamlit에서 나타낼 수 있는 사이드바는 이렇다.

menu = ['메인 화면','데이터 통계 분석','시간에 따른 가격 예측','특정 날짜의 가격 예측']

    choice = st.sidebar.selectbox('메뉴', menu)

 

• 하지만 하단 이미지와 같이 사이드바를 커스텀 할수 있다.

 

1 ) Streamlit 옵션 메뉴 설치와 필요한 라이브러리 호출

• 터미널에 입력하여 설치

pip install streamlit-option-menu

 

• 라이브러리 호출

import streamlit as st

from streamlit_option_menu import option_menu

 

2 ) 코드 작성

def main():

    menu = ['메인 화면','데이터 통계 분석','시간에 따른 가격 예측','특정 날짜의 가격 예측']

    with st.sidebar:

        choice = option_menu("Menu", menu,

                         icons=['house', 'kanban', 'bi bi-robot', '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": "#38B3E3"},

        }

        )

   

    if choice == menu[0] :

        run_home()

    elif choice == menu[1] :

        run_eda()

    elif choice == menu[2] :

        run_graph()

    elif choice == menu[3] :

        run_ml()

if __name__ == '__main__' :

    main()

ㄴ 사이드바를 커스텀 하였고, 반복문을 활용하여 해당 메뉴를 선택할 경우 각 메뉴 항목 인덱스에 맞는 함수가 실행되도록 코딩함

 

3) 코드 설명 및 수정 방법

menu = ['메인 화면','데이터 통계 분석','시간에 따른 가격 예측','특정 날짜의 가격 예측']

 

with st.sidebar:

        choice = option_menu("메뉴 타이틀", menu (메뉴항목들 나처럼 변수로 미리 만들어 넣어도 되고 직접 [ ] 리스트 안에 작성해도됨),

                         icons=['메뉴 아이콘' (개수에 맞게 적어줘야함)],

                         menu_icon="메뉴 타이틀 아이콘", default_index=0, # default_index는 처음에 보여줄 페이지 번호

                         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": "#38B3E3"},

        } # 뒤쪽은 전부 CSS 설정

        )

 

• 메뉴 아이콘 바꾸는 방법

# 보통 해당 사이트에서 이미지를 찾음 => https://icons.getbootstrap.com/

Bootstrap Icons

 

# 원하는 아이콘을 선택하고 들어간뒤에 밑줄친 문구만 복사하여 이모티콘 영역에 붙여넣기 하면 된다.

 

with st.sidebar:

        choice = option_menu("Menu", menu,

                         icons=['house', 'kanban', 'bi bi-robot', 'bi bi-emoji-kiss-fill'], => 4번째 메뉴 아이콘을 변경했음

 

• 배경색 변경

    with st.sidebar:

        choice = option_menu("Menu", menu,

                         icons=['house', 'kanban', 'bi bi-robot', 'bi bi-robot'],

                         menu_icon="app-indicator", default_index=0,

                         styles={

        "container": {"padding": "4!important", "background-color": "#fafafa"},

 

# "background-color" : 뒤에 원하는 색상으로 문구를 넣어주면 배경색이 변경된다.

# 해당 사이트에서 색 선택 => https://www.color-hex.com/

Color Hex Color Codes

 

    "container": {"padding": "4!important", "background-color": " #FF6100 "},

ㄴ 이런식으로 원하는 색상 코드를 입력하면 변경됨

 

• 아이콘 색상과 크기도 해당 부분을 수정하면 변경 가능

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

 

간단하게 작업중 알게된 Tip 정리