https://github.com/bbuck/react-mdl
React bindings for material-design-lite.
https://github.com/bbuck/react-mdl
Last synced: 11 months ago
JSON representation
React bindings for material-design-lite.
- Host: GitHub
- URL: https://github.com/bbuck/react-mdl
- Owner: bbuck
- License: mit
- Created: 2015-08-11T06:38:59.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-08-26T19:43:51.000Z (over 10 years ago)
- Last Synced: 2024-06-20T16:50:03.907Z (over 1 year ago)
- Language: JavaScript
- Size: 223 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React MDL
React MDL is a wrapper for Google's great [material-design-lite](http://www.getmdl.io/)
library making it usable from Facebook's [React.js](http://facebook.github.io/react/).
The goal is to make it much easier to integrate MDL into a React based client
application - avoiding the sometime numerous classes for achievement
(`mdl-button mdl-js-button`).
## Usage
### Base Component
The core of React MDL is the `Componet` which represents a basic element with
MDL features. To create a badge, you can simply specify:
```jsx
account_box
```
Which will result in:
```html
account_box
```
### Responsive Grid
To create a "Grid" row, simply use the `Grid` class.
```jsx
```
```html
```
Cells are placed inside grids to leverage the space. Cells consume column spacing.
```jsx
Hello, World!
```
```html
Hello, World!
```
### Buttons
Buttons a represented by the `Button` component which provides easy ways of
speicfying specific MDL button styles. The basic usage of a button:
```jsx
Button
```
```html
Button
```
Ripple effects can be added to a button type with the simple `ripple`
boolean attribute.
```jsx
Ripples
```
```html
Ripples
```
There are five different kinds of buttons. Normal buttons are achieved without
any special classes, and appear as basic with hover effects. Then there is the
the `fab` button type which is a circle:
```jsx
add
```
```html
add
```
The `fab` type has a miniature version, the `miniFab` which is done much the
same way as the `fab`. Next there is the `raised` button type which makes
normal MDL buttons appear (without hover) with a shadow to pop from the background.
```jsx
Raised
```
```html
Raised
```
The final button type is for icon only buttons.
```jsx
mood
```
```html
mood
```
There are few additional classes for coloring buttons in specific ways. The
`colored` attribute will apply whichever color is normally used for the given
button type. The `primary` attribute will apply the primary theme color overriding
the `colored` attribute (some buttons, like `fab`s are colored by the accent color
by default). Then there is `accent` to force the accent color on the button.
[Work in progress...]