hirohitopg/blade-bootstrap-components

A set of Blade Components based on Boostrap-4 CSS Framework

v1.1.1 2022-11-17 11:32 UTC

This package is auto-updated.

Last update: 2024-04-17 14:50:08 UTC


README

Latest Version on Packagist Build Status Quality Score Total Downloads

A new set of Blade components to rapidly build forms with Bootstrap 5.

Features

  • Components for major Bootstrap components, including forms.
  • Component logic independent from Blade views.
  • Bind a target to a form (or a set of elements) to provide default values.
  • Re-populate forms with old input.
  • Validation errors.
  • Form method spoofing.
  • Components classes and Blade views fully customizable.
  • Support for prefixing the components.

Requirements

  • PHP 7.4 + Laravel 8+

Installation

You can install the package via composer:

composer require hostmoz/blade-bootstrap-components

Publishing Assets

For some components to work correctly(ex: date-picker) you will need to publish the package assets using the command below:

php artisan vendor:publish --tag=bootstrap-assets --force

Configuration

There is no configuration needed unless you want to customize the Blade views and components.

Quick example

<x-bootstrap::form.form>
    <div class="row">
        <div class="col-12 mb-3">
            <x-bootstrap::form.input name="name" label="Your Name" />
        </div>
        <div class="col-12 mb-3">
            <x-bootstrap::form.select name="country_code" :options="$countries" label="Select a Country"/>
        </div>
        <div class="col-12 mb-3">
            <x-bootstrap::form.date-picker name="teste" label="Pick a Date"/>
        </div>

    </div>
    <div class="row">
        <div class="col-6">
            <!-- Inline radio inputs -->
            <x-bootstrap::form.group name="newsletter_frequency" label="Newsletter frequency" inline>
                <x-bootstrap::form.radio name="newsletter_frequency" value="daily" label="Daily" />
                <x-bootstrap::form.radio name="newsletter_frequency" value="weekly" label="Weekly" />
            </x-bootstrap::form.group>
        </div>
        <div class="col-6">
            <x-bootstrap::form.group>
                <x-bootstrap::form.checkbox name="subscribe_to_newsletter" label="Subscribe to newsletter" />
                <x-bootstrap::form.checkbox name="agree_terms" label="Agree with terms" />
            </x-bootstrap::form.group>
        </div>
    </div>
</x-bootstrap::form.form>

screenshot.png

Usage

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email elisio.leonardo@gmail.com instead of using the issue tracker.

Credits

License

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