sveltetest13 v1.0.0

headless-svelte-ui

A group of headless components that can be used in building Svelte Apps.

Installation

npm i headless-svelte-ui

import {UseInput,UseBreadCrumb....} from "headless-svelte-ui";

UseInput

<UseInput
    theme="purple"   //color
    inputStyle="input-style"
    class="input-container"
    placeholder="searches for products"
    eyeIcon={false}
    errorIcon={true}
    leadingIcon={true}
    margin="2px"
    labelColor="black"
    isDisabled={false}
    state={type:"",message:""} //type: 'SUCCESS'or "VALIDATE" or "FAILURE"
    handleChange={handleChange}
/>

UseTab

<UseTab
    options=[{label:"fag",
    svg:"",
    labelColor:"blue",
    activeColor:"yellow"}]
>

UseBreadCrumb

<UseBreadCrumb
    optionValues=[{ label: "label", link: "#link" },]
    arrowSeparator={false}
    textColor="blue" //color
    labelColor="black"  //color
    margin="2px"
    isDisabled={false}
>

UsePaginationNav

<script>
  let items = [
    "Nitro1",
    "Casper2",
    "Jade3",
    "Hyper4" ]
    
  let currentPage = 1;
  let pageSize = 4;
  
  $: paginatedItems = paginate({ items, pageSize, currentPage });
</script>

<UsePaginationNav
   totalItems={items.length}
   paginationBorder={"1px solid #133474"}
   textColor = "#133474"
   pageSize={1}
   currentPage={1}
   limit={4}
   showStepOptions={true}
   input={false}
   on:setPage={(e) => (currentPage = e.detail.page)}
>