PHP Classes

Laravel Nova Toggle Field Switch: Output HTML for a Laravel Nova toggle switch field

Recommend this page to a friend!
  Info   View files Documentation   Screenshots Screenshots   View files View files (25)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2023-07-12 (7 months ago) RSS 2.0 feedNot enough user ratingsTotal: 6 This week: 1All time: 11,246 This week: 79Up
Version License PHP version Categories
toggle-switch-field 1.0MIT/X Consortium ...7HTML, Content management, PHP 7
Description 

Author

This package can output HTML for a Laravel Nova toggle switch field.

It registers a service provider class to use in a panel managed by Laravel Nova that defines CSS and JavaScript to generate toggle switch fields.

The package also provides a toggle switch field class that can generate the HTML to render switch fields with a given color that uses the JavaScript and CSS code supplied by the field service class.

Picture of Naif Alshaye
  Performance   Level  
Name: Naif Alshaye <contact>
Classes: 24 packages by
Country: Saudi Arabia Saudi Arabia
Innovation award
Innovation award
Nominee: 9x

Documentation

Toggle Switch Field for Nova 4

* Toggle Switch Field for Nova 3 go to

https://github.com/naifalshaye/toggle-switch

Requirements

  • PHP 8.0 or higher
  • Nova 4

Installation

You can install the package into a Laravel app that uses Nova via composer:

composer require naif/toggle-switch-field

Usage

Add the field to Nova Resource

  public function tools()
    {
    # You can set the toggle switch color by color code.
        return [
            new ToggleSwitchField::make('toggle')->color('#3AB95A'),
        ];
    }

Screenshots

<img src="screenshots/img.png" width="150"><br> <img src="screenshots/img_1.png" width="400"><br> <img src="screenshots/img_2.png" width="400"><br> <img src="screenshots/off.png" width="100"><br> <img src="screenshots/on.png" width="100"><br> <img src="screenshots/dark-off.png" width="100"><br> <img src="screenshots/dark-on.png" width="100"><br> <img src="screenshots/index.png" width="100"><br> <img src="screenshots/dark-index.png" width="100"><br> <img src="screenshots/detail-on.png" width="100"><br> <img src="screenshots/detail-off.png" width="100"><br> <img src="screenshots/dark-detail-off.png" width="100"><br> <img src="screenshots/dark-detail-on.jpg" width="100"><br>

Support:

naif@naif.io

https://naif.io

Bug Tracker:

https://github.com/naifalshaye/chatgpt-nova4/issues

License

The MIT License (MIT). Please see License File for more information.


Screenshots  
  • screenshots/dark-index.png
  • screenshots/img.png
  • screenshots/img_1.png
  • screenshots/img_2.png
  • screenshots/index.png
  Files folder image Files  
File Role Description
Files folder imagedist (1 file, 2 directories)
Files folder imageresources (2 directories)
Files folder imagescreenshots (8 files)
Files folder imagesrc (2 files)
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file nova.mix.js Data Auxiliary data
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file postcss.config.js Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file webpack.mix.js Data Auxiliary data

  Files folder image Files  /  dist  
File Role Description
Files folder imagecss (1 file)
Files folder imagejs (2 files)
  Accessible without login Plain text file mix-manifest.json Data Auxiliary data

  Files folder image Files  /  dist  /  css  
File Role Description
  Accessible without login Plain text file field.css Data Auxiliary data

  Files folder image Files  /  dist  /  js  
File Role Description
  Accessible without login Plain text file field.js Data Auxiliary data
  Accessible without login Plain text file field.js.LICENSE.txt Doc. Documentation

  Files folder image Files  /  resources  
File Role Description
Files folder imagecss (1 file)
Files folder imagejs (1 file, 1 directory)

  Files folder image Files  /  resources  /  css  
File Role Description
  Accessible without login Plain text file field.css Data Auxiliary data

  Files folder image Files  /  resources  /  js  
File Role Description
Files folder imagecomponents (3 files)
  Accessible without login Plain text file field.js Data Auxiliary data

  Files folder image Files  /  resources  /  js  /  components  
File Role Description
  Accessible without login Plain text file DetailField.vue Data Auxiliary data
  Accessible without login Plain text file FormField.vue Data Auxiliary data
  Accessible without login Plain text file IndexField.vue Data Auxiliary data

  Files folder image Files  /  screenshots  
File Role Description
  Accessible without login Image file dark-detail-off.png Icon Icon image
  Accessible without login Image file dark-detail-on.jpg Icon Icon image
  Accessible without login Image file dark-off.png Icon Icon image
  Accessible without login Image file dark-on.png Icon Icon image
  Accessible without login Image file detail-off.png Icon Icon image
  Accessible without login Image file detail-on.png Icon Icon image
  Accessible without login Image file off.png Icon Icon image
  Accessible without login Image file on.png Icon Icon image

  Files folder image Files  /  src  
File Role Description
  Plain text file FieldServiceProvider.php Class Class source
  Plain text file ToggleSwitchField.php Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:6
This week:1
All time:11,246
This week:79Up