finanzen/various/mazer-main/dist/form-element-select.html
2022-04-28 09:40:10 +02:00

685 lines
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select - Mazer Admin Dashboard</title>
<!-- Include Choices CSS -->
<link rel="stylesheet" href="assets/vendors/choices.js/choices.min.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header">
<div class="d-flex justify-content-between">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" srcset=""></a>
</div>
<div class="toggler">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item active">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li class="sidebar-item ">
<a href="table-datatable.html" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatable</span>
</a>
</li>
<li class="sidebar-title">Extra UI</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donate" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
<button class="sidebar-toggler btn x"><i data-feather="x"></i></button>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Select</h3>
<p class="text-subtitle text-muted">Customize the native &laquo;select&raquo; with custom
CSS that
changes the elements initial appearance..</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Select</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="bootstrap-select">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Bootstrap Select</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-4">
<h6>Basic Select</h6>
<p>Use <code>.form-select</code> class for basic select control.</p>
<fieldset class="form-group">
<select class="form-select" id="basicSelect">
<option>IT</option>
<option>Blade Runner</option>
<option>Thor Ragnarok</option>
</select>
</fieldset>
</div>
<div class="col-md-6 mb-4">
<h6>Disabled Select</h6>
<p>Use <code>disabled</code> attribute for disabled select control.</p>
<fieldset class="form-group">
<select class="form-select" disabled="disabled" id="disabledSelect">
<option>Green</option>
<option>Red</option>
<option>Blue</option>
</select>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap Select end -->
<!-- Input Group Select start -->
<section class="input-group-select">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Group Select</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-4">
<h6>Basic Select with Input Group</h6>
<div class="input-group mb-3">
<label class="input-group-text"
for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Input group append</h6>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text"
for="inputGroupSelect01">Options</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap Select end -->
<!-- Basic choices start -->
<section class="basic-choices">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Choices</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="alert alert-light-primary">
<a href="https://choices.org/getting-started/installation"
target="_blank">Click
here</a> for more information
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Basic Choices</h6>
<p>Use <code>.choices</code> class for basic choices control.</p>
<div class="form-group">
<select class="choices form-select">
<option value="square">Square</option>
<option value="rectangle">Rectangle</option>
<option value="rombo">Rombo</option>
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="traible">Triangle</option>
<option value="polygon">Polygon</option>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Single Select with Label</h6>
<p>Use <code>optgroup</code> attribute for basic choices with Label
control.</p>
<div class="form-group">
<select class="choices form-select">
<optgroup label="Figures">
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="triangle">Triangle</option>
<option value="polygon">Polygon</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic choices end -->
<!-- Multiple choices start -->
<section class="multiple-choices">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple choices</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-4">
<h6>Basic Multiple choices</h6>
<p>Use <code>.choices</code> class for basic choices control. Use
<code>multiple="multiple"</code>
attribute for multiple select box.
</p>
<div class="form-group">
<select class="choices form-select" multiple="multiple">
<option value="square">Square</option>
<option value="rectangle" selected>Rectangle</option>
<option value="rombo">Rombo</option>
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="traible" selected>Triangle</option>
<option value="polygon">Polygon</option>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Multiple Select with Label</h6>
<p>Use <code>optgroup</code> attribute for multiple select box with
Label control.
</p>
<div class="form-group">
<select class="choices form-select" multiple="multiple">
<optgroup label="Figures">
<option value="romboid">Romboid</option>
<option value="trapeze" selected>Trapeze</option>
<option value="triangle">Triangle</option>
<option value="polygon">Polygon</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue" selected>Blue</option>
<option value="purple">Purple</option>
</optgroup>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Multiple Select with Remove Button</h6>
<p>Use <code>.multiple-remove</code> attribute for multiple select box
with remove
button.</p>
<div class="form-group">
<select class="choices form-select multiple-remove"
multiple="multiple">
<optgroup label="Figures">
<option value="romboid">Romboid</option>
<option value="trapeze" selected>Trapeze</option>
<option value="triangle">Triangle</option>
<option value="polygon">Polygon</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue" selected>Blue</option>
<option value="purple">Purple</option>
</optgroup>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>choices with Light Background Options</h6>
<p>Use <code>.select-light-{colorName}</code> class for light background
to selected
Options.</p>
<div class="form-group">
<select class="choices form-select select-light-danger"
multiple="multiple">
<option value="square">Square</option>
<option value="rectangle" selected>Rectangle</option>
<option value="rombo">Rombo</option>
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="traible" selected>Triangle</option>
<option value="polygon">Polygon</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Multiple choices end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="http://ahmadsaugi.com">A. Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Include Choices JavaScript -->
<script src="assets/vendors/choices.js/choices.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>