mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(chips): added Chip component
This commit is contained in:
committed by
Brandy Carney
parent
57eda7f602
commit
421f637f96
55
src/components/chip/chip.ts
Normal file
55
src/components/chip/chip.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { Directive, ElementRef, Renderer, Attribute } from '@angular/core';
|
||||
|
||||
import { Config } from '../../config/config';
|
||||
|
||||
/**
|
||||
* @name Chip
|
||||
* @module ionic
|
||||
* @description
|
||||
* Chips represent complex entities in small blocks, such as a contact.
|
||||
* @see {@link /docs/v2/components/#chips Chips Component Docs}
|
||||
**/
|
||||
|
||||
@Directive({
|
||||
selector: 'ion-chip'
|
||||
})
|
||||
export class Chip {
|
||||
|
||||
constructor(
|
||||
config: Config,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer: Renderer
|
||||
) {
|
||||
let element = _elementRef.nativeElement;
|
||||
|
||||
this._readAttrs(element);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private _readAttrs(element: HTMLElement) {
|
||||
let elementAttrs = element.attributes;
|
||||
let attrName: string;
|
||||
|
||||
console.info("mushroom");
|
||||
|
||||
for (let i = 0, l = elementAttrs.length; i < l; i++) {
|
||||
if (elementAttrs[i].value !== '') continue;
|
||||
|
||||
attrName = elementAttrs[i].name;
|
||||
|
||||
// Ignore attributes item-left, item-right
|
||||
if (attrName.indexOf('item') === -1) {
|
||||
this._setClass(attrName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private _setClass(color: string) {
|
||||
this._renderer.setElementClass(this._elementRef.nativeElement, 'chip-' + color, true);
|
||||
}
|
||||
}
|
||||
@@ -46,6 +46,7 @@ import { NavPush } from '../components/nav/nav-push';
|
||||
import { NavbarTemplate, Navbar } from '../components/navbar/navbar';
|
||||
import { ShowWhen, HideWhen } from '../components/show-hide-when/show-hide-when';
|
||||
import { Typography } from '../components/typography/typography';
|
||||
import { Chip } from '../components/chip/chip';
|
||||
|
||||
/**
|
||||
* @private
|
||||
@@ -67,6 +68,7 @@ import { Typography } from '../components/typography/typography';
|
||||
* - MenuClose
|
||||
* - Badge
|
||||
* - Button
|
||||
* - Chip
|
||||
* - Content
|
||||
* - Scroll
|
||||
* - InfiniteScroll
|
||||
@@ -131,6 +133,7 @@ export const IONIC_DIRECTIVES: any[] = [
|
||||
Backdrop,
|
||||
Badge,
|
||||
Button,
|
||||
Chip,
|
||||
Content,
|
||||
Scroll,
|
||||
InfiniteScroll,
|
||||
|
||||
Reference in New Issue
Block a user