@atom-learning/components 2.15.0 → 2.16.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/CHANGELOG.md +7 -2
- package/dist/components/navigation/NavigationMenu.d.ts +5 -1
- package/dist/components/navigation/NavigationMenu.js +1 -1
- package/dist/components/navigation/NavigationMenu.styles.d.ts +50 -0
- package/dist/components/navigation/NavigationMenu.styles.js +1 -0
- package/dist/components/navigation/NavigationMenuDropdown.d.ts +3 -1
- package/dist/components/navigation/NavigationMenuDropdown.js +1 -1
- package/dist/components/navigation/NavigationMenuDropdownContent.d.ts +7 -0
- package/dist/components/navigation/NavigationMenuDropdownContent.js +1 -0
- package/dist/components/navigation/{NavigationMenuItem.d.ts → NavigationMenuDropdownItem.d.ts} +15 -286
- package/dist/components/navigation/NavigationMenuDropdownItem.js +1 -0
- package/dist/components/navigation/NavigationMenuDropdownTrigger.d.ts +6 -0
- package/dist/components/navigation/NavigationMenuDropdownTrigger.js +1 -0
- package/dist/components/navigation/NavigationMenuLink.d.ts +13 -0
- package/dist/components/navigation/NavigationMenuLink.js +1 -0
- package/dist/docgen.json +1 -1
- package/dist/docs/NavigationMenu.mdx +26 -3
- package/dist/index.cjs.js +1 -1
- package/package.json +1 -1
- package/dist/components/navigation/NavigationMenuItem.js +0 -1
|
@@ -12,7 +12,8 @@ category: Navigation
|
|
|
12
12
|
<NavigationMenu.Link href="/overview/introduction">
|
|
13
13
|
Introduction
|
|
14
14
|
</NavigationMenu.Link>
|
|
15
|
-
<NavigationMenu.Dropdown
|
|
15
|
+
<NavigationMenu.Dropdown id="1">
|
|
16
|
+
<NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
|
|
16
17
|
<NavigationMenu.DropdownContent>
|
|
17
18
|
<NavigationMenu.DropdownItem href="/theme/colours">
|
|
18
19
|
Colours
|
|
@@ -75,7 +76,8 @@ In the below example the styling of `NavigationMenu.DropdownContent` has been ch
|
|
|
75
76
|
<NavigationMenu.Link href="/overview/introduction">
|
|
76
77
|
Introduction
|
|
77
78
|
</NavigationMenu.Link>
|
|
78
|
-
<NavigationMenu.Dropdown
|
|
79
|
+
<NavigationMenu.Dropdown id="1">
|
|
80
|
+
<NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
|
|
79
81
|
<NavigationMenu.DropdownContent
|
|
80
82
|
css={{
|
|
81
83
|
display: 'grid',
|
|
@@ -102,7 +104,7 @@ In the below example the styling of `NavigationMenu.DropdownContent` has been ch
|
|
|
102
104
|
|
|
103
105
|
DropdownItem gives a lot of flexibility. It's an easy to compose it for own purposes.
|
|
104
106
|
|
|
105
|
-
```
|
|
107
|
+
```tsx
|
|
106
108
|
<NavigationMenu.DropdownItem href="/" active>
|
|
107
109
|
<Grid
|
|
108
110
|
css={{
|
|
@@ -119,3 +121,24 @@ DropdownItem gives a lot of flexibility. It's an easy to compose it for own purp
|
|
|
119
121
|
</Grid>
|
|
120
122
|
</NavigationMenu.DropdownItem>
|
|
121
123
|
```
|
|
124
|
+
|
|
125
|
+
## Dropdown Trigger
|
|
126
|
+
|
|
127
|
+
NavigationMenu.Dropdown gives you the way to pass your own trigger component inside the `NavigationMenu.DropdownTrigger`.
|
|
128
|
+
The children of NavigationMenu.DropdownTrigger can be a plain text or more complex component.
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
<NavigationMenu.Dropdown id="1">
|
|
132
|
+
<NavigationMenu.DropdownTrigger>
|
|
133
|
+
<Avatar />
|
|
134
|
+
</NavigationMenu.DropdownTrigger>
|
|
135
|
+
<NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
|
|
136
|
+
</NavigationMenu.Dropdown>
|
|
137
|
+
|
|
138
|
+
<NavigationMenu.Dropdown id="2">
|
|
139
|
+
<NavigationMenu.DropdownTrigger>
|
|
140
|
+
Plain text
|
|
141
|
+
</NavigationMenu.DropdownTrigger>
|
|
142
|
+
<NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
|
|
143
|
+
</NavigationMenu.Dropdown>
|
|
144
|
+
```
|