Tachons for React Native brings functional styling to react-native. This module uses naming convention defined by Tachons and comes with theming support.
- Less code
- No need to maintain a separate stylesheet
- No need to find a proper name for every component you want to style
- Looking at a component tells you exactly how it looks, it's all in one place.
- And more
import { addTheme, setTheme } from 'tachyons-react-native'
// the first theme is considered to be the default theme
addTheme('light', {
primary: '#19AEA2',
primaryText: '#464646',
secondary: '#464646',
ternary: '#F8FAFE',
accent: '#FF5762',
divider: '#D1D1D1',
shadow: '#F8F7F7',
page: '#F0f0F0',
card: '#FFFFFF',
success: '#7CBB00',
error: '#F65314',
navigation: '#565A5C',
title: '#474747',
subtitle: '#82898D',
description: '#595959',
placeholder: '#A2A4A5',
border: '#DADADE',
transparent: 'transparent'
})
// second theme if you need
addTheme('dark', {
primary: '#464646',
....
})
// call setTheme to set default theme
setTheme('dark')import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import './theme'
import { styles as s } from 'tachyons-react-native'
export default class App extends React.Component {
render () {
return (
<View style={[s.flex, s.alignCenter, s.justifyCenter, s.primaryBg]}>
<Text style={[s.tc, s.b, s.i, s.ba, s.primaryText]}>Open up App.js to start working on your app!</Text>
</View >
)
}
}import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import './theme'
import { styles as s, withTheme } from 'tachyons-react-native'
export default withTheme(class App extends React.Component {
render () {
return (
<View style={[s.flex, s.alignCenter, s.justifyCenter, s.primaryBg]}>
<Text style={[s.tc, s.b, s.i, s.ba, s.primaryText]}>Open up App.js to start working on your app!</Text>
<TouchableOpacity onPress={() => this.props.setTheme(this.props.theme === 'dark' ? 'light' : 'dark')}>
<Text>Toggle Theme</Text>
</TouchableOpacity>
</View >
)
}
})| STYLE NAME | STYLES |
|---|---|
| ${name} | {"color": ${color}} |
| ${name}TextShadow | {"textShadowColor": ${color}} |
| ${name}TextDecoration | {"textDecorationColor": ${color}} |
| ${name}Bg | {"backgroundColor": ${color}} |
| ${name}Ba | {"borderColor": ${color}} |
| ${name}Bt | {"borderTopColor": ${color}} |
| ${name}Br | { borderRightColor: ${color} } |
| ${name}Bb | {"borderBottomColor": ${color}} |
| ${name}Bl | {"borderLeftColor": ${color}} |
| ${name}Tint | {"tintColor": ${color}} |
| ${name}Overlay | {"overlayColor": ${color}} |
| STYLE NAME | STYLES |
|---|---|
| primary | {"color": ${color}} |
| primaryTextShadow | {"textShadowColor": ${color}} |
| primaryTextDecoration | {"textDecorationColor": ${color}} |
| primaryBg | {"backgroundColor": ${color}} |
| primaryBa | {"borderColor": ${color}} |
| primaryBt | {"borderTopColor": ${color}} |
| primaryBr | { borderRightColor: ${color} } |
| primaryBb | {"borderBottomColor": ${color}} |
| primaryBl | {"borderLeftColor": ${color}} |
| primaryTint | {"tintColor": ${color}} |
| primaryOverlay | {"overlayColor": ${color}} |
| STYLE NAME | STYLES |
|---|---|
| flex | {"flex": 1} |
| flex0 | {"flex": 0} |
| flex1 | {"flex": 0.1} |
| flex2 | {"flex": 0.2} |
| flex3 | {"flex": 0.3} |
| flex4 | {"flex": 0.4} |
| flex5 | {"flex": 0.5} |
| flex6 | {"flex": 0.6} |
| flex7 | {"flex": 0.7} |
| flex8 | {"flex": 0.8} |
| flex9 | {"flex": 0.9} |
| noFlex | {"flex": -1} |
| flexColumn | {"flexDirection": "column"} |
| flexRow | {"flexDirection": "row"} |
| flexWrap | {"flexWrap": "wrap"} |
| flexNowrap | {"flexWrap": "nowrap"} |
| flexColumnReverse | {"flexDirection": "column-reverse"} |
| flexRowReverse | {"flexDirection": "row-reverse"} |
| itemsStart | {"alignItems": "flex-start"} |
| itemsEnd | {"alignItems": "flex-end"} |
| itemsCenter | {"alignItems": "center"} |
| itemsBaseline | {"alignItems": "baseline"} |
| itemsStretch | {"alignItems": "stretch"} |
| selfStart | {"alignSelf": "flex-start"} |
| selfEnd | {"alignSelf": "flex-end"} |
| selfCenter | {"alignSelf": "center"} |
| selfBaseline | {"alignSelf": "baseline"} |
| selfStretch | {"alignSelf": "stretch"} |
| justifyStart | {"justifyContent": "flex-start"} |
| justifyEnd | {"justifyContent": "flex-end"} |
| justifyCenter | {"justifyContent": "center"} |
| justifyBetween | {"justifyContent": "space-between"} |
| justifyAround | {"justifyContent": "space-around"} |
| STYLE NAME | STYLES |
|---|---|
| contain | {"resizeMode": "contain"} |
| cover | {"resizeMode": "cover"} |
| stretch | {"resizeMode": "stretch"} |
| STYLE NAME | STYLES |
|---|---|
| ba | {"borderStyle": "solid", "borderWidth": 1} |
| bt | {"borderTopWidth": 1} |
| br | {"borderRightWidth": 1} |
| bb | {"borderBottomWidth": 1} |
| bl | {"borderLeftWidth": 1} |
| bn | {"borderWidth": 0} |
| br0 | {"borderRightWidth": 0} |
| br1 | {"borderRadius": 2} |
| br2 | {"borderRadius": 4} |
| br3 | {"borderRadius": 8} |
| br4 | {"borderRadius": 16} |
| brPill | {"borderRadius": 9999} |
| brBottom | {"borderTopLeftRadius": 0, "borderTopRightRadius": 0} |
| brTop | {"borderBottomLeftRadius": 0, "borderBottomRightRadius": 0} |
| brRight | {"borderTopLeftRadius": 0, "borderBottomLeftRadius": 0} |
| brLeft | {"borderTopRightRadius": 0, "borderBottomRightRadius": 0} |
| bDotted | {"borderStyle": "dotted"} |
| bDashed | {"borderStyle": "dashed"} |
| bSolid | {"borderStyle": "solid"} |
| bw0 | {"borderWidth": 0} |
| bw1 | {"borderWidth": 2} |
| bw2 | {"borderWidth": 4} |
| bw3 | {"borderWidth": 8} |
| bw4 | {"borderWidth": 16} |
| bw5 | {"borderWidth": 32} |
| bt0 | {"borderTopWidth": 0} |
| bb0 | {"borderBottomWidth": 0} |
| bl0 | {"borderLeftWidth": 0} |
| STYLE NAME | STYLES |
|---|---|
| bBlack | {"borderColor": "#000"} |
| bNearBlack | {"borderColor": "#111"} |
| bDarkGray | {"borderColor": "#333"} |
| bMidGray | {"borderColor": "#555"} |
| bGray | {"borderColor": "#777"} |
| bSilver | {"borderColor": "#999"} |
| bLightSilver | {"borderColor": "#aaa"} |
| bMoonGray | {"borderColor": "#ccc"} |
| bLightGray | {"borderColor": "#eee"} |
| bNearWhite | {"borderColor": "#f4f4f4"} |
| bWhite | {"borderColor": "#fff"} |
| bWhite90 | {"borderColor": "rgba( 255, 255, 255, .9 )"} |
| bWhite80 | {"borderColor": "rgba( 255, 255, 255, .8 )"} |
| bWhite70 | {"borderColor": "rgba( 255, 255, 255, .7 )"} |
| bWhite60 | {"borderColor": "rgba( 255, 255, 255, .6 )"} |
| bWhite50 | {"borderColor": "rgba( 255, 255, 255, .5 )"} |
| bWhite40 | {"borderColor": "rgba( 255, 255, 255, .4 )"} |
| bWhite30 | {"borderColor": "rgba( 255, 255, 255, .3 )"} |
| bWhite20 | {"borderColor": "rgba( 255, 255, 255, .2 )"} |
| bWhite10 | {"borderColor": "rgba( 255, 255, 255, .1 )"} |
| bWhite05 | {"borderColor": "rgba( 255, 255, 255, .05 )"} |
| bWhite025 | {"borderColor": "rgba( 255, 255, 255, .025 )"} |
| bWhite0125 | {"borderColor": "rgba( 255, 255, 255, .0125 )"} |
| bBlack90 | {"borderColor": "rgba( 0, 0, 0, .9 )"} |
| bBlack80 | {"borderColor": "rgba( 0, 0, 0, .8 )"} |
| bBlack70 | {"borderColor": "rgba( 0, 0, 0, .7 )"} |
| bBlack60 | {"borderColor": "rgba( 0, 0, 0, .6 )"} |
| bBlack50 | {"borderColor": "rgba( 0, 0, 0, .5 )"} |
| bBlack40 | {"borderColor": "rgba( 0, 0, 0, .4 )"} |
| bBlack30 | {"borderColor": "rgba( 0, 0, 0, .3 )"} |
| bBlack20 | {"borderColor": "rgba( 0, 0, 0, .2 )"} |
| bBlack10 | {"borderColor": "rgba( 0, 0, 0, .1 )"} |
| bBlack05 | {"borderColor": "rgba( 0, 0, 0, .05 )"} |
| bBlack025 | {"borderColor": "rgba( 0, 0, 0, .025 )"} |
| bBlack0125 | {"borderColor": "rgba( 0, 0, 0, .0125 )"} |
| bDarkRed | {"borderColor": "#e7040f"} |
| bRed | {"borderColor": "#ff4136"} |
| bLightRed | {"borderColor": "#ff725c"} |
| bOrange | {"borderColor": "#ff6300"} |
| bGold | {"borderColor": "#ffb700"} |
| bYellow | {"borderColor": "#ffd700"} |
| bLightYellow | {"borderColor": "#fbf1a9"} |
| bPurple | {"borderColor": "#5e2ca5"} |
| bLightPurple | {"borderColor": "#a463f2"} |
| bDarkPink | {"borderColor": "#d5008f"} |
| bHotPink | {"borderColor": "#ff41b4"} |
| bPink | {"borderColor": "#ff80cc"} |
| bLightPink | {"borderColor": "#ffa3d7"} |
| bDarkGreen | {"borderColor": "#137752"} |
| bGreen | {"borderColor": "#19a974"} |
| bLightGreen | {"borderColor": "#9eebcf"} |
| bNavy | {"borderColor": "#001b44"} |
| bDarkBlue | {"borderColor": "#00449e"} |
| bBlue | {"borderColor": "#357edd"} |
| bLightBlue | {"borderColor": "#96ccff"} |
| bLightestBlue | {"borderColor": "#cdecff"} |
| bWashedBlue | {"borderColor": "#f6fffe"} |
| bWashedGreen | {"borderColor": "#e8fdf5"} |
| bWashedYellow | {"borderColor": "#fffceb"} |
| bWashedRed | {"borderColor": "#ffdfdf"} |
| bTransparent | {"borderColor": "transparent"} |
| black90 | {"color": "rgba( 0, 0, 0, .9 )"} |
| black80 | {"color": "rgba( 0, 0, 0, .8 )"} |
| black70 | {"color": "rgba( 0, 0, 0, .7 )"} |
| black60 | {"color": "rgba( 0, 0, 0, .6 )"} |
| black50 | {"color": "rgba( 0, 0, 0, .5 )"} |
| black40 | {"color": "rgba( 0, 0, 0, .4 )"} |
| black30 | {"color": "rgba( 0, 0, 0, .3 )"} |
| black20 | {"color": "rgba( 0, 0, 0, .2 )"} |
| black10 | {"color": "rgba( 0, 0, 0, .1 )"} |
| black05 | {"color": "rgba( 0, 0, 0, .05 )"} |
| white90 | {"color": "rgba( 255, 255, 255, .9 )"} |
| white80 | {"color": "rgba( 255, 255, 255, .8 )"} |
| white70 | {"color": "rgba( 255, 255, 255, .7 )"} |
| white60 | {"color": "rgba( 255, 255, 255, .6 )"} |
| white50 | {"color": "rgba( 255, 255, 255, .5 )"} |
| white40 | {"color": "rgba( 255, 255, 255, .4 )"} |
| white30 | {"color": "rgba( 255, 255, 255, .3 )"} |
| white20 | {"color": "rgba( 255, 255, 255, .2 )"} |
| white10 | {"color": "rgba( 255, 255, 255, .1 )"} |
| black | {"color": "#000"} |
| nearBlack | {"color": "#111"} |
| darkGray | {"color": "#333"} |
| midGray | {"color": "#555"} |
| gray | {"color": "#777"} |
| silver | {"color": "#999"} |
| lightSilver | {"color": "#aaa"} |
| moonGray | {"color": "#ccc"} |
| lightGray | {"color": "#eee"} |
| nearWhite | {"color": "#f4f4f4"} |
| white | {"color": "#fff"} |
| darkRed | {"color": "#e7040f"} |
| red | {"color": "#ff4136"} |
| lightRed | {"color": "#ff725c"} |
| orange | {"color": "#ff6300"} |
| gold | {"color": "#ffb700"} |
| yellow | {"color": "#ffd700"} |
| lightYellow | {"color": "#fbf1a9"} |
| purple | {"color": "#5e2ca5"} |
| lightPurple | {"color": "#a463f2"} |
| darkPink | {"color": "#d5008f"} |
| hotPink | {"color": "#ff41b4"} |
| pink | {"color": "#ff80cc"} |
| lightPink | {"color": "#ffa3d7"} |
| darkGreen | {"color": "#137752"} |
| green | {"color": "#19a974"} |
| lightGreen | {"color": "#9eebcf"} |
| navy | {"color": "#001b44"} |
| darkBlue | {"color": "#00449e"} |
| blue | {"color": "#357edd"} |
| lightBlue | {"color": "#96ccff"} |
| lightestBlue | {"color": "#cdecff"} |
| washedBlue | {"color": "#f6fffe"} |
| washedGreen | {"color": "#e8fdf5"} |
| washedYellow | {"color": "#fffceb"} |
| washedRed | {"color": "#ffdfdf"} |
| bgBlack90 | {"backgroundColor": "rgba( 0, 0, 0, .9 )"} |
| bgBlack80 | {"backgroundColor": "rgba( 0, 0, 0, .8 )"} |
| bgBlack70 | {"backgroundColor": "rgba( 0, 0, 0, .7 )"} |
| bgBlack60 | {"backgroundColor": "rgba( 0, 0, 0, .6 )"} |
| bgBlack50 | {"backgroundColor": "rgba( 0, 0, 0, .5 )"} |
| bgBlack40 | {"backgroundColor": "rgba( 0, 0, 0, .4 )"} |
| bgBlack30 | {"backgroundColor": "rgba( 0, 0, 0, .3 )"} |
| bgBlack20 | {"backgroundColor": "rgba( 0, 0, 0, .2 )"} |
| bgBlack10 | {"backgroundColor": "rgba( 0, 0, 0, .1 )"} |
| bgBlack05 | {"backgroundColor": "rgba( 0, 0, 0, .05 )"} |
| bgWhite90 | {"backgroundColor": "rgba( 255, 255, 255, .9 )"} |
| bgWhite80 | {"backgroundColor": "rgba( 255, 255, 255, .8 )"} |
| bgWhite70 | {"backgroundColor": "rgba( 255, 255, 255, .7 )"} |
| bgWhite60 | {"backgroundColor": "rgba( 255, 255, 255, .6 )"} |
| bgWhite50 | {"backgroundColor": "rgba( 255, 255, 255, .5 )"} |
| bgWhite40 | {"backgroundColor": "rgba( 255, 255, 255, .4 )"} |
| bgWhite30 | {"backgroundColor": "rgba( 255, 255, 255, .3 )"} |
| bgWhite20 | {"backgroundColor": "rgba( 255, 255, 255, .2 )"} |
| bgWhite10 | {"backgroundColor": "rgba( 255, 255, 255, .1 )"} |
| bgBlack | {"backgroundColor": "#000"} |
| bgNearBlack | {"backgroundColor": "#111"} |
| bgDarkGray | {"backgroundColor": "#333"} |
| bgMidGray | {"backgroundColor": "#555"} |
| bgGray | {"backgroundColor": "#777"} |
| bgSilver | {"backgroundColor": "#999"} |
| bgLightSilver | {"backgroundColor": "#aaa"} |
| bgMoonGray | {"backgroundColor": "#ccc"} |
| bgLightGray | {"backgroundColor": "#eee"} |
| bgNearWhite | {"backgroundColor": "#f4f4f4"} |
| bgWhite | {"backgroundColor": "#fff"} |
| bgTransparent | {"backgroundColor": "transparent"} |
| bgDarkRed | {"backgroundColor": "#e7040f"} |
| bgRed | {"backgroundColor": "#ff4136"} |
| bgLightRed | {"backgroundColor": "#ff725c"} |
| bgOrange | {"backgroundColor": "#ff6300"} |
| bgGold | {"backgroundColor": "#ffb700"} |
| bgYellow | {"backgroundColor": "#ffd700"} |
| bgLightYellow | {"backgroundColor": "#fbf1a9"} |
| bgPurple | {"backgroundColor": "#5e2ca5"} |
| bgLightPurple | {"backgroundColor": "#a463f2"} |
| bgDarkPink | {"backgroundColor": "#d5008f"} |
| bgHotPink | {"backgroundColor": "#ff41b4"} |
| bgPink | {"backgroundColor": "#ff80cc"} |
| bgLightPink | {"backgroundColor": "#ffa3d7"} |
| bgDarkGreen | {"backgroundColor": "#137752"} |
| bgGreen | {"backgroundColor": "#19a974"} |
| bgLightGreen | {"backgroundColor": "#9eebcf"} |
| bgNavy | {"backgroundColor": "#001b44"} |
| bgDarkBlue | {"backgroundColor": "#00449e"} |
| bgBlue | {"backgroundColor": "#357edd"} |
| bgLightBlue | {"backgroundColor": "#96ccff"} |
| bgLightestBlue | {"backgroundColor": "#cdecff"} |
| bgWashedBlue | {"backgroundColor": "#f6fffe"} |
| bgWashedGreen | {"backgroundColor": "#e8fdf5"} |
| bgWashedYellow | {"backgroundColor": "#fffceb"} |
| bgWashedRed | {"backgroundColor": "#ffdfdf"} |
| STYLE NAME | STYLES |
|---|---|
| top0 | {"top": 0} |
| right0 | {"right": 0} |
| bottom0 | {"bottom": 0} |
| left0 | {"left": 0} |
| top1 | {"top": -16} |
| right1 | {"right": -16} |
| bottom1 | {"bottom": -16} |
| left1 | {"left": -16} |
| top2 | {"top": -32} |
| right2 | {"right": -32} |
| bottom2 | {"bottom": -32} |
| left2 | {"left": -32} |
| absoluteFill | {"top": 0, "right": 0, "bottom": 0, "left": 0} |
| relative | {"position": "relative"} |
| absolute | {"position": "absolute"} |
| STYLE NAME | STYLES |
|---|---|
| dtFixed | {"width": "100%"} |
| flexAuto | {"minWidth": 0} |
| mw100 | {"maxWidth": "100%"} |
| mw1 | {"maxWidth": 16} |
| mw2 | {"maxWidth": 32} |
| mw3 | {"maxWidth": 64} |
| mw4 | {"maxWidth": 128} |
| mw5 | {"maxWidth": 256} |
| mw6 | {"maxWidth": 512} |
| mw7 | {"maxWidth": 768} |
| mw8 | {"maxWidth": 1024} |
| mw9 | {"maxWidth": 1536} |
| mwNone | {"maxWidth": "none"} |
| w1 | {"width": 16} |
| w2 | {"width": 32} |
| w3 | {"width": 64} |
| w4 | {"width": 128} |
| w5 | {"width": 256} |
| w10 | {"width": "10%"} |
| w20 | {"width": "20%"} |
| w25 | {"width": "25%"} |
| w30 | {"width": "30%"} |
| w33 | {"width": "33%"} |
| w34 | {"width": "34%"} |
| w40 | {"width": "40%"} |
| w50 | {"width": "50%"} |
| w60 | {"width": "60%"} |
| w70 | {"width": "70%"} |
| w75 | {"width": "75%"} |
| w80 | {"width": "80%"} |
| w90 | {"width": "90%"} |
| w100 | {"width": "100%"} |
| wAuto | {"width": "auto"} |
| measure | {"maxWidth": 480} |
| measureWide | {"maxWidth": 544} |
| measureNarrow | {"maxWidth": 320} |
| STYLE NAME | STYLES |
|---|---|
| i | {"fontStyle": "italic"} |
| fsNormal | {"fontStyle": "normal"} |
| normal | {"fontWeight": "normal"} |
| b | {"fontWeight": "bold"} |
| fw1 | {"fontWeight": "100"} |
| fw2 | {"fontWeight": "200"} |
| fw3 | {"fontWeight": "300"} |
| fw4 | {"fontWeight": "400"} |
| fw5 | {"fontWeight": "500"} |
| fw6 | {"fontWeight": "600"} |
| fw7 | {"fontWeight": "700"} |
| fw8 | {"fontWeight": "800"} |
| fw9 | {"fontWeight": "900"} |
| f1 | {"fontSize": 48} |
| f2 | {"fontSize": 36} |
| f3 | {"fontSize": 24} |
| f4 | {"fontSize": 20} |
| f5 | {"fontSize": 16} |
| f6 | {"fontSize": 14} |
| f7 | {"fontSize": 12} |
| STYLE NAME | STYLES |
|---|---|
| h1 | {"height": 16} |
| h2 | {"height": 32} |
| h3 | {"height": 64} |
| h4 | {"height": 128} |
| h5 | {"height": 256} |
| h25 | {"height": "25%"} |
| h50 | {"height": "50%"} |
| h75 | {"height": "75%"} |
| h100 | {"height": "100%"} |
| minH100 | {"minHeight": "100%"} |
| hAuto | {"height": "auto"} |
| STYLE NAME | STYLES |
|---|---|
| tracked | {"letterSpacing": 1.6} |
| trackedTight | {"letterSpacing": -0.8} |
| trackedMega | {"letterSpacing": 4} |
| STYLE NAME | STYLES |
|---|---|
| lhSolid | {"lineHeight": 1} |
| lhTitle | {"lineHeight": 1.25} |
| lhCopy | {"lineHeight": 1.5} |
| STYLE NAME | STYLES |
|---|---|
| overflowVisible | {"overflow": "visible"} |
| overflowHidden | {"overflow": "hidden"} |
| truncate | {"overflow": "hidden"} |
| STYLE NAME | STYLES |
|---|---|
| o100 | {"opacity": 1} |
| o90 | {"opacity": 0.9} |
| o80 | {"opacity": 0.8} |
| o70 | {"opacity": 0.7} |
| o60 | {"opacity": 0.6} |
| o50 | {"opacity": 0.5} |
| o40 | {"opacity": 0.4} |
| o30 | {"opacity": 0.3} |
| o20 | {"opacity": 0.2} |
| o10 | {"opacity": 0.1} |
| o05 | {"opacity": 0.05} |
| o025 | {"opacity": 0.025} |
| o0 | {"opacity": 0} |
| dim | {"opacity": 1} |
| dimActive | {"opacity": 0.8} |
| STYLE NAME | STYLES |
|---|---|
| pa0 | {"padding": 0} |
| pa1 | {"padding": 4} |
| pa2 | {"padding": 8} |
| pa3 | {"padding": 16} |
| pa4 | {"padding": 32} |
| pa5 | {"padding": 64} |
| pa6 | {"padding": 128} |
| pa7 | {"padding": 256} |
| pl0 | {"paddingLeft": 0} |
| pl1 | {"paddingLeft": 4} |
| pl2 | {"paddingLeft": 8} |
| pl3 | {"paddingLeft": 16} |
| pl4 | {"paddingLeft": 32} |
| pl5 | {"paddingLeft": 64} |
| pl6 | {"paddingLeft": 128} |
| pl7 | {"paddingLeft": 256} |
| pr0 | {"paddingRight": 0} |
| pr1 | {"paddingRight": 4} |
| pr2 | {"paddingRight": 8} |
| pr3 | {"paddingRight": 16} |
| pr4 | {"paddingRight": 32} |
| pr5 | {"paddingRight": 64} |
| pr6 | {"paddingRight": 128} |
| pr7 | {"paddingRight": 256} |
| pb0 | {"paddingBottom": 0} |
| pb1 | {"paddingBottom": 4} |
| pb2 | {"paddingBottom": 8} |
| pb3 | {"paddingBottom": 16} |
| pb4 | {"paddingBottom": 32} |
| pb5 | {"paddingBottom": 64} |
| pb6 | {"paddingBottom": 128} |
| pb7 | {"paddingBottom": 256} |
| pt0 | {"paddingTop": 0} |
| pt1 | {"paddingTop": 4} |
| pt2 | {"paddingTop": 8} |
| pt3 | {"paddingTop": 16} |
| pt4 | {"paddingTop": 32} |
| pt5 | {"paddingTop": 64} |
| pt6 | {"paddingTop": 128} |
| pt7 | {"paddingTop": 256} |
| pv0 | {"paddingTop": 0, "paddingBottom": 0} |
| pv1 | {"paddingTop": 4, "paddingBottom": 4} |
| pv2 | {"paddingTop": 8, "paddingBottom": 8} |
| pv3 | {"paddingTop": 16, "paddingBottom": 16} |
| pv4 | {"paddingTop": 32, "paddingBottom": 32} |
| pv5 | {"paddingTop": 64, "paddingBottom": 64} |
| pv6 | {"paddingTop": 128, "paddingBottom": 128} |
| pv7 | {"paddingTop": 256, "paddingBottom": 256} |
| ph0 | {"paddingLeft": 0, "paddingRight": 0} |
| ph1 | {"paddingLeft": 4, "paddingRight": 4} |
| ph2 | {"paddingLeft": 8, "paddingRight": 8} |
| ph3 | {"paddingLeft": 16, "paddingRight": 16} |
| ph4 | {"paddingLeft": 32, "paddingRight": 32} |
| ph5 | {"paddingLeft": 64, "paddingRight": 64} |
| ph6 | {"paddingLeft": 128, "paddingRight": 128} |
| ph7 | {"paddingLeft": 256, "paddingRight": 256} |
| STYLE NAME | STYLES |
|---|---|
| ma0 | {"margin": 0} |
| ma1 | {"margin": 4} |
| ma2 | {"margin": 8} |
| ma3 | {"margin": 16} |
| ma4 | {"margin": 32} |
| ma5 | {"margin": 64} |
| ma6 | {"margin": 128} |
| ma7 | {"margin": 256} |
| ml0 | {"marginLeft": 0} |
| ml1 | {"marginLeft": 4} |
| ml2 | {"marginLeft": 8} |
| ml3 | {"marginLeft": 16} |
| ml4 | {"marginLeft": 32} |
| ml5 | {"marginLeft": 64} |
| ml6 | {"marginLeft": 128} |
| ml7 | {"marginLeft": 256} |
| mr0 | {"marginRight": 0} |
| mr1 | {"marginRight": 4} |
| mr2 | {"marginRight": 8} |
| mr3 | {"marginRight": 16} |
| mr4 | {"marginRight": 32} |
| mr5 | {"marginRight": 64} |
| mr6 | {"marginRight": 128} |
| mr7 | {"marginRight": 256} |
| mb0 | {"marginBottom": 0} |
| mb1 | {"marginBottom": 4} |
| mb2 | {"marginBottom": 8} |
| mb3 | {"marginBottom": 16} |
| mb4 | {"marginBottom": 32} |
| mb5 | {"marginBottom": 64} |
| mb6 | {"marginBottom": 128} |
| mb7 | {"marginBottom": 256} |
| mt0 | {"marginTop": 0} |
| mt1 | {"marginTop": 4} |
| mt2 | {"marginTop": 8} |
| mt3 | {"marginTop": 16} |
| mt4 | {"marginTop": 32} |
| mt5 | {"marginTop": 64} |
| mt6 | {"marginTop": 128} |
| mt7 | {"marginTop": 256} |
| mv0 | {"marginTop": 0, "marginBottom": 0} |
| mv1 | {"marginTop": 4, "marginBottom": 4} |
| mv2 | {"marginTop": 8, "marginBottom": 8} |
| mv3 | {"marginTop": 16, "marginBottom": 16} |
| mv4 | {"marginTop": 32, "marginBottom": 32} |
| mv5 | {"marginTop": 64, "marginBottom": 64} |
| mv6 | {"marginTop": 128, "marginBottom": 128} |
| mv7 | {"marginTop": 256, "marginBottom": 256} |
| mh0 | {"marginLeft": 0, "marginRight": 0} |
| mh1 | {"marginLeft": 4, "marginRight": 4} |
| mh2 | {"marginLeft": 8, "marginRight": 8} |
| mh3 | {"marginLeft": 16, "marginRight": 16} |
| mh4 | {"marginLeft": 32, "marginRight": 32} |
| mh5 | {"marginLeft": 64, "marginRight": 64} |
| mh6 | {"marginLeft": 128, "marginRight": 128} |
| mh7 | {"marginLeft": 256, "marginRight": 256} |
| na1 | {"margin": -4} |
| na2 | {"margin": -8} |
| na3 | {"margin": -16} |
| na4 | {"margin": -32} |
| na5 | {"margin": -64} |
| na6 | {"margin": -128} |
| na7 | {"margin": -256} |
| nl1 | {"marginLeft": -4} |
| nl2 | {"marginLeft": -8} |
| nl3 | {"marginLeft": -16} |
| nl4 | {"marginLeft": -32} |
| nl5 | {"marginLeft": -64} |
| nl6 | {"marginLeft": -128} |
| nl7 | {"marginLeft": -256} |
| nr1 | {"marginRight": -4} |
| nr2 | {"marginRight": -8} |
| nr3 | {"marginRight": -16} |
| nr4 | {"marginRight": -32} |
| nr5 | {"marginRight": -64} |
| nr6 | {"marginRight": -128} |
| nr7 | {"marginRight": -256} |
| nb1 | {"marginBottom": -4} |
| nb2 | {"marginBottom": -8} |
| nb3 | {"marginBottom": -16} |
| nb4 | {"marginBottom": -32} |
| nb5 | {"marginBottom": -64} |
| nb6 | {"marginBottom": -128} |
| nb7 | {"marginBottom": -256} |
| nt1 | {"marginTop": -4} |
| nt2 | {"marginTop": -8} |
| nt3 | {"marginTop": -16} |
| nt4 | {"marginTop": -32} |
| nt5 | {"marginTop": -64} |
| nt6 | {"marginTop": -128} |
| nt7 | {"marginTop": -256} |
| indent | {"marginTop": 0, "marginBottom": 0} |
| center | {"marginRight": "auto", "marginLeft": "auto"} |
| mrAuto | {"marginRight": "auto"} |
| mlAuto | {"marginLeft": "auto"} |
| STYLE NAME | STYLES |
|---|---|
| tl | {"textAlign": "left"} |
| tr | {"textAlign": "right"} |
| tc | {"textAlign": "center"} |
| STYLE NAME | STYLES |
|---|---|
| z0 | {"zIndex": 0} |
| z1 | {"zIndex": 1} |
| z2 | {"zIndex": 2} |
| z3 | {"zIndex": 3} |
| z4 | {"zIndex": 4} |
| z5 | {"zIndex": 5} |
| z999 | {"zIndex": 999} |
| z9999 | {"zIndex": 9999} |
| zMax | {"zIndex": 2147483647} |