-
引用 2楼 -
引用 3楼 -
引用 4楼 -
引用 5楼 -
引用 6楼材质图标均匀地排列在字体基线处的 512x512 方块内。
与 fontAwesome 或常规（字母）字体不同，可见的字形/图标形状在视觉上与基线不对齐
作为一种解决方法，您可以添加基线移位类，例如使用
translateY()变换。.material-icons-baseline { transform: translateY(0.2em) }<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" /> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"> <h3>Baseline shift</h3> <p> <i class="material-icons material-icons-baseline">home</i> Home <i class="material-icons material-icons-baseline">login</i> Login </p> <h3>No Baseline shift</h3> <p> <i class="material-icons">home</i> Home <i class="material-icons">login</i> Login </p> <button> <i class="fa fa-sign-in-alt"></i> <i class="material-icons material-icons-baseline">login</i> Login </button> <button style="display:flex; align-items:center"> <i class="fa fa-sign-in-alt"></i> <i class="material-icons">login</i> Login </button> <button class="btn btn-lg btn-primary "> <i class="fa fa-sign-in-alt"></i> <i class="material-icons material-icons-baseline">login</i> Login </button> <button class="btn btn-lg btn-primary "> <div style="display:flex; align-items:center"> <i class="fa fa-sign-in-alt"></i> <i class="material-icons">login</i> Login </div> </button> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> -
-
-
引用 9楼 -
引用 10楼 -
-
引用 12楼 -
引用 13楼我正在尝试创建一个 POS 应用程序，其中单个产品可以有多个价格。因此，如果产品有多个价格，那么我会显示一个模式，但问题是我已经集成了
我正在尝试创建一个 POS 应用程序，其中单个产品可以有多个价格。因此，如果产品有多个价格，那么我会显示一个模式，但问题是我已在该模式中集成了快捷方式，但当第一次打开模式时，我想将焦点放在第一个表行上。我该怎么做？
这是我的代码
useEffect(() => { const handleShortCut = (e) => { const totalButtons = buttonsRef.current.length; if (e.altKey && e.key === 'ArrowUp') { setFocusedIndex((prevIndex) => (prevIndex - 1 + totalButtons) % totalButtons); } else if (e.altKey && e.key === 'ArrowDown') { setFocusedIndex((prevIndex) => (prevIndex + 1) % totalButtons); if (focusedIndex === totalButtons - 1) { setFocusedIndex(0); // Wrap around to the first element } } else if (e.key === 'Enter') { // Trigger a click event on the focused button const focusedButton = buttonsRef.current[focusedIndex]; if (focusedButton) { focusedButton.click(); } } }; window.addEventListener("keydown", handleShortCut); return () => { window.removeEventListener("keydown", handleShortCut); }; }, [focusedIndex]); useEffect(() => { buttonsRef.current[focusedIndex]?.focus(); buttonsRef.current.forEach((button, index) => { if (index === focusedIndex) { button.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; } else { button.style.backgroundColor = ''; } }); }, [focusedIndex]); useEffect(() => { console.log(2); if (focusedIndex === 0 || focusedIndex == null) { console.log(1); buttonsRef.current[0]?.focus(); buttonsRef.current.forEach((button, index) => { if (index === 0) { button.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; } else { button.style.backgroundColor = ''; } }); } }, [focusedIndex]);表格代码
<tbody> {multiplePrices.map((price, index) => ( <tr key={Math.random(Math.random() * Math.random())} onClick={() => { setProductIntoTheCart(price); setmodal_standard(!modal_standard) setFocusedIndex(null) }} ref={(el) => (buttonsRef.current[index] = el)} > <td>{index + 1}</td> <td>₹ {price.price_mrp}</td> <td>₹ {price.price_purchase}</td> <td>₹ {price.price_sales}</td> <td>₹ {price.price_online}</td> </tr> ))} </tbody> -
引用 14楼
-
-
-
引用 17楼
-
引用 18楼 -
引用 19楼 -
引用 20楼