cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<rml>
<head>
	<title>Spatial navigation 01</title>
	<link type="text/rcss" href="../style.rcss"/>
	<link rel="help" href="https://www.w3.org/TR/css-ui-4/#keyboard" />
	<link rel="navigation" href="https://drafts.csswg.org/css-nav-1/" />
	<meta name="Description" content="Keyboard navigation. Click on test document to enable navigation." />
	<style>
		body { nav: auto; }
		body button {
			padding: 5dp;
			border: 1dp #333;
			background: #aaa;
			margin: 10dp 10dp;
			display: block;
			nav-down: auto;
			text-align: center;
		}
		body button:hover {
			background: #bbb;
		}
		body:focus button {
			background: #fff;
		}
		body > div {
			display: flow-root;
		}
		.left {
			float: left;
		}
		.right {
			float: right;
		}
		.column {
			width: 50%;
			box-sizing: border-box;
		}
		.box {
			width: 50dp;
			height: 50dp;
			box-sizing: border-box;
			background-color: #aea;
			margin: 10dp;
			border: 5dp #999;
			tab-index: auto;
			nav: auto;

			display: inline-block;
			vertical-align: center;
		}
		.box:focus {
			background-color: #cfc;
		}
		.box:focus-visible {
			border-color: #8df;
		}
		.w2 { width: 120dp; }
		.w3 { width: 190dp; }
		.w4 { width: 260dp; }
		.s1 { margin-left: 80dp; }
		.s2 { margin-left: 150dp; }
	</style>
</head>

<body lock-navigation>
<button>Enable document focus for keyboard navigation</button>
<hr/>
<div>
	<div class="box"/>
	<div class="box"/>
	<div class="box"/>

	<div class="box"/>
	<div class="box"/>
	<div class="box"/>

	<div class="box"/>
	<div class="box"/>
	<div class="box"/>

	<div class="box"/>
	<div class="box"/>
	<div class="box"/>
</div>
<hr/>
<div>
	<div class="column left">
		<div class="box"/>
		<div class="box"/>
		<div class="box"/>

		<div class="box"/>
		<div class="box"/>
		<div class="box"/>

		<div class="box"/>
		<div class="box"/>
		<div class="box"/>
	</div>
	<div class="column right">
		<div class="box"/>
		<div class="box"/>
		<div class="box"/>

		<div class="box"/>
		<div class="box"/>
		<div class="box"/>

		<div class="box"/>
		<div class="box"/>
		<div class="box"/>
	</div>
</div>
<hr/>
<div>
	<div class="box w3"/><div class="box"/><br/>
	<div class="box"/><br/>
	<div class="box"/><div class="box"/><br/>
	<div class="box w2"/><div class="box w2"/><br/>
</div>
<hr/>
<div>
	<div class="box w3"/><br/>
	<div class="box"/><div class="box"/><div class="box"/><br/>
	<div class="box"/><div class="box"/><br/>
</div>
<hr/>
<div>
	<div class="box w3"/><br/>
	<div class="box"/><div class="box s1"/><br/>
	<div class="box"/><div class="box"/><br/>
</div>
<hr/>
<div>
	<div class="box s1"/><br/>
	<div class="box"/><div class="box s1"/><br/>
	<div class="box"/><div class="box"/><br/>
</div>
<hr/>
<div>
	<div class="column left">
		<div class="box w3"/><br/>
		<div class="box"/><br/>
		<div class="box"/><div class="box"/><div class="box"/><br/>
		<div class="box w2"/><br/>
	</div>
	<div class="column right">
		<div class="box w3"/><br/>
		<div class="box"/><br/>
		<div class="box"/><div class="box"/><div class="box"/><br/>
		<div class="box w2"/><br/>
	</div>
</div>
<hr/>
<div>
	<div class="box w3"/><div class="box w3"/><br/>
	<div class="box"/><div class="box s2"/><br/>
	<div class="box"/><div class="box"/><div class="box"/><div class="box"/><div class="box"/><div class="box"/><br/>
	<div class="box w2"/><div class="box w2 s1"/><br/>
</div>
<handle size_target="#document"/>
</body>
</rml>