WIP: Form components extensions and improvements #94707

Draft
Márton Lente wants to merge 12 commits from component-forms into v2

When changing the target branch, be careful to rebase the branch in your fork to match. See documentation.
Showing only changes of commit d85b976831 - Show all commits

View File

@ -1274,7 +1274,7 @@
<li>Item One</li> <li>Item One</li>
<li>Item Two</li> <li>Item Two</li>
</ul> </ul>
<hr /> <hr>
<p> <p>
Add <code>list-inline</code> for inline layout. Add <code>list-inline</code> for inline layout.
</p> </p>
@ -1638,7 +1638,7 @@
</div> </div>
</div> </div>
<hr /> <hr>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -1671,7 +1671,7 @@
</div> </div>
</div> </div>
<hr /> <hr>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -1681,7 +1681,7 @@
<textarea class="form-control" placeholder="Default Text"></textarea> <textarea class="form-control" placeholder="Default Text"></textarea>
</div> </div>
<hr /> <hr>
<button class="btn btn-success width-half pull-right" type="submit"> <button class="btn btn-success width-half pull-right" type="submit">
<i class="i-send"></i> Send Stuff! <i class="i-send"></i> Send Stuff!
@ -1721,14 +1721,14 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" id="example-radios-1" name="example-radios" type="radio" value="option-1" checked> <input class="form-check-input" id="radios-default-1" name="radios-default" type="radio" value="option-1" checked>
<label class="form-check-label" for="example-radios-1"> <label class="form-check-label" for="radios-default-1">
Default radio 1 Default radio 1
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" id="example-radios-2" name="example-radios" type="radio" value="option-2"> <input class="form-check-input" id="radios-default-2" name="radios-default" type="radio" value="option-2">
<label class="form-check-label" for="example-radios-2"> <label class="form-check-label" for="radios-default-2">
Default radio 2 Default radio 2
</label> </label>
</div> </div>
@ -1754,16 +1754,22 @@
<hr> <hr>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="mb-3">
<label class="me-3">Toggle bar</label>
<label class="toggle-bar"> <label class="toggle-bar">
<input type="checkbox"> <input type="checkbox">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</div>
<div>
<label class="me-3">Toggle bar small</label>
<label class="toggle-bar toggle-bar-sm"> <label class="toggle-bar toggle-bar-sm">
<input type="checkbox"> <input type="checkbox">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</div> </div>
</div> </div>
</div>
<hr class="my-5"> <hr class="my-5">
@ -1789,7 +1795,7 @@
</div> </div>
<hr /> <hr>
</div> <!-- centered container for the page--> </div> <!-- centered container for the page-->
</div> <!-- container-main --> </div> <!-- container-main -->