Skip to content

Instantly share code, notes, and snippets.

@mingfengwan
Created March 30, 2022 17:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mingfengwan/11642fc0e5f7473f74a6fb2ddcc7580a to your computer and use it in GitHub Desktop.
Save mingfengwan/11642fc0e5f7473f74a6fb2ddcc7580a to your computer and use it in GitHub Desktop.
MDB React pro version 3.0
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBStepperForm, MDBValidationItem, MDBRadio
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper verticalBreakpoint={768} linear>
<MDBStepperForm>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1'/>
<MDBStepperContent>
<MDBRadio label='Toggle this radio' required id='validationFormCheck1' name='radio-stacked'/>
<MDBRadio label='Toggle this radio' required id='validationFormCheck2' name='radio-stacked'/>
<MDBValidationItem invalid feedback='A long invalid feedback text.'>
<MDBRadio
label='Or toggle this other radio'
required
id='validationFormCheck3'
name='radio-stacked'
/>
</MDBValidationItem>
<p>Show that the vertical stepper height does not change, and the text below will get buried.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2'/>
<MDBStepperContent>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</MDBStepperContent>
</MDBStepperStep>
</MDBStepperForm>
</MDBStepper>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment