-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
110 lines (108 loc) · 15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Kevlar Tabs</title>
<meta name="description" content="100% customizable, accessible and built with Typescript.">
<link rel="icon" type="image/svg+xml" href="/kevlar-tabs/logo.svg">
<meta property="og:type" content="website">
<meta property="og:title" content="Kevlar Tabs">
<meta property="og:image" content="https://neolitec.github.io/kevlar-tabs/og-image.png">
<meta property="og:url" content="https://neolitec.github.io/kevlar-tabs">
<meta property="og:description" content="100% customizable, accessible and built with Typescript.">
<link rel="stylesheet" href="/kevlar-tabs/_astro/index.d96b9658.css" />
<link rel="stylesheet" href="/kevlar-tabs/_astro/index.9da1a4bf.css" /><script type="module">document.addEventListener("scroll",()=>{const e=document.querySelector(".header");e&&(window.scrollY>0?e.classList.add("header_scrolled"):e.classList.remove("header_scrolled"))});
</script></head>
<body>
<div class="header astro-INYCVONA">
<a class="logo-name astro-N7OBWKGG" href="https://neolitec.github.io/kevlar-tabs">
<img class="logo-name__logo astro-N7OBWKGG" src="/kevlar-tabs/logo.svg" alt="Kevlar Tabs">
<h1 class="logo-name__title astro-N7OBWKGG">Kevlar Tabs</h1>
</a>
<div class="header__right astro-INYCVONA">
<a class="social-button astro-A4N7SFKI" target="_blank" rel="noopener" href="https://github.com/neolitec/kevlar-tabs">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github astro-INYCVONA">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" class="astro-INYCVONA"></path>
</svg>
</a>
</div>
</div>
<style>astro-island,astro-slot{display:contents}</style><script>(self.Astro=self.Astro||{}).only=t=>{(async()=>await(await t())())()},window.dispatchEvent(new Event("astro:only"));var l;{const c={0:t=>t,1:t=>JSON.parse(t,o),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,o)),5:t=>new Set(JSON.parse(t,o)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(JSON.parse(t)),9:t=>new Uint16Array(JSON.parse(t)),10:t=>new Uint32Array(JSON.parse(t))},o=(t,s)=>{if(t===""||!Array.isArray(s))return s;const[e,n]=s;return e in c?c[e](n):void 0};customElements.get("astro-island")||customElements.define("astro-island",(l=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement&&this.parentElement.closest("astro-island[ssr]"))return;const s=this.querySelectorAll("astro-slot"),e={},n=this.querySelectorAll("template[data-astro-template]");for(const r of n){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(const r of s){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("name")||"default"]=r.innerHTML)}const a=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),o):{};this.hydrator(this)(this.Component,a,e,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),window.removeEventListener("astro:hydrate",this.hydrate),window.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((s,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener("astro:hydrate",this.hydrate);let s=this.getAttribute("before-hydration-url");s&&await import(s),this.start()}start(){const s=JSON.parse(this.getAttribute("opts")),e=this.getAttribute("client");if(Astro[e]===void 0){window.addEventListener(`astro:${e}`,()=>this.start(),{once:!0});return}Astro[e](async()=>{const n=this.getAttribute("renderer-url"),[a,{default:r}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),i=this.getAttribute("component-export")||"default";if(!i.includes("."))this.Component=a[i];else{this.Component=a;for(const d of i.split("."))this.Component=this.Component[d]}return this.hydrator=r,this.hydrate},s,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},l.observedAttributes=["props"],l))}</script><main class="main-content astro-J7PV25F6">
<div class="hero-container astro-J7PV25F6">
<div class="logo-container astro-J7PV25F6">
<div class="logo-container__background astro-J7PV25F6"></div>
<img class="logo-container__logo astro-J7PV25F6" src="/kevlar-tabs/logo.svg" alt="Logo of Kevlar Tabs">
</div>
<div class="text-container astro-J7PV25F6">
<h1 class="title astro-J7PV25F6">Kevlar Tabs</h1>
<p class="tag astro-J7PV25F6">A simple tabs library for React.</p>
<p class="text astro-J7PV25F6">100% customizable, accessible and built with Typescript.</p>
<div class="actions astro-J7PV25F6">
</div>
</div>
</div>
<div class="example astro-J7PV25F6">
<astro-island uid="Z1dQDDP" component-url="/kevlar-tabs/_astro/Example.6b3f1143.js" component-export="default" renderer-url="/kevlar-tabs/_astro/client.c74183a2.js" props="{"className":[0,"example__tabs astro-J7PV25F6"]}" ssr="" client="only" opts="{"name":"Example","value":true}"></astro-island>
</div>
<section class="source astro-J7PV25F6">
<div class="source__content astro-J7PV25F6">
<div class="code-sample-component astro-ILE265XK">
<div class="code-sample-component__title astro-ILE265XK">
Tabs.tsx
</div>
<div class="code-sample-component__code astro-ILE265XK">
<pre class="astro-code nord" style="background-color: #2e3440ff; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #81A1C1"><</span><span style="color: #8FBCBB">Tabs</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">className</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">tabs</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1"><</span><span style="color: #8FBCBB">TabList</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1"><</span><span style="color: #8FBCBB">Tab</span><span style="color: #81A1C1">></span><span style="color: #D8DEE9FF">Tab 1</span><span style="color: #81A1C1"></</span><span style="color: #8FBCBB">Tab</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1"><</span><span style="color: #8FBCBB">Tab</span><span style="color: #81A1C1">></span><span style="color: #D8DEE9FF">Tab 2</span><span style="color: #81A1C1"></</span><span style="color: #8FBCBB">Tab</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1"></</span><span style="color: #8FBCBB">TabList</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1"><</span><span style="color: #8FBCBB">TabPanel</span><span style="color: #81A1C1">></span><span style="color: #D8DEE9FF">Content 1</span><span style="color: #81A1C1"></</span><span style="color: #8FBCBB">TabPanel</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1"><</span><span style="color: #8FBCBB">TabPanel</span><span style="color: #81A1C1">></span><span style="color: #D8DEE9FF">Content 2</span><span style="color: #81A1C1"></</span><span style="color: #8FBCBB">TabPanel</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #81A1C1"></</span><span style="color: #8FBCBB">Tabs</span><span style="color: #81A1C1">></span></span></code></pre>
</div>
</div>
<div class="code-sample-component astro-ILE265XK">
<div class="code-sample-component__title astro-ILE265XK">
Tabs.scss
</div>
<div class="code-sample-component__code astro-ILE265XK">
<pre class="astro-code nord" style="background-color: #2e3440ff; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #ECEFF4">.</span><span style="color: #8FBCBB">tabs</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">display</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">flex;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">flex-direction</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">column;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">.</span><span style="color: #8FBCBB">tablist</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">display</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">flex;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">gap</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">2</span><span style="color: #81A1C1">px;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">border-bottom</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">2</span><span style="color: #81A1C1">px</span><span style="color: #88C0D0"> $border2-color </span><span style="color: #81A1C1">solid;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">.</span><span style="color: #8FBCBB">tab</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">padding</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">0.5</span><span style="color: #81A1C1">rem</span><span style="color: #88C0D0"> </span><span style="color: #B48EAD">1</span><span style="color: #81A1C1">rem;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">border</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">2</span><span style="color: #81A1C1">px</span><span style="color: #88C0D0"> </span><span style="color: #81A1C1">transparent</span><span style="color: #88C0D0"> </span><span style="color: #81A1C1">solid;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">background-color</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">$background3-color</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">text-align</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">center;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">border-top-left-radius</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">$radius-normal</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">border-top-right-radius</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">$radius-normal</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">cursor</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">pointer;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">&</span><span style="color: #D8DEE9FF">--active </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">background-color</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">$background4-color</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">&</span><span style="color: #ECEFF4">:</span><span style="color: #8FBCBB">hover</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">border</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">2</span><span style="color: #81A1C1">px</span><span style="color: #88C0D0"> $border2-color </span><span style="color: #81A1C1">solid;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">.</span><span style="color: #8FBCBB">tabpanel</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">padding</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">1</span><span style="color: #81A1C1">rem;</span></span>
<span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span>
<span class="line"><span style="color: #ECEFF4">}</span></span>
<span class="line"></span></code></pre>
</div>
</div>
</div>
</section>
</main>
</body></html>