2.pynecone Demo Navigation Bar 구현

 

프로젝트 명(폴더) : demo_board

#	파일 경로	설명	구현 여부
1	pcconfig.py	pc 구동 설정 파일	기본생성
2	demo_board > demo_board.py	첫 index 페이지 ("/")	기본생성, 일부수정
3	demo_board > demo_state.py	나중 추가 확장성(페이지추가)를 위해 Base State(pc.State)	추가
4	demo_board > demo_auth.py	"/login" 페이지	추가
5	demo_board > demo_helpers.py	Navigation Bar 화면 생성	추가

#3 demo_state.py 추가

- 아직은 빈 Base State class

import pynecone as pc

class State(pc.State):
    """The base state for the app."""
    print("──────────────────── [ State(pc.State) ] ────────────────────")

 

#4 demo_auth.py 생성

import pynecone as pc

from .demo_state import State # Substate of Base State

class AuthState(State):
    """The Substate of base state for the login page."""
    print("──────────────────── [ AuthState(State) ] ────────────────────")

def login():
    return pc.box(
        pc.vstack(
            pc.heading("로그인 페이지", font_size="2em"),
            padding_top="5em",
            width="100%",
        ),
    )

 

 

#2 demo_board.py 수정

- State(pc.State) 클래스 제거,

- 앞에서 생성한 demo_state.py의 Base State import

- link를 추가한 demo_auth.py의  /login Page로 변경

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc
from .demo_state import State  #1 새로 생성한 demo_state.py page의 State import
from .demo_auth import login   #2 새로 생성한 login page를 import

def index():
    return pc.center(
        pc.vstack(
            pc.heading("Pynecone Demo Board!", font_size="2em"),
            pc.link(
                "로그인",              #3 화면 내용 수정
                href="/login",
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.add_page(login) #4 로그인 페이지를 App에 등록
app.compile()

실행 - pc run

"/" 페이지 수정

#5 demo_helpers.py 추가

로그인 Page 및 추가될 Page들에서 공통으로 사용할 Navigation Bar를 화면 상단에 fix 크기로 생성합니다.

import pynecone as pc
from .demo_state import State # Base State의 Vars들을 사용하기위해서 import

def navbar(State, app_name): #1 Nav.Bar 상단에 각 Page의 이름을 표시하기위해서 파라미터로 받음.
    """The navbar."""
    return pc.box(
        pc.hstack(
            pc.hstack(
                pc.image(src="bada.png", width="48px"), #2 회사 로고가있어서 좌측상단에 표시
                pc.heading("Demo Board")                #3 로고 옆에 프로젝트 이름
                pc.heading(" - "+app_name, size="lg", color="navy"), #4 Page 이름 표시
            ),
            pc.spacer(),
            justify="space-between",
            border_bottom="0.15em solid #d3d3d3",
            padding_x="2em",
            padding_y="1em",
            bg="rgba(255,255,255, 1)",
        ),
        position="fixed", #5 Box의 위치 및 크기를 지정후 고정한다.
        width="100%",
        top="0px",
        z_index="500",
    )

생성한 Navigation Bar를 login Page에 붙여 넣기

- login page 의 이름을 지정하고

- navbar를 추가할때 page 이름을 파라미터로 전달

import pynecone as pc

from .demo_state import State # Substate of Base State

class AuthState(State):
    """The Substate of base state for the login page."""
    print("──────────────────── [ AuthState(State) ] ────────────────────")
    app_name: str = "Log In" #1 Navigation Bar에 표시될 Page 명

def login():
    return pc.box(
        pc.vstack(
            navbar(State, AuthState.app_name), #2 맨위 상단에 navbar를 추가 
            pc.heading("로그인 페이지", font_size="2em"),
            padding_top="5em",
            width="100%",
        ),
    )

실행

다음 페이지 : https://amnesia.tistory.com/10