vicowa-web-components
Version:
118 lines (108 loc) • 5.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="vicowa-sidebar example">
<meta name="theme-color" content="red">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ViCoWa Web Components - vicowa-string</title>
<script type="module" src="../../src/vicowa-panel/vicowa-panel.js"></script>
<style>
body {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
--vicowa-panel-header-background: #cccccc;
--vicowa-panel-footer-background: #ffffaa;
--vicowa-panel-main-background: #5fbbbf;
--vicowa-panel-header-height: 40px;
--vicowa-panel-footer-height: 30px;
}
vicowa-panel {
position: relative;
width: 200px;
min-width: 200px;
}
.fixed-height {
position: relative;
height: 400px;
overflow: auto;
}
div[slot="header-content"] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div[slot="footer-content"] {
padding: 0 0 0 5px;
}
</style>
</head>
<body lang="en_US">
<vicowa-panel>
<div slot="header-content">Header</div>
<div slot="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores aspernatur commodi delectus
doloremque ducimus earum, enim eos expedita fuga inventore iure laudantium odit quia quod temporibus ut
voluptatem, voluptatum.</p>
<p>Accusamus aspernatur beatae cumque, deserunt doloremque doloribus error explicabo fugiat hic impedit
laborum magnam minus molestiae nobis nostrum obcaecati quia rem rerum sed sequi similique sint soluta
velit, voluptas voluptates.</p>
<p>Architecto assumenda, consectetur error expedita libero, minus natus nulla, odio perspiciatis placeat
possimus tempora? Culpa dolor eligendi harum iusto labore magnam maiores placeat possimus, quas quo,
quos, sapiente tempore ullam.</p>
<p>Accusamus aliquam, cupiditate, deserunt dignissimos dolorum error inventore, labore minima nostrum nulla
numquam odio quod similique unde voluptatibus. At delectus dolorum harum nihil nulla optio, sunt.
Dolores ea obcaecati sunt!</p>
</div>
<div slot="footer-content">Footer</div>
</vicowa-panel>
<vicowa-panel collapsible>
<div slot="header-content">Collapsible Header</div>
<div slot="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores aspernatur commodi delectus
doloremque ducimus earum, enim eos expedita fuga inventore iure laudantium odit quia quod temporibus ut
voluptatem, voluptatum.</p>
<p>Accusamus aspernatur beatae cumque, deserunt doloremque doloribus error explicabo fugiat hic impedit
laborum magnam minus molestiae nobis nostrum obcaecati quia rem rerum sed sequi similique sint soluta
velit, voluptas voluptates.</p>
<p>Architecto assumenda, consectetur error expedita libero, minus natus nulla, odio perspiciatis placeat
possimus tempora? Culpa dolor eligendi harum iusto labore magnam maiores placeat possimus, quas quo,
quos, sapiente tempore ullam.</p>
<p>Accusamus aliquam, cupiditate, deserunt dignissimos dolorum error inventore, labore minima nostrum nulla
numquam odio quod similique unde voluptatibus. At delectus dolorum harum nihil nulla optio, sunt.
Dolores ea obcaecati sunt!</p>
</div>
<div slot="footer-content">Footer</div>
</vicowa-panel>
<vicowa-panel collapsible>
<div slot="header-content" title="Collapsible Header with fixed content height">Collapsible Header with fixed content height</div>
<div class="fixed-height" slot="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, at consectetur culpa dignissimos
distinctio eaque esse facere, fuga impedit officia omnis possimus quae quasi quis saepe, similique
soluta. Eligendi, similique!</p>
<p>Ab hic id in molestias quis repellat rerum sunt, voluptate. A ab accusantium architecto at autem
blanditiis commodi error excepturi expedita facere iure magnam magni necessitatibus non, odit officia
pariatur.</p>
<p>Debitis ducimus fugit, harum, minus optio possimus quibusdam quo saepe, sed temporibus tenetur voluptate
voluptatem! A, alias ea fugit incidunt molestias nemo placeat quos? Adipisci atque fugit nesciunt quia
sequi!</p>
<p>Aliquam aperiam asperiores at consectetur, deleniti eveniet incidunt ipsam itaque minima nulla odio
perferendis placeat tempora? Adipisci animi architecto distinctio expedita fugiat mollitia nisi,
perferendis, provident repellat soluta veniam, voluptas.</p>
<p>Accusamus ad aliquid ea ex illum labore magni maiores pariatur porro quibusdam sapiente sequi similique
sit, ut vero. Accusantium delectus doloribus est, inventore magni modi non omnis optio quia ullam!</p>
<p>Aliquid aperiam beatae delectus dolores ea enim error exercitationem facilis id, ipsum maxime modi nobis
perferendis quis tenetur, velit voluptatibus! Assumenda atque cum cumque explicabo fugit id possimus
praesentium soluta!</p>
</div>
<div slot="footer-content">Footer</div>
</vicowa-panel>
<script type="module">
</script>
</body>
</html>