React-Bootstrapで色々使ってみる -Navbar-

React-Bootstrapを使えるようにするでboot-strapが使えるようになったので、色々触ってみる。今回はNavbar。
ほぼ本家のコピペなので、詳しくは本家参照。

Navbar

ヘッダーにあたる部分。多分全アプリで必要だと思う。

とりあえずコピペしてみる。

App.js

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import LOGO from './logo.svg';

class App extends Component {
    render() {
        return (
            <Navbar bg="dark" variant="dark">
                <img
                    src={LOGO}
                    width="30"
                    height="30"
                    alt="React Bootstrap logo"
                />
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#features">Features</Nav.Link>
                    <Nav.Link href="#pricing">Pricing</Nav.Link>
                </Nav>
            </Navbar >
        );
    }
}
export default App;

↓実行結果

これだとスマホとか画面が小さくなったときに選択肢が多いと、画面崩れが起きてしまう。悲しい。

スマホとかでレスポンシブに動かしたいんや！！というときは、
下記のように書くといい感じにレスポンシブにしてくれるっぽい。

app.js

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import LOGO from './logo.svg';

class App extends Component {
    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">
                    <img
                        src={LOGO}
                        width="30"
                        height="30"
                        alt="React Bootstrap logo"
                    />
                    SampleApp
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar >
        );
    }
}
export default App;

expand="true"にするとずっとハンバーガーメニューが表示されるようになる。
で囲った部分は、collapseされずに表示される

公式が用意していない色への変更とかはそのうち書く。