README

ZF3 视图助手

我在应用中使用的一组视图助手。

描述

一组 Zend Framework 3 视图助手，主要针对 Bootstrap 3 和 4。

Bootstrap 4

• Bootstrap 4 警报组件 - [20 测试]
• Bootstrap 4 徽章组件 - [13 测试]
• Bootstrap 4 按钮组件 - [31 测试]
• Bootstrap 4 卡片组件 - [34 测试]
• Bootstrap 4 列 - [33 测试]
• Bootstrap 4 主体组件 - [27 测试]
• Bootstrap 4 导航栏组件（轻量版） - [2 测试]
• Bootstrap 4 进度条组件 - [28 测试]
• Bootstrap 4 多进度条组件 - [4 测试]
• Bootstrap 4 行 - [17 测试]

Bootstrap 3

• Bootstrap 3 徽章组件
• Bootstrap 3 按钮组件
• Bootstrap 3 主体组件
• Bootstrap 3 标签组件
• Bootstrap 3 进度条组件

代码补全

此包需要我的妹妹包 https://github.com/deanblackborough/zf3-view-helpers-code-completion，它可用于为所有视图助手以及默认的 Zend 视图助手提供代码补全。

在视图中使用 $this。

/** @var $this DBlackborough\Zf3ViewHelpersCC\CustomAndZend */

安装

使用视图助手的最简单方法是使用 composer。 composer require deanblackborough/zf3-view-helpers，或者将类包含在库中的 src/ 中。

视图助手

以下是更复杂视图助手的概述。

Bootstrap 4 警报

创建 Bootstrap 4 警报组件

公共方法

• setBgStyle() - 设置背景颜色实用类
• setHeading() - 设置警报的可选标题
• setTextStyle() - 设置文本颜色实用类

示例

echo $this->bootstrap4Alert($message)->
    setHeading($heading)->
    setBgStyle('primary');

Bootstrap 4 徽章

创建 Bootstrap 4 徽章组件

公共方法

• asLink() - 显示为链接
• pill() - 使用药丸样式
• setBgStyle() - 设置背景颜色实用类
• setTextStyle() - 设置文本颜色实用类

示例

echo $this->bootstrap4Badge($badge)->
    pill()->
    setBgStyle('primary');

Bootstrap 4 按钮

创建 Bootstrap 4 按钮组件

公共方法

• active() - 设置按钮为活动状态
• block() - 添加显示块样式
• customClass() - 添加自定义类
• disabled() - 设置按钮为禁用状态
• large() - 添加大号类
• link() - 添加 URI/URL 以用于默认按钮类型
• setBgStyle() - 设置背景颜色实用类
• setTextStyle() - 设置文本颜色实用类
• setModeButton() - 以按钮形式渲染，而不是锚点
• setModeInput() - 以输入形式渲染，而不是锚点
• setOutlineStyle() - 设置 btn-outline-* 样式
• small() - 添加小号类

示例

echo $this->bootstrap4Button($label)->
    setBgStyle('primary')->
    block()->
    large()->
    link($uri);

Bootstrap 4 卡片

创建 Bootstrap 4 卡片

公共方法

• addCustomAttr() - 向卡片元素添加自定义样式属性
• addCustomBodyAttr() - 向卡片主体元素添加自定义样式属性
• addCustomBodyClass() - 向卡片主体元素添加自定义类
• addCustomClass() - 向卡片属性添加自定义类
• addLinkToBody() - 向卡片主体添加链接部分
• addSubtitleToBody() - 向卡片主体添加副标题
• addTextToBody() - 向卡片主体添加文本部分
• addTitleToBody() - 向卡片主体添加标题部分
• setBgStyle() - 设置背景颜色实用类
• setBody() - 设置整个卡片主体
• setFooter() - 设置整个卡片页脚
• setHeader() - 设置整个页面标题
• setTextStyle() - 设置文本颜色实用类

示例

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 列

创建一个列

公共方法

• lg() - 设置大列宽度
• md() - 设置中列宽度
• setBgStyle() - 设置背景颜色实用类
• setTextStyle() - 设置文本颜色实用类
• sm() - 设置小列宽度
• xl() - 设置超大列宽度
• xs() - 设置超小列宽度

示例

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

创建一个 Bootstrap 4 jumbotron 组件。

