Top

Component

Installing Bootstrap

We have use bootstrap to design most of the components, make sure you install it and integrate with the project.

step 1:

npm install --save bootstrap
Basic UI Elements

Inside Your template tags add

<script>
    import { Button } from 'sveltestrap';
</script>

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="info">Info</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>

To use another types button you have to link the related css file according to types of buttons in a head tag

PrimarySecondarySuccessInfoWarningDangerLightDark

Inside Your template tags add

<script>
    import { Badge } from 'sveltestrap';
</script>

<Badge color="primary">Primary</span>
<Badge color="secondary">Secondary</span>
<Badge color="success">Success</span>
<Badge color="info">Info</span>
<Badge color="warning" class="text-dark">Warning</span>
<Badge color="danger">Danger</span>
<Badge color="light" class="text-dark">Light</span>
<Badge color="dark">Dark</span>

Inside Your template tags add

<script >
    import { Progress } from 'sveltestrap';
</script>

<Progress />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />
  
<script>
    import { Alert } from 'sveltestrap';
</script>

<Alert color="primary" fade={false}>This is a info alert—check it out!</Alert>
<Alert color="secondary">This is a light alert—check it out!</Alert>
<Alert color="success">This is a success alert—check it out!</Alert>
<Alert color="info">This is a danger alert—check it out!</Alert>
<Alert color="warning">This is a secondary alert—check it out!</Alert>
<Alert color="danger">This is a warning alert—check it out!</Alert>
<Alert color="light">This is a dark alert—check it out!</Alert>
<Alert color="dark">This is a dark alert—check it out!</Alert>
Dismissible popover

In your plugins/plugins.ts file all the following code:

<script>
    import { Popover } from 'sveltestrap';
</script>
<a class="btn btn-primary" id="btnDismissible" tabindex="0">Click to toggle popover</a>
<Popover placement="right" target="btnDismissible" dismissible title="Popover with hover">
<a class="btn btn-secondary" id="btnDismissible" tabindex="0" >Dismissible popover</a>
<Popover placement="right" target="btnDismissible" dismissible title="Popover with hover">
<a class="btn btn-success" id="btnDismissible" tabindex="0" >On Hover Tooltip</a>
<Popover placement="right" target="btnDismissible" dismissible title="Popover with hover">

In your file all the following code:

<Button id="top">
    <Tooltip target="top" placement="top">Top<Tooltip>
</Button>

Inside Your template tags add

<button class="example-popover btn btn-primary" v-tooltip="'Popover title'">Hover Me</button>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Inside Your template tags add

 <Nav tabs>
    <NavItem>
        <NavLink href="#" active>Link</NavLink>
    </NavItem>
    <Dropdown nav {isOpen} toggle={() => (isOpen = !isOpen)}>
        <DropdownToggle nav caret>Dropdown</DropdownToggle>
        <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Another Action</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <NavItem>
        <NavLink href="#">Link</NavLink>
    </NavItem>
    <NavItem>
        <NavLink href="#">Another Link</NavLink>
    </NavItem>
    <NavItem>
        <NavLink disabled href="#">Disabled Link</NavLink>
    </NavItem>
</Nav>

Inside Your script tags add

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Inside Your template tags add

 <div class="default-according" id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
  <button class="btn btn-link ps-0" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #<span>1</span></button>
</h5>
</div>
<div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="card-body">{{desc}}</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
  <button class="btn btn-link ps-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #<span>2</span></button>
</h5>
</div>
<div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordion">
<div class="card-body">{{desc}}</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
  <button class="btn btn-link ps-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #<span>3</span></button>
</h5>
</div>
<div class="collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordion">
<div class="card-body">{{desc}}</div>
</div>
</div>
</div>

Inside Your script tags add

import { ref } from 'vue';
const desc = ref<string>("Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.")
Advance UI Elements

Installing and usage

npm i svelte-toasts

Inside Your template tags add

