UI 라이브러리 - React Bootstrap (4. 주요 UI)

<Offfcanvas/>

전체 화면을 덮는 메뉴바가 나타난다. placement 속성으로 나타날 위치를 지정할 수 있고 기본은 start (왼쪽) 이다.

const [show, setShow] = useState<boolean>(false);    

return(
	<React.Fragment>
      <Button variant="primary" onClick={handleShow}>
        Launch
      </Button>

      <Offcanvas show={show} onHide={handleClose}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </React.Fragment>
  );

<Navbar />

네비게이션 메뉴를 나타내주는 bar이다. 다음과 같은 세부 컴포넌트들도 있다.

• Navbar.Link : 페이지를 이동하는 링크 역할
• Nav : 메뉴 목록
• NavDropdown : 드롭다운 메뉴
• NavDropdown.Item : 드롭다운 메뉴의 아이템
• NavDropdown.Divider : 구분선
• Toggle, Collapse : 반응형 화면에서, 햄버거 메뉴와 그 안의 목록

<Navbar bg="dark" data-bs-theme="dark">
  <Container>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">
          Another action
        </NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">
          Separated link
        </NavDropdown.Item>
      </NavDropdown>
    </Nav>                    
  </Container>
</Navbar>

<Placeholder />

대부분의 웹사이트는 데이터를 로딩하여 화면에 그려주는 작업을 한다. 하지만 이때, 데이터를 가져오는 찰나의 순간에도 사용자에게 컴퓨터의 작업이 그려지고 있는 중이라는 사실을 전달해주는 것이 좋은 UI이다. Placeholder는 이를 가능하게 해주는 컴포넌트이다.

	// 1.5초간 로딩 순간에는 placeholder가 보여지고, 이후에는 데이터가 보이는 예제이다.
 	const [isLoading, setIsLoading] = useState<boolean>(true);

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsLoading(false);
        }, 1500);

        return () => {
            clearTimeout(timer);
        }
    }, []);

    const skeletons = (
        <>       
            <Placeholder as={Card.Title} animation="wave">
                <Placeholder xs={6} />
            </Placeholder>
            <Placeholder as={Card.Text} animation="glow">
                <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} />{' '}
                <Placeholder xs={6} /> <Placeholder xs={8} />
            </Placeholder>
            <Placeholder.Button variant="primary" xs={6} />
        </>
    );

    return (
        <div>
            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src="/" style={{ width: '100%', height: 180 }} />
                <Card.Body>
                    {isLoading ? skeletons : (
                        <>
                            <Card.Title>
                                Lorem, ipsum
                            </Card.Title>
                            <Card.Text>
                                Some quick example text to build on the card title and make up the
                                bulk of the card's content.
                            </Card.Text>
                            <Button variant="primary">Go somewhere</Button>
                        </>                      
                    )}
                </Card.Body>
            </Card>
        </div>
    );