本文整理汇总了TypeScript中angular2/src/platform/dom/dom_adapter.DOM.addClass方法的典型用法代码示例。如果您正苦于以下问题:TypeScript DOM.addClass方法的具体用法?TypeScript DOM.addClass怎么用?TypeScript DOM.addClass使用的例子?那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类angular2/src/platform/dom/dom_adapter.DOM
的用法示例。
在下文中一共展示了DOM.addClass方法的7个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: ripple
/**
* Apply an ink ripple to an element at the given position.
*
* @param element The element to apply a ripple to
* @param x The x position inside the element for the ripple to originate from
* @param y The y position inside the element for the ripple to originate from
* @returns {Promise<any>} A promise that resolves when the ripple has faded
*/
static ripple(element: HTMLElement, x: number, y: number): Promise<any> {
let fit: boolean = isPresent(DOM.getAttribute(element, 'md-fab'));
let container = DOM.createElement('div');
DOM.addClass(container, 'md-ripple-container');
let ripple = DOM.createElement('div');
DOM.addClass(ripple, 'md-ripple');
DOM.appendChild(container, ripple);
DOM.appendChild(element, container);
let getHostSize = () => {
let elX = element.offsetWidth;
let elY = element.offsetHeight;
return Ink.getSize(fit, elX, elY);
};
let getInitialStyles = (): any => {
let size = getHostSize();
let color = DOM.getComputedStyle(element).color || 'rgb(0,0,0)';
return {
'background-color': color,
left: `${x - size / 2}px`,
top: `${y - size / 2}px`,
width: `${size}px`,
height: `${size}px`,
opacity: 0.2,
transform: 'scale(0.01)'
};
};
return Animate.setStyles(ripple, getInitialStyles())
.then(() => Animate.animateStyles(ripple, {
left: '50%',
top: '50%',
opacity: 0.1,
transform: 'translate(-50%, -50%) scale(1)'
}, 450))
.then(() => Animate.animateStyles(ripple, {opacity: 0}, 650))
.then(() => DOM.removeChild(element, container));
}
示例2: expect
tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
fixture.detectChanges();
DOM.addClass(DOM.querySelector(fixture.debugElement.nativeElement, 'copy-me'), 'foo');
fixture.debugElement.componentInstance.numberCondition = 2;
fixture.detectChanges();
expect(DOM.hasClass(
DOM.querySelector(fixture.debugElement.nativeElement, 'copy-me'), 'foo'))
.toBe(true);
async.done();
});
示例3: expect
.then((fixture) => {
fixture.detectChanges();
DOM.addClass(DOM.querySelector(fixture.debugElement.nativeElement, 'copy-me'),
"foo");
fixture.debugElement.componentInstance.numberCondition = 2;
fixture.detectChanges();
expect(
DOM.hasClass(DOM.querySelector(fixture.debugElement.nativeElement, 'copy-me'),
"foo"))
.toBe(true);
async.done();
});
示例4: ripple
/**
* Apply an ink ripple to an element at the given position.
*
* @param element The element to apply a ripple to
* @param left The x position inside the element for the ripple to originate from
* @param top The y position inside the element for the ripple to originate from
* @returns {Promise<any>} A promise that resolves when the ripple has faded
*/
static ripple(element: HTMLElement, left: number, top: number): Promise<any> {
let fit: boolean = isPresent(DOM.getAttribute(element, 'md-fab'));
let container = DOM.querySelector(element, '.md-ripple-container');
if (!container) {
container = DOM.createElement('div');
DOM.addClass(container, 'md-ripple-container');
DOM.appendChild(element, container);
}
let ripple = DOM.createElement('div');
DOM.addClass(ripple, 'md-ripple');
let getInitialStyles = (): any => {
let color = DOM.getComputedStyle(element).color || 'rgb(0,0,0)';
let size = Ink.getSize(fit, element.clientWidth, element.clientHeight);
return {
'background-color': color,
left: `${left}px`,
top: `${top}px`,
width: `${size}px`,
height: `${size}px`
};
};
return Animate.setStyles(ripple, getInitialStyles())
.then(() => DOM.appendChild(container, ripple))
.then(() => DOM.addClass(ripple, 'md-ripple-placed'))
.then(() => Animate.wait())
.then(() => DOM.addClass(ripple, 'md-ripple-scaled'))
.then(() => DOM.addClass(ripple, 'md-ripple-active'))
.then(() => Animate.wait(450))
.then(() => DOM.removeClass(ripple, 'md-ripple-active'))
.then(() => Animate.wait(650))
.then(() => DOM.removeChild(container, ripple));
}
示例5: updateInkbar
/**
* Move the position of the inkbar to the active tab name
*
* @param element The parent element that holds the tabs
* @param inkbar The element for the inkbar
* @param activeIndex The index of the active tab
* @returns {Promise<any>} A promise that resolves when the ripple has faded.
*/
static updateInkbar(element: HTMLElement, inkbar: HTMLElement, activeIndex: number, previousIndex?: number): Promise<any> {
let containers = DOM.querySelectorAll(element, 'md-tab-item');
if (activeIndex > containers.length) {
return Promise.resolve();
}
let getDirection = (): string => {
return (previousIndex > activeIndex) ? 'md-left' : 'md-right';
};
// Get new active tab
let container = containers[activeIndex];
let left = container.getBoundingClientRect().left - containers[0].getBoundingClientRect().left;
let width = container.getBoundingClientRect().width;
DOM.addClass(inkbar, getDirection())
return Animate.setStyles(inkbar, { left: `${left}px`, width: `${width}px` })
.then(() => Animate.wait(250))
.then(() => DOM.removeClass(inkbar, getDirection()));
}
示例6:
.then(() => DOM.addClass(ripple, 'md-ripple-active'))
示例7: constructor
constructor(el: ElementRef) { DOM.addClass(el.nativeElement, 'compiled'); }