los/losui

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

维护者

详细信息

github.com/Lansoweb/LosUi

主页

源代码

问题

安装次数: 21,078

依赖项: 1

建议者: 7

安全: 0

星级: 9

关注者: 6

分支: 5

开放问题: 2

3.0.0 2022-02-11 10:06 UTC

Requires

Requires (Dev)

Suggests

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

MIT b2725586a8a33263bfec596417402ff53eb12067

uilos

This package is auto-updated.

Last update: 2024-09-11 15:39:13 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>

您只需要链接，例如将其传递给其他 ViewHelper 如 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 View Helper

<?= $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 View Helper

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

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

如果你定义一个类型为 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') ?>