IgxStepper provides a wizard-like workflow by dividing content into logical steps.

Remarks

The stepper component allows the user to navigate between multiple steps. It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step.

Type Parameters

Hierarchy

Hierarchy

  • Component<P & Omit<React.HTMLAttributes<HTMLElement>, keyof P>, {}>
    • IgrStepper

Constructors

  • Type parameters

    Type Parameters

    Parameters

    • props: P & Omit<HTMLAttributes<HTMLElement>, keyof P>

    Returns IgrStepper<P>

Properties

context: any

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
props: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>> & Readonly<{
    children?: ReactNode;
}>
refs: {
    [key: string]: ReactInstance;
}

Type declaration

  • [key: string]: ReactInstance
state: Readonly<{}>
contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

Accessors

  • get animationDuration(): number
  • The animation duration in either vertical or horizontal mode.

    Returns number

  • set animationDuration(v): void
  • Parameters

    • v: number

    Returns void

  • get contentTop(): boolean
  • Get/Set whether the content is displayed above the steps.

    Remarks

    Default value is false and the content is below the steps.

    Returns boolean

  • set contentTop(v): void
  • Parameters

    • v: boolean

    Returns void

  • get linear(): boolean
  • Get/Set whether the stepper is linear.

    Remarks

    If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.

    Returns boolean

  • set linear(v): void
  • Parameters

    • v: boolean

    Returns void

  • get nativeElement(): HTMLElement
  • Returns HTMLElement

  • get orientation(): StepperOrientation
  • Gets/Sets the orientation of the stepper.

    Remarks

    Default value is horizontal.

    Returns StepperOrientation

  • set orientation(v): void
  • Parameters

    Returns void

  • get stepType(): StepperStepType
  • Get/Set the type of the steps.

    Remarks

    Default value is full.

    Returns StepperStepType

  • set stepType(v): void
  • Parameters

    Returns void

  • get titlePosition(): StepperTitlePosition
  • Get/Set the position of the steps title.

    Remarks

    The default value is undefined. When the stepper is horizontally orientated the title is positioned below the indicator. When the stepper is horizontally orientated the title is positioned on the right side of the indicator.

    Returns StepperTitlePosition

  • set titlePosition(v): void
  • Parameters

    Returns void

Methods

  • Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.

    Calling Component#setState generally does not trigger this method.

    This method will not stop working in React 17.

    Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.

    Parameters

    • nextProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • nextContext: any

    Returns void

  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

  • Returns void

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    • prevProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • prevState: Readonly<{}>
    • Optional snapshot: any

    Returns void

  • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

    Returns void

  • Returns void

  • Parameters

    • name: string

    Returns any

  • Parameters

    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.

    Parameters

    • prevProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • prevState: Readonly<{}>

    Returns any

  • Activates the step at a given index.

    Parameters

    • index: number

    Returns void

  • Activates the next enabled step.

    Returns void

  • Activates the previous enabled step.

    Returns void

  • Returns DOMElement<{
        children: any[];
        class: (P & Omit<HTMLAttributes<HTMLElement>, keyof P>)["className"];
        id: (P & Omit<HTMLAttributes<HTMLElement>, keyof P>)["id"];
        ref: ((ref) => void);
        style: {};
    }, any>

  • Resets the stepper to its initial state i.e. activates the first step.

    Remarks

    The steps' content will not be automatically reset.

    Returns void

  • Parameters

    • element: any

    Returns void

  • Type parameters

    Type Parameters

    • K extends never

    Parameters

    • state: {} | ((prevState, props) => {} | Pick<{}, K>) | Pick<{}, K>
    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • nextProps: any
    • nextState: any

    Returns boolean