0.1.3 • Published 1 year ago

nuxt-float-label v0.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Nuxt Float Label

Nuxt Float Label

Developed by FMCX.

Features

  • Apply float labels automatically to your inputs, selects and textareas
  • Works on Nuxt 3
  • Fully css customizable

Quick Setup

  1. Add nuxt-float-label dependency to your project
# Using npm
npm i -D nuxt-float-label
  1. Add nuxt-float-label to the modules section of nuxt.config.js
{
  modules: [
    'nuxt-float-label'
  ]
}

Access the demo website.

Props

NameTypeDescriptionRequired
labelStringOverrides placeholderNo
label-classStringAttribute a custom class to the labelNo
dispatchBooleanShows float label on mountNo

Configs

To use on nuxt.config.ts

NameTypeDescription
useCssBooleanChoose to use the default css or a custom one

Example

nuxtFloatLabel: {
    useCss: false
}

Css classes

NameDescription
fl-wrapperWrapper class
fl-labelLabel class
fl-on-focusLabel on focus and blur event
fl-on-inputLabel on input event