<script>
    import { Button, Col } from 'sveltestrap'
    import Card from '../../core/card.svelte'
    import { toasts, ToastContainer, FlatToast } from 'svelte-toasts'
    import { BasicExample} from '../../../utils/Constant/Constant'
    import data from "../../../data/BonusUi/Toasts.json"
    const basicToaster = (toastname) => {
        switch (toastname) {
        case 'basicsuccessToast':
            toasts.add({
            theme: 'dark',
            description: 'Success Notification !',
            placement: 'top-right',
            type: 'success',
            showProgress: true,
            })
            break
        case 'basicinfoToast':
            toasts.add({
            description: 'Info Notification !',
            placement: 'top-right',
            type: 'info',
            showProgress: true,
            })
            break
        case 'basicwarningToast':
            toasts.add({
            description: 'Warning Notification !',
            placement: 'top-right',
            type: 'warning',
            showProgress: true,
            })
            break
        case 'basicdangerToast':
            toasts.add({
            description: 'Danger Notification !',
            placement: 'top-right',
            type: 'error',
            showProgress: true,
            })
            break
        default:
            break
        }
    }     
</script> 
<ToastContainer {toasts} let:data>
    <FlatToast {data} />
</ToastContainer>
<Col sm="12">
    <Card headerTitle={BasicExample} cardBodyProps="btn-showcase">
        <div slot="content">
            {#each data.toasterData as toasterItem}
                <Button
                name={toasterItem.name}
                color={toasterItem.color}
                on:click={(e) => basicToaster(e.target.name)}>
                    {toasterItem.title}
                </Button>
            {/each}
        </div>
    </Card>
</Col>

Inside Your script tags add


 import { createToaster } from "@meforma/vue-toaster";
 const toaster = createToaster({})
 function success() {
     toaster.show(' New order has been placed ', { theme: 'outline', position: 'top-right', type: 'success', duration: 2000 });
 }
Supplemental

Installing and usage

npm install vue-star-rating@next

Inside Your template tags add

<star-rating :show-rating="false" :star-size="20" :max-rating="10" @update:rating="rating1 = $event" ></star-rating>
<pre class="mb-0 rating-pre" >Rating {{rating}}</pre>

Inside Your script tags add


import StarRating from 'vue-star-rating';

 export default {
  components:{
    StarRating,
 },
 data(){
   return{
     rating: "0",
     rating1:"0",
     rating2:"0",
      disabled: false
   }
 },
 methods:{
   currentRatingText() {
   return this.rating 
 },
}
Supplemental

Installing and usage

npm i svelte-tree-view-component

In your composables treeView.ts file all the following code:

<script>
    import { TreeView, TreeBranch, TreeLeaf } from "svelte-tree-view-component";     
</script> 
<TreeView>
    <TreeBranch rootContent="Root">
        <TreeBranch defaultClosed rootContent="Applications">
            <TreeBranch rootContent="ECommerce">
                <TreeLeaf>Product</TreeLeaf>
                <TreeLeaf>Cart</TreeLeaf>
                <TreeLeaf>Invoice</TreeLeaf>
            </TreeBranch>
            <TreeBranch rootContent="Users">
                <TreeLeaf>Users-profile</TreeLeaf>
                <TreeLeaf>Users-edit</TreeLeaf>
                <TreeLeaf>Users-cards</TreeLeaf>
            </TreeBranch>
            <TreeBranch rootContent="Chat">
                <TreeLeaf>Chat-app</TreeLeaf>
                <TreeLeaf>Video-chat</TreeLeaf>
            </TreeBranch>
        </TreeBranch >
        <TreeBranch rootContent="Components">
            <TreeBranch rootContent="UI-Kits">
                <TreeLeaf>Typography</TreeLeaf>
                <TreeLeaf>Avatars</TreeLeaf>
                <TreeLeaf>Grid</TreeLeaf>
            </TreeBranch>
            <TreeBranch rootContent="Bonus-UI">
                <TreeLeaf>Toasts</TreeLeaf>
                <TreeLeaf>Rating</TreeLeaf>
                <TreeLeaf>Pagination</TreeLeaf>
            </TreeBranch>
            <TreeBranch rootContent="Charts">
                <TreeLeaf>Apex-chart</TreeLeaf>
                <TreeLeaf>Google-chart</TreeLeaf>
            </TreeBranch>
        </TreeBranch >
        <TreeBranch rootContent="Miscellaneous">
            <TreeBranch defaultClosed rootContent="Gallery">
                <TreeLeaf>Gallery-grid</TreeLeaf>
                <TreeLeaf>Gallery-grid-desc</TreeLeaf>
                <TreeLeaf>Masonry-gallery</TreeLeaf>
            </TreeBranch>
            <TreeBranch rootContent="Blog">
                <TreeLeaf>Blog-details</TreeLeaf>
                <TreeLeaf>Blog-single</TreeLeaf>
                <TreeLeaf>Add-post</TreeLeaf>
            </TreeBranch>
            <TreeBranch rootContent="Charts">
                <TreeLeaf>Apex-chart</TreeLeaf>
                <TreeLeaf>Google-chart</TreeLeaf>
            </TreeBranch>
        </TreeBranch >
    </TreeBranch>
</TreeView>
Supplemental

Installing and usage

npm i svelte-toasts

Inside Your template tags add

<script>
    import { Button, Col } from 'sveltestrap'
    import Card from '../../core/card.svelte'
    import { toasts, ToastContainer, FlatToast } from 'svelte-toasts'
    import { BasicExample} from '../../../utils/Constant/Constant'
    import data from "../../../data/BonusUi/Toasts.json"
    const basicToaster = (toastname) => {
        switch (toastname) {
        case 'basicsuccessToast':
            toasts.add({
            theme: 'dark',
            description: 'Success Notification !',
            placement: 'top-right',
            type: 'success',
            showProgress: true,
            })
            break
        case 'basicinfoToast':
            toasts.add({
            description: 'Info Notification !',
            placement: 'top-right',
            type: 'info',
            showProgress: true,
            })
            break
        case 'basicwarningToast':
            toasts.add({
            description: 'Warning Notification !',
            placement: 'top-right',
            type: 'warning',
            showProgress: true,
            })
            break
        case 'basicdangerToast':
            toasts.add({
            description: 'Danger Notification !',
            placement: 'top-right',
            type: 'error',
            showProgress: true,
            })
            break
        default:
            break
        }
    }     
</script> 
<ToastContainer {toasts} let:data>
    <FlatToast {data} />
</ToastContainer>
<Col sm="12">
    <Card headerTitle={BasicExample} cardBodyProps="btn-showcase">
        <div slot="content">
            {#each data.toasterData as toasterItem}
                <Button
                name={toasterItem.name}
                color={toasterItem.color}
                on:click={(e) => basicToaster(e.target.name)}>
                    {toasterItem.title}
                </Button>
            {/each}
        </div>
    </Card>
</Col>

Inside Your script tags add

import { ref } from "vue"
 import { notify } from "@kyvg/vue3-notification";
 const enternotify = ref<string>("top left")
 const entericon = ref<string>("none")
 interface notifys {
     position: string, icon: string
 }
 const notifyList = ref<notifys[]>([
     { icon: "none", position: "" },
     { position: "top left", icon: "fa fa-check-square" },
     { position: "top right", icon: "fa fa-warning" },
     { position: "bottom left", icon: "fa fa-cloud-download" },
     { position: "bottom right", icon: "fa fa-unlock-alt" },
 ])
 function showNotify() {
 
     notify({
         title: "New Order has been placed",
 
     });
 }
Supplemental

Installing and usage

npm i sweetalert

Inside Your script tags add

<script>
import swal from 'sweetalert';
const handleAlert =()=>{
    swal("Welcome! to the Viho theme"); 
}  
</script> 
<Button color="primary" class="sweet-1" on:click={handleAlert}>
    {Clickit}
</Button>
Supplemental

Installing and usage

npm i svelte-range-slider-pips

In your plugins/plugins.ts file all the following code:

<script>
    import RangeSlider from 'svelte-range-slider-pips';
</script> 
<RangeSlider range="min" value={[550]} first='label' last='label' min={100} max={1000} float />

Inside Your script tags add


 import { ref } from "vue"
 const one = ref({
     value: 10,
     data: [10, 100]
 })
Supplemental

Installing and usage

npm i svelte-file-dropzone

In your plugins/ plugins.ts file all the following code:

<script>
import Card from "../../core/card.svelte";
import { Col } from "sveltestrap";
import Dropzone from "svelte-file-dropzone";
import { DefaultFileUpload, DefaultFileUploadMessage } from "../../../utils/Constant/Constant";
let files = {
    accepted: [],
    rejected: [],
};

function handleFilesSelect(e) {
    const { acceptedFiles, fileRejections } = e.detail;
    files.accepted = [...files.accepted, ...acceptedFiles];
    files.rejected = [...files.rejected, ...fileRejections];
}    
</script> 
<div class="dropzone-content">
<Dropzone on:drop={handleFilesSelect} multiple={false} />
<ol>
    {#each files.accepted as dropItem}
        <li>{dropItem.name}</li>
    {/each}
</div>
Supplemental
Forms

Installing and usage

npm i datepicker

In your plugins/ plugins.ts file all the following code:

<div class="date-picker">
<Form class="theme-form">
    <Row class="mb-3 g-3">
    <Label class="col-sm-3 col-form-label text-sm-end">Default</Label>
    <Col xl="5" sm="9">
        <InputGroup>
        <Input class="datepicker-here digits" type="text" data-language="en" data-bs-original-title="" title="" />
        </InputGroup>
    </Col>
    </Row>
</Form>
</div>
Supplemental

Installing and usage

npm i -D svelte-typeahead

In your composables typeaheadview.ts file all the following code:

<Form class="theme-form">
<FormGroup>
    <Typeahead placeholder="States of USA" {data} extract={(typeItem) => typeItem.state} on:select={({ detail }) => events = [...events, detail]} on:clear={() => events = [...events, "clear"]} />
</FormGroup>
</Form>
Supplemental
Tables
Id First Name Last Name Username Designation Company Language Country
1 Ram Jacob Wolfe RamJacob@twitter Developer Apple Inc. Php IND
2 John Deo Gummer JohnDeo@twitter Designer Hewlett packard Html US
3 Elana John Cazale ElanaJohn@twitter Designer Microsoft Pug UK
4 Meryl Streep Roberts MerylStreep@twitter Developer Tata Ltd. React IDN
5 Emma Stone Stone EmmaStone@twitter Developer Wipro Ltd. Vue IRN

Inside Your template tags add

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr class="border-bottom-primary">
        <th scope="col">Id</th>
        <th scope="col">First Name</th>
         <th scope="col">Last Name</th>
         <th scope="col">Username</th>
         <th scope="col">Designation</th>
         <th scope="col">Company</th>
         <th scope="col">Language</th>
         <th scope="col">Country</th>
      </tr>
    </thead>
    <tbody >
      <tr :class="data.borderColor" v-for="data in bootstraplist" :key="data">
       <th scope="row">{{data.id}}</th>
       <td><img  :src="getImgUrl(data.img)" alt="" class="img-fluid me-2 rounded-circle">{{data.firstName}}</td>
       <td>{{data.lastName}}</td>
       <td>{{data.userName}}</td>
       <td>{{data.role}}</td>
       <td>{{data.company}}</td>
       <td>
       <div class="badge " :class="data.badgeClass">
      {{data.language}}
      </div>
      </td>
      <td>{{data.country}}</td>
      </tr>
    </tbody>
  </table>
</div>

Inside Your json tags add

{
"datatable1": [
{
  "id": 1,
  "img": "user/1.jpg",
  "firstName": "Ram Jacob",
  "lastName": "Wolfe",
  "userName": "RamJacob@twitter",
  "role": "Developer",
  "company": "Apple Inc.",
  "language": "Php",
  "badgeClass": "badge-light-danger",
  "credit": "$3500.00",
  "borderColor": "border-bottom-secondary",
  "country": "IND"
},
{
  "id": 2,
  "img": "user/2.png",
  "firstName": "John Deo",
  "lastName": "Gummer",
  "userName": "JohnDeo@twitter",
  "role": "Designer",
  "company": "Hewlett packard",
  "language": "Html",
  "badgeClass": "badge-light-primary",
  "credit": "$2400.00",
  "borderColor": "border-bottom-success",
  "country": "US"
},
{
  "id": 3,
  "img": "user/3.jpg",
  "firstName": "Elana John",
  "lastName": "Cazale",
  "userName": "ElanaJohn@twitter",
  "role": "Designer",
  "company": "Microsoft",
  "language": "Pug",
  "badgeClass": "badge-light-danger",
  "credit": "$2560.00",
  "borderColor": "border-bottom-info",
  "country": "UK"
},
{
  "id": 4,
  "img": "user/3.png",
  "firstName": "Meryl Streep",
  "lastName": "Roberts",
  "userName": "MerylStreep@twitter",
  "role": "Developer",
  "company": "Tata Ltd.",
  "language": "React",
  "badgeClass": "badge-light-success",
  "credit": "$1870.00",
  "borderColor": "border-bottom-warning",
  "country": "IDN"
},
{
  "id": 5,
  "img": "user/6.jpg",
  "firstName": "Emma Stone",
  "lastName": "Stone",
  "userName": "EmmaStone@twitter",
  "role": "Developer",
  "company": "Wipro Ltd.",
  "badgeClass": "badge-light-primary",
  "language": "Vue",
  "credit": "$4580.00",
  "borderColor": "border-bottom-danger",
  "country": "IRN"
},
{
  "id": 6,
  "img": "user/7.jpg",
  "firstName": "Eliana Jons",
  "lastName": "Jons",
  "userName": "ElianaJons@twitter",
  "role": "Developer",
  "company": "Info Ltd.",
  "badgeClass": "badge-light-success",
  "language": "Vue",
  "credit": "$4580.00",
  "borderColor": "border-bottom-light",
  "country": "IRN"
}
]
}
Charts

Installing and usage

npm i svelte-apexcharts

In your plugins/plugins.ts file all the following code:

// basic area chart
let options = {
    chart: {
    type: "bar",
    },
    series: [
    {
        name: "sales",
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    },
    ],
    xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
    },
};

Inside Your script tags add

import chart from "@/data/chart.json"
 let primary = ref('#24695c')
primary.value = useCookie('primary_color').value ? useCookie('primary_color').value : '#24695c'
const series = [
    {
        name: "STOCK ABC",
        data: chart.monthDataSeries1.prices,
    },
]
const chartOptions = {
    chart: {
        height: 350,
        type: "area",
        zoom: {
            enabled: false,
        },
        toolbar: {
            show: false,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        curve: "straight",
    },
    title: {
        text: "Fundamental Analysis of Stocks",
        align: "left",
    },
    subtitle: {
        text: "Price Movements",
        align: "left",
    },
    labels: chart.monthDataSeries1.dates,
    xaxis: {
        type: "datetime",
    },
    yaxis: {
        opposite: true,
    },
    legend: {
        horizontalAlign: "left",
    },
    colors: [primary.value],
}

Inside Your json tags add

{
"monthDataSeries1": {
    "prices": [
        8107.85,
        8128.0,
        8122.9,
        8165.5,
        8340.7,
        8423.7,
        8423.5,
        8514.3,
        8481.85,
        8487.7,
        8506.9,
        8626.2,
        8668.95,
        8602.3,
        8607.55,
        8512.9,
        8496.25,
        8600.65,
        8881.1,
        9340.85
    ],
    "dates": [
        "13 Nov 2017",
        "14 Nov 2017",
        "15 Nov 2017",
        "16 Nov 2017",
        "17 Nov 2017",
        "20 Nov 2017",
        "21 Nov 2017",
        "22 Nov 2017",
        "23 Nov 2017",
        "24 Nov 2017",
        "27 Nov 2017",
        "28 Nov 2017",
        "29 Nov 2017",
        "30 Nov 2017",
        "01 Dec 2017",
        "04 Dec 2017",
        "05 Dec 2017",
        "06 Dec 2017",
        "07 Dec 2017",
        "08 Dec 2017"
    ]
}
}
Supplemental

Installing and usage

npm i svelte-chartjs

Inside Your template tags add

<GChart
    class="chart-overflow" 
    id="line-chart"
    type="LineChart"
    :data="line_chart.chartData_1"
    :options="line_chart.options_1" />

Inside Your script tags add

 import { SvelteComponentTyped } from "svelte";
import { Chart as ChartJS } from 'chart.js';
declare const __propDef: {
    props: {
        list?: string;
        step?: string | number;
        class?: string;
        dataset?: object;
        accept?: string;
        acceptcharset?: string;
        accesskey?: string;
        action?: string;
        allow?: string;
        allowfullscreen?: boolean;
        allowtransparency?: boolean;
        allowpaymentrequest?: boolean;
        alt?: string;
        as?: string;
        async?: boolean;
        autocomplete?: string;
        autofocus?: boolean;
        autoplay?: boolean;
        capture?: boolean | "environment" | "user";
        cellpadding?: string | number;
        cellspacing?: string | number;
        charset?: string;
        challenge?: string;
        checked?: boolean;
        cite?: string;
        classid?: string;
        cols?: number;
        colspan?: number;
        content?: string;
        contenteditable?: boolean | "false" | "true";
        innerHTML?: string;
        textContent?: string;
        contextmenu?: string;
        controls?: boolean;
        coords?: string;
        crossorigin?: string;
        currenttime?: number;
        decoding?: "async" | "sync" | "auto";
        data: import("chart.js").ChartData<"radar", number[], unknown>;
        datetime?: string;
        default?: boolean;
        defaultmuted?: boolean;
        defaultplaybackrate?: number;
        defer?: boolean;
        dir?: string;
        dirname?: string;
        disabled?: boolean;
        download?: any;
        draggable?: boolean | "false" | "true";
        enctype?: string;
        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
        for?: string;
        form?: string;
        formaction?: string;
        formenctype?: string;
        formmethod?: string;
        formnovalidate?: boolean;
        formtarget?: string;
        frameborder?: string | number;
        headers?: string;
        height?: string | number;
        hidden?: boolean;
        high?: number;
        href?: string;
        hreflang?: string;
        htmlfor?: string;
        httpequiv?: string;
        id?: string;
        inputmode?: string;
        integrity?: string;
        is?: string;
        ismap?: boolean;
        keyparams?: string;
        keytype?: string;
        kind?: string;
        label?: string;
        lang?: string;
        loading?: string;
        loop?: boolean;
        low?: number;
        manifest?: string;
        marginheight?: number;
        marginwidth?: number;
        max?: string | number;
        maxlength?: number;
        media?: string;
        mediagroup?: string;
        method?: string;
        min?: string | number;
        minlength?: number;
        multiple?: boolean;
        muted?: boolean;
        name?: string;
        nonce?: string;
        novalidate?: boolean;
        open?: boolean;
        optimum?: number;
        part?: string;
        pattern?: string;
        placeholder?: string;
        playsinline?: boolean;
        ping?: string;
        poster?: string;
        preload?: string;
        radiogroup?: string;
        readonly?: boolean;
        referrerpolicy?: string;
        rel?: string;
        required?: boolean;
        reversed?: boolean;
        role?: string;
        rows?: number;
        rowspan?: number;
        sandbox?: string;
        scope?: string;
        scoped?: boolean;
        scrolling?: string;
        seamless?: boolean;
        selected?: boolean;
        shape?: string;
        size?: number;
        sizes?: string;
        slot?: string;
        span?: number;
        spellcheck?: boolean | "false" | "true";
        src?: string;
        srcdoc?: string;
        srclang?: string;
        srcset?: string;
        start?: number;
        style?: string;
        summary?: string;
        tabindex?: number;
        target?: string;
        title?: string;
        translate?: "" | "yes" | "no";
        usemap?: string;
        value?: any;
        volume?: number;
        width?: string | number;
        wmode?: string;
        wrap?: string;
        about?: string;
        datatype?: string;
        inlist?: any;
        prefix?: string;
        property?: string;
        resource?: string;
        typeof?: string;
        vocab?: string;
        autocapitalize?: string;
        autocorrect?: string;
        autosave?: string;
        color?: string;
        controlslist?: "nodownload" | "nofullscreen" | "noplaybackrate" | "noremoteplayback";
        inert?: boolean;
        itemprop?: string;
        itemscope?: boolean;
        itemtype?: string;
        itemid?: string;
        itemref?: string;
        results?: number;
        security?: string;
        unselectable?: boolean;
        options?: import("chart.js/types/utils")._DeepPartialObject & import("chart.js").ElementChartOptions<"radar"> & import("chart.js").PluginChartOptions<"radar"> & import("chart.js").DatasetChartOptions<"radar"> & import("chart.js").ScaleChartOptions<"radar"> & import("chart.js").LineControllerChartOptions>;
        plugins?: import("chart.js").Plugin<"radar", import("chart.js/types/basic").AnyObject>[];
        'aria-activedescendant'?: string;
        'aria-atomic'?: boolean | "false" | "true";
        'aria-autocomplete'?: "none" | "inline" | "list" | "both";
        'aria-busy'?: boolean | "false" | "true";
        'aria-checked'?: boolean | "false" | "true" | "mixed";
        'aria-colcount'?: number;
        'aria-colindex'?: number;
        'aria-colspan'?: number;
        'aria-controls'?: string;
        'aria-current'?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time";
        'aria-describedby'?: string;
        'aria-details'?: string;
        'aria-disabled'?: boolean | "false" | "true";
        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup";
        'aria-errormessage'?: string;
        'aria-expanded'?: boolean | "false" | "true";
        'aria-flowto'?: string;
        'aria-grabbed'?: boolean | "false" | "true";
        'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog";
        'aria-hidden'?: boolean | "false" | "true";
        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
        'aria-keyshortcuts'?: string;
        'aria-label'?: string;
        'aria-labelledby'?: string;
        'aria-level'?: number;
        'aria-live'?: "off" | "assertive" | "polite";
        'aria-modal'?: boolean | "false" | "true";
        'aria-multiline'?: boolean | "false" | "true";
        'aria-multiselectable'?: boolean | "false" | "true";
        'aria-orientation'?: "horizontal" | "vertical";
        'aria-owns'?: string;
        'aria-placeholder'?: string;
        'aria-posinset'?: number;
        'aria-pressed'?: boolean | "false" | "true" | "mixed";
        'aria-readonly'?: boolean | "false" | "true";
        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals";
        'aria-required'?: boolean | "false" | "true";
        'aria-roledescription'?: string;
        'aria-rowcount'?: number;
        'aria-rowindex'?: number;
        'aria-rowspan'?: number;
        'aria-selected'?: boolean | "false" | "true";
        'aria-setsize'?: number;
        'aria-sort'?: "none" | "ascending" | "descending" | "other";
        'aria-valuemax'?: number;
        'aria-valuemin'?: number;
        'aria-valuenow'?: number;
        'aria-valuetext'?: string;
        updateMode?: "none" | "resize" | "reset" | "hide" | "show" | "normal" | "active";
        chart?: ChartJS<"radar", number[], unknown>;
    };
    events: {
        [evt: string]: CustomEvent;
    };
    slots: {};
};
export declare type RadarProps = typeof __propDef.props;
export declare type RadarEvents = typeof __propDef.events;
export declare type RadarSlots = typeof __propDef.slots;
export default class Radar extends SvelteComponentTyped {
}
export {};
//# sourceMappingURL=Radar.svelte.d.ts.map
Supplemental
Maps
npm i svelte-google-map

Inside Your template tags add

<GoogleMap :center="{lat:20.5937, lng:78.9629}" :zoom="12" style="width: auto; height: 500px"><GoogleMap>

Inside Your script tags add

import { GoogleMap, Marker } from "svelte-google-map";
Supplemental

Installing and usage

npm i @anoram/leaflet-svelte

Inside Your template tags add

<l-map :zoom="simple.zoom" global-leaflet="false" :center="simple.center" :useGlobalLeaflet="false"
style="height: 500px">
    <l-tile-layer :url="simple.url"><l-tile-layer>
    <l-map>
Supplemental