Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(docs): add custom reg example #24

Merged
merged 1 commit into from
Feb 21, 2024
+68 −0
Merged

perf(docs): add custom reg example #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apiExamples/custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<custom-lockup>
<span slot="title">Place title text here</span>
<span slot="subtitle">Place subtitle text here</span>
</custom-lockup>
5 changes: 5 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@
});
</script>
<script type="module" data-demo-script="true" src="../index.js"></script>
<script type="module">
import { registerComponent } from '../index.js';

registerComponent('custom-lockup');
</script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
</body>
</html>
36 changes: 36 additions & 0 deletions demo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,4 +136,40 @@ For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
<auro-lockup onDark standard oneworld></auro-lockup>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-lockup` custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.

```js
import './node_modules/@aurodesignsystem/auro-lockup';
registerComponent('custom-lockup');
```

This will create a new custom element that you can use in your HTML that will function identically to the `<auro-lockup>` element.

<div class="exampleWrapper exampleWrapper--flex">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
<!-- The below content is automatically added from ./../../apiExamples/custom.html -->
<custom-lockup>
<span slot="title">Place title text here</span>
<span slot="subtitle">Place subtitle text here</span>
</custom-lockup>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->

```html
<custom-lockup>
<span slot="title">Place title text here</span>
<span slot="subtitle">Place subtitle text here</span>
</custom-lockup>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
23 changes: 23 additions & 0 deletions docs/partials/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,26 @@ For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-lockup` custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.

```js
import './node_modules/@aurodesignsystem/auro-lockup';
registerComponent('custom-lockup');
```

This will create a new custom element that you can use in your HTML that will function identically to the `<auro-lockup>` element.

<div class="exampleWrapper exampleWrapper--flex">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>