PHP Classes

Laravel Nova Text Field with Icon: Show a text field with custom icon in Laravel Nova

Recommend this page to a friend!
     
  Info   Documentation   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 52 All time: 10,676 This week: 455Up
Version License PHP version Categories
nova-text-field-with 1.0Custom (specified...5HTML, PHP 5, Libraries
Description 

Author

Naif Alshaye

This package can be used to show a text field with custom icon in Laravel Nova.

It implements a form input field provider that can configure the presentation of a text field so it shows an icon image near it.

The package allows configuring the text icon alignment, color and relative position.

Innovation Award
PHP Programming Innovation award nominee
April 2019
Number 4		 Icon images are useful to present in user interfaces because they help to convey function to the user interface elements that are near the icon images that they present.

This package can help presenting text input fields in a user interface generated using Laravel Nova by display given icons near those fields.

Manuel Lemos
Picture of Naif Alshaye
  Performance   Level  
Name: Naif Alshaye <contact>
Classes: 24 packages by
Country: Saudi Arabia Saudi Arabia

Level 1 Star

 Innovation award
Innovation award
Nominee: 9x

Documentation

Nova text field with customizable font-awesome icons

A Laravel Nova text field with a custom icon

Installation:

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

composer require naif/text-with-icon

Usage:

<h4>Add the below to nova/resources/views/layout.blade.php</h4>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<h4>Add the below to Nova/User.php resource:</h4>


  TextWithIcon::make('test')
      ->icon('fab fa-twitter-square') //set icon full name. Browse icon gallery at https://fontawesome.com/icons?d=gallery&m=free
      ->position('in') //here you can set icon position to be inside or outside the text field.
      ->color('#1997EF'),//also you can set icon color

<img src="https://raw.githubusercontent.com/naifalshaye/nova-text-field-with-icon/master/screenshots/screenshot.png" width="700">

Support:

naif@naif.io

https://www.linkedin.com/in/naif

License:

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


  Files folder image Files (16)  
File Role Description
Files folder imagedist (2 directories)
Files folder imageresources (2 directories)
Files folder imagescreenshots (1 file)
Files folder imagesrc (2 files)
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file mix-manifest.json Data Auxiliary data
Accessible without login Plain text file package.json 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 (16)  /  dist  
File Role Description
Files folder imagecss (1 file)
Files folder imagejs (1 file)

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

  Files folder image Files (16)  /  dist  /  js  
File Role Description
  Accessible without login Plain text file field.js Data Auxiliary data

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

  Files folder image Files (16)  /  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 (16)  /  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 (16)  /  resources  /  sass  
File Role Description
  Accessible without login Plain text file field.scss Data Auxiliary data

  Files folder image Files (16)  /  screenshots  
File Role Description
  Accessible without login Image file screenshot.png Data Auxiliary data

  Files folder image Files (16)  /  src  
File Role Description
  Plain text file FieldServiceProvider.php Class Class source
  Plain text file TextWithIcon.php Class Class source

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
Downloadnova-text-field-with-2019-02-19.zip 65KB
Downloadnova-text-field-with-2019-02-19.tar.gz 63KB
Install with ComposerInstall with Composer
 Version Control Unique User Downloads Download Rankings  
 100%
Total:52
This week:0
All time:10,676
This week:455Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.