[[slot-and-fill]]

:toclevels: 5

## Current Slots List

You can find .erb pages that use `<Slot>` component by searching for `slot` helper.

## Components

### Slot

a Slot can support multiple fills, rendering by weight order by the `multi` prop

if there is no such prop, it will render the max weighted fill.

### Fill

#### Component fill

_core_

a default child // can be empty

</Slot>

<div> some text </div>

<div> some text </div>

Plugin B has a fill with a higher weight, therefore it will be rendered in a dedicated slot.

#### Component fill - remdering multiple fills

<div> some text </div>

<div> some text </div>

Plugin B's fill will be render first

#### Props fill

those props are given to the slot's children

```js

<TextWrapper text="some default text" />

slotId="slot-id"

id="some-id"

weight={200}

overrideProps={{ text: '[Plugin A] this text given by a prop' }}

/>

```js

slotId="slot-id"

id="some-id"

weight={100}

overrideProps={{ text: '[Plugin B] this text given by a prop' }}

/>

#### Global fill

A plugin should use global fills when it doesn't have access to that area (i.e adding a component in the about page)

If a plugin wants to extend foreman's layout, or whether it has a partial in a core page via facets, a regular fill is enough.

create a `fills_index.js` file under webpack directory:

import React from 'react';

import SomeComponent from './components/SomeComponent';

import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';

// if some of the components are connected to redux, registering a reducer is required

addGlobalFill('slotId', 'fillId', <SomeComponent key="some-key" />, 300);

addGlobalFill(

'slotId',

'fillId',

{ someProp: 'this is an override prop' },

300

);

```ruby

Foreman::Plugin.register :<plugin> do

# content

register_global_file 'fills'

end

```

Finally, add a slot in foreman core:

```ruby

<%= slot('slotId', true) %>

```