mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
<div class="settings">
|
|
|
|
<a href="#" class="btn btn-icon btn-lg settings-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
|
|
{% include "ui/icon.html" icon="settings" %}
|
|
</a>
|
|
|
|
|
|
<form class="offcanvas offcanvas-end offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
|
|
<div class="offcanvas-header">
|
|
<h2 class="offcanvas-title">Theme Builder</h2>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<div class="mb-4">
|
|
<label class="form-label">Color scheme</label>
|
|
<p class="form-hint">The perfect color mode for your app.</p>
|
|
|
|
<div class="row g-2">
|
|
{% assign schemes = 'light,mixed,colored,dark,transparent' | split: ',' %}
|
|
{% for scheme in schemes %}
|
|
<div class="col-6">
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="settings-theme" value="{{ scheme }}" class="form-selectgroup-input" />
|
|
<div class="form-selectgroup-label text-center">
|
|
<span class="form-selectgroup-check form-selectgroup-check-floated"></span>
|
|
<div class="settings-scheme settings-scheme-{{ scheme }}"></div>
|
|
<div>{{ scheme | capitalize }}</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="form-label">Menu position</div>
|
|
<p class="form-hint">Toggle the position of the menu.</p>
|
|
|
|
<div>
|
|
{% assign positions = 'top,top-condensed,top-overlap,combo,left,right' | split: ',' %}
|
|
{% for position in positions %}
|
|
<label class="form-check">
|
|
<input class="form-check-input" name="settings-menu-position" value="{{ position }}" type="radio" />
|
|
<span class="form-check-label">{{ position | capitalize }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="form-label">Menu behavior</div>
|
|
<p class="form-hint">Change the behavior of the menu.</p>
|
|
|
|
<div>
|
|
{% assign behaviors = 'sticky,fixed,compact' | split: ',' %}
|
|
{% for behavior in behaviors %}
|
|
<label class="form-check">
|
|
<input class="form-check-input" name="settings-menu-behavior" value="{{ behavior }}" type="radio" />
|
|
<span class="form-check-label">{{ behavior | capitalize }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="form-label">Layout</div>
|
|
<p class="form-hint">Toggle container layout system.</p>
|
|
|
|
<div>
|
|
{% assign systems = 'boxed,fluid' | split: ',' %}
|
|
{% for system in systems %}
|
|
<label class="form-check">
|
|
<input class="form-check-input" name="settings-container-layout" value="{{ system }}" type="radio" />
|
|
<span class="form-check-label">{{ system | capitalize }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="offcanvas-footer">
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
{% include "ui/icon.html" icon="settings" %}
|
|
Save settings
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div> |