Reminder

<msc-reminder /> provides a notification features for user. It applied slot to open a tunnel let developers put LightDOM elements into ShadowDOM. That means developers could use any design they like as content to display.

Try to press the 「SHOW REMINDER」 button to see what can <msc-reminder /> do ?

Basic Usage

<msc-reminder /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-reminder />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://your-domain/wc-msc-reminder.js"> </script>

Structure

Put <msc-reminder /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-reminder> <script type="application/json"> { "l10n": { "confirm": "OK", "cancel": "CANCEL" }, "confirm": false, "cancel": false, "sound": false, "vibrate": false, "show": false } </script> <!-- content --> <div class="content"> ... ... ... </div> </msc-reminder>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-reminder />.

<msc-reminder remoteconfig="https://your-domain/api-path" > </msc-reminder>

JavaScript Instantiation

<msc-reminder /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscReminder } from 'https://your-domain/wc-msc-reminder.js'; const template = document.querySelector('.my-template'); // use DOM api const nodeA = document.createElement('msc-reminder'); document.body.appendChild(nodeA); nodeA.appendChild(template.content.cloneNode(true)); nodeA.l10n = { confirm: 'Confirm', cancel: 'Cancel' }; nodesA.confirm = true; nodesA.show = true; // new instance with Class const nodeB = new MscReminder(); document.body.appendChild(nodeB); nodeB.appendChild(template.content.cloneNode(true)); nodesB.confirm = true; nodesB.cancel = true; nodesB.sound = true; nodesB.show = true; // new instance with Class & default config const config = { l10n: { confirm: 'OK', cancel: 'CANCEL' }, confirm: true, cancel: true, sound: true, vibrate: true }; const nodeC = new MscReminder(config); document.body.appendChild(nodeC); nodeC.appendChild(template.content.cloneNode(true)); nodeC.show = true; </script>

Style Customization

Developers could apply styles to decorate <msc-reminder />'s looking.

<style> msc-reminder { --msc-reminder-margin: 16px; --msc-reminder-padding: 24px; --msc-reminder-shadow-color: 0 0 0; /* r g b */ } </style>

Attributes

<msc-reminder /> supports some attributes to let it become more convenience & useful.

l10n

Set localization for <msc-reminder />. It will replace button text to anything you like. It should be JSON string Developers could set confirm and cancel here.

- confirm：Set confirm button text. Default is OK.
- cancel：Set cancel button text. Default is CANCEL.

<msc-reminder l10n='{"confirm":"OK","cancel":"CANCEL"}' > ... </msc-reminder>

confirm

Set confirm button display or not. Once turn on, <msc-reminder /> will display 「confrim」 button. Default is false (not set).

<msc-reminder confirm> ... </msc-reminder>

cancel

Set cancel button display or not. Once turn on, <msc-reminder /> will display 「cancel」 button. Default is false (not set).

<msc-reminder cancel> ... </msc-reminder>

sound

Set sound for <msc-reminder />. Once turn on, <msc-reminder /> will have sound effect when it showed. Default is false (not set).

<msc-reminder sound> ... </msc-reminder>

vibrate

Set vibrate for <msc-reminder />. Once turn on, <msc-reminder /> will have vibrate effect when it showed. Default is false (not set).

<msc-reminder vibrate> ... </msc-reminder>

show

Set show for <msc-reminder />. Once turn on, <msc-reminder /> will show. Default is false (not set).

<msc-reminder show> ... </msc-reminder>

Properties

Property Name Type Description
l10n Object Getter / Setter for l10n. It will replace some UI text to anything you like. Developers could set confirm and cancel.
confirm Boolean Getter / Setter for confirm. Once true, <msc-reminder /> will display 「confirm」 button. Default is false.
cancel Boolean Getter / Setter for cancel. Once true, <msc-reminder /> will display 「cancel」 button. Default is false.
sound Boolean Getter / Setter for sound. Once true, <msc-reminder /> will have sound effect when it showed. Default is false.
vibrate Boolean Getter / Setter for vibrate. Once truw, <msc-reminder /> will have vibrate effect when it showed. Default is false.
show Boolean Getter / Setter for show. Once true, <msc-reminder /> will show. Default is false.

Events

Event Signature Description
msc-reminder-confirm Fired when user press confirm.
msc-reminder-cancel Fired when user press cancel.

Reference

Mobile Data is Turned Off.

Turn on mobile data or use Wi-Fi to access data.