@xras/ui 0.1.2 → 0.1.4
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/README.md +57 -1
- package/dist/bootstrap.css +1 -0
- package/dist/xras-ui.cjs +309 -0
- package/dist/xras-ui.js +909 -900
- package/package.json +2 -1
- package/dist/xras-ui.umd.cjs +0 -309
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ This component provides a user interface to browse available Resources and their
|
|
|
11
11
|
```html
|
|
12
12
|
<div id="resource-catalog-react"></div>
|
|
13
13
|
<script type="module">
|
|
14
|
-
import { resourceCatalog } from "https://esm.sh/@xras/ui?exports=resourceCatalog";
|
|
14
|
+
import { resourceCatalog } from "https://esm.sh/@xras/ui@0.1.3?exports=resourceCatalog";
|
|
15
15
|
resourceCatalog({
|
|
16
16
|
apiUrl: "/path/to/catalog.json",
|
|
17
17
|
allowedCategories: [],
|
|
@@ -35,3 +35,59 @@ This component provides a user interface to browse available Resources and their
|
|
|
35
35
|
| `target` | The DOM element where the component will be rendered. | **True** |
|
|
36
36
|
|
|
37
37
|
Note: Avoid combining `allowedCategories` and `excludedCategories`, or `allowedFilters` and `excludedFilters`. If an invalid combination is found, it will default to what is specified in the `allowed*` options
|
|
38
|
+
|
|
39
|
+
## CSS
|
|
40
|
+
|
|
41
|
+
The XRAS user interface components rely on Bootstrap 5 styles as well as their own stylesheet. How these stylesheets should be included depends on whether the site already uses Bootstrap 5.
|
|
42
|
+
|
|
43
|
+
### Sites with Bootstrap 5
|
|
44
|
+
|
|
45
|
+
Sites that are already using Bootstrap 5 can simply add the component CSS in the document head:
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<link rel="stylesheet" href="https://esm.sh/@xras/ui@0.1.3/dist/xras-ui.css" />
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Sites without Bootstrap 5
|
|
52
|
+
|
|
53
|
+
Sites that do not use Bootstrap 5 should also include `bootstrap.css`:
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<link
|
|
57
|
+
rel="stylesheet"
|
|
58
|
+
href="https://esm.sh/@xras/ui@0.1.3/dist/bootstrap.css"
|
|
59
|
+
/>
|
|
60
|
+
<link rel="stylesheet" href="https://esm.sh/@xras/ui@0.1.3/dist/xras-ui.css" />
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
In order for the Bootstrap styles to be applied, the component target element needs to be wrapped in elements with Bootstrap classes. These classes act as a namespace for the Bootstrap classes to prevent conflicts with the rest of the site's CSS:
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<div class="bootstrap">
|
|
67
|
+
<div class="bootstrap-variables bootstrap-fonts">
|
|
68
|
+
<div id="resource-catalog-react"></div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
The `bootstrap-variables` and `bootstrap-fonts` classes on the inner wrapper are used to apply Bootstrap's default CSS variables and fonts, respectively, to the components. These classes are optional and can be omitted if the site defines its own typography rules and Bootstrap CSS variables.
|
|
74
|
+
|
|
75
|
+
### Shadow DOM
|
|
76
|
+
|
|
77
|
+
The Bootstrap namespacing described in the previous section prevents the Bootstrap styles from interfering with the host site's styles, but it does not prevent the host site's stylesheet from applying to the components. For complete isolation of the components from the host site's styles, render the component in the shadow DOM using the `shadowTarget` helper function:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<div id="resource-catalog-react"></div>
|
|
81
|
+
<script type="module">
|
|
82
|
+
import {
|
|
83
|
+
resourceCatalog,
|
|
84
|
+
shadowTarget,
|
|
85
|
+
} from "https://esm.sh/@xras/ui@0.1.3?exports=resourceCatalog,shadowTarget";
|
|
86
|
+
resourceCatalog({
|
|
87
|
+
apiUrl: "/path/to/catalog.json",
|
|
88
|
+
target: shadowTarget(document.getElementById("resource-catalog-react")),
|
|
89
|
+
});
|
|
90
|
+
</script>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
When using the shadow DOM, the stylesheets are injected into the shadow root by `shadowTarget` and do not need to be added to the document head.
|