Installation

#Getting the package

Simply run the following command to install the package.

composer install allyoullneed/advanced-controls

#CSS library

#Picking your preferred CSS library

We support DaisyUI and FlyonUI, and we recommend you pay both sites a visit so you make an informed decision as to what your site's style will be.

If despite the information you can gather from the above links, you have trouble picking your preferred library, no worries! Pick one for now and there should be hardly any change to make if you change your mind later.

To install the plugin, follow the instructions from either of the linked pages above.

After that, add a reference to the package's sources, to allow the classes it uses to be compiled. Assuming your CSS file is in <project root>/resources/css, you will need to add a link to <project root>/vendor/allyoullneed/advanced-controls. With relative paths, it will turn into:

@source "../../vendor/allyoullneed/advanced-controls/**/*.php";

#Icons

Icons are powered by any Blade icon package you want to use.

The following libraries are supported out of the box:

Other libraries requires adding the relevant icons to the configuration file. Refer to the corresponding section below.

At this stage, you need to:

  1. Choose the library you desire to use.
    We suggest you check out the Blade icons website to display all the sets they have available and pick the one that interests you the most.

  2. Download the library.

  3. Update the configuration file to reflect your choice.

#Downloading the icon package

Once you have made your choice, it takes only 1 command to get the package. You can consult the list of available packages here, click on the corresponding link and it will give you the composer install <package> command you need to run.

#Configuration

If you have chosen a library other than Heroicons or if you want to change what icons are used by the components, you need to modify the configuration file.

First, publish the configuration file.

php artisan vendor:publish --tag=advanced-controls-config

This copies the config file under your config/ folder, where you get 2 parameters to control icons:

'icons' => 'heroicons',


'icon-packages' => [
'google-material-design' => [
    'info'          => 'gmdi-info-outline-r',
    'success'       => 'gmdi-check-circle-outline-r',
    'warning'       => 'gmdi-warning-amber-r',
    'error'         => 'gmdi-error-outline-r',

    'password-show' => 'gmdi-visibility-o',
    'password-hide' => 'gmdi-visibility-off-o',

    'rating'        => 'gmdi-star',
    'user'          => 'gmdi-person',
],
'heroicons' => [
    'info'          => 'heroicon-o-information-circle',
    'success'       => 'heroicon-o-check-circle',
    'warning'       => 'heroicon-o-exclamation-triangle',
    'error'         => 'heroicon-o-x-circle',

    'password-show' => 'heroicon-o-eye',
    'password-hide' => 'heroicon-o-eye-slash',

    'rating'        => 'heroicon-s-star',
    'user'          => 'heroicon-s-user',
],
'phosphor' => [
    'info'          => 'phosphor-info',
    'success'       => 'phosphor-check-circle',
    'warning'       => 'phosphor-warning',
    'error'         => 'phosphor-x-circle',

    'password-show' => 'phosphor-eye',
    'password-hide' => 'phosphor-eye-closed',

    'rating'        => 'phosphor-star-fill',
    'user'          => 'phosphor-user-fill',
]

icons is your choice for which package will be used; icon-packages is the list of icon libraries that are preconfigured for you.
You can add any icon library you want to the icon-packages array, then puts it array key as the value of icons so that components automatically use the values you have chosen.