@gfsdeliver/gfs-listbox v1.0.0-preview.1

Installation

Due to a bug on iron-overlay-backdrop, if you want to override the styles, you must add them in the root file (ex. index.html). This effect projects that start with polymer-starter-kit

Read more for the bug here: https://github.com/Polymer/polymer-starter-kit/issues/154

Properties

Example

<gfs-dialog id="myDialog" modal>
    <div>
        <gfs-button dialog-dismiss>Cancel</gfs-button>
        <gfs-button dialog-dismiss>Delete</gfs-button>
    </div>
</gfs-dialog>

<script>
    this.$.myDialog.header = "Dialog Header";
    this.$.myDialog.body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...";
</script>

<gfs-dialog id="myDialog" modal>
    <h2>Dialog Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</p>

    <div>
        <gfs-button dialog-dismiss>Cancel</gfs-button>
        <gfs-button dialog-dismiss>Delete</gfs-button>
    </div>
</gfs-dialog>

Styling

Example

<style>
    #myDialog {
        --gfs-dialog-min-width: 300px;
        --gfs-dialog-width: auto;
        --gfs-dialog-max-width: 600px;
        --gfs-dialog-background: red;
        --gfs-dialog-border-radius: 15px;
        --gfs-dialog-header-color: var(--gfs-secondary-color);
    }
</style>