Material UI Plugin

Adds Material UI theme Provider to BlueRain. Components of material-ui have been developed using a common interface. https://blueeast.gitbook.io/bluerain-plugin-material-ui

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

Screenshots

NA

Usage

Run the following command in the plugin directoy:

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

Components

• AppBar Web
• AvatarWeb
• BadgeWeb
• ButtonWeb
• CardWeb
• CardHeaderWeb
• CardBodyWeb
• CardMediaWeb
• CardFooterWeb
• ChipWeb
• DividerWeb
• DropdownWeb
• DropdownItemWeb
• FormControlWeb
• FormGroupWeb
• ListWeb
• ListHeaderWeb
• ListItem Web
• ListItemAvatarWeb
• ListItemIconWeb
• ListItemRightButtonWeb
• ListItemTextWeb
• SwitchWeb
• TextInputWeb
• NotificationWeb
• StepperWeb

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.

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

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

Demo

API

MaterialUiPlugin

Extends Plugin

Material UI Plugin

Properties

• pluginName string "MaterialUiPlugin"
• slug string "material-ui"

Internationalization

Components provide support for following languages:

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