Skip to content

Commit 7f057ab

Browse files
lgkonlinelgkonline
committed
Updated last things like README and add NPM keywords
1 parent c6229b3 commit 7f057ab

File tree

4 files changed

+45
-89
lines changed

4 files changed

+45
-89
lines changed

‎README.md‎

Lines changed: 27 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ Get a Microsoft inspired Ribbon menu for your React app. It uses Bootstrap 4 com
66
[![npm version](https://img.shields.io/npm/v/react-bootstrap-ribbon.svg)](https://www.npmjs.com/package/react-bootstrap-ribbon)
77

88
<h2>Desktop preview</h2>
9-
<img src="https://raw.githubusercontent.com/lgkonline/react-bootstrap-ribbon/master/preview_desktop.jpg" style="max-width:100vw" alt="Ribbon menu on desktop"/>
9+
<img src="https://raw.githubusercontent.com/lgkonline/react-bootstrap-ribbon/master/preview_desktop.png" style="max-width:100vw" alt="Ribbon menu on desktop"/>
1010

1111
<h2>Mobile preview</h2>
12-
<img src="https://raw.githubusercontent.com/lgkonline/react-bootstrap-ribbon/master/preview_mobile.jpg" width="350" alt="Ribbon menu on mobile" style="float:right"/>
12+
<img src="https://raw.githubusercontent.com/lgkonline/react-bootstrap-ribbon/master/preview_mobile.png" width="350" alt="Ribbon menu on mobile" style="float:right"/>
1313

1414
<h2>Installation</h2>
1515

1616
<p>
1717
Add it with NPM:<br>
18-
<code>npm i -D react-bootstrap-ribbon</code>
18+
<code>npm i -S react-bootstrap-ribbon</code>
1919
</p>
2020

2121
<p>
@@ -33,97 +33,37 @@ Make sure you also embed the CSS:<br>
3333

3434
Your code could look like this:
3535

36-
```
37-
import React, { Component } from 'react';
38-
import {Ribbon, RibbonGroup, RibbonGroupItem, RibbonButton} from "react-bootstrap-ribbon";
36+
```javascript
37+
import React, { Component } from "react";
38+
import { Ribbon, RibbonGroup, RibbonGroupItem, RibbonButton } from "react-bootstrap-ribbon";
3939

40+
// In this example Bootsrap is installed via NPM. Here it gets imported from the "./node_modules" folder:
4041
import "bootstrap/dist/css/bootstrap.css";
4142
import "react-bootstrap-ribbon/dist/react-bootstrap-ribbon.css";
4243

4344
class App extends Component {
4445
render() {
4546
return (
46-
<div className="App">
47-
<div className="container">
48-
<h1 className="page-header">Hello World</h1>
49-
50-
<Ribbon>
51-
<RibbonGroup title="Clipboard" colClass="col-3">
52-
<RibbonGroupItem colClass="col-4">
53-
<RibbonButton>
54-
<div className="ribbon-icon">
55-
<svg className="bi bi-pencil" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
56-
<path fillRule="evenodd" d="M11.293 1.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-9 9a1 1 0 01-.39.242l-3 1a1 1 0 01-1.266-1.265l1-3a1 1 0 01.242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" clipRule="evenodd" />
57-
<path fillRule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 00.5.5H4v.5a.5.5 0 00.5.5H5v.5a.5.5 0 00.5.5H6v-1.5a.5.5 0 00-.5-.5H5v-.5a.5.5 0 00-.5-.5H3z" clipRule="evenodd" />
58-
</svg>
59-
</div>
60-
<div>Edit</div>
61-
</RibbonButton>
62-
</RibbonGroupItem>
63-
64-
<RibbonGroupItem colClass="col-4">
65-
<RibbonButton>
66-
<div className="ribbon-icon">
67-
<svg className="bi bi-files" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
68-
<path fillRule="evenodd" d="M3 2h8a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V4a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V4a1 1 0 00-1-1H3z" clipRule="evenodd" />
69-
<path d="M5 0h8a2 2 0 012 2v10a2 2 0 01-2 2v-1a1 1 0 001-1V2a1 1 0 00-1-1H5a1 1 0 00-1 1H3a2 2 0 012-2z" />
70-
</svg>
71-
</div>
72-
<div>Copy</div>
73-
</RibbonButton>
74-
</RibbonGroupItem>
75-
76-
<RibbonGroupItem colClass="col-4">
77-
<RibbonButton>
78-
<div className="ribbon-icon">
79-
<svg className="bi bi-clipboard" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
80-
<path fillRule="evenodd" d="M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z" clipRule="evenodd" />
81-
<path fillRule="evenodd" d="M9.5 1h-3a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3z" clipRule="evenodd" />
82-
</svg>
83-
</div>
84-
<div>Paste</div>
85-
</RibbonButton>
86-
</RibbonGroupItem>
87-
</RibbonGroup>
88-
89-
<RibbonGroup title="New" colClass="col-3">
90-
<RibbonGroupItem colClass="col-4">
91-
<RibbonButton>
92-
<div className="ribbon-icon">
93-
<svg className="bi bi-folder-plus" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
94-
<path fillRule="evenodd" d="M9.828 4H2.19a1 1 0 00-.996 1.09l.637 7a1 1 0 00.995.91H9v1H2.826a2 2 0 01-1.991-1.819l-.637-7a1.99 1.99 0 01.342-1.31L.5 3a2 2 0 012-2h3.672a2 2 0 011.414.586l.828.828A2 2 0 009.828 3h3.982a2 2 0 011.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0013.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 011-.98h3.672a1 1 0 01.707.293z" clipRule="evenodd" />
95-
<path fillRule="evenodd" d="M13.5 10a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1H13v-1.5a.5.5 0 01.5-.5z" clipRule="evenodd" />
96-
<path fillRule="evenodd" d="M13 12.5a.5.5 0 01.5-.5h2a.5.5 0 010 1H14v1.5a.5.5 0 01-1 0v-2z" clipRule="evenodd" />
97-
</svg>
98-
</div>
99-
<div>New folder</div>
100-
</RibbonButton>
101-
</RibbonGroupItem>
102-
<RibbonGroupItem colClass="col-8">
103-
<div className="row row-2px">
104-
<RibbonGroupItem colClass="col-12">
105-
<RibbonButton>
106-
<svg className="bi bi-file-plus" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
107-
<path d="M9 1H4a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V8h-1v5a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1h5V1z" />
108-
<path fillRule="evenodd" d="M13.5 1a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1H13V1.5a.5.5 0 01.5-.5z" clipRule="evenodd" />
109-
<path fillRule="evenodd" d="M13 3.5a.5.5 0 01.5-.5h2a.5.5 0 010 1H14v1.5a.5.5 0 01-1 0v-2z" clipRule="evenodd" />
110-
</svg> New file
111-
</RibbonButton>
112-
</RibbonGroupItem>
113-
114-
<RibbonGroupItem colClass="col-12">
115-
<RibbonButton>
116-
<svg className="bi bi-inbox" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
117-
<path fillRule="evenodd" d="M3.81 4.063A1.5 1.5 0 014.98 3.5h6.04a1.5 1.5 0 011.17.563l3.7 4.625a.5.5 0 01-.78.624l-3.7-4.624a.5.5 0 00-.39-.188H4.98a.5.5 0 00-.39.188L.89 9.312a.5.5 0 11-.78-.624l3.7-4.625z" clipRule="evenodd" />
118-
<path fillRule="evenodd" d="M.125 8.67A.5.5 0 01.5 8.5H6a.5.5 0 01.5.5 1.5 1.5 0 003 0 .5.5 0 01.5-.5h5.5a.5.5 0 01.496.562l-.39 3.124a1.5 1.5 0 01-1.489 1.314H1.883a1.5 1.5 0 01-1.489-1.314l-.39-3.124a.5.5 0 01.121-.393zm.941.83l.32 2.562a.5.5 0 00.497.438h12.234a.5.5 0 00.496-.438l.32-2.562H10.45a2.5 2.5 0 01-4.9 0H1.066z" clipRule="evenodd" />
119-
</svg> Easy access
120-
</RibbonButton>
121-
</RibbonGroupItem>
122-
</div>
123-
</RibbonGroupItem>
124-
</RibbonGroup>
125-
</Ribbon>
126-
</div>
47+
<div className="container">
48+
{/*
49+
`breakpoint` prop is optional and defines when to switch between mobile and desktop view.
50+
Possible values: "sm", "md", "lg", "xl", default: "md"
51+
`height` is also optional. Default is "8rem".
52+
*/}
53+
<Ribbon breakpoint="lg" height="8rem">
54+
<RibbonGroup title="Clipboard" colClass="col-3">
55+
<RibbonGroupItem colClass="col-4" onClick={() => alert("Hello from Ribbon button!")}>
56+
<RibbonButton>
57+
✏️
58+
<div>Edit</div>
59+
</RibbonButton>
60+
</RibbonGroupItem>
61+
62+
{/* more Ribbon group items */}
63+
</RibbonGroup>
64+
65+
{/* more Ribbon groups */}
66+
</Ribbon>
12767
</div>
12868
);
12969
}

‎package.json‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-bootstrap-ribbon",
3-
"version": "4.0.0-alpha.2",
3+
"version": "4.0.0",
44
"description": "A ribbon menu for React using Bootstrap",
55
"main": "index.js",
66
"scripts": {
@@ -23,8 +23,24 @@
2323
"type": "git",
2424
"url": "https://github.com/lgkonline/react-bootstrap-ribbon.git"
2525
},
26-
"author": "LGK",
26+
"author": {
27+
"name": "Lars Gerrit Kliesing // LGK",
28+
"url": "https://lgk.io"
29+
},
30+
"keywords": [
31+
"react",
32+
"bootstrap",
33+
"ribbon",
34+
"ribbon-interface",
35+
"ui",
36+
"bootstrap4",
37+
"css",
38+
"javascript",
39+
"ribbon-menu",
40+
"microsoft"
41+
],
2742
"license": "MIT",
43+
"homepage": "https://ribbon.lgk.io",
2844
"dependencies": {
2945
"react": "^16.13.1",
3046
"react-dom": "^16.13.1"

‎preview_desktop.png‎

29.9 KB
Loading

‎preview_mobile.png‎

14.3 KB
Loading

0 commit comments

Comments
 (0)