twenycode/blade-morph

A comprehensive set of Laravel Blade components to accelerate your UI development

Maintainers

Details

github.com/twenycode/blade-morph

Source

Issues

Installs: 4

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 0

Forks: 1

Open Issues: 0

v1.3.2 2025-04-16 08:21 UTC

Requires

MIT 51a0baf069bf4ecff907f48fba2b736c6a8713fd

  • TWENY LIMITED <twenycode.woop@tweny.co.tz>

This package is auto-updated.

Last update: 2025-04-16 08:22:22 UTC

README

A comprehensive set of Laravel Blade components to accelerate your UI development.

This documentation provides comprehensive examples of each component in the Laravel BladeMorph package, showing both the Blade usage syntax and the resulting HTML output.

Table of Contents

Installation

1. Install Laravel BladeMorph

composer require twenycode/blademorph

This will automatically register the service provider.

2. Install Bootstrap 5 via Laravel UI

php artisan ui bootstrap

Then compile the assets:

npm install
npm run dev

3. Optional: Publish Configuration

# Publish configuration
php artisan vendor:publish --tag="blademorph-config"

To customize the component views:

# Publish views for customization
php artisan vendor:publish --tag="blademorph-views"

Button Components

Button

The Button component creates a versatile Bootstrap button with support for various styles, states, and icons.

Basic Usage

<x-button label="Click Me" />

Output HTML:

<button type="button" id="btn_60fb5d1a2c7f3" class="btn btn-primary">
  Click Me
</button>

Submit Button with Success Color

<x-button type="submit" label="Save" color="success" />

Output HTML:

<button type="submit" id="btn_60fb5d1a2c7f4" class="btn btn-success">
    Save
</button>

Button with Icon

<x-button label="Add Item" icon="fas fa-plus" color="primary" size="sm" outline="true" />

Output HTML:

<button type="button" id="btn_60fb5d1a2c7f5" class="btn btn-outline-primary btn-sm">
    <i class="fas fa-plus me-1"></i> Add Item
</button>

Loading State Button

<x-button label="Submit" loading="true" loading-text="Processing..." type="submit" />

Output HTML:

<button type="submit" id="btn_60fb5d1a2c7f6" class="btn btn-primary disabled" disabled>
    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
    Processing...
</button>

Full Button Parameters

Parameter Type Default Description
type string 'button' Button type (button, submit, reset)
id string auto-generated Button ID attribute
label string 'Submit' Button text
color string 'primary' Bootstrap color (primary, secondary, success, danger, warning, info, light, dark)
size string null Button size (sm, lg)
outline boolean false Use outline style
loading boolean false Show loading state
loadingText string null Text to show when loading
icon string null Icon class (e.g., 'fas fa-save')
iconPosition string 'left' Icon position ('left' or 'right')

Button Group

The Button Group component groups multiple buttons together in a horizontal or vertical layout.

Basic Button Group

<x-button-group>
    <x-button label="Left" />
    <x-button label="Middle" />
    <x-button label="Right" />
</x-button-group>

Output HTML:

<div class="btn-group" role="group" aria-label="Button group">
    <button type="button" id="btn_60fb5d1a2c7f7" class="btn btn-primary">Left</button>
    <button type="button" id="btn_60fb5d1a2c7f8" class="btn btn-primary">Middle</button>
    <button type="button" id="btn_60fb5d1a2c7f9" class="btn btn-primary">Right</button>
</div>

Vertical Button Group

<x-button-group vertical="true">
    <x-button label="Top" />
    <x-button label="Middle" />
    <x-button label="Bottom" />
</x-button-group>

Output HTML:

<div class="btn-group-vertical" role="group" aria-label="Button group">
    <button type="button" id="btn_60fb5d1a2c7fa" class="btn btn-primary">Top</button>
    <button type="button" id="btn_60fb5d1a2c7fb" class="btn btn-primary">Middle</button>
    <button type="button" id="btn_60fb5d1a2c7fc" class="btn btn-primary">Bottom</button>
</div>

Small-sized Button Group

<x-button-group size="sm">
    <x-button label="Small 1" />
    <x-button label="Small 2" />
</x-button-group>

Output HTML:

<div class="btn-group btn-group-sm" role="group" aria-label="Button group">
    <button type="button" id="btn_60fb5d1a2c7fd" class="btn btn-primary">Small 1</button>
    <button type="button" id="btn_60fb5d1a2c7fe" class="btn btn-primary">Small 2</button>
</div>

Button Group Parameters

Parameter Type Default Description
size string '' Button group size (sm, lg)
vertical boolean false Use vertical layout
toolbar boolean false Create a button toolbar

Delete Button

The Delete Button component provides a specialized button for delete actions with a built-in confirmation dialog.

<x-delete action="{{ route('users.destroy', 1) }}" />

Output HTML:

<form method="POST" action="http://example.com/users/1" class="form-inline form-delete" role="form" autocomplete="off">
    <input type="hidden" name="_token" value="...">
    <input type="hidden" name="_method" value="DELETE">
    <button class="btn" onclick="return confirm('Do you want to delete this item?')">
        <i class="fa fa-trash-alt"></i> Delete
    </button>
</form>

Custom Delete Button

<x-delete 
    action="{{ route('posts.destroy', 1) }}"
    label="Delete Post"
    confirm-message="Are you sure you want to delete this post? This action cannot be undone."
    class="btn-sm btn-outline-danger"
/>

Output HTML:

<form method="POST" action="http://example.com/posts/1" class="form-inline form-delete" role="form" autocomplete="off">
    <input type="hidden" name="_token" value="...">
    <input type="hidden" name="_method" value="DELETE">
    <button class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to delete this post? This action cannot be undone.')">
        Delete Post
    </button>
</form>

Delete Button Parameters

Parameter Type Default Description
action string required Form action URL for delete
label string ' Delete' Button label
confirmMessage string 'Do you want to delete this item?' Confirmation message

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

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

Credits