@slickteam/slick-login NPM

\

Description

An authentication card that return's an event with a payload that contains both input's content. The web component was made using lit element.

Installation

npm i @slickteam/slick-login

Usage

Html vanilla

<script type="module">
  import '@slickteam/slick-login';
</script>

<slick-login></slick-login>

Vue.js

<template>
  <div>
    <h1>Test Page</h1>
    <slick-login
        :imgSrc="image"
    ></slick-login>
  </div>
</template>

<script>
import '@slickteam/slick-login';
import image from './path/to/image/file'

export default {
  name: 'TestPage', 
  data() {
      return {
          image: image,
      }
  },
}
</script>

<style scoped>
/* Put CSS */
</style>

Template

    <slick-login
      showConsoleHelp
      firstLabel="First input's label"
      secondLabel="Second input's label"
      buttonText="Button's text"
      hideLogo
      imgSrc
    ></slick-login>

Properties

Name	Type	Description
`showConsoleHelp`	Boolean	Show hints about event and payload status
`firstLabel`	String	Define label text of the first input
`secondLabel`	String	Define label text of the second input
`buttonText`	String	Define button's text
`hideLogo`	Boolean	Hide the logo header div if not needed
`imgSrc`	String	The path to the image that will be displayed as the header