| <!DOCTYPE html> |
| <!-- |
| @WAIT-FOR:Ready |
| @EXECUTE-AND-WAIT-FOR:selectChip() |
| @EXECUTE-AND-WAIT-FOR:removeChip() |
| @BLINK-ALLOW:htmlTag* |
| @BLINK-ALLOW:className* |
| --> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Material Web Input Chips</title> |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"> |
| <script type="module"> |
| import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js"; |
| injectImportMap(); |
| |
| const components = [ |
| "md-input-chip", |
| "md-chip-set", |
| "md-icon" |
| ]; |
| |
| loadAndWaitForReady(components, () => { |
| const statusDiv = document.getElementById("status"); |
| const chipSet = document.createElement("md-chip-set"); |
| const chips = [ |
| { label: "Input chip", id: "test-chip-1" }, |
| { label: "With avatar", icon: "person" }, |
| { label: "Removable", removeOnly: true, removeIcon: "close", id: "test-chip-2" } |
| ]; |
| chips.forEach(chipInfo => { |
| const chip = document.createElement("md-input-chip"); |
| chip.label = chipInfo.label; |
| if (chipInfo.id) { |
| chip.id = chipInfo.id; |
| } |
| if (chipInfo.icon) { |
| const icon = document.createElement("md-icon"); |
| icon.slot = "icon"; |
| icon.textContent = chipInfo.icon; |
| chip.appendChild(icon); |
| } |
| if (chipInfo.removeOnly) { |
| chip.removeOnly = true; |
| const icon = document.createElement("md-icon"); |
| icon.slot = "remove-trailing-icon"; |
| icon.textContent = chipInfo.removeIcon; |
| chip.appendChild(icon); |
| } |
| chipSet.appendChild(chip); |
| }); |
| statusDiv.appendChild(chipSet); |
| statusDiv.setAttribute("aria-label", "Ready"); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="status" aria-label="Loading"> |
| </div> |
| </body> |
| <script> |
| async function selectChip() { |
| const chip = document.getElementById("test-chip-1"); |
| if (chip) { |
| chip.selected = true; |
| await chip.updateComplete; |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Input Chip Selected"; |
| statusDiv.appendChild(statusText); |
| return "Input Chip Selected"; |
| } |
| return "Failed to select Input Chip"; |
| } |
| |
| async function removeChip() { |
| const chip = document.getElementById("test-chip-2"); |
| if (chip) { |
| chip.remove(); |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Input Chip Removed"; |
| statusDiv.appendChild(statusText); |
| return "Input Chip Removed"; |
| } |
| return "Failed to remove Input Chip"; |
| } |
| </script> |
| </html> |
