ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
72 lines (67 loc) • 5.08 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class SegmentedControlComponent {
get amDisabled() {
return this.disabled;
}
constructor() {
this.prefixCls = 'am-segment';
this.tintColor = '#2DB7F5';
this.disabled = false;
this.selectedIndex = 0;
this.onChange = new EventEmitter();
this.role = 'tablist';
this.amSegment = true;
}
onClick(index, value) {
if (!this.disabled && index !== this.selectedIndex) {
this.selectedIndex = index;
this.onChange.emit({ selectedIndex: index, value: value });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SegmentedControlComponent, selector: "SegmentedControl, nz-segmented-control", inputs: { tintColor: "tintColor", disabled: "disabled", selectedIndex: "selectedIndex", values: "values" }, outputs: { onChange: "onChange" }, host: { properties: { "attr.role": "this.role", "class.am-segment": "this.amSegment", "class.am-segment-disabled": "this.amDisabled" } }, ngImport: i0, template: "<div\n role=\"tab\"\n *ngFor=\"let value of values; let i = index\"\n class=\"{{ prefixCls }}-item\"\n [ngClass]=\"{ 'am-segment-item-selected': i === selectedIndex }\"\n [ngStyle]=\"{\n 'border-color': tintColor,\n color: i === selectedIndex ? '#fff' : tintColor,\n 'background-color': i === selectedIndex ? tintColor : 'transparent'\n }\"\n (click)=\"onClick(i, value)\"\n>\n <div\n class=\"{{ prefixCls }}-item-inner\"\n [ngStyle]=\"{ 'background-color': i === selectedIndex ? tintColor : 'transparent' }\"\n ></div>\n {{ value }}\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlComponent, decorators: [{
type: Component,
args: [{ selector: 'SegmentedControl, nz-segmented-control', template: "<div\n role=\"tab\"\n *ngFor=\"let value of values; let i = index\"\n class=\"{{ prefixCls }}-item\"\n [ngClass]=\"{ 'am-segment-item-selected': i === selectedIndex }\"\n [ngStyle]=\"{\n 'border-color': tintColor,\n color: i === selectedIndex ? '#fff' : tintColor,\n 'background-color': i === selectedIndex ? tintColor : 'transparent'\n }\"\n (click)=\"onClick(i, value)\"\n>\n <div\n class=\"{{ prefixCls }}-item-inner\"\n [ngStyle]=\"{ 'background-color': i === selectedIndex ? tintColor : 'transparent' }\"\n ></div>\n {{ value }}\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { tintColor: [{
type: Input
}], disabled: [{
type: Input
}], selectedIndex: [{
type: Input
}], values: [{
type: Input
}], onChange: [{
type: Output
}], role: [{
type: HostBinding,
args: ['attr.role']
}], amSegment: [{
type: HostBinding,
args: ['class.am-segment']
}], amDisabled: [{
type: HostBinding,
args: ['class.am-segment-disabled']
}] } });
class SegmentedControlModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlModule, declarations: [SegmentedControlComponent], imports: [CommonModule], exports: [SegmentedControlComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [SegmentedControlComponent],
exports: [SegmentedControlComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SegmentedControlComponent, SegmentedControlModule };
//# sourceMappingURL=ng-zorro-antd-mobile-segmented-control.mjs.map