blob: a7bbcf22c572205579993e3c9fccd28a3164ce0d (
plain) (
blame)
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: JS
url: ./js/
templateEngine: [vto, md]
---
# Missing.js
Missing.js is a JavaScript library implementing common UI patterns.
{{ set version = search.pages("release!=undefined")
|> map(rel => rel.data.release)
|> sortSemVer
|> at(-1) }}
## Tabs
_See [ARIA § Tabs](/docs/aria/#tabs)_
Add `tabs.js` **as a module script** to your page
and mark up your tabs with the appropriate ARIA roles.
Behavior will be added automatically.
<figure>
~~~ html
<script type="module" src="https://unpkg.com/missing.css@{{ version }}/dist/js/tabs.js"></script>
~~~
</figure>
The tabs behavior emits these custom events:
- **`missing-switch-away`** on a tab after switching away from it.
- `detail.to`: the newly active tab
- **`missing-switch-to`** on a tab when switching to it
- `detail.from`: the previously active tab
- **`missing-change`** on the tablist element when changing tabs
- `detail.to`, `detail.from`
<div class="info box">
### Initializing dynamic content {.titlebar}
For dynamically inserted content: initialize it as such:
<figure>
~~~ js
import tabs from "https://unpkg.com/missing.css@{{ version }}/dist/js/tabs.js";
// ... insert some content ...
tabs(theContentIJustInserted);
~~~
<figcaption>Initializing a missing.js behavior on newly inserted content</figcaption>
</figure>
Any elements that are inside a shadow DOM will also need to be initialized explicitly this way.
All of our components will find elements that need initialization within the subtree you pass in ---
you could pass the whole `document` every time if you wanted to.
</div>
## Menu
_See [ARIA § menu](/docs/aria/#menu)_
<figure>
~~~ html
<script type="module" src="https://unpkg.com/missing.css@{{ version }}/dist/js/menu.js">
~~~
</figure>
or
<figure>
~~~js
import { menu, menuButton } from "https://unpkg.com/missing.css@{{ version }}/dist/js/menu.js";
~~~
</figure>
All notes above about initializing dynamic content apply here.
## Feed
_See [ARIA § feed](/docs/aria/#feed)_
<figure>
~~~ html
<script type="module" src="https://unpkg.com/missing.css@{{ version }}/dist/js/feed.js">
<aria-feed>
<article class="box" aria-labelledby="article-1-label">
<h2 id="article-1-label">Article Title 1</h2>
<p>Article content</p>
</article>
<article class="box" aria-labelledby="article-2-label">
<h2 id="article-2-label">Article Title 2</h2>
<p>Article content</p>
</article>
</aria-feed>
~~~
</figure>
The `<aria-feed>` custom element utilizes `MutationObserver`, so dynamic content should "just work."
## Expand/collapse navbar
_See [Components § Navbar](/docs/components/#navbar)_
<figure>
~~~ html
<script type="module" src="https://unpkg.com/missing.css@{{ version }}/dist/js/overflow-nav.js">
~~~
</figure>
Make sure to add:
- the `data-overflow-nav` attribute to your navbar.
- inside that navbar, a button with a `data-nav-expander` attribute.
<figure>
~~~ html
<header class="navbar" data-overflow-nav>
<button class="iconbutton" data-nav-expander aria-hidden>
☰ <!-- trigram for heaven -->
</button>
<!-- rest of navbar... -->
</header>
~~~
</figure>
The navbar will remain horizontally scrollable.
All notes above about initializing dynamic content apply here
(for all those times you dynamically add navbars to your page).
|
