Bogdan1975 / ng2-styled-directive

Directive for convenient styling DOM-objects and Angular 2 components

ng2-styled-directive

Status:

Angular 2 "styled" directive

Demo: http://bogdan1975.github.io/styled/

• Dependencies
• Install
• Usage
  • Attributes
    • styleBlock
    • stylePath
    • skin
  • Interfaces
    • ISkinable
    • IStyledConfig
    • IConfigItem

Dependencies

• Angular 2 npm install angular2

Install

You can get it on npm.

npm install ng2-styled-directive

Usage

<div styled styleBlock="{width:50px;height:50px;background:red}">
</div>

<div styled stylePath="css/stylesheet.css">
</div>

<ng2-component styled skin="modern">
</ng2-component>

Attributes

styleBlock - string | string[]

The value of this attribute will be applied to "styled" DOM-element. Directive adds unique attribute to element and incapsulates style by this attribute.

stylePath - string

skin - string

If 'styled' directive is applied to component that implements 'ISkinable' interface, you can use skins that setted by getStyledConfig() method of this copmonent. getStyledConfig() method must return IStyledConfig interface object.

Example:

import {Ng2StyledDirective, IStyledConfig, ISkinable} from 'ng2-styled-directive/ng2-styled.directive';

getStyledConfig():IStyledConfig {
    return {
        'default': {
            block: [
                "{width:90%; height: 50px}",
                ".range-ribbon {position: absolute; width: 100%; height: 10px; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #eee 50% top repeat-x; color: #333; top: 4px;}",
                ".slider-handle {position: absolute; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #f6f6f6 50% 50% repeat-x; width: 18px; height: 18px; box-sizing: border-box;}",
                ".slider-handle.sliding {border: 1px solid #fbcb09; background: #fdf5ce 50% 50% repeat-x;}"
            ]
        },
        'elegance': {
            block: [
                "{width:90%; height: 50px}",
                ".range-ribbon {position: absolute; width: 100%; height: 3px; background: #ccc; top: 14px;}",
                ".slider-handle {position: absolute; width: 8px; height: 8px; border: 12px solid #a6d8ef; cursor: ew-resize;; background-color: #5082e0; opacity: .7; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px;}",
                ".slider-handle:hover {opacity: 1}",
                ".slider-handle.sliding {opacity: 1}"
            ]
        },
        'black-skin': {
            path: "/assets/css/element/black-skin.min.css"
        }
    }
}

If skin named as 'default' provided by getStyledConfig() method of styled component, it will applied automatically. If you don't want any skin, set 'none' as skin name.

Interfaces

ISkinable

interface ISkinable {
    getStyledConfig(): IStyledConfig;
}

IStyledConfig

interface IStyledConfig {
    [index:string]: IConfigItem
}

IConfigItem

interface IConfigItem {
    path?: string;
    block?: Array<string>|string;
}