davidpiesse/nova-toggle

A Boolean Toggle Switch Field

Installs: 860 913

Dependents: 3

Suggesters: 0

Security: 0

Stars: 86

Watchers: 4

Forks: 30

Open Issues: 29

Language:Vue


README

A drop in replacement for the default Boolean field

Toggle In Action

Installation

Same as most other Nova Packages

composer require davidpiesse/nova-toggle

Usage

The Toggle has all the same options as the Boolean field so you can set the values to be stored in the Model.

use Davidpiesse\NovaToggle\Toggle;
Toggle::make('Active')
    ->trueValue('On')
    ->falseValue('Off')

In addition you can set visual parameters

Labels

You can show both, or each state label

Toggle::make('Active')
    ->showLabels() //Both labels
    ->showOnlyTrueLabel() //True label only
    ->showOnlyFalseLabel() //False label only

To set the text you can use either or both of the following. You must also set the visibility of the labels as described above.

Toggle::make('Active')
    ->showLabels()
    ->trueLabel('Tru Dat')
    ->falseLabel('Nah Dawg')

The defaults are 'True' and 'False'

Size

You can set the width and height. Setting the width will auto scale the height, but you can override this with ->height(). Defaults are 60 (px) and 26 (px)

Toggle::make('Active')
    ->width(80)
    ->height(45) //To override scaling

Colors

You can set wither or both of the background colours for the Toggle. By default True is the Nova 'Success Green' [ var(--success) ] and false is a Grey 60 [ var(--60) ]

Toggle::make('Active')
    ->trueColor('pink')
    ->falseColor('#fcfcfc')

Speed

You can set the animation speed in ms with

Toggle::make('Active')
    ->speed(500)

The default is 300ms

Toggle on index

You can activate the toggle on index as well with

Toggle::make('Active')
    ->editableIndex()