Add a working checkbox list doc code example to october website (#4600)

This commit is contained in:
Samuel Georges 2019-09-21 10:07:01 +10:00 committed by GitHub
parent e2f23eb184
commit 99db7132e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 0 deletions

View File

@ -9,6 +9,44 @@ Allows a user to select from a small set of binary options.
<label for="checkbox1">Checkbox</label>
</div>
### Checkbox lists
Allows a user to select from a list of binary options.
<div class="form-group checkboxlist-field">
<label>Checkbox list (hard-coded) example</label>
<div class="field-checkboxlist">
<!-- Quick selection (start) -->
<div class="checkboxlist-controls">
<div>
<a href="javascript:;" data-field-checkboxlist-all><i class="icon-check-square"></i> <?= e(trans('backend::lang.form.select_all')) ?></a>
</div>
<div>
<a href="javascript:;" data-field-checkboxlist-none><i class="icon-eraser"></i> <?= e(trans('backend::lang.form.select_none')) ?></a>
</div>
</div>
<!-- Quick selection (end) -->
<div class="field-checkboxlist-container">
<p class="help-block before-field">What cars would you like in your garage?</p>
<div class="checkbox custom-checkbox" tabindex="0">
<input id="checkbox-example1" name="checkbox" value="1" type="checkbox" checked="checked" aria-checked="true" />
<label for="checkbox-example1"> Dodge Viper </label>
<p class="help-block">Do not send new comment notifications.</p>
</div>
<div class="checkbox custom-checkbox" tabindex="0">
<input id="checkbox-example2" name="checkbox" value="2" type="checkbox" aria-checked="false" />
<label for="checkbox-example2"> GM Corvette </label>
<p class="help-block">Send new comment notifications only to post author.</p>
</div>
<div class="checkbox custom-checkbox" tabindex="0">
<input id="checkbox-example3" name="checkbox" value="3" type="checkbox" aria-checked="mixed" />
<label for="checkbox-example3"> Porsche Boxter </label>
<p class="help-block">Notify all users who have permissions to receive blog notifications.</p>
</div>
</div>
</div>
</div>
### Radio
<div class="radio custom-radio">