aliceui v1.0.0

AliceUI

Beautiful Material UI for React Native

• Installation
• Getting started
• AliceUI skeleton
• Components - Buttons - Raised Button - Colored Button - Button Icon - Flat button - FAB - Chips - Toolbar - Cards - Card - CardContent - Lists - List - ListItem - ListDivider - ListSubheader - Drawer - Drawer - DrawerHeader
• Colors
• icon vs iconName

Installation

Just use npm as always:

npm install --save aliceui

Getting started

Importing a component

There are two ways to import a component in AliceUI, one of those is:

import React, {Component} from 'react'
import {Toolbar} from 'aliceui'

The other way is:

import Toolbar from 'aliceui/Toolbar'

Easy, don't you think? Be careful: There are some components that use importing as object even if imported from himself. e.g:

import {RaisedButton} from 'aliceui' //ok
import RaisedButton from 'aliceui/Button' //won't work
import {RaisedButotn} from 'aliceui/Button' //work as a charm

But don't worry, all these peculiar components are listed in the docs down below.

AliceUI skeleton

An AliceUI application have the components structure like this:

import React, {Component} from 'react'
import {Container, Content} from 'aliceui'

class App extends Component {
	render () {
		return (
			<Container>
				<Toolbar />
				<Content>
					// Your content
				</Content>
			</Container>
		)
	}
}

Or if you have a Drawer in your application:

import {Container, Content, Drawer} from 'aliceui'

class App extends Component {
	render () {
		return (
			<Drawer>
				<Container>
					<Toolbar />
					<Content>
						// Your content
					</Content>
				</Container>
			</Drawer>
		)
	}
}

