AdminLTE Cheatsheet: Difference between revisions
From Convention Master Documentation
(Add Simple Card) |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
==Style Guides== | |||
==Buttons== | |||
===Anchor Tag button=== | |||
<source lang="html"> | |||
<a href="index.php?file=modules/event_setup/manage_printers.inc.php" class="btn btn-secondary text-white text-decoration-none"> | |||
Cancel | |||
</a> | |||
</source> | |||
==Simple Card== | ==Simple Card== | ||
[[File:SimpleCardLayout.png|thumb|alt=Simple Card Layout]] | |||
<source lang="html"> | <source lang="html"> | ||
<div class="card card-primary"> | <div class="card card-primary"> | ||
| Line 7: | Line 19: | ||
<div class="card-body"> | <div class="card-body"> | ||
Content Goes here | Content Goes here | ||
</div> | |||
<div class="card-footer"> | |||
<div class="float-right"> | |||
<button class="btn btn-secondary"> | |||
Cancel | |||
</button> | |||
<button type="submit" name="mode" value="Save" class="btn btn-primary"> | |||
Save | |||
</button> | |||
</div> | |||
<button type="button" class="btn btn-outline-danger" id="deletePoolBtn"> | |||
Delete Pool | |||
</button> | |||
</div> | </div> | ||
</div> | </div> | ||
</source> | </source> | ||
== Form | == Form Groups == | ||
Each form group should be for one element or element group | |||
===Text Input Full Width === | |||
A form group for a input field which has | |||
<pre> | |||
Label | |||
[inputbox] | |||
</pre> | |||
<source lang="html"> | |||
<div class="form-group"> | |||
<label for="printer_pools_pool_name">Pool Name</label> | |||
<input type="text" | |||
id="printer_pools_pool_name" | |||
name="printer_pools_pool_name" | |||
class="form-control" | |||
value="<?php print $data['printer_pools_pool_name']; ?>" | |||
title="What is the named used to reference this printer pool"> | |||
</div> | |||
</source> | |||
=== Checkbox List === | |||
<pre> | |||
Label | |||
[ ] Checkbox One | |||
[X] Checkbox two | |||
</pre> | |||
<source lang="html"> | |||
<div class="form-group"> | |||
<label>Access</label> | |||
<!-- Kiosk Access --> | |||
<div class="form-check"> | |||
<input type="checkbox" | |||
id="printer_pools_kiosk_access" | |||
name="printer_pools_kiosk_access" | |||
value="Y" | |||
<?php print $kisosk_access_checked; ?>> | |||
<label for="printer_pools_kiosk_access">Usable by customer kiosks</label> | |||
</div> | |||
<!-- Cashier Access --> | |||
<div class="form-check"> | |||
<input type="checkbox" | |||
id="printer_pools_cashier_access" | |||
name="printer_pools_cashier_access" | |||
value="Y" | |||
<?php print $cash_access_checked; ?>> | |||
<label for="printer_pools_cashier_access">Usable by cashiers</label> | |||
</div> | |||
</div> | |||
</source> | |||
Latest revision as of 23:52, 3 December 2025
Style Guides
Buttons
Anchor Tag button
<a href="index.php?file=modules/event_setup/manage_printers.inc.php" class="btn btn-secondary text-white text-decoration-none">
Cancel
</a>
Simple Card
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title text-white"><i class="fas fa-print"></i>Edit Printer Pool</h3>
</div>
<div class="card-body">
Content Goes here
</div>
<div class="card-footer">
<div class="float-right">
<button class="btn btn-secondary">
Cancel
</button>
<button type="submit" name="mode" value="Save" class="btn btn-primary">
Save
</button>
</div>
<button type="button" class="btn btn-outline-danger" id="deletePoolBtn">
Delete Pool
</button>
</div>
</div>
Form Groups
Each form group should be for one element or element group
Text Input Full Width
A form group for a input field which has
Label [inputbox]
<div class="form-group">
<label for="printer_pools_pool_name">Pool Name</label>
<input type="text"
id="printer_pools_pool_name"
name="printer_pools_pool_name"
class="form-control"
value="<?php print $data['printer_pools_pool_name']; ?>"
title="What is the named used to reference this printer pool">
</div>
Checkbox List
Label [ ] Checkbox One [X] Checkbox two
<div class="form-group">
<label>Access</label>
<!-- Kiosk Access -->
<div class="form-check">
<input type="checkbox"
id="printer_pools_kiosk_access"
name="printer_pools_kiosk_access"
value="Y"
<?php print $kisosk_access_checked; ?>>
<label for="printer_pools_kiosk_access">Usable by customer kiosks</label>
</div>
<!-- Cashier Access -->
<div class="form-check">
<input type="checkbox"
id="printer_pools_cashier_access"
name="printer_pools_cashier_access"
value="Y"
<?php print $cash_access_checked; ?>>
<label for="printer_pools_cashier_access">Usable by cashiers</label>
</div>
</div>
