README

本包包含Gumby Framework的UI模块，用于Laravel项目。

安装

此包通过Packagist和Composer提供。

将 "caouecs/gumby2": "dev-master" 添加到您的composer.json或运行 composer require caouecs/gumby2。然后您需要在 app/config/app.php 中的提供者列表中添加 "Caouecs\Gumby2\Gumby2ServiceProvider"，以及一大堆别名元素。

'Alert'           => 'Caouecs\Gumby2\Alert',
'Badge'           => 'Caouecs\Gumby2\Badge',
'Breadcrumb'      => 'Caouecs\Gumby2\Breadcrumb',
'Button'          => 'Caouecs\Gumby2\Button',
'Icon'            => 'Caouecs\Gumby2\Icon',
'Image'           => 'Caouecs\Gumby2\Image',
'Label'           => 'Caouecs\Gumby2\Label',
'Tabs'            => 'Caouecs\Gumby2\Tabs',
'Typography'      => 'Caouecs\Gumby2\Typography',
'Valign'          => 'Caouecs\Gumby2\Valign'

因此，我建议您使用Package Installer，Laravel4-Gumby2有一个有效的provides.json文件。安装Package Installer后，只需运行 php artisan package:install caouecs/gumby2；提供者和别名的列表将是最新的。

要求

您必须拥有Gumby Framework的最新版本，以及GumbyUI-extras的最新版本，用于面包屑、底部标签页、带关闭按钮的警报等。

Gumby Framework可在官方网站、GitHub和Bower上获取。

$ bower install gumby

GumbyUI-extras可在GitHub和Bower上获取。

$ bower install gumbyui-extras

建议

此项目还不是稳定版本，方法名称可能会更改。

按钮

您可以使用Button类显示按钮，您可以从Gumby Framework或您自己的CSS中选择设计、颜色和大小。

显示一个具有地铁风格的按钮，圆角，大号，颜色为橙色。

Button::large_rounded_warning("My text")
<div class="large rounded warning btn">My text</div>

显示一个具有美丽风格的按钮，GitHub图标和更多可能性。

Button::pretty_primary("My other text", array("id" => "my_button"))->appendIcon("github")->tag("p")
<p class="medium pretty primary entypo icon-github icon-left btn" id="my_button">My other text</p>

指示器

您可以选择三种不同的指示器：警报、徽章和标签。这与按钮的原理相同。

显示一个次要徽章。

Badge::secondary("My new text")
<span class="secondary badge">My new text</span>

显示一个带关闭按钮的警报框。

Alert::success("Youpi !")->close()
<div class="alert success alert_1">
    <a href="#" gumby-trigger=".alert_1" class="switch close">&times;</a>
    Youpi !
</div>

面包屑

您可以显示一个简单的面包屑。

Breadcrumb::create()->add("Home", "/")->add("News", "/news")->add("My News")
<ul class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/news">News</a></li><li>My News</li></ul>

图标

Gumby提供了一大列表的图标，您可以使用Icon类显示它们。

显示GitHub图标

Icon::github()
<i class="icon entypo icon-github"></i>

显示带有链接的Twitter图标

Icon::twitter()->link("https://twitter.com/caouecs")
<a href="https://twitter.com/caouecs"><i class="icon entypo icon-twitter"></i></a>

响应式图片

您可以使用Image类拥有漂亮的图片。

在六列上显示一个圆形图片

Image::rounded_six("/img/my_image.png", "Nice")
<div class="six columns rounded image"><img src="/img/my_image.png" alt="Nice" /></div>

显示具有Retina选项的图片

Image::polaroid_five("/img/my_second_image.png")->retina()
<div class="five columns photo polaroid image"><img src="/img/my_second_image.png" alt="" gumby-retina /></div>

标签页

使用Tabs类在您的项目中添加标签页。

显示简单的标签页

Tabs::normal()->add("Title 1", "Texte 1")->add("Title 2", "Texte 2", true)
<div class="tabs">
    <ul class="tab-nav">
        <li><a href="#">Title 1</a></li>
        <li class="active"><a href="#">Title 2</a></li>
    </ul>
    <div class="tab-content">
        Texte 1
    </div>
    <div class="tab-content active">
        Texte 2
    </div>
</div>

显示垂直标签页，标签页大小为tab-nav（六列）

Tabs::vertical_six()

显示底部标签页

Tabs::bottom()

显示药丸形状的标签页

Tabs::pill()

排版

给您的文本添加颜色。

Typography::primary("my text")
<p class="text-primary">my text</p>

垂直对齐

使用Valign类垂直对齐图片和文本。

显示垂直对齐

Valign::create()->image("/img/my_image.png")->text("My text")

麻省理工学院开源许可证

在此特此许可，免费提供给任何获得此软件及其相关文档副本（“软件”）的个人，以不受限制地处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许向提供软件的个人授予这样做，前提是遵守以下条件：

上述版权声明和本许可声明应包含在软件的所有副本或主要部分中。

软件按“原样”提供，不提供任何形式的保证，无论是明示的、默示的，包括但不限于适销性、针对特定目的的适用性和非侵权性保证。在任何情况下，作者或版权所有者不对任何索赔、损害或其他责任负责，无论该索赔、损害或其他责任是由于合同行为、侵权或其他方式引起的，无论与软件或软件的使用或其他操作有关。