React Bootstrap 4 Ribbon
A responsive Microsoft's ribbon-like menu for React using Bootstrap 4, forked from and inspired by LGK's excellent work doing the same thing on Bootstrap 3. See a demo.
Installation
Add it using npm npm i react-bootstrap4-ribbon
.
Next, import the components:
import Ribbon RibbonGroup RibbonGroupItem RibbonButton from "react-bootstrap4-ribbon";
Also, you need to import the styling file:
import "react-bootstrap4-ribbon/dist/react-bootstrap-ribbon.css";
Components
Ribbon
Main container. Provides responsiveness to it. When in small screens, shows a combobox containing the titles from all groups it has in it.
RibbonGroup
A group maintains RibbonGroupItems together. Aligns items by using flex row. It has the following properties:
- title: appears on the group's footer (and also on the ribbon's combobox, in small screens);
- colClass: you can pass Bootstrap responsive col classes to this property, to customize how much space the group will take. The default is col, which means the group will take all the space available in all screen sizes.
RibbonGroupItem
A group item is where you put your buttons. It has a single property:
- direction: Determine which flex orientation your group buttons will follow (row | column). Defaults to row.
RibbonButton
A Bootstrap light block button. Has a title and an icon, that you can import from the package and pass to it as children or by compounding them into the button (as shown in Usage).
RibbonButtonTitle | RibbonButtonIcon
Names are self-describing. Put these inside the button. Both have the following boolean properties, which also are self-describing:
- small | inline
Usage
This is the code from demo's simple ribbon (icons by Font Awesome):
<Ribbon> <RibbonGroup ="Clipboard" ="col-md-4"> <RibbonGroupItem> <RibbonButton> <RibbonButton.Icon> <i ="fas fa-thumbtack"></i> </RibbonButton.Icon> <RibbonButton.Title>Pin</RibbonButton.Title> </RibbonButton> <RibbonButton> <RibbonButton.Icon> <i ="fas fa-copy"></i> </RibbonButton.Icon> <RibbonButton.Title>Copy</RibbonButton.Title> </RibbonButton> <RibbonButton> <RibbonButton.Icon> <i ="fas fa-paste"></i> </RibbonButton.Icon> <RibbonButton.Title>Paste</RibbonButton.Title> </RibbonButton> </RibbonGroupItem> </RibbonGroup> <RibbonGroup ="New" ="col-md-5"> <RibbonGroupItem> <RibbonButton> <RibbonButton.Icon> <i ="fas fa-folder-open"></i> </RibbonButton.Icon> <RibbonButton.Title>New folder</RibbonButton.Title> </RibbonButton> </RibbonGroupItem> <RibbonGroupItem ="column"> <RibbonButton> <RibbonButton.Icon > <i ="fas fa-file"> </i> </RibbonButton.Icon> <RibbonButton.Title > New file </RibbonButton.Title> </RibbonButton> <RibbonButton> <RibbonButton.Icon > <i ="fas fa-inbox"> </i> </RibbonButton.Icon> <RibbonButton.Title > Easy access </RibbonButton.Title> </RibbonButton> </RibbonGroupItem> </RibbonGroup> <RibbonGroup ="Select" ="col-md-3"> <RibbonGroupItem ="column"> <RibbonButton> <RibbonButton.Icon > <i ="fas fa-check-square"> </i> </RibbonButton.Icon> <RibbonButton.Title > Select all </RibbonButton.Title> </RibbonButton> <RibbonButton> <RibbonButton.Icon > <i ="fas fa-check"> </i> </RibbonButton.Icon> <RibbonButton.Title > Toggle selection </RibbonButton.Title> </RibbonButton> </RibbonGroupItem> </RibbonGroup></Ribbon>
Run an example
- Clone this repo;
- install all dependencies by running
npm i
; - cd into test-app and install all dependencies too;
- run
npm start
inside test-app to see a demo.