@mantic-ui/fomantic-ui-angular NPM

mantic UI

| Documentation | Github Repository | Support |

Fomantic UI theme for mantic UI Angular components

!!! This theme is currently not yet fully implemented and tested, and probably contains some bugs. So please use the Semantic UI Theme !!!

Example

A common button with some styling

Example of a common button

<m-button primary (click)="...">
  Save
</m-button>
<m-button (click)="...">
  Discard
</m-button>

Getting Started with Fomantic UI Theme

Install base package for angular and Fomantic UI theme

npm i @mantic-ui/angular @mantic-ui/fomantic-ui-angular

Import theme in AppModule

app.module.ts

import { FomanticUiModule } from '@mantic-ui/fomantic-ui-angular';

@NgModule({
  imports: [
    ...
    FomanticUiModule
  ]
})
export class AppModule { }

Apply style in AppComponent

app.component.html

<m-fomantic-ui-theme>
    <!-- Import common styles for site -->
    <m-fomantic-ui-site></m-fomantic-ui-site>
    <!-- Import reset to normalize values for CSS properties -->
    <m-fomantic-ui-reset></m-fomantic-ui-reset>
    <!-- Import local hosted lato font -->
    <m-fomantic-ui-lato-local></m-fomantic-ui-lato-local>
</m-fomantic-ui-theme>

As alternative for , you can use a CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.4.2/dist/fomantic.min.css">

Or install via Fomantic Docs

Configure package assets usage

angular.json

 "projects": {
    "<your-project-name>": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              // Copy all package assets to app asset folder on build
              {
                "glob": "**/*",
                "input": "./node_modules/@mantic-ui/fomantic-ui-angular/assets",
                "output": "/assets/"
              }
            }
          }
        }
      }
    }
  }