diff options
Diffstat (limited to 'examples/component/packages/my-component/README.md')
-rw-r--r-- | examples/component/packages/my-component/README.md | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/examples/component/packages/my-component/README.md b/examples/component/packages/my-component/README.md new file mode 100644 index 000000000..41a53a6f0 --- /dev/null +++ b/examples/component/packages/my-component/README.md @@ -0,0 +1,37 @@ +# 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> +``` |