AngularDart Material Design 輸入 頂

MaterialInputComponent

Selector: <material-input:not(material-input[multiline])>

material-input是單行或多行文本字段，用戶可以在其中輸入。 它有可選的標籤。注意：客戶端必須在其指令列表中聲明materialInputDirectives而不是MaterialInputComponent。

Attributes:

• type - 輸入的類型。 默認爲“text”。 其他支持的值是“email”，“password”，“url”，“number”，“tel”和“search”。 （輸入類型“number”也使用materialNumberInputDirectives）
• multiple - 用戶是否可以輸入多個值，以逗號分隔。 此屬性僅在type =“email”時適用，否則將被忽略。
• role - input元素的role屬性。

Inputs:

• characterCounter (String) → int  自定義字符計數器功能。 鍵入輸入文本; 返回文本應被視爲多少個字符。
• checkValid (String) → String 已禁用！請改用angular2 forms API
• disabled bool  是否禁用此輸入（只讀輸入）
• displayBottomPanel bool  是否顯示錯誤，提示文本和字符計數器面板。
• error String 顯示錯誤。比此輸入上可能存在的所有其他錯誤更高的先驗。
• errorMsg String  如果輸入的字符數超過maxCount，則輸入錯誤信息。
• errorRenderer (Map<String, dynamic>) → Map<String, dynamic>  一個函數，它接收錯誤映射，並返回另一個映射，用人類可讀文本替換錯誤。 警告：此機制的API仍在不斷變化，並且會有重大變化。小心依靠它。
• floatingLabel bool  標籤是否“浮動”。 如果爲false，則在文本輸入框中時標籤會消失。如果爲真，則它會“漂浮”在輸入之上。
• hintText String  要在輸入上顯示的提示。 如果輸入上有錯誤消息，則不會顯示此文本。
• inputAriaActivedescendent String 應分配給內部輸入元素的aria-activedescendant屬性的元素的ID。
• inputAriaAutocomplete String  應用於內部輸入元素的自動完成方法。 這可以與“combobox”或“textbox”的inputRole值一起使用。如果此值是“list”或“both”，則inputAriaHasPopup應設置爲“true”。
• inputAriaExpanded bool  inputAriaOwns引用的可擴展元素當前是否可見。
• inputAriaHasPopup String input元素的aria-haspopup屬性的值，表示inputAriaOwns引用的元素是可擴展的。 如果inputAriaOwns引用的元素是可擴展的，則它應該是“true”或擁有元素的角色。
• inputAriaLabel String  用於輔助技術的標籤。 當需要可見標籤時，請使用label代替此標籤。
• inputAriaOwns String  應分配給內部輸入元素的aria-owns屬性的元素的ID。
• label String  此輸入的標籤。 如果沒有在文本框中輸入任何內容，則顯示默認文本。當用戶輸入文本時，它會消失。
• leadingGlyph String  要在輸入的前沿顯示的任何符號 - 例如URL鏈接圖標或類似內容。
• leadingGlyphAriaLabel String  詠歎調標籤用於領導字形。
• leadingText String  要在輸入的前沿顯示的任何文本 - 例如貨幣符號或類似物。
• maxCount int  字符計數輸入框允許的最大字符數。 當值爲非null時，始終顯示字符計數。
• required bool  是否需要輸入。 如果沒有輸入文本，則必需的輸入將在第一次模糊時顯示驗證錯誤。
• requiredErrorMsg String 自定義錯誤消息，以顯示何時需要該字段並顯示空白。
• rightAlign bool  輸入內容是否應始終右對齊。 默認值爲false。
• showCharacterCount bool  即使maxCount爲null，也顯示字符數。
• showHintOnlyOnFocus bool 輸入未聚焦時是否顯示提示文本。 默認爲false。
• trailingGlyph String  在輸入的後緣顯示的任何符號 - 例如 URL鏈接圖標或類似內容。
• trailingGlyphAriaLabel String 詠歎調標籤用於尾隨字形。
• trailingText String 要在輸入的後緣顯示的任何文本 - 例如 貨幣符號或類似物。

Outputs:

• blur Stream<FocusEvent> 觸發失去焦點事件時發佈事件。
• change Stream<String>  觸發更改事件時發佈事件。 （在輸入或失去焦點時。）
• focus Stream<FocusEvent>  元素聚焦時的事件。
• inputKeyPress Stream<String>  每當輸入文本更改（每個按鍵）時發佈事件。

MaterialMultilineInputComponent

Selector: <material-input[multiline]>

material-input是一個多行文本字段，用戶可以在其中鍵入輸入，並且可以選擇具有標籤。

Inputs:

