@kws3/helpers
v0.5.12
Published
Helper components for Svelte applications
Downloads
2
Maintainers
Readme
Smaller helper components for use with Svelte applications.
Includes:
<Panel>
, <Loader>
, <Message>
, <Notification>
, <Icon>
.
Usage:
<Panel>
Import component:
import { Panel } from '@kws3/helpers';
Import Sass:
@import '../node_modules/@kws3/helpers/components/Panel/styles.scss';
Sass variables with default values:
$kws-panel-background: #fff;
$kws-panel-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
$kws-panel-title-color: #000;
$kws-panel-title-weight: 700;
$kws-panel-caret-open-color: #888;
$kws-panel-caret-closed-color: #00a4d8;
<Loader>
Import component:
import { Loader } from '@kws3/helpers';
Import Sass:
@import '../node_modules/@kws3/helpers/components/Loader/styles.scss';
Sass variables with default values:
$kws-loader-width: 2rem;
$kws-loader-height: 2rem;
$kws-loader-width-large: ($kws-loader-width * 3);
$kws-loader-height-large: ($kws-loader-height * 3);
$kws-loader-color: #ccc;
$kws-loader-overlay-background: rgba(0,0,0,0.15);
<Message>
Import component:
import { Message } from '@kws3/helpers';
No SCSS import
<Notification>
Import component:
import { Notification } from '@kws3/helpers';
No SCSS import
<Icon>
Requires FontAwesome version <= 4.7.0, this can be either loaded from your bundle, or from a CDN
Import component:
import { Icon } from '@kws3/helpers';
No SCSS import