If <select> specifies the mdl-menu class of MaterialDesignLite, select disappears.

I mounted the MDL and wrote it in the sample program of angularJS as follows.

include.html:

<DOCUTYPE html>
<htmlng-app="myApp">
<head>
<metacharset="utf-8"/>
<title>Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-message-format.min.js"></script>
<script src="js/include.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-cookies.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
</head>
 <bodying-controller="MyController as my">
 <form class="mdl-layout__content">
 <label class="mdl-typography --font-regular" for="temp">Template:</label>
<select class="mdl-menu" id="temp" name="temp"ng-model="my.template"ng-options="t.urlast.title for t in my.templates">
<option value="">
 Please select from the following:
</option>
</select>
<div class="mdl-card mdl-cell mdl-cell -- 12-col"ng-include="my.template"onload="my.onload()"></div>
</form>
</body>
</html>

include.js:

angular.module('myApp',[])
.controller('MyController', function(){
  This.templates = [
       // Template information (optional label and destination URL)
       { title: 'execution', url: 'templates/execution.html'},
       { title: 'tempo', url: 'templates/tempo.html'}
      ];
      // Code that is executed when a template is loaded
      This.onload=function(){
        console.log(this.template);
      };
});

tempo.html:

<dl>
 <dt> Atcheleland </dt>
 <dd> Gradually </dd>
 <dt>Retard </dt>
 <dd> Slowly </dd>
 <dt>Puumoso </dt>
 <dd> Faster than ever </dd>
 <dt>Templebert </dt>
 <dd>Stretch > Fast </dd>
</dl>

execution.html:

<dl>
  <dt>Marcart;/dt>
  <dd> Play each sound clearly </dd>
  <dt>Stringend </dt>
  <dd> Increasingly coughing </dd>
  <dt>Legert</dt>
  <dd> Play seamlessly and smoothly between sounds</dd>
  <dt>Tremoro</dt>
  <dd>Play fast and repetitive </dd>
 </dl>

If you write class="mdl-menu" on select like include.html, the display disappears.Therefore, I am having trouble making SELECTBOX with the movement specified in MaterialDesign.In the demo,

demo.html

<a class="android-link android-link-menu mdl-typography --font-light" id="developers-dropdown">
          For Developers
          <i class="material-icons">arrow_drop_up</i>
        </a>
        <ul class="mdl-menu mdl-js-menu mdl-menu --top-left mdl-js-riple-effect" for="developers-dropdown">
          <lic class="mdl-menu__item">App developer resources</li>
          <lic class="mdl-menu__item">Android Open Source Project</li>
          <lic class="mdl-menu__item">Android SDK</li>
          <lic class="mdl-menu__item">Android for Work</li>
        </ul>

It says and it's working. (Motorally, it moves from the bottom left to the top right, but actually I want to pull it down, so I want to rip it from the top left to the bottom right, and from the top to the bottom.)

MaterialDesign explains the following link in the Menu section, and I think there is a way.

https://www.google.com/design/spec/components/menus.html#menus-simple-menus

The MaterialDesignLite Menu describes the following link:

http://www.getmdl.io/components/index.html#menus-section

angularjs material-design

2022-09-29 22:53