[paper|core]-elements version of select+option ?

673 views
Skip to first unread message

Matthew Butler

unread,
Jul 17, 2014, 2:12:27 PM7/17/14
to polym...@googlegroups.com
Hi Folks,

I was wondering if there's a pre-made paper version of select/option? Currently I know there is paper-menu-button which is half of what I'm look for. But rather than a fixed icon, I want the displayed 'label' to change to the selected option/menu button. I want to avoid core-selector, as I don't want all options displayed all the time, just the currently selected option. I'm sure I could create my own version with some work but just wanted to see if there was something I may be missing.

Thanks,

Matt

Rob Dodson

unread,
Jul 17, 2014, 3:16:30 PM7/17/14
to Matthew Butler, polymer-dev
To my knowledge, there's no paper/core select element


Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6638c77e-ea12-4598-85f2-69edc8585478%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Scott Miles

unread,
Jul 18, 2014, 5:47:51 PM7/18/14
to Rob Dodson, Matthew Butler, polymer-dev
We plan to construct something like this relatively soon (probably measured in weeks).


phyto...@gmail.com

unread,
Sep 15, 2014, 2:47:50 PM9/15/14
to polym...@googlegroups.com, robd...@google.com, butler....@gmail.com
Is this still planned?

Matthew Butler

unread,
Sep 15, 2014, 2:49:58 PM9/15/14
to polym...@googlegroups.com, robd...@google.com, butler....@gmail.com, phyto...@gmail.com

phyto...@gmail.com

unread,
Sep 15, 2014, 3:37:59 PM9/15/14
to polym...@googlegroups.com, robd...@google.com, butler....@gmail.com, phyto...@gmail.com
Perfect, thanks!

Arthur Evans

unread,
Sep 15, 2014, 6:35:39 PM9/15/14
to Matthew Butler, polymer-dev, Rob Dodson, phyto...@gmail.com
One note, here -- these elements are really new and may still be in flux -- in particular, I believe paper-dropdown has been renamed to paper-dropdown-menu in master. Core-dropdown appears to still be core-dropdown.
Thanks,
Arthur


Jeff S

unread,
Sep 17, 2014, 6:51:08 PM9/17/14
to polym...@googlegroups.com, butler....@gmail.com, robd...@google.com, phyto...@gmail.com
Paper-dropdown is showing up correctly in polymer.dart but all the versions had to be bumped up. (Poly 14.0 and PE 0.2.0)

I do have a dumb question though and I think this thread is a good home.  (If not, I will start a new one.)

In modifying the Polymer Dart Codelab to use paper elements, how do you bind the selected value to the form for submission?  Switching an input field was straight forward.

From:

<div class="field">
  <textarea placeholder="Add title" value="{{codelab.title}}" on-keyup="{{validateTitle}}"></textarea>
</div>

To:

<div>
  <paper-input floatingLabel label="Add title" name="title" style="width: 30%" inputValue="{{codelab.title}}" on-keyup="{{validateTitle}}"></paper-input>   </div>

but I am confused on how to switch from the select-option to the paper-dropdown and have the data get submitted.

From: 

<div class="field">
  <label>Level: </label>
    <select value="{{codelab.level}}">
      <option template repeat="{{level in allLevels}}">
          {{level}}
       </option>
    </select>
</div>

To:  ?????  (The dropdown gets properly created but none of the attributes I used would let me bind the chosen value to {{codelab.level}} for form submission.) 

<div>       
  <paper-dropdown label="Level: ">  (Note that I tried adding valueattr={{codelab.level}} but that didn't work.)
     <template repeat="{{level in allLevels}}">
       <paper-item label="{{level}}"></paper-item>
     </template>             
  </paper-dropdown>
</div>

I thought that I may need to use core-selector but there is a core-select event that is part of paper-dropdown.  Do I need to recognize that event and somehow set the form value that way?  That seems strange to me, especially since paper-input was straight forward but I am new to all this and maybe it isn't so strange after all.

(If I do need to do this, can someone point me in the right direction in terms of 'how'?)

Thanks! 

Yvonne Yip

unread,
Sep 18, 2014, 8:30:04 PM9/18/14
to Jeff S, polymer-dev, butler....@gmail.com, Rob Dodson, phyto...@gmail.com
paper-dropdown (now known as paper-dropdown-menu) has the `selected`, and `selectedItem` property similar to core-selector. You can bind to those to get and set the selected item.

Arthur Evans

unread,
Sep 19, 2014, 1:34:11 PM9/19/14
to Yvonne Yip, Jeff S, polymer-dev, Matthew Butler, Rob Dodson, phyto...@gmail.com
Jeff, it sounds like the Polymer.dart codelab is using the HTML form element. That's only going to recognize native input elements (and custom elements that extend them).

Paper-input and its relatives don't extend the native input elements. There are two basic approaches to submitting a form using these elements:

- Use AJAX and submit the form independently.
- Bind the values of the paper elements to hidden form elements, and use the built-in form submit mechanism.

As far as I can tell, most people using Polymer choose the former option because it's more flexible. Ray Nicholus created an ajax-form element to implement this pattern.


For more details see the following links:


Thanks,
Arthur


Jeff S

unread,
Sep 19, 2014, 5:06:24 PM9/19/14
to polym...@googlegroups.com, yky...@google.com
Thank you for the information, Arthur.

I am thinking I shouldn't have asked my question and just dug deeper but I appreciate the response (and Yvonne's too) nonetheless.  I am diving into the deep end trying to learn Dart and Polymer at the same time so that I can produce more robust mockups of a business idea than would happen with something like Axure.    

I suppose my head is starting to spin at this point, so nudges in the right direction, even on the simple stuff, is very helpful.  Yeah, I could probably just go with the Polymer Designer tool and accomplish a lot of what I want but given I have been away from code for a long time, I wanted to get my hands 'dirty' again.  I figured that may turn out to be a pretty good long term investment not to mention, a lot more fun!  And frustrating at times too.  :)

Thanks again!    

Jeff
Reply all
Reply to author
Forward
0 new messages