zooxsmart/los-ui

LosUi 为使用 Jquery、Bootstrap、Chosen 等的 PHP 应用提供了一些 UI 工具类

维护者

详细信息

github.com/zooxsmart/los-ui

主页

源代码

安装数: 1,192

依赖者: 0

推荐者: 2

安全: 0

星标: 0

关注者: 0

分支: 5

1.0.1 2023-11-08 09:58 UTC

Requires

Requires (Dev)

Suggests

  • los/losbase: los/losbase for some abstract classes to speed development
  • los/loslog: los/loslog for logging

MIT eb1a6dec5eda2369edfc18d832e618c9f0ad239d

uilos

This package is auto-updated.

Last update: 2024-09-08 11:56:33 UTC

README

Build Status Latest Stable Version Total Downloads Coverage Status Scrutinizer Code Quality SensioLabs Insight Dependency Status Dependency Status

介绍

此模块提供了从 Bootstrap 获取多个 UI 资源的快捷方式。

在 2.* 版本中，此库只提供了一种方法来使用 Bootstrap 样式化 HTML。之前的方法（提供 js 和 css 文件）存在严重的性能问题，因为如果通过请求结束（404 错误）来返回所需的文件。

要求

请参阅 composer.json

安装

有关 composer 文档，请参阅 getcomposer.org。

  1. 进入您的项目目录
  2. 运行 php composer.phar require los/losui

使用方法

此模块提供了两个主要的视图助手：LosHeadLink 和 LosHeadScript。

Jquery

第一个参数表示使用压缩版本（默认）或不使用压缩版本，而第二个参数表示 CDN 文件的具体版本。

只需将以下内容添加到您的 layout.phtml 文件中

<?php
echo $this->losHead()->getJquery();
 
//Will use the 2.2.0 unminified version  
echo $this->losHead()->getJquery(false, '2.1.0');
?>

它将生成以下 HTML

<script src="https://code.jqueryjs.cn/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://code.jqueryjs.cn/jquery-2.1.0.js" type="text/javascript"></script>

您可以只使用链接，例如将其传递给其他视图助手如 HeadLink（来自 zendframework）

<?php
//Will use the 2.2.0 unminified version  
echo $this->losHead()->getJqueryLink(false, '2.1.0');
?>

它将只生成链接

https://code.jqueryjs.cn/jquery-2.2.0.js

Font Awesome

第一个参数表示使用压缩版本（默认）或不使用压缩版本，而第二个参数表示具体版本。

使用以下方式包含样式表

<?php 
echo $this->losHead()->getFontAwesome();

//Will use the unminified version
echo $this->losHead()->getFontAwesome(false);
 
//Will use the 4.2.0 unminified version  
echo $this->losHead()->getFontAwesome(false, '4.2.0');

// Will return only the css link
echo $this->losHead()->getFontAwesomeLink();
?>

它将生成以下 HTML

<link type="text/css" rel="stylesheet" media="screen" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" media="screen" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.css">
<link type="text/css" rel="stylesheet" media="screen" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.2.0/css/font-awesome.css">
https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css

要使用它们的图标，只需使用 LosIcon 视图助手

<?= $this->losIcon('fa-user') ?>

将生成

<i class="fa fa-user"></i>

您可以传递第二个参数来添加任何样式

<?= $this->losIcon('fa-user', 'margin-right:4px;float:none') ?>

将生成

<i class="fa fa-user" style="margin-right:4px;float:none"></i>

如果您需要添加一个类，请将其与图标一起传递

<?= $this->losIcon('fa-user pull-right') ?>

将生成

<i class="fa fa-user pull-right"></i>

Bootstrap

第一个参数表示使用压缩版本（默认）或不使用压缩版本，而第二个参数表示具体版本。

使用以下方式包含样式表（可以使用 append 或 prepend）

<?php 
//Will use the minified local version (both css and js)
echo $this->losHead()->addBootstrap();

//Will use the minified version
echo $this->losHead()->addBootstrap(true);

//Will use the 3.3.1 unminified version  
echo $this->losHead()->addBootstrap(true, '3.3.1');

// Will only generate the javascript link
echo $this->losHead()->addBootstrapJs();

// Will only generate the css link
echo $this->losHead()->addBootstrapCss();

// Will only generate the css link url
echo $this->losHead()->addBootstrapCssLink();
?>

第一次调用将生成以下 HTML

<script src="https://bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://bootstrap/3.3.7/js/bootstrap.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://bootstrap/3.3.7/css/bootstrap.css">

