deanblackborough / zf3-view-helpers
A bunch of view helpers that I use in my Zend Framework 3 apps
Requires
- php: ^7.2
- zendframework/zend-view: ^2.10
Requires (Dev)
Suggests
- php: ^7.2
- deanblackborough/zf3-view-helpers-code-completion: ^1
README
ZF3 view helpers
A bunch of view helpers that I use in my apps.
Description
A collection of Zend Framework 3 view helpers, primarily focused on Bootstrap 3 and 4.
Bootstrap 4
- Bootstrap 4 Alert component - [20 tests]
- Bootstrap 4 Badge component - [13 tests]
- Bootstrap 4 Button component - [31 tests]
- Bootstrap 4 Card component - [34 tests]
- Bootstrap 4 Column - [33 tests]
- Bootstrap 4 Jumbotron component - [27 tests]
- Bootstrap 4 Navbar component (lite) - [2 tests]
- Bootstrap 4 Progress bar component - [28 tests]
- Bootstrap 4 Multiple progress bar component - [4 tests]
- Bootstrap 4 Row - [17 tests]
Bootstrap 3
- Bootstrap 3 Badge component
- Bootstrap 3 Button component
- Bootstrap 3 Jumbotron component
- Bootstrap 3 Label component
- Bootstrap 3 progress bar component
Code completion
This package requires my sister package https://github.com/deanblackborough/zf3-view-helpers-code-completion which can be used to provide code completion for all the view helpers as well as the default Zend view helpers.
Override $this in your views.
/** @var $this DBlackborough\Zf3ViewHelpersCC\CustomAndZend */
Installation
The easiest way to use the view helpers is with composer. composer require deanblackborough/zf3-view-helpers
,
alternatively include the classes in src/ in your library.
The view helpers
Below is an overview of the more complex view helpers.
Bootstrap 4 Alert
Create a Bootstrap 4 alert component
Public methods:
- setBgStyle() - Set the background colour utility class
- setHeading() - Set an optional heading for the alert
- setTextStyle() - Set the text colour utility class
Example
echo $this->bootstrap4Alert($message)->
setHeading($heading)->
setBgStyle('primary');
Bootstrap 4 Badge
Create a Bootstrap 4 badge component
Public methods:
- asLink() - Display as a link
- pill() - Use the pill style
- setBgStyle() - Set the background colour utility class
- setTextStyle() - Set the text colour utility class
Example
echo $this->bootstrap4Badge($badge)->
pill()->
setBgStyle('primary');
Bootstrap 4 Button
Create a Bootstrap 4 button component
Public methods:
- active() - Set button as active
- block() - Add display block style
- customClass() - Add a custom class
- disabled() - Set button as disabled
- large() - Add large class
- link() - Add URI/URL for default button type
- setBgStyle() - Set the background colour utility class
- setTextStyle() - Set the text colour utility class
- setModeButton() - Render as a button, not an anchor
- setModeInput() - Render as an input, not an anchor
- setOutlineStyle() - Set btn-outline-* style
- small() - Add small class
Example
echo $this->bootstrap4Button($label)->
setBgStyle('primary')->
block()->
large()->
link($uri);
Bootstrap 4 Card
Create a Bootstrap 4 card
Public methods:
- addCustomAttr() - Add a custom style attribute to a card element
- addCustomBodyAttr() - Add a custom style attribute to a card body element
- addCustomBodyClass() - Add a custom class to a card body element
- addCustomClass() - Add a custom class to a card attribute
- addLinkToBody() - Add a link section to the card body
- addSubtitleToBody() - Add a subtitle to the card body
- addTextToBody() - Add a text section to the card body
- addTitleToBody() - Add a title section to the card body
- setBgStyle() - Set the background colour utility class
- setBody() - Set the entire card body
- setFooter() - Set the entire card footer
- setHeader() - Set the entire care header
- setTextStyle() - Set the text colour utility class
Example
echo $this->bootstrap4Card('', 'width: 20rem;')->
addTitleToBody('Card title')->
addSubtitleToBody('Card subtitle')->
addTextToBody('Some quick example text to build on the card title and make up the bulk of the card\'s content.')->
addTextToBody('More text...')->
addLinkToBody('Card link', '#')->
setHeader('Header')->
setFooter('Footer');
Bootstrap 4 column
Create a column
Public methods
- lg() - Set large column width
- md() - Set medium column width
- setBgStyle() - Set the background colour utility class
- setTextStyle() - Set the text colour utility class
- sm() - Set small column width
- xl() - Set extra large column width
- xs() - Set extra small column width
Examples
echo $this->bootstrap4Column('<p>Content</p>')->md(12);
echo $this->bootstrap4Column('<p>Content</p>')->
xl(6)->
xl(12)->
sm(6)->
setBgStyle()->
setTextStyle(); ?>
Bootstrap 4 Jumbotron
Create a Bootstrap 4 jumbotron component.
Public methods:
- fluid() - Switch to the fluid layout
- setBgStyle() - Set the background colour utility class
- setHeadingDisplayLevel() - Set the display class for the H1
- setSubHeading() - Add an optional sub heading
- setTextStyle() - Set the text colour utility class
Example
echo $this->bootstrap4Jumbotron($heading, $content)->
setSubHeading($sub_heading)->
fluid()->
setHeadingDisplayLevel(1);
Bootstrap 4 Navbar (lite version)
Create a navbar component
Public methods
- addBrand() - Add a brand an option uri
- addNavigation() - Pass in a navigation array
- inverseScheme() - Add the navbar-inverse style
- lightScheme() - Add the navbar-light style
- setBgStyle() - Set the background colour utility class
- setTextStyle() - Set the text colour utility class
Example
echo $this->bootstrap4NavbarLite()->
addBrand('Dlayer', '#uri')->
addNavigation([ ['uri' => '#', 'label' => 'Item 1', 'active' => false ] ]); ?>
Bootstrap 4 progress bar
Create a progress bar component.
Public methods
- animate() - Animate the striped background style
- setBgStyle() - Set the background colour utility class
- setHeight() - Set the height of the progress bar
- setLabel() - Set the label to display in the progress bar
- setTextStyle() - Set the text colour utility class
- striped() - Enable the striped style for the progress bar background
Example
echo $this->bootstrap4ProgressBar(25)->
setBgStyle('info')->
striped()->
animate(); ?>
Bootstrap 4 multiple progress bar
Create a progress bar component with multiple bars
Public methods
- animate() - Animate the striped background style
- setHeight() - Set the height of the progress bar
- striped() - Enable the striped style for the progress bar background
Example
echo $this->bootstrap4ProgressBar([25, 15], ['primary', 'info'])->
striped()->
animate(); ?>
Bootstrap 4 row
Create a row
Public methods
- setBgStyle() - Set the background colour utility class
- setTextStyle() - Set the text colour utility class
Examples
echo $this->bootstrap4Row('<p>Content</p>')
echo $this->bootstrap4Row('<p>Content</p>')->
setBgStyle()->
setTextStyle(); ?>
Bootstrap 3 Button
Create a Bootstrap 3 button
Public methods:
- active() - Set button as active
- block() - Add display block style
- disabled() - Set button as disabled
- large() - Add large class
- link() - Add URI/URL for default button type
- setModeButton - Render as a button, not an anchor
- setModeInput - Render as an input, not an anchor
- setStyle() - Set btn-* style
- small() - Add small class
- customClass - Add a custom class
- extraSmall - Add extra small class
Example
echo $this->bootstrap3Button($label)->
setStyle('primary')->
block()->
large()->
link($uri);
Bootstrap 3 Jumbotron
Create a Bootstrap 3 jumbotron, heading and content can be set and optionally a sub heading and whether or not the jumbotron is fluid.
Public methods:
- fluid() - Add the jumbotron-fluid class
- subHeading() - Add an optional sub heading, small tag inside the H1
Example
echo $this->bootstrap3Jumbotron($heading, $content)->
subHeading($sub_heading)->
fluid();
Bootstrap 3 progress bar
Create a progress bar
Public methods
- animate() - Animate the striped background style
- color() - Set the background color for the progress bar
- label() - Set the label for the progress bar
- striped() - Enable the striped style for the progress bar background
Example
echo $this->bootstrap3ProgressBar(25)->
color('info')->
striped()->
animate(); ?>
Usage
Add entries to the view_helper index in your module config array, the examples below adds the Jumbotron and Button view helpers, repeat for all the view helpers you would like to use in your project.
'view_helpers' => [
'factories' => [
Zf3ViewHelpers\Bootstrap4Jumbotron::class => InvokableFactory::class,
Zf3ViewHelpers\Bootstrap3Button::class => InvokableFactory::class,
Zf3ViewHelpers\Bootstrap4Button::class => InvokableFactory::class,
... => ...
],
'aliases' => [
'bootstrap4Jumbotron' => Zf3ViewHelpers\Bootstrap4Jumbotron::class,
'bootstrap3Button' => Zf3ViewHelpers\Bootstrap4Button::class,
'bootstrap4Button' => Zf3ViewHelpers\Bootstrap4Button::class,
... => ...
]
]
Future plans
- Develop view helpers for each of the Bootstrap 4 components.
- Develop view helpers for each of the Bootstrap 3 components.
- Update view helpers to provide more control over assigned content.
- Additional view helpers.