/
inert.svelte
101 lines (95 loc) · 1.95 KB
/
inert.svelte
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
<script lang="ts">
import { Sidebar } from '$lib/index';
import { lorem, menuList } from './menus';
let siteName = 'Svelte-Sidebar';
let title = 'Inert Demo';
</script>
<div class="fixed z-50 top-0 left-0 w-full">
<Sidebar
lists={menuList}
{siteName}
logo="/images/svelte-sidebar-logo.png"
alt="Svelte Sidebar"
/>
</div>
<main class="container mx-auto p-24 pl-80">
<h1 class="text-4xl text-center py-8">{title}</h1>
<p class="text-xl font-bold text-red-600">
Svelte-Sidebar uses inert polyfill. Press a tab without opening the sidebar. This will go
through the link without the sidebar. When you open the side bar then it will go through the
sidebar menu link.
</p>
<h2 class="text-2xl w-full">
<a href="/sidebar-custom-style" class="text-blue-700 hover:underline">Link 1</a>
</h2>
<p class="pt-4">
<a href="/sidebar-custom-style" class="text-blue-700 hover:underline">Link 2</a>
<input
type="text"
class="border border-solid border-gray-300 h-12 w-full"
id="exampleFormControlInput"
placeholder="Example Input Field 1"
/>
{lorem}
</p>
<div inert>
<h1 class="text-4xl text-center">Inert paragraph</h1>
<input
type="text"
class="
form-control
block
w-full
p-4
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300 "
id="exampleFormControlInput1"
placeholder="Example Input Field 2"
/>
<p class="pt-4">
{lorem}
</p>
</div>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
</main>
<svelte:head>
<title>Svelte-Sidebar-Menu Inert Example</title>
</svelte:head>
<style>
[inert] {
pointer-events: none;
cursor: default;
}
[inert],
[inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
</style>