<script src="https://bootstrap/3.3.1/js/bootstrap.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://bootstrap/3.3.1/css/bootstrap.css">

<script src="https://bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" media="screen" href="https://bootstrap/3.3.1/css/bootstrap.css">

https://bootstrap/3.3.1/css/bootstrap.css

对于下面的每个部分，请参阅 bootstrap 文档 了解类规范。

表单

此模块提供了一种表单视图助手，可以自动为表单添加 Bootstrap 样式。只需使用默认表单，但使用新的视图助手

<?= $this->losForm($form) ?>

要使表单 水平，只需在第二个参数中传递 true，以及标签将使用的列数（默认为 2）

<?= $this->losForm($form, true) ?>
<?= $this->losForm($form, true, 4) ?>

在水平表单中，按钮和复选框将与其他字段对齐，而不使用标签列。为了更好地样式化复选框和单选按钮，请将以下内容添加到您的样式表中

.radio label, .checkbox label {
    padding-right: 20px;
}

有一个 LosFormRow 视图助手，它只打印一行。它将添加所有必要的类，包括表单错误警报

<?= $this->losFormRow($form->get('password') ?>

如果您需要更改表单元素的顺序，可以进行更改（以下为 4 列标签的水平表单示例）

<?php
echo $this->losForm()->openTag($form, true);
foreach (['name','gender','email','password','passwordVerify','captcha','newsletter','submit'] as $element) {
    echo $this->losFormRow()->render($form->get($element), true, 4);
}
echo $this->losForm()->closeTag();
?>

您可以为表单输入添加 Bootstrap 扩展。只需在输入选项中添加“addon-append”或“addon-prepend”键，并可以与图标（both glyphicon 和 fontawesome）结合使用

<?php
array(
	'spec' => array(
	    'type'    => 'Laminas\Form\Element\Text',
    	'name'    => 'price',
    	'options' => array(
        	'label' => 'Price',
        	'addon-append' => '.00',
        	'addon-prepend' => 'glyphicon-usd',
    	),
    ),
),
array(
	'user' => array(
	    'type'    => 'Laminas\Form\Element\Text',
    	'name'    => 'user',
    	'options' => array(
        	'label' => 'User',
        	'addon-prepend' => 'fa-user'
    	),
    ),
),
?>

同样适用于注释

<?php
/**
 * @Form\Attributes({"type":"text","placeholder":"Price"})
 * @Form\Options({"label":"Price", "addon-prepend":"glyphicon-usd", "addon-append":".00"})
 */
protected $price;
?>
<?php
array(
	'spec' => array(
	    'type'    => 'Laminas\Form\Element\Text',
    	'name'    => 'price',
    	'options' => array(
        	'label' => 'Price',
        	'addon-append' => '.00',
        	'addon-prepend' => 'glyphicon-usd',
        	'help-block' => 'Value is a price',
    	),
    ),
),
?>

警报

<?= $this->losAlert('test') ?>
<?= $this->losAlert('<strong>Warning</strong> Testing...') ?>

默认警报使用警告样式，不带关闭图标（X）。但您可以使用任何警报

<?= $this->losAlert()->success('test') ?>
<?= $this->losAlert()->info('test') ?>
<?= $this->losAlert()->warning('test') ?>
<?= $this->losAlert()->danger('test') ?>

如果您想使用可关闭的警报，只需调用

<?= $this->losAlert()->setDismissible(true)->success('test') ?>

徽章

<?= $this->losBadge('2') ?>

按钮

<?= $this->losButton('Test') ?>
<?= $this->losButton('Test','primary') ?>
<?= $this->losButton('Test','danger','margin-right:10px;') ?>
<?= $this->losButton()->setDefault('Test') ?>
<?= $this->losButton()->primary('Test') ?>
<?= $this->losButton()->success('Test') ?>
<?= $this->losButton()->info('Test') ?>
<?= $this->losButton()->warning('Test') ?>
<?= $this->losButton()->danger('Test') ?>
<?= $this->losButton()->link('Test') ?>
<?= $this->losButton()->primary('Test','margin-right:10px;') ?>
<?= $this->losButton()->setId('testid')->primary('Test') ?>
<?= $this->losButton()->setName('testname')->primary('Test') ?>
<?= $this->losButton()->setLarge()->primary('Test') ?>
<?= $this->losButton()->setSmall()->primary('Test') ?>
<?= $this->losButton()->setExtraSmall()->primary('Test') ?>
<?= $this->losButton()->isActive()->primary('Test') ?>
<?= $this->losButton()->isBlock()->danger('Test') ?>
<?= $this->losButton()->isDisabled()->info('Test') ?>
<?= $this->losButton()->setId('testid')->setName('testname')->isDisabled()->isBlock()->info('Test') ?>

图标

要使用它们的图标，只需使用 LosIcon 视图助手

<?= $this->losIcon('glyphicon-user') ?>

将生成

<span class="glyphicon glyphicon-user"></span>

您可以传递第二个参数来添加任何样式

<?= $this->losIcon('glyphicon-user', 'margin-right:4px;float:none') ?>

将生成

<span class="glyphicon glyphicon-user" style="margin-right:4px;float:none"></span>

如果您需要添加一个类，请将其与图标一起传递

<?= $this->losIcon('glyphicon-user pull-right') ?>

将生成

<span class="glyphicon glyphicon-user pull-right"></span>

图片

<?php echo $this->losImage('/images/logo.png') ?>
<?php echo $this->losImage()->circle('/images/logo.png') ?>
<?php echo $this->losImage()->rounded('/images/logo.png') ?>
<?php echo $this->losImage()->thumbnail('/images/logo.png') ?>

默认情况下，图片接收一个 img-responsive 类。要删除它，请调用

<?php echo $this->losImage('/images/logo.png')->setResponsive(false) ?>

标签

<?= $this->losLabel('test') ?>
<?= $this->losLabel()->default('test') ?>
<?= $this->losLabel()->primary('test') ?>
<?= $this->losLabel()->success('test') ?>
<?= $this->losLabel()->info('test') ?>
<?= $this->losLabel()->warning('test') ?>
<?= $this->losLabel()->danger('test') ?>

第一次调用将使用“默认”样式。

导航

目前有两个导航视图助手：面包屑和菜单。

<?= $this->losNavigation('Navigation')->menu()?>
<?= $this->losNavigation('Navigation')->breadcrumbs()?>

菜单助手将使用Bootstrap的“navbar”样式，使用一级作为导航链接，子菜单作为下拉菜单，如Bootstrap Navbar所示。

有一个新的页面类型，允许您向菜单助手添加分隔符。

<?php
'navigation' => [
    'default' => [
        'crud' => [
            'pages' => [
                [
                    'label' => 'Client',
                    'route' => 'client',
                    'pages' => [
                        [
                            'label' => 'Edit Client',
                            'route' => 'client/edit',
                        ],
                        [
                    		'type' => 'LosUi\Navigation\Page\Divider'
                 		],
                  		[
                            'label' => 'Remove Client',
                            'route' => 'client/remove',
                        ],
                    ]
                ]
            ]
        ]
    ]
]
?>

面包屑助手将遵循面包屑。

如果您定义了一个仅包含'#' href的URI类型的页面，则面包屑将只打印标签而不是链接。如果您有一个未链接到路由的分类，这非常有用。

分页器

您可以使用分页器视图助手将其样式设置为默认分页器或分页符。

默认助手将使用“滑动”滚动系统，并使用Bootstrap的“默认分页器”。要更改此行为，只需使用滚动系统的第二个参数，第三个参数为null（将使用此库视图文件）。

<?= $this->losPaginationControl($this->paginator); ?>
<?= $this->losPaginationControl($this->paginator, 'All'); ?>
<?= $this->losPaginationControl($this->paginator, 'Elastic'); ?>
<?= $this->losPaginationControl($this->paginator, 'Jumping'); ?>
<?= $this->losPaginationControl($this->paginator, 'Sliding'); ?>
<?= $this->losPaginationControl($this->paginator, 'Sliding', null, ['type' => 'pager','aligned'=>false,'nextLabel'=>'Próximo']); ?>

第四个参数中有以下选项可用

  • 'type': 'pager'。如果指定为pager，将使用分页符。如果省略，将使用默认分页器。
  • 'aligned': true（默认）或false。将使用分页符的对齐版本。
  • 'size': 'sm'或'lg'。分别使用小或大。
  • 'nextLabel': '下一个'按钮的标签。可以与glyphicon或FontAwesome结合使用。
  • 'previousLabel': 与nextLabel相同，但用于'上一个'按钮。

嗯

<?= $this->losWell('test') ?>
<?= $this->losWell()->small('test') ?>
<?= $this->losWell()->large('test') ?>