@paul/theme (1.2.0)
Published 2023-10-12 21:10:31 +00:00 by hibas123
Installation
@paul:registry=npm install @paul/theme@1.2.0"@paul/theme": "1.2.0"About this package
ELIJAS-THEME DOCS
TODO
- Header <-> Content spacing bug (fixed/nofixed)
- Sidebar
- Docs fertig
Text
Headlines
Headline: big headline for sections NestedHeadline: smaller headline for use inside of components of sections
import NestedHeadline from "./components/text/headlines/Headline.svelte"; import
Headline from "./components/text/headlines/Headline.svelte";
<Headline>Value</Headline>
<NestedHeadline>Value</NestedHeadline>
Containers
Theme:
Container for wrapping all theme-related elements of an app.
import Theme from "./components/container/Theme.svelte";
<Theme> <!-- Subitems --> </Theme>
To access theme-context:
import { getContext } from 'svelte';
const theme = getContext < any > 'theme';
Loading
Container that enables a loading screen once it has been added.
import Loading from "./components/loading/Loading.svelte";
{#if loading === true}
<Loading />
{/if}
NotificationController & Notifications
Container to wrapp around all items, which easily can acess notification context
import NotificationController from
"./components/notifications/NotificationController.svelte";
<NotificationController> <!-- Subitems --> </NotificationController>
to add a notification
//EROR
notificationContext.addNotification(NotificationType.ERROR, 'message');
//SUCCESS
notificationContext.addNotification(NotificationType.SUCCESS, 'message');
Mobile
Container for wrapping all responsive items of an app.
import Theme from "./components/container/Mobile.svelte";
<Mobile> <!-- Subitems --> </Mobile>
To access the mobile query from everywhere:
import { mobile } from '../../states/media';
Content
Content container for main App content.
import Content from "./components/container/Content.svelte";
<content> <!-- Subitems --> </content>
Components
Header
Svelte component for site header. Per default header appears with default logo-text: "elijas" and theme button. Both are customizable via the default slot (nav) and the slot named "logo". The value for the hideTheme property is false per default. The value for the hideLogin property is true per default.
import Header from "./components/header/Header.svelte"; import HeaderItem from
"./components/header/Item.svelte"; import HeaderLink from
"./components/header/Link.svelte";
<header hideLogin="true|false" hideTheme="false|true">
<!-- 'logo' slot: Header-Logo -->
<!-- 'default' slot: nav -->
<HeaderItem>
<HeaderLink href="target">Link</HeaderLink>
</HeaderItem>
</header>
Forms
Validators: number,
import Form from "./components/form/Form.svelte";
import FormHeadline from "./components/form/components/FormHeadline.svelte";
import Input from "./components/form/components/Input.svelte";
import FormButton from "./components/form/components/FormButton.svelte";
import Select from "./components/form/components/Select.svelte";
import Option from "./components/form/components/Option.svelte";
import validator from "./helper/validator";
<Form on:submit={(data) => {functionToCall(data.detail.nameOfInput); }}>
<FormHeadline>Optional headline</FormHeadline>
<Input type={text|pw|number} placeholder={placeholder} name={name} validator?={validator.type}/>
<Select name={name}>
<Option value={value} selected>If empty = value</Option>
</Select>
<FormButton>If empty = Submit</FormButton>
</Form>
Table
import Table from "./components/table/Table.svelte"; import THead from
"./components/table/Head.svelte"; import THeadData from
"./components/table/HeadData.svelte"; import TBody from
"./components/table/Body.svelte"; import TRow from
"./components/table/Row.svelte"; import TData from
"./components/table/Data.svelte";
<table>
<thead>
<THeadData>Value</THeadData>
<THeadData>Value</THeadData>
<THeadData>Value</THeadData>
</thead>
<tbody>
<TRow>
<TData>Value</TData>
<TData>Value</TData>
<TData>Value</TData>
</TRow>
</tbody>
</table>
Dependencies
Dependencies
| ID | Version |
|---|---|
| svelte-loading-spinners | ^0.1.3 |
Development Dependencies
| ID | Version |
|---|---|
| @snowpack/plugin-svelte | ^3.4.1 |
| @snowpack/plugin-typescript | ^1.1.1 |
| @snowpack/plugin-webpack | ^2.2.0 |
| @tsconfig/svelte | ^1.0.0 |
| snowpack | ^2.18.5 |
| svelte | ^3.0.0 |
| svelte-check | ^1.0.0 |
| svelte-preprocess | ^4.6.1 |
| tslib | ^2.0.0 |
| typescript | ^3.9.3 |