@oveleon/placeholder-label v1.0.0

Contao Placeholder Label

Install

$ npm install @oveleon/placeholder-label

$ yarn add @oveleon/placeholder-label

<script src="https://unpkg.com/@oveleon/placeholder-label@latest/build/placeholder-label.js"></script>
<link href="https://unpkg.com/@oveleon/placeholder-label@latest/build/placeholder-label.css" rel="stylesheet">

Usage

import PlaceholderLabel from "@oveleon/placeholder-label"

// Use default css
// import "./node_modules/@oveleon/placeholder-label/build/placeholder-label.css"

new PlaceholderLabel({
    // options ...
});

Options

{
    selector: 'form',
    autofill: true,
    inputs: {
        parent: 'div.widget',
        label:  'label',
        include: ['input', 'select', 'textarea'],
        exclude: ['[type="checkbox"]', '[type="hidden"]', '[type="submit"]']
    },
    onFocus:  () => {},
    onBlur:   () => {},
    onChange: () => {},
    onInit:   () => {}
}

Styling

// Default
input, select, textarea{
    padding: 15px;
}

label{
    margin-top: 15px;
    margin-left: 15px;
}

// Placeholder Label (active)
._focus label,
._filled label{
    margin-top: 5px;
}