자료 디자인 드롭 다운 선택

Question

Google의 자료 디자인 원칙을 반영하는 다양한 양식 요소를 만들려고합니다. 나는 어디서나 드롭 다운 예제를 찾을 수 없다는 것을 알았다. 내가 찾을 수있는 가장 가까운 것은 Polymer Project입니다.

내 질문은 :

1. 구글이 멀리 재질 디자인이 특정 형태의 입력 방식을 사용에서 주저인가?
2. 아무도 나에게 링크에 표시된 것과 유사한 양식 선택 입력을 작성하는 방법을 안내해 줄 수 있습니까? 나는 그 링크에 표시된 것이 그 자체로 형식 입력이 아니라는 것을 알고 있지만 반드시 비슷한 형태가 가능하다. <select>.

CSS를 사용하여 정상적인 선택을 변형하려고 시도했지만 매우 까다로운 것 같습니다. 다른 옵션은 Javascript 및 Unordered 목록을 사용하여 선택을 다시 작성하는 것이지만 사용자 (장치 및 개발자)가이 솔루션을 사용하는 방법은 무엇입니까? 당신이 AngularJS와를 사용하는 경우

Answer 1

* { 
 
    box-sizing: border-box; 
 
} 
 
.dropdown { 
 
    display:inline-block; 
 
    margin:30px; 
 
    position: relative; 
 
    padding:0; 
 
    border:0; 
 
    border-radius:5px; 
 
    font-size:24px; 
 
    font-weight:400; 
 
    background:#26A69A; 
 
    color:#FFF; 
 
    box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19); 
 
} 
 
.dropdown > input{ 
 
    display:none; 
 
    position:fixed; 
 
    z-index:-2; 
 
} 
 
.dropdown > label{ 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    margin-bottom: 5px; 
 
    font-weight: 700; 
 
} 
 
.drop-ttl{ 
 
    font-weight:400; 
 
    padding:5px 20px; 
 
} 
 
.dropdown ul { 
 
    width:100%; 
 
    font-weight:400; 
 
    margin:0; 
 
    padding:0; 
 
    position:absolute; 
 
    top:0; 
 
    text-align:center; 
 
    list-style-type:none; 
 
    background:#FFF; 
 
    color:#26A69A; 
 
    box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19); 
 
    border-radius:5px; 
 
} 
 
.dropdown ul >li{ 
 
    padding:5px 20px; 
 
} 
 
.dropdown ul > li > a{ 
 
    color:inherit; 
 
    outline:0; 
 
    text-decoration:none; 
 
    cursor:pointer; 
 
} 
 
.dropdown ul > li:hover{ 
 
    background:#DEDEDE; 
 
} 
 
input[type="checkbox"]:checked ~ label > ul { 
 
    display:none; 
 
}

<div class="dropdown"> 
 
    <input id="checkbox1" type="checkbox" name="checkbox" checked /> 
 
    <label for="checkbox1"> 
 
     <div class="drop-ttl">Dropdown</div> 
 
     <ul> 
 
      <li><a>First</a></li> 
 
      <li>Second</li> 
 
      <li>Third</li> 
 
      <li>Fourth</li> 
 
     </ul> 
 
    </label> 
 
</div>

: 당신도이 가져 폴리머 요소를 사용할 수있는 것

이것은 CSS 전용 자료 드롭 다운입니다. +1하면 도움이됩니다.

Answer 2

당신은 Material Angular project 재료 설계를위한 좋은 장소입니다, Material-UI component

로 얻을 수 있습니다 (아직 사용할 수없는 드롭 다운. 현재 그들이 MD-드롭 다운 지시자로 그것을 위해 노력하고 있습니다)

편집 :

<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">

Answer 3

github에서 문제가 발생했습니다. https://github.com/google/material-design-lite/issues/854. 당신은 스타일이 모든 일, 내가 materializecss을 확인하는 것이 좋습니다 자바 스크립트 버전을 원한다면 나는 내 자신의 "CSS 전용"-version (단순)을 만든 한편

http://codepen.io/pudgereyem/pen/PqBxQx/

<!-- Standard Select --> 
    <div class="mdl-selectfield"> 
    <label>Standard Select</label> 
    <select class="browser-default"> 
     <option value="" disabled selected>Choose your option</option> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option> 
     <option value="3">Option 3</option> 
    </select> 
    </div> 

.

Answer 4

보기 https://github.com/CreativeIT/getmdl-select. 네이티브 MDL- 메뉴 스타일을 사용하여 선택 구성 요소를 구현했습니다. 네이티브 Material 디자인 라이트 메뉴 스타일로 선택 입력을하는 빠른 방법을 제공합니다.

이 페이지 여기 http://creativeit.github.io/getmdl-select/

Answer 5

에 근무 예를 찾을 수있어 JQuery와 비트, UL 목록 및 양식 :

