uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
437 lines (346 loc) • 23.4 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Position - UIkit tests</title>
<script src="js/test.js"></script>
<style>
/* JavaScript */
#js-boundary {
height: 300px;
outline: 1px solid rgba(0,0,0,0.1);
position: relative;
}
#js-target {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100px;
background: rgba(0,0,0,0.1);
}
#js-element {
position: absolute;
width: 75px;
height: 75px;
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="uk-container">
<h1>Position</h1>
<div class="uk-position-relative">
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-left">Top Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-center">Top Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-right">Top Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-left">Center Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center">Center Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-right">Center Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-left">Bottom Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-center">Bottom Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-right">Bottom Right</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top uk-text-center">Top</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom uk-text-center">Bottom</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-left uk-flex uk-flex-middle">Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-right uk-flex uk-flex-middle">Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center">Test if the text uses the available width if centered</div>
</div>
</div>
</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-center-left-out uk-visible@xl">Out Test</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-center-right-out uk-visible@xl">Out Test</div>
</div>
<h2>Small</h2>
<div class="uk-position-relative">
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-left">Top Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-center">Top Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-right">Top Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-left">Center Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center">Center Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-right">Center Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-left">Bottom Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-center">Bottom Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-right">Bottom Right</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top uk-text-center">Top</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom uk-text-center">Bottom</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-left uk-flex uk-flex-middle">Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-right uk-flex uk-flex-middle">Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center">
<div class="uk-width-xlarge">Test if the overlay does not succeed the container width and position margin is taken into account.</div>
</div>
</div>
</div>
</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-small uk-position-center-left-out uk-visible@xl">Out</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-small uk-position-center-right-out uk-visible@xl">Out</div>
</div>
<h2>Medium</h2>
<div class="uk-position-relative">
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-left">Top Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-center">Top Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-right">Top Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-left">Center Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center">Center Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-right">Center Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-left">Bottom Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-center">Bottom Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-right">Bottom Right</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top uk-text-center">Top</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom uk-text-center">Bottom</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-left uk-flex uk-flex-middle">Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-right uk-flex uk-flex-middle">Right</div>
</div>
</div>
</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-medium uk-position-center-left-out uk-visible@xl">Out</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-medium uk-position-center-right-out uk-visible@xl">Out</div>
</div>
<h2>Large</h2>
<div class="uk-position-relative">
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-left">Top Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-center">Top Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-right">Top Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-left">Center Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center">Center Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-right">Center Right</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-left">Bottom Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-center">Bottom Center</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-right">Bottom Right</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top uk-text-center">Top</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom uk-text-center">Bottom</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-left uk-flex uk-flex-middle">Left</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-right uk-flex uk-flex-middle">Right</div>
</div>
</div>
</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-large uk-position-center-left-out uk-visible@xl">Out</div>
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-large uk-position-center-right-out uk-visible@xl">Out</div>
</div>
<h2>Center Horizontal and Vertical</h2>
<div class="uk-child-width-1-4@s" uk-grid>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-horizontal uk-text-center">Horizontal</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-vertical uk-text-center">Vertical</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-horizontal uk-text-center">Horizontal</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-vertical uk-text-center">Vertical</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-horizontal uk-text-center">Horizontal</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-vertical uk-text-center">Vertical</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-horizontal uk-text-center">Horizontal</div>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-vertical uk-text-center">Vertical</div>
</div>
</div>
</div>
<h2>Cover</h2>
<div class="uk-child-width-1-4@s" uk-grid>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
</div>
</div>
<div>
<div class="uk-inline">
<a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
</div>
</div>
</div>
<h2>JavaScript</h2>
<div id="js-boundary" class="uk-margin">
<div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
</div>
<div id="js-element"></div>
<div class="uk-grid uk-child-width-auto uk-form-stacked" style="margin-bottom: 100vh">
<div>
<div class="uk-margin">
<span class="uk-form-label">Element</span>
<label>
Horizontal
<select id="js-element_x" class="uk-select uk-form-small uk-form-width-xsmall">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
</label>
<label>
Vertical
<select id="js-element_y" class="uk-select uk-form-small uk-form-width-xsmall">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</label>
</div>
<div class="uk-margin">
<span class="uk-form-label">Target</span>
<label>
Horizontal
<select id="js-target_x" class="uk-select uk-form-small uk-form-width-xsmall">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
</label>
<label>
Vertical
<select id="js-target_y" class="uk-select uk-form-small uk-form-width-xsmall">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</label>
</div>
</div>
<div>
<div class="uk-margin">
<span class="uk-form-label">Offset</span>
<label>
Horizontal
<input id="js-offset_x" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
</label>
<label>
Vertical
<input id="js-offset_y" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
</label>
</div>
<div class="uk-margin">
<span class="uk-form-label">Placement</span>
<label>
Horizontal
<select id="js-placement_x" class="uk-select uk-form-small uk-form-width-xsmall">
<option value="">None</option>
<option value="flip" selected>Flip</option>
<option value="shift">Shift</option>
</select>
</label>
<label>
Vertical
<select id="js-placement_y" class="uk-select uk-form-small uk-form-width-xsmall">
<option value="">None</option>
<option value="flip" selected>Flip</option>
<option value="shift">Shift</option>
</select>
</label>
</div>
</div>
</div>
</div>
<script>
const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
let boundary = $('#js-boundary');
let element = $('#js-element');
let target = $('#js-target');
let offsetX;
let offsetY;
function position() {
positionAt(
element,
target,
{
boundary,
attach:{
element: [$('#js-element_x').value, $('#js-element_y').value],
target: [$('#js-target_x').value, $('#js-target_y').value]
},
offset: [$('#js-offset_x').value, $('#js-offset_y').value],
placement: [$('#js-placement_x').value, $('#js-placement_y').value]
}
);
}
on(window, 'dragstart', e => {
e.dataTransfer.setDragImage(new Image(), 0, 0);
offsetX = Math.round(e.pageX - offset(target).left);
offsetY = Math.round(e.pageY - offset(target).top);
});
let lastPos;
on(window, 'dragover', e => {
const pos = getEventPos(e);
if (lastPos?.x === pos.x && lastPos?.y === pos.y) {
return;
}
lastPos = pos;
e.preventDefault();
// positions target at mouse cursor
positionAt(
target,
boundary,
{
offset: [e.pageX - offset(boundary).left - offsetX, e.pageY - offset(boundary).top - offsetY]
}
);
// positions element at target
position();
});
on($$('select,input'), 'change', position);
on(window, 'scroll', position, { passive: true });
position();
</script>
</body>
</html>