@aurodesignsystem-dev/auro-dialog 0.0.0-pr97.5 → 0.0.0-pr97.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/index.md +22 -0
- package/package.json +1 -1
package/demo/index.md
CHANGED
|
@@ -25,6 +25,28 @@ The `<auro-dialog>` component should be used in situations where users may:
|
|
|
25
25
|
* Be prompted to view content with the option of closing it
|
|
26
26
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
27
27
|
|
|
28
|
+
## Set Up
|
|
29
|
+
|
|
30
|
+
Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo.
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
function toggleDialog(dialogID) {
|
|
34
|
+
const dialog = document.querySelector(dialogID);
|
|
35
|
+
|
|
36
|
+
if (dialog.hasAttribute('open')) {
|
|
37
|
+
dialog.removeAttribute('open');
|
|
38
|
+
} else {
|
|
39
|
+
dialog.setAttribute('open', true);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`.
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
<auro-button onClick="toggleDialog('#demo1')">Open Default Dialog</auro-button>
|
|
48
|
+
```
|
|
49
|
+
|
|
28
50
|
## The Structure
|
|
29
51
|
|
|
30
52
|
The structure of the dialog itself consists of three slots. The `header`, `content` and `footer` slots. See the scaffolding example below for adding content to the component.
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-dialog",
|
|
10
|
-
"version": "0.0.0-pr97.
|
|
10
|
+
"version": "0.0.0-pr97.6",
|
|
11
11
|
"description": "auro-dialog HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|