Angular 學習筆記 (Material Select and AutoComplete)
記入一些思考 :
這 2 個元件有點像,經常會搞混.
select 的定位是選擇. 目前 select 最糟糕的一點是 not search friendly。
還有當需要 multiple select 很多很多時, 一定要開啟 options 來 unselect, 操作不友好.
再來就是如果 option 資料很大的話, 也不行.
有比較才有傷害,上面的不足是對比 autocomplete 才出現的.
autocomplete 的定位是幫助我們完成我們的 input 輸入.
範圍很小,只是 input text.
經常讓我們搞混的原因其實是 autocomplete + chips
這個組合的用法是, autocomplete 作為 search input, 然後選擇後放入 chips 裡, 再通過 chips 來做移除.
這姐夫可以模擬 select 了.
所以目前通常當我們要用 select 但有遇到上面說的不 friendly 場景時,可以 autocomplete + chips 來模擬一下下.
相關推薦
Angular 學習筆記 (Material Select and AutoComplete)
記入一些思考 : 這 2 個元件有點像,經常會搞混. select 的定位是選擇. 目前 select 最糟糕的一點是 not search friendly。 還有當需要 multiple select 很多很多時, 一定要開啟 options 來 unselect, 操作不友好. 再來
Angular 學習筆記 Material
mat git issue 學習筆記 def nbsp TE DC iss 以後都不會寫 0 到 1 的學習記入了,因為官網已經寫得很好了。 這裏只寫一些遇到的坑或則概念和需要註意的事情. Material Table 1. ng-content 無法傳遞 CdkCo
Angular 學習筆記 ( CDK - Observers )
html5 情況下 -c project server 如果 使用 div 除了 <div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged()">
Angular學習筆記(工具篇)----Angular CLI
進入 詳情 基礎 rate 9.png cnpm 基本用法 版本問題 問題 Angular CLI 的作用 首先安裝npm 和node 詳情:http://www.cnblogs.com/gorgeous/p/8074180.html 在安裝 npm in
Angular 學習筆記 ( PWA + App Shell )
https default 重點 通過 監聽 開啟 說了 shel html PWA (Progressive Web Apps) 是未來網頁設計的方向. 漸進式網站. Angular v5 開始支持 pwa 網站 (所謂支持意思是說有一些 build in 的方法和規範去
python 3.x 學習筆記13 (socket_ssh and socket_文件傳輸)
粘包問題 問題 取出 nec imp 傳輸文件 ket color md5 ssh服務端 import socket,os server = socket.socket() server.bind((‘localhost‘,6666)) server.listen()
Angular學習筆記
Angular Help Repository CKEditor Doc NPM幫助 npm helpnpm -l 列出所有命令用法npm \<cmd> -h 查看某一命令用法,如:npm ls -hnpm help npm 在瀏覽器中查看幫助文檔,如:npm help ind
element ui Angular學習筆記(一)
5.1 har del align ger main offset 搜索 vertica 1.element ui安裝 npm i --save element-angular 2.Angular-cli引入 引入後需要開啟ElModule.forRoot(),也可以單獨引
MongoDB學習筆記之Installing and Starting the Server
Mongodb1、創建YUM軟件倉庫 [root@hdp04 ~]# vi /etc/yum.repos.d/mongodb.repo [mongodb-org-3.6] name=MongoDB Repository baseurl=https://mirrors.aliyun.com/mongodb/y
angular學習筆記一:老老實實的敲書中的例子
學習 textarea app 實時 鍵盤按鍵 雙向綁定 -i js框架 展示 知識點一: onkeyup():按鍵彈起時觸發 onkeydown():按鍵按下的時候發生,文字輸入之前發生 onkeypress():事件會在鍵盤按鍵被按下並釋放一個鍵時發生 知識點二:a
Angular學習筆記11:HTTP(1)
HTTP 繼學習筆記10後,可以在路由器中配置相關路由使使用者可在不同的檢視切換。 在一個實際的專案中,資料使來自遠端的伺服器上的,在Angular中,Angular通過HttpClient與遠端伺服器進行通訊。 模擬資料伺服器 使用 記憶體 Web API(In-memo
Angular學習筆記9:服務(Service)(2)
可觀察的物件(observable)的資料 在現在的是情況下:HeroService.getHeroes() 的函式簽名是同步的,它所隱含的假設是 HeroService 總是能同步獲取英雄列表資料。 而 HeroesComponent 也同樣假
Angular學習筆記10:路由
在工作或者學習中,有時候會遇到如下需求: 在一個頁面上寫一個導航,導航欄中的每一個選項都對應一個頁面。就如Angular官方文件中: (圖片來自於Angular官方文件) 新增一個儀表盤檢視。 在Heroes和DashBoard檢視之間導航。 無論在哪個
Angular學習筆記3--依賴注入
基本用法 1.建立服務 ng g service product/product 2.編寫服務 getProduct(): Product { return new Product('123', 'productName') } getProduct(): Product {
Angular學習筆記1--環境搭建
常用命令 Angular CLI安裝 npm install -g @angular/cli // 沒有許可權前面加sudo 確認Angular有沒有安裝成功 ng v // 出現下面畫面說明安裝成功 _ _
CSS學習筆記-CSS介紹 AND 2018-11-21(21:04)
一、什麼是CSS? CSS:層疊樣式表(Cascading Style Seets) 樣式定義瞭如何顯示HTML元素。 1.樣式通常儲存在樣式表(.css檔案、css區域)中。 2.把樣式新增到HTML中,是為了解決內容與表現分離的問題。 3.外部樣式表可以極大提高工作效率。 4.外部樣
HTML學習筆記-HTML框架 AND 2018-11-20(23:33)
一、Frameset標籤 Frameset標籤:框架標籤,可以把一個網頁分為好幾個網頁。不能和body一同使用。 常用屬性:rows:把框架分為上下的區間。第一塊佔60的長度,其餘的第二塊佔。 例如: <framese
Angular學習筆記--Markdown轉HTML中highlight
本文同步發表在我的個人部落格 http://www.soaringroad.com/editor/121 概述 之前有一篇介紹過Markdown轉HTMLAngular5學習筆記–Html顯示Markdown語言,有興趣的同學可以參考參考,今天介紹的是另外一個Package,也會
第一行程式碼學習筆記——Material Design實戰(1)
Toolbar 在MD設計中,用ToolBar去取代ActionBar,首先要去style.xml中設定隱藏ActionBar <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar
STM32入門學習筆記之Interrupts and events
一、Nested vectored interrupt controller (NVIC巢狀向量中斷控制器) 用於為中斷分組,從而分配搶佔優先順序和響應優先順序 根據STM32的中斷數量,分成5組 1、NVIC_PriorotyGroupConf