open-index/open-npm huggingface dataset:
npm package: @rwestlund/responsive-dialog
Description: A responsive dialog web component
Author: Randy Westlund
Latest version: 4.0.0

# responsive-dialog

A responsive dialog that is fullscreen on mobile and a normal paper-dialog on
desktop, in accordance with Google's [Material Design guidelines](
https://material.google.com).

## Properties

- **responsiveWidth**
    - Anything smaller than this is considered mobile, and will use the
      fullscreen layout.
    - Default: `"600px"`
- **dismissText**
    - What text tpo use for the dismiss button. If not defined, no dismiss
      button will be shown. On mobile, defining this causes an X rather than a
      back arrow.
    - Default: `""`
- **confirmText**
    - What text to use for the confirm button.
    - Default: `"Save"`

## CSS Properties

- `--responsive-dialog-paper-dialog-width`
    - Only applies to screens larger than `responsiveWidth`. You may want to
      set a certain width here, to prevent the dialog from dynamically growing.
- `--responsive-dialog-toolbar-background-color`
    - Applied to the top toolbar shown on mobile layouts.
- `--responsive-dialog-toolbar-color`
    - Applied to the top toolbar shown on mobile layouts.

## API

Call `.open()`, `.close()`, and `.notifyResize()`, just like with the standard
`paper-dialog`. When the dialog is resolved, it will emit the
`iron-overlay-closed` event, to which it passes either `{ resolved: true }` or
`{ canceled: true}`.

## Example

In the HTML:

```html
<responsive-dialog id="dialog"
       title="I'm a Dialog"
       dismiss-text="Cancel"
       confirm-text="Save"
       on-iron-overlay-closed="resolve_dialog">

    <!-- Your form or other content goes here, in the light DOM. -->
    <paper-input
            type="text"
            label="Name"
            value="{{name}}"
            autocapitalize="words"
            char-counter maxlength="50">
    </paper-input>
</responsive-dialog>
```

In the JavaScript:

```javascript
resolve_dialog: function(e, reason) {
    // Save the result.
    if (reason.confirmed) {
        console.log("You are", this.name);
    }
    else if (result.canceled) {
        console.log("You didn't submit anything");
    }
}
```

## Installation

`bower install polymer-responsive-dialog`

## responsive-dialog-ns

`responsive-dialog-ns` is the same as `responsive-dialog`, but does not use
`paper-dialog-scrollable`. This is necessary for including dropdowns on iOS.
 See PolymerElements/paper-dialog-scrollable#72 for more info.

## License

This code is under the BSD-2-Clause license.  See the LICENSE file for the full
text.