...
LUX designÂ
Static
Interactive
...
Html macro | ||
---|---|---|
| ||
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism-coy.min.css"> <div class="card"> <div class="card-header">Radio Button</div> <div class="card-body"> <form> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label> <div class="col-lg-4"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input"> |
...
<label class="custom-control-label" for="customRadioInline1"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked> |
...
<label class="custom-control-label" for="customRadioInline2"></label>
|
...
language | xml |
---|---|
title | Code |
linenumbers | true |
collapse | true |
...
</div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input"> <label class="custom-control-label" for="customRadioInline1"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked> <label class="custom-control-label" for="customRadioInline2"></label> </ |
...
Html macro | ||
---|---|---|
| ||
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> <div class="card"> <div class="card-header">Radio Button</div> <div class="card-body"> <form> <div class="form-group row"> <label for="inputKey" class="col-lg-3 col-form-label">Regular</label> div></script></code></pre> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label> <div class="col-lg-4"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline3" name="customRadioInlineB" class="custom-control-input" disabled> <label class="custom-control-label" for="customRadioInline3"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline4" name="customRadioInlineB" class="custom-control-input" disabled checked> <label class="custom-control-label" for="customRadioInline4"></label> </div> </div> <div class="col-lg-96"> <pre <div class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1customRadioInline3" name="customRadioInlineAcustomRadioInlineB" class="custom-control-input"> disabled> <label class="custom-control-label" for="customRadioInline1customRadioInline3"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2customRadioInline4" name="customRadioInlineAcustomRadioInlineB" class="custom-control-input" disabled checked> <label class="custom-control-label" for="customRadioInline2customRadioInline4"></label> </div> </div> </div> /div></script></code></pre> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-32 col-form-label col-form-label-sm">Disabled<>Error</label> <div class="col-lg-94"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline3customRadioInline5" name="customRadioInlineBcustomRadioInlineC" class="custom-control-input" disabled> is-invalid"> <label class="custom-control-label" for="customRadioInline3customRadioInline5"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline4customRadioInline6" name="customRadioInlineBcustomRadioInlineC" class="custom-control-input is-invalid" disabled checked> <label class="custom-control-label" for="customRadioInline4customRadioInline6"></label> </div> </div> </div> </div> <div class="form-group rowcol-lg-6"> <label for="inputKey" <pre class="col-lg-3 col-form-label">Error</label> <div class="col-lg-9"> <div language-html"><code><script type="prism-html-markup"><div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline5" name="customRadioInlineC" class="custom-control-input is-invalid"> <label class="custom-control-label" for="customRadioInline5"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline6" name="customRadioInlineC" class="custom-control-input is-invalid" checked> <label class="custom-control-label" for="customRadioInline6"></label> </div> </div> </div> </form> </div> /div></script></code></pre> </div> </div> </form> </div> </div> |
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<div class="form-group row"> <label for="inputKey" class="col-lg-3 col-form-label">Regular</label> <div class="col-lg-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input"> <label class="custom-control-label" for="customRadioInline1"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked> <label class="custom-control-label" for="customRadioInline2"></label> </div> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-3 col-form-label">Disabled</label> <div class="col-lg-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline3" name="customRadioInlineB" class="custom-control-input" disabled> <label class="custom-control-label" for="customRadioInline3"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline4" name="customRadioInlineB" class="custom-control-input" disabled checked> <label class="custom-control-label" for="customRadioInline4"></label> </div> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-3 col-form-label">Error</label> <div class="col-lg-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline5" name="customRadioInlineC" class="custom-control-input is-invalid"> <label class="custom-control-label" for="customRadioInline5"></label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline6" name="customRadioInlineC" class="custom-control-input is-invalid" checked> <label class="custom-control-label" for="customRadioInline6"></label> </div> </div> </div> |
...