mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(card): restructure card component to separate modules
restructure card component to separate modules
This commit is contained in:
37
src/components/card/card-content.ts
Normal file
37
src/components/card/card-content.ts
Normal 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');
|
||||
}
|
||||
}
|
||||
37
src/components/card/card-header.ts
Normal file
37
src/components/card/card-header.ts
Normal 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');
|
||||
}
|
||||
}
|
||||
37
src/components/card/card-title.ts
Normal file
37
src/components/card/card-title.ts
Normal 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');
|
||||
}
|
||||
}
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user