公共方法

• fluid() - 切换到流体布局
• setBgStyle() - 设置背景颜色实用类
• setHeadingDisplayLevel() - 设置 H1 的显示类
• setSubHeading() - 添加可选的副标题
• setTextStyle() - 设置文本颜色实用类

示例

echo $this->bootstrap4Jumbotron($heading, $content)->
    setSubHeading($sub_heading)->
    fluid()->
    setHeadingDisplayLevel(1);

Bootstrap 4 Navbar（轻量版）

创建一个 navbar 组件

公共方法

• addBrand() - 添加品牌和可选的 URI
• addNavigation() - 传入导航数组
• inverseScheme() - 添加 navbar-inverse 样式
• lightScheme() - 添加 navbar-light 样式
• setBgStyle() - 设置背景颜色实用类
• setTextStyle() - 设置文本颜色实用类

示例

echo $this->bootstrap4NavbarLite()->
    addBrand('Dlayer', '#uri')->
    addNavigation([ ['uri' => '#', 'label' => 'Item 1', 'active' => false ] ]); ?>

Bootstrap 4 进度条

创建一个进度条组件。

公共方法

• animate() - 动画条形背景样式
• setBgStyle() - 设置背景颜色实用类
• setHeight() - 设置进度条的高度
• setLabel() - 设置进度条中显示的标签
• setTextStyle() - 设置文本颜色实用类
• striped() - 启用进度条背景的条纹样式

示例

echo $this->bootstrap4ProgressBar(25)->
    setBgStyle('info')->
    striped()->
    animate(); ?>

Bootstrap 4 多进度条

创建一个带有多个进度条的进度条组件

公共方法

• animate() - 动画条形背景样式
• setHeight() - 设置进度条的高度
• striped() - 启用进度条背景的条纹样式

示例

echo $this->bootstrap4ProgressBar([25, 15], ['primary', 'info'])->
    striped()->
    animate(); ?>

Bootstrap 4 行

创建一个行

公共方法

• setBgStyle() - 设置背景颜色实用类
• setTextStyle() - 设置文本颜色实用类

示例

echo $this->bootstrap4Row('<p>Content</p>')

echo $this->bootstrap4Row('<p>Content</p>')->
    setBgStyle()->
    setTextStyle(); ?>

Bootstrap 3 按钮

创建一个 Bootstrap 3 按钮

公共方法

• active() - 设置按钮为活动状态
• block() - 添加显示块样式
• disabled() - 设置按钮为禁用状态
• large() - 添加大号类
• link() - 添加 URI/URL 以用于默认按钮类型
• setModeButton - 渲染为按钮，而非锚点
• setModeInput - 渲染为输入，而非锚点
• setStyle() - 设置 btn-* 样式
• small() - 添加小号类
• customClass - 添加自定义类
• extraSmall - 添加超小类

示例

echo $this->bootstrap3Button($label)->
    setStyle('primary')->
    block()->
    large()->
    link($uri);

Bootstrap 3 Jumbotron

创建一个 Bootstrap 3 jumbotron，标题和内容可以设置，可选的副标题以及是否是流体布局。

公共方法

• fluid() - 添加 jumbotron-fluid 类
• subHeading() - 添加可选的副标题，小标签在 H1 内

示例

echo $this->bootstrap3Jumbotron($heading, $content)->
    subHeading($sub_heading)->
    fluid();

Bootstrap 3 进度条

创建一个进度条

公共方法

• animate() - 动画条形背景样式
• color() - 设置进度条的背景颜色
• label() - 设置进度条的标签
• striped() - 启用进度条背景的条纹样式

示例

echo $this->bootstrap3ProgressBar(25)->
    color('info')->
    striped()->
    animate(); ?>

用法

将条目添加到您模块配置数组中的 view_helper 索引中，下面的示例添加了 Jumbotron 和 Button 视图辅助函数，重复此步骤以添加您项目中所需要的所有视图辅助函数。

'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, 
            ... => ...
        ]
    ]

未来计划

• 为每个 Bootstrap 4 组件开发视图辅助函数。
• 为每个 Bootstrap 3 组件开发视图辅助函数。
• 更新视图辅助函数以提供更多对分配内容的控制。
• 额外的视图辅助函数。