Interfaccia utente materiale — Personalizzazione passo passo

Blog

Material UI è una libreria di Material Design realizzata per React.



È un insieme di componenti React che hanno stili di Material Design.

In questo articolo, vedremo come personalizzare gli stepper con Material UI.



Stepper non lineari

Possiamo aggiungere stepper non lineari per aggiungere uno stepper che permetta agli utenti di navigare verso qualsiasi passaggio desiderino.

Ad esempio, possiamo scrivere:



import React from 'react'; import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; import StepButton from '@material-ui/core/StepButton'; import Button from '@material-ui/core/Button'; function getSteps() { return ['step 1', 'step 2', 'step 3']; } function getStepContent(step) { switch (step) { case 0: return 'do step 1'; case 1: return 'do step 2'; case 2: return 'do step 3'; default: return 'unknown step'; } } export default function App() { const [activeStep, setActiveStep] = React.useState(0); const [completed, setCompleted] = React.useState({}); const steps = getSteps(); const totalSteps = () => { return steps.length; }; const completedSteps = () => { return Object.keys(completed).length; }; const isLastStep = () => { return activeStep === totalSteps() - 1; }; const allStepsCompleted = () => { return completedSteps() === totalSteps(); }; const handleNext = () => { const newActiveStep = isLastStep() && !allStepsCompleted() ? steps.findIndex((step, i) => !(i in completed)) : activeStep + 1; setActiveStep(newActiveStep); }; const handleBack = () => { setActiveStep(prevActiveStep => prevActiveStep - 1); }; const handleStep = step => () => { setActiveStep(step); }; const handleComplete = () => { const newCompleted = completed; newCompleted[activeStep] = true; setCompleted(newCompleted); handleNext(); }; const handleReset = () => { setActiveStep(0); setCompleted({}); }; return ( {steps.map((label, index) => ( {label} ))} {allStepsCompleted() ? ( All steps completed - you're finished Reset ) : ( {getStepContent(activeStep)} Back Next {activeStep !== steps.length && (completed[activeStep] ? ( `Step {activeStep + 1} already completed` ) : ( {completedSteps() === totalSteps() - 1 ? 'Finish' : 'Complete Step'} ))} )} ); }

#programmazione #sviluppo-software #javascript #sviluppo web #tecnologia

medium.com

Interfaccia utente materiale — Personalizzazione passo passo

Possiamo aggiungere moduli a più passaggi in cui possiamo saltare i passaggi. Material UI è una libreria di Material Design realizzata per React. È un insieme di componenti React che hanno stili di Material Design. In questo articolo, vedremo come personalizzare gli stepper con Material UI.