Hijlkema.Codes/z-elements
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Activity

initial commit

Browse Source 
Signed-off-by: Mitch Hijlkema <mitch@hijlkema.codes>
This commit is contained in:
Mitch Hijlkema
2023-08-24 14:04:43 +02:00
parent 844188ee58
commit a6d98a9d84
42 changed files with 8124 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
libs/accordion/index.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit + TS</title>
<!-- the props -->
<link rel="stylesheet" href="https://unpkg.com/open-props" />
<!-- optional imports that use the props -->
<link
rel="stylesheet"
href="https://unpkg.com/open-props/normalize.min.css"
/>
<script type="module" src="/src/lib/accordion.component.ts"></script>
<script type="module" src="/src/lib/accordion-group.component.ts"></script>
</head>
<body>
<z-accordion
accordion-title="This is lorem ipsum."
icon-type="plus-to-cross"
>
Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute. Minim
cupidatat cillum aute esse ea culpa proident enim consectetur in ullamco
mollit labore id. Ipsum adipisicing esse ex irure ut nostrud adipisicing
velit nulla ullamco dolor consequat. Occaecat sint veniam quis aliquip.
Aliquip elit commodo labore sit non nostrud dolore aute officia sint
cillum ullamco veniam dolore. Et tempor aliquip elit amet adipisicing
esse.
</z-accordion>
<hr />
<z-accordion>
<h3 slot="header">This is lorem ipsum from a slot.</h3>
Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute. Minim
cupidatat cillum aute esse ea culpa proident enim consectetur in ullamco
mollit labore id. Ipsum adipisicing esse ex irure ut nostrud adipisicing
velit nulla ullamco dolor consequat. Occaecat sint veniam quis aliquip.
Aliquip elit commodo labore sit non nostrud dolore aute officia sint
cillum ullamco veniam dolore. Et tempor aliquip elit amet adipisicing
esse.
</z-accordion>
<hr />
<z-accordion.group>
<z-accordion
accordion-title="This is lorem ipsum."
icon-type="plus-to-cross"
>
Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute.
Minim cupidatat cillum aute esse ea culpa proident enim consectetur in
ullamco mollit labore id. Ipsum adipisicing esse ex irure ut nostrud
adipisicing velit nulla ullamco dolor consequat. Occaecat sint veniam
quis aliquip. Aliquip elit commodo labore sit non nostrud dolore aute
officia sint cillum ullamco veniam dolore. Et tempor aliquip elit amet
adipisicing esse.
</z-accordion>
<hr />
<z-accordion>
<h3 slot="header">This is lorem ipsum from a slot.</h3>
Mollit eu excepteur ex ea magna id nostrud duis aliqua cillum aute.
Minim cupidatat cillum aute esse ea culpa proident enim consectetur in
ullamco mollit labore id. Ipsum adipisicing esse ex irure ut nostrud
adipisicing velit nulla ullamco dolor consequat. Occaecat sint veniam
quis aliquip. Aliquip elit commodo labore sit non nostrud dolore aute
officia sint cillum ullamco veniam dolore. Et tempor aliquip elit amet
adipisicing esse.
</z-accordion>
</z-accordion.group>
</body>
</html>