Skip to content

Commit 9658f4e

Browse files
gitbrentgitbrent
committed
updated for v1.0.0
1 parent 211368e commit 9658f4e

File tree

7 files changed

+61
-32
lines changed

7 files changed

+61
-32
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,6 @@ typings/
5959

6060
# next.js build output
6161
.next
62+
63+
# macOS
64+
.DS_Store

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77
## [1.0.0] - 2019-04-03
88
### Added
99
- New demo/api page (test folder) and a new height-test page
10+
- New project homepage/docs (`gh-pages`)
11+
- Added changelog
1012
### Changed
1113
- Fixed issue with component height not matching bootstrap components
1214
- Added "keywords" and "bugs" to `package.json`

‎README.md

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,10 @@
44

55
Checkbox replacement using stylish bootstrap-4 switch button.
66

7-
Lightweight, no dependencies, easy webpack integration.
8-
9-
## Demo
10-
11-
![Demo](https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/img/demo.gif?raw=true)
7+
Lightweight (14kb), self-contained, compiled as a single common js file for easy webpack integration.
128

9+
**************************************************************************************************
1310
```typescript
14-
import BootstrapSwitchButton from 'bootstrap-switch-button-react'
15-
1611
<BootstrapSwitchButton
1712
checked={false}
1813
onlabel='Admin User'
@@ -23,35 +18,45 @@ import BootstrapSwitchButton from 'bootstrap-switch-button-react'
2318
/>
2419
```
2520

21+
![Demo GIF](https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/img/demo.gif?raw=true)
22+
23+
Live demos and API docs: https://gitbrent.github.io/bootstrap-switch-button-react/
24+
**************************************************************************************************
25+
2626
## Installation
2727
```bash
2828
npm i bootstrap-switch-button-react --save-dev
2929
```
3030

31-
## Properties
32-
Name |Type |Default |Description |
33-
-----------|------------|----------|----------------------------|
34-
`onlabel` |string/html |"On" |Text of the on switch-button
35-
`offlabel` |string/html |"Off" |Text of the off switch-button
36-
`size` |string | |Size of the switch-button. Possible values are: `xs`, `sm`, `lg` (no size specified means normal size).
37-
`onstyle` |string |"primary" |Style of the on switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
38-
`offstyle` |string |"light" |Style of the off switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
39-
`style` |string | |Appends the value to the class attribute of the switch-button. This can be used to apply custom styles. Refer to Custom Styles for reference.
40-
`width` |integer | |Sets the width of the switch-button. if set to *null*, width will be auto-calculated.
41-
`height` |integer | |Sets the height of the switch-button. if set to *null*, height will be auto-calculated.
4231

43-
## Example
32+
## Usage
33+
Keep `state` in sync using the `onChange` function property
4434

4535
```typescript
36+
import BootstrapSwitchButton from 'bootstrap-switch-button-react'
37+
4638
<BootstrapSwitchButton
4739
checked={false}
4840
onlabel='Admin User'
49-
onstyle='danger'
41+
onstyle='danger'
5042
offlabel='Regular User'
51-
offstyle='success'
52-
style='w-100 mx-3'
43+
offstyle='success'
44+
style='w-100 mx-3'
5345
onChange={(checked: boolean) => {
5446
this.setState({ isUserAdmin: checked })
5547
}}
5648
/>
5749
```
50+
51+
52+
## Properties
53+
Name |Type |Default |Description |
54+
-----------|------------|----------|----------------------------|
55+
`onlabel` |string/html |"On" |Text of the on switch-button
56+
`offlabel` |string/html |"Off" |Text of the off switch-button
57+
`size` |string | |Size of the switch-button. Possible values are: `xs`, `sm`, `lg` (no size specified means default bootstrap size).
58+
`onstyle` |string |"primary" |Style of the on switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
59+
`offstyle` |string |"light" |Style of the off switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
60+
`style` |string | |Appends the value to the class attribute of the switch-button. This can be used to apply custom styles. Refer to Custom Styles for reference.
61+
`width` |integer | |Sets the width of the switch-button. if set to *null*, width will be auto-calculated.
62+
`height` |integer | |Sets the height of the switch-button. if set to *null*, height will be auto-calculated.

‎docs/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ <h3 class="text-secondary mt-4">Yarn</h3>
123123
<section id="usage" class="container my-5 d-none d-sm-none d-md-block">
124124
<h2>Usage</h2>
125125
<hr>
126-
<p>Keep <code>state</code> in sync using the <code>onChange</code> funcion property</p>
126+
<p>Keep <code>state</code> in sync using the <code>onChange</code> function property</p>
127127
<pre><code class="language-ts">
128128
import BootstrapSwitchButton from 'bootstrap-switch-button-react'
129129

‎docs/src/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ <h3 class="text-secondary mt-4">Yarn</h3>
123123
<section id="usage" class="container my-5 d-none d-sm-none d-md-block">
124124
<h2>Usage</h2>
125125
<hr>
126-
<p>Keep <code>state</code> in sync using the <code>onChange</code> funcion property</p>
126+
<p>Keep <code>state</code> in sync using the <code>onChange</code> function property</p>
127127
<pre><code class="language-ts">
128128
import BootstrapSwitchButton from 'bootstrap-switch-button-react'
129129

‎lib/bootstrap-switch-button-react.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/style.css

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
11
/*\
2-
|*| ========================================================================
3-
|*| Bootstrap Switch Button: bootstrap-switch-button.css v1.0.0
4-
|*| https://gitbrent.github.io/bootstrap-switch-button/
5-
|*| ========================================================================
6-
|*| Copyright 2018-2019 Brent Ely
7-
|*| Licensed under MIT
8-
|*| ========================================================================
2+
|*| :: Bootstrap Switch Button ::
3+
|*|
4+
|*| Bootstrap Switch Button (React)
5+
|*| https://github.com/gitbrent/bootstrap-switch-button-react
6+
|*|
7+
|*| This library is released under the MIT Public License (MIT)
8+
|*|
9+
|*| Bootstrap Switch Button (C) 2019-present Brent Ely (https://github.com/gitbrent)
10+
|*|
11+
|*| Permission is hereby granted, free of charge, to any person obtaining a copy
12+
|*| of this software and associated documentation files (the "Software"), to deal
13+
|*| in the Software without restriction, including without limitation the rights
14+
|*| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15+
|*| copies of the Software, and to permit persons to whom the Software is
16+
|*| furnished to do so, subject to the following conditions:
17+
|*|
18+
|*| The above copyright notice and this permission notice shall be included in all
19+
|*| copies or substantial portions of the Software.
20+
|*|
21+
|*| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22+
|*| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23+
|*| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24+
|*| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25+
|*| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26+
|*| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27+
|*| SOFTWARE.
928
\*/
1029

1130
.btn-group-xs > .btn, .btn-xs {

0 commit comments

Comments
 (0)