@mantic-ui/semantic-ui-angular NPM

mantic UI

| Documentation | Github Repository | Support |

Semantic UI theme for mantic UI Angular components

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 Semantic UI Theme

Install base package for angular and Semantic UI theme

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

Import theme in AppModule

app.module.ts

import { SemanticUiModule } from '@mantic-ui/semantic-ui-angular';

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

Apply style in AppComponent

app.component.html

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

As alternative for , you can use a CDN

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

Or install via Semantic 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/semantic-ui-angular/assets",
                "output": "/assets/"
              }
            }
          }
        }
      }
    }
  }