Styleguide

Dropdowns

Ein normales Dropdown mit jedem Element manuell hinzugefügt

Löschen Originalbeleg laden Originalbeleg hochladen

	<span ng-controller="GlobalController as global">
	<dvm-dropdown>
		<dvm-dropdown-container>
			<dvm-dropdown-item on-click="global.clickDelete()">
				<dvm-icon icon-name="trash"></dvm-icon>Löschen
			</dvm-dropdown-item>
			<dvm-dropdown-item on-click="global.clickLoad()">
				<dvm-icon icon-name="download"></dvm-icon>Originalbeleg laden
			</dvm-dropdown-item>
			<dvm-dropdown-item disabled="true" last="true" on-click="global.clickLoad()">
				<dvm-icon icon-name="upload"></dvm-icon>Originalbeleg hochladen
			</dvm-dropdown-item>
		</dvm-dropdown-container>
	</dvm-dropdown></span>

Ein breites Dropdown mit manuellen Elementen

Löschen Originalbeleg laden Originalbeleg hochladen

	<span ng-controller="GlobalController as global">
	<dvm-dropdown wide="true">
		<dvm-dropdown-container>
			<dvm-dropdown-item on-click="global.clickDelete()">
				<dvm-icon icon-name="trash"></dvm-icon>Löschen
			</dvm-dropdown-item>
			<dvm-dropdown-item on-click="global.clickLoad()">
				<dvm-icon icon-name="download"></dvm-icon>Originalbeleg laden
			</dvm-dropdown-item>
			<dvm-dropdown-item disabled="true" last="true" on-click="global.clickLoad()">
				<dvm-icon icon-name="upload"></dvm-icon>Originalbeleg hochladen
			</dvm-dropdown-item>
		</dvm-dropdown-container>
	</dvm-dropdown></span>

Ein Dropdown mit Elementen aus einem Array

Der Code für die Items könnte so aussehen:

  this.dropdownItems = [
    { text: "Löschen", icon: "trash", disabled: false, clickEvent: this.clickDelete },
    { text: "Download", icon: "download", disabled: false, clickEvent: this.clickLoad }
  ];

Mögliche Properties sind:

  • Text - Der Text im Menü
  • Icon - Der Name eines Icons, aus der DVM Icon Komponente
  • Disabled - Flag ob der Eintrag disabled ist
  • Click Event - Eine Funktion, die aufgerufen wird, wenn der Eintrag geklickt wird
  
  <span ng-controller="GlobalController as global">
    <dvm-dropdown items="global.dropdownItems"></dvm-dropdown>
  </span>