• characterCounter (String) → int  自定義字符計數器功能。 鍵入輸入文本; 返回文本應被視爲多少個字符。
• checkValid (String) → String 已禁用！請改用angular2 forms API
• disabled bool  是否禁用此輸入（只讀輸入）
• displayBottomPanel bool  是否顯示錯誤，提示文本和字符計數器面板。
• error String  顯示錯誤。 比此輸入上可能存在的所有其他錯誤更高的先驗。
• errorMsg String 如果輸入的字符數超過maxCount，則輸入錯誤信息。
• errorRenderer (Map<String, dynamic>) → Map<String, dynamic>  一個函數，它接收錯誤映射，並返回另一個映射，用人類可讀文本替換錯誤。 警告：此機制的API仍在不斷變化，並且會有重大變化。小心依靠它。
• floatingLabel bool 標籤是否“浮動”。 如果爲false，則在文本輸入框中時標籤會消失。如果爲真，則它會“漂浮”在輸入之上。
• hintText String  要在輸入上顯示的提示。 如果輸入上有錯誤消息，則不會顯示此文本。
• inputAriaLabel String  用於輔助技術的標籤。 當需要可見標籤時，請使用標籤代替此標籤。
• label String  此輸入的標籤。 如果沒有在文本框中輸入任何內容，則顯示默認文本。當用戶輸入文本時，它會消失。
• maxCount int  字符計數輸入框允許的最大字符數。 當值爲非null時，始終顯示字符計數。
• maxRows int  要顯示的最大行數。超過maxRows的任何內容都會導致輸入滾動。
• required bool  是否需要輸入。 如果沒有輸入文本，則必需的輸入將在第一次失去焦點時顯示驗證錯誤。
• requiredErrorMsg String  自定義錯誤消息，以顯示何時需要該字段並顯示空白。
• rows int  多行輸入應該有多少行。 可以是整數，也可以是字符串。
• showCharacterCount bool 即使maxCount爲null，也顯示字符數。
• showHintOnlyOnFocus bool 輸入未聚焦時是否顯示提示文本。 默認爲false。

Outputs:

• blur Stream<FocusEvent>  觸發失去焦點事件時發佈事件。
• change Stream<String>  觸發更改事件時發佈事件。 （在輸入或失去焦點時。）
• focus Stream<FocusEvent>  元素聚焦時的事件。
• inputKeyPress Stream<String>  每當輸入文本更改（每個按鍵）時發佈事件。

MaterialAutoSuggestInputComponent

Selector: <material-auto-suggest-input>

material-auto-suggest-input是一個輸入字段，提供在用戶輸入時自動完成輸入的建議。此組件的調用者必須提供initial/unfiltered建議的列表，這些建議按組件過濾爲用戶類型。 過濾器不區分大小寫。

通過SelectionOptions實現的ObserveAware接口支持異步建議。

彈出建議列表具有最大高度和自動溢出。 一旦有用例，我們可以爲自定義最大高度添加屬性。 Inputs:

