Components

Learn about the built-in components to make creating UIs in Response easier.

Response, which is built on the Laravel Framework, is built on the concept of components. Almost all repeating elements in Response have been separated into components. Components are not provided in the main Response application repository and are instead provided as an external package, responseams/components. This is done so that you can publish the components into the application, make changes to their design, and maintain those changes without having to merge them in as updates to Response are releases.

You can learn more about publishing components to be customized in a later section of this page.

Blade Components

Because Response is built on Laravel, we utilize Blade Components for a number of the repeating components available in Response. In most cases a Blade Component is what you want to use when creating structure on a page. These differ from Livewire Components which provide a link to a PHP Class for data manipulation and realtime updating. We recommend you read more about Blade Components from the Laravel documentation.

Blade Components can be used like traditional web components, however, components start with x- prefixes to differentiate them from standard HTML elements. For example, the following shows an example of using a Card component.

Example

<x-card>
  <x-slot name="header">
  	<x-card-header title="Card Title" subtitle="Card Subtitle" />
  </x-slot>
  
  <p>This is inside the card's main slot.</p>
</x-card>

Props

Components accept props as a way to provide the component with data or to configure the style of the component. Components can hold static content--like a string--but may also be prefixes with a : to reference a variable or other scalar type, such as an array like shown below.

PHP

<x-avatar-user
	size="8"
	:user="$user"
/>

Slots

As you might have gathered from the first example, Blade Components support slots much like traditional web components; they not only look similar but work similarly as well. Each component has its own named slots (and some do not have any). The default slot, when available, can be used by simply including content within the HTML block of the Blade Component itself.

When working with named slots, use the x-slot component and provide a name parameter with the named slot's name as the value. For example, in the following example we'll set the header named slot and use the default slot to add content to the Card component with a standard <p> tag.

PHP

<x-card>
  <x-slot name="header">
  	<x-card-header title="Title" subtitle="Subtitle" />  
  </x-slot>
  
  <p>
  	<!-- content here -->
  </p>
</x-card>

The content within the <x-slot name="header"> and </x-slot> tags would be rendered in the named header slot of the component. The <p> tag and it's content would be rendered in the Card's body using the default slot of the component.