From fd7fcafb4251d1ed7f50ad041b8ff3acd5022129 Mon Sep 17 00:00:00 2001 From: Sean Madsen <sean@seanmadsen.com> Date: Fri, 11 Aug 2017 23:38:02 -0600 Subject: [PATCH] Auto-import "Buttons" wiki page https://wiki.civicrm.org/confluence/display/CRMDOC/Buttons --- docs/framework/ui.md | 63 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/docs/framework/ui.md b/docs/framework/ui.md index 1945270e..a85b650a 100644 --- a/docs/framework/ui.md +++ b/docs/framework/ui.md @@ -94,3 +94,66 @@ loading accordions on page load): </div> </div> + + +# Buttons + +Buttons initiate an immediate action. + +If you need to offer two opposing functions, such as Edit and Save, +consider using two separate buttons instead of one dual-purpose button +that changes state. + +CiviCRM provides a pre-themed button element, to be used for buttons +throughout the system. Button elements may contain any of the optional +icons provided by CiviCRM. + +The code to create a button **with** an icon: + +<div class="code panel" style="border-width: 1px;"> + +<div class="codeContent panelContent"> + + <a class="button_name button" href="#"> + <span> + <div class="icon icon_name-icon"></div> + Button Text + </span> + </a> + +</div> + +</div> + +The code to create a button **without** an icon: + +<div class="code panel" style="border-width: 1px;"> + +<div class="codeContent panelContent"> + + <a class="button_name button" href="#"> + <span> + Button Text + </span> + </a> + +</div> + +</div> + +an example using the "Edit" button from the Contact View page : + +<div class="code panel" style="border-width: 1px;"> + +<div class="codeContent panelContent"> + + <a title="Edit" class="edit button" href="#"> + <span> + <div class="icon edit-icon"></div> + Edit + </span> + </a> + +</div> + +</div> -- GitLab