• ariaLabel String  用於輔助技術的標籤。 如果未提供，請改用label。
• characterCounter Function  自定義字符計數器功能。 輸入輸入文本; 返回文本應被視爲多少個字符。
• checkValid Function 已禁用！請改用表單API
• clearIconTooltip String  顯示在清除圖標上的工具提示。
• closeOnActivate bool 是否在激活時關閉下拉列表。
• closeOnEnter bool 是否關閉甚至輸入字符串非匹配選項。
• componentRenderer (dynamic) → Type 已禁用！使用factoryRenderer，因爲它可以樹搖動。
• constrainToViewport bool  是否限制彈出位置，使其永遠不會脫離屏幕。
• disabled bool 是否禁用此輸入。
• displayBottomPanel bool  是否顯示錯誤，提示文本和字符計數器面板。
• emptyPlaceholder String  如果選項列表爲空且未加載，則顯示文本。
• enforceSpaceConstraints bool  彈出窗口是否應根據相對於視口的可用空間自動重新定位自身。
• error String  顯示錯誤。 比此輸入上可能存在的所有其他錯誤更高的先驗。
• factoryRenderer (dynamic) → ComponentFactory<dynamic>  FactoryRenderer用於顯示項目。
• filterSuggestions bool  允許在用戶輸入時過濾建議。 如果爲false，則始終顯示完整的建議列表。
• floatingLabel bool  標籤是否“浮動”。 如果爲false，則在文本輸入框中時標籤會消失。如果爲真，則它會“漂浮”在輸入之上。
• hideCheckbox bool  是否隱藏選擇項之前的複選框以進行多選。
• highlightMatchFromStartOfWord bool  匹配是否應僅在單詞的開頭突出顯示。
• highlightOptions bool 是否突出顯示選項。 默認值爲true。
• hintText String  要在輸入上顯示的提示。 如果輸入上有錯誤消息，則不會顯示此文本。
• initialActivateSelection bool  彈出窗口中的第一個建議是活動的，默認情況下會突出顯示。 將此設置爲true會更改行爲，以便在更改選項或選項時：       1.選擇中的第一個選定值在選項中有效       2.如果選擇沒有選定值，則選項中沒有任何活動
• inputText String  輸入應該有的文本。 請考慮使用angular_forms NgModel。
• itemRenderer (dynamic) → String  一個簡單的函數，用於將項呈現爲字符串。
• label String 要在輸入上使用的標籤。
• labelFactory (dynamic) → ComponentFactory<dynamic>  自定義工廠用於渲染建議標籤。
• labelRenderer (dynamic) → Type  請改用labelFactory。
• leadingGlyph String 在輸入框之前顯示的任何持久字形。
• leadingText String  要在輸入的前沿顯示的任何文本 - 例如貨幣符號或類似物。
• limit dynamic  要顯示多少建議。 如果限制小於1，則假定爲無限制。請參閱Filterable中的過濾方法。默認爲10。
• loading bool  打開時沒有可用的建議，請在建議下拉列表中顯示加載指示符。
• maxCount int 字符計數輸入框允許的最大字符數。 當值爲非null時，始終顯示字符計數。
• optionHighlighter (String, dynamic) → List<HighlightedTextSegment>  返回給定查詢和值的HighlightedTextSegment列表的函數。 如果未提供optionHighlighter，則TextHighlighter與itemRenderer一起使用以生成文本段列表。
• selectionOptions SelectionOptions<dynamic>  此容器的可用選項。
• popupMatchInputWidth bool  建議彈出寬度是否至少與輸入寬度一樣寬。
• popupPositions List<RelativePosition>  嘗試繪製建議彈出窗口的位置列表。 有關更多信息，請參見MaterialPopupComponent。
• popupShadowCssClass String  建議彈出內容的自定義CSS類。
• required bool  是否需要輸入。 如果沒有輸入文本，則必需的輸入將在第一次失去焦點時顯示驗證錯誤。
• requiredErrorMsg String  自定義錯誤消息，以顯示何時需要該字段並顯示空白。
• rightAlign bool  輸入內容是否應始終右對齊。 默認值爲false。
• selection SelectionModel<dynamic>  如果設置，自動建議將使用提供的可觀察SelectionModel對象。 默認情況下使用單個選擇模型。
• shouldClearOnSelection bool  從菜單中選擇項目後是否清除文本。
• showClearIcon bool  顯示或隱藏尾隨關閉圖標。單擊該圖標將清除輸入文本並隱藏彈出窗口。
• showHintOnlyOnFocus bool  輸入未聚焦時是否顯示提示文本。 默認爲false。
• showPopup bool 用於控制建議彈出窗口的可見性。
• slide String  彈出縮放的方向。 有效值爲x，y或null。
• sorted bool 已禁用！調用者應該在選項上調用.sort（）。
• suggestions List<dynamic>  已禁用！請改用[options]
• trailingGlyph String  要在輸入框末尾顯示的任何持久字形。
• trailingText String 要在輸入的後緣顯示的任何文本 - 例如 貨幣符號或類似物。

Outputs:

• blur Stream<void>  當輸入增加失去焦點或自動建議項目被選中時觸發。
• clear Stream<void>  單擊關閉圖標時觸發。
• focus Stream<FocusEvent>  當輸入獲得焦點時觸發
• showPopupChange Stream<bool>  showPopup更改時發佈事件。
• inputTextChange Stream<String>  輸入文本更改時發佈事件（在按鍵上）。

MaterialNumberValueAccessor

Selector: <material-input[type=number],material-input[type=percent]>

ControlValueAccessor，它將輸入強制轉換爲num。

使用materialNumberInputDirectives獲取一組與輸入一起使用以提供驗證的指令。 比如默認確保它是一個數字，checkInteger，checkPositive，checkNonNegative（允許0，）lowerBound和upperBound。

Accessor始終設置從輸入設置的原始String值，但僅在可以解析輸入時設置Control的值。

keypressUpdate屬性在每個按鍵上都有值更新，而默認值是僅在模糊事件上更新的值。 blurFormat屬性導致輸入在blur事件上格式化。

查看源碼。

MaterialPercentInputDirective

Selector: <material-input[type=percent]>

控制材料輸入以接受百分比值的指令。

Inputs:

• percentErrorRenderer Function  允許客戶端使用自己的錯誤消息而不是默認消息的函數。

查看源碼。

MaterialInputDemoComponent

MaterialAutoSuggestInputDemoComponent

MaterialPercentInputDemoComponent

MaterialInputMixinDemoComponent

MaterialInputNumberValueAccessorDemoComponent

查看示例，查看源碼。

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }