joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
207 lines (178 loc) • 9.51 kB
HTML
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha256-djO3wMl9GeaC/u6K+ic4Uj/LKhRUSlUFcsruzS7v5ms=" crossorigin="anonymous">
<link href="_media/css/joomla-alert.min.css" rel="stylesheet">
<link href="_media/css/joomla-collapse.min.css" rel="stylesheet">
<link href="_media/css/joomla-dropdown.min.css" rel="stylesheet">
<link href="_media/css/joomla-modal.min.css" rel="stylesheet">
<link href="_media/css/joomla-panels.min.css" rel="stylesheet">
<link href="_media/css/joomla-tab.min.css" rel="stylesheet">
<link href="_media/css/joomla-tip.min.css" rel="stylesheet">
<script type="module" src="_media/js/joomla-alert.min.js"></script>
<script type="module" src="_media/js/joomla-collapse.min.js"></script>
<script type="module" src="_media/js/joomla-dropdown.min.js"></script>
<script type="module" src="_media/js/joomla-panels.min.js"></script>
<script type="module" src="_media/js/joomla-tab.min.js"></script>
<script type="module" src="_media/js/joomla-tip.min.js"></script>
<script type="module" src="_media/js/joomla-modal.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<joomla-alert>No params passed</joomla-alert>
<joomla-alert type="info" dismiss>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</joomla-alert>
<joomla-alert type="success" dismiss>
<strong>Well done!</strong> You successfully read this important alert message.
</joomla-alert>
<joomla-alert type="warning" dismiss auto-dismiss="10000">
<strong>Warning!</strong> This one will self distruct in 10secs.
</joomla-alert>
<joomla-alert type="danger" href="https://www.joomla.org/">
<strong>Oh snap!</strong> Click open to go to joomla.org
</joomla-alert>
<hr>
<h2>Collapse</h2>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false"
aria-controls="collapseExample">
Button with data-target
</button>
</p>
<joomla-collapse id="collapseExample" state="closed">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</joomla-collapse>
<hr>
<h2>Dropdown</h2>
<div class="joomla-dropdown-container">
<button class="btn btn-secondary" id="dropdownMenuButton">
Dropdown button
</button>
<joomla-dropdown for="#dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</joomla-dropdown>
</div>
<hr>
<h2>Modal</h2>
<button type="button" class="btn btn-primary" data-href="#exampleModal">Launch demo modal</button>
<joomla-modal id="exampleModal" title="Modal title" close-button-title="Close" width="100%" height="400px" iframe="https://www.joomla.org">
<section>
<h4>I'm a Modal</h4>
</section>
<footer>
<button class="btn btn-danger" data-dismiss>Close</button>
<button class="btn btn-primary">Save changes</button>
</footer>
</joomla-modal>
<hr>
<h2>Panels as accordion</h2>
<joomla-panels view="accordion">
<section id="panel1" name="Tab panel 1">
<h3>Tab panel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
<section id="panel2" name="Tab panel 2">
<h3>Tab panel 2</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="panel3" name="Tab panel 3">
<h3>Tab panel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
</joomla-panels>
<hr>
<h2>Panels as tabs</h2>
<joomla-panels>
<section id="panel1" name="Tab panel 1">
<h3>Tab panel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
<section id="panel2" name="Tab panel 2">
<h3>Tab panel 2</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="panel3" name="Tab panel 3">
<h3>Tab panel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
</joomla-panels>
<hr>
<h2>Panels as tabs with nested tabs</h2>
<joomla-panels responsive="true">
<section id="panel1" name="Tab panel 1">
<h3>Tab panel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
<section id="panel2" name="Tab panel 2">
<h3>Tab panel 2</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="panel3" name="Tab panel 3">
<joomla-panels responsive="true">
<section id="nested1" name="Nested tab panel 1">
<h3>Tab panel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
<section id="nested2" name="Nested tab panel 2">
<h3>Tab panel 2</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="nested3" name="Nested tab panel 3">
<h3>Tab panel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
</joomla-panels>
</section>
</joomla-panels>
<hr>
<h2>Tooltip</h2>
<joomla-tip label="more info" tip="This clarifies whatever needs clarifying" text="i" position="bottom">
</joomla-tip>
<hr>
<joomla-tip label="more info" tip="This clarifies whatever needs clarifying" text="i" position="right">
</joomla-tip>
<hr>
<joomla-tip label="more info" tip="This clarifies whatever needs clarifying" text="i" position="left">
</joomla-tip>
<hr>
<joomla-tip label="more info" tip="This clarifies whatever needs clarifying" text="i" position="top">
</joomla-tip>
<hr>
</div>
</body>
</html>