Added documentation for transclusion of custom trigger element

Author: pkempenaers

src/app/main/main.controller.js

@@ -310,5 +310,14 @@ export default class MainController {
 				return option;
 			},
 		};
+
+		$scope.transclusionModel = [];
+		$scope.transclusionData = [
+			{ id: 1, label: 'David' },
+			{ id: 2, label: 'Jhon' },
+			{ id: 3, label: 'Danny' },
+		];
+		$scope.transclusionSettings = {
+		};
 	}
 }

src/app/main/main.template.html

@@ -973,6 +973,47 @@ <h3>Code</h3>
 	smartButtonTextConverter(skip, option) {
 		return option;
 	},
+};
+					</div>
+				</div>
+			</div>
+		</div>
+		<div uib-accordion-group heading="Custom trigger element using transclusion">
+			<div class="row">
+				<div class="col-xs-12">
+					Example to show that you can replace the button with a custom element
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-xs-12 col-sm-6">
+					<h3>Demo</h3>
+					<div class="well">
+						<div ng-dropdown-multiselect="" options="transclusionData" selected-model="transclusionModel" extra-settings="transclusionSettings">
+							<span class="custom-trigger">My Custom trigger</span>
+						</div>
+					</div>
+				</div>
+				<div class="col-xs-12 col-sm-6">
+					<h3>The model:</h3>
+					<pre>{{transclusionModel|json}}</pre>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-md-12">
+					<h3>Code</h3>
+					<div hljs language="javascript">
+// HTML
+<div ng-dropdown-multiselect="" options="transclusionData" selected-model="transclusionModel" extra-settings="transclusionSettings">
+	<span class="custom-trigger">My Custom trigger</span>
+</div>
+
+$scope.transclusionModel = [];
+$scope.transclusionData = [
+	{ id: 1, label: 'David' },
+	{ id: 2, label: 'Jhon' },
+	{ id: 3, label: 'Danny' },
+];
+$scope.transclusionSettings = {
 };
 					</div>
 				</div>

src/app/main/stylesheet.scss

@@ -395,6 +395,13 @@ footer a:hover {
     	opacity: 0.5;
 		}
 }
+
+.custom-trigger {
+	padding: 0.75em;
+	margin-top: 1.5em;
+	border: 1px solid #ccc;
+	cursor: pointer;
+}
 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
 }