astro-better-details 0.1.2 → 0.1.3
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/Details.astro +5 -5
- package/README.md +14 -5
- package/package.json +1 -1
package/Details.astro
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import type { HTMLAttributes } from 'astro/types';
|
|
3
|
+
|
|
4
|
+
interface Props extends HTMLAttributes<'details'> {
|
|
5
5
|
title?: string;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
const { open, class: cls, title } = Astro.props;
|
|
8
|
+
const { open, class: cls, title, ...rest } = Astro.props;
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
<details class:list={['abt-details', cls]} open={open}>
|
|
11
|
+
<details class:list={['abt-details', cls]} open={open} {...rest}>
|
|
12
12
|
<summary class="abt-details-summary">
|
|
13
13
|
<span class="abt-details-title">{title}<slot name="title" /></span>
|
|
14
14
|
<svg class="abt-details-chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
package/README.md
CHANGED
|
@@ -10,21 +10,32 @@ npm install astro-better-details
|
|
|
10
10
|
|
|
11
11
|
## Basic usage
|
|
12
12
|
|
|
13
|
+
Pass a plain string via the `title` prop:
|
|
14
|
+
|
|
13
15
|
```mdx
|
|
14
16
|
import Details from 'astro-better-details/Details.astro';
|
|
15
17
|
|
|
18
|
+
<Details title="What is this?">
|
|
19
|
+
This is the expanded content. It can contain any Markdown or MDX.
|
|
20
|
+
</Details>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Use the `title` slot when the header needs inline markup -- code, links, or components:
|
|
24
|
+
|
|
25
|
+
```mdx
|
|
16
26
|
<Details>
|
|
17
|
-
<span slot="title">
|
|
27
|
+
<span slot="title">Why use <code>astro-better-details</code>?</span>
|
|
18
28
|
This is the expanded content. It can contain any Markdown or MDX.
|
|
19
29
|
</Details>
|
|
20
30
|
```
|
|
21
31
|
|
|
22
|
-
The `title` slot
|
|
32
|
+
The `title` slot takes precedence over the `title` prop if both are provided. The default slot holds the body content shown when expanded.
|
|
23
33
|
|
|
24
34
|
## Props
|
|
25
35
|
|
|
26
36
|
| Prop | Type | Default | Description |
|
|
27
37
|
|------|------|---------|-------------|
|
|
38
|
+
| `title` | `string` | -- | Plain-text header label; use the `title` slot for inline markup |
|
|
28
39
|
| `open` | `boolean` | `false` | Render the component already expanded |
|
|
29
40
|
| `class` | `string` | -- | Additional CSS class(es) applied to the `<details>` element |
|
|
30
41
|
|
|
@@ -32,11 +43,9 @@ The `title` slot holds the always-visible summary label. The default slot holds
|
|
|
32
43
|
|
|
33
44
|
| Slot | Description |
|
|
34
45
|
|------|-------------|
|
|
35
|
-
| `title` (named) |
|
|
46
|
+
| `title` (named) | Header content with inline markup; takes precedence over the `title` prop |
|
|
36
47
|
| default | Body content, shown when expanded |
|
|
37
48
|
|
|
38
|
-
The title slot accepts any inline content -- plain text, backtick code, links, or JSX components.
|
|
39
|
-
|
|
40
49
|
## Theming
|
|
41
50
|
|
|
42
51
|
The component uses CSS custom properties for all visual values. Override them on `.abt-details` or any parent selector to match your brand:
|