Файл: cobisja/BootHelp/Guide/content/list_group.php
Строк: 359
<?php
/**
* The MIT License
*
* Copyright 2015 cobisja.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* 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 cobisjaBootHelpBootHelp;
use cobisjaBootHelpGuideSample;
$tables = [
'title'=>'List group',
'samples'=>[
[
'name'=> 'Basic List group',
'description'=>'Use <code>listGroup</code> without options, passing just an array of elements
to display them in a very flexible and powerful way.',
'php_code'=> "echo BootHelp::listGroup(
[
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
);",
'result'=> BootHelp::listGroup(
[
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
),
'html_code'=>'<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>'
],
[
'name'=>'Badges support',
'description'=>'Add <code>["badge"=>value]</code> to get automatically Badge support. Any badge
found will automatically be positioned on the right. Be aware that any item you want to display with a badge
must be turned into array.',
'php_code'=>"echo BootHelp::listGroup(
[
['Cras justo odio', 'badge'=>14], // Notice the item is passed as array to set 'badge' option.
['Dapibus ac facilisis in', 'badge'=>2],
['Morbi leo risus', 'badge'=>1],
'Porta ac consectetur ac',
'Vestibulum at eros'
]
);",
'result'=>BootHelp::listGroup(
[
['Cras justo odio', 'badge'=>14],
['Dapibus ac facilisis in', 'badge'=>2],
['Morbi leo risus', 'badge'=>1],
'Porta ac consectetur ac',
'Vestibulum at eros'
]
),
'html_code'=>'<ul class="list-group">
<li class="list-group-item">
Cras justo odio
<span class="badge">14</span>
</li>
<li class="list-group-item">
Dapibus ac facilisis in
<span class="badge">2</span>
</li>
<li class="list-group-item">
Morbi leo risus
<span class="badge">1</span>
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>'
],
[
'name'=>'Linked items',
'description'=>'Linkify list group items by using anchor tags instead of list items (that
also means a parent <code>div</code> instead of an <code>ul</code>). No need for individual parents
around each element. Use <code>["linked"=>true]</code> to get support for linked items.',
'php_code'=>"echo BootHelp::listGroup(
[
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
['linked'=>true]
);",
'result'=>BootHelp::listGroup(
[
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
['linked'=>true]
),
'html_code'=>'<div class="list-group">
<a href="#" class="list-group-item">Cras justo odio</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>'
],
[
'name'=>'Disabled items',
'description'=>'Use <code>["disabled"=>true]</code> with any item to gray it out to appear disabled.
Remember the item you apply <code>disable</code> "just appear" to be disabled. To get an item real disabled,
you have to use javascript. Again, the item you want to disable has to be turned into array to pass disabled
option.',
'php_code'=>"echo BootHelp::listGroup(
[
['Cras justo odio', 'disabled'=>true],
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
['linked'=>true]
);",
'result'=>BootHelp::listGroup(
[
['Cras justo odio', 'disabled'=>true],
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
['linked'=>true]
),
'html_code'=>'<div class="list-group">
<a href="#" class="list-group-item disabled">Cras justo odio</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>'
],
[
'name'=>'Contextual classes',
'description'=>'Use <code>["context"=>context]</code> to style list items, default or linked.
Also includes <code>active</code> state.',
'php_code'=>"echo BootHelp::listGroup(
[
['Dapibus ac facilisis in', 'active'=>true],
['Cras justo odio', 'context'=>'success'],
['Morbi leo risus', 'context'=>'info'],
['Porta ac consectetur ac', 'context'=>'warning'],
['Vestibulum at eros', 'context'=>'danger']
]
);",
'result'=> BootHelp::contentTag('div', ['class'=>'row'], function () {
return [
BootHelp::contentTag('div', ['class'=>'col-sm-6'], function () {
return BootHelp::listGroup(
[
['Dapibus ac facilisis in', 'active'=>true],
['Cras justo odio', 'context'=>'success'],
['Morbi leo risus', 'context'=>'info'],
['Porta ac consectetur ac', 'context'=>'warning'],
['Vestibulum at eros', 'context'=>'danger']
]
);
}),
BootHelp::contentTag('div', ['class'=>'col-sm-6'], function () {
return
BootHelp::listGroup(
[
['Dapibus ac facilisis in', 'active'=>true],
['Cras justo odio', 'context'=>'success'],
['Morbi leo risus', 'context'=>'info'],
['Porta ac consectetur ac', 'context'=>'warning'],
['Vestibulum at eros', 'context'=>'danger']
],
['linked'=>true]
);
})
];
}
),
'html_code'=>'<ul class="list-group">
<li class="list-group-item active">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-success">Cras justo odio</li>
<li class="list-group-item list-group-item-info">Morbi leo risus</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>'
],
[
'name'=>'Customized options',
'description'=>'As you've seen, you can set global options or individual options to get a fully
customized List group. You only have to keep in mind that when you want to customize individuals items, you
have to turning them into an array to properly pass the customize options. When you want to customize the
whole List group, you have to pass the options using another array. Actually you can combine global and individual
options. See the example below.',
'php_code'=>"echo BootHelp::listGroup(
[
['Cras justo odio', 'active'=>true], // customized item (local options).
'Dapibus ac facilisis in',
['Morbi leo risus', 'class'=>'individual-en'], // customized item (local options).
['Porta ac consectetur ac', 'id'=>'my-item'], // customized item (local options).
'Vestibulum at eros'
],
['id'=>'my-list', 'linked'=>true, 'class'=>'global-en'] // Global options (applied on whole list).
);",
'result'=>BootHelp::listGroup(
[
['Cras justo odio', 'active'=>true],
'Dapibus ac facilisis in',
['Morbi leo risus', 'class'=>'individual-en'],
['Porta ac consectetur ac', 'id'=>'my-item'],
'Vestibulum at eros'
],
['id'=>'my-list', 'linked'=>true, 'class'=>'global-en']
),
'html_code'=>'<div class="global-en list-group" id="my-list">
<a href="#" class="list-group-item active">Cras justo odio</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item individual-en">Morbi leo risus</a>
<a href="#" id="my-item" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>'
],
[
'name'=>'Customized content - First method',
'description'=>'You can fully customize the list group content. You can use <code>["title"=>item title]</code> and/or <code>
["content"=>item content]</code> to get an item with a title surrounded by <code>h4 tag</code> and item
content surrounded by <code>p tag</code>. These keys must be applied in a local way, to each item you want
to be affected.',
'php_code'=>"echo BootHelp::listGroup(
[
['title'=>'List group item heading', 'content'=>'Donec id elit non mi porta.', 'active'=>true],
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
['linked'=>true]
);",
'result'=>BootHelp::listGroup(
[
['title'=>'List group item heading', 'content'=>'Donec id elit non mi porta.', 'active'=>true],
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
['linked'=>true]
),
'html_code'=>'<div class="list-group">
<a href="#" class="list-group-item active">
<h4>List group item heading</h4>
<p>Donec id elit non mi porta.</p>
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>'
],
[
'name'=> 'Customized content - Second method',
'description'=>'As you saw, you can use <code>title</code> and/or <code>content</code> keys to
to customize an item content. However if you need a greater level of customization, you can use <code>Closures</code>
to generate either title or content in any way you want. Actually, you can use <code>Closures</code> anywhere
you need to generate customized content. See carefully the example below.',
'php_code'=> "echo BootHelp::listGroup(
[ // The first and fourth items are customized via Closures.
[ // Customized item title.
'title'=>function () {
return BootHelp::contentTag('h2', function () {
return [BootHelp::icon('headphones'), 'List group item heading'];
});
},
'content'=>'Donec id elit non mi porta.',
'active'=>true
],
'Dapibus ac facilisis in',
'Morbi leo risus',
function () {return [BootHelp::button('Browse', ['size'=>'small']), 'Porta ac consectetur ac'];},
'Vestibulum at eros'
],
['linked'=>true]
);",
'result'=> BootHelp::listGroup(
[
[
'title'=>function () {
return BootHelp::contentTag('h2', function () {
return [BootHelp::icon('headphones'), 'List group item heading'];
});
},
'content'=>'Donec id elit non mi porta.',
'active'=>true
],
'Dapibus ac facilisis in',
'Morbi leo risus',
function () {return [BootHelp::button('Browse', ['context'=>'success', 'size'=>'small']), 'Porta ac consectetur ac'];},
'Vestibulum at eros'
],
['linked'=>true]
),
'html_code'=>'<div class="list-group">
<a href="#" class="list-group-item active">
<h2>
<span class="glyphicon glyphicon-headphones"></span>
List group item heading
</h2>
<p>Donec id elit non mi porta.</p>
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">
<button class="btn btn-success btn-sm">Browse</button>
Porta ac consectetur ac
</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>'
]
]
];
/**
* List group samples.
*/
echo new Sample($tables);