Nostalgic Piano Music

    ng-stepper-nav

    1.0.1 • Public • Published

    ng-stepper-nav

    An Angular component which displays a vertically stacked sequence of steps. Use it to provide navigation, display information, or both. The Material Design language's List Component inspired this component's visual design.

    This project was generated with Angular CLI version 7.1.4.

    Installation

    npm install --save ng-stepper-nav

    Usage

    Add StepperNavModule to your app module:

    import { StepperNavModule } from 'ng-stepper-nav';
     
    @NgModule({
      bootstrap: [AppComponent],
      declarations: [AppComponent],
      imports: [BrowserModule, StepperNavModule.forRoot()]
    })
    class AppModule {}

    In your app component, simply add a <ng-stepper-nav> element, passing it the content via its steps input parameter. The StepContent interface is available for typing the content.

    import { StepContent } from 'ng-stepper-nav';
     
    @Component({
      selector: 'app',
      template: `
        <ng-stepper-nav [steps[]="content"></ng-stepper-nav>
      `
    })
    class AppComponent {
      content: StepContent[] = [
        {
          primaryText: 'Steal the Millenium Falcon.',
        },
        {
          primaryText: 'Fix the hyperdrive.',
          secondaryText: `It's broken. Again.`
        },
        {
          primaryText: 'Rejoin the Resistance fleet.'
        }
      ];
    }

    Behavior

    The component renders a series of zero-to-many list items, using semantic <ol> and <li> elements. All steps except the last step display the step's number in an icon, while the final step displays a checkmark in an icon. Each step displays its primary text at the standard font size (1rem) and its optional secondary text at a smaller font size (0.875rem).

    The component's steps input parameter is required. If the input is undefined, null, or an empty array, the component will not render anything.

    Inputs

    The stepper nav component has a single input.

    Name Type Description
    steps StepContent[] An array of objects, each of which populates a single step. The order of the objects dictates the order of the rendered steps.

    Development

    Development server

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Build

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    Running unit tests

    Run ng test to execute the unit tests via Karma.

    Further help

    To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

    Install

    npm i ng-stepper-nav

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    33 kB

    Total Files

    33

    Last publish

    Collaborators

    • brentmiller