mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
033b70a7f8
* Add Component Example * chore(lint): Prettier fix * nit: improve implementation * nit: Update documentation Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
37 lines
949 B
Markdown
37 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>
|
|
```
|