refactor(card): restructure card component to separate modules

restructure card component to separate modules
This commit is contained in:
Dan Bucholtz
2017-03-02 14:44:31 -06:00
parent 6d787553a3
commit 5c61cb23ac
4 changed files with 111 additions and 105 deletions

View File

@@ -0,0 +1,37 @@
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
import { Config } from '../../config/config';
import { Ion } from '../ion';
/**
* @private
*/
@Directive({
selector: 'ion-card-content'
})
export class CardContent extends Ion {
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/
@Input()
set color(val: string) {
this._setColor(val);
}
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input()
set mode(val: string) {
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer, 'card-content');
}
}

View File

@@ -0,0 +1,37 @@
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
import { Config } from '../../config/config';
import { Ion } from '../ion';
/**
* @private
*/
@Directive({
selector: 'ion-card-header'
})
export class CardHeader extends Ion {
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/
@Input()
set color(val: string) {
this._setColor(val);
}
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input()
set mode(val: string) {
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer, 'card-header');
}
}

View File

@@ -0,0 +1,37 @@
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
import { Config } from '../../config/config';
import { Ion } from '../ion';
/**
* @private
*/
@Directive({
selector: 'ion-card-title'
})
export class CardTitle extends Ion {
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/
@Input()
set color(val: string) {
this._setColor(val);
}
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input()
set mode(val: string) {
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer, 'card-title');
}
}

View File

@@ -35,109 +35,4 @@ export class Card extends Ion {
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer, 'card');
}
}
/**
* @private
*/
@Directive({
selector: 'ion-card-content'
})
export class CardContent extends Ion {
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/
@Input()
set color(val: string) {
this._setColor(val);
}
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input()
set mode(val: string) {
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer, 'card-content');
}
}
/**
* @private
*/
@Directive({
selector: 'ion-card-header'
})
export class CardHeader extends Ion {
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/
@Input()
set color(val: string) {
this._setColor(val);
}
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input()
set mode(val: string) {
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer, 'card-header');
}
}
/**
* @private
*/
@Directive({
selector: 'ion-card-title'
})
export class CardTitle extends Ion {
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/
@Input()
set color(val: string) {
this._setColor(val);
}
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
@Input()
set mode(val: string) {
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer, 'card-title');
}
}