A set of UI components for Svelte framework based on Fomantic-UI library

Documentation

-- Coming soon --

Installation

``bash

npm

npm install jquery svantic

yarn

yarn add jquery svantic
`

Quick start with new project

Create a new project based on sveltejs/template

`bash
npx degit sveltejs/template svantic-app
cd svantic-app

npm

npm install

yarn

yarn install
`

Or you can use our svantic template, it comes pre-configured

`bash
npx degit ryu-man/svantic-template#main svantic-app
cd svantic-app

npm

npm install

yarn

yarn install
`



_NOTE: There are of course other ways to set up a project using svelte. This is just the quickest way to start._

$3

Because svantic uses dymanic import for better footprint and performance you have to configure rollup as following:

`js

output: {
...,
dir: "path to output directory",
entryFileNames: "index.js",
chunkFileNames: "[name].js"
},

`

Breaking Change

$3

used to load global scripts and stylesheets, must mounted on the top level of the app

`html


//

...

`

$3

allows acces to the top level dom elem instead of module controller

$3

to controll a module you use bind:this={varname} on the component to save an instance of its controller

$3

is a reactive store that allows subscribtion to a module and execute a callback when the component is mounted
`html




// ...


`

Usage

Add svantic and modify src/App.svelte file in the following way

`html



Hello world

`

or

`html


// mount Svantic component on the top level of the app

// onMount: allows control module behaviors
// settings: pass module settings
bind:this={$dropdownController}
onMount={(domElem) => {}}
settings={{}}
selection >

Select language

English
Arabic
Spanish
German



`

Another way to use Module.SubModule syntax

`html





Select language

English
Arabic
Spanish
German



`

Development

1. Clone this repo: git clone https://github.com/ryu-man/svantic.git
2. Install dependencies: npm i
3. Start building fomantic: npm run build:fomantic`

License

Code released under MIT license

Copyright © - ryu-man.