@rcarls/rc-navigation-rail 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/dist/custom-elements.json +620 -0
- package/dist/rc-navigation-rail-DOaY6_kH.js +385 -0
- package/dist/rc-navigation-rail-DOaY6_kH.js.map +1 -0
- package/dist/rc-navigation-rail-define.js +6 -0
- package/dist/rc-navigation-rail-define.js.map +1 -0
- package/dist/rc-navigation-rail.js +5 -0
- package/dist/rc-navigation-rail.js.map +1 -0
- package/dist/types/packages/rc-navigation-rail/src/define.d.ts +1 -0
- package/dist/types/packages/rc-navigation-rail/src/index.d.ts +1 -0
- package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.d.ts +123 -0
- package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.styles.d.ts +2 -0
- package/dist/types/packages/rc-navigation-rail/src/rc-navigation-rail.test.d.ts +0 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# `@rcarls/rc-navigation-rail`
|
|
2
|
+
|
|
3
|
+
Navigation rail layout that styles consumer-authored links.
|
|
4
|
+
|
|
5
|
+
Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-rail](https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-rail).
|
|
6
|
+
|
|
7
|
+
Use this for medium and expanded PWA layouts where native links should keep working before custom
|
|
8
|
+
element upgrade and remain compatible with framework routers.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @rcarls/rc-navigation-rail
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Import
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import '@rcarls/rc-navigation-rail/define';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Basic usage
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<nav aria-label="Main navigation">
|
|
26
|
+
<rc-navigation-rail>
|
|
27
|
+
<button slot="toggle" type="button" aria-label="Toggle navigation">
|
|
28
|
+
<span data-rc-navigation-expand-icon aria-hidden="true">menu</span>
|
|
29
|
+
<span data-rc-navigation-collapse-icon aria-hidden="true">menu_open</span>
|
|
30
|
+
</button>
|
|
31
|
+
<a href="/recipes" aria-current="page">
|
|
32
|
+
<span data-rc-navigation-indicator>
|
|
33
|
+
<span data-rc-navigation-icon aria-hidden="true">R</span>
|
|
34
|
+
<span>Recipes</span>
|
|
35
|
+
</span>
|
|
36
|
+
</a>
|
|
37
|
+
<a href="/settings">
|
|
38
|
+
<span data-rc-navigation-indicator>
|
|
39
|
+
<span data-rc-navigation-icon aria-hidden="true">S</span>
|
|
40
|
+
<span>Settings</span>
|
|
41
|
+
</span>
|
|
42
|
+
</a>
|
|
43
|
+
</rc-navigation-rail>
|
|
44
|
+
</nav>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
The consumer-authored `<nav>` provides the navigation landmark and accessible
|
|
48
|
+
label. `rc-navigation-rail` deliberately provides no landmark semantics.
|
|
49
|
+
|
|
50
|
+
## Adaptive usage
|
|
51
|
+
|
|
52
|
+
Render this component from app layout code for windows at least 600 CSS pixels wide. Keep it
|
|
53
|
+
collapsed at medium widths, and only offer or persist `expanded` at widths of at least 840 CSS
|
|
54
|
+
pixels. Use the same destination data and
|
|
55
|
+
active-link rules as `rc-navigation-bar` so compact and rail layouts stay in
|
|
56
|
+
sync.
|
|
57
|
+
|
|
58
|
+
## Slots
|
|
59
|
+
|
|
60
|
+
| Slot | Description |
|
|
61
|
+
| -------- | --------------------------------------------------------- |
|
|
62
|
+
| default | Navigation links. Direct `<a>` children are recommended. |
|
|
63
|
+
| `header` | Content above the navigation links. |
|
|
64
|
+
| `footer` | Content pinned after the navigation links. |
|
|
65
|
+
| `toggle` | Native `<button>` or `rc-button` expand/collapse control. |
|
|
66
|
+
|
|
67
|
+
## API
|
|
68
|
+
|
|
69
|
+
| Property | Attribute | Type | Default | Description |
|
|
70
|
+
| ----------------- | ------------------ | --------- | ----------------------------------------------------------- | ------------------------------------------------------------ |
|
|
71
|
+
| `expanded` | `expanded` | `boolean` | `false` | Whether the rail is expanded. Host writes are silent. |
|
|
72
|
+
| `defaultExpanded` | `default-expanded` | `boolean` | `false` | Initial expanded state for uncontrolled usage. |
|
|
73
|
+
| `activeSelector` | `active-selector` | `string` | `a[aria-current]:not([aria-current="false"])` | Selector used to find the active link. |
|
|
74
|
+
| `indicatorTarget` | `indicator-target` | `string` | `[data-rc-navigation-indicator], [data-rc-navigation-icon]` | Selector inside the active link used for indicator geometry. |
|
|
75
|
+
|
|
76
|
+
| Method | Description |
|
|
77
|
+
| ------------------ | ----------------------- |
|
|
78
|
+
| `expand()` | Expands the rail. |
|
|
79
|
+
| `collapse()` | Collapses the rail. |
|
|
80
|
+
| `toggleExpanded()` | Toggles expanded state. |
|
|
81
|
+
|
|
82
|
+
| Event | Detail | Description |
|
|
83
|
+
| --------------------------- | ----------------------- | --------------------------------------------------------------- |
|
|
84
|
+
| `rc-navigation-rail-toggle` | `{ expanded: boolean }` | Fired when user interaction or a method toggles expanded state. |
|