@ng-formworks/daisyui NPM

@ng-formworks/daisyui

This module is a dependency of the ng-formworks project and is meant to work as a framework installation module for using DaisyUI in the forms.

Getting started

If you are unfamiliar with with the ng-formworks project, it is highly recommended to first have a look at the @ng-formworks pages for examples, demos, options and documentation.

Getting started

npm install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/daisyui@latest

With YARN, run the following:

yarn add @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/daisyui@latest

Then import DaisyUIFrameworkModule in your main application module if you want to use daisyui UI, like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { DaisyUIFrameworkModule } from '@ng-formworks/daisyui';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    DaisyUIFrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template:

<json-schema-form
  loadExternalAssets="true"
  [schema]="yourJsonSchema"
  framework="daisyui"
  [theme]="yourTheme"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>

Where schema is a valid JSON schema object, and onSubmit calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the demo/assets/example-schemas folder, as described above.

framework is for the template you want to use, the default value is no-framwork. The possible values are:

material-design for Material Design (if installed).
bootstrap-3 for Bootstrap 3 (if installed).
bootstrap-4 for Bootstrap 4 (if installed).
bootstrap-5 for Bootstrap 5 (if installed).
daisyui for DaisyUi.
no-framework for (plain HTML).

theme is for the framework theme you want to use. The possible values for this framework are:

daisyui_default for the default theme.
light for the light theme.
dark for the dark theme.
cupcake for the cupcake theme.
cmyk for the cmyk theme.
pastel for the pastel theme.
daisyui_leaf for the leaf theme.

the list of available themes can also be gotten using the FrameworkLibraryService(found in '@ng-formworks/core'):

getFrameworkThemes()

method

Custom theming

Custom theming can be achieved in two ways:

the simplest is to overwrite the default theme(or any other themes) with css rules: css changes can be made using the data-theme attribute selector so for example to change the .btn class of the default theme, you would include the following rule in your application's styles

[data-theme="daisyui_default"] .btn {
    border-radius: 1rem
}

the other method is to add a new theme: the first step will be to create the entire theme (see the specific frameworks underlying documentation for how this can be done) and have it use the data-theme attribute selector for example:

[data-theme="daisyui_custom"] {
    background-color: green;
    font: 15px Arial, sans-serif;
    .
    .
    .
}
[data-theme="daisyui_custom"] .btn {
    border-color: coral;
    .
    .
    .
}

after making the css available, the theme will need to be registered using the
FrameworkLibraryService(found in '@ng-formworks/core'): for example

  constructor(
    .
    private frameworkLibrary: FrameworkLibraryService,
    .
    .
  ) { 

    frameworkLibrary.registerTheme({name:'daisyui_custom',text:'DaisyUi custom theme'})

  }

Using default DaisyUI css class names

By default, the framework prefixes all standard DaisyUI class names with 'dui-' for example '.btn' will become '.dui-btn'. The standard names can be switched back without the 'dui-' prefix if need be. To switch opf the 'dui-' prefixing, the DUIOPTIONS token value needs to be provided with the classPrefix property set to false-see code snippet below. By default the classPrefix property is true.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {DUIOPTIONS, DaisyUIFrameworkModule } from '@ng-formworks/daisyui';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    DaisyUIFrameworkModule
  ],
  providers: [
    { provide: DUIOPTIONS, useValue: {classPrefix:false} }
    ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }