near_me
開始使用
keyboard_arrow_downwidgets
組件
keyboard_arrow_downlocal_mall
資源
keyboard_arrow_down基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。
文字欄位
文字欄位一般使用在表單中。mdui 的文字欄位擁有字數統計、表單驗證等功能。
可以配合網格佈局系統進行表單版面配置。
呼叫方式
在頁面載入完後會自動初始化。對於動態產生的文字欄位，需要呼叫 mdui.mutation() 進行初始化。
色彩
使用強調色。
範例
<div class="mdui-textfield">
<input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>範例
<div class="mdui-textfield">
<label class="mdui-textfield-label">User Name</label>
<input class="mdui-textfield-input" type="text"/>
</div>範例
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" />
</div>範例
<div class="mdui-textfield">
<input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>
<!-- 固定標籤 -->
<div class="mdui-textfield">
<label class="mdui-textfield-label">User Name</label>
<input class="mdui-textfield-input" type="text" disabled />
</div>
<!-- 浮動標籤 -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" disabled />
</div>範例
<div class="mdui-textfield">
<textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>
<!-- 固定標籤 -->
<div class="mdui-textfield">
<label class="mdui-textfield-label">Subject</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- 浮動標籤 -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- 停用狀態 -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Disabled</label>
<textarea class="mdui-textfield-input" disabled></textarea>
</div>在 textarea 上添加 rows 屬性，則文字欄位的高度將固定不變。
範例
<div class="mdui-textfield">
<textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>含說明文字
在 <div class="mdui-textfield"></div> 內部末尾添加元素 <div class="mdui-textfield-helper"></div>，可以添加說明文字。
範例
<div class="mdui-textfield">
<input type="email" class="mdui-textfield-input" placeholder="Email" />
<div class="mdui-textfield-helper">Helper Text</div>
</div>範例
<div class="mdui-textfield">
<i class="mdui-icon material-icons">email</i>
<input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>
<!-- 固定標籤 -->
<div class="mdui-textfield">
<i class="mdui-icon material-icons">account_circle</i>
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" />
<div class="mdui-textfield-helper">Helper Text</div>
</div>
<!-- 浮動標籤、多行文字欄位 -->
<div class="mdui-textfield mdui-textfield-floating-label">
<i class="mdui-icon material-icons">textsms</i>
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- 停用狀態 -->
<div class="mdui-textfield">
<i class="mdui-icon material-icons">lock</i>
<input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>範例
<div class="mdui-textfield mdui-textfield-expandable">
<button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</button>
<input class="mdui-textfield-input" type="text" placeholder="Search"/>
<button class="mdui-textfield-close mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">close</i>
</button>
</div>
<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
<button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</button>
<input class="mdui-textfield-input" type="text" placeholder="Search"/>
<button class="mdui-textfield-close mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">close</i>
</button>
</div>功能
表單驗證
mdui 使用 HTML5 進行表單驗證，在 <div class="mdui-textfield"></div> 內部末尾添加元素 <div class="mdui-textfield-error"></div>，可以添加錯誤資訊。
若同時包含錯誤資訊和說明文字，需要把說明文字的元素放在錯誤資訊元素的後面。
範例
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" required />
<div class="mdui-textfield-error">使用者名稱不能為空</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" required />
<div class="mdui-textfield-error">電子郵件格式錯誤</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Password</label>
<input
class="mdui-textfield-input"
type="text"
pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
required
/>
<div class="mdui-textfield-error">密碼至少 6 位，且包含大小寫字母</div>
<div class="mdui-textfield-helper">請輸入至少 6 位，且包含大小寫字母的密碼</div>
</div>除了使用 HTML5 的表單驗證外，也可以使用 JavaScript 進行驗證。
在驗證不透過的文字欄位上添加類別 .mdui-textfield-invalid，驗證透過後移除該類別即可。
範例
<div class="mdui-textfield mdui-textfield-invalid">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" />
<div class="mdui-textfield-error">使用者名稱已存在</div>
</div>範例
<div class="mdui-textfield">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" maxlength="20" />
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" maxlength="60" />
<div class="mdui-textfield-error">電子郵件格式錯誤</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>動態產生的文字欄位
如果您的文字欄位是動態產生的，則需要呼叫 mdui.mutation() 進行初始化。
如果您動態修改了文字欄位內容，則需要呼叫 mdui.updateTextFields() 方法來重新初始化文字欄位。該方法可以接受一個含 .mdui-textfield 類別的 CSS 選取器、或者 DOM 元素、或者 DOM 元素組成的陣列作為參數，表示只重新初始化指定文字欄位。如果沒有傳入參數，將重新初始化頁面中的所有文字欄位。