Chips

Chips are a method to add status badges to your resources.

Adding chips

You can add a Chip by overriding the chips(Model $model) method in your resource.

public function chips(Model $model): ChipCollection
{
    return new ChipCollection(
        Chip::make('Lorum ipsum')
            ->color('primary')
            ->textColor('white')
            ->outline(true),
    );
}

Properties

Property	Type	Default	Description
label	string		The label to show on the the chip
dense	bool	false	Dense mode; occupies less space
color	string	primary	Color name for component from the Quasar Color Palette
text-color	string	white	Overrides text color (if needed); Color name from the Quasar Color Palette
square	bool	false	Sets a low value for border-radius instead of the default one, making it close to a square
outline	string	false	Display using the 'outline' design
style	string		Custom CSS styles

Chips as select dropdown

Sometimes you want the user to switch for example a Project status from To do to Canceled from the detail page.

You can make a chip work like a Select field:

public function chips(Model $model): ChipCollection
{
    return new ChipCollection(
        Chip::make($model->type->description)
            ->asSelect($this->typeField())
    );
}

protected function typeField(): VariableValue
{
    return VariableValue::make(__('crm::crm.Type'), 'type')
        ->forVariable(tenant_variable('organization types'))
        ->rules('required')
        ->withTranslations();
}

You can provide a Select field or a BelongsTo field as argument in the asSelect method. It can be one of your existing resource fields, or just a custom one:

public function chips(Model $model): ChipCollection
{
    return new ChipCollection(
        Chip::make($model->type->description)
            ->asSelect(
                Select::make('Select field', 'select_value')
                    ->options([
                        [
                            'label' => 'Option 1',
                            'value' => 'value_1'
                        ],
                        [
                            'label' => 'Option 2',
                            'value' => 'value_2'
                        ]
                    ])
            )
    );
}

By default, the resource model will be updated based on the name of the given field (it will try to find the field on your resource). If you have a custom Select field like the example above, or if you want to write your own handler, you can provide one:

return new ChipCollection(
    Chip::make($model->type->description)
        ->asSelect(
            Select::make('Select field', 'select_value')
                ->options([
                    [
                        'label' => 'Option 1',
                        'value' => 'value_1'
                    ],
                    [
                        'label' => 'Option 2',
                        'value' => 'value_2'
                    ]
                ])
        ),
        function(Model $model, array $data) {
            // Write your own validation, logging etc. here
            dd($model, $data);
        }
);