diff --git a/scripts/generateDocumentation.php b/scripts/generateDocumentation.php index 757821fd2..7d906ef9d 100644 --- a/scripts/generateDocumentation.php +++ b/scripts/generateDocumentation.php @@ -14,15 +14,15 @@ )); } -// PHP Code Sniffer autoloading -if (!file_exists($phpCodeSnifferAutoloadPath = __DIR__ . '/../vendor/squizlabs/php_codesniffer/autoload.php')) { - throw new \LogicException('PHP Code Sniffer autoload file "' . $phpCodeSnifferAutoloadPath . '" does not exist'); +// Tools autoloading +if (!file_exists($toolsAutoloadPath = __DIR__ . '/../tools/vendor/autoload.php')) { + throw new \LogicException('Tools autoload file "' . $toolsAutoloadPath . '" does not exist'); } -if (false === (include $phpCodeSnifferAutoloadPath)) { +if (false === (include $toolsAutoloadPath)) { throw new \LogicException(sprintf( - 'An error occured while including PHP Code Sniffer autoload file "%s"', - $phpCodeSnifferAutoloadPath + 'An error occured while including tools autoload file "%s"', + $toolsAutoloadPath )); } diff --git a/website/docs/usage/components/accordion.mdx b/website/docs/usage/components/accordion.mdx index ecb7a139e..69f902dd0 100644 --- a/website/docs/usage/components/accordion.mdx +++ b/website/docs/usage/components/accordion.mdx @@ -52,42 +52,62 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php accordion( +echo $this->accordion([ [ - [ - 'header' => [ - 'content' => 'Accordion Item #1', - 'attributes' => ['id' => 'headingOne'], - ], - 'body' => [ - 'content' => 'This is the first item\'s accordion body. '.'It is shown by default, until the collapse plugin adds the appropriate classes '.'that we use to style each element. '.'These classes control the overall appearance, '.'as well as the showing and hiding via CSS transitions. '.'You can modify any of this with custom CSS or overriding our default variables. '.'It\'s also worth noting that just about any HTML can go within '.'the .accordion-body, '.'though the transition does limit overflow.', - 'attributes' => ['id' => 'collapseOne'], - ], + 'header' => [ + 'content' => 'Accordion Item #1', + 'attributes' => ['id' => 'headingOne'], ], - [ - 'header' => [ - 'content' => 'Accordion Item #2', - 'attributes' => ['id' => 'headingTwo'], - ], - 'body' => [ - 'content' => 'This is the second item\'s accordion body. '.'It is hidden by default, until the collapse plugin adds the appropriate classes '.'that we use to style each element. '.'These classes control the overall appearance, '.'as well as the showing and hiding via CSS transitions. '.'You can modify any of this with custom CSS or overriding our default variables. '.'It\'s also worth noting that just about any HTML can go within '.'the .accordion-body, '.'though the transition does limit overflow.', - 'attributes' => ['id' => 'collapseTwo'], - ], + 'body' => [ + 'content' => 'This is the first item\'s accordion body. ' . + 'It is shown by default, until the collapse plugin adds the appropriate classes ' . + 'that we use to style each element. ' . + 'These classes control the overall appearance, ' . + 'as well as the showing and hiding via CSS transitions. ' . + 'You can modify any of this with custom CSS or overriding our default variables. ' . + 'It\'s also worth noting that just about any HTML can go within ' . + 'the .accordion-body, ' . + 'though the transition does limit overflow.', + 'attributes' => ['id' => 'collapseOne'], ], - [ - 'header' => [ - 'content' => 'Accordion Item #3', - 'attributes' => ['id' => 'headingThree'], - ], - 'body' => [ - 'content' => 'This is the third item\'s accordion body. '.'It is hidden by default, until the collapse plugin adds the appropriate classes '.'that we use to style each element. '.'These classes control the overall appearance, '.'as well as the showing and hiding via CSS transitions. '.'You can modify any of this with custom CSS or overriding our default variables. '.'It\'s also worth noting that just about any HTML can go within '.'the .accordion-body, '.'though the transition does limit overflow.', - 'attributes' => ['id' => 'collapseThree'], - ], + ], + [ + 'header' => [ + 'content' => 'Accordion Item #2', + 'attributes' => ['id' => 'headingTwo'], + ], + 'body' => [ + 'content' => 'This is the second item\'s accordion body. ' . + 'It is hidden by default, until the collapse plugin adds the appropriate classes ' . + 'that we use to style each element. ' . + 'These classes control the overall appearance, ' . + 'as well as the showing and hiding via CSS transitions. ' . + 'You can modify any of this with custom CSS or overriding our default variables. ' . + 'It\'s also worth noting that just about any HTML can go within ' . + 'the .accordion-body, ' . + 'though the transition does limit overflow.', + 'attributes' => ['id' => 'collapseTwo'], ], ], - ['id' => 'accordionExample'] -); - + [ + 'header' => [ + 'content' => 'Accordion Item #3', + 'attributes' => ['id' => 'headingThree'], + ], + 'body' => [ + 'content' => 'This is the third item\'s accordion body. ' . + 'It is hidden by default, until the collapse plugin adds the appropriate classes ' . + 'that we use to style each element. ' . + 'These classes control the overall appearance, ' . + 'as well as the showing and hiding via CSS transitions. ' . + 'You can modify any of this with custom CSS or overriding our default variables. ' . + 'It\'s also worth noting that just about any HTML can go within ' . + 'the .accordion-body, ' . + 'though the transition does limit overflow.', + 'attributes' => ['id' => 'collapseThree'], + ], + ], +], ['id' => 'accordionExample']); ``` @@ -133,46 +153,52 @@ echo $this->accordion( ```php accordion( +echo $this->accordion([ [ - [ - 'header' => [ - 'content' => 'Accordion Item #1', - 'attributes' => ['id' => 'flush-headingOne'], - ], - 'body' => [ - 'content' => 'Placeholder content for this accordion, which is intended to '.'demonstrate the .accordion-flush class. '.'This is the first item\'s accordion body.', - 'attributes' => ['id' => 'flush-collapseOne'], - ], - 'show' => false, + 'header' => [ + 'content' => 'Accordion Item #1', + 'attributes' => ['id' => 'flush-headingOne'], + ], + 'body' => [ + 'content' => 'Placeholder content for this accordion, which is intended to ' . + 'demonstrate the .accordion-flush class. ' . + 'This is the first item\'s accordion body.', + 'attributes' => ['id' => 'flush-collapseOne'], ], - [ - 'header' => [ - 'content' => 'Accordion Item #2', - 'attributes' => ['id' => 'flush-headingTwo'], - ], - 'body' => [ - 'content' => 'Placeholder content for this accordion, which is intended to '.'demonstrate the .accordion-flush class. '.'This is the second item\'s accordion body. '.'Let\'s imagine this being filled with some actual content.', - 'attributes' => ['id' => 'flush-collapseTwo'], - ], + 'show' => false, + ], + [ + 'header' => [ + 'content' => 'Accordion Item #2', + 'attributes' => ['id' => 'flush-headingTwo'], ], - [ - 'header' => [ - 'content' => 'Accordion Item #3', - 'attributes' => ['id' => 'flush-headingThree'], - ], - 'body' => [ - 'content' => 'Placeholder content for this accordion, which is intended to '.'demonstrate the .accordion-flush class. '.'This is the third item\'s accordion body. '.'Nothing more exciting happening here in terms of content, '.'but just filling up the space to make it look, at least at first glance, '.'a bit more representative of how this would look in a real-world application.', - 'attributes' => ['id' => 'flush-collapseThree'], - ], + 'body' => [ + 'content' => 'Placeholder content for this accordion, which is intended to ' . + 'demonstrate the .accordion-flush class. ' . + 'This is the second item\'s accordion body. ' . + 'Let\'s imagine this being filled with some actual content.', + 'attributes' => ['id' => 'flush-collapseTwo'], ], ], [ - 'id' => 'accordionFlushExample', - 'flush' => true, - ] -); - + 'header' => [ + 'content' => 'Accordion Item #3', + 'attributes' => ['id' => 'flush-headingThree'], + ], + 'body' => [ + 'content' => 'Placeholder content for this accordion, which is intended to ' . + 'demonstrate the .accordion-flush class. ' . + 'This is the third item\'s accordion body. ' . + 'Nothing more exciting happening here in terms of content, ' . + 'but just filling up the space to make it look, at least at first glance, ' . + 'a bit more representative of how this would look in a real-world application.', + 'attributes' => ['id' => 'flush-collapseThree'], + ], + ], +], [ + 'id' => 'accordionFlushExample', + 'flush' => true, +]); ``` @@ -218,45 +244,59 @@ echo $this->accordion( ```php accordion( +echo $this->accordion([ [ - [ - 'header' => [ - 'content' => 'Accordion Item #1', - 'attributes' => ['id' => 'panelsStayOpen-headingOne'], - ], - 'body' => [ - 'content' => ' This is the first item\'s accordion body. '.'It is shown by default, until the collapse plugin adds the appropriate '.'classes that we use to style each element. These classes control the '.'overall appearance, as well as the showing and hiding via CSS transitions. '.'You can modify any of this with custom CSS or overriding our default '.'variables. It\'s also worth noting that just about any HTML can go within '.'the .accordion-body, though the transition does limit overflow.', - 'attributes' => ['id' => 'panelsStayOpen-collapseOne'], - ], + 'header' => [ + 'content' => 'Accordion Item #1', + 'attributes' => ['id' => 'panelsStayOpen-headingOne'], ], - [ - 'header' => [ - 'content' => 'Accordion Item #2', - 'attributes' => ['id' => 'panelsStayOpen-headingTwo'], - ], - 'body' => [ - 'content' => 'This is the second item\'s accordion body. '.'It is hidden by default, until the collapse plugin adds the appropriate '.'classes that we use to style each element. These classes control the '.'overall appearance, as well as the showing and hiding via CSS transitions. '.'You can modify any of this with custom CSS or overriding our default '.'variables. It\'s also worth noting that just about any HTML can go within '.'the .accordion-body, though the transition does limit overflow.', - 'attributes' => ['id' => 'panelsStayOpen-collapseTwo'], - ], + 'body' => [ + 'content' => ' This is the first item\'s accordion body. ' . + 'It is shown by default, until the collapse plugin adds the appropriate ' . + 'classes that we use to style each element. These classes control the ' . + 'overall appearance, as well as the showing and hiding via CSS transitions. ' . + 'You can modify any of this with custom CSS or overriding our default ' . + 'variables. It\'s also worth noting that just about any HTML can go within ' . + 'the .accordion-body, though the transition does limit overflow.', + 'attributes' => ['id' => 'panelsStayOpen-collapseOne'], ], - [ - 'header' => [ - 'content' => 'Accordion Item #3', - 'attributes' => ['id' => 'panelsStayOpen-headingThree'], - ], - 'body' => [ - 'content' => ' This is the third item\'s accordion body. '.'It is hidden by default, until the collapse plugin adds the appropriate '.'classes that we use to style each element. These classes control the '.'overall appearance, as well as the showing and hiding via CSS transitions. '.'You can modify any of this with custom CSS or overriding our default '.'variables. It\'s also worth noting that just about any HTML can go within '.'the .accordion-body, though the transition does limit overflow.', - 'attributes' => ['id' => 'panelsStayOpen-collapseThree'], - ], + ], + [ + 'header' => [ + 'content' => 'Accordion Item #2', + 'attributes' => ['id' => 'panelsStayOpen-headingTwo'], + ], + 'body' => [ + 'content' => 'This is the second item\'s accordion body. ' . + 'It is hidden by default, until the collapse plugin adds the appropriate ' . + 'classes that we use to style each element. These classes control the ' . + 'overall appearance, as well as the showing and hiding via CSS transitions. ' . + 'You can modify any of this with custom CSS or overriding our default ' . + 'variables. It\'s also worth noting that just about any HTML can go within ' . + 'the .accordion-body, though the transition does limit overflow.', + 'attributes' => ['id' => 'panelsStayOpen-collapseTwo'], ], ], [ - 'id' => 'accordionPanelsStayOpenExample', - 'always_open' => true, - ] -); - + 'header' => [ + 'content' => 'Accordion Item #3', + 'attributes' => ['id' => 'panelsStayOpen-headingThree'], + ], + 'body' => [ + 'content' => ' This is the third item\'s accordion body. ' . + 'It is hidden by default, until the collapse plugin adds the appropriate ' . + 'classes that we use to style each element. These classes control the ' . + 'overall appearance, as well as the showing and hiding via CSS transitions. ' . + 'You can modify any of this with custom CSS or overriding our default ' . + 'variables. It\'s also worth noting that just about any HTML can go within ' . + 'the .accordion-body, though the transition does limit overflow.', + 'attributes' => ['id' => 'panelsStayOpen-collapseThree'], + ], + ], +], [ + 'id' => 'accordionPanelsStayOpenExample', + 'always_open' => true, +]); ``` diff --git a/website/docs/usage/components/alerts.mdx b/website/docs/usage/components/alerts.mdx index 6611202f1..3c26e1292 100644 --- a/website/docs/usage/components/alerts.mdx +++ b/website/docs/usage/components/alerts.mdx @@ -50,22 +50,17 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php alert( - 'A simple '.$variant.' alert—check it out!', + 'A simple ' . $variant . ' alert—check it out!', $variant ); } - ``` @@ -109,22 +104,19 @@ foreach ([ ```php alert( - 'A simple '.$variant.' alert with '.'an example link. '.'Give it a click if you like.', + 'A simple ' . $variant . ' alert with ' . +'an example link. ' . +'Give it a click if you like.', $variant ); } - ``` @@ -152,13 +144,18 @@ foreach ([ // Success echo $this->alert( - '

Aww yeah, you successfully read this important alert message. '.'This example text is going to run a bit longer so that you can see '.'how spacing within an alert works with this kind of content.

'.'
'.'

'.'Whenever you need to, be sure to use margin utilities to keep things nice and tidy.'.'

', + '

Aww yeah, you successfully read this important alert message. ' . +'This example text is going to run a bit longer so that you can see ' . +'how spacing within an alert works with this kind of content.

' . +'
' . +'

' . +'Whenever you need to, be sure to use margin utilities to keep things nice and tidy.' . +'

', [ 'heading' => 'Well done!', 'variant' => 'success', ] ); - ``` @@ -224,26 +221,45 @@ echo $this->alert( echo $this->alert( 'An example alert with an icon', [ - 'icon' => ''.''.'', + 'icon' => '' . + '' . + '', 'variant' => 'primary', ] ); echo ' - + - + - -'.''; + +' . +''; echo $this->alert( 'An example alert with an icon', [ - 'icon' => '', + 'icon' => '', 'variant' => 'primary', ], ); @@ -251,7 +267,8 @@ echo $this->alert( echo $this->alert( 'An example success alert with an icon', [ - 'icon' => '', + 'icon' => '', 'variant' => 'success', ], ); @@ -259,7 +276,8 @@ echo $this->alert( echo $this->alert( 'An example warning alert with an icon', [ - 'icon' => '', + 'icon' => '', 'variant' => 'warning', ], ); @@ -267,11 +285,11 @@ echo $this->alert( echo $this->alert( 'An example danger alert with an icon', [ - 'icon' => '', + 'icon' => '', 'variant' => 'danger', ], ); - ``` @@ -298,11 +316,10 @@ echo $this->alert( echo $this->alert( 'Holy guacamole! You should check in on some of those fields below.', [ - 'variant' => 'warning', + 'variant' => 'warning', 'dismissible' => true, ] ); - ``` diff --git a/website/docs/usage/components/badges.mdx b/website/docs/usage/components/badges.mdx index 4d6bd7047..e78da4856 100644 --- a/website/docs/usage/components/badges.mdx +++ b/website/docs/usage/components/badges.mdx @@ -43,18 +43,17 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; Example heading '.$this->badge('New').''; +echo '

Example heading ' . $this->badge('New') . '

'; // H2 -echo '

Example heading '.$this->badge('New').'

'; +echo '

Example heading ' . $this->badge('New') . '

'; // H3 -echo '

Example heading '.$this->badge('New').'

'; +echo '

Example heading ' . $this->badge('New') . '

'; // H4 -echo '

Example heading '.$this->badge('New').'

'; +echo '

Example heading ' . $this->badge('New') . '

'; // H5 -echo '
Example heading '.$this->badge('New').'
'; +echo '
Example heading ' . $this->badge('New') . '
'; // H6 -echo '
Example heading '.$this->badge('New').'
'; - +echo '
Example heading ' . $this->badge('New') . '
'; ``` @@ -78,19 +77,13 @@ echo '
Example heading '.$this->badge('New').'
'; ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Notifications', - 'badge' => [ - '4', - 'secondary', - ], - 'variant' => 'primary', - ], - ] -); - +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Notifications', + 'badge' => ['4', 'secondary'], + 'variant' => 'primary', + ], +]); ``` @@ -122,44 +115,39 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Inbox', - 'badge' => [ - '99+', - [ - 'variant' => 'danger', - 'positioned' => true, - 'type' => 'pill', - 'hidden_content' => 'unread messages', - ], - ], - 'variant' => 'primary', +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Inbox', + 'badge' => [ + '99+', + [ + 'variant' => 'danger', + 'positioned' => true, + 'type' => 'pill', + 'hidden_content' => 'unread messages', + ] ], - ] -); - -echo PHP_EOL.'
'; - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Profile', - 'badge' => [ - '', - [ - 'variant' => 'danger', - 'positioned' => true, - 'type' => 'pill', - 'hidden_content' => 'New alerts', - ], - ], - 'variant' => 'primary', + 'variant' => 'primary', + ], +]); + +echo PHP_EOL . '
'; + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Profile', + 'badge' => [ + '', + [ + 'variant' => 'danger', + 'positioned' => true, + 'type' => 'pill', + 'hidden_content' => 'New alerts', + ] ], - ] -); - + 'variant' => 'primary', + ], +]); ``` @@ -195,7 +183,6 @@ echo $this->badge('Warning', ['variant' => 'warning', 'text_variant' => 'dark']) echo $this->badge('Info', ['variant' => 'info', 'text_variant' => 'dark']); echo $this->badge('Light', ['variant' => 'light', 'text_variant' => 'dark']); echo $this->badge('Dark', 'dark'); - ``` @@ -229,30 +216,17 @@ echo $this->badge('Success', ['variant' => 'success', 'type' => 'pill']); echo $this->badge('Danger', ['variant' => 'danger', 'type' => 'pill']); echo $this->badge( 'Warning', - [ - 'variant' => 'warning', - 'type' => 'pill', - 'text_variant' => 'dark', - ] + ['variant' => 'warning', 'type' => 'pill', 'text_variant' => 'dark'] ); echo $this->badge( 'Info', - [ - 'variant' => 'info', - 'type' => 'pill', - 'text_variant' => 'dark', - ] + ['variant' => 'info', 'type' => 'pill', 'text_variant' => 'dark'] ); echo $this->badge( 'Light', - [ - 'variant' => 'light', - 'type' => 'pill', - 'text_variant' => 'dark', - ] + ['variant' => 'light', 'type' => 'pill', 'text_variant' => 'dark'] ); echo $this->badge('Dark', ['variant' => 'dark', 'type' => 'pill']); - ``` diff --git a/website/docs/usage/components/breadcrumb.mdx b/website/docs/usage/components/breadcrumb.mdx index 7eef3dcbe..6dd190348 100644 --- a/website/docs/usage/components/breadcrumb.mdx +++ b/website/docs/usage/components/breadcrumb.mdx @@ -43,60 +43,29 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; breadcrumbs( - new \Laminas\Navigation\Navigation( - [ +echo $this->breadcrumbs(new \Laminas\Navigation\Navigation([ + ['label' => 'Home', 'uri' => '/', 'active' => true,], +]))->setMinDepth(0) ; + +echo $this->breadcrumbs(new \Laminas\Navigation\Navigation([ + [ + 'label' => 'Home', 'uri' => '/', 'pages' => [ + ['label' => 'Library', 'uri' => '/library', 'active' => true], + ], + ], +]))->setMinDepth(0); + +echo $this->breadcrumbs(new \Laminas\Navigation\Navigation([ + [ + 'label' => 'Home', 'uri' => '/', 'pages' => [ [ - 'label' => 'Home', - 'uri' => '/', - 'active' => true, - ], - ] - ) -)->setMinDepth(0); - -echo $this->breadcrumbs( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Home', - 'uri' => '/', - 'pages' => [ - [ - 'label' => 'Library', - 'uri' => '/library', - 'active' => true, - ], - ], - ], - ] - ) -)->setMinDepth(0); - -echo $this->breadcrumbs( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Home', - 'uri' => '/', - 'pages' => [ - [ - 'label' => 'Library', - 'uri' => '/library', - 'pages' => [ - [ - 'label' => 'Data', - 'uri' => '/library/data', - 'active' => true, - ], - ], - ], + 'label' => 'Library', 'uri' => '/library', 'pages' => [ + ['label' => 'Data', 'uri' => '/library/data', 'active' => true], ], ], - ] - ) -)->setMinDepth(0); - + ], + ], +]))->setMinDepth(0); ``` @@ -128,47 +97,32 @@ echo $this->breadcrumbs( ```php breadcrumbs( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Home', - 'uri' => '/', - 'pages' => [ - [ - 'label' => 'Library', - 'uri' => '/library', - 'active' => true, - ], - ], - ], - ] - ) -)->setMinDepth(0)->setSeparator('>'); - -echo $this->breadcrumbs( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Home', - 'uri' => '/', - 'pages' => [ - [ - 'label' => 'Library', - 'uri' => '/library', - 'active' => true, - ], - ], - ], - ] - ) -)->setMinDepth(0)->setSeparator( - 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' '.'height=\'8\'%3E%3Cpath d=\'M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z\' '.'fill=\'currentColor\'/%3E%3C/svg%3E")' +echo $this->breadcrumbs(new \Laminas\Navigation\Navigation([ + [ + 'label' => 'Home', 'uri' => '/', 'pages' => [ + ['label' => 'Library', 'uri' => '/library', 'active' => true], + ], + ], +])) +->setMinDepth(0) +->setSeparator('>'); + +echo $this->breadcrumbs(new \Laminas\Navigation\Navigation([ + [ + 'label' => 'Home', 'uri' => '/', 'pages' => [ + ['label' => 'Library', 'uri' => '/library', 'active' => true], + ], + ], +])) +->setMinDepth(0) +->setSeparator( + 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' ' . +'height=\'8\'%3E%3Cpath d=\'M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z\' ' . +'fill=\'currentColor\'/%3E%3C/svg%3E")' ); // Reset separator $this->breadcrumbs()->setSeparator(' > '); - ``` diff --git a/website/docs/usage/components/button-group.mdx b/website/docs/usage/components/button-group.mdx index d6c77013a..c7de2d8f9 100644 --- a/website/docs/usage/components/button-group.mdx +++ b/website/docs/usage/components/button-group.mdx @@ -38,61 +38,42 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; echo $this->buttonGroup( [ - // Create button via specs and \Laminas\Form\Factory - [ - 'type' => 'button', - 'options' => ['label' => 'Left'], - ], + // Create button via specs and \Laminas\Form\Factory + ['type' => 'button', 'options' => ['label' => 'Left']], // Button object new \Laminas\Form\Element\Button('middle', ['label' => 'Middle']), - [ - 'type' => 'button', - 'options' => ['label' => 'Right'], - ], + ['type' => 'button', 'options' => ['label' => 'Right']], ], [ - 'variant' => 'primary', - 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Basic example', - ], + 'variant' => 'primary', + 'attributes' => ['role' => 'group', 'aria-label' => 'Basic example'], ], ); echo $this->buttonGroup( [ [ - 'type' => 'button', - 'options' => [ - 'tag' => 'a', - 'label' => 'Active link', - ], + 'type' => 'button', + 'options' => ['tag' => 'a', 'label' => 'Active link'], 'attributes' => [ - 'class' => 'active', + 'class' => 'active', 'aria-current' => 'page', - 'href' => '#', + 'href' => '#' ], ], [ - 'type' => 'button', - 'options' => [ - 'tag' => 'a', - 'label' => 'Link', - ], + 'type' => 'button', + 'options' => ['tag' => 'a', 'label' => 'Link'], 'attributes' => ['href' => '#'], ], [ - 'type' => 'button', - 'options' => [ - 'tag' => 'a', - 'label' => 'Link', - ], + 'type' => 'button', + 'options' => ['tag' => 'a', 'label' => 'Link'], 'attributes' => ['href' => '#'], ], ], ['variant' => 'primary'], ); - ``` @@ -119,36 +100,12 @@ echo $this->buttonGroup( echo $this->buttonGroup( [ - [ - 'type' => 'button', - 'options' => [ - 'label' => 'Left', - 'variant' => 'danger', - ], - ], - [ - 'type' => 'button', - 'options' => [ - 'label' => 'Middle', - 'variant' => 'warning', - ], - ], - [ - 'type' => 'button', - 'options' => [ - 'label' => 'Right', - 'variant' => 'success', - ], - ], + ['type' => 'button', 'options' => ['label' => 'Left', 'variant' => 'danger']], + ['type' => 'button', 'options' => ['label' => 'Middle', 'variant' => 'warning']], + ['type' => 'button', 'options' => ['label' => 'Right', 'variant' => 'success']], ], - [ - 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Basic mixed styles example', - ], - ] + ['attributes' => ['role' => 'group', 'aria-label' => 'Basic mixed styles example']] ); - ``` @@ -175,28 +132,15 @@ echo $this->buttonGroup( echo $this->buttonGroup( [ - [ - 'type' => 'button', - 'options' => ['label' => 'Left'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Middle'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Right'], - ], + ['type' => 'button', 'options' => ['label' => 'Left']], + ['type' => 'button', 'options' => ['label' => 'Middle']], + ['type' => 'button', 'options' => ['label' => 'Right']], ], [ - 'variant' => 'outline-primary', - 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Basic outlined example', - ], + 'variant' => 'outline-primary', + 'attributes' => ['role' => 'group', 'aria-label' => 'Basic outlined example'], ], ); - ``` @@ -236,39 +180,27 @@ echo $this->buttonGroup( echo $this->buttonGroup( [ [ - 'type' => 'checkbox', - 'name' => 'checkbox-1', - 'options' => [ - 'tag' => 'input', - 'label' => 'Checkbox 1', - ], + 'type' => 'checkbox', + 'name' => 'checkbox-1', + 'options' => ['tag' => 'input', 'label' => 'Checkbox 1'], 'attributes' => ['id' => 'btncheck1'], ], [ - 'type' => 'checkbox', - 'name' => 'checkbox-2', - 'options' => [ - 'tag' => 'input', - 'label' => 'Checkbox 2', - ], + 'type' => 'checkbox', + 'name' => 'checkbox-2', + 'options' => ['tag' => 'input', 'label' => 'Checkbox 2'], 'attributes' => ['id' => 'btncheck3'], ], [ - 'type' => 'checkbox', - 'name' => 'checkbox-3', - 'options' => [ - 'tag' => 'input', - 'label' => 'Checkbox 3', - ], + 'type' => 'checkbox', + 'name' => 'checkbox-3', + 'options' => ['tag' => 'input', 'label' => 'Checkbox 3'], 'attributes' => ['id' => 'btncheck3'], ], ], [ - 'variant' => 'outline-primary', - 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Basic checkbox toggle button group', - ], + 'variant' => 'outline-primary', + 'attributes' => ['role' => 'group', 'aria-label' => 'Basic checkbox toggle button group'], ], ); @@ -277,24 +209,24 @@ echo '
'; echo $this->buttonGroup( [ [ - 'name' => 'btnradio', - 'type' => 'radio', - 'options' => [ - 'tag' => 'input', + 'name' => 'btnradio', + 'type' => 'radio', + 'options' => [ + 'tag' => 'input', 'value_options' => [ [ - 'label' => 'Radio 1', - 'value' => 'option1', + 'label' => 'Radio 1', + 'value' => 'option1', 'attributes' => ['id' => 'btnradio1'], ], [ - 'label' => 'Radio 2', - 'value' => 'option2', + 'label' => 'Radio 2', + 'value' => 'option2', 'attributes' => ['id' => 'btnradio2'], ], [ - 'label' => 'Radio 3', - 'value' => 'option3', + 'label' => 'Radio 3', + 'value' => 'option3', 'attributes' => ['id' => 'btnradio3'], ], ], @@ -303,14 +235,12 @@ echo $this->buttonGroup( ], ], [ - 'variant' => 'outline-primary', + 'variant' => 'outline-primary', 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Basic radio toggle button group', + 'role' => 'group', 'aria-label' => 'Basic radio toggle button group', ], ], ); - ``` @@ -348,84 +278,51 @@ echo $this->buttonGroup( ```php buttonToolbar( +echo $this->buttonToolbar([ [ - [ - 'buttons' => [ - [ - 'type' => 'button', - 'options' => ['label' => '1'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '2'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '3'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '4'], - ], - ], - 'options' => [ - 'variant' => 'primary', - 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'First group', - 'class' => 'me-2', - ], - ], + 'buttons' => [ + ['type' => 'button', 'options' => ['label' => '1']], + ['type' => 'button', 'options' => ['label' => '2']], + ['type' => 'button', 'options' => ['label' => '3']], + ['type' => 'button', 'options' => ['label' => '4']], ], - [ - 'buttons' => [ - [ - 'type' => 'button', - 'options' => ['label' => '5'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '6'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '7'], - ], - ], - 'options' => [ - 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Second group', - 'class' => 'me-2', - ], + 'options' => [ + 'variant' => 'primary', + 'attributes' => [ + 'role' => 'group', + 'aria-label' => 'First group', + 'class' => 'me-2', ], ], - [ - 'buttons' => [ - [ - 'type' => 'button', - 'options' => ['label' => '8'], - ], - ], - 'options' => [ - 'variant' => 'info', - 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Third group', - 'class' => 'me-2', - ], + ], + [ + 'buttons' => [ + ['type' => 'button', 'options' => ['label' => '5']], + ['type' => 'button', 'options' => ['label' => '6']], + ['type' => 'button', 'options' => ['label' => '7']], + ], + 'options' => [ + 'attributes' => [ + 'role' => 'group', + 'aria-label' => 'Second group', + 'class' => 'me-2', ], ], ], [ - 'attributes' => [ - 'role' => 'toolbar', - 'aria-label' => 'Toolbar with button groups', + 'buttons' => [ + ['type' => 'button', 'options' => ['label' => '8']], ], - ] -); - + 'options' => [ + 'variant' => 'info', + 'attributes' => [ + 'role' => 'group', + 'aria-label' => 'Third group', + 'class' => 'me-2', + ], + ], + ], +], ['attributes' => ['role' => 'toolbar', 'aria-label' => 'Toolbar with button groups']]); ``` @@ -470,39 +367,27 @@ echo $this->buttonToolbar( $toolbarItems = [ [ 'buttons' => [ - [ - 'type' => 'button', - 'options' => ['label' => '1'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '2'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '3'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '4'], - ], + ['type' => 'button', 'options' => ['label' => '1']], + ['type' => 'button', 'options' => ['label' => '2']], + ['type' => 'button', 'options' => ['label' => '3']], + ['type' => 'button', 'options' => ['label' => '4']], ], 'options' => [ - 'variant' => 'outline-secondary', + 'variant' => 'outline-secondary', 'attributes' => [ - 'role' => 'group', + 'role' => 'group', 'aria-label' => 'First group', - 'class' => 'me-2', + 'class' => 'me-2', ], ], ], [ - 'type' => 'text', - 'name' => 'input-group-example', - 'options' => ['add_on_prepend' => '@'], + 'type' => 'text', + 'name' => 'input-group-example', + 'options' => ['add_on_prepend' => '@'], 'attributes' => [ - 'placeholder' => 'Input group example', - 'aria-label' => 'Input group example', + 'placeholder' => 'Input group example', + 'aria-label' => 'Input group example', 'aria-describedby' => 'btnGroupAddon', ], ], @@ -512,9 +397,9 @@ echo $this->buttonToolbar( $toolbarItems, [ 'attributes' => [ - 'role' => 'toolbar', + 'role' => 'toolbar', 'aria-label' => 'Toolbar with button groups', - 'class' => 'mb-3', + 'class' => 'mb-3', ], ] ); @@ -524,13 +409,13 @@ echo $this->buttonToolbar( $toolbarItems, [ 'attributes' => [ - 'role' => 'toolbar', - 'aria-label' => 'Toolbar with button groups', - 'class' => 'justify-content-between', + 'role' => 'toolbar', + 'aria-label' => + 'Toolbar with button groups', + 'class' => 'justify-content-between', ], ] ); - ``` @@ -571,32 +456,19 @@ echo $this->buttonToolbar( foreach (['lg', null, 'sm'] as $size) { echo $this->buttonGroup( [ - [ - 'type' => 'button', - 'options' => ['label' => 'Left'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Middle'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Right'], - ], + ['type' => 'button', 'options' => ['label' => 'Left']], + ['type' => 'button', 'options' => ['label' => 'Middle']], + ['type' => 'button', 'options' => ['label' => 'Right']], ], [ - 'size' => $size, - 'variant' => 'outline-dark', - 'attributes' => [ - 'role' => 'group', - 'aria-label' => '...', - ], + 'size' => $size, + 'variant' => 'outline-dark', + 'attributes' => ['role' => 'group', 'aria-label' => '...'], ], ); echo '
'; -}//end foreach - +} ``` @@ -629,35 +501,25 @@ foreach (['lg', null, 'sm'] as $size) { echo $this->buttonGroup( [ + ['type' => 'button', 'options' => ['label' => '1']], + ['type' => 'button', 'options' => ['label' => '2']], [ - 'type' => 'button', - 'options' => ['label' => '1'], - ], - [ - 'type' => 'button', - 'options' => ['label' => '2'], - ], - [ - 'type' => 'button', - 'options' => [ - 'label' => 'Dropdown', - 'dropdown' => [ - 'Dropdown link', - 'Dropdown link', - ], + 'type' => 'button', + 'options' => [ + 'label' => 'Dropdown', + 'dropdown' => ['Dropdown link', 'Dropdown link'], ], 'attributes' => ['id' => 'btnGroupDrop1'], ], ], [ - 'variant' => 'primary', + 'variant' => 'primary', 'attributes' => [ - 'role' => 'group', + 'role' => 'group', 'aria-label' => 'Button group with nested dropdown', ], ], ); - ``` @@ -731,33 +593,15 @@ echo $this->buttonGroup( echo $this->buttonGroup( [ - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], + ['type' => 'button', 'options' => ['label' => 'Button']], + ['type' => 'button', 'options' => ['label' => 'Button']], + ['type' => 'button', 'options' => ['label' => 'Button']], + ['type' => 'button', 'options' => ['label' => 'Button']], + ['type' => 'button', 'options' => ['label' => 'Button']], + ['type' => 'button', 'options' => ['label' => 'Button']], ], [ - 'variant' => 'dark', + 'variant' => 'dark', 'vertical' => true, ], ); @@ -766,65 +610,41 @@ echo '
'; echo $this->buttonGroup( [ + ['type' => 'button', 'options' => ['label' => 'Button']], + ['type' => 'button', 'options' => ['label' => 'Button']], [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', + 'type' => 'button', 'options' => [ - 'label' => 'Dropdown', - 'dropdown' => [ - 'Dropdown link', - 'Dropdown link', - ], + 'label' => 'Dropdown', + 'dropdown' => ['Dropdown link', 'Dropdown link'], ], ], + ['type' => 'button', 'options' => ['label' => 'Button']], + ['type' => 'button', 'options' => ['label' => 'Button']], [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', - 'options' => ['label' => 'Button'], - ], - [ - 'type' => 'button', + 'type' => 'button', 'options' => [ - 'label' => 'Dropdown', - 'dropdown' => [ - 'Dropdown link', - 'Dropdown link', - ], + 'label' => 'Dropdown', + 'dropdown' => ['Dropdown link', 'Dropdown link'], ], ], [ - 'type' => 'button', + 'type' => 'button', 'options' => [ - 'label' => 'Dropdown', - 'dropdown' => [ - 'Dropdown link', - 'Dropdown link', - ], + 'label' => 'Dropdown', + 'dropdown' => ['Dropdown link', 'Dropdown link'], ], ], [ - 'type' => 'button', + 'type' => 'button', 'options' => [ - 'label' => 'Dropdown', - 'dropdown' => [ - 'Dropdown link', - 'Dropdown link', - ], + 'label' => 'Dropdown', + 'dropdown' => ['Dropdown link', 'Dropdown link'], ], ], ], [ - 'variant' => 'primary', + 'variant' => 'primary', 'vertical' => true, ], ); @@ -834,24 +654,24 @@ echo '
'; echo $this->buttonGroup( [ [ - 'name' => 'vbtn-radio', - 'type' => 'radio', - 'options' => [ - 'tag' => 'input', + 'name' => 'vbtn-radio', + 'type' => 'radio', + 'options' => [ + 'tag' => 'input', 'value_options' => [ [ - 'label' => 'Radio 1', - 'value' => 'option1', + 'label' => 'Radio 1', + 'value' => 'option1', 'attributes' => ['id' => 'vbtn-radio1'], ], [ - 'label' => 'Radio 2', - 'value' => 'option2', + 'label' => 'Radio 2', + 'value' => 'option2', 'attributes' => ['id' => 'vbtn-radio2'], ], [ - 'label' => 'Radio 3', - 'value' => 'option3', + 'label' => 'Radio 3', + 'value' => 'option3', 'attributes' => ['id' => 'vbtn-radio3'], ], ], @@ -860,15 +680,13 @@ echo $this->buttonGroup( ], ], [ - 'variant' => 'outline-danger', - 'vertical' => true, + 'variant' => 'outline-danger', + 'vertical' => true, 'attributes' => [ - 'role' => 'group', - 'aria-label' => 'Vertical radio toggle button group', + 'role' => 'group', 'aria-label' => 'Vertical radio toggle button group', ], ], ); - ``` diff --git a/website/docs/usage/components/buttons.mdx b/website/docs/usage/components/buttons.mdx index 753d7de85..cc21dff9c 100644 --- a/website/docs/usage/components/buttons.mdx +++ b/website/docs/usage/components/buttons.mdx @@ -35,27 +35,19 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => ucfirst($variant), - 'variant' => $variant, - ], - ] - ); +foreach ( + [ + 'primary', 'secondary', 'success', 'danger', + 'warning', 'info', 'light', 'dark', 'link', + ] as $variant +) { + echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => ucfirst($variant), + 'variant' => $variant, + ], + ]); } - ``` @@ -82,64 +74,53 @@ foreach ([ // Link button -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Link', - 'variant' => 'primary', - 'tag' => 'a', - ], - 'attributes' => ['href' => '#'], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Link', + 'variant' => 'primary', + 'tag' => 'a', + ], + 'attributes' => ['href' => '#'], +]); // Submit button -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - 'attributes' => ['type' => 'submit'], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], + 'attributes' => ['type' => 'submit'], +]); // Input button -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'input', - 'label' => 'Input', - 'variant' => 'primary', - ], - 'attributes' => ['type' => 'button'], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'input', + 'label' => 'Input', + 'variant' => 'primary', + ], + 'attributes' => ['type' => 'button'], +]); // Submit input -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'input', - 'label' => 'Submit', - 'variant' => 'primary', - ], - 'attributes' => ['type' => 'submit'], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'input', + 'label' => 'Submit', + 'variant' => 'primary', + ], + 'attributes' => ['type' => 'submit'], +]); // Reset -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'input', - 'label' => 'Reset', - 'variant' => 'primary', - ], - 'attributes' => ['type' => 'reset'], - ] -); - +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'input', + 'label' => 'Reset', + 'variant' => 'primary', + ], + 'attributes' => ['type' => 'reset'], +]); ``` @@ -167,26 +148,19 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => ucfirst($variant), - 'variant' => 'outline-'.$variant, - ], - ] - ); +foreach ( + [ + 'primary', 'secondary', 'success', 'danger', + 'warning', 'info', 'light', 'dark', + ] as $variant +) { + echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => ucfirst($variant), + 'variant' => 'outline-' . $variant, + ], + ]); } - ``` @@ -213,48 +187,39 @@ foreach ([ // Large buttons -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Large button', - 'variant' => 'primary', - 'size' => 'lg', - ], - ] -); - - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Large button', - 'size' => 'lg', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Large button', + 'variant' => 'primary', + 'size' => 'lg', + ], +]); + + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Large button', + 'size' => 'lg', + ], +]); echo '

'; // Small buttons -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Small button', - 'variant' => 'primary', - 'size' => 'sm', - ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Small button', - 'size' => 'sm', - ], - ] -); - +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Small button', + 'variant' => 'primary', + 'size' => 'sm', + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Small button', + 'size' => 'sm', + ], +]); ``` @@ -283,83 +248,78 @@ echo $this->formButton()->renderSpec( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Primary button', - 'variant' => 'primary', - 'size' => 'lg', - ], - 'attributes' => [ 'disabled' => true ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'size' => 'lg', - ], - 'attributes' => [ 'disabled' => true ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Primary button', + 'variant' => 'primary', + 'size' => 'lg', + ], + 'attributes' => [ + 'disabled' => true, + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'size' => 'lg', + ], + 'attributes' => [ + 'disabled' => true, + ], +]); echo '

'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'a', - 'label' => 'Primary link', - 'variant' => 'primary', - 'size' => 'lg', - ], - 'attributes' => [ 'disabled' => true ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'a', - 'label' => 'Link', - 'size' => 'lg', - ], - 'attributes' => [ 'disabled' => true ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'a', + 'label' => 'Primary link', + 'variant' => 'primary', + 'size' => 'lg', + ], + 'attributes' => [ + 'disabled' => true, + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'a', + 'label' => 'Link', + 'size' => 'lg', + ], + 'attributes' => [ + 'disabled' => true, + ], +]); echo '

'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'a', - 'label' => 'Primary link', - 'variant' => 'primary', - 'size' => 'lg', - ], - 'attributes' => [ - 'href' => '#', - 'disabled' => true, - ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'a', - 'label' => 'Link', - 'size' => 'lg', - ], - 'attributes' => [ - 'href' => '#', - 'disabled' => true, - ], - ] -); - +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'a', + 'label' => 'Primary link', + 'variant' => 'primary', + 'size' => 'lg', + ], + 'attributes' => [ + 'href' => '#', + 'disabled' => true, + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'a', + 'label' => 'Link', + 'size' => 'lg', + ], + 'attributes' => [ + 'href' => '#', + 'disabled' => true, + ], +]); ``` @@ -401,23 +361,19 @@ echo $this->formButton()->renderSpec( echo '
'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); echo '
'; @@ -425,23 +381,19 @@ echo '

'; echo '
'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); echo '
'; @@ -449,23 +401,19 @@ echo '

'; echo '
'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); echo '
'; @@ -473,26 +421,21 @@ echo '

'; echo '
'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Button', - 'variant' => 'primary', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Button', + 'variant' => 'primary', + ], +]); echo '
'; - ``` @@ -523,78 +466,71 @@ echo ''; ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Toggle button', - 'variant' => 'primary', - 'toggle' => false, - ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Active toggle button', - 'variant' => 'primary', - 'toggle' => true, - ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Disabled toggle button', - 'variant' => 'primary', - 'toggle' => false, - ], - 'attributes' => [ 'disabled' => true ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Toggle button', + 'variant' => 'primary', + 'toggle' => false, + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Active toggle button', + 'variant' => 'primary', + 'toggle' => true, + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Disabled toggle button', + 'variant' => 'primary', + 'toggle' => false, + ], + 'attributes' => [ + 'disabled' => true, + ], +]); echo '

'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'a', - 'label' => 'Toggle link', - 'variant' => 'primary', - 'toggle' => false, - ], - 'attributes' => [ 'href' => '#' ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'a', - 'label' => 'Active toggle link', - 'variant' => 'primary', - 'toggle' => true, - ], - 'attributes' => [ 'href' => '#' ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'tag' => 'a', - 'label' => 'Disabled toggle link', - 'variant' => 'primary', - 'toggle' => false, - ], - 'attributes' => [ - 'disabled' => true, - 'href' => '#', - ], - ] -); - +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'a', + 'label' => 'Toggle link', + 'variant' => 'primary', + 'toggle' => false, + ], + 'attributes' => [ + 'href' => '#', + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'a', + 'label' => 'Active toggle link', + 'variant' => 'primary', + 'toggle' => true, + ], + 'attributes' => [ + 'href' => '#', + ], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'tag' => 'a', + 'label' => 'Disabled toggle link', + 'variant' => 'primary', + 'toggle' => false, + ], + 'attributes' => [ + 'disabled' => true, + 'href' => '#', + ], +]); ``` diff --git a/website/docs/usage/components/card.mdx b/website/docs/usage/components/card.mdx index 7a172d596..645befbca 100644 --- a/website/docs/usage/components/card.mdx +++ b/website/docs/usage/components/card.mdx @@ -34,19 +34,12 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php card( - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => "Some quick example text to build on the card title and make up the bulk of the card's content.", - 'Go somewhere', - ], - ['style' => 'width: 18rem;'] -); - +echo $this->card([ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => "Some quick example text to build on the card title and make up the bulk of the card's content.", + 'Go somewhere', +], ['style' => 'width: 18rem;']); ``` @@ -76,7 +69,6 @@ echo $this->card( card('This is some text within a card body.'); - ``` @@ -105,22 +97,19 @@ echo $this->card('This is some text within a card body.'); ```php card( - [ - 'title' => 'Card title', - 'subtitle' => [ - 'content' => 'Card subtitle', - 'attributes' => ['class' => 'mb-2 text-muted'], - ], - 'text' => 'Some quick example text to build on the card title'." and make up the bulk of the card's content.", - 'link' => [ - 'Card link', - 'Another link', - ], +echo $this->card([ + 'title' => 'Card title', + 'subtitle' => [ + 'content' => 'Card subtitle', + 'attributes' => ['class' => 'mb-2 text-muted'], ], - ['style' => 'width: 18rem;'] -); - + 'text' => "Some quick example text to build on the card title" . + " and make up the bulk of the card's content.", + 'link' => [ + 'Card link', + 'Another link', + ], +], ['style' => 'width: 18rem;']); ``` @@ -146,17 +135,11 @@ echo $this->card( ```php card( - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'text' => 'Some quick example text to build on the card title'." and make up the bulk of the card's content.", - ], - ['style' => 'width: 18rem;'] -); - +echo $this->card([ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'text' => "Some quick example text to build on the card title" . + " and make up the bulk of the card's content.", +], ['style' => 'width: 18rem;']); ``` @@ -205,51 +188,41 @@ echo $this->card( ```php card( - [ - 'listGroup' => [ - [ - 'An item', - 'A second item', - 'A third item', - ], +echo $this->card([ + 'listGroup' => [ + [ + 'An item', + 'A second item', + 'A third item', ], ], - ['style' => 'width: 18rem;'] -); +], ['style' => 'width: 18rem;']); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; -echo $this->card( - [ - 'header' => 'Featured', - 'listGroup' => [ - [ - 'An item', - 'A second item', - 'A third item', - ], +echo $this->card([ + 'header' => 'Featured', + 'listGroup' => [ + [ + 'An item', + 'A second item', + 'A third item', ], ], - ['style' => 'width: 18rem;'] -); +], ['style' => 'width: 18rem;']); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; -echo $this->card( - [ - 'listGroup' => [ - [ - 'An item', - 'A second item', - 'A third item', - ], +echo $this->card([ + 'listGroup' => [ + [ + 'An item', + 'A second item', + 'A third item', ], - 'footer' => 'Card footer', ], - ['style' => 'width: 18rem;'] -); - + 'footer' => 'Card footer', +], ['style' => 'width: 18rem;']); ``` @@ -285,29 +258,23 @@ echo $this->card( ```php card( - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => 'Some quick example text to build on the card title'." and make up the bulk of the card's content.", - 'listGroup' => [ - [ - 'An item', - 'A second item', - 'A third item', - ], - ], - 'link' => [ - 'Card link', - 'Another link', +echo $this->card([ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => "Some quick example text to build on the card title" . + " and make up the bulk of the card's content.", + 'listGroup' => [ + [ + 'An item', + 'A second item', + 'A third item', ], ], - ['style' => 'width: 18rem;'] -); - + 'link' => [ + 'Card link', + 'Another link', + ], +], ['style' => 'width: 18rem;']); ``` @@ -373,60 +340,47 @@ echo $this->card( card( - [ - 'header' => 'Featured', - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', - ] -); +echo $this->card([ + 'header' => 'Featured', + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Styled card headers -echo $this->card( - [ - 'header' => [ - 'Featured', - ['tag' => 'h5'], - ], - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', - ] -); +echo $this->card([ + 'header' => [ + 'Featured', + ['tag' => 'h5'], + ], + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // With blockquote -echo $this->card( - [ - 'header' => 'Quote', - 'blockquote' => [ - 'A well-known quote, contained in a blockquote element.', - 'Someone famous in Source Title', - ], - ] -); +echo $this->card([ + 'header' => 'Quote', + 'blockquote' => [ + 'A well-known quote, contained in a blockquote element.', + 'Someone famous in Source Title', + ], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Centered -echo $this->card( - [ - 'header' => 'Featured', - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', - 'footer' => [ - '2 days ago', - ['class' => 'text-muted'], - ], - ], - ['class' => 'text-center'] -); - +echo $this->card([ + 'header' => 'Featured', + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', + 'footer' => ['2 days ago', ['class' => 'text-muted']], +], ['class' => 'text-center']); ``` @@ -489,7 +443,6 @@ echo $this->cardGrid( ], ['column' => 'sm-6'], ); - ``` @@ -533,7 +486,7 @@ echo $this->card( ['class' => 'w-75'] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->card( [ @@ -543,7 +496,6 @@ echo $this->card( ], ['class' => 'w-50'] ); - ``` @@ -578,7 +530,6 @@ echo $this->card( ], ['style' => 'width: 18rem;'] ); - ``` @@ -621,45 +572,29 @@ echo $this->card( ```php card( - [ - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', - ], - ['style' => 'width: 18rem;'] -); +echo $this->card([ + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', +], ['style' => 'width: 18rem;']); echo '
'; // Text center -echo $this->card( - [ - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', - ], - [ - 'class' => 'text-center', - 'style' => 'width: 18rem;', - ] -); +echo $this->card([ + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', +], ['class' => 'text-center', 'style' => 'width: 18rem;']); echo '
'; // Text end -echo $this->card( - [ - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', - ], - [ - 'class' => 'text-end', - 'style' => 'width: 18rem;', - ] -); - +echo $this->card([ + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', +], ['class' => 'text-end', 'style' => 'width: 18rem;']); ``` @@ -721,64 +656,35 @@ echo $this->card( card( - [ - 'nav' => new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', - ], - ['class' => 'text-center'] -); +echo $this->card([ + 'nav' => new \Laminas\Navigation\Navigation( + [ + ['label' => 'Active', 'uri' => '#', 'active' => true,], + ['label' => 'Link', 'uri' => '#',], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false,], + ] + ), + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', +], ['class' => 'text-center']); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Nav pills (pages defined by an array as container) -echo $this->card( - [ - 'nav' => [ - 'options' => ['pills' => true], - 'container' => [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ], - ], - 'title' => 'Special title treatment', - 'text' => 'With supporting text below as a natural lead-in to additional content.', - 'Go somewhere', +echo $this->card([ + 'nav' => [ + 'options' => ['pills' => true], + 'container' => [ + ['label' => 'Active', 'uri' => '#', 'active' => true,], + ['label' => 'Link', 'uri' => '#',], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false,], + ] ], - ['class' => 'text-center'] -); - + 'title' => 'Special title treatment', + 'text' => 'With supporting text below as a natural lead-in to additional content.', + 'Go somewhere', +], ['class' => 'text-center']); ``` @@ -818,35 +724,25 @@ echo $this->card( ```php card( - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to additional content. '.'This content is a little bit longer.', - 'Last updated 3 mins ago', - ], +echo $this->card([ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...']], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to additional content. ' . + 'This content is a little bit longer.', + 'Last updated 3 mins ago', ], - ['class' => 'mb-3'] -); - -echo $this->card( - [ - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to additional content. '.'This content is a little bit longer.', - 'Last updated 3 mins ago', - ], - 'image_bottom' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - ] -); - +], ['class' => 'mb-3']); + +echo $this->card([ + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to additional content. ' . + 'This content is a little bit longer.', + 'Last updated 3 mins ago' + ], + 'image_bottom' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...']], +]); ``` @@ -874,26 +770,18 @@ echo $this->card( ```php card( - [ - 'overlay' => [ - 'img' => [ - '/twbs-helper-module/img/docs/card-image.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural '.'lead-in to additional content. '.'This content is a little bit longer.', - 'Last updated 3 mins ago', - ], +echo $this->card([ + 'overlay' => [ + 'img' => ['/twbs-helper-module/img/docs/card-image.svg', ['alt' => '...']], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural ' . + 'lead-in to additional content. ' . + 'This content is a little bit longer.', + 'Last updated 3 mins ago', ], ], - [ - 'bg_variant' => 'dark', - 'class' => 'text-white', - ] -); - +], ['bg_variant' => 'dark', 'class' => 'text-white']); ``` @@ -927,43 +815,33 @@ echo $this->card( ```php card( - [ - 'row' => [ +echo $this->card([ + 'row' => [ + [ [ [ - [ - 'image' => [ - '/twbs-helper-module/img/docs/image.svg', - [ - 'alt' => '...', - 'fluid' => true, - 'rounded' => 'start', - ], - ], + 'image' => [ + '/twbs-helper-module/img/docs/image.svg', + ['alt' => '...', 'fluid' => true, 'rounded' => 'start'], ], - ['column' => 'md-4'], ], + ['column' => 'md-4'] + ], + [ [ - [ - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', - 'Last updated 3 mins ago', - ], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', + 'Last updated 3 mins ago', ], - ['column' => 'md-8'], ], + ['column' => 'md-8'], ], - ['class' => 'g-0'], ], - ], - [ - 'class' => 'mb-3', - 'style' => 'max-width: 540px;', + ['class' => 'g-0'], ] -); - +], ['class' => 'mb-3', 'style' => 'max-width: 540px;']); ``` @@ -1059,57 +937,29 @@ echo $this->card( ```php card( - [ - 'header' => 'Header', - 'title' => ucfirst($variant).' card title', - 'text' => 'Some quick example text to build on the card title'." and make up the bulk of the card's content.", - ], - [ - 'bg_variant' => $variant, - 'class' => 'text-'.$text.' mb-3', - 'style' => 'max-width: 18rem;', - ] - ); + ['primary', 'white'], + ['secondary', 'white'], + ['success', 'white'], + ['danger', 'white'], + ['warning', 'dark'], + ['info', 'dark'], + ['light', 'dark'], + ['dark', 'white'], + ] as [$variant, $text] +) { + echo $this->card([ + 'header' => 'Header', + 'title' => ucfirst($variant) . ' card title', + 'text' => "Some quick example text to build on the card title" . + " and make up the bulk of the card's content.", + ], [ + 'bg_variant' => $variant, + 'class' => 'text-' . $text . ' mb-3', + 'style' => 'max-width: 18rem;', + ]); } - ``` @@ -1201,58 +1051,33 @@ foreach ([ ```php card( [ 'header' => 'Header', - 'title' => ucfirst($variant).'Primary card title', - 'text' => 'Some quick example text to build on the card title'." and make up the bulk of the card's content.", + 'title' => ucfirst($variant) . 'Primary card title', + 'text' => "Some quick example text to build on the card title" . + " and make up the bulk of the card's content.", ], [ 'border_variant' => $variant, - 'body_variant' => $body_variant, - 'class' => 'mb-3', - 'style' => 'max-width: 18rem;', + 'body_variant' => $body_variant, + 'class' => 'mb-3', + 'style' => 'max-width: 18rem;', ] ); } - ``` @@ -1284,27 +1109,18 @@ foreach ([ ```php card( - [ - 'header' => [ - 'Header', - ['class' => 'bg-transparent border-success'], - ], - 'title' => 'Success card title', - 'text' => 'Some quick example text to build on the card title'." and make up the bulk of the card's content.", - 'footer' => [ - 'Footer', - ['class' => 'bg-transparent border-success'], - ], - ], - [ - 'border_variant' => 'success', - 'body_variant' => 'success', - 'class' => 'mb-3', - 'style' => 'max-width: 18rem;', - ] -); - +echo $this->card([ + 'header' => ['Header', ['class' => 'bg-transparent border-success']], + 'title' => 'Success card title', + 'text' => "Some quick example text to build on the card title" . + " and make up the bulk of the card's content.", + 'footer' => ['Footer', ['class' => 'bg-transparent border-success']], +], [ + 'border_variant' => 'success', + 'body_variant' => 'success', + 'class' => 'mb-3', + 'style' => 'max-width: 18rem;', +]); ``` @@ -1387,80 +1203,63 @@ echo $this->card( ```php cardGroup( +echo $this->cardGroup([ [ - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', - 'Last updated 3 mins ago', - ], + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', + 'Last updated 3 mins ago', ], - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This card has supporting text below as a natural lead-in to additional content.', - 'Last updated 3 mins ago', - ], + ], + [ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This card has supporting text below as a natural lead-in to additional content.', + 'Last updated 3 mins ago' ], - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. '.'This card has even longer content than the first to show that equal height action.', - 'Last updated 3 mins ago', - ], + ], + [ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. ' . + 'This card has even longer content than the first to show that equal height action.', + 'Last updated 3 mins ago', ], - ] -); + ], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // With footers -echo $this->cardGroup( +echo $this->cardGroup([ [ - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', - 'footer' => 'Last updated 3 mins ago', - ], - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => 'This card has supporting text below as a natural lead-in to additional content.', - 'footer' => 'Last updated 3 mins ago', - ], - [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => 'This is a wider card with supporting text below '.'as a natural lead-in to additional content. '.'This card has even longer content than the first to show that equal height action.', - 'footer' => 'Last updated 3 mins ago', - ], - ] -); - + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', + 'footer' => 'Last updated 3 mins ago', + ], + [ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => 'This card has supporting text below as a natural lead-in to additional content.', + 'footer' => 'Last updated 3 mins ago', + ], + [ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => 'This is a wider card with supporting text below ' . + 'as a natural lead-in to additional content. ' . + 'This card has even longer content than the first to show that equal height action.', + 'footer' => 'Last updated 3 mins ago', + ], +]); ``` @@ -1568,46 +1367,37 @@ echo $this->cardGroup( echo $this->cardGrid( [ [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', 'Last updated 3 mins ago', ], ], [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', 'Last updated 3 mins ago', ], ], [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ 'This card has supporting text below as a natural lead-in to additional content.', - 'Last updated 3 mins ago', + 'Last updated 3 mins ago' ], ], [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', 'Last updated 3 mins ago', ], ], @@ -1616,58 +1406,48 @@ echo $this->cardGrid( ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->cardGrid( [ [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', 'Last updated 3 mins ago', ], ], [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', 'Last updated 3 mins ago', ], ], [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ 'This card has supporting text below as a natural lead-in to additional content.', - 'Last updated 3 mins ago', + 'Last updated 3 mins ago' ], ], [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], - 'title' => 'Card title', - 'text' => [ - 'This is a wider card with supporting text below as a natural lead-in to '.'additional content. This content is a little bit longer.', + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], + 'title' => 'Card title', + 'text' => [ + 'This is a wider card with supporting text below as a natural lead-in to ' . + 'additional content. This content is a little bit longer.', 'Last updated 3 mins ago', ], ], ], ['class' => 'row-cols-1 row-cols-md-3 g-4'], ); - ``` diff --git a/website/docs/usage/components/carousel.mdx b/website/docs/usage/components/carousel.mdx index dff754687..c66ebf01d 100644 --- a/website/docs/usage/components/carousel.mdx +++ b/website/docs/usage/components/carousel.mdx @@ -46,9 +46,9 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', 'active' => true, - 'alt' => '...', + 'alt' => '...', ], [ 'src' => '/twbs-helper-module/img/docs/slide2.svg', @@ -61,7 +61,6 @@ echo $this->carousel( ], ['id' => 'carouselExampleSlidesOnly'], ); - ``` @@ -105,9 +104,9 @@ echo $this->carousel( echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', 'active' => true, - 'alt' => '...', + 'alt' => '...', ], [ 'src' => '/twbs-helper-module/img/docs/slide2.svg', @@ -118,12 +117,8 @@ echo $this->carousel( 'alt' => '...', ], ], - [ - 'id' => 'carouselExampleControls', - 'controls' => true, - ], + ['id' => 'carouselExampleControls', 'controls' => true], ); - ``` @@ -172,28 +167,24 @@ echo $this->carousel( echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', - 'active' => true, - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'active' => true, + 'alt' => '...', 'indicator' => 'Slide 1', ], [ - 'src' => '/twbs-helper-module/img/docs/slide2.svg', - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide2.svg', + 'alt' => '...', 'indicator' => 'Slide 2', ], [ - 'src' => '/twbs-helper-module/img/docs/slide3.svg', - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide3.svg', + 'alt' => '...', 'indicator' => 'Slide 3', ], ], - [ - 'id' => 'carouselExampleIndicators', - 'controls' => true, - ], + ['id' => 'carouselExampleIndicators', 'controls' => true], ); - ``` @@ -254,40 +245,39 @@ echo $this->carousel( echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', - 'active' => true, - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'active' => true, + 'alt' => '...', 'indicator' => 'Slide 1', - 'caption' => [ + 'caption' => [ 'title' => 'First slide label', - 'text' => 'Some representative placeholder content for the first slide.', + 'text' => 'Some representative placeholder content for the first slide.', ], ], [ - 'src' => '/twbs-helper-module/img/docs/slide2.svg', - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide2.svg', + 'alt' => '...', 'indicator' => 'Slide 2', - 'caption' => [ + 'caption' => [ 'title' => 'Second slide label', - 'text' => 'Some representative placeholder content for the second slide.', + 'text' => 'Some representative placeholder content for the second slide.', ], ], [ - 'src' => '/twbs-helper-module/img/docs/slide3.svg', - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide3.svg', + 'alt' => '...', 'indicator' => 'Slide 3', - 'caption' => [ + 'caption' => [ 'title' => 'Third slide label', - 'text' => 'Some representative placeholder content for the third slide.', + 'text' => 'Some representative placeholder content for the third slide.', ], ], ], [ - 'id' => 'carouselExampleCaptions', + 'id' => 'carouselExampleCaptions', 'controls' => true, ], ); - ``` @@ -331,9 +321,9 @@ echo $this->carousel( echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', 'active' => true, - 'alt' => '...', + 'alt' => '...', ], [ 'src' => '/twbs-helper-module/img/docs/slide2.svg', @@ -344,13 +334,8 @@ echo $this->carousel( 'alt' => '...', ], ], - [ - 'id' => 'carouselExampleFade', - 'controls' => true, - 'crossfade' => true, - ], + ['id' => 'carouselExampleFade', 'controls' => true, 'crossfade' => true], ); - ``` @@ -394,27 +379,23 @@ echo $this->carousel( echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', 'interval' => 10000, - 'active' => true, - 'alt' => '...', + 'active' => true, + 'alt' => '...', ], [ - 'src' => '/twbs-helper-module/img/docs/slide2.svg', + 'src' => '/twbs-helper-module/img/docs/slide2.svg', 'interval' => 2000, - 'alt' => '...', + 'alt' => '...', ], [ 'src' => '/twbs-helper-module/img/docs/slide3.svg', 'alt' => '...', ], ], - [ - 'id' => 'carouselExampleInterval', - 'controls' => true, - ], + ['id' => 'carouselExampleInterval', 'controls' => true], ); - ``` @@ -458,9 +439,9 @@ echo $this->carousel( echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', 'active' => true, - 'alt' => '...', + 'alt' => '...', ], [ 'src' => '/twbs-helper-module/img/docs/slide2.svg', @@ -472,13 +453,12 @@ echo $this->carousel( ], ], [ - 'id' => 'carouselExampleControlsNoTouching', + 'id' => 'carouselExampleControlsNoTouching', 'controls' => true, - 'swiping' => false, + 'swiping' => false, 'interval' => false, ], ); - ``` @@ -539,41 +519,40 @@ echo $this->carousel( echo $this->carousel( [ [ - 'src' => '/twbs-helper-module/img/docs/slide1.svg', - 'active' => true, - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide1.svg', + 'active' => true, + 'alt' => '...', 'indicator' => 'Slide 1', - 'caption' => [ + 'caption' => [ 'title' => 'First slide label', - 'text' => 'Some representative placeholder content for the first slide.', + 'text' => 'Some representative placeholder content for the first slide.', ], ], [ - 'src' => '/twbs-helper-module/img/docs/slide2.svg', - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide2.svg', + 'alt' => '...', 'indicator' => 'Slide 2', - 'caption' => [ + 'caption' => [ 'title' => 'Second slide label', - 'text' => 'Some representative placeholder content for the second slide.', + 'text' => 'Some representative placeholder content for the second slide.', ], ], [ - 'src' => '/twbs-helper-module/img/docs/slide3.svg', - 'alt' => '...', + 'src' => '/twbs-helper-module/img/docs/slide3.svg', + 'alt' => '...', 'indicator' => 'Slide 3', - 'caption' => [ + 'caption' => [ 'title' => 'Third slide label', - 'text' => 'Some representative placeholder content for the third slide.', + 'text' => 'Some representative placeholder content for the third slide.', ], ], ], [ - 'id' => 'carouselExampleCaptions', + 'id' => 'carouselExampleCaptions', 'controls' => true, - 'variant' => 'dark', + 'variant' => 'dark', ], ); - ``` diff --git a/website/docs/usage/components/close-button.mdx b/website/docs/usage/components/close-button.mdx index 0013a69b1..4a1445ca8 100644 --- a/website/docs/usage/components/close-button.mdx +++ b/website/docs/usage/components/close-button.mdx @@ -28,7 +28,6 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; formButton()->renderSpec(['options' => ['close' => true]], ''); - ``` @@ -49,14 +48,10 @@ echo $this->formButton()->renderSpec(['options' => ['close' => true]], ''); ```php formButton()->renderSpec( - [ - 'options' => ['close' => true], - 'attributes' => ['disabled' => true], - ], - '' -); - +echo $this->formButton()->renderSpec([ + 'options' => ['close' => true], + 'attributes' => ['disabled' => true], +], ''); ``` @@ -78,25 +73,15 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'options' => ['close' => true], - 'attributes' => ['class' => 'btn-close-white'], - ], - '' -); - -echo $this->formButton()->renderSpec( - [ - 'options' => ['close' => true], - 'attributes' => [ - 'disabled' => true, - 'class' => 'btn-close-white', - ], - ], - '' -); +echo $this->formButton()->renderSpec([ + 'options' => ['close' => true], + 'attributes' => ['class' => 'btn-close-white'], +], ''); +echo $this->formButton()->renderSpec([ + 'options' => ['close' => true], + 'attributes' => ['disabled' => true, 'class' => 'btn-close-white'], +], ''); ``` diff --git a/website/docs/usage/components/collapse.mdx b/website/docs/usage/components/collapse.mdx index 0d83249b3..0e202f7bc 100644 --- a/website/docs/usage/components/collapse.mdx +++ b/website/docs/usage/components/collapse.mdx @@ -43,28 +43,31 @@ echo $this->collapse( [ 'options' => [ 'variant' => 'primary', - 'label' => 'Link with href', - 'tag' => 'a', + 'label' => 'Link with href', + 'tag' => 'a' ], ], [ 'options' => [ 'variant' => 'primary', - 'label' => 'Button with data-bs-target', + 'label' => 'Button with data-bs-target', ], ], ], - 'targets' => [ + 'targets' => [ [ - 'content' => $this->card( - 'Some placeholder content for the collapse component. '.'This panel is hidden by default but revealed '.'when the user activates the relevant trigger.' + 'content' => $this->card( + 'Some placeholder content for the collapse component. ' . + 'This panel is hidden by default but revealed ' . + 'when the user activates the relevant trigger.' ), - 'attributes' => [ 'id' => 'collapseExample' ], + 'attributes' => [ + 'id' => 'collapseExample', + ], ], ], ], ); - ``` @@ -96,27 +99,32 @@ echo $this->collapse( echo $this->collapse( [ - 'horizontal' => [ 'style' => 'min-height: 120px;' ], - 'triggers' => [ + 'horizontal' => [ + 'style' => 'min-height: 120px;', + ], + 'triggers' => [ [ 'options' => [ 'variant' => 'primary', - 'label' => 'Toggle width collapse', + 'label' => 'Toggle width collapse', ], ], ], - 'targets' => [ + 'targets' => [ [ - 'content' => $this->card( - 'Some placeholder content for the collapse component. '.'This panel is hidden by default but revealed '.'when the user activates the relevant trigger.', + 'content' => $this->card( + 'Some placeholder content for the collapse component. ' . + 'This panel is hidden by default but revealed ' . + 'when the user activates the relevant trigger.', ['style' => 'width: 300px;'], ), - 'attributes' => [ 'id' => 'collapseWidthExample' ], + 'attributes' => [ + 'id' => 'collapseWidthExample', + ], ], ], ], ); - ``` @@ -167,52 +175,55 @@ echo $this->collapse( [ 'options' => [ 'variant' => 'primary', - 'label' => 'Toggle first element', - 'tag' => 'a', + 'label' => 'Toggle first element', + 'tag' => 'a', ], ], [ 'options' => [ 'variant' => 'primary', - 'label' => 'Toggle second element', + 'label' => 'Toggle second element', ], ], [ - 'options' => [ + 'options' => [ 'variant' => 'primary', - 'label' => 'Toggle both elements', + 'label' => 'Toggle both elements', ], 'attributes' => [ 'data-bs-target' => '.multi-collapse', - 'aria-controls' => 'multiCollapseExample1 multiCollapseExample2', + 'aria-controls' => 'multiCollapseExample1 multiCollapseExample2', ], ], ], - 'targets' => [ + 'targets' => [ [ - 'column' => true, - 'content' => $this->card( - 'Some placeholder content for the first collapse component of this '.'multi-collapse example. This panel is hidden by default but revealed '.'when the user activates the relevant trigger.', + 'column' => true, + 'content' => $this->card( + 'Some placeholder content for the first collapse component of this ' . + 'multi-collapse example. This panel is hidden by default but revealed ' . + 'when the user activates the relevant trigger.', ), 'attributes' => [ - 'id' => 'multiCollapseExample1', + 'id' => 'multiCollapseExample1', 'class' => 'multi-collapse', ], ], [ - 'column' => true, - 'content' => $this->card( - 'Some placeholder content for the first collapse component of this '.'multi-collapse example. This panel is hidden by default but revealed '.'when the user activates the relevant trigger.', + 'column' => true, + 'content' => $this->card( + 'Some placeholder content for the first collapse component of this ' . + 'multi-collapse example. This panel is hidden by default but revealed ' . + 'when the user activates the relevant trigger.', ), 'attributes' => [ - 'id' => 'multiCollapseExample2', + 'id' => 'multiCollapseExample2', 'class' => 'multi-collapse', ], ], ], ], ); - ``` diff --git a/website/docs/usage/components/dropdowns.mdx b/website/docs/usage/components/dropdowns.mdx index fc38c449a..a12c70b85 100644 --- a/website/docs/usage/components/dropdowns.mdx +++ b/website/docs/usage/components/dropdowns.mdx @@ -108,72 +108,55 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Dropdown button', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], - 'attributes' => ['id' => 'dropdownMenuButton1'], - ] -); +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Dropdown button', + 'dropdown' => ['Action', 'Another action', 'Something else here'], + ], + 'attributes' => ['id' => 'dropdownMenuButton1'], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // With elements -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'tag' => 'a', - 'label' => 'Dropdown link', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], - 'attributes' => ['id' => 'dropdownMenuLink'], - ] -); +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'tag' => 'a', + 'label' => 'Dropdown link', + 'dropdown' => ['Action', 'Another action', 'Something else here'], + ], + 'attributes' => ['id' => 'dropdownMenuLink'], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Variations -foreach ([ - 'primary', - 'secondary', - 'success', - 'info', - 'warning', - 'danger', -] as $variant) { - echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'variant' => $variant, - 'label' => 'Dropdown', - 'dropdown' => [ - 'attributes' => ['class' => 'btn-group'], - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +foreach ( + [ + 'primary', 'secondary', 'success', + 'info', 'warning', 'danger', + ] as $variant +) { + echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'variant' => $variant, + 'label' => 'Dropdown', + 'dropdown' => [ + 'attributes' => ['class' => 'btn-group'], + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - ] - ); -}//end foreach - + ], + ]); +} ``` @@ -259,35 +242,30 @@ foreach ([ ```php formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'variant' => $variant, - 'label' => 'Dropdown', - 'dropdown' => [ - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +foreach ( + [ + 'primary', 'secondary', 'success', + 'info', 'warning', 'danger', + ] as $variant +) { + echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'variant' => $variant, + 'label' => 'Dropdown', + 'dropdown' => [ + 'split' => 'Toggle Dropdown', + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - ] - ); -}//end foreach - + ], + ]); +} ``` @@ -351,91 +329,58 @@ foreach ([ formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Large button', - 'size' => 'lg', - 'dropdown' => [ - 'attributes' => ['class' => 'btn-group'], - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Large button', + 'size' => 'lg', + 'dropdown' => [ + 'attributes' => ['class' => 'btn-group'], + 'items' => ['Action', 'Another action', 'Something else here', '---', 'Separated link'], ], - ] -); + ], +]); // Large split button -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Large button', - 'size' => 'lg', - 'dropdown' => [ - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Large button', + 'size' => 'lg', + 'dropdown' => [ + 'split' => 'Toggle Dropdown', + 'items' => ['Action', 'Another action', 'Something else here', '---', 'Separated link'], ], - ] -); + ], +]); -echo PHP_EOL.'

'; +echo PHP_EOL . '

'; // Small button -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Small button', - 'size' => 'sm', - 'dropdown' => [ - 'attributes' => ['class' => 'btn-group'], - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Small button', + 'size' => 'sm', + 'dropdown' => [ + 'attributes' => ['class' => 'btn-group'], + 'items' => ['Action', 'Another action', 'Something else here', '---', 'Separated link'], ], - ] -); + ], +]); // Small split button -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Small button', - 'size' => 'sm', - 'dropdown' => [ - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Small button', + 'size' => 'sm', + 'dropdown' => [ + 'split' => 'Toggle Dropdown', + 'items' => ['Action', 'Another action', 'Something else here', '---', 'Separated link'], ], - ] -); - + ], +]); ``` @@ -484,56 +429,51 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Dropdown button', - 'dropdown' => [ - 'dark' => true, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Dropdown button', + 'dropdown' => [ + 'dark' => true, + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - 'attributes' => ['id' => 'dropdownMenuButton2'], - ] -); + ], + 'attributes' => ['id' => 'dropdownMenuButton2'], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->navbar()->render( - new \Laminas\Navigation\Navigation( - [ + new \Laminas\Navigation\Navigation([ - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Dropdown', - 'dropdown' => [ - 'dark' => true, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - 'attributes' => ['id' => 'navbarDarkDropdownMenuLink'], + [ + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, + 'label' => 'Dropdown', + 'dropdown' => [ + 'dark' => true, + 'items' => [ + 'Action', + 'Another action', + 'Something else here', ], + 'attributes' => ['id' => 'navbarDarkDropdownMenuLink'], ], - ] - ), + ], + ]), [ - 'brand' => 'Navbar', - 'variant' => 'dark', + 'brand' => 'Navbar', + 'variant' => 'dark', 'background' => 'dark', - 'container' => 'fluid', + 'container' => 'fluid', 'attributes' => ['id' => 'navbarNavDarkDropdown'], ] ); - ``` @@ -579,47 +519,42 @@ echo $this->navigation()->navbar()->render( formButton()->renderSpec( - [ - 'name' => 'dropup', - 'options' => [ - 'label' => 'Dropup', - 'dropdown' => [ - 'direction' => 'up', - 'attributes' => ['class' => 'btn-group'], - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropup', + 'options' => [ + 'label' => 'Dropup', + 'dropdown' => [ + 'direction' => 'up', + 'attributes' => ['class' => 'btn-group'], + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', + ] ], - ] -); + ], +]); // Dropup split button -echo $this->formButton()->renderSpec( - [ - 'name' => 'split-dropup', - 'options' => [ - 'label' => 'Split dropup', - 'dropdown' => [ - 'direction' => 'up', - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +echo $this->formButton()->renderSpec([ + 'name' => 'split-dropup', + 'options' => [ + 'label' => 'Split dropup', + 'dropdown' => [ + 'direction' => 'up', + 'split' => 'Toggle Dropdown', + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - ] -); - + ], +]); ``` @@ -661,47 +596,42 @@ echo $this->formButton()->renderSpec( formButton()->renderSpec( - [ - 'name' => 'dropend', - 'options' => [ - 'label' => 'Dropright', - 'dropdown' => [ - 'direction' => 'end', - 'attributes' => ['class' => 'btn-group'], - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropend', + 'options' => [ + 'label' => 'Dropright', + 'dropdown' => [ + 'direction' => 'end', + 'attributes' => ['class' => 'btn-group'], + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - ] -); + ], +]); // Dropend split button -echo $this->formButton()->renderSpec( - [ - 'name' => 'split-dropend', - 'options' => [ - 'label' => 'Split dropend', - 'dropdown' => [ - 'direction' => 'end', - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +echo $this->formButton()->renderSpec([ + 'name' => 'split-dropend', + 'options' => [ + 'label' => 'Split dropend', + 'dropdown' => [ + 'direction' => 'end', + 'split' => 'Toggle Dropdown', + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - ] -); - + ], +]); ``` @@ -743,47 +673,42 @@ echo $this->formButton()->renderSpec( formButton()->renderSpec( - [ - 'name' => 'dropstart', - 'options' => [ - 'label' => 'Dropleft', - 'dropdown' => [ - 'direction' => 'start', - 'attributes' => ['class' => 'btn-group'], - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropstart', + 'options' => [ + 'label' => 'Dropleft', + 'dropdown' => [ + 'direction' => 'start', + 'attributes' => ['class' => 'btn-group'], + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - ] -); + ], +]); // Dropstart split button -echo $this->formButton()->renderSpec( - [ - 'name' => 'split-dropstart', - 'options' => [ - 'label' => 'Split dropstart', - 'dropdown' => [ - 'direction' => 'start', - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], +echo $this->formButton()->renderSpec([ + 'name' => 'split-dropstart', + 'options' => [ + 'label' => 'Split dropstart', + 'dropdown' => [ + 'direction' => 'start', + 'split' => 'Toggle Dropdown', + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - ] -); - + ], +]); ``` @@ -818,36 +743,27 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Dropdown', - 'dropdown' => [ - 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Dropdown', + 'dropdown' => [ + 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, + 'items' => ['Action', 'Another action', 'Something else here'], ], - 'attributes' => ['id' => 'dropdownMenu2'], - ] -); + ], + 'attributes' => ['id' => 'dropdownMenu2'], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Non-interactive dropdown items -echo $this->dropdown()->renderMenu( - [ - 'Dropdown item text' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_TEXT, - 'Action', - 'Another action', - 'Something else here' - ] -); - +echo $this->dropdown()->renderMenu([ + 'Dropdown item text' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_TEXT, + 'Action', + 'Another action', + 'Something else here' +]); ``` @@ -872,14 +788,11 @@ echo $this->dropdown()->renderMenu( ```php dropdown()->renderMenu( - [ - 'Regular link', - 'Active link' => ['active' => true], - 'Another link' - ] -); - +echo $this->dropdown()->renderMenu([ + 'Regular link', + 'Active link' => ['active' => true], + 'Another link' +]); ``` @@ -904,14 +817,11 @@ echo $this->dropdown()->renderMenu( ```php dropdown()->renderMenu( - [ - 'Regular link', - 'Disabled link' => ['disabled' => true], - 'Another link' - ] -); - +echo $this->dropdown()->renderMenu([ + 'Regular link', + 'Disabled link' => ['disabled' => true], + 'Another link' +]); ``` @@ -939,24 +849,17 @@ echo $this->dropdown()->renderMenu( ```php formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Right-aligned menu example', - 'dropdown' => [ - 'alignment' => 'end', - 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Right-aligned menu example', + 'dropdown' => [ + 'alignment' => 'end', + 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, + 'items' => ['Action', 'Another action', 'Something else here'], ], - ] -); - + ], +]); ``` @@ -993,47 +896,31 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Left-aligned but right aligned when large screen', - 'dropdown' => [ - 'alignment' => 'lg-end', - 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Left-aligned but right aligned when large screen', + 'dropdown' => [ + 'alignment' => 'lg-end', + 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, + 'items' => ['Action', 'Another action', 'Something else here'], ], - ] -); - -echo PHP_EOL.'
'; - -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Left-aligned but right aligned when large screen', - 'dropdown' => [ - 'alignment' => [ - 'end', - 'lg-start', - ], - 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], + ], +]); + +echo PHP_EOL . '
'; + +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Left-aligned but right aligned when large screen', + 'dropdown' => [ + 'alignment' => ['end', 'lg-start'], + 'type' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_BUTTON, + 'items' => ['Action', 'Another action', 'Something else here'], ], - ] -); - + ], +]); ``` @@ -1118,58 +1005,49 @@ echo $this->formButton()->renderSpec( // Alignments -foreach ([ - 'Dropdown' => null, - 'Right-aligned menu' => 'end', - 'Left-aligned, right-aligned lg' => 'lg-end', - 'Right-aligned, left-aligned lg' => 'lg-start', -] as $label => $alignment) { - echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => $label, - 'dropdown' => [ - 'alignment' => $alignment, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], +foreach ( + [ + 'Dropdown' => null, + 'Right-aligned menu' => 'end', + 'Left-aligned, right-aligned lg' => 'lg-end', + 'Right-aligned, left-aligned lg' => 'lg-start', + ] as $label => $alignment +) { + echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => $label, + 'dropdown' => [ + 'alignment' => $alignment, + 'items' => ['Action', 'Another action', 'Something else here'], ], - ] - ); + ], + ]); - echo PHP_EOL.'
'; + echo PHP_EOL . '
'; } // Directions -foreach ([ - 'Dropstart' => 'start', - 'Dropend' => 'end', - 'Dropup' => 'up', -] as $label => $direction) { - echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => $label, - 'dropdown' => [ - 'direction' => $direction, - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], +foreach ( + [ + 'Dropstart' => 'start', + 'Dropend' => 'end', + 'Dropup' => 'up', + ] as $label => $direction +) { + echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => $label, + 'dropdown' => [ + 'direction' => $direction, + 'items' => ['Action', 'Another action', 'Something else here'], ], - ] - ); + ], + ]); - echo PHP_EOL.'
'; + echo PHP_EOL . '
'; } - ``` @@ -1198,14 +1076,11 @@ foreach ([ ```php dropdown()->renderMenu( - [ - 'Dropdown header' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_HEADER, - 'Action', - 'Another action', - ] -); - +echo $this->dropdown()->renderMenu([ + 'Dropdown header' => \TwbsHelper\View\Helper\Dropdown::TYPE_ITEM_HEADER, + 'Action', + 'Another action', +]); ``` @@ -1232,16 +1107,13 @@ echo $this->dropdown()->renderMenu( ```php dropdown()->renderMenu( - [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ] -); - +echo $this->dropdown()->renderMenu([ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', +]); ``` @@ -1265,17 +1137,10 @@ echo $this->dropdown()->renderMenu( ```php dropdown()->renderMenu( - [ - '

Some example text that\'s free-flowing within the dropdown menu.

', - '

And this is more example text.

', - ], - [ - 'class' => 'p-4 text-muted', - 'style' => 'max-width: 200px;', - ] -); - +echo $this->dropdown()->renderMenu([ + '

Some example text that\'s free-flowing within the dropdown menu.

', + '

And this is more example text.

', +], ['class' => 'p-4 text-muted', 'style' => 'max-width: 200px;']); ``` @@ -1340,72 +1205,63 @@ echo $this->dropdown()->renderMenu( // Create form $factory = new \Laminas\Form\Factory(); -$form = $factory->create( - [ - 'type' => 'form', - 'name' => 'dropdown', - 'attributes' => ['class' => 'px-4 py-3'], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'email', - 'options' => ['label' => 'Email address'], - 'attributes' => [ - 'type' => 'email', - 'id' => 'exampleDropdownFormEmail1', - 'placeholder' => 'email@example.com', - ], +$form = $factory->create([ + 'type' => 'form', + 'name' => 'dropdown', + 'attributes' => ['class' => 'px-4 py-3'], + 'elements' => [ + [ + 'spec' => [ + 'name' => 'email', + 'options' => ['label' => 'Email address'], + 'attributes' => [ + 'type' => 'email', + 'id' => 'exampleDropdownFormEmail1', + 'placeholder' => 'email@example.com', ], ], - [ - 'spec' => [ - 'name' => 'password', - 'options' => ['label' => 'Password'], - 'attributes' => [ - 'type' => 'password', - 'id' => 'exampleDropdownFormPassword1', - 'placeholder' => 'Password', - ], + ], + [ + 'spec' => [ + 'name' => 'password', + 'options' => ['label' => 'Password'], + 'attributes' => [ + 'type' => 'password', + 'id' => 'exampleDropdownFormPassword1', + 'placeholder' => 'Password', ], ], - [ - 'spec' => [ - 'type' => 'checkbox', - 'name' => 'remember_me', - 'options' => [ - 'label' => 'Remember me', - 'use_hidden_element' => false, - ], - 'attributes' => [ 'id' => 'dropdownCheck' ], + ], + [ + 'spec' => [ + 'type' => 'checkbox', + 'name' => 'remember_me', + 'options' => ['label' => 'Remember me', 'use_hidden_element' => false], + 'attributes' => [ + 'id' => 'dropdownCheck', ], ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Sign in', - 'variant' => 'primary', - ], - ], + ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => ['label' => 'Sign in', 'variant' => 'primary'], ], ], ] -); +]); -echo $this->dropdown()->renderMenu( - [ - $form, - '---', - 'New around here? Sign up', - 'Forgot password?', - ] -); +echo $this->dropdown()->renderMenu([ + $form, + '---', + 'New around here? Sign up', + 'Forgot password?', +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; $form->setAttribute('class', 'dropdown-menu p-4'); echo $this->form($form); - ``` @@ -1447,49 +1303,33 @@ echo $this->form($form); echo '
'; -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Offset', - 'dropdown' => [ - 'attributes' => ['class' => 'me-1'], - 'offset' => '10,20', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Offset', + 'dropdown' => [ + 'attributes' => ['class' => 'me-1'], + 'offset' => '10,20', + 'items' => ['Action', 'Another action', 'Something else here'], ], - 'attributes' => ['id' => 'dropdownMenuOffset'], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Reference', - 'dropdown' => [ - 'split' => [ - 'attributes' => [ - 'data-bs-reference' => 'parent', - 'id' => 'dropdownMenuReference', - ], - ], - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], + ], + 'attributes' => ['id' => 'dropdownMenuOffset'], +]); + +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Reference', + 'dropdown' => [ + 'split' => [ + 'attributes' => ['data-bs-reference' => 'parent', 'id' => 'dropdownMenuReference'], ], + 'items' => ['Action', 'Another action', 'Something else here'], ], - ] -); - -echo PHP_EOL.'
'; + ], +]); +echo PHP_EOL . ''; ``` @@ -1544,84 +1384,59 @@ echo PHP_EOL.''; ```php formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Default dropdown', - 'dropdown' => [ - 'auto_close' => true, - 'items' => [ - 'Menu item', - 'Menu item', - 'Menu item', - ], - ], +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Default dropdown', + 'dropdown' => [ + 'auto_close' => true, + 'items' => ['Menu item', 'Menu item', 'Menu item'], ], - 'attributes' => ['id' => 'defaultDropdown'], - ] -); - -echo PHP_EOL.'
'; - -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Clickable outside', - 'dropdown' => [ - 'auto_close' => 'inside', - 'items' => [ - 'Menu item', - 'Menu item', - 'Menu item', - ], - ], + ], + 'attributes' => ['id' => 'defaultDropdown'], +]); + +echo PHP_EOL . '
'; + +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Clickable outside', + 'dropdown' => [ + 'auto_close' => 'inside', + 'items' => ['Menu item', 'Menu item', 'Menu item'], ], - 'attributes' => ['id' => 'dropdownMenuClickableOutside'], - ] -); - -echo PHP_EOL.'
'; - -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Clickable inside', - 'dropdown' => [ - 'auto_close' => 'outside', - 'items' => [ - 'Menu item', - 'Menu item', - 'Menu item', - ], - ], + ], + 'attributes' => ['id' => 'dropdownMenuClickableOutside'], +]); + +echo PHP_EOL . '
'; + +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Clickable inside', + 'dropdown' => [ + 'auto_close' => 'outside', + 'items' => ['Menu item', 'Menu item', 'Menu item'], ], - 'attributes' => ['id' => 'dropdownMenuClickableInside'], - ] -); - -echo PHP_EOL.'
'; - -echo $this->formButton()->renderSpec( - [ - 'name' => 'dropdown', - 'options' => [ - 'label' => 'Manual close', - 'dropdown' => [ - 'auto_close' => false, - 'items' => [ - 'Menu item', - 'Menu item', - 'Menu item', - ], - ], + ], + 'attributes' => ['id' => 'dropdownMenuClickableInside'], +]); + +echo PHP_EOL . '
'; + +echo $this->formButton()->renderSpec([ + 'name' => 'dropdown', + 'options' => [ + 'label' => 'Manual close', + 'dropdown' => [ + 'auto_close' => false, + 'items' => ['Menu item', 'Menu item', 'Menu item'], ], - 'attributes' => ['id' => 'dropdownMenuClickable'], - ] -); - + ], + 'attributes' => ['id' => 'dropdownMenuClickable'], +]); ``` diff --git a/website/docs/usage/components/list-group.mdx b/website/docs/usage/components/list-group.mdx index 0ffe06d55..25a2c821f 100644 --- a/website/docs/usage/components/list-group.mdx +++ b/website/docs/usage/components/list-group.mdx @@ -33,16 +33,13 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php listGroup( - [ - 'An item', - 'A second item', - 'A third item', - 'A fourth item', - 'And a fifth one', - ] -); - +echo $this->listGroup([ + 'An item', + 'A second item', + 'A third item', + 'A fourth item', + 'And a fifth one', +]); ``` @@ -69,16 +66,13 @@ echo $this->listGroup( ```php listGroup( - [ - 'An active item' => ['active' => true], - 'A second item', - 'A third item', - 'A fourth item', - 'And a fifth one', - ] -); - +echo $this->listGroup([ + 'An active item' => ['active' => true], + 'A second item', + 'A third item', + 'A fourth item', + 'And a fifth one', +]); ``` @@ -105,16 +99,13 @@ echo $this->listGroup( ```php listGroup( - [ - 'A disabled item' => ['disabled' => true], - 'A second item', - 'A third item', - 'A fourth item', - 'And a fifth one', - ] -); - +echo $this->listGroup([ + 'A disabled item' => ['disabled' => true], + 'A second item', + 'A third item', + 'A fourth item', + 'And a fifth one', +]); ``` @@ -149,36 +140,29 @@ echo $this->listGroup( ```php listGroup( - [ - 'The current link item' => [ - 'active' => true, - 'attributes' => ['href' => '#'], - ], - 'A second item' => ['attributes' => ['href' => '#']], - 'A third item' => ['attributes' => ['href' => '#']], - 'A fourth item' => ['attributes' => ['href' => '#']], - 'A disabled link item' => [ - 'disabled' => true, - 'attributes' => ['href' => '#'], - ], +echo $this->listGroup([ + 'The current link item' => [ + 'active' => true, + 'attributes' => ['href' => '#'], ], - ['type' => 'action'] -); - -echo PHP_EOL.'
'; - -echo $this->listGroup( - [ - 'The current button' => ['active' => true], - 'A second item', - 'A third button item', - 'A fourth button item', - 'A disabled button item' => ['disabled' => true], + 'A second item' => ['attributes' => ['href' => '#']], + 'A third item' => ['attributes' => ['href' => '#']], + 'A fourth item' => ['attributes' => ['href' => '#']], + 'A disabled link item' => [ + 'disabled' => true, + 'attributes' => ['href' => '#'], ], - ['type' => 'button'] -); +], ['type' => 'action']); + +echo PHP_EOL . '
'; +echo $this->listGroup([ + 'The current button' => ['active' => true], + 'A second item', + 'A third button item', + 'A fourth button item', + 'A disabled button item' => ['disabled' => true], +], ['type' => 'button']); ``` @@ -215,7 +199,6 @@ echo $this->listGroup( ], ['flush' => true] ); - ``` @@ -273,44 +256,43 @@ echo $this->listGroup( ['numbered' => true] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->listGroup( [ [ - 'content' => '
'.'
Subheading
'.'Content for list item'.'
', - 'badge' => [ + 'content' => '
' . + '
Subheading
' . + 'Content for list item' . + '
', + 'badge' => [ 14, - [ - 'type' => 'pill', - 'variant' => 'primary', - ], + ['type' => 'pill', 'variant' => 'primary'], ], ], [ - 'content' => '
'.'
Subheading
'.'Content for list item'.'
', - 'badge' => [ + 'content' => '
' . + '
Subheading
' . + 'Content for list item' . + '
', + 'badge' => [ 14, - [ - 'type' => 'pill', - 'variant' => 'primary', - ], + ['type' => 'pill', 'variant' => 'primary'], ], ], [ - 'content' => '
'.'
Subheading
'.'Content for list item'.'
', - 'badge' => [ + 'content' => '
' . + '
Subheading
' . + 'Content for list item' . + '
', + 'badge' => [ 14, - [ - 'type' => 'pill', - 'variant' => 'primary', - ], + ['type' => 'pill', 'variant' => 'primary'], ], ], ], ['numbered' => true] ); - ``` @@ -378,7 +360,7 @@ echo $this->listGroup( // Alternatively, choose a responsive variant `sm|md|lg|xl|xxl` // to make a list group horizontal starting at that breakpoint’s foreach (['sm', 'md', 'lg', 'xl', 'xxl'] as $breakpoint) { - echo PHP_EOL.'
'; + echo PHP_EOL . '
'; echo $this->listGroup( [ @@ -389,7 +371,6 @@ foreach (['sm', 'md', 'lg', 'xl', 'xxl'] as $breakpoint) { ['horizontal' => $breakpoint] ); } - ``` @@ -433,62 +414,59 @@ foreach (['sm', 'md', 'lg', 'xl', 'xxl'] as $breakpoint) { listGroup( - [ - 'A simple default list group item', - 'A simple primary list group item' => ['variant' => 'primary'], - 'A simple secondary list group item' => ['variant' => 'secondary'], - 'A simple success list group item' => ['variant' => 'success'], - 'A simple danger list group item' => ['variant' => 'danger'], - 'A simple warning list group item' => ['variant' => 'warning'], - 'A simple info list group item' => ['variant' => 'info'], - 'A simple light list group item' => ['variant' => 'light'], - 'A simple dark list group item' => ['variant' => 'dark'], - ] -); - -echo PHP_EOL.'
'; +echo $this->listGroup([ + 'A simple default list group item', + 'A simple primary list group item' => ['variant' => 'primary'], + 'A simple secondary list group item' => ['variant' => 'secondary'], + 'A simple success list group item' => ['variant' => 'success'], + 'A simple danger list group item' => ['variant' => 'danger'], + 'A simple warning list group item' => ['variant' => 'warning'], + 'A simple info list group item' => ['variant' => 'info'], + 'A simple light list group item' => ['variant' => 'light'], + 'A simple dark list group item' => ['variant' => 'dark'], +]); + +echo PHP_EOL . '
'; // Contextual classes also work with .list-group-item-action echo $this->listGroup( [ - 'A simple default list group item' => ['attributes' => ['href' => '#']], - 'A simple primary list group item' => [ - 'variant' => 'primary', + 'A simple default list group item' => ['attributes' => ['href' => '#']], + 'A simple primary list group item' => [ + 'variant' => 'primary', 'attributes' => ['href' => '#'], ], 'A simple secondary list group item' => [ - 'variant' => 'secondary', + 'variant' => 'secondary', 'attributes' => ['href' => '#'], ], - 'A simple success list group item' => [ - 'variant' => 'success', + 'A simple success list group item' => [ + 'variant' => 'success', 'attributes' => ['href' => '#'], ], - 'A simple danger list group item' => [ - 'variant' => 'danger', + 'A simple danger list group item' => [ + 'variant' => 'danger', 'attributes' => ['href' => '#'], ], - 'A simple warning list group item' => [ - 'variant' => 'warning', + 'A simple warning list group item' => [ + 'variant' => 'warning', 'attributes' => ['href' => '#'], ], - 'A simple info list group item' => [ - 'variant' => 'info', + 'A simple info list group item' => [ + 'variant' => 'info', 'attributes' => ['href' => '#'], ], - 'A simple light list group item' => [ - 'variant' => 'light', + 'A simple light list group item' => [ + 'variant' => 'light', 'attributes' => ['href' => '#'], ], - 'A simple dark list group item' => [ - 'variant' => 'dark', + 'A simple dark list group item' => [ + 'variant' => 'dark', 'attributes' => ['href' => '#'], ], ], ['type' => 'action'] ); - ``` @@ -524,36 +502,26 @@ echo $this->listGroup( echo $this->listGroup( [ - 'A list item' => [ + 'A list item' => [ 'badge' => [ 14, - [ - 'type' => 'pill', - 'variant' => 'primary', - ], + ['type' => 'pill', 'variant' => 'primary'], ], ], 'A second list item' => [ 'badge' => [ 2, - [ - 'type' => 'pill', - 'variant' => 'primary', - ], + ['type' => 'pill', 'variant' => 'primary'], ], ], - 'A third list item' => [ + 'A third list item' => [ 'badge' => [ 1, - [ - 'type' => 'pill', - 'variant' => 'primary', - ], + ['type' => 'pill', 'variant' => 'primary'], ], ], ] ); - ``` @@ -602,22 +570,37 @@ echo $this->listGroup( echo $this->listGroup( [ [ - 'content' => '
'.'
List group item heading
'.' 3 days ago'.'
'.'

Some placeholder content in a paragraph.

'.'And some small print.', + 'content' => '
' . + '
List group item heading
' . + ' 3 days ago' . + '
' . + '

Some placeholder content in a paragraph.

' . + 'And some small print.', 'attributes' => ['href' => '#'], - 'active' => true, + 'active' => true, ], [ - 'content' => '
'.'
List group item heading
'.' 3 days ago'.'
'.'

Some placeholder content in a paragraph.

'.'And some small print.', + 'content' => '
' . + '
List group item heading
' . + ' 3 days ago' . + '
' . + '

Some placeholder content in a paragraph.

' . + 'And some small print.', 'attributes' => ['href' => '#'], ], [ - 'content' => '
'.'
List group item heading
'.' 3 days ago'.'
'.'

Donec id elit non mi porta gravida at eget metus. '.'Maecenas sed diam eget risus varius blandit.

'.'Donec id elit non mi porta.', + 'content' => '
' . + '
List group item heading
' . + ' 3 days ago' . + '
' . + '

Donec id elit non mi porta gravida at eget metus. ' . + 'Maecenas sed diam eget risus varius blandit.

' . + 'Donec id elit non mi porta.', 'attributes' => ['href' => '#'], ], ], ['type' => 'action'] ); - ``` @@ -676,16 +659,16 @@ echo $this->listGroup( echo $this->listGroup( [ - 'First checkbox' => [ + 'First checkbox' => [ 'checkbox' => ['attributes' => ['aria-label' => '...']], ], 'Second checkbox' => [ 'checkbox' => ['attributes' => ['aria-label' => '...']], ], - 'First checkbox' => [ + 'First checkbox' => [ 'checkbox' => ['attributes' => ['aria-label' => '...']], ], - 'Third checkbox' => [ + 'Third checkbox' => [ 'checkbox' => ['attributes' => ['aria-label' => '...']], ], 'Fourth checkbox' => [ @@ -694,20 +677,20 @@ echo $this->listGroup( ], ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->listGroup( [ - 'First checkbox' => [ + 'First checkbox' => [ 'checkbox' => ['label' => true], ], 'Second checkbox' => [ 'checkbox' => ['label' => true], ], - 'First checkbox' => [ + 'First checkbox' => [ 'checkbox' => ['label' => true], ], - 'Third checkbox' => [ + 'Third checkbox' => [ 'checkbox' => ['label' => true], ], 'Fourth checkbox' => [ @@ -715,7 +698,6 @@ echo $this->listGroup( ], ], ); - ``` diff --git a/website/docs/usage/components/modal.mdx b/website/docs/usage/components/modal.mdx index c9386b845..d1a0a0e1b 100644 --- a/website/docs/usage/components/modal.mdx +++ b/website/docs/usage/components/modal.mdx @@ -47,30 +47,29 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php modal( - [ - 'title' => 'Modal title', - 'Modal body text goes here.', - 'footer' => [ - 'button' => [ - [ - 'options' => [ - 'label' => 'Close', - 'variant' => 'secondary', - ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], +echo $this->modal([ + 'title' => 'Modal title', + 'Modal body text goes here.', + 'footer' => [ + 'button' => [ + [ + 'options' => [ + 'label' => 'Close', + 'variant' => 'secondary', ], - [ - 'options' => [ - 'label' => 'Save changes', - 'variant' => 'primary', - ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', ], ], - ] + [ + 'options' => [ + 'label' => 'Save changes', + 'variant' => 'primary', + ], + ], + ], ] -); - +]); ``` @@ -109,35 +108,37 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ 'label' => 'Launch demo modal' ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModal', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Launch demo modal', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModal', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'exampleModalLabel'], ], 'Woohoo, you\'re reading this text in a modal!', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -145,12 +146,11 @@ echo $this->modal( ], ], [ - 'fade' => true, + 'fade' => true, 'hidden' => true, - 'id' => 'exampleModal', + 'id' => 'exampleModal', ] ); - ``` @@ -189,38 +189,38 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Launch static backdrop modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#staticBackdrop', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Launch static backdrop modal', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#staticBackdrop', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'staticBackdropLabel'], ], 'I will not close if you click outside me. Don\'t even try to press escape key.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Understood', + 'label' => 'Understood', 'variant' => 'primary', ], ], @@ -228,13 +228,12 @@ echo $this->modal( ], ], [ - 'fade' => true, - 'hidden' => true, + 'fade' => true, + 'hidden' => true, 'backdrop' => true, - 'id' => 'staticBackdrop', + 'id' => 'staticBackdrop', ] ); - ``` @@ -294,38 +293,44 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Launch demo modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalLong', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Launch demo modal', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalLong', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'exampleModalLongTitle'], ], - 'This is some placeholder content to show the scrolling behavior for modals. '.'Instead of repeating the text the modal, '.'we use an inline style set a minimum height, '.'thereby extending the length of the overall modal '.'and demonstrating the overflow scrolling. '.'When content becomes longer than the height of the viewport, '.'scrolling will move the modal as needed.', + 'This is some placeholder content to show the scrolling behavior for modals. ' . + 'Instead of repeating the text the modal, ' . + 'we use an inline style set a minimum height, ' . + 'thereby extending the length of the overall modal ' . + 'and demonstrating the overflow scrolling. ' . + 'When content becomes longer than the height of the viewport, ' . + 'scrolling will move the modal as needed.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -333,49 +338,54 @@ echo $this->modal( ], ], [ - 'fade' => true, - 'hidden' => true, - 'id' => 'exampleModalLong', + 'fade' => true, + 'hidden' => true, + 'id' => 'exampleModalLong', 'body_attributes' => ['style' => 'min-height: 1500px'], ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Launch demo modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalScrollable', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Launch demo modal', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalScrollable', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'exampleModalScrollableTitle'], ], - 'This is some placeholder content to show the scrolling behavior for modals. '.'We use repeated line breaks to demonstrate how content can exceed minimum inner height, '.'thereby showing inner scrolling. '.'When content becomes longer than the predefined max-height of modal, '.'content will be cropped and scrollable within the modal.', - '






















'.'
















', + 'This is some placeholder content to show the scrolling behavior for modals. ' . + 'We use repeated line breaks to demonstrate how content can exceed minimum inner height, ' . + 'thereby showing inner scrolling. ' . + 'When content becomes longer than the predefined max-height of modal, ' . + 'content will be cropped and scrollable within the modal.', + '






















' . + '
















', 'This content should appear at the bottom after you scroll.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -383,13 +393,12 @@ echo $this->modal( ], ], [ - 'fade' => true, - 'hidden' => true, + 'fade' => true, + 'hidden' => true, 'scrollable' => true, - 'id' => 'exampleModalScrollable', + 'id' => 'exampleModalScrollable', ] ); - ``` @@ -449,38 +458,38 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Vertically centered modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalCenter', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Vertically centered modal', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalCenter', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'exampleModalCenterTitle'], ], 'This is a vertically centered modal.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -488,49 +497,55 @@ echo $this->modal( ], ], [ - 'fade' => true, - 'hidden' => true, - 'id' => 'exampleModalCenter', + 'fade' => true, + 'hidden' => true, + 'id' => 'exampleModalCenter', 'centered' => true, ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Vertically centered scrollable modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalCenteredScrollable', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Vertically centered scrollable modal', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalCenteredScrollable', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'exampleModalCenteredScrollableTitle'], ], - 'This is some placeholder content to show a vertically centered modal. '.'We\'ve added some extra copy here to show how vertically centering the modal works when '.'combined with scrollable modals. '.'We also use some repeated line breaks to quickly extend the height of the content, '.'thereby triggering the scrolling. '.'When content becomes longer than the predefined max-height of modal, '.'content will be cropped and scrollable within the modal.

', + 'This is some placeholder content to show a vertically centered modal. ' . + 'We\'ve added some extra copy here to show how vertically centering the modal works when ' . + 'combined with scrollable modals. ' . + 'We also use some repeated line breaks to quickly extend the height of the content, ' . + 'thereby triggering the scrolling. ' . + 'When content becomes longer than the predefined max-height of modal, ' . + 'content will be cropped and scrollable within the modal.

', '









', 'Just like that.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -538,14 +553,13 @@ echo $this->modal( ], ], [ - 'fade' => true, - 'hidden' => true, - 'id' => 'exampleModalCenteredScrollable', - 'centered' => true, + 'fade' => true, + 'hidden' => true, + 'id' => 'exampleModalCenteredScrollable', + 'centered' => true, 'scrollable' => true, ] ); - ``` @@ -588,48 +602,54 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Launch demo modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalPopovers', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Launch demo modal', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalPopovers', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'exampleModalPopoversLabel'], ], [ - 'type' => 'subtitle', + 'type' => 'subtitle', 'content' => 'Popover in a modal', ], - 'This button triggers a popover on click.', + 'This button triggers a popover on click.', '---', [ - 'type' => 'subtitle', + 'type' => 'subtitle', 'content' => 'Tooltips in a modal', ], - 'This link and that link have tooltips on hover.', + 'This link and that link have tooltips on hover.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -637,12 +657,11 @@ echo $this->modal( ], ], [ - 'fade' => true, + 'fade' => true, 'hidden' => true, - 'id' => 'exampleModalPopovers', + 'id' => 'exampleModalPopovers', ] ); - ``` @@ -716,27 +735,25 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Launch demo modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#gridSystemModal', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Launch demo modal', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#gridSystemModal', + ], +]); echo $this->modal( [ - 'title' => [ - 'content' => 'Grids in modals', + 'title' => [ + 'content' => 'Grids in modals', 'attributes' => ['id' => 'gridModalLabel'], ], - 'grid' => [ - 'rows' => [ + 'grid' => [ + 'rows' => [ [ [ [ @@ -745,10 +762,7 @@ echo $this->modal( ], [ '.col-md-4 .ms-auto', - [ - 'column' => 'md-4', - 'class' => 'ms-auto', - ], + ['column' => 'md-4', 'class' => 'ms-auto'], ], ], ], @@ -756,17 +770,11 @@ echo $this->modal( [ [ '.col-md-3 .ms-auto', - [ - 'column' => 'md-3', - 'class' => 'ms-auto', - ], + ['column' => 'md-3', 'class' => 'ms-auto'], ], [ '.col-md-2 .ms-auto', - [ - 'column' => 'md-2', - 'class' => 'ms-auto', - ], + ['column' => 'md-2', 'class' => 'ms-auto'], ], ], ], @@ -774,10 +782,7 @@ echo $this->modal( [ [ '.col-md-6 .ms-auto', - [ - 'column' => 'md-6', - 'class' => 'ms-auto', - ], + ['column' => 'md-6', 'class' => 'ms-auto'], ], ], ], @@ -787,32 +792,22 @@ echo $this->modal( 'Level 1: .col-sm-9', [ 'column' => 'sm-9', - 'grid' => [ + 'grid' => [ 'rows' => [ [ [ [ 'Level 2: .col-8 .col-sm-6', - [ - 'column' => [ - 8, - 'sm-6', - ], - ], + ['column' => [8, 'sm-6']], ], [ 'Level 2: .col-4 .col-sm-6', - [ - 'column' => [ - 4, - 'sm-6', - ], - ], + ['column' => [4, 'sm-6']], ], ], ], ], - ], + ] ], ], ], @@ -820,21 +815,23 @@ echo $this->modal( ], 'attributes' => [ 'container' => 'fluid', - 'class' => 'bd-example-row', + 'class' => 'bd-example-row', ], ], 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -842,12 +839,11 @@ echo $this->modal( ], ], [ - 'fade' => true, + 'fade' => true, 'hidden' => true, - 'id' => 'gridSystemModal', + 'id' => 'gridSystemModal', ] ); - ``` @@ -898,70 +894,70 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Open modal for @mdo', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModal', - 'data-bs-whatever' => '@mdo', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Open modal for @mdo', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModal', + 'data-bs-whatever' => '@mdo', + ], +]); -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Open modal for @fat', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModal', - 'data-bs-whatever' => '@fat', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Open modal for @fat', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModal', + 'data-bs-whatever' => '@fat', + ], +]); -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Open modal for @getbootstrap', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModal', - 'data-bs-whatever' => '@getbootstrap', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Open modal for @getbootstrap', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModal', + 'data-bs-whatever' => '@getbootstrap', + ], +]); echo $this->modal( [ - 'title' => [ - 'content' => 'New message to @mdo', + 'title' => [ + 'content' => 'New message to @mdo', 'attributes' => ['id' => 'exampleModalLabel'], ], - 'form' => [ + 'form' => [ 'elements' => [ [ 'spec' => [ - 'name' => 'recipient', - 'options' => [ 'label' => 'Recipient:' ], - 'attributes' => [ 'id' => 'recipient-name' ], + 'name' => 'recipient', + 'options' => [ + 'label' => 'Recipient:', + ], + 'attributes' => [ + 'id' => 'recipient-name', + ], ], ], [ 'spec' => [ - 'name' => 'message', - 'options' => [ 'label' => 'Message:' ], + 'name' => 'message', + 'options' => [ + 'label' => 'Message:', + ], 'attributes' => [ 'type' => 'textarea', - 'id' => 'message-text', + 'id' => 'message-text', ], ], ], @@ -970,15 +966,17 @@ echo $this->modal( 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Send message', + 'label' => 'Send message', 'variant' => 'primary', ], ], @@ -986,9 +984,9 @@ echo $this->modal( ], ], [ - 'fade' => true, + 'fade' => true, 'hidden' => true, - 'id' => 'exampleModal', + 'id' => 'exampleModal', ] ); @@ -996,25 +994,26 @@ $this->inlineScript()->captureStart(); // TODO: docusaurus mdx-loader does not support this // echo <<inlineScript()->captureEnd(); echo $this->inlineScript(); - ``` @@ -1068,32 +1067,30 @@ echo $this->inlineScript(); formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Open first modal', - 'tag' => 'a', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'href' => '#exampleModalToggle', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Open first modal', + 'tag' => 'a', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'href' => '#exampleModalToggle', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal 1', + 'content' => 'Modal 1', 'attributes' => ['id' => 'exampleModalToggleLabel'], ], 'Show a second modal and hide this one with the button below.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Open second modal', + 'options' => [ + 'label' => 'Open second modal', 'variant' => 'primary', ], 'attributes' => [ @@ -1105,25 +1102,25 @@ echo $this->modal( ], ], [ - 'fade' => true, - 'hidden' => true, + 'fade' => true, + 'hidden' => true, 'centered' => true, - 'id' => 'exampleModalToggle', + 'id' => 'exampleModalToggle', ] ); echo $this->modal( [ 'title' => [ - 'content' => 'Modal 2', + 'content' => 'Modal 2', 'attributes' => ['id' => 'exampleModalToggleLabel2'], ], 'Hide this modal and show the first with the button below.', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Back to first', + 'options' => [ + 'label' => 'Back to first', 'variant' => 'primary', ], 'attributes' => [ @@ -1135,13 +1132,12 @@ echo $this->modal( ], ], [ - 'fade' => true, - 'hidden' => true, + 'fade' => true, + 'hidden' => true, 'centered' => true, - 'id' => 'exampleModalToggle2', + 'id' => 'exampleModalToggle2', ] ); - ``` @@ -1180,35 +1176,37 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ 'label' => 'Launch demo modal' ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModal', - ], - ] -); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Launch demo modal', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModal', + ], +]); echo $this->modal( [ 'title' => [ - 'content' => 'Modal title', + 'content' => 'Modal title', 'attributes' => ['id' => 'exampleModalLabel'], ], 'Woohoo, you\'re reading this text in a modal!', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], [ 'options' => [ - 'label' => 'Save changes', + 'label' => 'Save changes', 'variant' => 'primary', ], ], @@ -1217,10 +1215,9 @@ echo $this->modal( ], [ 'hidden' => true, - 'id' => 'exampleModal', + 'id' => 'exampleModal', ] ); - ``` @@ -1283,102 +1280,77 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Extra large modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalXl', - ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Large modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalLg', - ], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Small modal', - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalSm', - ], - ] -); - -echo $this->modal( - [ - 'title' => [ - 'content' => 'Extra large modal', - 'attributes' => [ - 'id' => 'exampleModalXlLabel', - 'class' => 'h4', - ], - ], - '...', +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Extra large modal', + 'variant' => 'primary', ], - [ - 'hidden' => true, - 'fade' => true, - 'size' => 'xl', - 'id' => 'exampleModalXl', - ] -); + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalXl', + ], +]); -echo $this->modal( - [ - 'title' => [ - 'content' => 'Large modal', - 'attributes' => [ - 'id' => 'exampleModalLgLabel', - 'class' => 'h4', - ], - ], - '...', +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Large modal', + 'variant' => 'primary', ], - [ - 'hidden' => true, - 'fade' => true, - 'size' => 'lg', - 'id' => 'exampleModalLg', - ] -); + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalLg', + ], +]); -echo $this->modal( - [ - 'title' => [ - 'content' => 'Small modal', - 'attributes' => [ - 'id' => 'exampleModalSmLabel', - 'class' => 'h4', - ], - ], - '...', +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Small modal', + 'variant' => 'primary', ], - [ - 'hidden' => true, - 'fade' => true, - 'size' => 'sm', - 'id' => 'exampleModalSm', - ] -); + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalSm', + ], +]); +echo $this->modal([ + 'title' => [ + 'content' => 'Extra large modal', + 'attributes' => ['id' => 'exampleModalXlLabel', 'class' => 'h4'], + ], + '...', +], [ + 'hidden' => true, + 'fade' => true, + 'size' => 'xl', + 'id' => 'exampleModalXl', +]); + +echo $this->modal([ + 'title' => [ + 'content' => 'Large modal', + 'attributes' => ['id' => 'exampleModalLgLabel', 'class' => 'h4'], + ], + '...', +], [ + 'hidden' => true, + 'fade' => true, + 'size' => 'lg', + 'id' => 'exampleModalLg', +]); + +echo $this->modal([ + 'title' => [ + 'content' => 'Small modal', + 'attributes' => ['id' => 'exampleModalSmLabel', 'class' => 'h4'], + ], + '...', +], [ + 'hidden' => true, + 'fade' => true, + 'size' => 'sm', + 'id' => 'exampleModalSm', +]); ``` @@ -1501,104 +1473,85 @@ echo $this->modal( formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Full screen', +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Full screen', + 'variant' => 'primary', + ], + 'attributes' => [ + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#exampleModalFullscreen', + ], +]); + +foreach ($fullscreenSizes as $size) { + echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Full screen below ' . $size, 'variant' => 'primary', ], 'attributes' => [ 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalFullscreen', + 'data-bs-target' => '#exampleModalFullscreen' . ucfirst($size), ], - ] -); + ]); +} -foreach ($fullscreenSizes as $size) { - echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Full screen below '.$size, - 'variant' => 'primary', - ], - 'attributes' => [ - 'data-bs-toggle' => 'modal', - 'data-bs-target' => '#exampleModalFullscreen'.ucfirst($size), +echo $this->modal([ + 'title' => [ + 'content' => 'Full screen modal', + 'attributes' => ['id' => 'exampleModalFullscreenLabel', 'class' => 'h4'], + ], + '...', + 'footer' => [ + 'button' => [ + [ + 'options' => [ + 'label' => 'Close', + 'variant' => 'secondary', + ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', + ], ], - ] - ); -} + ], + ], +], [ + 'hidden' => true, + 'fade' => true, + 'fullscreen' => true, + 'id' => 'exampleModalFullscreen', +]); -echo $this->modal( - [ +foreach ($fullscreenSizes as $size) { + echo $this->modal([ 'title' => [ - 'content' => 'Full screen modal', - 'attributes' => [ - 'id' => 'exampleModalFullscreenLabel', - 'class' => 'h4', - ], + 'content' => 'Full screen below ' . $size, + 'attributes' => ['id' => 'exampleModalFullscreen' . ucfirst($size) . 'Label', 'class' => 'h4'], ], '...', 'footer' => [ 'button' => [ [ - 'options' => [ - 'label' => 'Close', + 'options' => [ + 'label' => 'Close', 'variant' => 'secondary', ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], - ], - ], - ], - ], - [ - 'hidden' => true, - 'fade' => true, - 'fullscreen' => true, - 'id' => 'exampleModalFullscreen', - ] -); - -foreach ($fullscreenSizes as $size) { - echo $this->modal( - [ - 'title' => [ - 'content' => 'Full screen below '.$size, - 'attributes' => [ - 'id' => 'exampleModalFullscreen'.ucfirst($size).'Label', - 'class' => 'h4', - ], - ], - '...', - 'footer' => [ - 'button' => [ - [ - 'options' => [ - 'label' => 'Close', - 'variant' => 'secondary', - ], - 'attributes' => [ 'data-bs-dismiss' => 'modal' ], + 'attributes' => [ + 'data-bs-dismiss' => 'modal', ], ], ], ], - [ - 'hidden' => true, - 'fade' => true, - 'fullscreen' => $size, - 'id' => 'exampleModalFullscreen'.ucfirst($size), - ] - ); -}//end foreach - + ], [ + 'hidden' => true, + 'fade' => true, + 'fullscreen' => $size, + 'id' => 'exampleModalFullscreen' . ucfirst($size), + ]); +} ``` diff --git a/website/docs/usage/components/navbar.mdx b/website/docs/usage/components/navbar.mdx index 1c068d6a5..4b5e99170 100644 --- a/website/docs/usage/components/navbar.mdx +++ b/website/docs/usage/components/navbar.mdx @@ -61,20 +61,13 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation( [ + ['label' => 'Home', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Dropdown', + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, + 'label' => 'Dropdown', 'dropdown' => [ - 'items' => [ + 'items' => [ 'Action', 'Another action', '---', @@ -84,33 +77,35 @@ echo $this->navigation()->navbar()->render( ], ], [ - 'label' => 'Disabled', - 'uri' => '#', + 'label' => 'Disabled', + 'uri' => '#', 'visible' => false, ], ], ), [ - 'container' => 'fluid', - 'brand' => 'Navbar', - 'nav' => [ 'ulClass' => 'mb-2 mb-lg-0 me-auto' ], - 'form' => [ - 'elements' => [ + 'container' => 'fluid', + 'brand' => 'Navbar', + 'nav' => [ + 'ulClass' => 'mb-2 mb-lg-0 me-auto', + ], + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'type' => 'search', + 'type' => 'search', 'attributes' => [ 'placeholder' => 'Search', - 'aria-label' => 'Search', - 'class' => 'me-2', + 'aria-label' => 'Search', + 'class' => 'me-2', ], ], ], [ 'spec' => [ - 'type' => 'submit', + 'type' => 'submit', 'options' => [ - 'label' => 'Search', + 'label' => 'Search', 'variant' => 'outline-success', ], ], @@ -121,7 +116,6 @@ echo $this->navigation()->navbar()->render( 'attributes' => ['id' => 'navbarSupportedContent'], ] ); - ``` @@ -160,30 +154,29 @@ echo $this->navigation()->navbar()->render( echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'brand' => 'Navbar', - 'expand' => false, - 'toggler' => false, + 'brand' => 'Navbar', + 'expand' => false, + 'toggler' => false, 'container' => 'fluid', ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // As a heading echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'brand' => [ - 'content' => 'Navbar', + 'brand' => [ + 'content' => 'Navbar', 'attributes' => ['class' => 'mb-0 h1'], - 'type' => 'heading', + 'type' => 'heading', ], - 'expand' => false, - 'toggler' => false, + 'expand' => false, + 'toggler' => false, 'container' => 'fluid', ] ); - ``` @@ -211,22 +204,21 @@ echo $this->navigation()->navbar()->render( echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'brand' => [ + 'brand' => [ 'img' => [ '/twbs-helper-module/img/docs/bootstrap-solid.svg', [ - 'width' => 30, + 'width' => 30, 'height' => 24, - 'alt' => '', + 'alt' => '', ], ], ], - 'expand' => false, - 'toggler' => false, + 'expand' => false, + 'toggler' => false, 'container' => true, ] ); - ``` @@ -257,23 +249,22 @@ echo $this->navigation()->navbar()->render( echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'brand' => [ + 'brand' => [ 'content' => 'Bootstrap', - 'img' => [ + 'img' => [ '/twbs-helper-module/img/docs/bootstrap-solid.svg', [ - 'width' => 30, + 'width' => 30, 'height' => 24, - 'alt' => '', + 'alt' => '', ], ], ], - 'expand' => false, - 'toggler' => false, + 'expand' => false, + 'toggler' => false, 'container' => 'fluid', ] ); - ``` @@ -359,108 +350,75 @@ echo $this->navigation()->navbar()->render( navigation()->navbar()->render( - new \Laminas\Navigation\Navigation( + new \Laminas\Navigation\Navigation([ [ - [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Features', - 'uri' => '#', - ], - [ - 'label' => 'Pricing', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), + 'label' => 'Home', + 'uri' => '#', + 'active' => true, + ], + ['label' => 'Features', 'uri' => '#'], + ['label' => 'Pricing', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), [ - 'brand' => 'Navbar', + 'brand' => 'Navbar', 'attributes' => ['id' => 'navbarNav'], - 'container' => 'fluid', + 'container' => 'fluid', ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Avoid the list-based approach echo $this->navigation()->navbar()->render( - new \Laminas\Navigation\Navigation( + new \Laminas\Navigation\Navigation([ [ - [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Features', - 'uri' => '#', - ], - [ - 'label' => 'Pricing', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), + 'label' => 'Home', + 'uri' => '#', + 'active' => true, + ], + ['label' => 'Features', 'uri' => '#'], + ['label' => 'Pricing', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), [ - 'brand' => 'Navbar', + 'brand' => 'Navbar', 'attributes' => ['id' => 'navbarNavAltMarkup'], - 'nav' => ['list' => false], - 'container' => 'fluid', + 'nav' => ['list' => false], + 'container' => 'fluid', ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->navbar()->render( - new \Laminas\Navigation\Navigation( + new \Laminas\Navigation\Navigation([ [ - [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Features', - 'uri' => '#', - ], - [ - 'label' => 'Pricing', - 'uri' => '#', - ], - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Dropdown link', - 'dropdown' => [ - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - 'attributes' => ['id' => 'navbarDropdownMenuLink'], + 'label' => 'Home', + 'uri' => '#', + 'active' => true, + ], + ['label' => 'Features', 'uri' => '#'], + ['label' => 'Pricing', 'uri' => '#'], + [ + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, + 'label' => 'Dropdown link', + 'dropdown' => [ + 'items' => [ + 'Action', + 'Another action', + 'Something else here', ], + 'attributes' => ['id' => 'navbarDropdownMenuLink'], ], - ] - ), + ], + ]), [ - 'brand' => 'Navbar', + 'brand' => 'Navbar', 'attributes' => ['id' => 'navbarNavDropdown'], - 'container' => 'fluid', + 'container' => 'fluid', ] ); - ``` @@ -518,142 +476,153 @@ echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ 'container' => 'fluid', - 'expand' => false, - 'toggler' => false, - 'collapse' => false, - 'form' => [ - 'elements' => [ + 'expand' => false, + 'toggler' => false, + 'collapse' => false, + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'name' => 'search', + 'name' => 'search', 'attributes' => [ - 'type' => 'search', + 'type' => 'search', 'placeholder' => 'Search', - 'aria-label' => 'Search', - 'class' => 'me-2', + 'aria-label' => 'Search', + 'class' => 'me-2', ], ], ], [ 'spec' => [ - 'type' => 'submit', + 'type' => 'submit', 'options' => [ - 'label' => 'Search', + 'label' => 'Search', 'variant' => 'outline-success', ], ], ], ], - 'attributes' => [ 'class' => 'd-flex' ], + 'attributes' => [ + 'class' => 'd-flex', + ], ], ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ 'container' => 'fluid', - 'expand' => false, - 'toggler' => false, - 'collapse' => false, - 'brand' => 'Navbar', - 'form' => [ - 'elements' => [ + 'expand' => false, + 'toggler' => false, + 'collapse' => false, + 'brand' => 'Navbar', + 'form' => [ + 'elements' => [ [ 'spec' => [ 'attributes' => [ - 'type' => 'search', + 'type' => 'search', 'placeholder' => 'Search', - 'aria-label' => 'Search', - 'class' => 'me-2', + 'aria-label' => 'Search', + 'class' => 'me-2', ], ], ], [ 'spec' => [ - 'type' => 'submit', + 'type' => 'submit', 'options' => [ - 'label' => 'Search', + 'label' => 'Search', 'variant' => 'outline-success', ], ], ], ], - 'attributes' => [ 'class' => 'd-flex' ], + 'attributes' => [ + 'class' => 'd-flex', + ], ], ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Input groups work, too: echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'expand' => false, - 'toggler' => false, + 'expand' => false, + 'toggler' => false, 'collapse' => false, - 'form' => [ - 'elements' => [ + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'options' => [ 'add_on_prepend' => '@' ], + 'options' => [ + 'add_on_prepend' => '@', + ], 'attributes' => [ - 'type' => 'text', - 'placeholder' => 'Username', - 'aria-label' => 'Username', + 'type' => 'text', + 'placeholder' => 'Username', + 'aria-label' => 'Username', 'aria-describedby' => 'basic-addon1', ], ], ], ], - 'attributes' => [ 'class' => 'container-fluid' ], + 'attributes' => [ + 'class' => 'container-fluid', + ], ], ] ); // Various buttons are supported as part of these navbar forms, too. -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Input groups work, too: echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'expand' => false, - 'toggler' => false, + 'expand' => false, + 'toggler' => false, 'collapse' => false, - 'form' => [ - 'elements' => [ + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'type' => 'button', - 'name' => 'main_button', - 'options' => [ - 'label' => 'Main button', + 'type' => 'button', + 'name' => 'main_button', + 'options' => [ + 'label' => 'Main button', 'variant' => 'outline-success', ], - 'attributes' => [ 'class' => 'me-2' ], + 'attributes' => [ + 'class' => 'me-2', + ] ], ], [ 'spec' => [ - 'type' => 'button', - 'name' => 'smaller_button', + 'type' => 'button', + 'name' => 'smaller_button', 'options' => [ - 'label' => 'Smaller button', + 'label' => 'Smaller button', 'variant' => 'outline-secondary', - 'size' => 'sm', + 'size' => 'sm', ], ], ], ], - 'attributes' => [ 'class' => 'container-fluid justify-content-start' ], + 'attributes' => [ + 'class' => 'container-fluid justify-content-start', + ], ], ] ); - ``` @@ -703,41 +672,34 @@ echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ 'container' => 'fluid', - 'text' => 'Navbar text with an inline element', - 'expand' => false, - 'toggler' => false, + 'text' => 'Navbar text with an inline element', + 'expand' => false, + 'toggler' => false, ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->navbar()->render( - new \Laminas\Navigation\Navigation( + new \Laminas\Navigation\Navigation([ [ - [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Features', - 'uri' => '#', - ], - [ - 'label' => 'Pricing', - 'uri' => '#', - ], - ] - ), + 'label' => 'Home', + 'uri' => '#', + 'active' => true, + ], + ['label' => 'Features', 'uri' => '#'], + ['label' => 'Pricing', 'uri' => '#'], + ]), [ - 'container' => 'fluid', - 'brand' => 'Navbar w/ text', - 'text' => 'Navbar text with an inline element', + 'container' => 'fluid', + 'brand' => 'Navbar w/ text', + 'text' => 'Navbar text with an inline element', 'attributes' => ['id' => 'navbarText'], - 'nav' => [ 'ulClass' => 'mb-2 mb-lg-0 me-auto' ], + 'nav' => [ + 'ulClass' => 'mb-2 mb-lg-0 me-auto', + ], ] ); - ``` @@ -838,86 +800,71 @@ echo $this->navigation()->navbar()->render( 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Features', - 'uri' => '#', - ], - [ - 'label' => 'Pricing', - 'uri' => '#', - ], - [ - 'label' => 'About', - 'uri' => '#', - ], - ] -); +$navigationContainer = new \Laminas\Navigation\Navigation([ + ['label' => 'Home', 'uri' => '#', 'active' => true], + ['label' => 'Features', 'uri' => '#'], + ['label' => 'Pricing', 'uri' => '#'], + ['label' => 'About', 'uri' => '#'], +]); $options = [ 'container' => 'fluid', - 'brand' => 'Navbar', - 'form' => [ - 'elements' => [ + 'brand' => 'Navbar', + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'name' => 'search', + 'name' => 'search', 'attributes' => [ - 'type' => 'search', + 'type' => 'search', 'placeholder' => 'Search', - 'aria-label' => 'Search', - 'class' => 'me-2', + 'aria-label' => 'Search', + 'class' => 'me-2', ], ], ], [ 'spec' => [ - 'type' => 'submit', + 'type' => 'submit', 'options' => [ - 'label' => 'Search', + 'label' => 'Search', 'variant' => 'outline-light', ], ], ], ], - 'attributes' => [ 'class' => 'd-flex'], + 'attributes' => [ + 'class' => 'd-flex', + ], + ], + 'nav' => [ + 'ulClass' => 'mb-2 mb-lg-0 me-auto', ], - 'nav' => [ 'ulClass' => 'mb-2 mb-lg-0 me-auto'], ]; // Navbar dark, background dark -$options['variant'] = 'dark'; +$options['variant'] = 'dark'; $options['background'] = 'dark'; $options['attributes'] = ['id' => 'navbarColor01']; echo $this->navigation()->navbar()->render($navigationContainer, $options); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Navbar dark, background primary -$options['variant'] = 'dark'; +$options['variant'] = 'dark'; $options['background'] = 'primary'; $options['attributes'] = ['id' => 'navbarColor02']; echo $this->navigation()->navbar()->render($navigationContainer, $options); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Navbar light, custom background-color -$options['variant'] = 'light'; +$options['variant'] = 'light'; $options['background'] = false; $options['form']['elements'][1]['spec']['options']['variant'] = 'outline-primary'; -$options['attributes'] = [ - 'id' => 'navbarColor03', - 'style' => 'background-color: #e3f2fd;', -]; +$options['attributes'] = ['id' => 'navbarColor03', 'style' => 'background-color: #e3f2fd;']; echo $this->navigation()->navbar()->render($navigationContainer, $options); - ``` @@ -954,24 +901,23 @@ echo $this->navigation()->navbar()->render($navigationContainer, $options); echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'brand' => 'Navbar', + 'brand' => 'Navbar', 'wrapping_container' => true, - 'container' => 'fluid', - 'toggler' => false, + 'container' => 'fluid', + 'toggler' => false, ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'brand' => 'Navbar', + 'brand' => 'Navbar', 'container' => 'md', - 'toggler' => false, + 'toggler' => false, ] ); - ``` @@ -1016,25 +962,26 @@ echo $this->navigation()->navbar()->render( 'Default', - 'fixed-top' => 'Fixed top', - 'fixed-bottom' => 'Fixed bottom', - 'sticky-top' => 'Sticky top', -] as $placement => $brand) { +foreach ( + [ + false => 'Default', + 'fixed-top' => 'Fixed top', + 'fixed-bottom' => 'Fixed bottom', + 'sticky-top' => 'Sticky top', + ] as $placement => $brand +) { echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'brand' => $brand, + 'brand' => $brand, 'placement' => $placement, - 'toggler' => false, - 'expand' => false, + 'toggler' => false, + 'expand' => false, 'container' => 'fluid', ] ); - echo PHP_EOL.'
'; + echo PHP_EOL . '
'; } - ``` @@ -1089,20 +1036,13 @@ foreach ([ echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation( [ + ['label' => 'Home', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, 'label' => 'Link', - 'uri' => '#', - ], - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Link', 'dropdown' => [ - 'items' => [ + 'items' => [ 'Action', 'Another action', '---', @@ -1112,36 +1052,36 @@ echo $this->navigation()->navbar()->render( ], ], [ - 'label' => 'Link', - 'uri' => '#', + 'label' => 'Link', + 'uri' => '#', 'visible' => false, ], ], ), [ - 'container' => 'fluid', - 'brand' => 'Navbar scroll', - 'nav' => [ - 'scroll' => true, + 'container' => 'fluid', + 'brand' => 'Navbar scroll', + 'nav' => [ + 'scroll' => true, 'ulClass' => 'me-auto my-2 my-lg-0', ], - 'form' => [ - 'elements' => [ + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'type' => 'search', + 'type' => 'search', 'attributes' => [ 'placeholder' => 'Search', - 'aria-label' => 'Search', - 'class' => 'me-2', + 'aria-label' => 'Search', + 'class' => 'me-2', ], ], ], [ 'spec' => [ - 'type' => 'submit', + 'type' => 'submit', 'options' => [ - 'label' => 'Search', + 'label' => 'Search', 'variant' => 'outline-success', ], ], @@ -1152,7 +1092,6 @@ echo $this->navigation()->navbar()->render( 'attributes' => ['id' => 'navbarScroll'], ] ); - ``` @@ -1249,18 +1188,11 @@ echo $this->navigation()->navbar()->render( $navigation = new \Laminas\Navigation\Navigation( [ + ['label' => 'Home', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', + 'label' => 'Disabled', + 'uri' => '#', 'visible' => false, ], ], @@ -1268,24 +1200,26 @@ $navigation = new \Laminas\Navigation\Navigation( $options = [ 'container' => 'fluid', - 'nav' => [ 'ulClass' => 'mb-2 mb-lg-0 me-auto'], - 'form' => [ - 'elements' => [ + 'nav' => [ + 'ulClass' => 'mb-2 mb-lg-0 me-auto', + ], + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'type' => 'search', + 'type' => 'search', 'attributes' => [ 'placeholder' => 'Search', - 'aria-label' => 'Search', - 'class' => 'me-2', + 'aria-label' => 'Search', + 'class' => 'me-2', ], ], ], [ 'spec' => [ - 'type' => 'submit', + 'type' => 'submit', 'options' => [ - 'label' => 'Search', + 'label' => 'Search', 'variant' => 'outline-success', ], ], @@ -1296,8 +1230,8 @@ $options = [ ]; -$options['brand'] = [ - 'content' => 'Hidden brand', +$options['brand'] = [ + 'content' => 'Hidden brand', 'position' => 'hidden', ]; $options['attributes'] = ['id' => 'navbarTogglerDemo01']; @@ -1306,10 +1240,10 @@ echo $this->navigation()->navbar()->render( $options ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; -$options['brand'] = [ - 'content' => 'Navbar', +$options['brand'] = [ + 'content' => 'Navbar', 'position' => 'left', ]; $options['attributes'] = ['id' => 'navbarTogglerDemo02']; @@ -1318,10 +1252,10 @@ echo $this->navigation()->navbar()->render( $options ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; -$options['brand'] = [ - 'content' => 'Navbar', +$options['brand'] = [ + 'content' => 'Navbar', 'position' => 'right', ]; $options['attributes'] = ['id' => 'navbarTogglerDemo03']; @@ -1329,7 +1263,6 @@ echo $this->navigation()->navbar()->render( $navigation, $options ); - ``` @@ -1360,30 +1293,34 @@ echo $this->navigation()->navbar()->render( ```php collapse( - [ - 'targets' => [ - [ - 'content' => '
'.'
Collapsed content
'.' Toggleable via the navbar brand.'.'
', - 'attributes' => [ 'id' => 'navbarToggleExternalContent' ], +echo $this->collapse([ + 'targets' => [ + [ + 'content' => '
' . + '
Collapsed content
' . + ' Toggleable via the navbar brand.' . + '
', + 'attributes' => [ + 'id' => 'navbarToggleExternalContent', ], ], ] -); +]); echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation(), [ - 'expand' => false, - 'toggler' => [ - 'attributes' => ['data-bs-target' => '#navbarToggleExternalContent'], + 'expand' => false, + 'toggler' => [ + 'attributes' => [ + 'data-bs-target' => '#navbarToggleExternalContent' + ], ], - 'container' => 'fluid', + 'container' => 'fluid', 'background' => 'dark', - 'variant' => 'dark', + 'variant' => 'dark', ] ); - ``` @@ -1441,20 +1378,13 @@ echo $this->navigation()->navbar()->render( echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation( [ + ['label' => 'Home', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], [ - 'label' => 'Home', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Dropdown', + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, + 'label' => 'Dropdown', 'dropdown' => [ - 'items' => [ + 'items' => [ 'Action', 'Another action', '---', @@ -1466,40 +1396,42 @@ echo $this->navigation()->navbar()->render( ], ), [ - 'container' => 'fluid', - 'expand' => false, - 'offcanvas' => [ + 'container' => 'fluid', + 'expand' => false, + 'offcanvas' => [ 'placement' => 'end', - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Offcanvas', - 'attributes' => [ 'id' => 'offcanvasNavbarLabel' ], + 'content' => 'Offcanvas', + 'attributes' => [ + 'id' => 'offcanvasNavbarLabel', + ], ], ], ], - 'placement' => 'fixed-top', - 'brand' => 'Offcanvas navbar', - 'nav' => [ - 'ulClass' => 'flex-grow-1 pe-3', + 'placement' => 'fixed-top', + 'brand' => 'Offcanvas navbar', + 'nav' => [ + 'ulClass' => 'flex-grow-1 pe-3', 'right_aligned' => true, ], - 'form' => [ - 'elements' => [ + 'form' => [ + 'elements' => [ [ 'spec' => [ - 'type' => 'search', + 'type' => 'search', 'attributes' => [ 'placeholder' => 'Search', - 'aria-label' => 'Search', - 'class' => 'me-2', + 'aria-label' => 'Search', + 'class' => 'me-2', ], ], ], [ 'spec' => [ - 'type' => 'submit', + 'type' => 'submit', 'options' => [ - 'label' => 'Search', + 'label' => 'Search', 'variant' => 'outline-success', ], ], @@ -1510,7 +1442,6 @@ echo $this->navigation()->navbar()->render( 'attributes' => ['id' => 'offcanvasNavbar'], ] ); - ``` diff --git a/website/docs/usage/components/navs-and-tabs.mdx b/website/docs/usage/components/navs-and-tabs.mdx index 6a5b93045..258ca0aab 100644 --- a/website/docs/usage/components/navs-and-tabs.mdx +++ b/website/docs/usage/components/navs-and-tabs.mdx @@ -46,61 +46,19 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - ['page' => true] -); - -echo $this->navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'list' => false, - 'page' => true, - ] -); - +echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], +]), ['page' => true]); + +echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], +]), ['list' => false, 'page' => true]); ``` @@ -153,65 +111,20 @@ echo $this->navigation()->menu()->renderMenu( navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'centered' => true, - 'page' => true, - ] -); +echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], +]), ['centered' => true, 'page' => true]); // Right-aligned with option 'right_aligned' -echo $this->navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'right_aligned' => true, - 'page' => true, - ] -); - +echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], +]), ['right_aligned' => true, 'page' => true]); ``` @@ -252,64 +165,28 @@ echo $this->navigation()->menu()->renderMenu( navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'vertical' => true, - 'page' => true, - ] + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), + ['vertical' => true, 'page' => true] ); echo $this->navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), [ 'vertical' => true, - 'list' => false, - 'page' => true, + 'list' => false, + 'page' => true, ] ); - ``` @@ -343,35 +220,12 @@ echo $this->navigation()->menu()->renderMenu( ```php navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'tabs' => true, - 'page' => true, - ] -); - +echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], +]), ['tabs' => true, 'page' => true]); ``` @@ -405,35 +259,12 @@ echo $this->navigation()->menu()->renderMenu( ```php navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'pills' => true, - 'page' => true, - ] -); - +echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], +]), ['pills' => true, 'page' => true]); ``` @@ -497,133 +328,68 @@ echo $this->navigation()->menu()->renderMenu( navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Much longer nav link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Much longer nav link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), [ 'pills' => true, - 'fill' => true, - 'page' => true, + 'fill' => true, + 'page' => true, ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Much longer nav link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Much longer nav link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), [ 'pills' => true, - 'fill' => true, - 'list' => false, - 'page' => true, + 'fill' => true, + 'list' => false, + 'page' => true, ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Much longer nav link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Much longer nav link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), [ - 'pills' => true, + 'pills' => true, 'justified' => true, - 'page' => true, + 'page' => true, ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'label' => 'Much longer nav link', - 'uri' => '#', - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], + ['label' => 'Much longer nav link', 'uri' => '#'], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), [ - 'pills' => true, + 'pills' => true, 'justified' => true, - 'list' => false, - 'page' => true, + 'list' => false, + 'page' => true, ] ); - ``` @@ -649,41 +415,17 @@ echo $this->navigation()->menu()->renderMenu( ```php navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( - [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - 'class' => 'flex-sm-fill text-sm-center', - ], - [ - 'label' => 'Longer nav link', - 'uri' => '#', - 'class' => 'flex-sm-fill text-sm-center', - ], - [ - 'label' => 'Link', - 'uri' => '#', - 'class' => 'flex-sm-fill text-sm-center', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - 'class' => 'flex-sm-fill text-sm-center', - ], - ] - ), - [ - 'page' => true, - 'list' => false, - 'pills' => true, - 'ulClass' => 'flex-column flex-sm-row nav', - ] -); - +echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true, 'class' => 'flex-sm-fill text-sm-center'], + ['label' => 'Longer nav link', 'uri' => '#', 'class' => 'flex-sm-fill text-sm-center'], + ['label' => 'Link', 'uri' => '#', 'class' => 'flex-sm-fill text-sm-center'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false, 'class' => 'flex-sm-fill text-sm-center'], +]), [ + 'page' => true, + 'list' => false, + 'pills' => true, + 'ulClass' => 'flex-column flex-sm-row nav', +]); ``` @@ -729,41 +471,24 @@ echo $this->navigation()->menu()->renderMenu( navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Dropdown', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'tabs' => true, - 'page' => true, - ] + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, + 'label' => 'Dropdown', + 'dropdown' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', + ], + ], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), + ['tabs' => true, 'page' => true] ); - ``` @@ -805,41 +530,24 @@ echo $this->navigation()->menu()->renderMenu( navigation()->menu()->renderMenu( - new \Laminas\Navigation\Navigation( + new \Laminas\Navigation\Navigation([ + ['label' => 'Active', 'uri' => '#', 'active' => true], [ - [ - 'label' => 'Active', - 'uri' => '#', - 'active' => true, - ], - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Dropdown', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], - [ - 'label' => 'Link', - 'uri' => '#', - ], - [ - 'label' => 'Disabled', - 'uri' => '#', - 'visible' => false, - ], - ] - ), - [ - 'pills' => true, - 'page' => true, - ] + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, + 'label' => 'Dropdown', + 'dropdown' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', + ], + ], + ['label' => 'Link', 'uri' => '#'], + ['label' => 'Disabled', 'uri' => '#', 'visible' => false], + ]), + ['pills' => true, 'page' => true] ); - ``` diff --git a/website/docs/usage/components/offcanvas.mdx b/website/docs/usage/components/offcanvas.mdx index 7568715d4..539f0e6fd 100644 --- a/website/docs/usage/components/offcanvas.mdx +++ b/website/docs/usage/components/offcanvas.mdx @@ -40,18 +40,20 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; offcanvas( - 'Content for the offcanvas goes here. '.'You can place just about any Bootstrap component or custom elements here.', + 'Content for the offcanvas goes here. ' . +'You can place just about any Bootstrap component or custom elements here.', [ 'header' => [ 'title' => [ - 'content' => 'Offcanvas', - 'attributes' => [ 'id' => 'offcanvasLabel' ], + 'content' => 'Offcanvas', + 'attributes' => [ + 'id' => 'offcanvasLabel', + ], ], ], - 'id' => 'offcanvas', + 'id' => 'offcanvas', ] ); - ``` @@ -93,48 +95,47 @@ echo $this->offcanvas( offcanvas( - '
'.' Some text as placeholder. In real life you can have the elements you have chosen. '.'Like, text, images, lists, etc.'.'
'.$this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Dropdown button', - 'dropdown' => [ - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - ], - 'attributes' => ['class' => 'mt-3'], - ], - ], - 'attributes' => ['id' => 'dropdownMenuButton'], - ] - ), + '
' . +' Some text as placeholder. In real life you can have the elements you have chosen. ' . +'Like, text, images, lists, etc.' . +'
' . +$this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Dropdown button', + 'dropdown' => [ + 'items' => ['Action', 'Another action', 'Something else here'], + 'attributes' => ['class' => 'mt-3'], + ], + ], + 'attributes' => ['id' => 'dropdownMenuButton'], +]), [ 'triggers' => [ [ 'options' => [ 'variant' => 'primary', - 'label' => 'Link with href', - 'tag' => 'a', + 'label' => 'Link with href', + 'tag' => 'a' ], ], [ 'options' => [ 'variant' => 'primary', - 'label' => 'Button with data-bs-target', + 'label' => 'Button with data-bs-target', ], ], ], - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Offcanvas', - 'attributes' => [ 'id' => 'offcanvasExampleLabel' ], + 'content' => 'Offcanvas', + 'attributes' => [ + 'id' => 'offcanvasExampleLabel', + ], ], ], - 'id' => 'offcanvasExample', + 'id' => 'offcanvasExample', ] ); - ``` @@ -189,74 +190,81 @@ echo $this->offcanvas( echo $this->offcanvas( '...', [ - 'triggers' => [ + 'triggers' => [ [ 'options' => [ 'variant' => 'primary', - 'label' => 'Toggle top offcanvas', + 'label' => 'Toggle top offcanvas', ], ], ], - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Offcanvas top', - 'attributes' => [ 'id' => 'offcanvasTopLabel' ], + 'content' => 'Offcanvas top', + 'attributes' => [ + 'id' => 'offcanvasTopLabel', + ], ], ], 'placement' => 'top', - 'id' => 'offcanvasTop', + 'id' => 'offcanvasTop', ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->offcanvas( '...', [ - 'triggers' => [ + 'triggers' => [ [ 'options' => [ 'variant' => 'primary', - 'label' => 'Toggle right offcanvas', + 'label' => 'Toggle right offcanvas', ], ], ], - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Offcanvas right', - 'attributes' => [ 'id' => 'offcanvasRightLabel' ], + 'content' => 'Offcanvas right', + 'attributes' => [ + 'id' => 'offcanvasRightLabel', + ], ], ], 'placement' => 'end', - 'id' => 'offcanvasRight', + 'id' => 'offcanvasRight', ] ); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; echo $this->offcanvas( '...', [ - 'triggers' => [ + 'triggers' => [ [ 'options' => [ 'variant' => 'primary', - 'label' => 'Toggle bottom offcanvas', + 'label' => 'Toggle bottom offcanvas', ], ], ], - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Offcanvas bottom', - 'attributes' => [ 'id' => 'offcanvasBottomLabel' ], + 'content' => 'Offcanvas bottom', + 'attributes' => [ + 'id' => 'offcanvasBottomLabel', + ], ], ], - 'body' => [ 'class' => 'small' ], + 'body' => [ + 'class' => 'small', + ], 'placement' => 'bottom', - 'id' => 'offcanvasBottom', + 'id' => 'offcanvasBottom', ] ); - ``` @@ -313,19 +321,21 @@ echo $this->offcanvas( [ 'options' => [ 'variant' => 'primary', - 'label' => 'Enable body scrolling', + 'label' => 'Enable body scrolling', ], ], ], - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Colored with scrolling', - 'attributes' => [ 'id' => 'offcanvasScrollingLabel' ], + 'content' => 'Colored with scrolling', + 'attributes' => [ + 'id' => 'offcanvasScrollingLabel', + ], ], ], 'backdrop' => false, - 'scroll' => true, - 'id' => 'offcanvasScrolling', + 'scroll' => true, + 'id' => 'offcanvasScrolling', ] ); @@ -336,42 +346,45 @@ echo $this->offcanvas( [ 'options' => [ 'variant' => 'primary', - 'label' => 'Enable backdrop (default)', + 'label' => 'Enable backdrop (default)', ], ], ], - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Offcanvas with backdrop', - 'attributes' => [ 'id' => 'offcanvasWithBackdropLabel' ], + 'content' => 'Offcanvas with backdrop', + 'attributes' => [ + 'id' => 'offcanvasWithBackdropLabel', + ], ], ], - 'id' => 'offcanvasWithBackdrop', + 'id' => 'offcanvasWithBackdrop', ] ); echo $this->offcanvas( '

Try scrolling the rest of the page to see this option in action.

', [ - 'scroll' => true, + 'scroll' => true, 'triggers' => [ [ 'options' => [ 'variant' => 'primary', - 'label' => 'Enable both scrolling & backdrop', + 'label' => 'Enable both scrolling & backdrop', ], ], ], - 'header' => [ + 'header' => [ 'title' => [ - 'content' => 'Backdrop with scrolling', - 'attributes' => [ 'id' => 'offcanvasWithBothOptionsLabel' ], + 'content' => 'Backdrop with scrolling', + 'attributes' => [ + 'id' => 'offcanvasWithBothOptionsLabel', + ], ], ], - 'id' => 'offcanvasWithBothOptions', + 'id' => 'offcanvasWithBothOptions', ] ); - ``` diff --git a/website/docs/usage/components/pagination.mdx b/website/docs/usage/components/pagination.mdx index a59f4b9da..5fc839fa8 100644 --- a/website/docs/usage/components/pagination.mdx +++ b/website/docs/usage/components/pagination.mdx @@ -36,27 +36,17 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; paginationControl( - $paginator, - null, - null, - [ - 'attributes' => ['aria-label' => 'Page navigation example'], - 'previousLink' => 'Previous', - 'nextLink' => 'Next', - ] -); - +$paginator = new \Laminas\Paginator\Paginator(new \Laminas\Paginator\Adapter\ArrayAdapter(array_fill( + 0, + 30, + true +))); + +echo $this->paginationControl($paginator, null, null, [ + 'attributes' => ['aria-label' => 'Page navigation example'], + 'previousLink' => 'Previous', + 'nextLink' => 'Next', +]); ``` @@ -86,33 +76,23 @@ echo $this->paginationControl( paginationControl( - $paginator, - null, - null, - [ - 'previousLink' => [ - 'aria-label' => 'Previous', - 'icon' => '«', - ], - 'nextLink' => [ - 'aria-label' => 'Next', - 'icon' => '»', - ], - 'attributes' => ['aria-label' => 'Page navigation example'], - ] -); - +$paginator = new \Laminas\Paginator\Paginator(new \Laminas\Paginator\Adapter\ArrayAdapter(array_fill( + 0, + 30, + true +))); + +echo $this->paginationControl($paginator, null, null, [ + 'previousLink' => [ + 'aria-label' => 'Previous', + 'icon' => '«', + ], + 'nextLink' => [ + 'aria-label' => 'Next', + 'icon' => '»', + ], + 'attributes' => ['aria-label' => 'Page navigation example'], +]); ``` @@ -151,45 +131,30 @@ echo $this->paginationControl( setCurrentPageNumber(2); -echo $this->paginationControl( - $paginator, - null, - null, - [ - 'attributes' => ['aria-label' => '...'], - 'disabledStates' => true, - 'activeStates' => true, - 'previousLink' => 'Previous', - 'previous' => null, - 'nextLink' => 'Next', - ] -); - -echo $this->paginationControl( - $paginator, - null, - null, - [ - 'attributes' => ['aria-label' => '...'], - 'disabledStates' => 'swap_out', - 'activeStates' => 'swap_out', - 'previousLink' => 'Previous', - 'previous' => null, - 'nextLink' => 'Next', - ] -); - +echo $this->paginationControl($paginator, null, null, [ + 'attributes' => ['aria-label' => '...'], + 'disabledStates' => true, + 'activeStates' => true, + 'previousLink' => 'Previous', + 'previous' => null, + 'nextLink' => 'Next', +]); + +echo $this->paginationControl($paginator, null, null, [ + 'attributes' => ['aria-label' => '...'], + 'disabledStates' => 'swap_out', + 'activeStates' => 'swap_out', + 'previousLink' => 'Previous', + 'previous' => null, + 'nextLink' => 'Next', +]); ``` @@ -224,38 +189,23 @@ echo $this->paginationControl( paginationControl( - $paginator, - null, - null, - [ - 'size' => 'lg', - 'attributes' => ['aria-label' => '...'], - 'activeStates' => 'swap_out', - ] -); - -echo $this->paginationControl( - $paginator, - null, - null, - [ - 'size' => 'sm', - 'attributes' => ['aria-label' => '...'], - 'activeStates' => 'swap_out', - ] -); - +$paginator = new \Laminas\Paginator\Paginator(new \Laminas\Paginator\Adapter\ArrayAdapter(array_fill( + 0, + 30, + true +))); + +echo $this->paginationControl($paginator, null, null, [ + 'size' => 'lg', + 'attributes' => ['aria-label' => '...'], + 'activeStates' => 'swap_out', +]); + +echo $this->paginationControl($paginator, null, null, [ + 'size' => 'sm', + 'attributes' => ['aria-label' => '...'], + 'activeStates' => 'swap_out', +]); ``` @@ -294,44 +244,29 @@ echo $this->paginationControl( paginationControl( - $paginator, - null, - null, - [ - 'disabledStates' => true, - 'alignment' => 'center', - 'previous' => null, - 'previousLink' => 'Previous', - 'nextLink' => 'Next', - 'attributes' => ['aria-label' => 'Page navigation example'], - ] -); - -echo $this->paginationControl( - $paginator, - null, - null, - [ - 'disabledStates' => true, - 'alignment' => 'end', - 'previous' => null, - 'previousLink' => 'Previous', - 'nextLink' => 'Next', - 'attributes' => ['aria-label' => 'Page navigation example'], - ] -); - +$paginator = new \Laminas\Paginator\Paginator(new \Laminas\Paginator\Adapter\ArrayAdapter(array_fill( + 0, + 30, + true +))); + +echo $this->paginationControl($paginator, null, null, [ + 'disabledStates' => true, + 'alignment' => 'center', + 'previous' => null, + 'previousLink' => 'Previous', + 'nextLink' => 'Next', + 'attributes' => ['aria-label' => 'Page navigation example'], +]); + +echo $this->paginationControl($paginator, null, null, [ + 'disabledStates' => true, + 'alignment' => 'end', + 'previous' => null, + 'previousLink' => 'Previous', + 'nextLink' => 'Next', + 'attributes' => ['aria-label' => 'Page navigation example'], +]); ``` diff --git a/website/docs/usage/components/placeholders.mdx b/website/docs/usage/components/placeholders.mdx index d14db6bd0..c81a6b460 100644 --- a/website/docs/usage/components/placeholders.mdx +++ b/website/docs/usage/components/placeholders.mdx @@ -52,36 +52,36 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; echo $this->card( [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], 'title' => 'Card title', - 'text' => 'Some quick example text to build on the card title '.'and make up the bulk of the card\'s content.', + 'text' => 'Some quick example text to build on the card title ' . + 'and make up the bulk of the card\'s content.', 'Go somewhere', ], ); echo $this->card( [ - 'image_top' => [ - '/twbs-helper-module/img/docs/image-cap.svg', - ['alt' => '...'], - ], + 'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]], 'title' => [ - 'attributes' => [ 'class' => 'h5 placeholder-glow' ], - 'tag' => 'div', - 'content' => $this->placeholder(6), + 'attributes' => [ + 'class' => 'h5 placeholder-glow', + ], + 'tag' => 'div', + 'content' => $this->placeholder(6), ], 'text' => [ - 'content' => $this->placeholder(7).$this->placeholder(4).$this->placeholder(4).$this->placeholder(6).$this->placeholder(8), + 'content' => $this->placeholder(7) . + $this->placeholder(4) . + $this->placeholder(4) . + $this->placeholder(6) . + $this->placeholder(8), 'attributes' => ['class' => 'placeholder-glow'], ], $this->placeholder(['column' => 6, 'button' => ['options' => ['variant' => 'primary']]]), ], ['aria-hidden' => 'true'] ); - ``` @@ -105,16 +105,13 @@ echo $this->card( echo $this->placeholder(['column' => 6, 'hidden' => true]); -echo $this->placeholder( - [ - 'column' => 4, - 'hidden' => true, - 'button' => [ - 'options' => ['variant' => 'primary'], - ], - ] -); - +echo $this->placeholder([ + 'column' => 4, + 'hidden' => true, + 'button' => [ + 'options' => ['variant' => 'primary'], + ], +]); ``` @@ -142,7 +139,6 @@ echo $this->placeholder(6); echo $this->placeholder(['class' => 'w-75']); echo $this->placeholder(['style' => 'width: 25%']); - ``` @@ -174,7 +170,6 @@ echo $this->placeholder(12); echo $this->placeholder(['column' => 12, 'size' => 'sm']); echo $this->placeholder(['column' => 12, 'size' => 'xs']); - ``` @@ -200,7 +195,6 @@ echo $this->placeholder(['column' => 12, 'size' => 'xs']); echo $this->placeholder(['column' => 12, 'animation' => 'glow']); echo $this->placeholder(['column' => 12, 'animation' => 'wave']); - ``` diff --git a/website/docs/usage/components/popovers.mdx b/website/docs/usage/components/popovers.mdx index e198e5715..d34d6be15 100644 --- a/website/docs/usage/components/popovers.mdx +++ b/website/docs/usage/components/popovers.mdx @@ -27,18 +27,15 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Click to toggle popover', - 'variant' => 'danger', - 'popover' => "And here's some amazing content. It's very engaging. Right?", - 'size' => 'lg', - ], - 'attributes' => ['title' => 'Popover title'], - ] -); - +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Click to toggle popover', + 'variant' => 'danger', + 'popover' => "And here's some amazing content. It's very engaging. Right?", + 'size' => 'lg', + ], + 'attributes' => ['title' => 'Popover title'], +]); ``` @@ -62,58 +59,49 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Popover on top', - 'popover' => [ - 'placement' => 'top', - 'content' => 'Top popover', - ], +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Popover on top', + 'popover' => [ + 'placement' => 'top', + 'content' => 'Top popover', ], - 'attributes' => ['title' => ''], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Popover on right', - 'popover' => [ - 'placement' => 'right', - 'content' => 'Right popover', - ], + ], + 'attributes' => ['title' => ''], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Popover on right', + 'popover' => [ + 'placement' => 'right', + 'content' => 'Right popover', ], - 'attributes' => ['title' => ''], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Popover on bottom', - 'popover' => [ - 'placement' => 'bottom', - 'content' => 'Bottom popover', - ], + ], + 'attributes' => ['title' => ''], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Popover on bottom', + 'popover' => [ + 'placement' => 'bottom', + 'content' => 'Bottom popover', ], - 'attributes' => ['title' => ''], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Popover on left', - 'popover' => [ - 'placement' => 'left', - 'content' => 'Left popover', - ], + ], + 'attributes' => ['title' => ''], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Popover on left', + 'popover' => [ + 'placement' => 'left', + 'content' => 'Left popover', ], - 'attributes' => ['title' => ''], - ] -); - + ], + 'attributes' => ['title' => ''], +]); ``` @@ -134,26 +122,20 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'name' => 'popover', - 'options' => [ - 'tag' => 'a', - 'label' => 'Dismissible popover', - 'variant' => 'danger', - 'popover' => [ - 'trigger' => 'focus', - 'content' => "And here's some amazing content. It's very engaging. Right?", - ], - 'size' => 'lg', +echo $this->formButton()->renderSpec([ + 'name' => 'popover', + 'options' => [ + 'tag' => 'a', + 'label' => 'Dismissible popover', + 'variant' => 'danger', + 'popover' => [ + 'trigger' => 'focus', + 'content' => "And here's some amazing content. It's very engaging. Right?", ], - 'attributes' => [ - 'title' => 'Dismissible popover', - 'tabindex' => '0', - ], - ] -); - + 'size' => 'lg', + ], + 'attributes' => ['title' => 'Dismissible popover', 'tabindex' => '0'], +]); ``` @@ -174,20 +156,17 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Disabled button', - 'variant' => 'primary', - 'popover' => [ - 'content' => 'Disabled popover', - 'trigger' => 'hover focus', - ], +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Disabled button', + 'variant' => 'primary', + 'popover' => [ + 'content' => 'Disabled popover', + 'trigger' => 'hover focus', ], - 'attributes' => ['disabled' => true], - ] -); - + ], + 'attributes' => ['disabled' => true], +]); ``` diff --git a/website/docs/usage/components/progress.mdx b/website/docs/usage/components/progress.mdx index ae9078c23..6faae23c6 100644 --- a/website/docs/usage/components/progress.mdx +++ b/website/docs/usage/components/progress.mdx @@ -56,7 +56,6 @@ echo $this->progressBar(0, 100, 75); // Display progress bar at 100% echo $this->progressBar(0, 100, 100); - ``` @@ -81,15 +80,12 @@ echo $this->progressBar(0, 100, 100); ```php progressBar( - [ - 'show_label' => true, - 'min' => 0, - 'max' => 100, - 'current' => 25, - ] -); - +echo $this->progressBar([ + 'show_label' => true, + 'min' => 0, + 'max' => 100, + 'current' => 25, +]); ``` @@ -115,24 +111,19 @@ echo $this->progressBar( ```php progressBar( - [ - 'attributes' => ['style' => 'height:1px'], - 'min' => 0, - 'max' => 100, - 'current' => 25, - ] -); - -echo $this->progressBar( - [ - 'attributes' => ['style' => 'height:20px'], - 'min' => 0, - 'max' => 100, - 'current' => 25, - ] -); - +echo $this->progressBar([ + 'attributes' => ['style' => 'height:1px'], + 'min' => 0, + 'max' => 100, + 'current' => 25, +]); + +echo $this->progressBar([ + 'attributes' => ['style' => 'height:20px'], + 'min' => 0, + 'max' => 100, + 'current' => 25, +]); ``` @@ -164,22 +155,21 @@ echo $this->progressBar( ```php 25, - 'info' => 50, - 'warning' => 75, - 'danger' => 100, -] as $variant => $current) { - echo $this->progressBar( - [ - 'variant' => $variant, - 'min' => 0, - 'max' => 100, - 'current' => $current, - ] - ); +foreach ( + [ + 'success' => 25, + 'info' => 50, + 'warning' => 75, + 'danger' => 100, + ] as $variant => $current +) { + echo $this->progressBar([ + 'variant' => $variant, + 'min' => 0, + 'max' => 100, + 'current' => $current, + ]); } - ``` @@ -204,28 +194,11 @@ foreach ([ ```php progressBarGroup( - [ - [ - 'min' => 0, - 'max' => 100, - 'current' => 15, - ], - [ - 'variant' => 'success', - 'min' => 0, - 'max' => 100, - 'current' => 30, - ], - [ - 'variant' => 'info', - 'min' => 0, - 'max' => 100, - 'current' => 20, - ], - ] -); - +echo $this->progressBarGroup([ + ['min' => 0, 'max' => 100, 'current' => 15], + ['variant' => 'success', 'min' => 0, 'max' => 100, 'current' => 30], + ['variant' => 'info', 'min' => 0, 'max' => 100, 'current' => 20], +]); ``` @@ -260,24 +233,23 @@ echo $this->progressBarGroup( ```php 10, - 'success' => 25, - 'info' => 50, - 'warning' => 75, - 'danger' => 100, -] as $variant => $current) { - echo $this->progressBar( - [ - 'striped' => true, - 'variant' => $variant, - 'current' => $current, - 'min' => 0, - 'max' => 100, - ] - ); +foreach ( + [ + null => 10, + 'success' => 25, + 'info' => 50, + 'warning' => 75, + 'danger' => 100, + ] as $variant => $current +) { + echo $this->progressBar([ + 'striped' => true, + 'variant' => $variant, + 'current' => $current, + 'min' => 0, + 'max' => 100, + ]); } - ``` @@ -300,16 +272,13 @@ foreach ([ ```php progressBar( - [ - 'striped' => true, - 'animated' => true, - 'current' => 75, - 'min' => 0, - 'max' => 100, - ] -); - +echo $this->progressBar([ + 'striped' => true, + 'animated' => true, + 'current' => 75, + 'min' => 0, + 'max' => 100, +]); ``` diff --git a/website/docs/usage/components/scrollspy.mdx b/website/docs/usage/components/scrollspy.mdx index c1538042f..85161a9e1 100644 --- a/website/docs/usage/components/scrollspy.mdx +++ b/website/docs/usage/components/scrollspy.mdx @@ -61,18 +61,11 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; echo $this->navigation()->navbar()->render( new \Laminas\Navigation\Navigation( [ + ['label' => 'First', 'uri' => '#scrollspyHeading1', 'active' => true], + ['label' => 'Second', 'uri' => '#scrollspyHeading2'], [ - 'label' => 'First', - 'uri' => '#scrollspyHeading1', - 'active' => true, - ], - [ - 'label' => 'Second', - 'uri' => '#scrollspyHeading2', - ], - [ - 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, - 'label' => 'Dropdown', + 'type' => \TwbsHelper\Navigation\Page\DropdownPage::class, + 'label' => 'Dropdown', 'dropdown' => [ 'items' => [ 'Third' => ['attributes' => ['href' => '#scrollspyHeading3']], @@ -85,32 +78,36 @@ echo $this->navigation()->navbar()->render( ], ), [ - 'brand' => 'Navbar', - 'expand' => false, - 'toggler' => false, - 'collapse' => false, - 'nav' => [ 'pills' => true ], - 'attributes' => [ - 'id' => 'navbar-example2', - 'class' => 'px-3', + 'brand' => 'Navbar', + 'expand' => false, + 'toggler' => false, + 'collapse' => false, + 'nav' => [ + 'pills' => true, ], + 'attributes' => ['id' => 'navbar-example2', 'class' => 'px-3'], ] ); -echo '
'; -foreach ([ - 'First heading', - 'Second heading', - 'Third heading', - 'Fourth heading', - 'Fifth heading', -] as $key => $label) { - echo '

'.$label.'

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'; +echo '
'; +foreach ( + [ + 'First heading', + 'Second heading', + 'Third heading', + 'Fourth heading', + 'Fifth heading' + ] as $key => $label +) { + echo '

' . $label . '

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'; } - echo '
'; - ``` @@ -168,76 +165,102 @@ echo '
'; ```php gridRow( +echo $this->gridRow([ [ - [ - $this->navigation()->navbar()->render( - new \Laminas\Navigation\Navigation( + $this->navigation()->navbar()->render( + new \Laminas\Navigation\Navigation( + [ [ - [ - 'label' => 'Item 1', - 'uri' => '#item-1', - 'active' => true, - 'pages' => [ - [ - 'label' => 'Item 1-1', - 'uri' => '#item-1-1', - 'class' => 'ms-3 my-1', - ], - [ - 'label' => 'Item 1-2', - 'uri' => '#item-1-2', - 'class' => 'ms-3 my-1', - ], - ], - ], - [ - 'label' => 'Item 2', - 'uri' => '#item-2', - ], - [ - 'label' => 'Item 3', - 'uri' => '#item-3', - 'pages' => [ - [ - 'label' => 'Item 3-1', - 'uri' => '#item-3-1', - 'class' => 'ms-3 my-1', - ], - [ - 'label' => 'Item 3-2', - 'uri' => '#item-3-2', - 'class' => 'ms-3 my-1', - ], - ], + 'label' => 'Item 1', + 'uri' => '#item-1', + 'active' => true, + 'pages' => [ + ['label' => 'Item 1-1', 'uri' => '#item-1-1', 'class' => 'ms-3 my-1'], + ['label' => 'Item 1-2', 'uri' => '#item-1-2', 'class' => 'ms-3 my-1'], ], ], - ), - [ - 'brand' => 'Navbar', - 'expand' => false, - 'toggler' => false, - 'collapse' => false, - 'nav' => [ - 'vertical' => true, - 'pills' => true, - 'list' => false, - ], - 'attributes' => [ - 'id' => 'navbar-example3', - 'class' => 'align-items-stretch flex-column p-3', + ['label' => 'Item 2', 'uri' => '#item-2'], + [ + 'label' => 'Item 3', + 'uri' => '#item-3', + 'pages' => [ + ['label' => 'Item 3-1', 'uri' => '#item-3-1', 'class' => 'ms-3 my-1'], + ['label' => 'Item 3-2', 'uri' => '#item-3-2', 'class' => 'ms-3 my-1'], + ], ], - ] + ], ), - ['column' => 4], - ], - [ - '
'.'

Item 1

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'
Item 1-1
'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'
Item 1-2
'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'

Item 2

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'

Item 3

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'
Item 3-1
'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'
Item 3-2
'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'
', - ['column' => 8], - ], + [ + 'brand' => 'Navbar', + 'expand' => false, + 'toggler' => false, + 'collapse' => false, + 'nav' => [ + 'vertical' => true, + 'pills' => true, + 'list' => false, + ], + 'attributes' => ['id' => 'navbar-example3', 'class' => 'align-items-stretch flex-column p-3'], + ] + ), + ['column' => 4], + ], + [ + '
' . + '

Item 1

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '
Item 1-1
' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '
Item 1-2
' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '

Item 2

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '

Item 3

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '
Item 3-1
' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '
Item 3-2
' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '
', + ['column' => 8], ] -); - +]); ``` @@ -279,34 +302,52 @@ echo $this->gridRow( ```php gridRow( +echo $this->gridRow([ [ - [ - $this->listGroup( - [ - 'Item 1' => [ - 'attributes' => ['href' => '#list-item-1'], - 'active' => true, - ], - 'Item 2' => ['attributes' => ['href' => '#list-item-2']], - 'Item 3' => ['attributes' => ['href' => '#list-item-3']], - 'Item 4' => ['attributes' => ['href' => '#list-item-4']], + $this->listGroup([ + 'Item 1' => ['attributes' => ['href' => '#list-item-1'], 'active' => true], + 'Item 2' => ['attributes' => ['href' => '#list-item-2']], + 'Item 3' => ['attributes' => ['href' => '#list-item-3']], + 'Item 4' => ['attributes' => ['href' => '#list-item-4']], - ], - [ - 'type' => 'action', - 'id' => 'list-example', - ] - ), - ['column' => 4], - ], - [ - '
'.'

Item 1

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'

Item 2

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'

Item 3

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'

Item 4

'.'

This is some placeholder content for the scrollspy page. '.'Note that as you scroll down the page, '.'the appropriate navigation link is highlighted. '.'It\'s repeated throughout the component example. '.'We keep adding some more example copy here to emphasize the scrolling and highlighting.

'.PHP_EOL.'
', - ['column' => 8], - ], + ], ['type' => 'action', 'id' => 'list-example']), + ['column' => 4], + ], + [ + '
' . + '

Item 1

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '

Item 2

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '

Item 3

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '

Item 4

' . + '

This is some placeholder content for the scrollspy page. ' . + 'Note that as you scroll down the page, ' . + 'the appropriate navigation link is highlighted. ' . + 'It\'s repeated throughout the component example. ' . + 'We keep adding some more example copy here to emphasize the scrolling and highlighting.

' . + PHP_EOL . + '
', + ['column' => 8], ] -); - +]); ``` diff --git a/website/docs/usage/components/spinners.mdx b/website/docs/usage/components/spinners.mdx index 2c7451e12..14da52aba 100644 --- a/website/docs/usage/components/spinners.mdx +++ b/website/docs/usage/components/spinners.mdx @@ -30,7 +30,6 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; spinner('Loading...'); - ``` @@ -74,24 +73,17 @@ echo $this->spinner('Loading...'); ```php spinner( - [ - 'variant' => $variant, - 'label' => 'Loading...', - ] - ); +foreach ( + [ + 'primary', 'secondary', 'success', 'danger', + 'warning', 'info', 'light', 'dark', + ] as $variant +) { + echo $this->spinner([ + 'variant' => $variant, + 'label' => 'Loading...', + ]); } - ``` @@ -141,27 +133,20 @@ foreach ([ echo $this->spinner(['type' => 'grow', 'label' => 'Loading...']); -echo PHP_EOL.'
'; - -foreach ([ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', -] as $variant) { - echo $this->spinner( - [ - 'variant' => $variant, - 'type' => 'grow', - 'label' => 'Loading...', - ] - ); -} +echo PHP_EOL . '
'; +foreach ( + [ + 'primary', 'secondary', 'success', 'danger', + 'warning', 'info', 'light', 'dark', + ] as $variant +) { + echo $this->spinner([ + 'variant' => $variant, + 'type' => 'grow', + 'label' => 'Loading...', + ]); +} ``` @@ -188,13 +173,10 @@ foreach ([ ```php spinner( - [ - 'margin' => 5, - 'label' => 'Loading...', - ] -); - +echo $this->spinner([ + 'margin' => 5, + 'label' => 'Loading...', +]); ``` @@ -228,23 +210,18 @@ echo $this->spinner( ```php spinner( - [ - 'placement' => 'center', - 'label' => 'Loading...', - ] -); - -echo PHP_EOL.'
'; +echo $this->spinner([ + 'placement' => 'center', + 'label' => 'Loading...', +]); -echo $this->spinner( - [ - 'placement' => 'center', - 'label' => 'Loading...', - 'show_label' => true, - ] -); +echo PHP_EOL . '
'; +echo $this->spinner([ + 'placement' => 'center', + 'label' => 'Loading...', + 'show_label' => true, +]); ``` @@ -269,13 +246,10 @@ echo $this->spinner( ```php spinner( - [ - 'placement' => 'end', - 'label' => 'Loading...', - ] -); - +echo $this->spinner([ + 'placement' => 'end', + 'label' => 'Loading...', +]); ``` @@ -300,13 +274,10 @@ echo $this->spinner( ```php spinner( - [ - 'placement' => 'text-center', - 'label' => 'Loading...', - ] -); - +echo $this->spinner([ + 'placement' => 'text-center', + 'label' => 'Loading...', +]); ``` @@ -339,38 +310,29 @@ echo $this->spinner( ```php spinner( - [ - 'size' => 'sm', - 'label' => 'Loading...', - ] -); - -echo $this->spinner( - [ - 'size' => 'sm', - 'type' => 'grow', - 'label' => 'Loading...', - ] -); - -echo PHP_EOL.'

'; - -echo $this->spinner( - [ - 'attributes' => ['style' => 'width: 3rem; height: 3rem;'], - 'label' => 'Loading...', - ] -); - -echo $this->spinner( - [ - 'attributes' => ['style' => 'width: 3rem; height: 3rem;'], - 'type' => 'grow', - 'label' => 'Loading...', - ] -); - +echo $this->spinner([ + 'size' => 'sm', + 'label' => 'Loading...', +]); + +echo $this->spinner([ + 'size' => 'sm', + 'type' => 'grow', + 'label' => 'Loading...', +]); + +echo PHP_EOL . '

'; + +echo $this->spinner([ + 'attributes' => ['style' => 'width: 3rem; height: 3rem;'], + 'label' => 'Loading...', +]); + +echo $this->spinner([ + 'attributes' => ['style' => 'width: 3rem; height: 3rem;'], + 'type' => 'grow', + 'label' => 'Loading...', +]); ``` @@ -407,54 +369,47 @@ echo $this->spinner( ```php formButton()->renderSpec( - [ - 'options' => [ - 'spinner' => true, - 'label' => 'Loading...', - 'show_label' => false, - 'variant' => 'primary', - ], - 'attributes' => ['disabled' => true], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Loading...', - 'spinner' => true, - 'variant' => 'primary', - ], - 'attributes' => ['disabled' => true], - ] -); - -echo PHP_EOL.'

'; - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'spinner' => [ 'type' => 'grow' ], - 'variant' => 'primary', - 'label' => 'Loading...', - 'show_label' => false, - ], - 'attributes' => ['disabled' => true], - ] -); - -echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Loading...', - 'spinner' => ['type' => 'grow'], - 'variant' => 'primary', +echo $this->formButton()->renderSpec([ + 'options' => [ + 'spinner' => true, + 'label' => 'Loading...', + 'show_label' => false, + 'variant' => 'primary', + ], + 'attributes' => ['disabled' => true], +]); + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Loading...', + 'spinner' => true, + 'variant' => 'primary', + ], + 'attributes' => ['disabled' => true], +]); + +echo PHP_EOL . '

'; + +echo $this->formButton()->renderSpec([ + 'options' => [ + 'spinner' => [ + 'type' => 'grow', ], - 'attributes' => ['disabled' => true], - ] -); + 'variant' => 'primary', + 'label' => 'Loading...', + 'show_label' => false, + ], + 'attributes' => ['disabled' => true], +]); +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Loading...', + 'spinner' => ['type' => 'grow'], + 'variant' => 'primary', + ], + 'attributes' => ['disabled' => true], +]); ``` diff --git a/website/docs/usage/components/toasts.mdx b/website/docs/usage/components/toasts.mdx index 4bde0c86b..6f6cfb986 100644 --- a/website/docs/usage/components/toasts.mdx +++ b/website/docs/usage/components/toasts.mdx @@ -41,25 +41,19 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php toast( - [ - 'fade' => true, - 'show' => true, - 'header' => [ - 'image' => [ - '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], - ], - 'title' => 'Bootstrap', - 'subtitle' => '11 mins ago', +echo $this->toast([ + 'fade' => true, + 'show' => true, + 'header' => [ + 'image' => [ + '/twbs-helper-module/img/docs/rounded-blue.svg', + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'body' => 'Hello, world! This is a toast message.', - ] -); - + 'title' => 'Bootstrap', + 'subtitle' => '11 mins ago', + ], + 'body' => 'Hello, world! This is a toast message.', +]); ``` @@ -91,35 +85,29 @@ echo $this->toast( ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Show live toast', - 'variant' => 'primary', - ], - 'attributes' => [ 'id' => 'liveToastBtn' ], +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Show live toast', + 'variant' => 'primary', + ], + 'attributes' => [ + 'id' => 'liveToastBtn', ] -); - -echo $this->toast( - [ - 'placement' => 'bottom-right', - 'header' => [ - 'image' => [ - '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], - ], - 'title' => 'Bootstrap', - 'subtitle' => '11 mins ago', +]); + +echo $this->toast([ + 'placement' => 'bottom-right', + 'header' => [ + 'image' => [ + '/twbs-helper-module/img/docs/rounded-blue.svg', + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'body' => 'Hello, world! This is a toast message.', - 'attributes' => ['id' => 'liveToast'], - ] -); - + 'title' => 'Bootstrap', + 'subtitle' => '11 mins ago', + ], + 'body' => 'Hello, world! This is a toast message.', + 'attributes' => ['id' => 'liveToast'], +]); ``` @@ -152,27 +140,21 @@ echo $this->toast( echo '
'; -echo $this->toast( - [ - 'fade' => true, - 'show' => true, - 'header' => [ - 'image' => [ - '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], - ], - 'title' => 'Bootstrap', - 'subtitle' => '11 mins ago', +echo $this->toast([ + 'fade' => true, + 'show' => true, + 'header' => [ + 'image' => [ + '/twbs-helper-module/img/docs/rounded-blue.svg', + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'body' => 'Hello, world! This is a toast message.', - ] -); + 'title' => 'Bootstrap', + 'subtitle' => '11 mins ago', + ], + 'body' => 'Hello, world! This is a toast message.', +]); echo '
'; - ``` @@ -216,43 +198,33 @@ echo ''; ```php toastStack( +echo $this->toastStack([ [ - [ - 'fade' => true, - 'show' => true, - 'header' => [ - 'image' => [ - '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], - ], - 'title' => 'Bootstrap', - 'subtitle' => 'just now', + 'fade' => true, + 'show' => true, + 'header' => [ + 'image' => [ + '/twbs-helper-module/img/docs/rounded-blue.svg', + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'body' => 'See? Just like this.', + 'title' => 'Bootstrap', + 'subtitle' => 'just now', ], - [ - 'fade' => true, - 'show' => true, - 'header' => [ - 'image' => [ - '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], - ], - 'title' => 'Bootstrap', - 'subtitle' => '2 seconds ago', + 'body' => 'See? Just like this.', + ], [ + 'fade' => true, + 'show' => true, + 'header' => [ + 'image' => [ + '/twbs-helper-module/img/docs/rounded-blue.svg', + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'body' => 'Heads up, toasts will stack automatically', + 'title' => 'Bootstrap', + 'subtitle' => '2 seconds ago', ], + 'body' => 'Heads up, toasts will stack automatically', ] -); - +]); ``` @@ -289,41 +261,38 @@ echo $this->toastStack( ```php toast( - [ - 'fade' => true, - 'show' => true, - 'body' => 'Hello, world! This is a toast message.', - ] -); - -echo $this->toast( - [ - 'fade' => true, - 'show' => true, - 'close' => false, - 'body' => [ - 'content' => 'Hello, world! This is a toast message.', - 'buttons' => [ - [ - 'options' => [ - 'variant' => 'primary', - 'size' => 'sm', - 'label' => 'Take action', - ], +echo $this->toast([ + 'fade' => true, + 'show' => true, + 'body' => 'Hello, world! This is a toast message.', +]); + +echo $this->toast([ + 'fade' => true, + 'show' => true, + 'close' => false, + 'body' => [ + 'content' => 'Hello, world! This is a toast message.', + 'buttons' => [ + [ + 'options' => [ + 'variant' => 'primary', + 'size' => 'sm', + 'label' => 'Take action', ], - [ - 'options' => [ - 'size' => 'sm', - 'label' => 'Close', - ], - 'attributes' => [ 'data-bs-dismiss' => 'toast' ], + ], + [ + 'options' => [ + 'size' => 'sm', + 'label' => 'Close' + ], + 'attributes' => [ + 'data-bs-dismiss' => 'toast', ], ], - ], - ] -); - + ] + ], +]); ``` @@ -351,16 +320,15 @@ echo $this->toast( ```php toast( - [ - 'fade' => true, - 'show' => true, - 'body' => 'Hello, world! This is a toast message.', - 'close' => ['attributes' => ['class' => 'btn-close-white']], - 'attributes' => [ 'class' => 'text-white bg-primary border-0' ], - ] -); - +echo $this->toast([ + 'fade' => true, + 'show' => true, + 'body' => 'Hello, world! This is a toast message.', + 'close' => ['attributes' => ['class' => 'btn-close-white']], + 'attributes' => [ + 'class' => 'text-white bg-primary border-0', + ], +]); ``` @@ -530,116 +498,108 @@ echo $this->toast( '; -foreach ([ - 'top-left', - 'top-center', - 'top-right', - 'middle-left', - 'middle-center', - 'middle-right', - 'bottom-left', - 'bottom-center', - 'bottom-right', -] as $placement) { +foreach ( + [ + 'top-left', + 'top-center', + 'top-right', + 'middle-left', + 'middle-center', + 'middle-right', + 'bottom-left', + 'bottom-center', + 'bottom-right', + ] as $placement +) { echo $this->toastStack( [ [ - 'fade' => true, - 'show' => true, - 'close' => false, + 'fade' => true, + 'show' => true, + 'close' => false, 'header' => [ - 'image' => [ + 'image' => [ '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'title' => 'Bootstrap', + 'title' => 'Bootstrap', 'subtitle' => '11 mins ago', ], - 'body' => 'Hello, world! This is a toast message.', + 'body' => 'Hello, world! This is a toast message.', ], ], [ - 'id' => 'toastPlacement', + 'id' => 'toastPlacement', 'placement' => $placement, ] ); -}//end foreach +} echo ''; // For systems that generate more notifications, consider using a wrapping element so they can easily stack. + echo '
'; echo $this->toastStack( [ [ - 'fade' => true, - 'show' => true, + 'fade' => true, + 'show' => true, 'header' => [ - 'image' => [ + 'image' => [ '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'title' => 'Bootstrap', + 'title' => 'Bootstrap', 'subtitle' => 'just now', ], - 'body' => 'See? Just like this.', + 'body' => 'See? Just like this.', ], [ - 'fade' => true, - 'show' => true, + 'fade' => true, + 'show' => true, 'header' => [ - 'image' => [ + 'image' => [ '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'title' => 'Bootstrap', + 'title' => 'Bootstrap', 'subtitle' => '2 seconds ago', ], - 'body' => 'Heads up, toasts will stack automatically', + 'body' => 'Heads up, toasts will stack automatically', ], ], [ 'placement' => 'top-right', - 'class' => 'position-absolute', + 'class' => 'position-absolute', ] ); echo '
'; // You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically. -echo '
'; + +echo '
'; echo $this->toast( [ - 'fade' => true, - 'show' => true, + 'fade' => true, + 'show' => true, 'header' => [ - 'image' => [ + 'image' => [ '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'title' => 'Bootstrap', + 'title' => 'Bootstrap', 'subtitle' => '11 mins ago', ], - 'body' => 'Hello, world! This is a toast message.', + 'body' => 'Hello, world! This is a toast message.', ] ); echo '
'; - ``` @@ -670,26 +630,20 @@ echo '
'; ```php toast( - [ - 'fade' => true, - 'show' => true, - 'autohide' => false, - 'header' => [ - 'image' => [ - '/twbs-helper-module/img/docs/rounded-blue.svg', - [ - 'alt' => '...', - 'class' => 'rounded me-2', - ], - ], - 'title' => 'Bootstrap', - 'subtitle' => '11 mins ago', +echo $this->toast([ + 'fade' => true, + 'show' => true, + 'autohide' => false, + 'header' => [ + 'image' => [ + '/twbs-helper-module/img/docs/rounded-blue.svg', + ['alt' => '...', 'class' => 'rounded me-2'], ], - 'body' => 'Hello, world! This is a toast message.', - ] -); - + 'title' => 'Bootstrap', + 'subtitle' => '11 mins ago', + ], + 'body' => 'Hello, world! This is a toast message.', +]); ``` diff --git a/website/docs/usage/components/tooltips.mdx b/website/docs/usage/components/tooltips.mdx index 724e2897a..fed059fa6 100644 --- a/website/docs/usage/components/tooltips.mdx +++ b/website/docs/usage/components/tooltips.mdx @@ -31,35 +31,32 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php 'Tooltip on top', - 'right' => 'Tooltip on right', - 'bottom' => 'Tooltip on bottom', - 'left' => 'Tooltip on left', -] as $placement => $label) { - echo $this->formButton()->renderSpec( - [ - 'options' => [ - 'label' => $label, - 'tooltip' => [ - 'placement' => $placement, - 'content' => $label, - ], - ], - ] - ); -} - -// With custom HTML added: -echo $this->formButton()->renderSpec( +foreach ( [ + 'top' => 'Tooltip on top', + 'right' => 'Tooltip on right', + 'bottom' => 'Tooltip on bottom', + 'left' => 'Tooltip on left', + ] as $placement => $label +) { + echo $this->formButton()->renderSpec([ 'options' => [ - 'label' => 'Tooltip with HTML', - 'tooltip' => 'Tooltip with HTML', + 'label' => $label, + 'tooltip' => [ + 'placement' => $placement, + 'content' => $label, + ], ], - ] -); + ]); +} +// With custom HTML added: +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Tooltip with HTML', + 'tooltip' => 'Tooltip with HTML', + ], +]); ``` @@ -84,17 +81,14 @@ echo $this->formButton()->renderSpec( ```php formButton()->renderSpec( - [ - 'options' => [ - 'label' => 'Disabled button', - 'tooltip' => 'Disabled tooltip', - 'variant' => 'primary', - ], - 'attributes' => ['disabled' => true], - ] -); - +echo $this->formButton()->renderSpec([ + 'options' => [ + 'label' => 'Disabled button', + 'tooltip' => 'Disabled tooltip', + 'variant' => 'primary', + ], + 'attributes' => ['disabled' => true], +]); ``` diff --git a/website/docs/usage/content/figures.mdx b/website/docs/usage/content/figures.mdx index 033c5facb..ab9b98170 100644 --- a/website/docs/usage/content/figures.mdx +++ b/website/docs/usage/content/figures.mdx @@ -33,12 +33,11 @@ echo $this->figure( 'A caption for the above image.', [], [ - 'fluid' => true, + 'fluid' => true, 'rounded' => true, - 'alt' => '...', + 'alt' => '...', ] ); - ``` @@ -65,13 +64,12 @@ echo $this->figure( 'A caption for the above image.', [], [ - 'fluid' => true, + 'fluid' => true, 'rounded' => true, - 'alt' => '...', + 'alt' => '...', ], ['class' => 'text-end'] ); - ``` diff --git a/website/docs/usage/content/images.mdx b/website/docs/usage/content/images.mdx index 7f6bab285..e63ce2e52 100644 --- a/website/docs/usage/content/images.mdx +++ b/website/docs/usage/content/images.mdx @@ -27,8 +27,7 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php image('/twbs-helper-module/img/docs/responsive.svg', ['fluid' => true, 'alt' => '...']); - +echo $this->image('/twbs-helper-module/img/docs/responsive.svg', ['fluid' => true, 'alt' => '...',]); ``` @@ -49,8 +48,7 @@ echo $this->image('/twbs-helper-module/img/docs/responsive.svg', ['fluid' => tru ```php image('/twbs-helper-module/img/docs/200x200.svg', ['thumbnail' => true, 'alt' => '...']); - +echo $this->image('/twbs-helper-module/img/docs/200x200.svg', ['thumbnail' => true, 'alt' => '...',]); ``` @@ -76,24 +74,15 @@ echo $this->image('/twbs-helper-module/img/docs/200x200.svg', ['thumbnail' => tr echo $this->image( '/twbs-helper-module/img/docs/200x200.svg', - [ - 'rounded' => true, - 'alt' => '...', - 'class' => 'float-start', - ] + ['rounded' => true, 'alt' => '...', 'class' => 'float-start'] ); echo PHP_EOL; echo $this->image( '/twbs-helper-module/img/docs/200x200.svg', - [ - 'rounded' => true, - 'alt' => '...', - 'class' => 'float-end', - ] + ['rounded' => true, 'alt' => '...', 'class' => 'float-end'] ); - ``` @@ -114,13 +103,8 @@ echo $this->image( echo $this->image( '/twbs-helper-module/img/docs/200x200.svg', - [ - 'rounded' => true, - 'alt' => '...', - 'class' => 'mx-auto d-block', - ] + ['rounded' => true, 'alt' => '...', 'class' => 'mx-auto d-block'] ); - ``` @@ -143,13 +127,8 @@ echo $this->image( echo $this->image( '/twbs-helper-module/img/docs/200x200.svg', - [ - 'rounded' => true, - 'centered' => true, - 'alt' => '...', - ] + ['rounded' => true, 'centered' => true, 'alt' => '...'] ); - ``` @@ -173,16 +152,12 @@ echo $this->image( ```php image( - '/twbs-helper-module/img/docs/200x200.svg', - [ - 'thumbnail' => true, - 'fluid' => true, - 'alt' => '...', - 'sources' => ['/twbs-helper-module/img/docs/200x200.svg' => 'image/svg+xml'], - ] -); - +echo $this->image('/twbs-helper-module/img/docs/200x200.svg', [ + 'thumbnail' => true, + 'fluid' => true, + 'alt' => '...', + 'sources' => ['/twbs-helper-module/img/docs/200x200.svg' => 'image/svg+xml'], +]); ``` diff --git a/website/docs/usage/content/tables.mdx b/website/docs/usage/content/tables.mdx index 2a3af5bdf..78670e129 100644 --- a/website/docs/usage/content/tables.mdx +++ b/website/docs/usage/content/tables.mdx @@ -55,39 +55,14 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php table( - [ - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - +echo $this->table([ + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); ``` @@ -164,87 +139,44 @@ echo $this->table( table( - [ - 'head' => [ - 'Class', - 'Heading', - 'Heading', +echo $this->table([ + 'head' => ['Class', 'Heading', 'Heading'], + 'body' => [ + ['Default', 'Cell', 'Cell'], + [ + 'variant' => 'primary', + 'cells' => ['Primary', 'Cell', 'Cell'], ], - 'body' => [ - [ - 'Default', - 'Cell', - 'Cell', - ], - [ - 'variant' => 'primary', - 'cells' => [ - 'Primary', - 'Cell', - 'Cell', - ], - ], - [ - 'variant' => 'secondary', - 'cells' => [ - 'Secondary', - 'Cell', - 'Cell', - ], - ], - [ - 'variant' => 'success', - 'cells' => [ - 'Success', - 'Cell', - 'Cell', - ], - ], - [ - 'variant' => 'danger', - 'cells' => [ - 'Danger', - 'Cell', - 'Cell', - ], - ], - [ - 'variant' => 'warning', - 'cells' => [ - 'Warning', - 'Cell', - 'Cell', - ], - ], - [ - 'variant' => 'info', - 'cells' => [ - 'Info', - 'Cell', - 'Cell', - ], - ], - [ - 'variant' => 'light', - 'cells' => [ - 'Light', - 'Cell', - 'Cell', - ], - ], - [ - 'variant' => 'dark', - 'cells' => [ - 'Dark', - 'Cell', - 'Cell', - ], - ], + [ + 'variant' => 'secondary', + 'cells' => ['Secondary', 'Cell', 'Cell'], ], - ] -); - + [ + 'variant' => 'success', + 'cells' => ['Success', 'Cell', 'Cell'], + ], + [ + 'variant' => 'danger', + 'cells' => ['Danger', 'Cell', 'Cell'], + ], + [ + 'variant' => 'warning', + 'cells' => ['Warning', 'Cell', 'Cell'], + ], + [ + 'variant' => 'info', + 'cells' => ['Info', 'Cell', 'Cell'], + ], + [ + 'variant' => 'light', + 'cells' => ['Light', 'Cell', 'Cell'], + ], + [ + 'variant' => 'dark', + 'cells' => ['Dark', 'Cell', 'Cell'], + ], + ], +]); ``` @@ -358,115 +290,43 @@ echo $this->table( . -echo $this->table( - [ - 'striped' => true, - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; +echo $this->table([ + 'striped' => true, + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); + +echo PHP_EOL . '
'; // This option can also be added to table variants -echo $this->table( - [ - 'striped' => true, - 'variant' => 'dark', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; - -echo $this->table( - [ - 'striped' => true, - 'variant' => 'success', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); +echo $this->table([ + 'striped' => true, + 'variant' => 'dark', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); + +echo PHP_EOL . '
'; + +echo $this->table([ + 'striped' => true, + 'variant' => 'success', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); ``` @@ -576,115 +436,43 @@ echo $this->table( . -echo $this->table( - [ - 'hover' => true, - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; - -echo $this->table( - [ - 'variant' => 'dark', - 'hover' => true, - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; +echo $this->table([ + 'hover' => true, + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); + +echo PHP_EOL . '
'; + +echo $this->table([ + 'variant' => 'dark', + 'hover' => true, + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); + +echo PHP_EOL . '
'; // This option can also be combined with the striped option -echo $this->table( - [ - 'hover' => true, - 'striped' => true, - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); +echo $this->table([ + 'hover' => true, + 'striped' => true, + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); ``` @@ -764,83 +552,34 @@ echo $this->table( table( - [ - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - 'active' => true, - 'cells' => [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'active' => true, - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], +echo $this->table([ + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['active' => true, 'cells' => ['1', 'Mark', 'Otto', '@mdo']], + ['2', 'Jacob', 'Thornton', '@fat'], + [ + '3', + ['data' => 'Larry the Bird', 'active' => true, 'attributes' => ['colspan' => 2]], + '@twitter' ], - ] -); + ], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; -echo $this->table( - [ - 'variant' => 'dark', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - 'active' => true, - 'cells' => [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'active' => true, - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], +echo $this->table([ + 'variant' => 'dark', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['active' => true, 'cells' => ['1', 'Mark', 'Otto', '@mdo']], + ['2', 'Jacob', 'Thornton', '@fat'], + [ + '3', + ['data' => 'Larry the Bird', 'active' => true, 'attributes' => ['colspan' => 2]], + '@twitter' ], - ] -); - + ], +]); ``` @@ -924,77 +663,28 @@ echo $this->table( table( - [ - 'bordered' => true, - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; +echo $this->table([ + 'bordered' => true, + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); + +echo PHP_EOL . '
'; // "bordered" option can be a variant to change colors -echo $this->table( - [ - 'bordered' => 'primary', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - +echo $this->table([ + 'bordered' => 'primary', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); ``` @@ -1075,78 +765,29 @@ echo $this->table( // Add "borderless" option for a table without borders -echo $this->table( - [ - 'borderless' => true, - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; +echo $this->table([ + 'borderless' => true, + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); + +echo PHP_EOL . '
'; // This option can also be combined with the "variant" option -echo $this->table( - [ - 'borderless' => true, - 'variant' => 'dark', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - +echo $this->table([ + 'borderless' => true, + 'variant' => 'dark', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); ``` @@ -1226,78 +867,29 @@ echo $this->table( table( - [ - 'size' => 'sm', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; +echo $this->table([ + 'size' => 'sm', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); + +echo PHP_EOL . '
'; // This option can also be combined with the "variant" option -echo $this->table( - [ - 'size' => 'sm', - 'variant' => 'dark', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - +echo $this->table([ + 'size' => 'sm', + 'variant' => 'dark', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); ``` @@ -1350,67 +942,55 @@ echo $this->table( table( - [ - 'responsive' => true, - 'align' => 'middle', - 'head' => [ - [ - 'data' => 'Heading 1', - 'attributes' => ['class' => 'w-25'], - ], - [ - 'data' => 'Heading 2', - 'attributes' => ['class' => 'w-25'], - ], - [ - 'data' => 'Heading 3', - 'attributes' => ['class' => 'w-25'], - ], +echo $this->table([ + 'responsive' => true, + 'align' => 'middle', + 'head' => [ + ['data' => 'Heading 1', 'attributes' => ['class' => 'w-25']], + ['data' => 'Heading 2', 'attributes' => ['class' => 'w-25']], + ['data' => 'Heading 3', 'attributes' => ['class' => 'w-25']], + ['data' => 'Heading 4', 'attributes' => ['class' => 'w-25']], + ], + 'body' => [ + [ [ - 'data' => 'Heading 4', - 'attributes' => ['class' => 'w-25'], + 'type' => \TwbsHelper\View\Helper\Table::TABLE_DATA, + 'attributes' => ['scope' => null], + 'data' => 'This cell inherits vertical-align: middle; from the table' ], + 'This cell inherits vertical-align: middle; from the table', + 'This cell inherits vertical-align: middle; from the table', + 'This here is some placeholder text, intended to take up quite a bit of vertical space, ' . + 'to demonstrate how the vertical alignment works in the preceding cells.' ], - 'body' => [ + [ + 'align' => 'bottom', [ - [ - 'type' => \TwbsHelper\View\Helper\Table::TABLE_DATA, - 'attributes' => ['scope' => null], - 'data' => 'This cell inherits vertical-align: middle; from the table', - ], - 'This cell inherits vertical-align: middle; from the table', - 'This cell inherits vertical-align: middle; from the table', - 'This here is some placeholder text, intended to take up quite a bit of vertical space, '.'to demonstrate how the vertical alignment works in the preceding cells.', + 'type' => \TwbsHelper\View\Helper\Table::TABLE_DATA, + 'attributes' => ['scope' => null], + 'data' => 'This cell inherits vertical-align: bottom; from the table row' ], + 'This cell inherits vertical-align: bottom; from the table row', + 'This cell inherits vertical-align: bottom; from the table row', + 'This here is some placeholder text, intended to take up quite a bit of vertical space, ' . + 'to demonstrate how the vertical alignment works in the preceding cells.' + ], + [ [ - 'align' => 'bottom', - [ - 'type' => \TwbsHelper\View\Helper\Table::TABLE_DATA, - 'attributes' => ['scope' => null], - 'data' => 'This cell inherits vertical-align: bottom; from the table row', - ], - 'This cell inherits vertical-align: bottom; from the table row', - 'This cell inherits vertical-align: bottom; from the table row', - 'This here is some placeholder text, intended to take up quite a bit of vertical space, '.'to demonstrate how the vertical alignment works in the preceding cells.' + 'type' => \TwbsHelper\View\Helper\Table::TABLE_DATA, + 'attributes' => ['scope' => null], + 'data' => 'This cell inherits vertical-align: middle; from the table' ], + 'This cell inherits vertical-align: middle; from the table', [ - [ - 'type' => \TwbsHelper\View\Helper\Table::TABLE_DATA, - 'attributes' => ['scope' => null], - 'data' => 'This cell inherits vertical-align: middle; from the table', - ], - 'This cell inherits vertical-align: middle; from the table', - [ - 'align' => 'top', - 'data' => 'This cell is aligned to the top.', - ], - 'This here is some placeholder text, intended to take up quite a bit of vertical space, '.'to demonstrate how the vertical alignment works in the preceding cells.', + 'align' => 'top', + 'data' => 'This cell is aligned to the top.', ], + 'This here is some placeholder text, intended to take up quite a bit of vertical space, ' . + 'to demonstrate how the vertical alignment works in the preceding cells.' ], - ] -); - + ], +]); ``` @@ -1484,62 +1064,26 @@ echo $this->table( ```php table( - [ - 'striped' => true, - 'bordered' => true, - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - [ - 'data' => [ - 'head' => [ - 'Header', - 'Header', - 'Header', - ], - 'body' => [ - [ - 'A', - 'First', - 'Last', - ], - [ - 'B', - 'First', - 'Last', - ], - [ - 'C', - 'First', - 'Last', - ], - ], - ], - 'attributes' => ['colspan' => 4], +echo $this->table([ + 'striped' => true, + 'bordered' => true, + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + [[ + 'data' => [ + 'head' => ['Header', 'Header', 'Header'], + 'body' => [ + ['A', 'First', 'Last'], + ['B', 'First', 'Last'], + ['C', 'First', 'Last'], ], ], - [ - '3', - 'Larry', - 'the Bird', - '@twitter', - ], - ], - ] -); - + 'attributes' => ['colspan' => 4] + ]], + ['3', 'Larry', 'the Bird', '@twitter'], + ], +]); ``` @@ -1625,76 +1169,31 @@ echo $this->table( s appear light or dark gray. -echo $this->table( - [ - 'head' => [ - 'variant' => 'light', - 'cells' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - 'Larry', - 'the Bird', - '@twitter', - ], - ], - ] -); - -echo PHP_EOL.'
'; - -echo $this->table( - [ - 'head' => [ - 'variant' => 'dark', - 'cells' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - 'Larry', - 'the Bird', - '@twitter', - ], - ], - ] -); - +echo $this->table([ + 'head' => [ + 'variant' => 'light', + 'cells' => ['#', 'First', 'Last', 'Handle'], + ], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', 'Larry', 'the Bird', '@twitter'], + ], +]); + +echo PHP_EOL . '
'; + +echo $this->table([ + 'head' => [ + 'variant' => 'dark', + 'cells' => ['#', 'First', 'Last', 'Handle'], + ], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', 'Larry', 'the Bird', '@twitter'], + ], +]); ``` @@ -1752,46 +1251,18 @@ echo $this->table( ```php table( - [ - 'head' => [ - 'variant' => 'light', - 'cells' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - 'Larry', - 'the Bird', - '@twitter', - ], - ], - 'footer' => [ - 'Footer', - 'Footer', - 'Footer', - 'Footer', - ], - ] -); - +echo $this->table([ + 'head' => [ + 'variant' => 'light', + 'cells' => ['#', 'First', 'Last', 'Handle'], + ], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', 'Larry', 'the Bird', '@twitter'], + ], + 'footer' => ['Footer', 'Footer', 'Footer', 'Footer'], +]); ``` @@ -1872,77 +1343,28 @@ echo $this->table( ```php table( - [ - 'caption' => 'List of users', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); +echo $this->table([ + 'caption' => 'List of users', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // You can also put the on the top of the table with the "captionTop" option -echo $this->table( - [ - 'captionTop' => 'List of users', - 'head' => [ - '#', - 'First', - 'Last', - 'Handle', - ], - 'body' => [ - [ - '1', - 'Mark', - 'Otto', - '@mdo', - ], - [ - '2', - 'Jacob', - 'Thornton', - '@fat', - ], - [ - '3', - [ - 'data' => 'Larry the Bird', - 'attributes' => ['colspan' => 2], - ], - '@twitter', - ], - ], - ] -); - +echo $this->table([ + 'captionTop' => 'List of users', + 'head' => ['#', 'First', 'Last', 'Handle'], + 'body' => [ + ['1', 'Mark', 'Otto', '@mdo'], + ['2', 'Jacob', 'Thornton', '@fat'], + ['3', ['data' => 'Larry the Bird', 'attributes' => ['colspan' => 2]], '@twitter'], + ], +]); ``` @@ -2022,62 +1444,18 @@ echo $this->table( ```php table( - [ - 'responsive' => true, - 'head' => [ - '#', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - ], - 'body' => [ - [ - '1', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - ], - [ - '2', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - ], - [ - '3', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - ], - ], - ] -); - +echo $this->table([ + 'responsive' => true, + 'head' => [ + '#', 'Heading', 'Heading', 'Heading', 'Heading', + 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', + ], + 'body' => [ + ['1', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell'], + ['2', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell'], + ['3', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell'], + ], +]); ``` @@ -2383,66 +1761,22 @@ echo $this->table( foreach ([true, 'sm', 'md', 'lg', 'xl'] as $key => $size) { if ($key) { - echo PHP_EOL.'
'; + echo PHP_EOL . '
'; } - echo $this->table( - [ - 'responsive' => $size, - 'head' => [ - '#', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - 'Heading', - ], - 'body' => [ - [ - '1', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - ], - [ - '2', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - ], - [ - '3', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - 'Cell', - ], - ], - ] - ); -}//end foreach - + echo $this->table([ + 'responsive' => $size, + 'head' => [ + '#', 'Heading', 'Heading', 'Heading', 'Heading', + 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', + ], + 'body' => [ + ['1', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell'], + ['2', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell'], + ['3', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell', 'Cell'], + ], + ]); +} ``` diff --git a/website/docs/usage/content/typography.mdx b/website/docs/usage/content/typography.mdx index dd8fea1cd..5cbf06675 100644 --- a/website/docs/usage/content/typography.mdx +++ b/website/docs/usage/content/typography.mdx @@ -28,7 +28,6 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; lead('This is a lead paragraph. It stands out from regular paragraphs.'); - ``` @@ -51,13 +50,12 @@ echo $this->lead('This is a lead paragraph. It stands out from regular paragraph '.$this->abbreviation('attr', 'attribute').'

'; +echo '

' . $this->abbreviation('attr', 'attribute') . '

'; echo PHP_EOL; // Second abbreviation -echo '

'.$this->abbreviation('HTML', 'HyperText Markup Language', true).'

'; - +echo '

' . $this->abbreviation('HTML', 'HyperText Markup Language', true) . '

'; ``` @@ -83,7 +81,6 @@ echo '

'.$this->abbreviation('HTML', 'HyperText Markup Language', true).'

' echo $this->blockquote( 'A well-known quote, contained in a blockquote element.' ); - ``` @@ -110,12 +107,11 @@ echo $this->blockquote( blockquote( -// Content + // Content 'A well-known quote, contained in a blockquote element.', // Footer content 'Someone famous in Source Title' ); - ``` @@ -149,7 +145,7 @@ echo $this->blockquote( // Center echo $this->blockquote( -// Content + // Content 'A well-known quote, contained in a blockquote element.', // Footer content 'Someone famous in Source Title', @@ -157,14 +153,14 @@ echo $this->blockquote( [], [], // Class for figure wrapper - ['class' => 'text-center'], + ["class" => "text-center"], ); echo PHP_EOL; // Right echo $this->blockquote( -// Content + // Content 'A well-known quote, contained in a blockquote element.', // Footer content 'Someone famous in Source Title', @@ -174,7 +170,6 @@ echo $this->blockquote( // Class for figure wrapper ['class' => 'text-end'], ); - ``` @@ -214,7 +209,7 @@ echo $this->blockquote( htmlList( -// List items + // List items [ 'This is a list.', 'It appears completely unstyled.', @@ -230,7 +225,6 @@ echo $this->htmlList( // Set "unstyled" flag ['unstyled' => true], ); - ``` @@ -256,16 +250,11 @@ echo $this->htmlList( htmlList( -// List items - [ - 'This is a list item.', - 'And another one.', - 'But they\'re displayed inline.', - ], + // List items + ['This is a list item.', 'And another one.', 'But they\'re displayed inline.'], // Set "inline" flag ['inline' => true], ); - ``` @@ -307,20 +296,26 @@ echo $this->htmlList( echo $this->descriptionList( [ - 'Description lists' => 'A description list is perfect for defining terms.', - 'Term' => '

Definition for the term.

'.'

And some more placeholder definition text.

', - 'Another term' => 'This definition is short, so no extra paragraphs or anything.', + 'Description lists' => 'A description list is perfect for defining terms.', + 'Term' => '

Definition for the term.

' . + '

And some more placeholder definition text.

', + 'Another term' => 'This definition is short, so no extra paragraphs or anything.', 'Truncated term is truncated' => [ - 'term' => [ 'class' => 'text-truncate' ], + 'term' => [ + 'class' => 'text-truncate', + ], 'detail' => 'This can be useful when space is tight. Adds an ellipsis at the end.', ], - 'Nesting' => [ + 'Nesting' => [ 'detail' => [ 'data' => [ 'Nested definition list' => [ - 'term' => [ 'column' => 'sm-4' ], + 'term' => [ + 'column' => 'sm-4', + ], 'detail' => [ - 'data' => 'I heard you like definition lists. '.'Let me put a definition list inside your definition list.', + 'data' => 'I heard you like definition lists. ' . + 'Let me put a definition list inside your definition list.', 'column' => 'sm-8', ], ], @@ -329,7 +324,6 @@ echo $this->descriptionList( ], ], ); - ``` diff --git a/website/docs/usage/forms/checks-and-radios.mdx b/website/docs/usage/forms/checks-and-radios.mdx index 249360398..becf511c2 100644 --- a/website/docs/usage/forms/checks-and-radios.mdx +++ b/website/docs/usage/forms/checks-and-radios.mdx @@ -37,40 +37,33 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); // Default checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'default-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Default checkbox', - 'form_group' => false, - ], - 'attributes' => [ 'id' => 'flexCheckDefault' ], - ] - ) -); - -echo PHP_EOL; +echo $this->formRow($factory->create([ + 'name' => 'default-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Default checkbox', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexCheckDefault', + ], +])); + +echo PHP_EOL; // Checked checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'checked-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Checked checkbox', - 'form_group' => false, - ], - 'attributes' => [ - 'id' => 'flexCheckChecked', - 'checked' => true, - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'checked-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Checked checkbox', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexCheckChecked', + 'checked' => true, + ], +])); ``` @@ -96,22 +89,19 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'indeterminate-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Indeterminate checkbox', - 'use_hidden_element' => false, - 'form_group' => false, - 'checked_value' => '', - ], - 'attributes' => [ 'id' => 'flexCheckIndeterminate' ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'indeterminate-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Indeterminate checkbox', + 'use_hidden_element' => false, + 'form_group' => false, + 'checked_value' => "", + ], + 'attributes' => [ + 'id' => 'flexCheckIndeterminate', + ], +])); ``` @@ -142,44 +132,35 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Disabled checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'default-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Disabled checkbox', - 'form_group' => false, - ], - 'attributes' => [ - 'id' => 'flexCheckDisabled', - 'disabled' => true, - ], - ] - ) -); - -echo PHP_EOL; +echo $this->formRow($factory->create([ + 'name' => 'default-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Disabled checkbox', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexCheckDisabled', + 'disabled' => true, + ], +])); + +echo PHP_EOL; // Disabled checked checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'checked-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Disabled checked checkbox', - 'form_group' => false, - ], - 'attributes' => [ - 'id' => 'flexCheckCheckedDisabled', - 'checked' => true, - 'disabled' => true, - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'checked-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Disabled checked checkbox', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexCheckCheckedDisabled', + 'checked' => true, + 'disabled' => true, + ], +])); ``` @@ -209,31 +190,28 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'flexRadioDefault', - 'type' => 'radio', - 'options' => [ - 'form_group' => false, - 'value_options' => [ - [ - 'label' => 'Default radio', - 'value' => 'option1', - 'attributes' => ['id' => 'flexRadioDefault1'], - ], - [ - 'label' => 'Default checked radio', - 'value' => 'option2', - 'attributes' => ['id' => 'flexRadioDefault2'], - ], - ], - ], - 'attributes' => [ 'value' => 'option2' ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'flexRadioDefault', + 'type' => 'radio', + 'options' => [ + 'form_group' => false, + 'value_options' => [ + [ + 'label' => 'Default radio', + 'value' => 'option1', + 'attributes' => ['id' => 'flexRadioDefault1'], + ], + [ + 'label' => 'Default checked radio', + 'value' => 'option2', + 'attributes' => ['id' => 'flexRadioDefault2'], + ], + ], + ], + 'attributes' => [ + 'value' => 'option2', + ], +])); ``` @@ -263,34 +241,29 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'flexRadioDisabled', - 'type' => 'radio', - 'options' => [ - 'form_group' => false, - 'value_options' => [ - [ - 'label' => 'Default radio', - 'value' => 'option1', - 'attributes' => ['id' => 'flexRadioDisabled'], - ], - [ - 'label' => 'Default checked radio', - 'value' => 'option2', - 'attributes' => ['id' => 'flexRadioCheckedDisabled'], - ], - ], - ], - 'attributes' => [ - 'value' => 'option2', - 'disabled' => true, - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'flexRadioDisabled', + 'type' => 'radio', + 'options' => [ + 'form_group' => false, + 'value_options' => [ + [ + 'label' => 'Default radio', + 'value' => 'option1', + 'attributes' => ['id' => 'flexRadioDisabled'], + ], + [ + 'label' => 'Default checked radio', + 'value' => 'option2', + 'attributes' => ['id' => 'flexRadioCheckedDisabled'], + ], + ], + ], + 'attributes' => [ + 'value' => 'option2', + 'disabled' => true, + ], +])); ``` @@ -329,85 +302,70 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Default switch checkbox input -echo $this->formRow( - $factory->create( - [ - 'name' => 'default-switch-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'switch' => true, - 'label' => 'Default switch checkbox input', - 'form_group' => false, - ], - 'attributes' => [ 'id' => 'flexSwitchCheckDefault' ], - ] - ) -); - -echo PHP_EOL; +echo $this->formRow($factory->create([ + 'name' => 'default-switch-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'switch' => true, + 'label' => 'Default switch checkbox input', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexSwitchCheckDefault', + ], +])); + +echo PHP_EOL; // Checked switch checkbox input -echo $this->formRow( - $factory->create( - [ - 'name' => 'checked-switch-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'switch' => true, - 'label' => 'Checked switch checkbox input', - 'form_group' => false, - ], - 'attributes' => [ - 'id' => 'flexSwitchCheckChecked', - 'checked' => true, - ], - ] - ) -); - -echo PHP_EOL; +echo $this->formRow($factory->create([ + 'name' => 'checked-switch-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'switch' => true, + 'label' => 'Checked switch checkbox input', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexSwitchCheckChecked', + 'checked' => true, + ], +])); + +echo PHP_EOL; // Disabled switch checkbox input -echo $this->formRow( - $factory->create( - [ - 'name' => 'disabled-switch-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'switch' => true, - 'label' => 'Disabled switch checkbox input', - 'form_group' => false, - ], - 'attributes' => [ - 'id' => 'flexSwitchCheckDisabled', - 'disabled' => true, - ], - ] - ) -); - -echo PHP_EOL; +echo $this->formRow($factory->create([ + 'name' => 'disabled-switch-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'switch' => true, + 'label' => 'Disabled switch checkbox input', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexSwitchCheckDisabled', + 'disabled' => true, + ], +])); + +echo PHP_EOL; // Disabled checked switch checkbox input -echo $this->formRow( - $factory->create( - [ - 'name' => 'disabled-checked-switch-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'switch' => true, - 'label' => 'Disabled checked switch checkbox input', - 'form_group' => false, - ], - 'attributes' => [ - 'id' => 'flexSwitchCheckChecked', - 'checked' => true, - 'disabled' => true, - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'disabled-checked-switch-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'switch' => true, + 'label' => 'Disabled checked switch checkbox input', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'flexSwitchCheckChecked', + 'checked' => true, + 'disabled' => true, + ], +])); ``` @@ -451,71 +409,60 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Render Default checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'default-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Default checkbox', - 'form_group' => false, - ], - 'attributes' => [ 'id' => 'defaultCheck1' ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'default-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Default checkbox', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'defaultCheck1', + ], +])); // Render Disabled checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'disabled-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Disabled checkbox', - 'form_group' => false, - ], - 'attributes' => [ - 'id' => 'defaultCheck2', - 'disabled' => true, - ], - ] - ) -); - -echo PHP_EOL.'
'; +echo $this->formRow($factory->create([ + 'name' => 'disabled-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Disabled checkbox', + 'form_group' => false, + ], + 'attributes' => [ + 'id' => 'defaultCheck2', + 'disabled' => true, + ], +])); + +echo PHP_EOL . '
'; // Render radio -echo $this->formRow( - $factory->create( - [ - 'name' => 'exampleRadios', - 'type' => 'radio', - 'options' => [ - 'form_group' => false, - 'value_options' => [ - [ - 'label' => 'Default radio', - 'value' => 'option1', - 'attributes' => ['id' => 'exampleRadios1'], - ], - [ - 'label' => 'Second default radio', - 'value' => 'option2', - 'attributes' => ['id' => 'exampleRadios2'], - ], - [ - 'label' => 'Disabled radio', - 'value' => 'option3', - 'disabled' => true, - 'attributes' => ['id' => 'exampleRadios3'], - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'exampleRadios', + 'type' => 'radio', + 'options' => [ + 'form_group' => false, + 'value_options' => [ + [ + 'label' => 'Default radio', + 'value' => 'option1', + 'attributes' => ['id' => 'exampleRadios1'], + ], + [ + 'label' => 'Second default radio', + 'value' => 'option2', + 'attributes' => ['id' => 'exampleRadios2'], + ], + [ + 'label' => 'Disabled radio', + 'value' => 'option3', + 'disabled' => true, + 'attributes' => ['id' => 'exampleRadios3'], ], - ] - ) -); - + ], + ], +])); ``` @@ -567,71 +514,62 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Render checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'inlineCheckboxOptions', - 'type' => 'multicheckbox', - 'options' => [ - 'layout' => 'inline', - 'form_group' => false, - 'value_options' => [ - [ - 'label' => '1', - 'value' => 'option1', - 'attributes' => ['id' => 'inlineCheckbox1'], - ], - [ - 'label' => '2', - 'value' => 'option2', - 'attributes' => ['id' => 'inlineCheckbox2'], - ], - [ - 'label' => '3 (disabled)', - 'value' => 'option3', - 'disabled' => true, - 'attributes' => ['id' => 'inlineCheckbox3'], - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'inlineCheckboxOptions', + 'type' => 'multicheckbox', + 'options' => [ + 'layout' => 'inline', + 'form_group' => false, + 'value_options' => [ + [ + 'label' => '1', + 'value' => 'option1', + 'attributes' => ['id' => 'inlineCheckbox1'], + ], + [ + 'label' => '2', + 'value' => 'option2', + 'attributes' => ['id' => 'inlineCheckbox2'], + ], + [ + 'label' => '3 (disabled)', + 'value' => 'option3', + 'disabled' => true, + 'attributes' => ['id' => 'inlineCheckbox3'], ], - ] - ) -); + ], + ], +])); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Render radio -echo $this->formRow( - $factory->create( - [ - 'name' => 'inlineRadioOptions', - 'type' => 'radio', - 'options' => [ - 'layout' => 'inline', - 'form_group' => false, - 'value_options' => [ - [ - 'label' => '1', - 'value' => 'option1', - 'attributes' => ['id' => 'inlineRadio1'], - ], - [ - 'label' => '2', - 'value' => 'option2', - 'attributes' => ['id' => 'inlineRadio2'], - ], - [ - 'label' => '3 (disabled)', - 'value' => 'option3', - 'disabled' => true, - 'attributes' => ['id' => 'inlineRadio3'], - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'inlineRadioOptions', + 'type' => 'radio', + 'options' => [ + 'layout' => 'inline', + 'form_group' => false, + 'value_options' => [ + [ + 'label' => '1', + 'value' => 'option1', + 'attributes' => ['id' => 'inlineRadio1'], + ], + [ + 'label' => '2', + 'value' => 'option2', + 'attributes' => ['id' => 'inlineRadio2'], + ], + [ + 'label' => '3 (disabled)', + 'value' => 'option3', + 'disabled' => true, + 'attributes' => ['id' => 'inlineRadio3'], ], - ] - ) -); - + ], + ], +])); ``` @@ -661,47 +599,32 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Render checkbox -echo $this->formRow( - $factory->create( - [ - 'name' => 'checkboxNoLabel', - 'type' => 'checkbox', - 'options' => [ - 'form_group' => false, - 'label' => '', - 'value' => 'option1', - ], - 'attributes' => [ - 'id' => 'checkboxNoLabel', - 'aria-label' => '...', - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'checkboxNoLabel', + 'type' => 'checkbox', + 'options' => [ + 'form_group' => false, + 'label' => '', + 'value' => 'option1', + ], + 'attributes' => ['id' => 'checkboxNoLabel', 'aria-label' => '...'], +])); // Render radio -echo $this->formRow( - $factory->create( - [ - 'name' => 'radioNoLabel', - 'type' => 'radio', - 'options' => [ - 'form_group' => false, - 'value_options' => [ - [ - 'label' => '', - 'value' => 'option1', - 'attributes' => [ - 'id' => 'radioNoLabel1', - 'aria-label' => '...', - ], - ], - ], - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'radioNoLabel', + 'type' => 'radio', + 'options' => [ + 'form_group' => false, + 'value_options' => [ + [ + 'label' => '', + 'value' => 'option1', + 'attributes' => ['id' => 'radioNoLabel1', 'aria-label' => '...'], + ], + ], + ], +])); ``` @@ -741,70 +664,54 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Single toggle -echo $this->formRow( - $factory->create( - [ - 'name' => 'single-toggle', - 'type' => 'checkbox', - 'options' => [ - 'button' => 'primary', - 'form_group' => false, - 'label' => 'Single toggle', - ], - 'attributes' => [ - 'id' => 'btn-check-1', - 'autocomplete' => 'off', - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'single-toggle', + 'type' => 'checkbox', + 'options' => [ + 'button' => 'primary', + 'form_group' => false, + 'label' => 'Single toggle', + ], + 'attributes' => ['id' => 'btn-check-1', 'autocomplete' => 'off'], +])); echo PHP_EOL; // Checked -echo $this->formRow( - $factory->create( - [ - 'name' => 'single-toggle', - 'type' => 'checkbox', - 'options' => [ - 'button' => 'primary', - 'form_group' => false, - 'label' => 'Checked', - ], - 'attributes' => [ - 'id' => 'btn-check-2', - 'autocomplete' => 'off', - 'checked' => true, - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'single-toggle', + 'type' => 'checkbox', + 'options' => [ + 'button' => 'primary', + 'form_group' => false, + 'label' => 'Checked', + ], + 'attributes' => [ + 'id' => 'btn-check-2', + 'autocomplete' => 'off', + 'checked' => true + ], +])); echo PHP_EOL; // Disabled -echo $this->formRow( - $factory->create( - [ - 'name' => 'single-toggle', - 'type' => 'checkbox', - 'options' => [ - 'button' => 'primary', - 'form_group' => false, - 'label' => 'Disabled', - ], - 'attributes' => [ - 'id' => 'btn-check-3', - 'autocomplete' => 'off', - 'disabled' => true, - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'single-toggle', + 'type' => 'checkbox', + 'options' => [ + 'button' => 'primary', + 'form_group' => false, + 'label' => 'Disabled', + ], + 'attributes' => [ + 'id' => 'btn-check-3', + 'autocomplete' => 'off', + 'disabled' => true + ], +])); echo PHP_EOL; - ``` @@ -844,53 +751,39 @@ echo PHP_EOL; $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'inlineRadioOptions', - 'type' => 'radio', - 'options' => [ - 'button' => true, - 'layout' => 'inline', - 'form_group' => false, - 'value_options' => [ - [ - 'label' => 'Checked', - 'value' => 'option1', - 'attributes' => [ - 'id' => 'option1', - 'autocomplete' => 'off', - ], - ], - [ - 'label' => 'Radio', - 'value' => 'option2', - 'attributes' => [ - 'id' => 'option2', - 'autocomplete' => 'off', - ], - ], - [ - 'label' => 'Disabled', - 'value' => 'option3', - 'disabled' => true, - 'attributes' => [ - 'id' => 'inlineRadio3', - 'autocomplete' => 'off', - ], - ], - [ - 'label' => 'Radio', - 'value' => 'option4', - 'attributes' => ['id' => 'inlineRadio3'], - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'inlineRadioOptions', + 'type' => 'radio', + 'options' => [ + 'button' => true, + 'layout' => 'inline', + 'form_group' => false, + 'value_options' => [ + [ + 'label' => 'Checked', + 'value' => 'option1', + 'attributes' => ['id' => 'option1', 'autocomplete' => 'off'], + ], + [ + 'label' => 'Radio', + 'value' => 'option2', + 'attributes' => ['id' => 'option2', 'autocomplete' => 'off'], + ], + [ + 'label' => 'Disabled', + 'value' => 'option3', + 'disabled' => true, + 'attributes' => ['id' => 'inlineRadio3', 'autocomplete' => 'off'], ], - 'attributes' => ['value' => 'option1'], - ] - ) -); - + [ + 'label' => 'Radio', + 'value' => 'option4', + 'attributes' => ['id' => 'inlineRadio3'], + ], + ], + ], + 'attributes' => ['value' => 'option1'], +])); ``` @@ -931,83 +824,61 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Single toggle outlined -echo $this->formRow( - $factory->create( - [ - 'name' => 'single-toggle-outlined', - 'type' => 'checkbox', - 'options' => [ - 'button' => 'outline-primary', - 'form_group' => false, - 'label' => 'Single toggle', - ], - 'attributes' => [ - 'id' => 'btn-check-outlined', - 'autocomplete' => 'off', - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'single-toggle-outlined', + 'type' => 'checkbox', + 'options' => [ + 'button' => 'outline-primary', + 'form_group' => false, + 'label' => 'Single toggle', + ], + 'attributes' => ['id' => 'btn-check-outlined', 'autocomplete' => 'off'], +])); echo PHP_EOL; // Checked outlined -echo $this->formRow( - $factory->create( - [ - 'name' => 'single-toggle', - 'type' => 'checkbox', - 'options' => [ - 'button' => 'outline-secondary', - 'form_group' => false, - 'label' => 'Checked', - ], - 'attributes' => [ - 'id' => 'btn-check-2-outlined', - 'autocomplete' => 'off', - 'checked' => true, - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'single-toggle', + 'type' => 'checkbox', + 'options' => [ + 'button' => 'outline-secondary', + 'form_group' => false, + 'label' => 'Checked', + ], + 'attributes' => [ + 'id' => 'btn-check-2-outlined', + 'autocomplete' => 'off', + 'checked' => true + ], +])); echo PHP_EOL; // Checked success radio -echo $this->formRow( - $factory->create( - [ - 'name' => 'options-outlined', - 'type' => 'radio', - 'options' => [ - 'form_group' => false, - 'layout' => 'inline', - 'value_options' => [ - [ - 'label' => 'Checked success radio', - 'value' => 'option1', - 'button' => 'outline-success', - 'attributes' => [ - 'id' => 'success-outlined', - 'autocomplete' => 'off', - ], - ], - [ - 'label' => 'Danger radio', - 'value' => 'option2', - 'button' => 'outline-danger', - 'attributes' => [ - 'id' => 'danger-outlined', - 'autocomplete' => 'off', - ], - ], - ], - ], - 'attributes' => ['value' => 'option1'], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'options-outlined', + 'type' => 'radio', + 'options' => [ + 'form_group' => false, + 'layout' => 'inline', + 'value_options' => [ + [ + 'label' => 'Checked success radio', + 'value' => 'option1', + 'button' => 'outline-success', + 'attributes' => ['id' => 'success-outlined', 'autocomplete' => 'off'], + ], + [ + 'label' => 'Danger radio', + 'value' => 'option2', + 'button' => 'outline-danger', + 'attributes' => ['id' => 'danger-outlined', 'autocomplete' => 'off'], + ], + ], + ], + 'attributes' => ['value' => 'option1'], +])); ``` diff --git a/website/docs/usage/forms/floating-labels.mdx b/website/docs/usage/forms/floating-labels.mdx index bb73e8f31..7a9b00a60 100644 --- a/website/docs/usage/forms/floating-labels.mdx +++ b/website/docs/usage/forms/floating-labels.mdx @@ -49,94 +49,77 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( +echo $this->formRow($factory->create([ + 'name' => 'email', + 'options' => [ + 'label' => 'Email address', + 'floating_label' => true, + ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'floatingInput', + 'placeholder' => 'name@example.com', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'password', + 'options' => [ + 'label' => 'Password', + 'floating_label' => true, + 'row_spacing_class' => false, + ], + 'attributes' => [ + 'type' => 'password', + 'id' => 'floatingPassword', + 'placeholder' => 'Password', + ], +])); + +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ [ - 'name' => 'email', - 'options' => [ - 'label' => 'Email address', - 'floating_label' => true, - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'floatingInput', - 'placeholder' => 'name@example.com', - ], + 'spec' => [ + 'name' => 'emailWithValue', + 'options' => [ + 'label' => 'Input with value', + 'floating_label' => true, + 'row_spacing_class' => false, + ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'floatingInputValue', + 'placeholder' => 'name@example.com', + 'value' => 'test@example.com' + ], + ] ] - ) -); + ] +])); -echo $this->formRow( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ [ - 'name' => 'password', - 'options' => [ - 'label' => 'Password', - 'floating_label' => true, - 'row_spacing_class' => false, - ], - 'attributes' => [ - 'type' => 'password', - 'id' => 'floatingPassword', - 'placeholder' => 'Password', - ], - ] - ) -); + 'spec' => [ -echo $this->form( - $factory->create( - [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'name' => 'emailWithValue', - 'options' => [ - 'label' => 'Input with value', - 'floating_label' => true, - 'row_spacing_class' => false, - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'floatingInputValue', - 'placeholder' => 'name@example.com', - 'value' => 'test@example.com', - ], - ], + 'name' => 'invalidEmailWithValue', + 'options' => [ + 'label' => 'Invalid input', + 'floating_label' => true, + 'row_spacing_class' => false, ], - ], - ] - ) -); - -echo $this->form( - $factory->create( - [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - - 'name' => 'invalidEmailWithValue', - 'options' => [ - 'label' => 'Invalid input', - 'floating_label' => true, - 'row_spacing_class' => false, - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'floatingInputInvalid', - 'placeholder' => 'name@example.com', - 'value' => 'test@example.com', - ], - ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'floatingInputInvalid', + 'placeholder' => 'name@example.com', + 'value' => 'test@example.com' ], - ], + ] ] - )->setMessages(['invalidEmailWithValue' => ['']]) -); - + ] +])->setMessages(['invalidEmailWithValue' => ['']])); ``` @@ -166,43 +149,36 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'comments', - 'options' => [ - 'label' => 'Comments', - 'floating_label' => true, - 'row_spacing_class' => false, - ], - 'attributes' => [ - 'type' => 'textarea', - 'id' => 'floatingTextarea', - 'placeholder' => 'Leave a comment here', - ], +echo $this->formRow($factory->create( + [ + 'name' => 'comments', + 'options' => [ + 'label' => 'Comments', + 'floating_label' => true, + 'row_spacing_class' => false, ], - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'customHeightComments', - 'options' => [ - 'label' => 'Comments', - 'floating_label' => true, - 'row_spacing_class' => false, - ], - 'attributes' => [ - 'type' => 'textarea', - 'id' => 'floatingTextarea', - 'placeholder' => 'Leave a comment here', - 'style' => 'height: 100px', - ], - ] - ) -); - + 'attributes' => [ + 'type' => 'textarea', + 'id' => 'floatingTextarea', + 'placeholder' => 'Leave a comment here', + ], + ], +)); + +echo $this->formRow($factory->create([ + 'name' => 'customHeightComments', + 'options' => [ + 'label' => 'Comments', + 'floating_label' => true, + 'row_spacing_class' => false, + ], + 'attributes' => [ + 'type' => 'textarea', + 'id' => 'floatingTextarea', + 'placeholder' => 'Leave a comment here', + 'style' => 'height: 100px', + ], +])); ``` @@ -233,31 +209,28 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'floatingSelect', - 'type' => 'select', - 'options' => [ - 'label' => 'Works with selects', - 'floating_label' => true, - 'row_spacing_class' => false, - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'id' => 'floatingSelect', - 'aria-label' => 'Floating label select example', - 'value' => '', +echo $this->formRow($factory->create( + [ + 'name' => 'floatingSelect', + 'type' => 'select', + 'options' => [ + 'label' => 'Works with selects', + 'floating_label' => true, + 'row_spacing_class' => false, + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', ], ], - ) -); - + 'attributes' => [ + 'id' => 'floatingSelect', + 'aria-label' => 'Floating label select example', + 'value' => '', + ], + ], +)); ``` @@ -296,57 +269,54 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 2, + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ 'gutter' => 2 ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'floatingInputGrid', - 'options' => [ - 'column' => 'md', - 'label' => 'Email address', - 'floating_label' => true, - 'row_spacing_class' => false, - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'floatingInputGrid', - 'placeholder' => 'name@example.com', - 'value' => 'mdo@example.com', - ], - ], + 'spec' => [ + 'name' => 'floatingInputGrid', + 'options' => [ + 'column' => 'md', + 'label' => 'Email address', + 'floating_label' => true, + 'row_spacing_class' => false, + ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'floatingInputGrid', + 'placeholder' => 'name@example.com', + 'value' => 'mdo@example.com', ], - [ - 'spec' => [ - 'name' => 'floatingSelectGrid', - 'type' => 'select', - 'options' => [ - 'column' => 'md', - 'label' => 'Works with selects', - 'floating_label' => true, - 'row_spacing_class' => false, - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'id' => 'floatingSelectGrid', - 'aria-label' => 'Floating label select example', - 'value' => '', - ], + ], + ], + [ + 'spec' => [ + 'name' => 'floatingSelectGrid', + 'type' => 'select', + 'options' => [ + 'column' => 'md', + 'label' => 'Works with selects', + 'floating_label' => true, + 'row_spacing_class' => false, + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', ], ], + 'attributes' => [ + 'id' => 'floatingSelectGrid', + 'aria-label' => 'Floating label select example', + 'value' => '', + ], ], - ] - ) -); - + ], + ], +])); ``` diff --git a/website/docs/usage/forms/form-controls.mdx b/website/docs/usage/forms/form-controls.mdx index dd52d117d..a43c14998 100644 --- a/website/docs/usage/forms/form-controls.mdx +++ b/website/docs/usage/forms/form-controls.mdx @@ -38,38 +38,37 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'name' => 'email', - 'options' => ['label' => 'Email address'], - 'attributes' => [ - 'type' => 'email', - 'id' => 'exampleFormControlInput1', - 'placeholder' => 'name@example.com', - ], - ], + 'spec' => [ + 'name' => 'email', + 'options' => [ + 'label' => 'Email address' ], - [ - 'spec' => [ - 'name' => 'textarea', - 'options' => ['label' => 'Example textarea'], - 'attributes' => [ - 'type' => 'textarea', - 'id' => 'exampleFormControlTextarea1', - 'rows' => 3, - ], - ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'exampleFormControlInput1', + 'placeholder' => 'name@example.com', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'name' => 'textarea', + 'options' => [ + 'label' => 'Example textarea' + ], + 'attributes' => [ + 'type' => 'textarea', + 'id' => 'exampleFormControlTextarea1', + 'rows' => 3, + ], + ], + ], + ], +])); ``` @@ -97,50 +96,34 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); // Render large input -$element = $factory->create( - [ - 'name' => 'lg', - 'type' => 'text', - 'options' => ['size' => 'lg'], - 'attributes' => [ - 'placeholder' => '.form-control-lg', - 'aria-label' => '.form-control-lg example', - ], - ] -); +$element = $factory->create([ + 'name' => 'lg', + 'type' => 'text', + 'options' => ['size' => 'lg'], + 'attributes' => ['placeholder' => '.form-control-lg', 'aria-label' => '.form-control-lg example'], +]); echo $this->formElement($element); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Render default input -$element = $factory->create( - [ - 'name' => 'default', - 'type' => 'text', - 'attributes' => [ - 'placeholder' => 'Default input', - 'aria-label' => 'default input example', - ], - ] -); +$element = $factory->create([ + 'name' => 'default', + 'type' => 'text', + 'attributes' => ['placeholder' => 'Default input', 'aria-label' => 'default input example'], +]); echo $this->formElement($element); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Render small input -$element = $factory->create( - [ - 'name' => 'sm', - 'type' => 'text', - 'options' => ['size' => 'sm'], - 'attributes' => [ - 'placeholder' => '.form-control-sm', - 'aria-label' => '.form-control-sm example', - ], - ] -); +$element = $factory->create([ + 'name' => 'sm', + 'type' => 'text', + 'options' => ['size' => 'sm'], + 'attributes' => ['placeholder' => '.form-control-sm', 'aria-label' => '.form-control-sm example'], +]); echo $this->formElement($element); - ``` @@ -165,36 +148,31 @@ echo $this->formElement($element); // Render disabled input $factory = new \Laminas\Form\Factory(); -$element = $factory->create( - [ - 'name' => 'disabled-input', - 'type' => 'text', - 'attributes' => [ - 'disabled' => true, - 'placeholder' => 'Disabled input', - 'aria-label' => 'Disabled input example', - ], - ] -); +$element = $factory->create([ + 'name' => 'disabled-input', + 'type' => 'text', + 'attributes' => [ + 'disabled' => true, + 'placeholder' => 'Disabled input', + 'aria-label' => 'Disabled input example' + ], +]); echo $this->formElement($element); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Render disabled and readonly input -$element = $factory->create( - [ - 'name' => 'disabled-readonly-input', - 'type' => 'text', - 'attributes' => [ - 'disabled' => true, - 'readonly' => true, - 'value' => 'Disabled readonly input', - 'aria-label' => 'Disabled input example', - ], - ] -); +$element = $factory->create([ + 'name' => 'disabled-readonly-input', + 'type' => 'text', + 'attributes' => [ + 'disabled' => true, + 'readonly' => true, + 'value' => 'Disabled readonly input', + 'aria-label' => 'Disabled input example' + ], +]); echo $this->formElement($element); - ``` @@ -217,19 +195,16 @@ echo $this->formElement($element); // Render element $factory = new \Laminas\Form\Factory(); -$element = $factory->create( - [ - 'name' => 'readonly-input', - 'type' => 'text', - 'attributes' => [ - 'readonly' => true, - 'value' => 'Readonly input here...', - 'aria-label' => 'readonly input example', - ], - ] -); +$element = $factory->create([ + 'name' => 'readonly-input', + 'type' => 'text', + 'attributes' => [ + 'readonly' => true, + 'value' => 'Readonly input here...', + 'aria-label' => 'readonly input example' + ], +]); echo $this->formElement($element); - ``` @@ -280,100 +255,90 @@ echo $this->formElement($element); $factory = new \Laminas\Form\Factory(); // Render horizontal form -$form = $factory->create( - [ - 'type' => 'form', - 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_HORIZONTAL], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'email', - 'options' => [ - 'plaintext' => true, - 'column' => 'sm-10', - 'label' => 'Email', - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'staticEmail', - 'value' => 'email@example.com', - 'readonly' => true, - ], +$form = $factory->create([ + 'type' => 'form', + 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_HORIZONTAL], + 'elements' => [ + [ + 'spec' => [ + 'name' => 'email', + 'options' => [ + 'plaintext' => true, + 'column' => 'sm-10', + 'label' => 'Email', + ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'staticEmail', + 'value' => 'email@example.com', + 'readonly' => true, ], ], - [ - 'spec' => [ - 'name' => 'password', - 'options' => [ - 'column' => 'sm-10', - 'label' => 'Password', - ], - 'attributes' => [ - 'type' => 'password', - 'id' => 'inputPassword', - ], + ], + [ + 'spec' => [ + 'name' => 'password', + 'options' => [ + 'column' => 'sm-10', + 'label' => 'Password', + ], + 'attributes' => [ + 'type' => 'password', + 'id' => 'inputPassword', ], ], ], - ] -); + ], +]); echo $this->form($form); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Render inline form -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_INLINE], + 'elements' => [ [ - 'type' => 'form', - 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_INLINE], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'email', - 'options' => [ - 'plaintext' => true, - 'label' => 'Email', - 'show_label' => false, - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'staticEmail2', - 'value' => 'email@example.com', - 'readonly' => true, - ], - ], + 'spec' => [ + 'name' => 'email', + 'options' => [ + 'plaintext' => true, + 'label' => 'Email', + 'show_label' => false, + ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'staticEmail2', + 'value' => 'email@example.com', + 'readonly' => true, ], - [ - 'spec' => [ - 'name' => 'password', - 'options' => [ - 'label' => 'Password', - 'show_label' => false, - ], - 'attributes' => [ - 'type' => 'password', - 'id' => 'inputPassword2', - 'placeholder' => 'Password', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'password', + 'options' => [ + 'label' => 'Password', + 'show_label' => false, ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Confirm identity', - 'variant' => 'primary', - ], - 'attributes' => ['class' => 'mb-2'], - ], + 'attributes' => [ + 'type' => 'password', + 'id' => 'inputPassword2', + 'placeholder' => 'Password', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => ['label' => 'Confirm identity', 'variant' => 'primary'], + 'attributes' => ['class' => 'mb-2'], + ], + ], + ], +])); ``` @@ -417,74 +382,75 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); // Render inline form -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ + [ + 'spec' => [ + 'name' => 'default-file', + 'options' => [ + 'label' => 'Default file input example', + ], + 'attributes' => [ + 'type' => 'file', + 'id' => 'formFile', + ], + ], + ], + [ + 'spec' => [ + 'name' => 'file-multiple', + 'options' => [ + 'label' => 'Multiple files input example', + ], + 'attributes' => [ + 'multiple' => true, + 'type' => 'file', + 'id' => 'formFileMultiple', + ], + ], + ], [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'name' => 'default-file', - 'options' => [ 'label' => 'Default file input example' ], - 'attributes' => [ - 'type' => 'file', - 'id' => 'formFile', - ], - ], + 'spec' => [ + 'name' => 'file-disabled', + 'options' => [ + 'label' => 'Disabled file input example', ], - [ - 'spec' => [ - 'name' => 'file-multiple', - 'options' => [ 'label' => 'Multiple files input example' ], - 'attributes' => [ - 'multiple' => true, - 'type' => 'file', - 'id' => 'formFileMultiple', - ], - ], + 'attributes' => [ + 'disabled' => true, + 'type' => 'file', + 'id' => 'formFileDisabled', + ], + ], + ], + [ + 'spec' => [ + 'name' => 'file-sm', + 'options' => [ + 'size' => 'sm', + 'label' => 'Small file input example', ], - [ - 'spec' => [ - 'name' => 'file-disabled', - 'options' => [ 'label' => 'Disabled file input example' ], - 'attributes' => [ - 'disabled' => true, - 'type' => 'file', - 'id' => 'formFileDisabled', - ], - ], + 'attributes' => [ + 'type' => 'file', + 'id' => 'formFileSm', ], - [ - 'spec' => [ - 'name' => 'file-sm', - 'options' => [ - 'size' => 'sm', - 'label' => 'Small file input example', - ], - 'attributes' => [ - 'type' => 'file', - 'id' => 'formFileSm', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'file-lg', + 'options' => [ + 'size' => 'lg', + 'label' => 'Large file input example', ], - [ - 'spec' => [ - 'name' => 'file-lg', - 'options' => [ - 'size' => 'lg', - 'label' => 'Large file input example', - ], - 'attributes' => [ - 'type' => 'file', - 'id' => 'formFileLg', - ], - ], + 'attributes' => [ + 'type' => 'file', + 'id' => 'formFileLg', ], ], - ] - ) -); - + ], + ], +])); ``` diff --git a/website/docs/usage/forms/input-group.mdx b/website/docs/usage/forms/input-group.mdx index 220b63762..5b322d25e 100644 --- a/website/docs/usage/forms/input-group.mdx +++ b/website/docs/usage/forms/input-group.mdx @@ -55,124 +55,103 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'username', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'placeholder' => 'Username', - 'aria-label' => 'Username', - 'aria-describedby' => 'basic-addon1', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'recipient_username', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_append' => '@example.com', - ], - 'attributes' => [ - 'placeholder' => "Recipient's username", - 'aria-label' => "Recipient's username", - 'aria-describedby' => 'basic-addon2', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'url', - 'type' => 'text', - 'options' => [ - 'label' => 'Your vanity URL', - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => 'https://example.com/users/', - ], - 'attributes' => [ - 'id' => 'basic-url', - 'aria-describedby' => 'basic-addon3', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'amount', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => '$', - 'add_on_append' => '.00', - ], - 'attributes' => [ 'aria-label' => 'Amount (to the nearest dollar)' ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'username', - 'type' => 'text', - 'options' => [ - 'row_name' => 'multiple_inputs', - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_append' => [ - '@', - [ - 'element' => [ - 'name' => 'server', - 'type' => 'text', - 'attributes' => [ - 'placeholder' => 'Server', - 'aria-label' => 'Server', - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'username', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => '@', + ], + 'attributes' => [ + 'placeholder' => 'Username', + 'aria-label' => 'Username', + 'aria-describedby' => 'basic-addon1', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'recipient_username', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_append' => '@example.com', + ], + 'attributes' => [ + 'placeholder' => "Recipient's username", + 'aria-label' => "Recipient's username", + 'aria-describedby' => 'basic-addon2', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'url', + 'type' => 'text', + 'options' => [ + 'label' => 'Your vanity URL', + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => 'https://example.com/users/', + ], + 'attributes' => [ + 'id' => 'basic-url', + 'aria-describedby' => 'basic-addon3', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'amount', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => '$', + 'add_on_append' => '.00', + ], + 'attributes' => [ + 'aria-label' => 'Amount (to the nearest dollar)', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'username', + 'type' => 'text', + 'options' => [ + 'row_name' => 'multiple_inputs', + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_append' => [ + '@', + [ + 'element' => [ + 'name' => 'server', + 'type' => 'text', + 'attributes' => [ + 'placeholder' => "Server", + 'aria-label' => "Server", ], ], - ], - 'attributes' => [ - 'placeholder' => 'Username', - 'aria-label' => 'Username', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'textarea', - 'type' => 'textarea', - 'options' => [ - 'form_group' => false, - 'add_on_prepend' => 'With textarea', - ], - 'attributes' => [ 'aria-label' => 'With textarea' ], - ] - ) -); - + ] + ], + ], + 'attributes' => [ + 'placeholder' => "Username", + 'aria-label' => "Username", + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'textarea', + 'type' => 'textarea', + 'options' => [ + 'form_group' => false, + 'add_on_prepend' => 'With textarea', + ], + 'attributes' => [ + 'aria-label' => 'With textarea', + ], +])); ``` @@ -200,21 +179,18 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'username', - 'type' => 'text', - 'options' => [ 'add_on_prepend' => '@' ], - 'attributes' => [ - 'placeholder' => 'Username', - 'aria-label' => 'Username', - 'aria-describedby' => 'addon-wrapping', - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'username', + 'type' => 'text', + 'options' => [ + 'add_on_prepend' => '@', + ], + 'attributes' => [ + 'placeholder' => 'Username', + 'aria-label' => 'Username', + 'aria-describedby' => 'addon-wrapping', + ], +])); ``` @@ -249,63 +225,50 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); // Small -echo $this->formRow( - $factory->create( - [ - 'name' => 'small', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => 'Small', - 'size' => 'sm', - ], - 'attributes' => [ - 'aria-label' => 'Sizing example input', - 'aria-describedby' => 'inputGroup-sizing-sm', - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'small', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => 'Small', + 'size' => 'sm', + ], + 'attributes' => [ + 'aria-label' => 'Sizing example input', + 'aria-describedby' => 'inputGroup-sizing-sm', + ], +])); // Default -echo $this->formRow( - $factory->create( - [ - 'name' => 'default', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => 'Default', - ], - 'attributes' => [ - 'aria-label' => 'Sizing example input', - 'aria-describedby' => 'inputGroup-sizing-default', - ], - ] - ) -); +echo $this->formRow($factory->create([ + 'name' => 'default', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => 'Default', + ], + 'attributes' => [ + 'aria-label' => 'Sizing example input', + 'aria-describedby' => 'inputGroup-sizing-default', + ], +])); // Large -echo $this->formRow( - $factory->create( - [ - 'name' => 'large', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'add_on_prepend' => 'Large', - 'size' => 'lg', - ], - 'attributes' => [ - 'aria-label' => 'Sizing example input', - 'aria-describedby' => 'inputGroup-sizing-lg', - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'large', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'add_on_prepend' => 'Large', + 'size' => 'lg', + ], + 'attributes' => [ + 'aria-label' => 'Sizing example input', + 'aria-describedby' => 'inputGroup-sizing-lg', + ], +])); ``` @@ -335,53 +298,54 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'checkbox-text', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'checkbox', - 'options' => [ 'use_hidden_element' => false ], - 'attributes' => [ 'aria-label' => 'Checkbox for following text input' ], - ], +echo $this->formRow($factory->create([ + 'name' => 'checkbox-text', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'checkbox', + 'options' => [ + 'use_hidden_element' => false, + ], + 'attributes' => [ + 'aria-label' => 'Checkbox for following text input', ], ], - 'attributes' => [ 'aria-label' => 'Text input with checkbox' ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'radio-text', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'radio', - 'options' => [ - 'value_options' => [ - [ - 'label' => '', - 'attributes' => [ 'aria-label' => 'Radio button for following text input' ], - ], + ], + ], + 'attributes' => [ + 'aria-label' => 'Text input with checkbox', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'radio-text', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'radio', + 'options' => [ + 'value_options' => [ + [ + 'label' => '', + 'attributes' => [ + 'aria-label' => 'Radio button for following text input', ], ], ], ], ], - 'attributes' => [ 'aria-label' => 'Text input with radio button' ], - ] - ) -); - + ], + ], + 'attributes' => [ + 'aria-label' => 'Text input with radio button', + ], +])); ``` @@ -410,28 +374,27 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'last-name', - 'type' => 'text', - 'options' => [ - 'add_on_prepend' => [ - 'First and last name', - [ - 'element' => [ - 'name' => 'first-name', - 'type' => 'text', - ], - 'attributes' => [ 'aria-label' => 'First name' ], - ], +echo $this->formRow($factory->create([ + 'name' => 'last-name', + 'type' => 'text', + 'options' => [ + 'add_on_prepend' => [ + 'First and last name', + [ + 'element' => [ + 'name' => 'first-name', + 'type' => 'text', ], - ], - 'attributes' => [ 'aria-label' => 'Last name' ], + 'attributes' => [ + 'aria-label' => 'First name', + ], + ] ] - ) -); - + ], + 'attributes' => [ + 'aria-label' => 'Last name', + ], +])); ``` @@ -463,42 +426,31 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'multiple-addons-prepend', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => [ - '$', - '0.00', - ], - ], - 'attributes' => [ 'aria-label' => 'Dollar amount (with dot and two decimal places)' ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'multiple-addons-append', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_append' => [ - '$', - '0.00', - ], - ], - 'attributes' => [ 'aria-label' => 'Dollar amount (with dot and two decimal places)' ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'multiple-addons-prepend', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => ['$', '0.00'], + ], + 'attributes' => [ + 'aria-label' => 'Dollar amount (with dot and two decimal places)', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'multiple-addons-append', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_append' => ['$', '0.00'], + ], + 'attributes' => [ + 'aria-label' => 'Dollar amount (with dot and two decimal places)', + ], +])); ``` @@ -538,133 +490,116 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'button-prepend', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'button-prepend', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], - 'attributes' => [ - 'placeholder' => '', - 'aria-label' => 'Example text with button addon', - 'aria-describedby' => 'button-addon1', + ], + ], + 'attributes' => [ + 'placeholder' => '', + 'aria-label' => 'Example text with button addon', + 'aria-describedby' => 'button-addon1', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'button-append', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_append' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', + ], ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'button-append', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_append' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], + ], + ], + 'attributes' => [ + 'placeholder' => "Recipient's username", + 'aria-label' => "Recipient's username", + 'aria-describedby' => 'button-addon2', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'buttons-prepend', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => [ + [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], ], - 'attributes' => [ - 'placeholder' => "Recipient's username", - 'aria-label' => "Recipient's username", - 'aria-describedby' => 'button-addon2', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'buttons-prepend', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => [ - [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], - ], - [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], + [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], ], - 'attributes' => [ - 'placeholder' => '', - 'aria-label' => 'Example text with two button addons', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'button-append', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'add_on_append' => [ - [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], - ], - [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], + ], + ], + 'attributes' => [ + 'placeholder' => '', + 'aria-label' => 'Example text with two button addons', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'button-append', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'add_on_append' => [ + [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], ], - 'attributes' => [ - 'placeholder' => "Recipient's username", - 'aria-label' => "Recipient's username with two button addons", + [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', + ], + ], ], - ] - ) -); - + ], + ], + 'attributes' => [ + 'placeholder' => "Recipient's username", + 'aria-label' => "Recipient's username with two button addons", + ], +])); ``` @@ -727,111 +662,104 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'dropdown-prepend', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Dropdown', - 'variant' => 'outline-secondary', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'dropdown-prepend', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Dropdown', + 'variant' => 'outline-secondary', + 'dropdown' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], ], - 'attributes' => [ 'aria-label' => 'Text input with dropdown button' ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'dropdown-append', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_append' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Dropdown', - 'variant' => 'outline-secondary', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], + ], + ], + 'attributes' => [ + 'aria-label' => 'Text input with dropdown button', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'dropdown-append', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_append' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Dropdown', + 'variant' => 'outline-secondary', + 'dropdown' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], ], - 'attributes' => [ 'aria-label' => 'Text input with dropdown button' ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'dropdown-prepend-and-append', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Dropdown', - 'variant' => 'outline-secondary', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], + ], + ], + 'attributes' => [ + 'aria-label' => 'Text input with dropdown button', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'dropdown-prepend-and-append', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Dropdown', + 'variant' => 'outline-secondary', + 'dropdown' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], - 'add_on_append' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Dropdown', - 'variant' => 'outline-secondary', - 'dropdown' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], + ], + ], + 'add_on_append' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Dropdown', + 'variant' => 'outline-secondary', + 'dropdown' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], ], - 'attributes' => [ 'aria-label' => 'Text input with dropdown button' ], - ] - ) -); - + ], + ], + 'attributes' => [ + 'aria-label' => 'Text input with dropdown button', + ], +])); ``` @@ -877,71 +805,66 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'segmented-dropdown-prepend', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Action', - 'variant' => 'outline-secondary', - 'dropdown' => [ - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'segmented-dropdown-prepend', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Action', + 'variant' => 'outline-secondary', + 'dropdown' => [ + 'split' => 'Toggle Dropdown', + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], ], ], - 'attributes' => [ 'aria-label' => 'Text input with segmented dropdown button' ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'segmented-dropdown-append', - 'type' => 'text', - 'options' => [ - 'form_group' => false, - 'add_on_append' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Action', - 'variant' => 'outline-secondary', - 'dropdown' => [ - 'split' => 'Toggle Dropdown', - 'items' => [ - 'Action', - 'Another action', - 'Something else here', - '---', - 'Separated link', - ], - ], + ], + ], + 'attributes' => [ + 'aria-label' => 'Text input with segmented dropdown button', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'segmented-dropdown-append', + 'type' => 'text', + 'options' => [ + 'form_group' => false, + 'add_on_append' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Action', + 'variant' => 'outline-secondary', + 'dropdown' => [ + 'split' => 'Toggle Dropdown', + 'items' => [ + 'Action', + 'Another action', + 'Something else here', + '---', + 'Separated link', ], ], ], ], - 'attributes' => [ 'aria-label' => 'Text input with segmented dropdown button' ], - ] - ) -); - + ], + ], + 'attributes' => [ + 'aria-label' => 'Text input with segmented dropdown button', + ], +])); ``` @@ -1003,115 +926,102 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'select_label_prepend', - 'type' => 'select', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'custom' => true, - 'empty_option' => 'Choose...', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - 'add_on_prepend' => ['label' => 'Options'], - ], - 'attributes' => [ 'id' => 'inputGroupSelect01' ], - ] - )->setValue('') -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'select_label_append', - 'type' => 'select', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'custom' => true, - 'empty_option' => 'Choose...', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - 'add_on_append' => ['label' => 'Options'], - ], - 'attributes' => [ 'id' => 'inputGroupSelect02' ], - ] - )->setValue('') -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'select_button_prepend', - 'type' => 'select', - 'options' => [ - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'custom' => true, - 'empty_option' => 'Choose...', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'select_label_prepend', + 'type' => 'select', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'custom' => true, + 'empty_option' => 'Choose...', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + 'add_on_prepend' => ['label' => 'Options'], + ], + 'attributes' => [ + 'id' => 'inputGroupSelect01', + ], +])->setValue('')); + +echo $this->formRow($factory->create([ + 'name' => 'select_label_append', + 'type' => 'select', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'custom' => true, + 'empty_option' => 'Choose...', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + 'add_on_append' => ['label' => 'Options'], + ], + 'attributes' => [ + 'id' => 'inputGroupSelect02', + ], +])->setValue('')); + +echo $this->formRow($factory->create([ + 'name' => 'select_button_prepend', + 'type' => 'select', + 'options' => [ + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'custom' => true, + 'empty_option' => 'Choose...', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], - 'attributes' => [ - 'id' => 'inputGroupSelect03', - 'aria-label' => 'Example select with button addon', - ], - ] - )->setValue('') -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'select_button_append', - 'type' => 'select', - 'options' => [ - 'form_group' => false, - 'custom' => true, - 'empty_option' => 'Choose...', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - 'add_on_append' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], + ], + ], + 'attributes' => [ + 'id' => 'inputGroupSelect03', + 'aria-label' => 'Example select with button addon', + ], +])->setValue('')); + +echo $this->formRow($factory->create([ + 'name' => 'select_button_append', + 'type' => 'select', + 'options' => [ + 'form_group' => false, + 'custom' => true, + 'empty_option' => 'Choose...', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + 'add_on_append' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], - 'attributes' => [ - 'id' => 'inputGroupSelect04', - 'aria-label' => 'Example select with button addon', - ], - ] - )->setValue('') -); - + ], + ], + 'attributes' => [ + 'id' => 'inputGroupSelect04', + 'aria-label' => 'Example select with button addon', + ], +])->setValue('')); ``` @@ -1149,102 +1059,85 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'custom_file_label_prepend', - 'type' => 'file', - 'options' => [ - 'custom' => true, - 'custom_label' => 'Choose file', - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => 'Upload', - ], - 'attributes' => [ - 'id' => 'inputGroupFile01', - 'aria-describedby' => 'inputGroupFile01', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'custom_file_label_append', - 'type' => 'file', - 'options' => [ - 'custom' => true, - 'custom_label' => 'Choose file', - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_append' => 'Upload', - ], - 'attributes' => [ - 'id' => 'inputGroupFile02', - 'aria-describedby' => 'inputGroupFile02', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'custom_file_button_prepend', - 'type' => 'file', - 'options' => [ - 'custom' => true, - 'custom_label' => 'Choose file', - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_prepend' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], +echo $this->formRow($factory->create([ + 'name' => 'custom_file_label_prepend', + 'type' => 'file', + 'options' => [ + 'custom' => true, + 'custom_label' => 'Choose file', + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => 'Upload', + ], + 'attributes' => [ + 'id' => 'inputGroupFile01', + 'aria-describedby' => 'inputGroupFile01', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'custom_file_label_append', + 'type' => 'file', + 'options' => [ + 'custom' => true, + 'custom_label' => 'Choose file', + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_append' => 'Upload', + ], + 'attributes' => [ + 'id' => 'inputGroupFile02', + 'aria-describedby' => 'inputGroupFile02', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'custom_file_button_prepend', + 'type' => 'file', + 'options' => [ + 'custom' => true, + 'custom_label' => 'Choose file', + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_prepend' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], - 'attributes' => [ - 'id' => 'inputGroupFile03', - 'aria-describedby' => 'inputGroupFileAddon03', - ], - ] - ) -); - -echo $this->formRow( - $factory->create( - [ - 'name' => 'custom_file_button_append', - 'type' => 'file', - 'options' => [ - 'custom' => true, - 'custom_label' => 'Choose file', - 'form_group' => false, - 'input_group_class' => 'mb-3', - 'add_on_append' => [ - 'element' => [ - 'type' => 'button', - 'options' => [ - 'label' => 'Button', - 'variant' => 'outline-secondary', - ], - ], + ], + ], + 'attributes' => [ + 'id' => 'inputGroupFile03', + 'aria-describedby' => 'inputGroupFileAddon03', + ], +])); + +echo $this->formRow($factory->create([ + 'name' => 'custom_file_button_append', + 'type' => 'file', + 'options' => [ + 'custom' => true, + 'custom_label' => 'Choose file', + 'form_group' => false, + 'input_group_class' => 'mb-3', + 'add_on_append' => [ + 'element' => [ + 'type' => 'button', + 'options' => [ + 'label' => 'Button', + 'variant' => 'outline-secondary', ], ], - 'attributes' => [ - 'id' => 'inputGroupFile04', - 'aria-describedby' => 'inputGroupFileAddon04', - ], - ] - ) -); - + ], + ], + 'attributes' => [ + 'id' => 'inputGroupFile04', + 'aria-describedby' => 'inputGroupFileAddon04', + ], +])); ``` diff --git a/website/docs/usage/forms/layout.mdx b/website/docs/usage/forms/layout.mdx index 0bb2bc810..79c56bb90 100644 --- a/website/docs/usage/forms/layout.mdx +++ b/website/docs/usage/forms/layout.mdx @@ -38,36 +38,35 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'name' => 'exampleLabel', - 'options' => ['label' => 'Example label'], - 'attributes' => [ - 'id' => 'formGroupExampleInput', - 'placeholder' => 'Example input placeholder', - ], - ], + 'spec' => [ + 'name' => 'exampleLabel', + 'options' => [ + 'label' => 'Example label' ], - [ - 'spec' => [ - 'name' => 'anotherLabel', - 'options' => ['label' => 'Another label'], - 'attributes' => [ - 'id' => 'formGroupExampleInput2', - 'placeholder' => 'Another input placeholder', - ], - ], + 'attributes' => [ + 'id' => 'formGroupExampleInput', + 'placeholder' => 'Example input placeholder', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'name' => 'anotherLabel', + 'options' => [ + 'label' => 'Another label' + ], + 'attributes' => [ + 'id' => 'formGroupExampleInput2', + 'placeholder' => 'Another input placeholder', + ], + ], + ], + ], +])); ``` @@ -99,36 +98,35 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'name' => 'firstName', - 'options' => [ 'column' => true ], - 'attributes' => [ - 'aria-label' => 'First name', - 'placeholder' => 'First name', - ], - ], + 'spec' => [ + 'name' => 'firstName', + 'options' => [ + 'column' => true, ], - [ - 'spec' => [ - 'name' => 'lastName', - 'options' => [ 'column' => true ], - 'attributes' => [ - 'aria-label' => 'Last name', - 'placeholder' => 'Last name', - ], - ], + 'attributes' => [ + 'aria-label' => 'First name', + 'placeholder' => 'First name', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'name' => 'lastName', + 'options' => [ + 'column' => true, + ], + 'attributes' => [ + 'aria-label' => 'Last name', + 'placeholder' => 'Last name', + ], + ], + ], + ], +])); ``` @@ -204,167 +202,168 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 3, + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ 'gutter' => 3 ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'firstName', - 'options' => [ 'column' => true ], - 'attributes' => [ - 'aria-label' => 'First name', - 'placeholder' => 'First name', - ], - ], + 'spec' => [ + 'name' => 'firstName', + 'options' => [ + 'column' => true, ], - [ - 'spec' => [ - 'name' => 'lastName', - 'options' => [ 'column' => true ], - 'attributes' => [ - 'aria-label' => 'Last name', - 'placeholder' => 'Last name', - ], - ], + 'attributes' => [ + 'aria-label' => 'First name', + 'placeholder' => 'First name', + ], + ], + ], + [ + 'spec' => [ + 'name' => 'lastName', + 'options' => [ + 'column' => true, + ], + 'attributes' => [ + 'aria-label' => 'Last name', + 'placeholder' => 'Last name', ], ], - ] - ) -); + ], + ], +])); // More complex layouts can also be created with the grid system -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 3, + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ 'gutter' => 3 ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'email', - 'options' => [ - 'column' => 'md-6', - 'label' => 'Email', - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'inputEmail4', - ], - ], + 'spec' => [ + 'name' => 'email', + 'options' => [ + 'column' => 'md-6', + 'label' => 'Email' ], - [ - 'spec' => [ - 'name' => 'password', - 'options' => [ - 'column' => 'md-6', - 'label' => 'Password', - ], - 'attributes' => [ - 'type' => 'password', - 'id' => 'inputPassword4', - ], - ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'inputEmail4' ], - [ - 'spec' => [ - 'name' => 'address1', - 'options' => [ - 'column' => 12, - 'label' => 'Address', - ], - 'attributes' => [ - 'type' => 'text', - 'placeholder' => '1234 Main St', - 'id' => 'inputAddress', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'password', + 'options' => [ + 'column' => 'md-6', + 'label' => 'Password' ], - [ - 'spec' => [ - 'name' => 'address2', - 'options' => [ - 'column' => 12, - 'label' => 'Address 2', - ], - 'attributes' => [ - 'type' => 'text', - 'placeholder' => 'Apartment, studio, or floor', - 'id' => 'inputAddress2', - ], - ], + 'attributes' => [ + 'type' => 'password', + 'id' => 'inputPassword4' ], - [ - 'spec' => [ - 'name' => 'city', - 'options' => [ - 'column' => 'md-6', - 'label' => 'City', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'inputCity', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'address1', + 'options' => [ + 'column' => 12, + 'label' => 'Address' ], - [ - 'spec' => [ - 'name' => 'state', - 'type' => 'select', - 'options' => [ - 'column' => 'md-4', - 'label' => 'State', - 'empty_option' => 'Choose...', - 'value_options' => ['...'], - ], - 'attributes' => [ - 'id' => 'inputState', - 'value' => '', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'placeholder' => '1234 Main St', + 'id' => 'inputAddress' ], - [ - 'spec' => [ - 'name' => 'zip', - 'options' => [ - 'column' => 'md-2', - 'label' => 'Zip', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'inputZip', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'address2', + 'options' => [ + 'column' => 12, + 'label' => 'Address 2' ], - [ - 'spec' => [ - 'name' => 'checked-checkbox', - 'type' => 'checkbox', - 'options' => [ - 'column' => 12, - 'label' => 'Check me out', - ], - 'attributes' => [ 'id' => 'gridCheck' ], - ], + 'attributes' => [ + 'type' => 'text', + 'placeholder' => 'Apartment, studio, or floor', + 'id' => 'inputAddress2' ], - [ - 'spec' => [ - 'name' => 'submit', - 'type' => 'submit', - 'options' => [ - 'column' => 12, - 'label' => 'Sign in', - 'variant' => 'primary', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'city', + 'options' => [ + 'column' => 'md-6', + 'label' => 'City' + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'inputCity' ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'name' => 'state', + 'type' => 'select', + 'options' => [ + 'column' => 'md-4', + 'label' => 'State', + 'empty_option' => 'Choose...', + 'value_options' => ['...'] + ], + 'attributes' => [ + 'id' => 'inputState', + 'value' => '', + ], + ], + ], + [ + 'spec' => [ + 'name' => 'zip', + 'options' => [ + 'column' => 'md-2', + 'label' => 'Zip' + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'inputZip' + ], + ], + ], + [ + 'spec' => [ + 'name' => 'checked-checkbox', + 'type' => 'checkbox', + 'options' => [ + 'column' => 12, + 'label' => 'Check me out', + ], + 'attributes' => [ + 'id' => 'gridCheck', + ], + ], + ], + [ + 'spec' => [ + 'name' => 'submit', + 'type' => 'submit', + 'options' => [ + 'column' => 12, + 'label' => 'Sign in', + 'variant' => 'primary', + ], + ], + ], + ], +])); ``` @@ -426,102 +425,99 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_HORIZONTAL], + 'elements' => [ [ - 'type' => 'form', - 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_HORIZONTAL], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'email', - 'options' => [ - 'label' => 'Email', - 'column' => 'sm-10', - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'inputEmail3', - ], - ], + 'spec' => [ + 'name' => 'email', + 'options' => [ + 'label' => 'Email', + 'column' => 'sm-10', ], - [ - 'spec' => [ - 'name' => 'password', - 'options' => [ - 'label' => 'Password', - 'column' => 'sm-10', - ], - 'attributes' => [ - 'type' => 'password', - 'id' => 'inputPassword3', - ], - ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'inputEmail3', ], - [ - 'spec' => [ - 'type' => 'fieldset', - 'options' => [ - 'label' => 'Radios', - 'label_attributes' => ['class' => 'col-form-label pt-0'], - 'column' => 'sm-10', - ], - 'elements' => [ - [ - 'spec' => [ - 'type' => 'radio', - 'name' => 'gridRadios', - 'options' => [ - 'column' => 'sm-10', - 'value_options' => [ - [ - 'label' => 'First radio', - 'attributes' => ['id' => 'gridRadios1'], - 'value' => 'option1', - ], - [ - 'label' => 'Second radio', - 'attributes' => ['id' => 'gridRadios2'], - 'value' => 'option2', - ], - [ - 'label' => 'Third disabled radio', - 'disabled' => true, - 'attributes' => ['id' => 'gridRadios3'], - 'value' => 'option3', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'password', + 'options' => [ + 'label' => 'Password', + 'column' => 'sm-10', + ], + 'attributes' => [ + 'type' => 'password', + 'id' => 'inputPassword3', + ], + ], + ], + [ + 'spec' => [ + 'type' => 'fieldset', + 'options' => [ + 'label' => 'Radios', + 'label_attributes' => ['class' => 'col-form-label pt-0'], + 'column' => 'sm-10', + ], + 'elements' => [ + [ + 'spec' => [ + 'type' => 'radio', + 'name' => 'gridRadios', + 'options' => [ + 'column' => 'sm-10', + 'value_options' => [ + [ + 'label' => 'First radio', + 'attributes' => ['id' => 'gridRadios1'], + 'value' => 'option1', + ], + [ + 'label' => 'Second radio', + 'attributes' => ['id' => 'gridRadios2'], + 'value' => 'option2', + ], + [ + 'label' => 'Third disabled radio', + 'disabled' => true, + 'attributes' => ['id' => 'gridRadios3'], + 'value' => 'option3', ], - 'attributes' => [ 'value' => 'option1' ], ], ], + 'attributes' => [ + 'value' => 'option1', + ], ], ], ], - [ - 'spec' => [ - 'type' => 'checkbox', - 'options' => [ - 'label' => 'Example checkbox', - 'column' => 'sm-10', - ], - 'attributes' => ['id' => 'gridCheck1'], - ], + ], + ], + [ + 'spec' => [ + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Example checkbox', + 'column' => 'sm-10', ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Sign in', - 'variant' => 'primary', - ], - ], + 'attributes' => ['id' => 'gridCheck1'], + ], + ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => [ + 'label' => 'Sign in', + 'variant' => 'primary', ], ], - ] - ) -); - + ], + ] +])); ``` @@ -563,61 +559,56 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_HORIZONTAL], + 'elements' => [ [ - 'type' => 'form', - 'options' => ['layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_HORIZONTAL], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'emailSm', - 'options' => [ - 'label' => 'Email', - 'column' => 'sm-10', - 'size' => 'sm', - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'colFormLabelSm', - 'placeholder' => 'col-form-label-sm', - ], - ], + 'spec' => [ + 'name' => 'emailSm', + 'options' => [ + 'label' => 'Email', + 'column' => 'sm-10', + 'size' => 'sm', ], - [ - 'spec' => [ - 'name' => 'email', - 'options' => [ - 'label' => 'Email', - 'column' => 'sm-10', - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'colFormLabel', - 'placeholder' => 'col-form-label', - ], - ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'colFormLabelSm', + 'placeholder' => 'col-form-label-sm', ], - [ - 'spec' => [ - 'name' => 'emailLg', - 'options' => [ - 'label' => 'Email', - 'column' => 'sm-10', - 'size' => 'lg', - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'colFormLabelLg', - 'placeholder' => 'col-form-label-lg', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'email', + 'options' => [ + 'label' => 'Email', + 'column' => 'sm-10', + ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'colFormLabel', + 'placeholder' => 'col-form-label', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'name' => 'emailLg', + 'options' => [ + 'label' => 'Email', + 'column' => 'sm-10', + 'size' => 'lg', + ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'colFormLabelLg', + 'placeholder' => 'col-form-label-lg', + ], + ], + ], + ], +])); ``` @@ -652,50 +643,53 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 3, + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ 'gutter' => 3 ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'city', - 'options' => [ 'column' => 'sm-7' ], - 'attributes' => [ - 'type' => 'text', - 'placeholder' => 'City', - 'aria-label' => 'City', - ], - ], + 'spec' => [ + 'name' => 'city', + 'options' => [ + 'column' => 'sm-7', ], - [ - 'spec' => [ - 'name' => 'state', - 'options' => [ 'column' => 'sm' ], - 'attributes' => [ - 'type' => 'text', - 'placeholder' => 'State', - 'aria-label' => 'State', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'placeholder' => 'City', + 'aria-label' => 'City', ], - [ - 'spec' => [ - 'name' => 'zip', - 'options' => [ 'column' => 'sm' ], - 'attributes' => [ - 'type' => 'text', - 'placeholder' => 'Zip', - 'aria-label' => 'Zip', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'state', + 'options' => [ + 'column' => 'sm', + ], + 'attributes' => [ + 'type' => 'text', + 'placeholder' => 'State', + 'aria-label' => 'State', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'name' => 'zip', + 'options' => [ + 'column' => 'sm', + ], + 'attributes' => [ + 'type' => 'text', + 'placeholder' => 'Zip', + 'aria-label' => 'Zip', + ], + ], + ], + ] +])); ``` @@ -784,179 +778,178 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'row_class' => 'row gy-2 gx-3 align-items-center', + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ 'row_class' => 'row gy-2 gx-3 align-items-center' ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'name', - 'options' => [ - 'label' => 'Name', - 'show_label' => false, - 'column' => 'auto', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'autoSizingInput', - 'placeholder' => 'Jane Doe', - ], - ], + 'spec' => [ + 'name' => 'name', + 'options' => [ + 'label' => 'Name', + 'show_label' => false, + 'column' => 'auto', ], - [ - 'spec' => [ - 'name' => 'username', - 'options' => [ - 'label' => 'Username', - 'show_label' => false, - 'column' => 'auto', - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'autoSizingInputGroup', - 'placeholder' => 'Username', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'autoSizingInput', + 'placeholder' => 'Jane Doe', ], - [ - 'spec' => [ - 'name' => 'preference', - 'type' => 'select', - 'options' => [ - 'label' => 'Preference', - 'show_label' => false, - 'column' => 'auto', - 'empty_option' => 'Choose...', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'id' => 'autoSizingSelect', - 'value' => '', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'username', + 'options' => [ + 'label' => 'Username', + 'show_label' => false, + 'column' => 'auto', + 'add_on_prepend' => '@', ], - [ - 'spec' => [ - 'type' => 'checkbox', - 'name' => 'remember_me', - 'options' => [ - 'label' => 'Remember me', - 'use_hidden_element' => false, - 'column' => 'auto', - ], - 'attributes' => [ 'id' => 'autoSizingCheck' ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'autoSizingInputGroup', + 'placeholder' => 'Username', ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Submit', - 'variant' => 'primary', - 'column' => 'auto', - ], + ], + ], + [ + 'spec' => [ + 'name' => 'preference', + 'type' => 'select', + 'options' => [ + 'label' => 'Preference', + 'show_label' => false, + 'column' => 'auto', + 'empty_option' => 'Choose...', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', ], ], + 'attributes' => [ + 'id' => 'autoSizingSelect', + 'value' => '', + ], + ] + ], + [ + 'spec' => [ + 'type' => 'checkbox', + 'name' => 'remember_me', + 'options' => [ + 'label' => 'Remember me', + 'use_hidden_element' => false, + 'column' => 'auto', + ], + 'attributes' => [ + 'id' => 'autoSizingCheck', + ], + ], + ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => [ + 'label' => 'Submit', + 'variant' => 'primary', + 'column' => 'auto', + ], ], - ] - ) -); + ], + ], +])); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // You can then remix that once again with size-specific column classes. -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'row_class' => 'row gx-3 gy-2 align-items-center', + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ 'row_class' => 'row gx-3 gy-2 align-items-center' ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'name', - 'options' => [ - 'label' => 'Name', - 'show_label' => false, - 'column' => 'sm-3', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'specificSizeInputName', - 'placeholder' => 'Jane Doe', - ], - ], + 'spec' => [ + 'name' => 'name', + 'options' => [ + 'label' => 'Name', + 'show_label' => false, + 'column' => 'sm-3', ], - [ - 'spec' => [ - 'name' => 'username', - 'options' => [ - 'label' => 'Username', - 'show_label' => false, - 'column' => 'sm-3', - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'specificSizeInputGroupUsername', - 'placeholder' => 'Username', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'specificSizeInputName', + 'placeholder' => 'Jane Doe', ], - [ - 'spec' => [ - 'name' => 'preference', - 'type' => 'select', - 'options' => [ - 'label' => 'Preference', - 'show_label' => false, - 'column' => 'sm-3', - 'empty_option' => 'Choose...', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'id' => 'specificSizeSelect', - 'value' => '', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'username', + 'options' => [ + 'label' => 'Username', + 'show_label' => false, + 'column' => 'sm-3', + 'add_on_prepend' => '@', ], - [ - 'spec' => [ - 'type' => 'checkbox', - 'name' => 'remember_me', - 'options' => [ - 'label' => 'Remember me', - 'use_hidden_element' => false, - 'column' => 'auto', - ], - 'attributes' => [ 'id' => 'autoSizingCheck2' ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'specificSizeInputGroupUsername', + 'placeholder' => 'Username', ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Submit', - 'variant' => 'primary', - 'column' => 'auto', - ], + ], + ], + [ + 'spec' => [ + 'name' => 'preference', + 'type' => 'select', + 'options' => [ + 'label' => 'Preference', + 'show_label' => false, + 'column' => 'sm-3', + 'empty_option' => 'Choose...', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', ], ], + 'attributes' => [ + 'id' => 'specificSizeSelect', + 'value' => '', + ], + ] + ], + [ + 'spec' => [ + 'type' => 'checkbox', + 'name' => 'remember_me', + 'options' => [ + 'label' => 'Remember me', + 'use_hidden_element' => false, + 'column' => 'auto', + ], + 'attributes' => [ + 'id' => 'autoSizingCheck2', + ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => [ + 'label' => 'Submit', + 'variant' => 'primary', + 'column' => 'auto', + ], + ], + ], + ], +])); ``` @@ -1005,80 +998,77 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_INLINE, + 'column' => 'lg-auto', + 'gutter' => 3, + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ - 'layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_INLINE, - 'column' => 'lg-auto', - 'gutter' => 3, + 'spec' => [ + 'name' => 'username', + 'options' => [ + 'label' => 'Username', + 'show_label' => false, + 'column' => 12, + 'add_on_prepend' => '@', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'inlineFormInputGroupUsername', + 'placeholder' => 'Username', + ], ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'username', - 'options' => [ - 'label' => 'Username', - 'show_label' => false, - 'column' => 12, - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'inlineFormInputGroupUsername', - 'placeholder' => 'Username', - ], + ], + [ + 'spec' => [ + 'name' => 'preference', + 'type' => 'select', + 'options' => [ + 'label' => 'Preference', + 'show_label' => false, + 'column' => 12, + 'empty_option' => 'Choose...', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', ], ], - [ - 'spec' => [ - 'name' => 'preference', - 'type' => 'select', - 'options' => [ - 'label' => 'Preference', - 'show_label' => false, - 'column' => 12, - 'empty_option' => 'Choose...', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'id' => 'inlineFormSelectPref', - 'value' => '', - ], - ], + 'attributes' => [ + 'id' => 'inlineFormSelectPref', + 'value' => '', ], - [ - 'spec' => [ - 'type' => 'checkbox', - 'name' => 'remember_me', - 'options' => [ - 'label' => 'Remember me', - 'use_hidden_element' => false, - 'column' => 12, - ], - 'attributes' => [ 'id' => 'inlineFormCheck' ], - ], + ] + ], + [ + 'spec' => [ + 'type' => 'checkbox', + 'name' => 'remember_me', + 'options' => [ + 'label' => 'Remember me', + 'use_hidden_element' => false, + 'column' => 12, ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Submit', - 'variant' => 'primary', - 'column' => 12, - ], - ], + 'attributes' => [ + 'id' => 'inlineFormCheck', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => [ + 'label' => 'Submit', + 'variant' => 'primary', + 'column' => 12, + ], + ], + ], + ], +])); ``` diff --git a/website/docs/usage/forms/overview.mdx b/website/docs/usage/forms/overview.mdx index a7ecda153..0a5179411 100644 --- a/website/docs/usage/forms/overview.mdx +++ b/website/docs/usage/forms/overview.mdx @@ -48,62 +48,53 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'name' => 'email', - 'options' => [ - 'label' => 'Email address', - 'help_block' => [ - 'content' => 'We\'ll never share your email with anyone else.', - 'attributes' => ['id' => 'emailHelp'], - ], - ], - 'attributes' => [ - 'type' => 'email', - 'id' => 'exampleInputEmail1', - ], - ], + 'spec' => [ + 'name' => 'email', + 'options' => [ + 'label' => 'Email address', + 'help_block' => [ + 'content' => 'We\'ll never share your email with anyone else.', + 'attributes' => ['id' => 'emailHelp'], + ] ], - [ - 'spec' => [ - 'name' => 'password', - 'options' => ['label' => 'Password'], - 'attributes' => [ - 'type' => 'password', - 'id' => 'exampleInputPassword1', - ], - ], + 'attributes' => [ + 'type' => 'email', + 'id' => 'exampleInputEmail1', ], - [ - 'spec' => [ - 'type' => 'checkbox', - 'name' => 'remember_me', - 'options' => [ - 'label' => 'Check me out', - 'use_hidden_element' => false, - ], - 'attributes' => [ 'id' => 'exampleCheck1' ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'password', + 'options' => ['label' => 'Password'], + 'attributes' => [ + 'type' => 'password', + 'id' => 'exampleInputPassword1', ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Submit', - 'variant' => 'primary', - ], - ], + ], + ], + [ + 'spec' => [ + 'type' => 'checkbox', + 'name' => 'remember_me', + 'options' => ['label' => 'Check me out', 'use_hidden_element' => false], + 'attributes' => [ + 'id' => 'exampleCheck1', ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => ['label' => 'Submit', 'variant' => 'primary'], + ], + ], + ] +])); ``` @@ -142,61 +133,55 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'password', - 'options' => [ - 'label' => 'Password', - 'form_group' => false, - 'help_block' => [ - 'content' => 'Your password must be 8-20 characters long, contain letters and numbers, '.'and must not contain spaces, special characters, or emoji.', - 'attributes' => ['id' => 'passwordHelpBlock'], - ], - ], - 'attributes' => [ - 'id' => 'inputPassword5', - 'type' => 'password', - ], +echo $this->formRow($factory->create([ + 'name' => 'password', + 'options' => [ + 'label' => 'Password', + 'form_group' => false, + 'help_block' => [ + 'content' => 'Your password must be 8-20 characters long, contain letters and numbers, ' . + 'and must not contain spaces, special characters, or emoji.', + 'attributes' => ['id' => 'passwordHelpBlock'], ] - ) -); + ], + 'attributes' => [ + 'id' => 'inputPassword5', + 'type' => 'password', + ], +])); -echo PHP_EOL.'
'; +echo PHP_EOL . '
'; // Inline text can use any typical inline HTML element // (be it a , , or something else) // with nothing more than a utility class -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_INLINE, + ], + 'attributes' => [ + 'class' => 'g-3' + ], + 'elements' => [ [ - 'type' => 'form', - 'options' => [ - 'layout' => \TwbsHelper\Form\View\Helper\Form::LAYOUT_INLINE, - ], - 'attributes' => ['class' => 'g-3'], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'password', - 'options' => [ - 'label' => 'Password', - 'help_block' => [ - 'content' => 'Must be 8-20 characters long.', - 'attributes' => ['id' => 'passwordHelpInline'], - ], - ], - 'attributes' => [ - 'id' => 'inputPassword6', - 'type' => 'password', - ], + 'spec' => [ + 'name' => 'password', + 'options' => [ + 'label' => 'Password', + 'help_block' => [ + 'content' => 'Must be 8-20 characters long.', + 'attributes' => ['id' => 'passwordHelpInline'], ], ], + 'attributes' => [ + 'id' => 'inputPassword6', + 'type' => 'password', + ], ], - ] - ) -); - + ], + ], +])); ``` @@ -238,70 +223,66 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'type' => 'fieldset', - 'options' => [ 'label' => 'Disabled fieldset example' ], - 'attributes' => [ 'disabled' => true ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'disabled-input', - 'options' => ['label' => 'Disabled input'], - 'attributes' => [ - 'type' => 'text', - 'id' => 'disabledTextInput', - 'placeholder' => 'Disabled input', - ], - ], + 'spec' => [ + 'type' => 'fieldset', + 'options' => [ + 'label' => 'Disabled fieldset example', + ], + 'attributes' => [ + 'disabled' => true, + ], + 'elements' => [ + [ + 'spec' => [ + 'name' => 'disabled-input', + 'options' => ['label' => 'Disabled input'], + 'attributes' => [ + 'type' => 'text', + 'id' => 'disabledTextInput', + 'placeholder' => 'Disabled input', ], - [ - 'spec' => [ - 'name' => 'disabled-select', - 'type' => 'select', - 'attributes' => ['id' => 'disabledSelect'], - 'options' => [ - 'label' => 'Disabled select menu', - 'empty_option' => 'Disabled select', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'disabled-select', + 'type' => 'select', + 'attributes' => ['id' => 'disabledSelect',], + 'options' => [ + 'label' => 'Disabled select menu', + 'empty_option' => 'Disabled select', ], - [ - 'spec' => [ - 'type' => 'checkbox', - 'name' => 'disabled-fieldset-check', - 'options' => [ - 'label' => 'Can\'t check this', - 'use_hidden_element' => false, - ], - 'attributes' => [ - 'id' => 'disabledFieldsetCheck', - 'disabled' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'type' => 'checkbox', + 'name' => 'disabled-fieldset-check', + 'options' => [ + 'label' => 'Can\'t check this', + 'use_hidden_element' => false ], - [ - 'spec' => [ - 'type' => 'submit', - 'options' => [ - 'label' => 'Submit', - 'variant' => 'primary', - ], - ], + 'attributes' => [ + 'id' => 'disabledFieldsetCheck', + 'disabled' => true, ], ], ], + [ + 'spec' => [ + 'type' => 'submit', + 'options' => ['label' => 'Submit', 'variant' => 'primary'], + ], + ], ], ], - ] - ) -); - + ], + ], +])); ``` diff --git a/website/docs/usage/forms/range.mdx b/website/docs/usage/forms/range.mdx index b0fa1d19d..e027230cb 100644 --- a/website/docs/usage/forms/range.mdx +++ b/website/docs/usage/forms/range.mdx @@ -32,19 +32,16 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'range', - 'options' => ['label' => 'Example Range'], - 'attributes' => [ - 'type' => 'range', - 'id' => 'customRange1', - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'range', + 'options' => [ + 'label' => 'Example Range' + ], + 'attributes' => [ + 'type' => 'range', + 'id' => 'customRange1', + ], +])); ``` @@ -70,20 +67,17 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'range', - 'options' => ['label' => 'Disabled range'], - 'attributes' => [ - 'type' => 'range', - 'id' => 'disabledRange', - 'disabled' => true, - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'range', + 'options' => [ + 'label' => 'Disabled range' + ], + 'attributes' => [ + 'type' => 'range', + 'id' => 'disabledRange', + 'disabled' => true + ], +])); ``` @@ -109,21 +103,18 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'range', - 'options' => ['label' => 'Example Range'], - 'attributes' => [ - 'type' => 'range', - 'id' => 'customRange2', - 'min' => 0, - 'max' => 5, - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'range', + 'options' => [ + 'label' => 'Example Range' + ], + 'attributes' => [ + 'type' => 'range', + 'id' => 'customRange2', + 'min' => 0, + 'max' => 5 + ], +])); ``` @@ -149,22 +140,19 @@ echo $this->formRow( $factory = new \Laminas\Form\Factory(); -echo $this->formRow( - $factory->create( - [ - 'name' => 'range', - 'options' => ['label' => 'Example Range'], - 'attributes' => [ - 'type' => 'range', - 'id' => 'customRange3', - 'min' => 0, - 'max' => 5, - 'step' => 0.5, - ], - ] - ) -); - +echo $this->formRow($factory->create([ + 'name' => 'range', + 'options' => [ + 'label' => 'Example Range' + ], + 'attributes' => [ + 'type' => 'range', + 'id' => 'customRange3', + 'min' => 0, + 'max' => 5, + 'step' => 0.5 + ], +])); ``` diff --git a/website/docs/usage/forms/select.mdx b/website/docs/usage/forms/select.mdx index ea9bb06b1..de12baa37 100644 --- a/website/docs/usage/forms/select.mdx +++ b/website/docs/usage/forms/select.mdx @@ -34,24 +34,21 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->formElement( - $factory->create( - [ - 'name' => 'default-select', - 'type' => 'select', - 'options' => [ - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ 'aria-label' => 'Default select example' ], - ] - ) -); - +echo $this->formElement($factory->create([ + 'name' => 'default-select', + 'type' => 'select', + 'options' => [ + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + ], + 'attributes' => [ + 'aria-label' => 'Default select example', + ], +])); ``` @@ -100,92 +97,79 @@ echo $this->formElement( $factory = new \Laminas\Form\Factory(); -echo $this->formElement( - $factory->create( - [ - 'name' => 'lg-select', - 'type' => 'select', - 'options' => [ - 'size' => 'lg', - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ 'aria-label' => '.form-select-lg example' ], - ] - ) -); - -echo PHP_EOL.'
'; - -echo $this->formElement( - $factory->create( - [ - 'name' => 'sm-select', - 'type' => 'select', - 'options' => [ - 'size' => 'sm', - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ 'aria-label' => '.form-select-sm example' ], - ] - ) -); - -echo PHP_EOL.'
'; - -echo $this->formElement( - $factory->create( - [ - 'name' => 'multiple-select', - 'type' => 'select', - 'options' => [ - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'multiple' => true, - 'aria-label' => 'multiple select example', - ], - ] - ) -); - -echo PHP_EOL.'
'; - -echo $this->formElement( - $factory->create( - [ - 'name' => 'size-3-select', - 'type' => 'select', - 'options' => [ - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'size' => 3, - 'aria-label' => 'size 3 select example', - ], - ] - ) -); - +echo $this->formElement($factory->create([ + 'name' => 'lg-select', + 'type' => 'select', + 'options' => [ + 'size' => 'lg', + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + ], + 'attributes' => [ + 'aria-label' => '.form-select-lg example', + ], +])); + +echo PHP_EOL . '
'; + +echo $this->formElement($factory->create([ + 'name' => 'sm-select', + 'type' => 'select', + 'options' => [ + 'size' => 'sm', + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + ], + 'attributes' => [ + 'aria-label' => '.form-select-sm example', + ], +])); + +echo PHP_EOL . '
'; + +echo $this->formElement($factory->create([ + 'name' => 'multiple-select', + 'type' => 'select', + 'options' => [ + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + ], + 'attributes' => [ + 'multiple' => true, + 'aria-label' => 'multiple select example', + ], +])); + +echo PHP_EOL . '
'; + +echo $this->formElement($factory->create([ + 'name' => 'size-3-select', + 'type' => 'select', + 'options' => [ + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + ], + 'attributes' => [ + 'size' => 3, + 'aria-label' => 'size 3 select example', + ], +])); ``` @@ -213,27 +197,22 @@ echo $this->formElement( $factory = new \Laminas\Form\Factory(); -echo $this->formElement( - $factory->create( - [ - 'name' => 'default-select', - 'type' => 'select', - 'options' => [ - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], - ], - 'attributes' => [ - 'disabled' => true, - 'aria-label' => 'Disabled select example', - ], - ] - ) -); - +echo $this->formElement($factory->create([ + 'name' => 'default-select', + 'type' => 'select', + 'options' => [ + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', + ], + ], + 'attributes' => [ + 'disabled' => true, + 'aria-label' => 'Disabled select example', + ], +])); ``` diff --git a/website/docs/usage/forms/validation.mdx b/website/docs/usage/forms/validation.mdx index 048d59435..1deb3413b 100644 --- a/website/docs/usage/forms/validation.mdx +++ b/website/docs/usage/forms/validation.mdx @@ -82,147 +82,140 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( - [ - 'type' => 'form', - 'options' => [ - 'gutter' => 3, - 'custom_validation' => true, - ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'firstName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'First name', - 'valid_feedback' => 'Looks good!', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom01', - 'required' => true, - 'value' => 'Mark', - ], - ], +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 3, + 'custom_validation' => true, + ], + 'elements' => [ + [ + 'spec' => [ + 'name' => 'firstName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'First name', + 'valid_feedback' => 'Looks good!', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom01', + 'required' => true, + 'value' => 'Mark', ], - [ - 'spec' => [ - 'name' => 'lastName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'Last name', - 'valid_feedback' => 'Looks good!', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom02', - 'required' => true, - 'value' => 'Otto', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'lastName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'Last name', + 'valid_feedback' => 'Looks good!', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom02', + 'required' => true, + 'value' => 'Otto', ], - [ - 'spec' => [ - 'name' => 'username', - 'options' => [ - 'label' => 'Username', - 'column' => 'md-4', - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustomUsername', - 'placeholder' => 'Username', - 'aria-describedby' => 'inputGroupPrepend', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'username', + 'options' => [ + 'label' => 'Username', + 'column' => 'md-4', + 'add_on_prepend' => '@', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustomUsername', + 'placeholder' => 'Username', + 'aria-describedby' => 'inputGroupPrepend', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'city', - 'options' => [ - 'column' => 'md-6', - 'label' => 'City', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom03', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'city', + 'options' => [ + 'column' => 'md-6', + 'label' => 'City' ], - [ - 'spec' => [ - 'name' => 'state', - 'type' => 'select', - 'options' => [ - 'column' => 'md-3', - 'label' => 'State', - 'empty_option' => 'Choose...', - 'value_options' => ['...'], - ], - 'attributes' => [ - 'id' => 'validationCustom04', - 'required' => true, - 'value' => '', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom03', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'zip', - 'options' => [ - 'column' => 'md-3', - 'label' => 'Zip', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom05', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'state', + 'type' => 'select', + 'options' => [ + 'column' => 'md-3', + 'label' => 'State', + 'empty_option' => 'Choose...', + 'value_options' => ['...'], + ], + 'attributes' => [ + 'id' => 'validationCustom04', + 'required' => true, + 'value' => '', ], - [ - 'spec' => [ - 'name' => 'terms-and-conditions', - 'type' => 'checkbox', - 'options' => [ - 'column' => 12, - 'label' => 'Agree to terms and conditions', - ], - 'attributes' => [ - 'id' => 'invalidCheck', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'zip', + 'options' => [ + 'column' => 'md-3', + 'label' => 'Zip' ], - [ - 'spec' => [ - 'name' => 'submit', - 'type' => 'submit', - 'options' => [ - 'column' => 12, - 'label' => 'Submit form', - 'variant' => 'primary', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom05', + 'required' => true, ], ], - ] - )->setMessages( + ], [ - 'username' => ['Please choose a username.'], - 'city' => ['Please provide a valid city.'], - 'state' => ['Please select a valid state.'], - 'zip' => ['Please select a valid zip.'], - 'terms-and-conditions' => ['You must agree before submitting..'], - ] - ) -); - + 'spec' => [ + 'name' => 'terms-and-conditions', + 'type' => 'checkbox', + 'options' => [ + 'column' => 12, + 'label' => 'Agree to terms and conditions', + ], + 'attributes' => [ + 'id' => 'invalidCheck', + 'required' => true, + ], + ], + ], + [ + 'spec' => [ + 'name' => 'submit', + 'type' => 'submit', + 'options' => [ + 'column' => 12, + 'label' => 'Submit form', + 'variant' => 'primary', + ], + ], + ], + ], +])->setMessages([ + 'username' => ['Please choose a username.'], + 'city' => ['Please provide a valid city.'], + 'state' => ['Please select a valid state.'], + 'zip' => ['Please select a valid zip.'], + 'terms-and-conditions' => ['You must agree before submitting..'], +])); ``` @@ -287,134 +280,131 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( - [ - 'type' => 'form', - 'options' => [ 'gutter' => 3 ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'firstName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'First name', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom01', - 'required' => true, - 'value' => 'Mark', - ], - ], +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 3, + ], + 'elements' => [ + [ + 'spec' => [ + 'name' => 'firstName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'First name', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom01', + 'required' => true, + 'value' => 'Mark', ], - [ - 'spec' => [ - 'name' => 'lastName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'Last name', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom02', - 'required' => true, - 'value' => 'Otto', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'lastName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'Last name', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom02', + 'required' => true, + 'value' => 'Otto', ], - [ - 'spec' => [ - 'name' => 'username', - 'options' => [ - 'label' => 'Username', - 'column' => 'md-4', - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustomUsername', - 'placeholder' => 'Username', - 'aria-describedby' => 'inputGroupPrepend', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'username', + 'options' => [ + 'label' => 'Username', + 'column' => 'md-4', + 'add_on_prepend' => '@', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustomUsername', + 'placeholder' => 'Username', + 'aria-describedby' => 'inputGroupPrepend', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'city', - 'options' => [ - 'column' => 'md-6', - 'label' => 'City', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom03', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'city', + 'options' => [ + 'column' => 'md-6', + 'label' => 'City' ], - [ - 'spec' => [ - 'name' => 'state', - 'type' => 'select', - 'options' => [ - 'column' => 'md-3', - 'label' => 'State', - 'empty_option' => 'Choose...', - 'value_options' => ['...'], - ], - 'attributes' => [ - 'id' => 'validationCustom04', - 'required' => true, - 'value' => '', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom03', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'zip', - 'options' => [ - 'column' => 'md-3', - 'label' => 'Zip', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom05', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'state', + 'type' => 'select', + 'options' => [ + 'column' => 'md-3', + 'label' => 'State', + 'empty_option' => 'Choose...', + 'value_options' => ['...'], + ], + 'attributes' => [ + 'id' => 'validationCustom04', + 'required' => true, + 'value' => '', ], - [ - 'spec' => [ - 'name' => 'terms-and-conditions', - 'type' => 'checkbox', - 'options' => [ - 'column' => 12, - 'label' => 'Agree to terms and conditions', - ], - 'attributes' => [ - 'id' => 'invalidCheck', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'zip', + 'options' => [ + 'column' => 'md-3', + 'label' => 'Zip' ], - [ - 'spec' => [ - 'name' => 'submit', - 'type' => 'submit', - 'options' => [ - 'column' => 12, - 'label' => 'Submit form', - 'variant' => 'primary', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom05', + 'required' => true, ], ], - ] - ) -); - + ], + [ + 'spec' => [ + 'name' => 'terms-and-conditions', + 'type' => 'checkbox', + 'options' => [ + 'column' => 12, + 'label' => 'Agree to terms and conditions', + ], + 'attributes' => [ + 'id' => 'invalidCheck', + 'required' => true, + ], + ], + ], + [ + 'spec' => [ + 'name' => 'submit', + 'type' => 'submit', + 'options' => [ + 'column' => 12, + 'label' => 'Submit form', + 'variant' => 'primary', + ], + ], + ], + ], +])); ``` @@ -490,144 +480,139 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( - [ - 'type' => 'form', - 'options' => [ 'gutter' => 3 ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'firstName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'First name', - 'valid_feedback' => 'Looks good!', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom01', - 'required' => true, - 'value' => 'Mark', - ], - ], +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 3, + ], + 'elements' => [ + [ + 'spec' => [ + 'name' => 'firstName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'First name', + 'valid_feedback' => 'Looks good!', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom01', + 'required' => true, + 'value' => 'Mark', ], - [ - 'spec' => [ - 'name' => 'lastName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'Last name', - 'valid_feedback' => 'Looks good!', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom02', - 'required' => true, - 'value' => 'Otto', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'lastName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'Last name', + 'valid_feedback' => 'Looks good!', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom02', + 'required' => true, + 'value' => 'Otto', ], - [ - 'spec' => [ - 'name' => 'username', - 'options' => [ - 'label' => 'Username', - 'column' => 'md-4', - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustomUsername', - 'placeholder' => 'Username', - 'aria-describedby' => 'inputGroupPrepend', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'username', + 'options' => [ + 'label' => 'Username', + 'column' => 'md-4', + 'add_on_prepend' => '@', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustomUsername', + 'placeholder' => 'Username', + 'aria-describedby' => 'inputGroupPrepend', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'city', - 'options' => [ - 'column' => 'md-6', - 'label' => 'City', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom03', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'city', + 'options' => [ + 'column' => 'md-6', + 'label' => 'City' ], - [ - 'spec' => [ - 'name' => 'state', - 'type' => 'select', - 'options' => [ - 'column' => 'md-3', - 'label' => 'State', - 'empty_option' => 'Choose...', - 'value_options' => ['...'], - ], - 'attributes' => [ - 'id' => 'validationCustom04', - 'required' => true, - 'value' => '', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom03', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'zip', - 'options' => [ - 'column' => 'md-3', - 'label' => 'Zip', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationCustom05', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'state', + 'type' => 'select', + 'options' => [ + 'column' => 'md-3', + 'label' => 'State', + 'empty_option' => 'Choose...', + 'value_options' => ['...'], + ], + 'attributes' => [ + 'id' => 'validationCustom04', + 'required' => true, + 'value' => '', ], - [ - 'spec' => [ - 'name' => 'terms-and-conditions', - 'type' => 'checkbox', - 'options' => [ - 'column' => 12, - 'label' => 'Agree to terms and conditions', - ], - 'attributes' => [ - 'id' => 'invalidCheck', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'zip', + 'options' => [ + 'column' => 'md-3', + 'label' => 'Zip' ], - [ - 'spec' => [ - 'name' => 'submit', - 'type' => 'submit', - 'options' => [ - 'column' => 12, - 'label' => 'Submit form', - 'variant' => 'primary', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationCustom05', + 'required' => true, ], ], - ] - )->setMessages( + ], [ - 'username' => ['Please choose a username.'], - 'city' => ['Please provide a valid city.'], - 'state' => ['Please select a valid state.'], - 'zip' => ['Please select a valid zip.'], - 'terms-and-conditions' => ['You must agree before submitting..'], - ] - ) -); - + 'spec' => [ + 'name' => 'terms-and-conditions', + 'type' => 'checkbox', + 'options' => [ + 'column' => 12, + 'label' => 'Agree to terms and conditions', + ], + 'attributes' => [ + 'id' => 'invalidCheck', + 'required' => true, + ], + ], + ], + [ + 'spec' => [ + 'name' => 'submit', + 'type' => 'submit', + 'options' => [ + 'column' => 12, + 'label' => 'Submit form', + 'variant' => 'primary', + ], + ], + ], + ], +])->setMessages([ + 'username' => ['Please choose a username.'], + 'city' => ['Please provide a valid city.'], + 'state' => ['Please select a valid state.'], + 'zip' => ['Please select a valid zip.'], + 'terms-and-conditions' => ['You must agree before submitting..'], +])); ``` @@ -686,107 +671,108 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( - [ - 'type' => 'form', - 'elements' => [ - [ - 'spec' => [ - 'name' => 'textarea', - 'options' => [ 'label' => 'Textarea' ], - 'attributes' => [ - 'type' => 'textarea', - 'id' => 'validationTextarea', - 'required' => true, - 'placeholder' => 'Required example textarea', - ], - ], +echo $this->form($factory->create([ + 'type' => 'form', + 'elements' => [ + [ + 'spec' => [ + 'name' => 'textarea', + 'options' => [ + 'label' => 'Textarea', ], - [ - 'spec' => [ - 'name' => 'checkbox', - 'type' => 'checkbox', - 'options' => [ 'label' => 'Check this checkbox' ], - 'attributes' => [ - 'id' => 'validationFormCheck1', - 'required' => true, - ], - ], + 'attributes' => [ + 'type' => 'textarea', + 'id' => 'validationTextarea', + 'required' => true, + 'placeholder' => 'Required example textarea', ], - [ - 'spec' => [ - 'name' => 'radio-stacked', - 'type' => 'radio', - 'options' => [ - 'value_options' => [ - [ - 'label' => 'Toggle this radio', - 'value' => 'option1', - 'attributes' => ['id' => 'validationFormCheck2'], - ], - [ - 'label' => 'Or toggle this other radio', - 'value' => 'option2', - 'attributes' => ['id' => 'validationFormCheck3'], - ], - ], - ], - 'attributes' => [ 'required' => true ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'checkbox', + 'type' => 'checkbox', + 'options' => [ + 'label' => 'Check this checkbox', ], - [ - 'spec' => [ - 'name' => 'select', - 'type' => 'select', - 'options' => [ - 'empty_option' => 'Open this select menu', - 'value_options' => [ - 1 => 'One', - 2 => 'Two', - 3 => 'Three', - ], + 'attributes' => [ + 'id' => 'validationFormCheck1', + 'required' => true, + ], + ], + ], + [ + 'spec' => [ + 'name' => 'radio-stacked', + 'type' => 'radio', + 'options' => [ + 'value_options' => [ + [ + 'label' => 'Toggle this radio', + 'value' => 'option1', + 'attributes' => ['id' => 'validationFormCheck2'], ], - 'attributes' => [ - 'aria-label' => 'select example', - 'required' => true, + [ + 'label' => 'Or toggle this other radio', + 'value' => 'option2', + 'attributes' => ['id' => 'validationFormCheck3'], ], ], ], - [ - 'spec' => [ - 'name' => 'file', - 'attributes' => [ - 'type' => 'file', - 'aria-label' => 'file example', - 'required' => true, - ], - ], + 'attributes' => [ + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'submit', - 'type' => 'submit', - 'options' => [ - 'label' => 'Submit form', - 'variant' => 'primary', - ], - 'attributes' => [ 'disabled' => true ], + ], + ], + [ + 'spec' => [ + 'name' => 'select', + 'type' => 'select', + 'options' => [ + 'empty_option' => 'Open this select menu', + 'value_options' => [ + 1 => 'One', + 2 => 'Two', + 3 => 'Three', ], ], + 'attributes' => [ + 'aria-label' => 'select example', + 'required' => true, + ], ], - ] - )->setMessages( + ], [ - 'textarea' => ['Please enter a message in the textarea.'], - 'checkbox' => ['Example invalid feedback text'], - 'radio-stacked' => ['More example invalid feedback text'], - 'select' => ['Example invalid select feedback'], - 'file' => ['Example invalid form file feedback'], - ] - ) -); - + 'spec' => [ + 'name' => 'file', + 'attributes' => [ + 'type' => 'file', + 'aria-label' => 'file example', + 'required' => true, + ], + ], + ], + [ + 'spec' => [ + 'name' => 'submit', + 'type' => 'submit', + 'options' => [ + 'label' => 'Submit form', + 'variant' => 'primary', + ], + 'attributes' => [ + 'disabled' => true, + ], + ], + ], + ], +])->setMessages([ + 'textarea' => ['Please enter a message in the textarea.'], + 'checkbox' => ['Example invalid feedback text'], + 'radio-stacked' => ['More example invalid feedback text'], + 'select' => ['Example invalid select feedback'], + 'file' => ['Example invalid form file feedback'], +])); ``` @@ -855,133 +841,126 @@ echo $this->form( $factory = new \Laminas\Form\Factory(); -echo $this->form( - $factory->create( - [ - 'type' => 'form', - 'options' => [ - 'gutter' => 3, - 'custom_validation' => true, - 'tooltip_feedback' => true, - ], - 'elements' => [ - [ - 'spec' => [ - 'name' => 'firstName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'First name', - 'valid_feedback' => 'Looks good!', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationTooltip01', - 'required' => true, - 'value' => 'Mark', - ], - ], +echo $this->form($factory->create([ + 'type' => 'form', + 'options' => [ + 'gutter' => 3, + 'custom_validation' => true, + 'tooltip_feedback' => true, + ], + 'elements' => [ + [ + 'spec' => [ + 'name' => 'firstName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'First name', + 'valid_feedback' => 'Looks good!', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationTooltip01', + 'required' => true, + 'value' => 'Mark', ], - [ - 'spec' => [ - 'name' => 'lastName', - 'options' => [ - 'column' => 'md-4', - 'label' => 'Last name', - 'valid_feedback' => 'Looks good!', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationTooltip02', - 'required' => true, - 'value' => 'Otto', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'lastName', + 'options' => [ + 'column' => 'md-4', + 'label' => 'Last name', + 'valid_feedback' => 'Looks good!', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationTooltip02', + 'required' => true, + 'value' => 'Otto', ], - [ - 'spec' => [ - 'name' => 'username', - 'options' => [ - 'label' => 'Username', - 'column' => 'md-4', - 'add_on_prepend' => '@', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationTooltipUsername', - 'placeholder' => 'Username', - 'aria-describedby' => 'validationTooltipUsernamePrepend', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'username', + 'options' => [ + 'label' => 'Username', + 'column' => 'md-4', + 'add_on_prepend' => '@', + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationTooltipUsername', + 'placeholder' => 'Username', + 'aria-describedby' => 'validationTooltipUsernamePrepend', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'city', - 'options' => [ - 'column' => 'md-6', - 'label' => 'City', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationTooltip03', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'city', + 'options' => [ + 'column' => 'md-6', + 'label' => 'City' ], - [ - 'spec' => [ - 'name' => 'state', - 'type' => 'select', - 'options' => [ - 'column' => 'md-3', - 'label' => 'State', - 'empty_option' => 'Choose...', - 'value_options' => ['...'], - ], - 'attributes' => [ - 'id' => 'validationTooltip04', - 'required' => true, - 'value' => '', - ], - ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationTooltip03', + 'required' => true, ], - [ - 'spec' => [ - 'name' => 'zip', - 'options' => [ - 'column' => 'md-3', - 'label' => 'Zip', - ], - 'attributes' => [ - 'type' => 'text', - 'id' => 'validationTooltip05', - 'required' => true, - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'state', + 'type' => 'select', + 'options' => [ + 'column' => 'md-3', + 'label' => 'State', + 'empty_option' => 'Choose...', + 'value_options' => ['...'], + ], + 'attributes' => [ + 'id' => 'validationTooltip04', + 'required' => true, + 'value' => '', ], - [ - 'spec' => [ - 'name' => 'submit', - 'type' => 'submit', - 'options' => [ - 'column' => 12, - 'label' => 'Submit form', - 'variant' => 'primary', - ], - ], + ], + ], + [ + 'spec' => [ + 'name' => 'zip', + 'options' => [ + 'column' => 'md-3', + 'label' => 'Zip' + ], + 'attributes' => [ + 'type' => 'text', + 'id' => 'validationTooltip05', + 'required' => true, ], ], - ] - )->setMessages( + ], [ - 'username' => ['Please choose a unique and valid username.'], - 'city' => ['Please provide a valid city.'], - 'state' => ['Please select a valid state.'], - 'zip' => ['Please select a valid zip.'], - ] - ) -); - + 'spec' => [ + 'name' => 'submit', + 'type' => 'submit', + 'options' => [ + 'column' => 12, + 'label' => 'Submit form', + 'variant' => 'primary', + ], + ], + ], + ], +])->setMessages([ + 'username' => ['Please choose a unique and valid username.'], + 'city' => ['Please provide a valid city.'], + 'state' => ['Please select a valid state.'], + 'zip' => ['Please select a valid zip.'], +])); ``` diff --git a/website/docs/usage/layout/columns.mdx b/website/docs/usage/layout/columns.mdx index 9e19830c7..fe6ec789e 100644 --- a/website/docs/usage/layout/columns.mdx +++ b/website/docs/usage/layout/columns.mdx @@ -78,56 +78,30 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php grid( +echo $this->grid([ [ - [ - [ - 'One of three columns', - 'One of three columns', - 'One of three columns', - ], - ['align' => 'start'], - ], - [ - [ - 'One of three columns', - 'One of three columns', - 'One of three columns', - ], - ['align' => 'center'], - ], - [ - [ - 'One of three columns', - 'One of three columns', - 'One of three columns', - ], - ['align' => 'end'], - ], - ] -); + ['One of three columns', 'One of three columns', 'One of three columns'], + ['align' => 'start'], + ], + [ + ['One of three columns', 'One of three columns', 'One of three columns'], + ['align' => 'center'], + ], + [ + ['One of three columns', 'One of three columns', 'One of three columns'], + ['align' => 'end'], + ], +]); -echo $this->grid( +echo $this->grid([ [ [ - [ - [ - 'One of three columns', - ['align' => 'start'], - ], - [ - 'One of three columns', - ['align' => 'center'], - ], - [ - 'One of three columns', - ['align' => 'end'], - ], - ], + ['One of three columns', ['align' => 'start']], + ['One of three columns', ['align' => 'center']], + ['One of three columns', ['align' => 'end']], ], - ] -); - + ], +]); ``` @@ -197,89 +171,50 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - [ - 'One of two columns', - ['column' => 4], - ], - [ - 'One of two columns', - ['column' => 4], - ], - ], - ['justify_content' => 'start'], + ['One of two columns', ['column' => 4]], + ['One of two columns', ['column' => 4]], ], + ['justify_content' => 'start'], + ], + [ [ - [ - [ - 'One of two columns', - ['column' => 4], - ], - [ - 'One of two columns', - ['column' => 4], - ], - ], - ['justify_content' => 'center'], + ['One of two columns', ['column' => 4]], + ['One of two columns', ['column' => 4]], ], + ['justify_content' => 'center'], + ], + [ [ - [ - [ - 'One of two columns', - ['column' => 4], - ], - [ - 'One of two columns', - ['column' => 4], - ], - ], - ['justify_content' => 'end'], + ['One of two columns', ['column' => 4]], + ['One of two columns', ['column' => 4]], ], + ['justify_content' => 'end'], + ], + [ [ - [ - [ - 'One of two columns', - ['column' => 4], - ], - [ - 'One of two columns', - ['column' => 4], - ], - ], - ['justify_content' => 'around'], + ['One of two columns', ['column' => 4]], + ['One of two columns', ['column' => 4]], ], + ['justify_content' => 'around'], + ], + [ [ - [ - [ - 'One of two columns', - ['column' => 4], - ], - [ - 'One of two columns', - ['column' => 4], - ], - ], - ['justify_content' => 'between'], + ['One of two columns', ['column' => 4]], + ['One of two columns', ['column' => 4]], ], + ['justify_content' => 'between'], + ], + [ [ - [ - [ - 'One of two columns', - ['column' => 4], - ], - [ - 'One of two columns', - ['column' => 4], - ], - ], - ['justify_content' => 'evenly'], + ['One of two columns', ['column' => 4]], + ['One of two columns', ['column' => 4]], ], - ] -); - + ['justify_content' => 'evenly'], + ], +]); ``` @@ -312,27 +247,22 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ + ['.col-9', ['column' => 9]], [ - [ - '.col-9', - ['column' => 9], - ], - [ - '.col-4
Since 9 + 4 = 13 > 12, '.'this 4-column-wide div gets wrapped onto a new line as one contiguous unit.', - ['column' => 4], - ], - [ - '.col-6
Subsequent columns continue along the new line.', - ['column' => 6], - ], + '.col-4
Since 9 + 4 = 13 > 12, ' . + 'this 4-column-wide div gets wrapped onto a new line as one contiguous unit.', + ['column' => 4], + ], + [ + '.col-6
Subsequent columns continue along the new line.', + ['column' => 6], ], ], - ] -); - + ], +]); ``` @@ -386,52 +316,31 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - ['.col-6 .col-sm-3'], - ['.col-6 .col-sm-3'], - [ - null, - ['divider' => true], - ], - ['.col-6 .col-sm-3'], - ['.col-6 .col-sm-3'], - ], - [ - 'column' => [ - 6, - 'sm-3', - ], - ], + ['.col-6 .col-sm-3'], + ['.col-6 .col-sm-3'], + [null, ['divider' => true]], + ['.col-6 .col-sm-3'], + ['.col-6 .col-sm-3'], ], - ] -); + ['column' => [6, 'sm-3']], + ], +]); -echo $this->grid( +echo $this->grid([ [ [ - [ - ['.col-6 .col-sm-4'], - ['.col-6 .col-sm-4'], - [ - null, - ['divider' => 'md'], - ], - ['.col-6 .col-sm-4'], - ['.col-6 .col-sm-4'], - ], - [ - 'column' => [ - 6, - 'sm-4', - ], - ], + ['.col-6 .col-sm-4'], + ['.col-6 .col-sm-4'], + [null, ['divider' => 'md']], + ['.col-6 .col-sm-4'], + ['.col-6 .col-sm-4'], ], - ] -); - + ['column' => [6, 'sm-4']] + ], +]); ``` @@ -481,42 +390,25 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - 'First in DOM, no order applied', - [ - 'Second in DOM, with a larger order', - ['order' => 5], - ], - [ - 'Third in DOM, with an order of 1', - ['order' => 1], - ], - ], + 'First in DOM, no order applied', + ['Second in DOM, with a larger order', ['order' => 5]], + ['Third in DOM, with an order of 1', ['order' => 1]], ], - ] -); + ], +]); -echo $this->grid( +echo $this->grid([ [ [ - [ - [ - 'First in DOM, ordered last', - ['order' => 'last'], - ], - 'Second in DOM, unordered', - [ - 'Third in DOM, ordered first', - ['order' => 'first'], - ], - ], + ['First in DOM, ordered last', ['order' => 'last']], + 'Second in DOM, unordered', + ['Third in DOM, ordered first', ['order' => 'first']], ], - ] -); - + ], +]); ``` @@ -581,114 +473,55 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - [ - '.col-md-4', - ['column' => 'md-4'], - ], - [ - '.col-md-4 .offset-md-4', - [ - 'column' => 'md-4', - 'offset' => 'md-4', - ], - ], - ], + ['.col-md-4', ['column' => 'md-4']], + ['.col-md-4 .offset-md-4', ['column' => 'md-4', 'offset' => 'md-4']], ], + ], + [ [ - [ - [ - '.col-md-3 .offset-md-3', - [ - 'column' => 'md-3', - 'offset' => 'md-3', - ], - ], - [ - '.col-md-3 .offset-md-3', - [ - 'column' => 'md-3', - 'offset' => 'md-3', - ], - ], - ], + ['.col-md-3 .offset-md-3', ['column' => 'md-3', 'offset' => 'md-3']], + ['.col-md-3 .offset-md-3', ['column' => 'md-3', 'offset' => 'md-3']], ], + ], + [ [ - [ - [ - '.col-md-6 .offset-md-3', - [ - 'column' => 'md-6', - 'offset' => 'md-3', - ], - ], - ], + ['.col-md-6 .offset-md-3', ['column' => 'md-6', 'offset' => 'md-3']], ], - ] -); + ], +]); -echo $this->grid( +echo $this->grid([ [ [ + ['.col-sm-5 .col-md-6', ['column' => ['sm-5', 'md-6']]], [ + '.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0', [ - '.col-sm-5 .col-md-6', - [ - 'column' => [ - 'sm-5', - 'md-6', - ], - ], - ], - [ - '.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0', - [ - 'column' => [ - 'sm-5', - 'md-6', - ], - 'offset' => [ - 'sm-2', - 'md-0', - ], - ], + 'column' => ['sm-5', 'md-6'], + 'offset' => ['sm-2', 'md-0'], ], ], ], + ], + [ [ [ + '.col-sm-6 .col-md-5 .col-lg-6', + ['column' => ['sm-6', 'md-5', 'lg-6']], + ], + [ + '.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0', [ - '.col-sm-6 .col-md-5 .col-lg-6', - [ - 'column' => [ - 'sm-6', - 'md-5', - 'lg-6', - ], - ], - ], - [ - '.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0', - [ - 'column' => [ - 'sm-6', - 'md-5', - 'lg-6', - ], - 'offset' => [ - 'md-2', - 'lg-0', - ], - ], + 'column' => ['sm-6', 'md-5', 'lg-6'], + 'offset' => ['md-2', 'lg-0'], ], ], ], - ] -); - + ], +]); ``` @@ -734,59 +567,26 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - [ - '.col-md-4', - ['column' => 'md-4'], - ], - [ - '.col-md-4 .ms-auto', - [ - 'column' => 'md-4', - 'class' => 'ms-auto', - ], - ], - ], + ['.col-md-4', ['column' => 'md-4']], + ['.col-md-4 .ms-auto', ['column' => 'md-4', 'class' => 'ms-auto']], ], + ], + [ [ - [ - [ - '.col-md-3 .ms-md-auto', - [ - 'column' => 'md-3', - 'class' => 'ms-md-auto', - ], - ], - [ - '.col-md-3 .ms-md-auto', - [ - 'column' => 'md-3', - 'class' => 'ms-md-auto', - ], - ], - ], + ['.col-md-3 .ms-md-auto', ['column' => 'md-3', 'class' => 'ms-md-auto']], + ['.col-md-3 .ms-md-auto', ['column' => 'md-3', 'class' => 'ms-md-auto']], ], + ], + [ [ - [ - [ - '.col-auto .me-auto', - [ - 'column' => 'auto', - 'class' => 'me-auto', - ], - ], - [ - '.col-auto', - ['column' => 'auto'], - ], - ], + ['.col-auto .me-auto', ['column' => 'auto', 'class' => 'me-auto']], + ['.col-auto', ['column' => 'auto']], ], - ] -); - + ], +]); ``` @@ -814,20 +614,13 @@ echo $this->grid( echo $this->gridColumn( '.col-3: width of 25%', - [ - 'column' => 3, - 'class' => 'bg-light border p-3', - ] + ['column' => 3, 'class' => 'bg-light border p-3'] ); echo $this->gridColumn( '.col-sm-9: width of 75% above sm breakpoint', - [ - 'column' => 'sm-9', - 'class' => 'bg-light border p-3', - ] + ['column' => 'sm-9', 'class' => 'bg-light border p-3'] ); - ``` diff --git a/website/docs/usage/layout/containers.mdx b/website/docs/usage/layout/containers.mdx index 4015712e2..33ab31f2a 100644 --- a/website/docs/usage/layout/containers.mdx +++ b/website/docs/usage/layout/containers.mdx @@ -28,7 +28,6 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; container(''); - ``` @@ -69,7 +68,6 @@ echo $this->container('100% wide until medium breakpoint', 'md'); echo $this->container('100% wide until large breakpoint', 'lg'); echo $this->container('100% wide until extra large breakpoint', 'xl'); echo $this->container('100% wide until extra extra large breakpoint', 'xxl'); - ``` @@ -93,7 +91,6 @@ echo $this->container('100% wide until extra extra large breakpoint', 'xxl'); container('...', 'fluid'); - ``` diff --git a/website/docs/usage/layout/grid.mdx b/website/docs/usage/layout/grid.mdx index 8bc06c63a..4c583740b 100644 --- a/website/docs/usage/layout/grid.mdx +++ b/website/docs/usage/layout/grid.mdx @@ -39,18 +39,15 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php grid( +echo $this->grid([ [ [ - [ - 'Column', - 'Column', - 'Column', - ], + 'Column', + 'Column', + 'Column', ], - ] -); - + ], +]); ``` @@ -95,24 +92,21 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - '1 of 2', - '2 of 2', - ], + '1 of 2', + '2 of 2', ], + ], + [ [ - [ - '1 of 3', - '2 of 3', - '3 of 3', - ], + '1 of 3', + '2 of 3', + '3 of 3', ], - ] -); - + ], +]); ``` @@ -156,31 +150,22 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - '1 of 3', - [ - '2 of 3 (wider)', - ['column' => 6], - ], - '3 of 3', - ], + '1 of 3', + ['2 of 3 (wider)', ['column' => 6]], + '3 of 3', ], + ], + [ [ - [ - '1 of 3', - [ - '2 of 3 (wider)', - ['column' => 5], - ], - '3 of 3', - ], + '1 of 3', + ['2 of 3 (wider)', ['column' => 5]], + '3 of 3', ], - ] -); - + ], +]); ``` @@ -224,56 +209,25 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - [ - '1 of 3', - [ - 'column' => [ - true, - 'lg-2', - ], - ], - ], - [ - 'Variable width content', - ['column' => 'md-auto'], - ], - [ - '3 of 3', - [ - 'column' => [ - true, - 'lg-2', - ], - ], - ], - ], - [ 'justify_content' => 'md-center' ], + ['1 of 3', ['column' => [true, 'lg-2']]], + ['Variable width content', ['column' => 'md-auto']], + ['3 of 3', ['column' => [true, 'lg-2']]], ], [ - [ - '1 of 3', - [ - 'Variable width content', - ['column' => 'md-auto'], - ], - [ - '3 of 3', - [ - 'column' => [ - true, - 'lg-2', - ], - ], - ], - ], + 'justify_content' => 'md-center', ], - ] -); - + ], + [ + [ + '1 of 3', + ['Variable width content', ['column' => 'md-auto']], + ['3 of 3', ['column' => [true, 'lg-2']]], + ], + ], +]); ``` @@ -321,31 +275,17 @@ echo $this->grid( ```php grid( +echo $this->grid([ + [ + ['col', 'col', 'col', 'col'], + ], [ [ - [ - 'col', - 'col', - 'col', - 'col', - ], + ['col-8', ['column' => 8]], + ['col-4', ['column' => 4]], ], - [ - [ - [ - 'col-8', - ['column' => 8], - ], - [ - 'col-4', - ['column' => 4], - ], - ], - ], - ] -); - + ], +]); ``` @@ -386,39 +326,21 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - [ - 'col-sm-8', - ['column' => 'sm-8'], - ], - [ - 'col-sm-4', - ['column' => 'sm-4'], - ], - ], + ['col-sm-8', ['column' => 'sm-8']], + ['col-sm-4', ['column' => 'sm-4']], ], + ], + [ [ - [ - [ - 'col-sm', - ['column' => 'sm'], - ], - [ - 'col-sm', - ['column' => 'sm'], - ], - [ - 'col-sm', - ['column' => 'sm'], - ], - ], + ['col-sm', ['column' => 'sm']], + ['col-sm', ['column' => 'sm']], + ['col-sm', ['column' => 'sm']], ], - ] -); - + ], +]); ``` @@ -467,71 +389,27 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - [ - '.col-md-8', - ['column' => 'md-8'], - ], - [ - '.col-6 .col-md-4', - [ - 'column' => [ - 6, - 'md-4', - ], - ], - ], - ], + ['.col-md-8', ['column' => 'md-8']], + ['.col-6 .col-md-4', ['column' => [6, 'md-4']]], ], + ], + [ [ - [ - [ - '.col-6 .col-md-4', - [ - 'column' => [ - 6, - 'md-4', - ], - ], - ], - [ - '.col-6 .col-md-4', - [ - 'column' => [ - 6, - 'md-4', - ], - ], - ], - [ - '.col-6 .col-md-4', - [ - 'column' => [ - 6, - 'md-4', - ], - ], - ], - ], + ['.col-6 .col-md-4', ['column' => [6, 'md-4']]], + ['.col-6 .col-md-4', ['column' => [6, 'md-4']]], + ['.col-6 .col-md-4', ['column' => [6, 'md-4']]], ], + ], + [ [ - [ - [ - '.col-6', - ['column' => 6], - ], - [ - '.col-6', - ['column' => 6], - ], - ], + ['.col-6', ['column' => 6]], + ['.col-6', ['column' => 6]], ], - ] -); - + ], +]); ``` @@ -647,99 +525,52 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ - [ - [ - 'Column', - 'Column', - 'Column', - 'Column', - ], - ['columns' => 2], - ], - ] -); + ['Column', 'Column', 'Column', 'Column'], + ['columns' => 2], + ], +]); -echo $this->grid( +echo $this->grid([ [ - [ - [ - 'Column', - 'Column', - 'Column', - 'Column', - ], - ['columns' => 3], - ], - ] -); + ['Column', 'Column', 'Column', 'Column'], + ['columns' => 3], + ], +]); -echo $this->grid( +echo $this->grid([ [ - [ - [ - 'Column', - 'Column', - 'Column', - 'Column', - ], - ['columns' => 'auto'], - ], - ] -); + ['Column', 'Column', 'Column', 'Column'], + ['columns' => 'auto'], + ], +]); -echo $this->grid( +echo $this->grid([ [ - [ - [ - 'Column', - 'Column', - 'Column', - 'Column', - ], - ['columns' => 4], - ], - ] -); + ['Column', 'Column', 'Column', 'Column'], + ['columns' => 4], + ], +]); -echo $this->grid( +echo $this->grid([ [ [ - [ - 'Column', - 'Column', - [ - 'Column', - ['column' => 6], - ], - 'Column', - ], - ['columns' => 4], + 'Column', + 'Column', + ['Column', ['column' => 6]], + 'Column', ], - ] -); + ['columns' => 4], + ], +]); -echo $this->grid( +echo $this->grid([ [ - [ - [ - 'Column', - 'Column', - 'Column', - 'Column', - ], - [ - 'columns' => [ - 1, - 'sm-2', - 'md-4', - ], - ], - ], - ] -); - + ['Column', 'Column', 'Column', 'Column'], + ['columns' => [1, 'sm-2', 'md-4']], + ], +]); ``` @@ -776,41 +607,20 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ + ['Level 1: .col-sm-3', ['column' => 'sm-3']], [ + null, [ - 'Level 1: .col-sm-3', - ['column' => 'sm-3'], - ], - [ - null, - [ - 'column' => 'sm-9', - 'grid' => [ - 'rows' => [ + 'column' => 'sm-9', + 'grid' => [ + 'rows' => [ + [ [ - [ - [ - 'Level 2: .col-8 .col-sm-6', - [ - 'column' => [ - 8, - 'sm-6', - ], - ], - ], - [ - 'Level 2: .col-4 .col-sm-6', - [ - 'column' => [ - 4, - 'sm-6', - ], - ], - ], - ], + ['Level 2: .col-8 .col-sm-6', ['column' => [8, 'sm-6']]], + ['Level 2: .col-4 .col-sm-6', ['column' => [4, 'sm-6']]], ], ], ], @@ -818,9 +628,8 @@ echo $this->grid( ], ], ], - ] -); - + ], +]); ``` diff --git a/website/docs/usage/layout/gutters.mdx b/website/docs/usage/layout/gutters.mdx index 1ded4b9cf..59430b136 100644 --- a/website/docs/usage/layout/gutters.mdx +++ b/website/docs/usage/layout/gutters.mdx @@ -54,32 +54,33 @@ import HtmlCode from "../../../src/components/HtmlCode.tsx"; ```php grid( +echo $this->grid([ [ [ - [ - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - ], - ['gutter' => ['horizontal' => '5']], + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', ], + ['gutter' => ['horizontal' => '5']], ], - ['class' => 'px-4'] -); +], ['class' => 'px-4']); -echo $this->grid( +echo $this->grid([ [ [ - [ - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - ], - ['gutter' => ['horizontal' => '5']], + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', ], + ['gutter' => ['horizontal' => '5']], ], - ['class' => 'overflow-hidden'] -); - +], ['class' => 'overflow-hidden']); ``` @@ -123,24 +124,28 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - ], - [ - 'column' => 6, - 'gutter' => ['vertical' => '5'], - ], + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', + ], + [ + 'column' => 6, + 'gutter' => ['vertical' => '5'], ], ], - ['class' => 'overflow-hidden'] -); - +], ['class' => 'overflow-hidden']); ``` @@ -184,23 +189,28 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - '
'.' Custom column padding'.'
', - ], - [ - 'column' => 6, - 'gutter' => 2, - ], + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', + '
' . + ' Custom column padding' . + '
', ], - ] -); - + [ + 'column' => 6, + 'gutter' => 2, + ], + ], +]); ``` @@ -274,35 +284,46 @@ echo $this->grid( ```php grid( +echo $this->grid([ [ [ - [ - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - '
'.' Row column'.'
', - ], - [ - 'columns' => [ - 2, - 'lg-5', - ], - 'gutter' => [ - 2, - 'lg-3', - ], - ], + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', + '
' . + ' Row column' . + '
', ], - ] -); - + [ + 'columns' => [2, 'lg-5'], + 'gutter' => [2, 'lg-3'], + ], + ], +]); ``` @@ -332,28 +353,11 @@ echo $this->grid( echo $this->gridRow( [ - [ - '.col-sm-6 .col-md-8', - [ - 'column' => [ - 'sm-6', - 'md-8', - ], - ], - ], - [ - '.col-6 .col-md-4', - [ - 'column' => [ - 6, - 'md-4', - ], - ], - ], + ['.col-sm-6 .col-md-8', ['column' => ['sm-6', 'md-8']]], + ['.col-6 .col-md-4', ['column' => [6, 'md-4']]], ], ['gutter' => 0], ); - ``` diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx index 113ca594b..3ddf2a095 100644 --- a/website/src/pages/index.mdx +++ b/website/src/pages/index.mdx @@ -3,12 +3,7 @@ title: Home ---

- - - +

[![Continuous integration](https://github.com/neilime/twbs-helper-module/workflows/Continuous%20integration/badge.svg)](https://github.com/neilime/twbs-helper-module/actions?query=workflow%3A%22Continuous+integration%22) @@ -49,7 +44,7 @@ title: Home - Website: https://www.escemi.com - Sponsor: https://github.com/sponsors/neilime -- Github: [@neilime](https://github.com/neilime) +- Github: [@escemi-tech](https://github.com/escemi-tech) - LinkedIn: [@escemi](https://www.linkedin.com/company/escemi) ## 📝 License