資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 Material UI 中使用 scale 屬性來表示不同比例尺上的值？
在本文中，我們將探討如何在 Material UI 中使用“scale”屬性來表示不同比例尺上的值。
Material UI 的 Slider 元件中的“scale”屬性使您可以將滑塊的值範圍對映到一個比例尺上。此屬性的使用非常簡單易於實現。此外，當需要顯示和操作與滑塊預設線性比例尺不同的比例尺上的值時，此屬性非常有用。
如果我們談論它接受的值，那麼它充當一個函式，該函式將滑塊的值作為引數並返回其在所需比例尺上的值。稍後，在本文中，我們將看到它在 React MUI 中的不同實現。
Slider 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 − 此屬性用於控制顯示的標籤值。
使用 Scale 屬性的步驟
以下是 Material UI 中 Slider 元件中使用 scale 屬性的步驟，以及它們各自的語法：
步驟 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 元件中匯入並定義滑塊元件以及 scale 屬性。
import Slider from "@mui/material/Slider"
<Slider
value={val}
onChange={customFunction}
scale={customScaleFunction}
/>
步驟 4：執行專案
要執行 React MUI 應用程式，請在終端中執行以下命令：
npm run start
這就是關於在滑塊元件中使用 scale 屬性的全部內容。現在，讓我們看看一些不同方法的示例。
示例
給定的示例非常基本，使用 scale 屬性來表示不同比例尺上的值。這裡，使用者選擇的值將轉換為它的立方體並在標籤上顯示。
import React from "react";
import Slider from "@mui/material/Slider"
import { Typography } from "@mui/material";
import { useState } from "react";
const myCustomScale = (val) =>
Math.pow(val, 3);
const App = () => {
const [val, setVal] = useState();
const handleSliderInput = (e, newValue) => {
setVal(newValue);
};
return (
<div style={{padding: 40,width: '50%'}}>
<Typography id="custom-scale-slider" gutterBottom>
Tutorialspoint
</Typography>
<Slider
value={val}
step={2}
min={5}
max={20}
scale={myCustomScale}
onChange={handleSliderInput}
valueLabelDisplay="auto"
aria-labelledby="custom-scale-slider"
/>
</div>
);
};
export default App;
輸出
示例
此示例演示了使用 scale 屬性轉換不同儲存值的用法。在這裡，當用戶從滑塊中選擇任何值時，所選值將透過乘以 2 轉換為不同的儲存型別。
import React from "react";
import Slider from "@mui/material/Slider"
import { Typography } from "@mui/material";
function customLabel(val) {
const units = ['KB', 'MB'];
let unIdx = 0;
let customVal = val;
while (customVal >= 512 && unIdx < units.length - 1) {
unIdx += 1;
customVal /= 512;
}
return `${customVal} ${units[unIdx]}`;
}
const App = () => {
function customVal(val) {
return 2 ** val;
}
const [val, setVal] = React.useState(30);
const handleSliderInput = (e, newValue) => {
if (typeof newValue === 'number') {
setVal(newValue);
}
};
return (
<div style={{padding: 40,width: '50%'}}>
<Typography id="custom-scaled-slider" gutterBottom>
Increase memory: {customLabel(customVal(val))}
</Typography>
<Slider
value={val}
step={1}
min={5}
max={20}
scale={customVal}
onChange={handleSliderInput}
valueLabelFormat={customLabel}
aria-labelledby="custom-scaled-slider"
valueLabelDisplay="on"
/>
</div>
);
};
export default App;
輸出
示例
此示例說明了使用 scale 屬性來描繪比例尺上的值的流程。我們建立了一個轉換器，它將攝氏度轉換為華氏度並在比例尺上顯示結果。在這種情況下，scale 屬性在將溫度轉換為單位的同時，也允許使用者透過滑塊修改和觀察當前更新的所選值。
import React from "react";
import Slider from "@mui/material/Slider"
import { Typography } from "@mui/material";
import { useState } from "react";
const ctofconverter = (cel) => (cel * 9/5) + 32;
const App = () => {
const [val, setVal] = useState(30);
const handleTempConversion = (event, newValue) => {
setVal(newValue);
};
const fah = ctofconverter(val);
return (
<div style={{padding: 40,width: '50%'}}>
<Typography gutterBottom>
Temperature in Celsius {val}°C
</Typography>
<Slider
value={val}
onChange={handleTempConversion}
scale={ctofconverter}
aria-labelledby="custom-scaled-slider"
min={-20}
max={40}
color="secondary"
valueLabelDisplay="on"
/>
<Typography gutterBottom>
Temperature in Fahrenheit {fah}°F
</Typography>
</div>
);
};
export default App;
輸出
結論
總而言之，本文介紹瞭如何使用 scale 屬性來表示不同比例尺上的值，包括其完整的語法、步驟和使用 React MUI 的示例。我們學習了 scale 屬性如何在不實際使用 Material UI 中的任何第三方庫或模組的情況下有效地表示不同比例尺上的值。
瀏覽量：175
