資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中建立離散滑塊？
開發人員可以輕鬆地使用 Material UI 提供的 Slider 元件來實現滑塊。在 Material UI 中，滑塊可以是連續的或離散的。離散滑塊將選擇限制在特定的預定義值，而連續滑塊允許使用者在給定範圍內選擇任何值。在本文中，我們將學習如何在 Material UI 中建立離散滑塊。
什麼是離散滑塊？
與其他滑塊相比，離散滑塊僅允許使用者在特定範圍內選擇值。要在 React 中使用離散滑塊，我們可以透過引用其值指示器將滑塊調整到特定值。為此，我們可以為每個步驟建立一個標記，並使用名為“marks”的 prop 並將其值設定為 true。
使用的 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 − 此屬性用於更改滑塊元件的方向。
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 = () => {
return (
<div>
<Slider
defaultValue={30}
step={10}
marks
min={10}
max={110}
/>
</div>
);
};
export default App;
步驟 4：執行專案
要執行 React MUI 應用程式，請在終端中執行以下命令：
npm run start
這就是關於建立離散滑塊的所有內容。現在，讓我們看看一些不同方法的示例。
示例
在此示例中，我們建立了一個具有少量步長的離散滑塊。當用戶在滑塊上滑動時，使用者可以使用這些小步長在滑塊上選擇任何值。
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
aria-label="Small steps"
defaultValue={0.0004}
getAriaValueText={valuetext}
step={0.0004}
marks
min={0.0005}
max={0.01}
valueLabelDisplay="auto"
/>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了一個帶有自定義標記的離散滑塊。要建立自定義標記，我們首先建立了一個包含值和標籤的資料陣列，然後將該陣列傳遞給“marks”屬性，以便當使用者在滑塊上滑動時，使用者可以使用自定義步長在滑塊上選擇任何值。
import React from "react";
import Slider from "@mui/material/Slider"
const customMarks = [
{
value: 10,
label: '10 Marks',
},
{
value: 25,
label: '25 Marks',
},
{
value: 36,
label: '36 Marks',
},
{
value: 48,
label: '48 Marks',
},
{
value: 65,
label: '65 Marks',
},
];
const App = () => {
function valuetext(val) {
return `${val}`;
}
return (
<div style={{padding: 40,width: '50%'}}>
<Slider
aria-label="custom marks"
defaultValue={48}
getAriaValueText={valuetext}
step={10}
marks={customMarks}
valueLabelDisplay="on"
/>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了一個具有受限值的離散滑塊。要限制使用者選擇特定值，請使用 step 屬性並將值傳遞為 null。現在，當用戶在滑塊上滑動時，使用者無法選擇滑塊上的任何特定值，除非定義了要使用的值。
import React from "react";
import Slider from "@mui/material/Slider"
const customMarks = [
{
value: 10,
label: '10 Marks',
},
{
value: 25,
label: '25 Marks',
},
{
value: 36,
label: '36 Marks',
},
{
value: 48,
label: '48 Marks',
},
{
value: 65,
label: '65 Marks',
},
];
const App = () => {
function valuetext(val) {
return `${val}`;
}
return (
<div style={{padding: 40,width: '50%'}}>
<Slider
aria-label="custom marks"
defaultValue={48}
getAriaValueText={valuetext}
step={null}
marks={customMarks}
valueLabelDisplay="on"
/>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了一個始終顯示值的離散滑塊。
import React from "react";
import Slider from "@mui/material/Slider"
const customMarks = [
{
value: 10,
label: '10 Marks',
},
{
value: 25,
label: '25 Marks',
},
{
value: 36,
label: '36 Marks',
},
{
value: 48,
label: '48 Marks',
},
{
value: 65,
label: '65 Marks',
},
];
const App = () => {
function valuetext(val) {
return `${val}`;
}
return (
<div style={{padding: 40,width: '50%'}}>
<Slider
aria-label="custom marks"
defaultValue={48}
getAriaValueText={valuetext}
step={15}
marks={customMarks}
valueLabelDisplay="on"
/>
</div>
);
};
export default App;
輸出
結論
在本文中，我們學習瞭如何在 React 中使用 MUI 建立離散滑塊。為了全面瞭解離散滑塊，我們學習了完整的步驟以及不同的示例及其輸出。
165 次檢視
