# Material UI Plugin

Adds [Material UI](http://www.material-ui.com/#/) theme Provider to BlueRain.
Components of material-ui have been developed using a common interface. [https://blueeast.gitbook.io/bluerain-plugin-material-ui](https://blueeast.gitbook.io/bluerain-plugin-material-ui)

| 🌏 Web             | 🖥 Electron        | 📱 React Native    |
| :----------------: | :----------------: | :----------------: |
| ✔️ | ✔️ | ✖️ |

## Screenshots

NA

## Usage

Run the following command in the plugin directoy:

```shell
yarn add  @blueeast/bluerain-plugin-material-ui
```

## Components

- AppBar [Web](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)
- Avatar[Web](https://material-ui.com/demos/avatars/)
- Badge[Web](https://material-ui.com/demos/badges/)
- Button[Web](https://material-ui.com/demos/buttons/)
- Card[Web](https://material-ui.com/demos/cards/)
- CardHeader[Web](https://material-ui.com/api/card-header/)
- CardBody[Web](https://material-ui.com/api/card-content/)
- CardMedia[Web](https://material-ui.com/api/card-media/)
- CardFooter[Web](https://material-ui.com/api/card-actions/)
- Chip[Web](https://material-ui.com/api/chip/)
- Divider[Web](https://material-ui.com/api/divider/)
- Dropdown[Web](https://material-ui.com/api/menu/)
- DropdownItem[Web](https://material-ui.com/api/menu-item/)
- FormControl[Web](https://material-ui.com/api/form-control/)
- FormGroup[Web](https://material-ui.com/api/form-group/)
- List[Web](https://material-ui.com/api/list/)
- ListHeader[Web](https://material-ui.com/api/list-subheader/)
- ListItem [Web](https://material-ui.com/api/list-item/)
- ListItemAvatar[Web](https://material-ui.com/api/list-item-avatar/)
- ListItemIcon[Web](https://material-ui.com/api/list-item-icon/)
- ListItemRightButton[Web](https://material-ui.com/api/list-item-avatar/)
- ListItemText[Web](https://material-ui.com/api/list-item-text/)
- Switch[Web](https://material-ui.com/api/switch/)
- TextInput[Web](https://material-ui.com/api/list-item-text/)
- Notification[Web](https://material-ui.com/api/snackbar/)
- Stepper[Web](https://material-ui.com/demos/steppers/)

## Hooks

This plugin provides complete flexibility to modify the material ui theme. This is done by providing various filter hooks.

### material-ui.theme

This hook gives the ability to modify the plugin configurations.

**Parameters:**

| Name  | Type   | Description  |
| ----- | ------ | ------------ |
| theme | Object | Custom Theme |

**Returns:**

| Name  | Type   | Description  |
| ----- | ------ | ------------ |
| theme | Object | Custom Theme |

**Example:**

This example customizes the theme to make the AppBar color red.

```javascript
import BR from '@blueeast/bluerain-os';

BR.Filters.add(
'material-ui.theme',
    function CustomTheme(theme) {
        return Object.assign({}, theme, {
            appBar: {
                color: 'red'
            }
        })
    }
);
```

### [Demo](https://BlueEastCode.github.io/bluerain-plugin-material-ui/)

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### MaterialUiPlugin

### **Extends Plugin**

Material UI Plugin

### **Properties**

- `pluginName` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** "MaterialUiPlugin"
- `slug` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** "material-ui"

### **Internationalization**

Components provide support for following languages:

- Urdu (ur)
- English (en)
- Arabic (ar)
- Chinese (zh)