dialog - PIWEEK/polymux GitHub Wiki

A dialog component is a lightbox on the top of the content. Is commonly used for advances options of a feature.

<polymux-dialog display="visible" message="My message">
    <!-- Hey! I am the content! -->
</polymux-dialog>

A polymux-dialog component can accept two properties:

  • Message (optional): We can set a default title message
  • Display (optional): If set to visible it will show the notification message on page load.

A polymux-dialog can be composed of other components

<polymux-dialog display="visible" message="My message">
    <polymux-image></polymux-image>
    <polymux-paragraph>
        'I can't help it,' said Alice very meekly: 'I'm growing.' 'You've no right to grow here,' said the Dormouse. 'Don't talk nonsense,' said Alice more boldly: 'you know you're growing  too.' 'Yes, but I grow at a reasonable pace,' said the Dormouse: 'not in
    </polymux-paragraph>
</polymux-dialog>

Loading polymux-dialog from other components

A dialog component can be toggled from other components. It can receive notifications. This component accept the following parameters:

Notify-message: The message displayed in the notification.

Using more than one polymux-dialog

If we want to use more then one dialogs and each of them needs to be called from different buttons

<polymux-dialog id="dialog-primary"></polymux-dialog>
<polymux-dialog id="dialog-secondary"></polymux-dialog>
<!-- ... -->
<polymux-button title="Notification" notify="#dialog-primary" notify-message="Primary dialog">
    <!-- Some content -->
</polymux-button>
<polymux-button title="Notification" notify="#dialog-secondary" notify-message="Secondary dialog">
    <!-- Some other content -->
</polymux-button>
⚠️ **GitHub.com Fallback** ⚠️