README

Myui is a package for Laravel that provides a set of pre-built UI components and utilities to help you build modern and responsive web applications.

Installation

You can install the package via composer:

composer require blissjaspis/myui

After installation, you can optionally publish the configuration file:

php artisan vendor:publish --provider="BlissJaspis\Myui\Providers\MyuiServiceProvider" --tag=config

For your application to use the Myui components, you must configure Tailwind CSS to scan the package's views.

Tailwind CSS v3 (tailwind.config.js):

module.exports = {
    content: [
        // ... your existing paths
        "./vendor/blissjaspis/myui/resources/views/**/*.blade.php",
    ],
};

Tailwind CSS v4 (CSS file):

@source "./vendor/blissjaspis/myui/resources/views/**/*.blade.php";

Optimization (Tree Shaking)

By default, the configuration above scans all Myui components. To optimize your CSS size by only including the styles for the components you actually use, you can specify the specific directories for those components instead of scanning the entire package.

Tailwind CSS v3:

module.exports = {
    content: [
        // Scan specific components only
        "./vendor/blissjaspis/myui/resources/views/components/button/**/*.blade.php",
        "./vendor/blissjaspis/myui/resources/views/components/card/**/*.blade.php",
        // ...
    ],
};

Tailwind CSS v4:

@source "./vendor/blissjaspis/myui/resources/views/components/button/**/*.blade.php";
@source "./vendor/blissjaspis/myui/resources/views/components/card/**/*.blade.php";

Usage

Component Syntax

Myui uses the x-myui:: prefix for all components.

<x-myui::card>
    <x-myui::card.header>
        <x-myui::card.title>Card Title</x-myui::card.title>
        <x-myui::card.description>Card description</x-myui::card.description>
    </x-myui::card.header>
    <x-myui::card.content>
        <x-myui::button>Click me!</x-myui::button>
    </x-myui::card.content>
</x-myui::card>

Available Components

For detailed documentation on each component, please refer to the markdown files in the docs/components/ directory.

Configuration

You can customize the package behavior by modifying the config/myui.php file:

return [
    'framework' => 'tailwind', // CSS framework: 'tailwind' or 'bootstrap'
    'prefix' => 'myui', // Component prefix for Blade templates
    'global_classes' => [], // Global CSS classes applied to all components
    'component_paths' => [], // Additional paths for custom components
    'publish_assets' => true, // Whether to publish CSS/JS assets
];

Contributing

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

License

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

blissjaspis/myui

包简介

README 文档