hippie/source/screens/demo/examples/ui/settings.njk

---
title: Settings
tags:
	- ui
---
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% set bodyClass = "body_setting" %}

{% extends "demo/_app.njk" %}

{% block title %}{{ title }}
{% endblock %}

{% block links %}
	{{ super() }}
	<link 
		href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
		rel="stylesheet">
	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}

{% block head %}
	{{ super() }}
{% endblock %}

{% block body %}
	<div id="frame">
		<header class="io">
			<button title="menu">
				<i class="bi bi-three-dots"></i>
			</button>
			<span class="span_solo">title-bar</span>
			<nav>
				<div class="spacer-a"></div>
				<button title="minimize">
					<i class="bi bi-dash"></i>
				</button>
				<button title="maximize">
					<i class="bi bi-fullscreen"></i>
				</button>
				<button title="close">
					<i class="bi bi-x-square"></i>
				</button>
			</nav>
		</header>
		<main class="io">
			<aside class="io">
				options
				<nav>
					<ul>
						<li>setting</li>
						<li>text</li>
					</ul>
					<hr>
					<ul>
						<li>
							<label for="">label</label>
						</li>
						<li>
							<button>button</button>
						</li>
					</ul>
				</nav>
			</aside>
			<section>
				<header class="io">
					<nav>
						<button title="search">
							<i class="bi bi-search"></i>
						</button>
						<div class="spacer-b"></div>
						<button title="cut">
							<i class="bi bi-scissors"></i>
						</button>
						<button title="copy">
							<i class="bi bi-copy"></i>
						</button>
						<button title="paste">
							<i class="bi bi-clipboard-check-fill"></i>
						</button>
					</nav>
					<hr class="vertical">
					<nav>
						<ul>
							<li>
								<button title="collapse">
									<i class="bi bi-arrows-collapse"></i>
								</button>
							</li>
							<li>
								<button title="expand">
									<i class="bi bi-arrows-expand-vertical"></i>
								</button>
							</li>
						</ul>
					</nav>
					<span class="span_solo">section-bar</span>
				</header>
				section</section>
		</main>
		<footer class="io">
			<span class="span_solo">state</span>
			<div class="spacer-a"></div>
			<button>action</button>
		</footer>
	</div>
{% endblock %}

{%- block script %}
	{{ super() }}
	<script src="{{ pageBase }}js/app.js"></script>
	<script></script>
{% endblock %}