Style Functions

Style functions for React Web

1. Usage

1-1. Installation

# npm
npm install @solariera/web-style-css

# yarn
yarn add @solariera/web-style-css

2. Functions

2-1. Flex Style

| Functions | Parameters | | :----------------- | :------------------------------------------------------------------------------------------------------------- | | flexBasicStyle | flexDirection?: string flexWrap?: string styleDisplay?: string | | flexContainerStyle | justifyContent?: string alignContent?: string alignItems?: string | | flexItemsStyle | flexGrow?: number flexShrink?: number flexBasis?: string \| number alignSelf?: string order?: number |

2-2. Image Style

| Functions | Parameters | | :----------------- | :--------------------------------------------------------------------- | | imagePositionStyle | x?: number y?: number unit?: string | | imageSizeStyle | width?: number \| string height?: number \| string unit?: string | | imageViewStyle | base64: string repeat?: string |

2-3. Misc

| Functions | Parameters | | :-------------- | :-------------------------------------------------------------------- | | cursorStyle | cursor?: string | | listTypeStyle | listStyleType?: string | | overflowStyle | overflow?: string | | transitionStyle | duration?: number timingFunction?: string durationUnit?: string |

2-4. Object

| Functions | Parameters | | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | bgColorStyle | bgColor?: string bgColorAlpha?: number | | blurStyle | blur?: number unit?: string | | borderStyle | borderWidth?: number borderColor?: string borderColorAlpha?: number borderStyle?: string borderLeft?: boolean borderRight?: boolean borderTop?: boolean borderBottom?: boolean unit?: string | | floatStyle | floatDirection?: string | | marginStyle | marginLeft?: number marginRight?: number marginTop?: number marginBottom?: number unit?: string | | opacityStyle | opacity?: number | | paddingStyle | paddingLeft?: number paddingRight?: number paddingTop?: number paddingBottom?: number unit?: string | | positionStyle | position?: string left?: number right?: number top?: number bottom?: number unit?: string | | roundStyle | roundSize?: number \| number[] unit?: string | | scaleStyle | scale?: number scaleY?: number origin?: string | | sizeStyle | width?: number height?: number unit?: string |

2-5. Text

| Functions | Parameters | | :----------------- | :------------------------------------------------------------------------ | | fontColorStyle | fontColor?: string fontColorAlpha?: number | | fontFamilyStyle | fontFamily?: string | | fontSizeStyle | fontSize?: number fontUnit?: string | | fontWeightStyle | fontWeight?: number fontStyle?: string | | letterSpacingStyle | letterSpacing?: number unit?: string | | lineHeightStyle | lineHeight?: number unit?: string | | textAlignStyle | textAlign?: string | | textStrokeStyle | strokeWidth?: number strokeColor?: string strokeColorAlpha?: number |