Download the PHP package chrisrhymes/bulma-blade-ui without Composer

Bulma Blade UI

A set of Laravel Blade components for the Bulma Frontend Framework. Built for Laravel 8.x and Bulma 0.9.x.

This package also contains authentication views to use with Laravel Fortify.

Contents

• Getting Started
  • Alpine js
• Publishing Views
• Components
  • Inputs
    • Options
    • Read Only
    • Placeholder
    • Additional Classes
  • Card
  • Media
  • Message
  • Notification
  • Tabs
  • Modal
• Views
  • Pagination
  • Simple Pagination
• Auth Views
• Tests

Getting Started

The package should auto discover in Laravel 8.

Alpine JS

Some components have some interactivity, such as notifications being dismissed. The components in this package have been pre-configured to use Alpine JS as it is a small and easy to use JavaScript package.

Therefore, to make use of this interactivity you will need to include Alpine JS within your Laravel app.

Publishing Views & Config

If you want to use the auth views in the package then you will need to publish the config so you can overwrite the default configuration.

php artisan vendor:publish --tag=config --provider=BulmaBladeUi\\BulmaBladeUiServiceProvider

If you would like to publish the views you can do so with the following command. It may lead to difficulties updating at a later if you customise the components.

php artisan vendor:publish --provider=BulmaBladeUi\\BulmaBladeUiServiceProvider

Components

The package has the following components available:

• card
• checkbox
• error
• horizontal-input
• horizontal-multi-checkbox
• horizontal-radio
• horizontal-select
• horizontal-textarea
• input
• media
• message
• modal
• modal-card
• multi-checkbox
• notification
• radio
• select
• submit
• tabs
• textarea

The components are in the bbui namespace.

Inputs

• There are standard (with the label above the input) and horizontal inputs (with the label to the left of the input) available.
• All inputs expect a label, name and value (except submit).
• You can set :required="true" on the input to add the required tag.
• Set the type on submit to override the 'is-primary' default button class.

Options

Select, radio and multi-checkboxes expect an array of options :options="['value' => 'label', 'value2 => 'label2']"

Read Only

The following input components can be made readonly by setting :readonly="true"

• horizontal-input
• horizontal-textarea
• input
• textarea

Placeholder

The following input components can have a placeholder set by setting the placeholder="The placeholder text"

• horizontal-input
• horizontal-select
• horizontal-textarea
• input
• select
• textarea

Additional Classes

Bulma allows you to set the colours, sizes and states for input, textarea and select. You can pass in the additional classes and they will be added to the component.

This applies to the following input components

• horizontal-input
• horizontal-select
• horizontal-textarea
• input
• select
• textarea

Livewire Inputs (Experimental)

To use inputs with Livewire, set the wire:model="modelName" as an attribute with the relevant model name. You don't need to set the value="" if using the wire:model.

You can also add defer, lazy or debounce to the following inputs:

• horizontal-input
• horizontal-textarea
• input
• textarea

Card

The card allows a card with a title or with an image. The card also allows a footer by using the named slot.

Media

Media accepts an image for the media-left, the content and an optional media right using the named slot.

Message

The message allows you to override the type from the default 'is-info'. Alpine.js is required to dismiss the message.

From v0.1.3 the title is optional. If no title is provided then the message-header will not be displayed.

Notification

The notification allows you to override the type from the default 'is-info'. Alpine.js is required to dismiss the notification.

Tabs

• Pass in an array of items, setting the 'key' => 'value' for each, where the value will be used as the tab label.
• Create an x-slot for each of the items, setting the slot name set as the 'key' from the items array. Place the tab content inside the slot.
• You can overwrite the type of tabs by setting the type.
• You can overwrite which tab displays by default by setting the default.

The tabs component uses Alpine.js to show and hide the tab content.

Modal

There are modal and modal-card components. Both require Alpine.js.

• Both require a <x-slot name="trigger"> to define the content of the button that will trigger the modal.
• The modal component will display the content that is provided using the default $slot.
• You can override the trigger button class by setting the type. By default, it uses is-primary.
• Modal card requires a title
• Modal card has a footer slot that contains a Cancel button to close the modal. You can override the cancel text by setting cancel="Cancel" attribute.
• If you add a button to the footer that also closes the modal then ensure you add @click="active = false" to the button.

Views

Pagination

The pagination view provides next, previous and a pagination list of page numbers. The page numbers are centered between the next and previous page buttons.

You can use the pagination view for the package by setting the view in the ->links() method, as shown below, or using other methods described in the Laravel docs.

For Livewire pagination, use the bbui::livewire.pagination view. This replaces the href with the relevant wire:click settings.

Simple Pagination

The simple pagination view provides next and previous page buttons.

You can use the simple pagination view for the package by setting the view in the ->links() method, as shown below, or using other methods described in the Laravel docs.

For Livewire simple pagination, use the bbui::livewire.simple-pagination view. This replaces the href with the relevant wire:click settings.

Auth Views

If you use Laravel Fortify and want to make use of the package's authentication views then set the below in the boot() method of your App\Providers\FortifyServiceProvider

Then set the view component you wish to extend by updating the 'auth_extends' => 'bbui::default-layout' in the bulma-blade-ui.php config file.

Tests

The package has basic tests for the components. To run the tests