Components

Basics

Description

Almost everything in MoonShine consists of components. The MoonShineComponent itself is a blade component and contains additional convenient methods for interaction in the admin panel.

Conditional Methods

You can conditionally display a component using the canSee() method.

Box::make() ->canSee(function (Box $ctx) { return true; }) 
Box::make()
    ->canSee(function (Box $ctx) {
        return true;
    })

The when() method implements a fluent interface and will execute the callback when the first argument passed to the method is true.

when($value = null, ?callable $callback = null, ?callable $default = null) 
when($value = null, ?callable $callback = null, ?callable $default = null)
Box::make() ->when(fn() => true, fn(Box $ctx) => $ctx) 
Box::make()
    ->when(fn() => true, fn(Box $ctx) => $ctx)

The unless() method is the opposite of the when() method.

unless($value = null, ?callable $callback = null, ?callable $default = null) 
unless($value = null, ?callable $callback = null, ?callable $default = null)

Custom View

When it's necessary to change the view using a fluent interface, you can use the customView() method.

customView(string $view, array $data = []) 
customView(string $view, array $data = [])
Box::make('Title', [])->customView('component.my-custom-block') 
Box::make('Title', [])->customView('component.my-custom-block')

On Before Render Hook

If you need to access a component immediately before rendering, you can use the onBeforeRender() method.

/** * @param Closure(static $ctx): void $onBeforeRender */ public function onBeforeRender(Closure $onBeforeRender): static 
/**
 * @param  Closure(static $ctx): void  $onBeforeRender
 */
public function onBeforeRender(Closure $onBeforeRender): static
Box::make('Title', [])->onBeforeRender(function(Box $ctx) { // }) 
Box::make('Title', [])->onBeforeRender(function(Box $ctx) {
    //
})

Assets

To add assets on the fly, you can use the addAssets() method.

Box::make() ->addAssets([ new Css(Vite::asset('resources/css/block.css')) ]), 
Box::make()
    ->addAssets([
        new Css(Vite::asset('resources/css/block.css'))
    ]),

If you are implementing your own component, you can declare a set of assets in two ways.

  1. Through the assets() method:
/** * @return list */ protected function assets(): array { return [ Js::make('/js/custom.js'), Css::make('/css/styles.css') ]; } 
/**
 * @return list<AssetElementContract>
 */
protected function assets(): array
{
    return [
        Js::make('/js/custom.js'),
        Css::make('/css/styles.css')
    ];
}
  1. Through the booted() method:
protected function booted(): void { parent::booted(); $this->getAssetManager() ->add(Css::make('/css/app.css')) ->append(Js::make('/js/app.js')); } 
protected function booted(): void
{
    parent::booted();
 
    $this->getAssetManager()
        ->add(Css::make('/css/app.css'))
        ->append(Js::make('/js/app.js'));
}

Macroable Trait

All components have access to the Illuminate\Support\Traits\Macroable trait, which includes the mixin and macro methods. With this trait, you can extend the capabilities of components by adding new functionality without using inheritance.

MoonShineComponent::macro('myMethod', fn() => /*implementation*/) Box::make()->myMethod() 
MoonShineComponent::macro('myMethod', fn() => /*implementation*/)
 
Box::make()->myMethod()

or

// for all MoonShineComponent::mixin(new MyNewMethods()) // for a specific one Box::mixin(new MyNewMethods()) 
// for all
MoonShineComponent::mixin(new MyNewMethods())
 
// for a specific one
Box::mixin(new MyNewMethods())

Custom Component

You can create your custom component with its own view and logic and use it in the MoonShine admin panel. To do this, use the command:

php artisan moonshine:component 
php artisan moonshine:component

You can learn about all supported options in the section Commands.