The Content have a propertie called padding, which when is set to true, it makes a margin from the borders of the device (it's not a required propertie).

Components

Buttons

https://material.io/guidelines/components/buttons.html

Raised Button

import React, {Component} from 'react'
import {Content} from 'aliceui'
import {RaisedButton} from 'aliceui'

class Button extends Component {
	render () {
    	return (
			<Content padding>
				<RaisedButton label="Alice Rocks" />
				<RaisedButton label="Alice Rocks" full />
				<RaisedButton label="Alice Rocks" disabled />
			</Content>
    	)
    }
}     

Properties

Colored Button

import React, {Component} from 'react'
import {Content} from 'aliceui'
import {ColoredButton} from 'aliceui'
import Colors from 'aliceui/Colors'

export default class extends Component {
	render () {
		return (
			<Content padding>
				<ColoredButton label="Alice Rocks" />
				<ColoredButton label="Alice Rocks" full />
				<ColoredButton label="Alice Rocks" color={Colors.Blue} />
				<ColoredButton label="Alice Rocks" disabled />
			</Content>
		)
	}
}      

A bit confused about Colors? Read more here.

Properties

Button icon

import React, {Component} from 'react'
import Icon from 'react-native-vector-icons/MaterialIcons'
import {Content} from 'aliceui'
import {ButtonIcon} from 'aliceui'
import Colors from 'aliceui/Colors'

export default class extends Component {
	render () {
		return (
			<Content padding>
				<ButtonIcon iconName="star" />
				<ButtonIcon iconName="menu" color={Colors.LightGreen} />
				<ButtonIcon iconName="star" disabled />
			</Content>
		)
	}
}

Properties

Learn the difference between iconName and icon.

Flat button

import React, {Component} from 'react'
import {Content} from 'aliceui'
import {FlatButton} from 'aliceui'
import Colors from 'aliceui/Colors'

export default class extends Component {
	render () {
		return (
			<Content padding>
				<FlatButton label="Alice Rocks" />
				<FlatButton label="Alice Rocks" noInk />
				<FlatButton label="Alice Rocks" full />
				<FlatButton label="Alice Rocks" color={Colors.Blue} />
				<FlatButton label="Alice Rocks" disabled />
			</Content>
		)
	}
}

Properties

FAB

import React, {Component} from 'react'
import {Container, Content} from 'aliceui'
import {FAB} from 'aliceui'
import Colors from 'aliceui/Colors'

export default class extends Component {
	render () {
		return (
			<Container>
				<Content padding>
					<FAB iconName="star" />
					<FAB iconName="person" color={Colors.Red} />
					<FAB iconName="person" disabled />
				</Content>
				<FAB fixed="left" iconName="add" />
				<FAB fixed="right" iconName="person" />
			</Container>
		)
	}
}

Properties

Chips

https://material.io/guidelines/components/chips.html

import React, {Component} from 'react'
import {Content} from 'aliceui'
import Chip from 'aliceui/Chip'

export default class extends Component {
	render () {
		return (
			<Content padding>
				<Chip label="Banana" />
				<Chip label="Banana" subLabel="(fruit)" />
			</Content>
		)
	}
}

Properties

Toolbar

https://material.io/guidelines/components/toolbars.html

import React, {Component} from 'react'
import {Container} from 'aliceui'
import {ButtonIcon} from 'aliceui/Button'
import Toolbar from 'aliceui/Toolbar'

class ToolbarLeftContent extends Component {
	render () {
		return (
			<ButtonIcon iconName="menu" />
		)
	}
}

class ToolbarRightContent extends Component {
	render () {
		return (
			<ButtonIcon iconName="more-vert" />
		)
	}
}

export default class extends Component {
	render () {
		return (
			<Container>
				<Toolbar title="Alice" leftContent={<ToolbarLeftContent />} rightContent={<ToolbarRightContent />} />
			</Container>
		)
	}
}

Properties

Avatars

https://material.io/guidelines/style/imagery.html

import React, {Component} from 'react'
import {Content} from 'aliceui'
import Avatar from 'aliceui/Avatar'

export default class extends Component {
	render () {
		return (
			<Content padding>
				<Avatar imageUri="http://i.imgur.com/G7LVv13.jpg" />
				<Avatar imageUri="http://i.imgur.com/G7LVv13.jpg" small />
			</Content>
		)
	}
}

Properties

Cards

https://material.io/guidelines/components/cards.html

import React, {Component} from 'react'
import {Text} from 'react-native'
import {Content} from 'aliceui'
import {ButtonIcon, FlatButton} from 'aliceui/Button'
import Colors from 'aliceui/Colors'
import {Card, CardImage, CardContent, CardFooter} from 'aliceui/Card'

class CardActions extends Component {
	render () {
		return (
			<ButtonIcon iconName="share" />
		)
	}
}

export default class extends Component {
	render () {
		return (
			<Content padding>
				<Card>
					<CardContent>
						<Text>Hello World!</Text>
					</CardContent>
					<CardFooter />
				</Card>
				<Card background={true} color={Colors.LightGreen}>
					<CardContent>
						<Text>Hello World!</Text>
					</CardContent>
					<CardFooter />
				</Card>
				<Card>
					<CardImage imageUri="http://i.imgur.com/8Sxl6GQ.jpg" title="Welcome" style={{height: 156}} actions={<CardActions />} />
					<CardContent>
						<Text>Hello World!</Text>
					</CardContent>
					<CardFooter>
						<FlatButton label="Ok" />
					</CardFooter>
				</Card>
			</Content>
		)
	}
}

Card

Properties

CardImage

Properties

Lists

https://material.io/guidelines/components/lists.html

import React, {Component} from 'react'
import {Text} from 'react-native'
import {Content} from 'aliceui'
import {List, ListItem, ListDivider, ListSubheader} from 'aliceui/List'

class ListItemRightContent extends Component {
	render () {
		return (
			<Text>100</Text>
		)
	}
}

export default class extends Component {
	render () {
		return (
			<Content padding>
				<List>
					<ListItem label="Cat" />
					<ListItem label="Dog" rightContent={<ListItemRightContent />} />
				</List>
				<ListDivider />
				<List>
					<ListSubheader label="Fruits" />
					<ListItem label="Orange" active />
					<ListItem label="Apple" leftIconName="star" />
				</List>
			</Content>
		)
	}
}

ListItem

Properties

ListSubheader

Properties

Drawer

https://material.io/guidelines/patterns/navigation-drawer.html

import React, {Component} from 'react'
import {Container, Content} from './aliceui'
import {ButtonIcon} from './aliceui/Button'
import {Drawer, DrawerHeader} from './aliceui/Drawer'
import {List, ListItem} from './aliceui/List'
import Toolbar from './aliceui/Toolbar'

class ToolbarLeftContent extends Component {
	render () {
		return (
			<ButtonIcon iconName="menu" onPress={this.props.onPressButton} />
		)
	}
}

class DrawerContent extends Component {
	render () {
		return (
			<Content>
				<DrawerHeader backgroundUri="http://i.imgur.com/4fnXwrW.png" avatarImageUri="http://i.imgur.com/G7LVv13.jpg" name="Hélio" email="heliojuniorkroger@gmail.com" />
				<List>
					<ListItem label="Home" active />
					<ListItem label="News" />
					<ListItem label="Logout" />
				</List>
			</Content>
		)
	}
}

export default class extends Component {
	constructor () {
		super()
		this.state = {
			drawerOpen: false
		}
	}
	openDrawer () {
		this.setState({
			drawerOpen: true
		})
	}
	render () {
		return (
			<Drawer open={this.state.drawerOpen} content={<DrawerContent />}>
				<Container>
					<Toolbar title="Alice" leftContent={<ToolbarLeftContent onPressButton={() => this.openDrawer()} />} />
					<Content>

					</Content>
				</Container>
			</Drawer>
		)
	}
}

Drawer

Properties

DrawerHeader

Properties

Colors

https://material.io/guidelines/style/color.html

AliceUI have the complete palette of colors from Material Design. You need to import aliceui/Colors to access them. To get a color scheme you just need to pass the value to the imported variable Colors. e.g: Colors.Yellow.

icon vs iconName

AliceUI uses react-native-vector-icons to use Google's Material Icons inside the code. When you use the property iconName you're accessing the MaterialIcons pack from react-native-vector-icons. On the other hand, if you use icon, you need to pass the whole icon component (probably imported from react-native-vector-icons).