UI KIT */ develop in progress */ 🔋
Run npm install @fo-ox/fox-box-ui
The library uses the IMB Plex Sans
font family. To include a font in your angular project,
add @import "~node_modules/fox-box-ui/assets/fonts/font-face";
in your root style file
Use fox-button
selector on <button>
or <a>
tags.
class | _secondary |
_link |
_outline |
|
---|---|---|---|---|
default | ||||
_disable |
- loading: boolean
- loaderType: 'circle' | 'chart';
- loaderColor: string (html5 colors + hex)
- onClick: { disable: boolean; loading: boolean } - emit on click & tap
- onSubmit: void - emit on click & tap only button enable and not load
<button fox-button
class="_outline"
[class._disable]="disable"
[loading]="loading"
(onClick)="click($event)"
(onSubmit)="submit()"
>
<h3>Your template</h3>
</button>
edit space, font, color and other styles, via simple class
<button fox-button class="_secondary _customize">
<h3>Custom button styles</h3>
</button>
._customize {
color: olive;
background: bisque;
border-radius: 10px;
&:hover {
color: sandybrown;
}
}
Use fox-loader
selector
type | circle |
chart |
---|---|---|
loader |
- show: boolean
- type: 'circle' | 'chart';
- color: string (html5 colors + hex)
- size: string ('10px', '100vh', '10%')
Loader is proportionally stretched to full width of the parent container provided to it. If you want to fix the size - set size parameter to it
<fox-loader [size]="'10px'" [type]="'chart'" [color]="'yellow'" [show]="loading"></fox-loader>
You can also add color palettes, variables and mixins used in the library.
🌼 Works? Do not touch ;) 🌼