angular-styled-components

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.