Apply Tabler Action Buttons

Author: nasrulhazim

resources/views/components/actions.blade.php

@@ -1,21 +1,25 @@
-<div class="btn btn-group">
-	{{ $prepend_action or '' }}
-
-	<div class="btn btn-sm btn-default border-primary show-action-btn"
-		data-balloon="{{ __('Details') }}" data-balloon-pos="up" 
-		data-{{ $primary_key or 'hashslug' }}="' + data.{{ $primary_key or 'hashslug' }} + '">
-		<i class="fas fa-eye"></i>
+<div class="text-center">
+	<div class="item-action dropdown">
+	  <a href="javascript:void(0)" data-toggle="dropdown" class="icon" aria-expanded="true">
+	  	<i class="fe fe-more-vertical"></i>
+	  </a>
+	  <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" 
+	  	style="position: absolute; transform: translate3d(-181px, 20px, 0px); top: 0px; left: 0px; will-change: transform;">
+	  	{{ $prepend_action or '' }}
+	    <a class="dropdown-item show-action-btn"
+			data-{{ $primary_key or 'hashslug' }}="' + data.{{ $primary_key or 'hashslug' }} + '">
+			<i class="fe fe-eye"></i> {{ __('Details') }}
+		</a>
+		<a class="dropdown-item edit-action-btn"
+			data-{{ $primary_key or 'hashslug' }}="' + data.{{ $primary_key or 'hashslug' }} + '">
+			<i class="fas fa-edit"></i> {{ __('Edit') }}
+		</a>
+	    <div class="dropdown-divider"></div>
+	    <a class="dropdown-item destroy-action-btn"
+			data-{{ $primary_key or 'hashslug' }}="' + data.{{ $primary_key or 'hashslug' }} + '">
+			<i class="fas fa-trash text-danger"></i> {{ __('Delete') }}
+		</a>
+		{{ $append_action or '' }}
+	  </div>
 	</div>
-	<a class="btn btn-sm btn-primary edit-action-btn"
-		data-balloon="{{ __('Edit') }}" data-balloon-pos="up"
-		data-{{ $primary_key or 'hashslug' }}="' + data.{{ $primary_key or 'hashslug' }} + '">
-		<i class="fas fa-edit text-light"></i>
-	</a>
-	<div class="btn btn-sm btn-danger destroy-action-btn"
-		data-balloon="{{ __('Delete') }}" data-balloon-pos="up"
-		data-{{ $primary_key or 'hashslug' }}="' + data.{{ $primary_key or 'hashslug' }} + '">
-		<i class="fas fa-trash"></i>
-	</div>
-
-	{{ $append_action or '' }}
 </div>