資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中建立帶輸入框的滑塊？
由於 Material UI 提供了 Slider 元件，React 開發人員可以輕鬆地在 React 中新增或使用滑塊。在 Material UI 中，除了使用普通滑塊外，我們還可以定義一個輸入框，以便使用者手動輸入自定義值。在本文中，我們將學習如何在 Material UI 中建立帶輸入框的滑塊。
帶輸入框的滑塊是什麼？
帶輸入框的滑塊是一種使用者介面元素，它結合了兩種輸入技術，用於從預定範圍內選擇數值。通常，它包含一個滑塊元素和一個緊挨著的輸入框。使用者可以透過滑塊以視覺和互動的方式拖動滑塊上的手柄來調整值，而輸入框使用者可以手動輸入特定的值。
使用的 API
<Slider> − 此 API 用於建立滑塊元件，允許使用者在 React MUI 中不同範圍的專案中進行選擇
屬性
aria-label − 此屬性用於新增滑塊標籤。
aria-labelledby − 此屬性用於新增包含滑塊標籤的元素的 ID。
aria-valuetext − 此屬性用於為滑塊的值新增名稱。
classes − 此屬性用於覆蓋或向元件新增樣式。
color − 此屬性用於向滑塊元件新增不同的顏色。
components − 此屬性用於為每個滑塊插槽新增元件。
componentsProps − 此屬性用於為插槽元件新增屬性。
defaultValue − 此屬性用於新增預設值。
disabled − 此屬性用於停用滑塊元件。
disableSwap − 此屬性允許您在拖動另一個手柄時，不交換滑鼠指標懸停在某個手柄上的滑塊。
getAriaLabel − 此屬性用於新增一個返回滑塊標籤名稱的函式。
getAriaValueText − 此屬性用於新增一個返回滑塊標籤當前值的函式。
marks − 此屬性用於向滑塊新增預定值。
max − 此屬性用於向滑塊新增最大值。
min − 此屬性用於向滑塊新增最小值。
name − 此屬性用於新增隱藏輸入框的名稱。
onChange − 此屬性用於在觸發滑塊值時添加回調函式。
orientation − 此屬性用於更改滑塊元件的方向。
scale − 此屬性用於更改滑塊比例。
size − 此屬性用於更改滑塊的大小。
slotProps − 此屬性用於在滑塊內新增不同的屬性。
slots − 此屬性用於在滑塊內新增元件。
step − 此屬性用於在滑塊中新增步長。
sx − 此屬性用於在 Material UI 中新增樣式。
track − 此屬性用於向滑塊新增不同的軌道。
value − 此屬性用於向滑塊新增值。
valueLabelDisplay − 此屬性用於控制標籤的顯示值。
建立帶輸入框的滑塊的步驟
以下是使用 Material UI 建立帶輸入框的滑塊的步驟，以及它們各自的語法：
步驟 1：建立 React 應用程式
在進一步建立滑塊之前，我們必須擁有一個 React 應用程式。要建立一個新的 React 應用程式，請在您的終端中執行以下命令：
npx create react app sliderproject
專案建立完成後，透過執行以下命令導航到其目錄：
cd sliderproject
步驟 2：安裝 Material UI
建立 React 應用程式後，是時候將 Material UI 安裝到 React 應用程式中了。要安裝 MUI，請執行以下命令：
npm install @mui/material @emotion/react @emotion/styled
步驟 3：匯入並定義滑塊
現在，讓我們在主 App 元件中匯入並定義滑塊元件。
import React from "react";
import Slider from "@mui/material/Slider"
const App = () => {
function valuetext(val) {
return `${val}`;
}
return (
<div style={{
padding: 40,
width: '50%'
}}>
<Slider value onChange/>
<Input
value={value}
onChange={handleInputChange}
inputProps={{
step: 5,
min: 0,
max: 50,
}}
/>
</div>
);
};
export default App;
步驟 4：執行專案
要執行 React MUI 應用程式，請在終端中執行以下命令：
npm run start
關於帶輸入框的滑塊的建立就是這樣了。現在，讓我們看看一些不同方法的示例。
示例
在此示例中，我們在 Material UI 中建立了一個基本的帶輸入框的滑塊。使用輸入框可以幫助使用者輕鬆跳轉到他們所需的選中點，並且使使用者介面保持簡潔和井然有序。
import React from "react";
import Slider from "@mui/material/Slider"
import Input from '@mui/material/Input';
const App = () => {
const [val, setVal] = React.useState(48);
const handleSliderInput = (e, newValue) => {
setVal(newValue);
};
const handleInputChange = (e) => {
setVal(e.target.value === '' ? '' : Number(e.target.value));
};
return (
<div style={{
padding: 40,
width: '50%'
}}>
<Slider
value={typeof val === 'number' ? val : 0}
onChange={handleSliderInput}
aria-labelledby="slider-with-input"
/>
<Input
value={val}
size="small"
onChange={handleInputChange}
inputProps={{
step: 5,
min: 0,
max: 50,
type: 'number',
'aria-labelledby': 'slider-with-input',
}}
/>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們在 Material UI 中設計了一個包含始終可見的標籤的滑塊。為了確保標籤的顯示，我們可以使用 valueLabelDisplay 屬性。將其值設定為“on”。定義此屬性後，使用者選擇值時，它將顯示在滑塊上方。
import React from "react";
import Slider from "@mui/material/Slider"
import Input from '@mui/material/Input';
const App = () => {
const [val, setVal] = React.useState(68);
const handleSliderInput = (e, newValue) => {
setVal(newValue);
};
const handleInputChange = (e) => {
setVal(e.target.value === '' ? '' : Number(e.target.value));
};
return (
<div style={{
padding: 40,
width: '50%'
}}>
<Slider
value={typeof val === 'number' ? val : 0}
onChange={handleSliderInput}
aria-labelledby="slider-with-input"
valueLabelDisplay="on"
color="secondary"
/>
<Input
value={val}
size="small"
onChange={handleInputChange}
inputProps={{
step: 5,
min: 0,
max: 50,
type: 'number',
'aria-labelledby': 'slider-with-input',
}}
/>
</div>
);
};
export default App;
輸出
結論
總之，本文介紹了使用 React 在 Material UI 中建立帶輸入框的滑塊的過程。為此，我們使用了 Material UI 提供的 Input 元件。本文概述了建立帶輸入框的滑塊的分步說明。還提供了示例和相應的輸出結果。
533 次瀏覽
