googlearchive / paper-dialog

A dialog à la Material Design
19 stars 16 forks source link

control paper-shadow in paper-action-dialog #58

Open eximius313 opened 9 years ago

eximius313 commented 9 years ago

Is there an option that you add some control over the paper-shadow in paper-action-dialog?

I think it could be easily obtained by adding attributes="z" in <polymer-element> tag and modifing paper-shadow to respect it: <paper-shadow z="{{z}}" fit>

Kind regards

corbin-r commented 9 years ago

You should already be able to do this:

<polymer-element attributes="z"></polymer-element>
<paper-shadow z="{{z}}" fit></paper-shadow>

Of course you would have to write in the JS controller for this yourself, but what you described you should be able to do.

I would read up in the Polymer docs this: https://www.polymer-project.org/0.5/docs/polymer/databinding.html

You could just do something like this (somewhat ripped from the above link):

<paper-element name="shadow-depth">
<template>
    <template repeat="{{s in shadows}}">
        <paper-shadow z="{{s.zindex}}" fit></paper-shadow>
    </template>
</template>
</paper-element>
Polymer('shadow-depth',{
    ready: function(){
        this.shadows = [
            {zindex : 2}
        ];
     }
});

This should give you some idea as to what you could do! Like later on in your code, you could change the value of "zindex" just by calling it like above.

I will keep reading if there is an easier less "cluttered" method of doing this, and if I find anything or not I'll update this comment!