ngx-foundation

The best way to quickly integrate Zurb Foundation for Sites (6.4 or later) components with Angular 6 or 7. This is a fork of ngx-bootstrap by Valor Software. No jQuery is required to implement with your Angular project.

Links

• Documentation and Code Examples
• Changelog and Release Notes

Table of contents

1. Getting Started
2. Installation Instructions
3. API and Demo
4. Starter Kit
5. Troubleshooting
6. License

Getting Started

ngx-foundation contains all core Foundation components powered by Angular. There is no need to include original JS components, but we are using markup and SCSS provided by Foundation for Sites.

See the ngx-foundation website for detailed setup instructions, SCSS /style.scss setup file example and more....

Installation instructions

Install ngx-foundation from yarn or npm:

yarn add ngx-foundation
npm i ngx-foundation

Add needed package to NgModule imports:

import { TooltipModule } from 'ngx-foundation';

@NgModule({
  ...
  imports: [TooltipModule.forRoot(),...]
  ...
})

Add component to your page:

<button type="button" class="button primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

List of available modules for import:

import {
  AccordionModule,
  AlertModule,        // Foundation Callouts
  ButtonsModule,
  CarouselModule,     // Foundation Orbit
  CollapseModule,
  BsDatepickerModule,
  BsDropdownModule,   // Foundation Dropdown Menus and Dropdown Panes
  ModalModule,        // Foundation Reveal
  OffcanvasModule,
  PaginationModule,
  ProgressbarModule,
  RatingModule,
  SortableModule,
  TabsModule,
  TimepickerModule,
  TooltipModule,
  TypeaheadModule,
} from 'ngx-foundation';

Add ngx-foundation and Foundation SCSS Base Styles

Import ngx-foundation base styles to your main src/styles.scss file:

// Import Foundation for Sites
// See https://foundation.zurb.com/sites/docs/sass.html for detailed info.
@import '~foundation-sites/scss/foundation';
  @include foundation-everything;

// Import Angular ngx-foundation Framework Added Styles
@import "~ngx-foundation/assets/scss/main";

Download the ngx-foundation Starter Kit (uses Angular 7, Foundation for Sites using SCSS, and ngx-foundation) to get up and running quickly.

CSS Only

If you're going the flat CSS only route you will need Foundation 6 and ngx-foundation base styles:

• Foundation 6

  <!-- index.html -->
  <link href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0/dist/css/foundation.min.css" rel="stylesheet">

• ngx-foundation

  <!-- index.html -->
  <link href="https://cdn.jsdelivr.net/npm/ngx-foundation@1.0.6/dist/css/ngx-foundation.min.css" rel="stylesheet">

API and Demo

API documentation and usage scenarios available here: http://ngxfoundation.com

Starter Kit

Want to get your ngx-foundation project up and running quickly? Use the ngx-foundation Starter Kit (uses Angular 7, Foundation for Sites using SCSS, and ngx-foundation) with detailed instructions and includes all necessary base assets and components.

Troubleshooting

The best place to ask questions is on StackOverflow (under the ngx-foundation tag)

License

MIT