An Angular module that provides styled components in Angular.

Installation

With npm: npm install angular-styled-components --save

or with yarn: yarn add angular-styled-components

Usage

Import StyledComponentsModule

import { NgModule } from '@angular/core';
import { StyledComponentsModule } from 'angular-styled-components';
import { HomeComponent } from '@app/modules/home/home.component';

@NgModule({
    imports: [
        StyledComponentsModule,
    ],
    exports: [],
    declarations: [HomeComponent],
    providers: []
})
export class HomeModule {}

Use in HTML tag

<div fdr jcc aic>
    <div color="grey" margin="32" flex="1">
        Left side
    </div>
    <div backgroundColor="red" padding="2em" flexGrow="2">
        Right side
    </div>
</div>

Style properties

Background properties

| Property | Css property | Default | Input type | | ----------------- | :--------------: | :-----: | :--------: | | background | background | none | string | | backgroundColor | background-color | initial | string | | backgroundSize | background-size | initial | string |

Border properties

| Property | Css property | Default | Input type | | ------------------------- | :------------------------: | :-----: | :---------------: | | borderColor | border-color | initial | string | | borderTopColor | border-top-color | initial | string | | borderBottomColor | border-bottom-color | initial | string | | borderLeftColor | border-left-color | initial | string | | borderRightColor | border-top-color | initial | string | | borderWidth | border-width | initial | string or integer | | borderTopWidth | border-top-width | initial | string or integer | | borderBottomWidth | border-bottom-width | initial | string or integer | | borderLeftWidth | border-left-width | initial | string or integer | | borderRightWidth | border-right-width | initial | string or integer | | borderRadius | border-radius | initial | string | | borderTopLeftRadius | border-top-left-radius | initial | string | | borderTopRightRadius | border-top-right-radius | initial | string | | borderBottomLeftRadius | border-bottom-left-radius | initial | string | | borderBottomRightRadius | border-bottom-right-radius | initial | string |

Extra properties

| Property | Css property | Default | Input type | | ------------ | :----------: | :-----: | :--------: | | cursor | cursor | initial | string | | blur | blur | initial | string | | opacity | opacity | 1 | string | | box-shadow | box-shadow | initial | string | | transform | transform | none | string |

Flex properties

| Property | Css property | Default | Input type | | ------------ | :-------------: | :------------: | :--------: | | fdr | flex-direction | row | none | | fdc | flex-direction | column | none | | fdrr | flex-direction | row-reverse | none | | fdcr | flex-direction | column-reverse | none | | fw | flex-wrap | wrap | none | | fnw | flex-wrap | nowrap | none | | fwr | flex-wrap | wrap-reverse | none | | fffd | flex-flow | flex-direction | none | | fffw | flex-flow | flex-wrap | none | | fb | flex-basis | auto | integer | | jcsa | justify-content | space-around | none | | jcsb | justify-content | space-between | none | | jcc | justify-content | center | none | | jcfe | justify-content | flex-end | none | | jcfs | justify-content | flex-start | none | | jcse | justify-content | space-evenly | none | | aib | align-items | baseline | none | | aic | align-items | center | none | | aife | align-items | flex-end | none | | aifs | align-items | flex-start | none | | ais | align-items | stretch | none | | acb | align-content | baseline | none | | acc | align-content | center | none | | acfe | align-content | flex-end | none | | acfs | align-content | flex-start | none | | asa | align-self | auto | none | | ass | align-self | stretch | none | | asc | align-self | center | none | | asfs | align-self | flex-start | none | | asfe | align-self | flex-end | none | | asb | align-self | baseline | none | | asi | align-self | initial | none | | flex | flex | 1 | integer | | flexGrow | flex-grow | 1 | integer | | flexShrink | flex-shrink | 1 | integer | | order | order | 1 | integer |

Font properties

| Property | Css property | Default | Input type | | -------------- | :-------------: | :----------: | :---------------: | | color | color | initial | string | | fontWeight | font-weight | normal | string or integer | | underline | text-decoration | underline | none | | italic | font-style | italic | none | | lineHeight | line-height | 1 | string or integer | | lineThrough | text-decoration | line-through | none | | whiteSpace | white-space | initial | string | | textOverflow | text-overflow | initial | string |

Height properties

| Property | Css property | Default | Input type | | ----------- | :----------: | :-----: | :---------------: | | height | height | initial | string or integer | | maxHeight | max-height | initial | string or integer | | minHeight | min-height | initial | string or integer |

Margin properties

| Property | Css property | Default | Input type | | -------------- | :-----------: | :-----: | :---------------: | | margin | margin | 0 | string or integer | | marginLeft | margin-left | 0 | string or integer | | marginRight | margin-right | 0 | string or integer | | marginTop | margin-top | 0 | string or integer | | marginBottom | margin-bottom | 0 | string or integer |

Overflow properties

| Property | Css property | Default | Input type | | ----------- | :----------: | :-----: | :--------: | | overflow | overflow | none | string | | overflowX | overflow-x | none | string | | overflowY | overflow-y | none | string |

Padding properties

| Property | Css property | Default | Input type | | --------------- | :------------: | :-----: | :---------------: | | padding | padding | 0 | string or integer | | paddingLeft | padding-left | 0 | string or integer | | paddingRight | padding-right | 0 | string or integer | | paddingTop | padding-top | 0 | string or integer | | paddingBottom | padding-bottom | 0 | string or integer |

Position properties

| Property | Css property | Default | Input type | | ---------- | :----------: | :-----: | :--------: | | position | position | initial | string | | display | display | block | string | | zIndex | z-index | 1 | integer | | left | left | 0 | integer | | right | right | 0 | integer | | top | top | 0 | integer | | bottom | bottom | 0 | integer |

TextAlign properties

| Property | Css property | Default | Input type | | -------- | :----------: | :-----: | :--------: | | tac | text-align | center | none | | tar | text-align | right | none | | tal | text-align | left | none |

Width properties

| Property | Css property | Default | Input type | | ---------- | :----------: | :-----: | :---------------: | | width | width | initial | string or integer | | maxWidth | max-width | initial | string or integer | | minWidth | min-width | initial | string or integer |

Override style properties

Inline style properties can be extended or overriden using class name. In order to override a style already defined in an inline style property, the css tag !important has to be used.