Angular 2
कोणीय सामग्री डिजाइन

Md2Select

घटक :

<md2-select [(ngModel)]="item" (change)="change($event)" [disabled]="disabled">
<md2-option *ngFor="let i of items" [value]="i.value" [disabled]="i.disabled">
{{i.name}}</md2-option>
</md2-select>

चयन करें उपयोगकर्ता को विकल्पों में से विकल्प चुनने की अनुमति दें।

<md2-select></md2-select>
<md2-option></md2-option>
<md2-select-header></md2-select-header>

Md2Tooltip

टूलटिप एक निर्देश है, यह उपयोगकर्ता को संकेत पाठ दिखाने की अनुमति देता है जबकि उपयोगकर्ता माउस एक तत्व पर मंडराता है।

एक टूलटिप में निम्नलिखित मार्कअप होगा।

<span tooltip-direction="left" tooltip="On the Left!">Left</span>
<button tooltip="some message"
    tooltip-position="below"
    tooltip-delay="1000">Hover Me
</button>

Md2Toast

टोस्ट एक सेवा है, जो दृश्य में सूचनाएं दिखाती है।

एक सरल टोस्ट ध्यान देने योग्य बनाता है और दिखाता है।

import {Md2Toast} from 'md2/toast/toast';

@Component({
 selector: "..."
})

export class ... {

...
constructor(private toast: Md2Toast) { }
toastMe() {
this.toast.show('Toast message...');

---  or  ---

this.toast.show('Toast message...', 1000);
}

...

}

Md2Datepicker

Datepicker उपयोगकर्ता को दिनांक और समय का चयन करने की अनुमति देता है।

<md2-datepicker [(ngModel)]="date"></md2-datepicker>

अधिक जानकारी के लिए यहां देखें

Md2Accordion और Md2Collapse

Md2Collapse : संक्षिप्त करना एक निर्देश है, यह उपयोगकर्ता को अनुभाग की दृश्यता को टॉगल करने की अनुमति देता है।

उदाहरण

एक पतन के बाद मार्कअप होगा।

<div [collapse]="isCollapsed">
  Lorum Ipsum Content
</div>

Md2Accordion : अकॉर्डियन यह उपयोगकर्ता को कई सेक्शनों की विज़िबिलिटी को टॉगल करने की अनुमति देता है।

उदाहरण

एक समझौते में निम्नलिखित मार्कअप होगा।

<md2-accordion [multiple]="multiple">
  <md2-accordion-tab *ngFor="let tab of accordions" 
                     [header]="tab.title" 
                     [active]="tab.active" 
                     [disabled]="tab.disabled">
    {{tab.content}}
  </md2-accordion-tab>
  <md2-accordion-tab>
    <md2-accordion-header>Custom Header</md2-accordion-header>
    test content
  </md2-accordion-tab>
</md2-accordion>