A set of Fomantic-UI components for Svelte framework
npm install svantic
A set of UI components for Svelte framework based on Fomantic-UI library
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
`
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`