Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
Code Issues Activity
astro/examples/component/packages/my-component
History
Jonathan Neal 033b70a7f8
Add Component Example (#2203) 
* 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>
2021-12-17 08:47:59 -05:00
..
Button.astro Add Component Example (#2203) 2021-12-17 08:47:59 -05:00
Heading.astro Add Component Example (#2203) 2021-12-17 08:47:59 -05:00
index.js Add Component Example (#2203) 2021-12-17 08:47:59 -05:00
package.json Add Component Example (#2203) 2021-12-17 08:47:59 -05:00
README.md Add Component Example (#2203) 2021-12-17 08:47:59 -05:00

README.md

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.

---
import * as Component from '@example/my-component'
---
<Component.Button>Plain Button</Component.Button>

<!-- 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.

---
import * as Component from '@example/my-component'
---
<Component.Heading>Heading</Component.Heading>
<Component.Heading level="2">Subheading</Component.Heading>

<!-- generated html -->
<h role="heading" aria-level="1">Plain Button</h>
<h role="heading" aria-level="2">Subheading</h>