@mirai/core 0.1.42 → 0.1.44
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 +6 -3
- package/package.json +1 -1
- package/site/customer.css +10 -0
- package/site/index.html +3 -0
package/README.md
CHANGED
|
@@ -68,7 +68,7 @@ Our new core has different execution enviryonments. These differ for the most pa
|
|
|
68
68
|
|
|
69
69
|
To instantiate any component from the core repository we have to take into account these properties common to all components:
|
|
70
70
|
|
|
71
|
-
- `data-mirai-component:string`:
|
|
71
|
+
- `data-mirai-component:string`: indicates the name of the component to instantiate
|
|
72
72
|
- `data-mobile:bool`: if you only want to instantiate the component in a mobile environment.
|
|
73
73
|
- `data-desktop:bool`: if you only want to instantiate the component in a non mobile environment.
|
|
74
74
|
|
|
@@ -78,11 +78,14 @@ Here you have an example of how you should instantiate it:
|
|
|
78
78
|
<div data-mirai-component="finder" data-mobile="true"></div>
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
It should also be noted that some components may offer the _ghosting_ system. This means that that component can receive different html markup than the default component provides.
|
|
81
|
+
It should also be noted that some components may offer the _ghosting_ system. This means that that component can receive different html markup than the default component provides.
|
|
82
|
+
For that purpose, the `data-ghost` attribute must be set.
|
|
83
|
+
Css class must be added as well to style the ghost system.
|
|
84
|
+
Let's see a naive example:
|
|
82
85
|
|
|
83
86
|
```html
|
|
84
87
|
<div data-mirai-component="session">
|
|
85
|
-
<button>Login here</button>
|
|
88
|
+
<button data-ghost class="login">Login here</button>
|
|
86
89
|
</div>
|
|
87
90
|
```
|
|
88
91
|
|
package/package.json
CHANGED
package/site/customer.css
CHANGED
|
@@ -14,6 +14,16 @@ body {
|
|
|
14
14
|
padding: 0;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
.book {
|
|
18
|
+
background: var(--mirai-ui-input-background);
|
|
19
|
+
border: 0;
|
|
20
|
+
border-radius: 0.25rem;
|
|
21
|
+
color: var(--mirai-ui-input-color);
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
line-height: 16px;
|
|
24
|
+
padding: 0.5rem 1rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
17
27
|
header,
|
|
18
28
|
footer {
|
|
19
29
|
width: 100%;
|
package/site/index.html
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
<nav>
|
|
19
19
|
<div data-mirai-component="session"></div>
|
|
20
20
|
<div data-mirai-component="bookingQuery"></div>
|
|
21
|
+
<div data-mirai-component="bookingQuery">
|
|
22
|
+
<button data-ghost class="book">My Booking Ghost</button>
|
|
23
|
+
</div>
|
|
21
24
|
<div data-mirai-component="environment" data-mobile="false"></div>
|
|
22
25
|
<div data-mirai-component="state"></div>
|
|
23
26
|
</nav>
|