38 lines
949 B
Markdown
38 lines
949 B
Markdown
|
# Example `@example/my-component`
|
||
|
|
|
||
|
|
This is an example package, exported as `@example/my-component`. It consists of two Astro components, **Button** and **Heading**.
|
||
|
|
|
||
|
|
### Button
|
||
|
|
|
||
|
|
The **Button** component generates a `<button>` with a default **type** of **button**.
|
||
|
|
|
||
|
|
```astro
|
||
|
|
---
|
||
|
|
import * as Component from '@example/my-component'
|
||
|
|
---
|
||
|
|
<Component.Button>Plain Button</Component.Button>
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- generated html -->
|
||
|
|
<button type="button">Plain Button</button>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Heading
|
||
|
|
|
||
|
|
The **Heading** component generates an `<h>` tag with a default **role** of **heading** and a **level** attribute that gets written to **aria-level**.
|
||
|
|
|
||
|
|
```astro
|
||
|
|
---
|
||
|
|
import * as Component from '@example/my-component'
|
||
|
|
---
|
||
|
|
<Component.Heading>Heading</Component.Heading>
|
||
|
|
<Component.Heading level="2">Subheading</Component.Heading>
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- generated html -->
|
||
|
|
<h role="heading" aria-level="1">Plain Button</h>
|
||
|
|
<h role="heading" aria-level="2">Subheading</h>
|
||
|
|
```
|