To see how easy it is to consume Bluprint components, let's add an application menu or application toolbar:
- First, append the following code to the index.css file:
@import '~normalize.css';
@import '~@blueprintjs/core/lib/css/blueprint.css';
@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';
- Then, go to the src/App.js file and import the following types from the @blueprintjs/core package:
import { Navbar, Button, Alignment } from '@blueprintjs/core';
- This allows you to use the Navbar and Button components, as well as the Alignment enumerable, in your JSX templates. Update the code according to the following listing:
<Navbar>
<Navbar.Group align={Alignment.LEFT}>
<Navbar.Heading>Blueprint</Navbar.Heading>
<Navbar.Divider />
<Button className="bp3-minimal" icon="home" text="Home" />
<Button className="bp3-minimal" icon="document" text="Files" />
</Navbar.Group>
</Navbar>
- At runtime, you should see a nice-looking toolbar with a Blueprint label and two buttons, Home and Files:
If you like dark themes, you will be pleased to know that Blueprint supports them. Given that the default React template is dark, let's update the Navbar to match the theme:
- All you need to do is add the bp3-dark class name to the navbar:
<Navbar className="bp3-dark">
<Navbar.Group align={Alignment.LEFT}>
<Navbar.Heading>Blueprint</Navbar.Heading>
<Navbar.Divider />
<Button className="bp3-minimal" icon="home" text="Home" />
<Button className="bp3-minimal" icon="document" text="Files" />
</Navbar.Group>
</Navbar>
- Check out your application. Notice that the application menu bar now has a dark theme:
Now, let's see what it takes to enable routing features for a React application and Electron shell.