ilmenite
v0.0.1
Published
Titanium style loader with built in conditional statements for platform, form factor, width, height and more
Downloads
4
Readme
Titanium Ilmenite (WIP)
Titanium style loader with built in conditional statements for platform, form factor, width, height and more. Built to work with react-titanium but works with Titanium/Alloy thanks to titaniumifier. This is still a WIP and as such the API is subject to change.
Installation
Currently this only works as a commonjs package, I haven't tested the Titanium module yet.
npm install ilmenite --save
Usage - Titianium/Alloy
var buttonStyles = {
wrapper: {
layout: 'horizontal',
width: Ti.UI.SIZE
},
base: {
width: 100,
height: 40,
backgroundColor: 'gray',
'[platform=ios]': {
// ios specific styles
style: Ti.UI.iPhone.SystemButtonStyle.BORDERED
},
'[formFactor=tablet]': {
// tablet specific styles
width: 140,
height: 60
},
'[formFactor=handheld height>=500]': {
// taller phones
height: 50
}
},
success: {
backgroundColor: 'green'
},
fail: {
backgroundColor: 'red'
}
}
// new view
var successButton = Ti.UI.createView(ilmenite([
buttonStyles.base,
buttonStyles.success
]));
// existing view
successButton.applyProperties(ilmenite([
buttonStyles.base,
buttonStyles.success
]));
Usage - react-titanium
import React, { Component } from 'react';
import { render } from 'react-titanium';
import ilmenite from 'ilmenite';
import styles from './styles';
export default class IlmeniteExample extends Component {
render() {
return (
<view
{...ilmenite(styles.wrapper)}
backgroundColor='blue'
>
<button {...ilmenite([styles.base, styles.success])} />
</view>
);
}
}