Final Class Yiisoft\Bootstrap5\Modal
| Inheritance | Yiisoft\Bootstrap5\Modal » Yiisoft\Widget\Widget |
|---|
Modal renders a modal window that can be toggled by clicking on a trigger element.
For example,
<?= Modal::widget()
->body(P::tag()->content('Modal body text goes here.'))
->footer(
Button::tag()
->addClass('btn btn-secondary')
->attribute('data-bs-dismiss', 'modal')
->content('Close'),
Button::tag()
->addClass('btn btn-primary')
->content('Save changes'),
)
->fullScreen(ModalDialogFullScreen::FULL_SCREEN)
->id('modal')
->scrollable()
->title('Modal title')
->triggerButton()
->verticalCentered()
?>
Public Methods
Constants
| Constant | Value | Description | Defined By |
|---|---|---|---|
| CLASS_CLOSE_BUTTON | 'btn-close' | Yiisoft\Bootstrap5\Modal | |
| MODAL_BODY | 'modal-body' | Yiisoft\Bootstrap5\Modal | |
| MODAL_CONTENT | 'modal-content' | Yiisoft\Bootstrap5\Modal | |
| MODAL_DIALOG | 'modal-dialog' | Yiisoft\Bootstrap5\Modal | |
| MODAL_FOOTER | 'modal-footer' | Yiisoft\Bootstrap5\Modal | |
| MODAL_HEADER | 'modal-header' | Yiisoft\Bootstrap5\Modal | |
| MODAL_TITLE | 'modal-title' | Yiisoft\Bootstrap5\Modal | |
| NAME | 'modal' | Yiisoft\Bootstrap5\Modal |
Method Details
Adds a set of attributes.
| public self addAttributes ( array $attributes ) | ||
| $attributes | array |
Attribute values indexed by attribute names. for example, |
| return | self |
A new instance with the specified attributes added. Example usage:
|
|---|---|---|
public function addAttributes(array $attributes): self
{
$new = clone $this;
$new->attributes = [...$this->attributes, ...$attributes];
return $new;
}
Adds one or more CSS classes to the existing classes.
| public self addClass ( \BackedEnum|string|null $class ) | ||
| $class | \BackedEnum|string|null |
One or more CSS class names to add. Pass |
| return | self |
A new instance with the specified CSS classes added to existing ones. |
|---|---|---|
public function addClass(BackedEnum|string|null ...$class): self
{
$new = clone $this;
$new->cssClasses = [...$this->cssClasses, ...$class];
return $new;
}
Adds a CSS style.
| public self addCssStyle ( array|string $style, boolean $overwrite = true ) | ||
| $style | array|string |
The CSS style. If the value is an array, a space will separate the values.
For example, |
| $overwrite | boolean |
Whether to overwrite existing styles with the same name. If |
| return | self |
A new instance with the specified CSS style value added. Example usage:
// or
$modal->addCssStyle(['color' => 'red', 'font-weight' => 'bold']);
|
|---|---|---|
public function addCssStyle(array|string $style, bool $overwrite = true): self
{
$new = clone $this;
Html::addCssStyle($new->attributes, $style, $overwrite);
return $new;
}
Adds a sets attribute value.
| public self attribute ( string $name, mixed $value ) | ||
| $name | string |
The attribute name. |
| $value | mixed |
The attribute value. |
| return | self |
A new instance with the specified attribute added. Example usage:
|
|---|---|---|
public function attribute(string $name, mixed $value): self
{
$new = clone $this;
$new->attributes[$name] = $value;
return $new;
}
Sets the HTML attributes.
| public self attributes ( array $attributes ) | ||
| $attributes | array |
Attribute values indexed by attribute names. |
| return | self |
A new instance with the specified attributes. |
|---|---|---|
public function attributes(array $attributes): self
{
$new = clone $this;
$new->attributes = $attributes;
return $new;
}
Sets the body content.
| public self body ( string|\Stringable $content ) | ||
| $content | string|\Stringable |
The body content. |
| return | self |
A new instance with the specified body content. Example usage:
|
|---|---|---|
public function body(string|Stringable ...$content): self
{
$new = clone $this;
$new->body = implode("\n", $content);
return $new;
}
Sets the HTML attributes for the body section.
| public self bodyAttributes ( array $attributes ) | ||
| $attributes | array |
Attribute values indexed by attribute names. |
| return | self |
A new instance with the specified attributes for the body section. |
|---|---|---|
public function bodyAttributes(array $attributes): self
{
$new = clone $this;
$new->bodyAttributes = $attributes;
return $new;
}
Replaces all existing CSS classes with the specified one(s).
| public self class ( \BackedEnum|string|null $class ) | ||
| $class | \BackedEnum|string|null |
One or more CSS class names to set. Pass |
| return | self |
A new instance with the specified CSS classes set. Example usage:
|
|---|---|---|
public function class(BackedEnum|string|null ...$class): self
{
$new = clone $this;
$new->cssClasses = $class;
return $new;
}
Sets the HTML attributes for the close button.
| public self closeButtonAttributes ( array $attributes ) | ||
| $attributes | array |
Attribute values indexed by attribute names. |
| return | self |
A new instance with the specified attributes for the close button. |
|---|---|---|
public function closeButtonAttributes(array $attributes): self
{
$new = clone $this;
$new->closeButtonAttributes = $attributes;
return $new;
}
Sets the label for the close button.
| public self closeButtonLabel ( string $label ) | ||
| $label | string |
The label for the close button. |
| return | self |
A new instance with the specified close button label. Example usage:
|
|---|---|---|
public function closeButtonLabel(string $label): self
{
$new = clone $this;
$new->closeButtonLabel = $label;
return $new;
}
Sets the HTML attributes for the content section.
| public self contentAttributes ( array $attributes ) | ||
| $attributes | array |
Attribute values indexed by attribute names. |
| return | self |
A new instance with the specified attributes for the content section. |
|---|---|---|
public function contentAttributes(array $attributes): self
{
$new = clone $this;
$new->contentAttributes = $attributes;
return $new;
}
Sets the HTML attributes for the dialog section.
| public self dialogAttributes ( array $attributes ) | ||
| $attributes | array |
Attribute values indexed by attribute names. |
| return | self |
A new instance with the specified attributes for the dialog section. |
|---|---|---|
public function dialogAttributes(array $attributes): self
{
$new = clone $this;
$new->dialogAttributes = $attributes;
return $new;
}
Sets the fullscreen dialog.
| public self fullscreen ( \Yiisoft\Bootstrap5\ModalDialogFullScreenSize $size ) | ||
| $size | \Yiisoft\Bootstrap5\ModalDialogFullScreenSize |
The fullscreen dialog. |
| return | self |
A new instance with the specified fullscreen dialog. |
|---|---|---|
public function fullscreen(ModalDialogFullScreenSize $size): self
{
$new = clone $this;
$new->dialogClasses[] = $size->value;
return $new;
}
Sets the HTML attributes for the header section.
| public self headerAttributes ( array $attributes ) | ||
| $attributes | array |
Attribute values indexed by attribute names. |
| return | self |
A new instance with the specified attributes for the header section. |
|---|---|---|
public function headerAttributes(array $attributes): self
{
$new = clone $this;
$new->headerAttributes = $attributes;
return $new;
}
Sets the ID.
| public self id ( boolean|string $id ) | ||
| $id | boolean|string |
The ID of the component. If |
| return | self |
A new instance with the specified ID. Example usage:
|
|---|---|---|
public function id(bool|string $id): self
{
$new = clone $this;
$new->id = $id;
return $new;
}
Run the widget.
| public string render ( ) | ||
| return | string |
The HTML representation of the element. |
|---|---|---|
public function render(): string
{
$attributes = $this->attributes;
$classes = $attributes['class'] ?? null;
unset($attributes['class']);
if ($this->triggerButton === '') {
throw new InvalidArgumentException('Set the trigger button before rendering the modal.');
}
$modal = Div::tag()
->addAttributes($attributes)
->addClass(
self::NAME,
...$this->cssClasses,
)
->addClass($classes)
->attribute('tabindex', '-1')
->content(
"\n",
$this->renderDialog(),
"\n",
)
->encode(false)
->id($this->getId())
->render();
return $this->triggerButton . $modal;
}
Sets the responsive size.
| public self responsive ( \Yiisoft\Bootstrap5\Utility\Responsive $size ) | ||
| $size | \Yiisoft\Bootstrap5\Utility\Responsive |
The responsive size. |
| return | self |
A new instance with the specified responsive size setting. |
|---|---|---|
public function responsive(Responsive $size): self
{
$new = clone $this;
$new->responsive = $size->value;
return $new;
}
Sets the scrollable dialog.
| public self scrollable ( ) | ||
| return | self |
A new instance with the scrollable dialog. |
|---|---|---|
public function scrollable(): self
{
$new = clone $this;
$new->dialogClasses[] = 'modal-dialog-scrollable';
return $new;
}
Sets the title.
| public self title ( string|\Stringable $content, string $tag = 'H5', array $attributes = [] ) | ||
| $content | string|\Stringable |
The title. |
| $tag | string |
The tag to use for the title. Default is |
| $attributes | array |
The HTML attributes for the title. |
| return | self |
A new instance with the specified title. Example usage:
|
|---|---|---|
public function title(string|Stringable $content, string $tag = 'H5', array $attributes = []): self
{
if ($tag === '') {
throw new InvalidArgumentException('The tag for the title cannot be an empty string.');
}
if (is_string($content)) {
$id = $this->getId();
$classes = $attributes['class'] ?? null;
unset($attributes['class']);
$content = Html::tag($tag)
->addAttributes($attributes)
->addClass(
self::MODAL_TITLE,
$classes,
)
->content($content)
->id($id !== null ? $id . 'Label' : null)
->render();
}
$new = clone $this;
$new->title = $content;
return $new;
}
Sets the trigger button.
| public self triggerButton ( string|\Stringable $content = 'Launch modal', boolean $staticBackdrop = false, array $attributes = [] ) | ||
| $content | string|\Stringable |
The content of the trigger button. |
| $staticBackdrop | boolean |
Whether to use a static backdrop or not. |
| $attributes | array |
The HTML attributes for the trigger button. |
| return | self |
A new instance with the specified trigger button. Example usage:
|
|---|---|---|
public function triggerButton(
string|Stringable $content = 'Launch modal',
bool $staticBackdrop = false,
array $attributes = [],
): self {
$new = $this->id($this->getId() ?? '');
if (is_string($content)) {
$classes = $attributes['class'] ?? 'btn btn-primary';
unset($attributes['class']);
$content = Button::button($content)
->addAttributes($attributes)
->addClass($classes)
->attribute('data-bs-toggle', 'modal')
->attribute('data-bs-target', '#' . $new->id)
->render() . "\n";
}
$new = clone $this;
$new->triggerButton = $content;
if ($staticBackdrop) {
$new = $new->attribute('data-bs-backdrop', 'static')->attribute('data-bs-keyboard', 'false');
}
return $new
->addClass('fade')
->attribute('aria-labelledby', $new->id . 'Label')
->attribute('aria-hidden', 'true');
}
| public self verticalCentered ( ) |
public function verticalCentered(): self
{
$new = clone $this;
$new->dialogClasses[] = 'modal-dialog-centered';
return $new;
}
Signup or Login in order to comment.