@affinda/react 0.0.16 → 0.0.17
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 +78 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,13 +26,17 @@ defineCustomElements();
|
|
|
26
26
|
### 2. Use Components
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
|
-
import { Button, Navbar,
|
|
29
|
+
import { Button, Navbar, NavItem, Logo } from '@affinda/react';
|
|
30
30
|
|
|
31
31
|
function App() {
|
|
32
32
|
return (
|
|
33
33
|
<div>
|
|
34
34
|
<Navbar>
|
|
35
|
-
<
|
|
35
|
+
<Logo slot="logo" />
|
|
36
|
+
<div slot="start">
|
|
37
|
+
<NavItem href="/products">Products</NavItem>
|
|
38
|
+
</div>
|
|
39
|
+
<Button slot="button" variant="primary">Get Started</Button>
|
|
36
40
|
</Navbar>
|
|
37
41
|
</div>
|
|
38
42
|
);
|
|
@@ -321,22 +325,73 @@ import { Card, Heading, Text } from '@affinda/react';
|
|
|
321
325
|
#### Navigation
|
|
322
326
|
|
|
323
327
|
**Navbar**
|
|
324
|
-
- Site-wide navigation header
|
|
325
|
-
- Responsive design with mobile menu support
|
|
326
|
-
- Include Logo in the `logo` slot
|
|
327
328
|
|
|
329
|
+
⚠️ **IMPORTANT**: The Navbar component uses **slots** for positioning elements. Items placed as direct children will not be visible. You must wrap them in divs with the appropriate `slot` attribute.
|
|
330
|
+
|
|
331
|
+
Site-wide navigation header with responsive design and mobile menu support.
|
|
332
|
+
|
|
333
|
+
**Required Slots:**
|
|
334
|
+
- `logo` - Brand logo (left side)
|
|
335
|
+
- `start` - Primary navigation links (center-left)
|
|
336
|
+
- `end` - Secondary navigation and actions (right side)
|
|
337
|
+
- `button` - Call-to-action button (far right)
|
|
338
|
+
|
|
339
|
+
```tsx
|
|
340
|
+
<Navbar>
|
|
341
|
+
{/* Logo slot - required */}
|
|
342
|
+
<Logo slot="logo" />
|
|
343
|
+
|
|
344
|
+
{/* Start slot - main navigation items */}
|
|
345
|
+
<div slot="start">
|
|
346
|
+
<NavItem hierarchy="primary" variant="01" href="/platform">
|
|
347
|
+
Platform
|
|
348
|
+
</NavItem>
|
|
349
|
+
<NavItem hierarchy="primary" variant="01" href="/solutions">
|
|
350
|
+
Solutions
|
|
351
|
+
</NavItem>
|
|
352
|
+
<NavItem hierarchy="primary" variant="01" href="/pricing">
|
|
353
|
+
Pricing
|
|
354
|
+
</NavItem>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
{/* End slot - secondary navigation */}
|
|
358
|
+
<div slot="end">
|
|
359
|
+
<NavItem hierarchy="primary" variant="02" href="/contact">
|
|
360
|
+
Talk to us
|
|
361
|
+
</NavItem>
|
|
362
|
+
<NavItem hierarchy="primary" variant="02" href="/login">
|
|
363
|
+
Log in
|
|
364
|
+
</NavItem>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
{/* Button slot - CTA */}
|
|
368
|
+
<Button slot="button" variant="primary" size="default">
|
|
369
|
+
Try for free
|
|
370
|
+
</Button>
|
|
371
|
+
</Navbar>
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
**Common Mistake:**
|
|
328
375
|
```tsx
|
|
376
|
+
// ❌ WRONG - Direct children are ignored
|
|
377
|
+
<Navbar>
|
|
378
|
+
<Logo />
|
|
379
|
+
<NavItem href="/home">Home</NavItem>
|
|
380
|
+
</Navbar>
|
|
381
|
+
|
|
382
|
+
// ✅ CORRECT - Use slots
|
|
329
383
|
<Navbar>
|
|
330
384
|
<Logo slot="logo" />
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
385
|
+
<div slot="start">
|
|
386
|
+
<NavItem href="/home">Home</NavItem>
|
|
387
|
+
</div>
|
|
334
388
|
</Navbar>
|
|
335
389
|
```
|
|
336
390
|
|
|
337
391
|
**NavItem**
|
|
338
392
|
- Individual navigation links
|
|
339
393
|
- Hierarchy: `primary` (main nav), `secondary` (utility nav)
|
|
394
|
+
- Variant: `"01"` (primary links), `"02"` (secondary/utility links)
|
|
340
395
|
- Variant: Controls visual style
|
|
341
396
|
|
|
342
397
|
#### Social Proof & Testimonials
|
|
@@ -489,21 +544,26 @@ function Hero() {
|
|
|
489
544
|
### Navigation
|
|
490
545
|
|
|
491
546
|
```tsx
|
|
492
|
-
import { Navbar, NavItem, Logo } from '@affinda/react';
|
|
547
|
+
import { Navbar, NavItem, Logo, Button } from '@affinda/react';
|
|
493
548
|
|
|
494
549
|
function Header() {
|
|
495
550
|
return (
|
|
496
551
|
<Navbar>
|
|
497
552
|
<Logo slot="logo" />
|
|
498
|
-
<
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
553
|
+
<div slot="start">
|
|
554
|
+
<NavItem hierarchy="primary" variant="01" href="/">
|
|
555
|
+
Home
|
|
556
|
+
</NavItem>
|
|
557
|
+
<NavItem hierarchy="primary" variant="01" href="/products">
|
|
558
|
+
Products
|
|
559
|
+
</NavItem>
|
|
560
|
+
</div>
|
|
561
|
+
<div slot="end">
|
|
562
|
+
<NavItem hierarchy="primary" variant="02" href="/docs">
|
|
563
|
+
Documentation
|
|
564
|
+
</NavItem>
|
|
565
|
+
</div>
|
|
566
|
+
<Button slot="button" variant="primary">Get Started</Button>
|
|
507
567
|
</Navbar>
|
|
508
568
|
);
|
|
509
569
|
}
|