Project

PROJECT 1-(2) 사이드바 디자인, 메뉴 누르면 페이지 이동하게 하기

567Rabbit 2024. 5. 8. 14:52

 

 

 

 

app.py 하나를 구동하면 함수로 app_ home, app_ view, app_ predict, app_ compare이 구동되게 할 것이므로

먼저, 함수들을 임포트한다

import streamlit as st
from app_home import run_home      
from app_predict import run_predict  
from app_view import run_view
from app_compare import run_compare
from streamlit_option_menu import option_menu

 

 

 

보이는 페이지 레이아웃을 넓게, 사이드바도 넓게 조정하였다

st.set_page_config(layout="wide", initial_sidebar_state="expanded")

 

 

 

 

사이드바를 꾸미는 함수를 만들고, 사이드바 메뉴를 클릭하면 함수가 호출되게 하였다.

 

st.write에서 #은 갯수가 적을수록 글자 크기가 커진다. # 뒤에는 공백 한칸이 있어야 적용된다.

def main():
        
    menu = ['Project Description','Viewing Stock Information','Predicting Stock Value','Comparing Domestic ETF']
    
    with st.sidebar :
        st.write('### 국내 주식 실시간 주가 예측📈📉')
        choice = option_menu(' ',menu,
                             icons=["house",'bi bi-search',"bi bi-graph-up-arrow","bi bi-file-earmark-bar-graph"] , menu_icon="bi bi-buildings", default_index=0,
                            )
    
    if choice == menu[0] : 
        run_home()
    elif choice == menu[1]: 
        run_view()          
    elif choice == menu[2]:
        run_predict()
    elif choice == menu[3]:
        run_compare() 


if __name__ == '__main__':
    main()

 

 

 

 

 

화면에 표시되는 사이드바

 

 

아이콘 'name'은 차례대로

 

"bi bi-buildings"

"house"

'bi bi-search'

"bi bi-graph-up-arrow"

"bi bi-file-earmark-bar-graph" 이다.

 

원하는 아이콘의 name을 알고 싶다면, 아래를 참조하면 된다.

https://icons.getbootstrap.com/

 

Bootstrap Icons

Official open source SVG icon library for Bootstrap

icons.getbootstrap.com

 

 

 

 

📈 📉 와 같은 아이콘은 다음 사이트에서 복사하였다.

 

https://emojiegg.com/emoji-text-symbol/

 

emojiEgg

이모티콘, 별, 하트(사랑), 도형, 화살표, 수학기호, 숫자, 기호, 원문자, 단위, 화폐 등 여러 종류 특수문자 모음

emojiegg.com