* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;
$images = ['title' => 'Labels', 'samples' => [['name' => 'Basic labels', 'description' => 'Use <code>label</code> without options to display a label with the given text content.', 'php_code' => "echo BootHelp::label('New');", 'result' => BootHelp::label('New'), 'html_code' => '<span class="label label-default">New</span>'], ['name' => 'Contextual labels', 'description' => 'Use label with the <code>"context"</code> option to change the color (and semantic context) of the label.
Available contexts are <code>"default"</code> (default), <code>"primary"</code>, <code>"success"</code>, <code>"info"</code>, <code>"warning"</code> and <code>"danger"</code>.', 'php_code' => "echo BootHelp::label('New', ['context'=>'success']);", 'result' => BootHelp::label('News', ['context' => 'success']), 'html_code' => '<span class="label label-success">New</span>'], ['name' => 'Complex label\'s content', 'description' => 'You are not limited to pass a string as Label\'s content. You can pass others components too.
In fact, you can pass specific attributes for the <code>span</code> tag that contains the <code>label</code> definition.
To get that, pass the label\'s content as a closure.', 'php_code' => "echo BootHelp::label(['id'=>'my-label', 'context'=>'primary'], function(){\n return [\n BootHelp::icon('headphones'),\n 'Enjoy the music'\n ];\n});", 'result' => BootHelp::label(['id' => 'my-label', 'context' => 'primary'], function () {
return [BootHelp::icon('headphones'), 'Enjoy the music'];
}), 'html_code' => '<span class="label label-primary" id="my-label">
<span class="glyphicon glyphicon-headphones"></span>
Enjoy the music
</span>'], ['name' => 'Complex labels', 'description' => 'To include HTML tags or a long text in the label, pass the label\'s content as a closure.
Actually, you can combine <code>label</code> with others components to get interesting results.', 'php_code' => "echo BootHelp::content_tag('h1', function(){\n return [\n 'Example heading ',\n BootHelp::label(['id'=>'my-label', 'class'=>'en', 'context'=>'danger'], function(){\n return [\n BootHelp::icon('heart'),\n 'My Love!'\n ];\n })\n ];\n});", 'result' => BootHelp::content_tag('h1', function () {
return ['Example heading ', BootHelp::label(['id' => 'my-label', 'class' => 'en', 'context' => 'danger'], function () {
return [BootHelp::icon('heart'), 'My Love!'];
})];
}), 'html_code' => '<h1>
Example heading
<span id="my-label" class="en label label-default">
<span class="glyphicon glyphicon-heart"></span>My Love!
</span>
</h1>']]];
/**
* Label samples.
*/
echo new Sample($images);
return [BootHelp::thumbnail(['column_class' => 'col-sm-6 col-md-4', 'src' => 'Guide/img/pic1.jpg', 'href' => 'http://pixabay.com/'], function () {
return BootHelp::content_tag('div', ['class' => 'caption'], function () {
return [BootHelp::content_tag('h3', 'Thumbnail label'), BootHelp::content_tag('p', 'Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.'), BootHelp::button('Button', ['context' => 'primary']), BootHelp::button('Button')];
});
}), BootHelp::thumbnail(['column_class' => 'col-sm-6 col-md-4', 'src' => 'Guide/img/pic3.jpg', 'href' => 'http://pixabay.com/'], function () {
return BootHelp::content_tag('div', ['class' => 'caption'], function () {
return [BootHelp::content_tag('h3', 'Thumbnail label'), BootHelp::content_tag('p', 'Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.'), BootHelp::button('Button', ['context' => 'primary']), BootHelp::button('Button')];
});
}), BootHelp::thumbnail(['column_class' => 'col-sm-6 col-md-4', 'src' => 'Guide/img/pic4.jpg', 'href' => 'http://pixabay.com/'], function () {
return BootHelp::content_tag('div', ['class' => 'caption'], function () {
return [BootHelp::content_tag('h3', 'Thumbnail label'), BootHelp::content_tag('p', 'Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.'), BootHelp::button('Button', ['context' => 'primary']), BootHelp::button('Button')];
});
})];
}), 'html_code' => '<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img alt="pic1" src="pic1.jpg">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.
</p>
<button class="btn btn-primary">Button</button>
return [BootHelp::link_to('Home'), BootHelp::link_to('Users'), BootHelp::link_to('Profile')];
}), 'html_code' => '<div class="dropdown">
<button class="btn btn-default" type="button">Menu</button>
<button data-toggle="dropdown" id="label-dropdown-6883494473" type="button" class="dropdown-toggle btn btn-default">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul aria-labelledby="label-dropdown-6883494473" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">Home</a></li>
<li><a href="#" role="menuitem">Users</a></li>
<li><a href="#" role="menuitem">Profile</a></li>
</ul>
</div>'], ['name' => 'Complex dropdowns', 'description' => 'To include HTML tags or a long text in the dropdown, pass your content in a closure.
You can specify a custom <code>id</code> which will be added to the dropdown’s <code>ul</code> tag.
You can also specify a custom <code>["button"=> "class"]</code> which will be added to the toggle <code>button</code> tag.', 'php_code' => "echo BootHelp::dropdown('Menu', ['split'=>true, 'id'=>'dropdown', 'button'=>['class'=>'en']], function(){\n return [\n BootHelp::link_to('Home'),\n BootHelp::link_to(BootHelp::content_tag('em', 'Profile'))\n ];\n});", 'result' => BootHelp::dropdown('Menu', ['split' => true, 'id' => 'dropdown', 'button' => ['class' => 'en']], function () {
return [BootHelp::link_to('Home'), BootHelp::link_to(BootHelp::content_tag('em', 'Profile'))];
}), 'html_code' => '<div class="dropdown">
<button class="en btn btn-default" type="button">Menu</button>
<button data-toggle="dropdown" id="dropdown" type="button" class="dropdown-toggle en btn btn-default">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul aria-labelledby="dropdown" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">Home</a></li>
<li><a href="#" role="menuitem"><em>Profile</em></a></li>
</ul>
</div>']]];
/**
* Dropdowns samples.
*/
echo new Sample($dropdowns);
echo BootHelp::content_tag('h1', 'Overview', ['id' => 'overview', 'class' => 'page-header']);
echo BootHelp::content_tag('p', function () {
return "Nowadays Bootstrap is a great framework commonly used by a lot of web designers and web developers to " . " build web sites with a \"fresh looking\" using its HTML and CSS based design templates " . "for typography, forms, buttons, navigation, and other interface components, as well " . "JavaScript extensions.";
});
echo BootHelp::content_tag('p', function () {
return 'However, to get all of its powerful resources, usually you have to write a lot of HTML code, no matters if ' . 'you want to use a simple component, like <a href="http://getbootstrap.com/components/#modal">Modal</a> for instance.';
});
echo BootHelp::content_tag('p', function () {
return "<code>BootHelp</code> (<strong>Boot</strong>strap <strong>Help</strong>ers) is a set of " . "classes that allow you to get all the power of Bootstrap's components with no need " . "to write any HTML code (or at least a minimun amount of it).";
});
echo BootHelp::content_tag('p', function () {
return "You have 2 ways to use BootHelp: Using <code>BootHelp</code> abstract class and then call any of its methods. " . "The other way is to get an instance of the component you want and then echo it.";
});
echo BootHelp::content_tag('h4', ['class' => 'subtitle'], function () {
return "Method 1 - Using BootHelp abstract class:";
});
echo BootHelp::content_tag('div', ['class' => 'bs-example'], function () {
return '<pre><code data-lang="php">' . htmlentities("<?php\nuse BootHelp;\n\n// Let's create a Modal component.\necho BootHelp::modal('How easy is to use BootHelp!!!');\n\n...\n") . '</code></pre>';
});
echo BootHelp::content_tag('h4', ['class' => 'subtitle'], function () {
return "Method 2 - Using directly the component class:";
});
echo BootHelp::content_tag('div', ['class' => 'bs-example'], function () {
return '<pre><code data-lang="php">' . htmlentities("<?php\nuse BootHelp\\Modal;\n\n// Let's create a Modal component.\necho new Modal('How easy is to use BootHelp!!!');\n\n...\n") . '</code></pre>';
});
echo BootHelp::content_tag('p', function () {
return "<code>BootHelp</code> creates all HTML code required!!!. :-D";
});
echo BootHelp::content_tag('p', function () {
return "Now let's review some examples of using <code>BootHelp</code>. " . "(Actually this page has been built using <code>BootHelp</code> class :-P)";
});