와 숨겨진 input (그래서 당신은 결국 제출할 수있는 데이터 값을 사용하여 내 테이크

jQuery(function($){ 
 
    // ///// 
 
    // MAD-SELECT 
 
    var madSelectHover = 0; 
 
    $(".mad-select").each(function() { 
 
    var $input = $(this).find("input"), 
 
     $ul = $(this).find("> ul"), 
 
     $ulDrop = $ul.clone().addClass("mad-select-drop"); 
 
    $(this) 
 
     .append('<i class="material-icons">arrow_drop_down</i>', $ulDrop) 
 
     .on({ 
 
     hover : function() { madSelectHover ^= 1; }, 
 
     click : function() { $ulDrop.toggleClass("show"); } 
 
    }); 
 
    // PRESELECT 
 
    $ul.add($ulDrop).find("li[data-value='"+ $input.val() +"']").addClass("selected"); 
 
    // MAKE SELECTED 
 
    $ulDrop.on("click", "li", function(evt) { 
 
     evt.stopPropagation(); 
 
     $input.val($(this).data("value")); // Update hidden input value 
 
     $ul.find("li").eq($(this).index()).add(this).addClass("selected") 
 
     .siblings("li").removeClass("selected"); 
 
    }); 
 
    // UPDATE LIST SCROLL POSITION 
 
    $ul.on("click", function() { 
 
     var liTop = $ulDrop.find("li.selected").position().top; 
 
     $ulDrop.scrollTop(liTop + $ulDrop[0].scrollTop); 
 
    }); 
 
    }); 
 
    // CLOSE ALL OPNED 
 
    $(document).on("mouseup", function(){ 
 
    if(!madSelectHover) $(".mad-select-drop").removeClass("show"); 
 
    }); 
 
});

::-webkit-scrollbar { 
 
    width: 4px; 
 
    height: 4px; 
 
} 
 
::-webkit-scrollbar-track { 
 
    background: transparent; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    background-color: rgba(0,0,0, 0.2); 
 
    border-radius: 1px; 
 
} 
 
::-webkit-scrollbar-thumb:hover { 
 
    background-color: rgba(0,0,0, 0.3); 
 
} 
 

 
*{box-sizing:border-box; -webkit-box-sizing:border-box;} 
 
html, body{height:100%; margin:0;} 
 

 
body{ 
 
    font: 16px/24px Roboto, sans-serif; 
 
    background: #fafafa; 
 
} 
 

 

 
/* 
 
MAD-SELECT by Roko CB 
 
*/ 
 
.mad-select .material-icons{ 
 
    vertical-align: middle; 
 
} 
 
.mad-select{ 
 
    position:relative; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    border-bottom: 1px solid rgba(0,0,0,0.12); 
 
    padding-right: 8px; 
 
} 
 
.mad-select ul { 
 
    list-style: none; 
 
    display:inline-block; 
 
    margin:0; padding:0; 
 
} 
 
.mad-select li{ 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    height:24px; 
 
    line-height:24px; 
 
    display: none; 
 
    padding: 8px 16px; 
 
    margin:0; 
 
    box-sizing: initial; 
 
} 
 
.mad-select > ul:first-of-type{ 
 
    max-width:120px; /* COMMENT FOR AUTO WIDTH */ 
 
} 
 
.mad-select > ul:first-of-type li.selected{ 
 
    display: inline-block; 
 
    height: 24px; 
 
    max-width: calc(100% - 24px); 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.mad-select i.material-icons{ 
 
    opacity: 0.5; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
/*jQ*/ 
 
.mad-select ul.mad-select-drop{ 
 
    position: absolute; 
 
    z-index: 9999; 
 
    visibility: hidden; opacity:0; 
 
    background: #fff; 
 
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); 
 
    top: 0; 
 
    left: 0; 
 
    transition: 0.24s; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    overflow-y: auto; 
 
} 
 
.mad-select ul.mad-select-drop.show{ 
 
    visibility: visible; opacity: 1; 
 
    max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */ 
 
} 
 
.mad-select ul.mad-select-drop li{ 
 
    display: block; 
 
    transition: background 0.24s; 
 
    cursor: pointer; 
 
} 
 
.mad-select ul.mad-select-drop li.selected{ 
 
    background: rgba(0,0,0,0.07); 
 
} 
 
.mad-select ul.mad-select-drop li:hover{ 
 
    background: rgba(0,0,0,0.04); 
 
}

<link href='https://fonts.googleapis.com/css?family=Roboto:500,400,300,100&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 

 
Select an option: 
 
<div class="mad-select"> 
 
    <ul> 
 
    <li data-value="1">Option 1</li> 
 
    <li data-value="2 foo">Option 2</li> 
 
    <li data-value="3 bar">Option 3</li> 
 
    <li data-value="4">Option 4</li> 
 
    <li data-value="5">Option long desc 5</li> 
 
    <li data-value="6">Option 6</li> 
 
    <li data-value="7">Option 7</li> 
 
    <li data-value="8">Option 8</li> 
 
    </ul> 
 
    <input type="hidden" name="myOptions" value="3 bar"> 
 
</div>