0.0.5 โข Published 1 year ago
maxill-ui v0.0.5
Maxill UI is a component library based on the "Web Components" architecture (more specifically, Custom Elements) that runs in all browsers and in all libraries and frameworks such as: React
, Angular
, Svelte
, Vue
, etc.
This library with styles from bootstrap v 5.3
Getting Started
Project repository https://github.com/MarioTavarezMaxill/maxill-ui
List of internal project commands
Run Develop Mode ๐ป
npm run start
Storybook ๐จ
npm run storybook
Unit Testing ๐งช
npm run test
Build Component Library ๐๏ธ
npm run build
Install Library ๐
npm install --save maxill-ui@latest
Documentation
Maxill UI components
https://63adaf79cb9e1198036f2190-mgcokwbftn.chromatic.com/?path=/story/example-introduction--page
Docs
https://maxims.atlassian.net/wiki/spaces/H2/pages/118292567/Web+Components+Library+Maxill+UI
Usage and Installation ๐ง๐ปโ๐ป ๐ฉ๐ปโ๐ป
To start using the components, please follow these steps:
- Open the file
main.ts
and importdefineCustomElements
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { defineCustomElements } from 'maxill-ui/loader';
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => err);
defineCustomElements(window);
- Add the respective Types of each component.
When importing the library, it shows that the Type Sizes is being imported, which contains the types:
"Xs"
,"Small"
,"Medium"
and"Large"
import { Component } from '@angular/core';
import { Sizes } from 'maxill-ui/dist/types/components/atoms/Button/Button.types';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'boilerplate';
size: keyof typeof Sizes = 'Small';
onSave() {
alert('Say Hi ๐');
}
}
- Add your element to your
.html
component
<button-maxll [size]="size" (click)="onSave()">Click Me</button-maxll>
License
No License for the moment