Polímero - Descida de Ferro

O elemento <iron-dropdown> é usado para revelar o conteúdo suspenso oculto - .dropdown-content. A implementação de elementos que usam dropdown de ferro pode incluir caixas de combinação, botões de menu, seleções, etc.

O elemento <iron-dropdown> exibe os atributos onde o .dropdown-trigger configurado em relação à posição de .dropdown-content.

Exemplo

Para implementar o elemento dropdown iron, navegue até a pasta do projeto no prompt de comando e use o seguinte comando.

bower install PolymerElements/iron-dropdown --save

O exemplo a seguir demonstra o uso do elemento suspenso de ferro -

<!DOCTYPE html>
<html>
   <head>
      <title>iron-dropdown</title>
      <base href = "http://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "iron-dropdown/demo/x-select.html">
      <link rel = "import" href = "paper-input/paper-input.html">
      <link rel = "import" href = "paper-button/paper-button.html">
  
      <style>
         .dropdown-trigger{
            background-color: DarkCyan ;
            border-radius: 4px;
            color: white;
         }
         .dropdown-content {
            background-color: white;
            line-height: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px #ccc;
            padding: 20px;
         }
      </style>
   </head>
  
   <body>
      <h3>Iron-dropdown Example</h3>
      <x-select>
         <paper-button class = "dropdown-trigger">Click Me !</paper-button>
         <div class = "dropdown-content">
            <p>Hello !!! <br/>
            <p>This is an iron-dropdown <br/> example of Polymerjs.</p>
         </div>
      </x-select>
   </body>
</html>

Conforme mostrado no exemplo, a classe chamada .dropdown-content ficará oculta até que você chame um método aberto em um elemento.

Resultado

Para executar o aplicativo, navegue até o diretório do projeto e execute o seguinte comando.

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8081/. Quando você clica noClick me botão, uma lista suspensa será exibida.

polímero_elementos.htm

↰ Previous page