IxDF Developer Docs

Appearance

Blade components ​

When developing Blade components, please use HTML dictionary and principles.

Syntax and naming ​

  1. Prefer <x-component> syntax over @component as it provides functionality of $attributes.
  2. Use the kebab-case for component namers (follow HTML principles)

Passing data: attributes vs props vs slots ​

  • Use attributes for HTML attributes, for other data prefer using @props

  • Use the default slot to pass the main content (especially if it's HTML)

  • Introduce custom slots for HTML elements and text nodes inside the component. Note, all custom slots have their own $attributes for additional customization. Example:

    blade
    @if($customSlot->isNotEmpty())
   <p {{ $customSlot->attributes->class(['font-bold line-clamp-1']) }}>{{ $customSlot }}</p>
@endif

Attributes ​

  1. Use $attributes exclusively for HTML attributes.

  2. The main target for $attributes should be clear for a developer.

  3. When there are 2+ targets for the same attribute names, consider using a common prefix for them and whereStartsWith() method:

    blade
    <article {{ $attributes->whereDoesntStartWith('img-') }}>
    <img {{ $attributes->whereStartsWith('img-') }}>
</article>

Props ​

Use @props for passing anything that should not be converted into HTML attributes.

Use camelCase for property names: it will simplify search in your IDE.

Slots ​

Default slot ​

The target of the default slot should be obvious. If you have a situation when you have more than relatively equivalent targets, consider not using the default slot at all and introduce custom slots or props instead.

Help your IDE ​

You MUST create and maintain PHPDoc blocks for components.

blade
<?php declare(strict_types=1);
/**
 * Component Context:
 * @var \Illuminate\View\ComponentSlot $slot The default slot. Used for the card content.
 * @var \Illuminate\View\ComponentAttributeBag $attributes Default attributes. Applied to the root element (<article>).
 * @var \Illuminate\Support\ViewErrorBag $errors Default bag with errors. Unused for this component.
 */
?>
...