ui_bibz 2.0.0.alpha10 → 2.0.0.alpha11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +9 -7
- data/app/assets/stylesheets/table.sass +2 -0
- data/app/assets/stylesheets/ui_bibz.sass +0 -2
- data/lib/ui_bibz/ui/core/alert.rb +4 -4
- data/lib/ui_bibz/ui/core/breadcrumb/breadcrumb.rb +2 -2
- data/lib/ui_bibz/ui/core/breadcrumb/components/breadcrumb_link.rb +2 -2
- data/lib/ui_bibz/ui/core/button/button.rb +10 -10
- data/lib/ui_bibz/ui/core/button/button_choice.rb +5 -5
- data/lib/ui_bibz/ui/core/button/button_dropdown.rb +3 -3
- data/lib/ui_bibz/ui/core/button/button_group.rb +5 -1
- data/lib/ui_bibz/ui/core/button/button_link.rb +2 -2
- data/lib/ui_bibz/ui/core/button/button_split_dropdown.rb +5 -5
- data/lib/ui_bibz/ui/core/card/card.rb +4 -4
- data/lib/ui_bibz/ui/core/card/components/block/card_block_text.rb +1 -1
- data/lib/ui_bibz/ui/core/component.rb +7 -7
- data/lib/ui_bibz/ui/core/dropdown/components/dropdown_link.rb +2 -2
- data/lib/ui_bibz/ui/core/dropdown/dropdown.rb +6 -6
- data/lib/ui_bibz/ui/core/glyph.rb +3 -3
- data/lib/ui_bibz/ui/core/input/autocomplete_field.rb +7 -1
- data/lib/ui_bibz/ui/core/input/dropdown_select_field.rb +2 -2
- data/lib/ui_bibz/ui/core/input/formula_field.rb +1 -1
- data/lib/ui_bibz/ui/core/input/multi_select_field.rb +2 -2
- data/lib/ui_bibz/ui/core/input/surround_field.rb +9 -1
- data/lib/ui_bibz/ui/core/input/switch_field.rb +4 -4
- data/lib/ui_bibz/ui/core/label.rb +4 -4
- data/lib/ui_bibz/ui/core/list/components/list.rb +7 -7
- data/lib/ui_bibz/ui/core/list/list_group.rb +5 -5
- data/lib/ui_bibz/ui/core/nav/components/nav_dropdown.rb +2 -2
- data/lib/ui_bibz/ui/core/nav/components/nav_link.rb +3 -3
- data/lib/ui_bibz/ui/core/nav/components/nav_link_link.rb +1 -1
- data/lib/ui_bibz/ui/core/nav/components/navbar_nav.rb +1 -1
- data/lib/ui_bibz/ui/core/nav/nav.rb +1 -1
- data/lib/ui_bibz/ui/core/nav/navbar.rb +3 -3
- data/lib/ui_bibz/ui/core/progress.rb +5 -5
- data/lib/ui_bibz/ui/core/stars.rb +3 -3
- data/lib/ui_bibz/ui/ux/table/components/actions.rb +4 -0
- data/lib/ui_bibz/ui/ux/table/components/as.rb +8 -4
- data/lib/ui_bibz/ui/ux/table/components/column.rb +17 -16
- data/lib/ui_bibz/ui/ux/table/components/thead.rb +4 -4
- data/lib/ui_bibz/ui/ux/table/table.rb +8 -8
- data/lib/ui_bibz/ui/ux/table/table_card.rb +4 -4
- data/lib/ui_bibz/version.rb +1 -1
- data/test/dummy/db/schema.rb +1 -1
- data/test/ui/breadcrumb_test.rb +2 -2
- data/test/ui/button_test.rb +24 -24
- data/test/ui/card_test.rb +5 -5
- data/test/ui/component_test.rb +2 -2
- data/test/ui/dropdown_test.rb +1 -1
- data/test/ui/input_switch_field_test.rb +3 -3
- data/test/ui/inputs_test.rb +5 -5
- data/test/ui/list_group_test.rb +5 -5
- data/test/ui/nav_test.rb +3 -3
- data/test/ui/stars_test.rb +2 -2
- data/test/ui/table_test.rb +7 -7
- data/test/ui_helper_test.rb +16 -16
- data/ui_bibz.gemspec +2 -2
- metadata +5 -109
- data/doc/UiBibz.html +0 -129
- data/doc/UiBibz/Concerns.html +0 -115
- data/doc/UiBibz/Concerns/Models.html +0 -115
- data/doc/UiBibz/Concerns/Models/Searchable.html +0 -120
- data/doc/UiBibz/Concerns/Models/Searchable/ClassMethods.html +0 -174
- data/doc/UiBibz/Helpers.html +0 -115
- data/doc/UiBibz/Helpers/MetaHelper.html +0 -273
- data/doc/UiBibz/Helpers/UiCoreHelper.html +0 -1234
- data/doc/UiBibz/Helpers/UiUxHelper.html +0 -463
- data/doc/UiBibz/Helpers/UtilsHelper.html +0 -187
- data/doc/UiBibz/Rails.html +0 -115
- data/doc/UiBibz/Rails/Engine.html +0 -123
- data/doc/UiBibz/Ui.html +0 -119
- data/doc/UiBibz/Ui/Base.html +0 -304
- data/doc/UiBibz/Ui/Core.html +0 -128
- data/doc/UiBibz/Ui/Core/Alert.html +0 -383
- data/doc/UiBibz/Ui/Core/Bar.html +0 -372
- data/doc/UiBibz/Ui/Core/Breadcrumb.html +0 -442
- data/doc/UiBibz/Ui/Core/BreadcrumbLink.html +0 -369
- data/doc/UiBibz/Ui/Core/Button.html +0 -380
- data/doc/UiBibz/Ui/Core/ButtonDropdown.html +0 -401
- data/doc/UiBibz/Ui/Core/ButtonGroup.html +0 -372
- data/doc/UiBibz/Ui/Core/ButtonLink.html +0 -382
- data/doc/UiBibz/Ui/Core/ButtonSplitDropdown.html +0 -403
- data/doc/UiBibz/Ui/Core/Col.html +0 -373
- data/doc/UiBibz/Ui/Core/Component.html +0 -1087
- data/doc/UiBibz/Ui/Core/Dropdown.html +0 -663
- data/doc/UiBibz/Ui/Core/DropdownDivider.html +0 -301
- data/doc/UiBibz/Ui/Core/DropdownHeader.html +0 -355
- data/doc/UiBibz/Ui/Core/DropdownLink.html +0 -376
- data/doc/UiBibz/Ui/Core/DropdownList.html +0 -382
- data/doc/UiBibz/Ui/Core/Glyph.html +0 -385
- data/doc/UiBibz/Ui/Core/Jumbotron.html +0 -379
- data/doc/UiBibz/Ui/Core/Label.html +0 -379
- data/doc/UiBibz/Ui/Core/List.html +0 -528
- data/doc/UiBibz/Ui/Core/ListGroup.html +0 -474
- data/doc/UiBibz/Ui/Core/Modal.html +0 -543
- data/doc/UiBibz/Ui/Core/ModalBody.html +0 -353
- data/doc/UiBibz/Ui/Core/ModalFooter.html +0 -353
- data/doc/UiBibz/Ui/Core/ModalHeader.html +0 -359
- data/doc/UiBibz/Ui/Core/Nav.html +0 -515
- data/doc/UiBibz/Ui/Core/NavDropdown.html +0 -391
- data/doc/UiBibz/Ui/Core/NavLink.html +0 -364
- data/doc/UiBibz/Ui/Core/Navbar.html +0 -646
- data/doc/UiBibz/Ui/Core/NavbarForm.html +0 -364
- data/doc/UiBibz/Ui/Core/NavbarNav.html +0 -302
- data/doc/UiBibz/Ui/Core/NavbarText.html +0 -355
- data/doc/UiBibz/Ui/Core/Panel.html +0 -617
- data/doc/UiBibz/Ui/Core/ProgressBar.html +0 -462
- data/doc/UiBibz/Ui/Core/Row.html +0 -350
- data/doc/UiBibz/Ui/Core/Stars.html +0 -371
- data/doc/UiBibz/Ui/Ux.html +0 -128
- data/doc/UiBibz/Ui/Ux/Actionable.html +0 -478
- data/doc/UiBibz/Ui/Ux/Actions.html +0 -602
- data/doc/UiBibz/Ui/Ux/Column.html +0 -1249
- data/doc/UiBibz/Ui/Ux/Columns.html +0 -338
- data/doc/UiBibz/Ui/Ux/Grid.html +0 -485
- data/doc/UiBibz/Ui/Ux/Paginable.html +0 -381
- data/doc/UiBibz/Ui/Ux/Searchable.html +0 -376
- data/doc/UiBibz/Ui/Ux/Sortable.html +0 -300
- data/doc/UiBibz/Ui/Ux/Store.html +0 -1176
- data/doc/UiBibz/Ui/Ux/Table.html +0 -694
- data/doc/UiBibz/Ui/Ux/TableAction.html +0 -309
- data/doc/UiBibz/Ui/Ux/TablePagination.html +0 -342
- data/doc/UiBibz/Ui/Ux/TablePaginationPerPage.html +0 -348
- data/doc/UiBibz/Ui/Ux/TablePanel.html +0 -680
- data/doc/UiBibz/Ui/Ux/TableSearchField.html +0 -304
- data/doc/UiBibz/Utils.html +0 -115
- data/doc/UiBibz/Utils/Internationalization.html +0 -262
- data/doc/_index.html +0 -706
- data/doc/class_list.html +0 -58
- data/doc/css/common.css +0 -1
- data/doc/css/full_list.css +0 -57
- data/doc/css/style.css +0 -339
- data/doc/file.README.html +0 -1261
- data/doc/file_list.html +0 -60
- data/doc/frames.html +0 -26
- data/doc/images/alert.png +0 -0
- data/doc/images/breadcrumb.png +0 -0
- data/doc/images/button.png +0 -0
- data/doc/images/button_dropdown.png +0 -0
- data/doc/images/button_group.png +0 -0
- data/doc/images/button_link.png +0 -0
- data/doc/images/button_split_dropdown.png +0 -0
- data/doc/images/etiquette.png +0 -0
- data/doc/images/glyph.png +0 -0
- data/doc/images/list.png +0 -0
- data/doc/images/modal.png +0 -0
- data/doc/images/nav.png +0 -0
- data/doc/images/navbar.png +0 -0
- data/doc/images/panel.png +0 -0
- data/doc/images/progress_bar.png +0 -0
- data/doc/images/stars.png +0 -0
- data/doc/images/table.png +0 -0
- data/doc/images/table_pagination_per_page.png +0 -0
- data/doc/images/table_panel.png +0 -0
- data/doc/images/table_search_field.png +0 -0
- data/doc/images/ui-bibz-logo-without-border.gif +0 -0
- data/doc/images/ui-bibz-logo.gif +0 -0
- data/doc/index.html +0 -1261
- data/doc/js/app.js +0 -219
- data/doc/js/full_list.js +0 -181
- data/doc/js/jquery.js +0 -4
- data/doc/method_list.html +0 -1329
- data/doc/top-level-namespace.html +0 -112
data/doc/file_list.html
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
2
|
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
3
|
-
<html>
|
|
4
|
-
<head>
|
|
5
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
6
|
-
|
|
7
|
-
<link rel="stylesheet" href="css/full_list.css" type="text/css" media="screen" charset="utf-8" />
|
|
8
|
-
|
|
9
|
-
<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" charset="utf-8" />
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
|
|
14
|
-
|
|
15
|
-
<script type="text/javascript" charset="utf-8" src="js/full_list.js"></script>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<title>File List</title>
|
|
19
|
-
<base id="base_target" target="_parent" />
|
|
20
|
-
</head>
|
|
21
|
-
<body>
|
|
22
|
-
<script type="text/javascript" charset="utf-8">
|
|
23
|
-
var hasFrames = false;
|
|
24
|
-
try {
|
|
25
|
-
hasFrames = window.top.frames.main ? true : false;
|
|
26
|
-
} catch (e) { }
|
|
27
|
-
if (hasFrames) {
|
|
28
|
-
document.getElementById('base_target').target = 'main';
|
|
29
|
-
document.body.className = 'frames';
|
|
30
|
-
}
|
|
31
|
-
</script>
|
|
32
|
-
<div id="content">
|
|
33
|
-
<h1 id="full_list_header">File List</h1>
|
|
34
|
-
<div id="nav">
|
|
35
|
-
|
|
36
|
-
<span><a target="_self" href="class_list.html">
|
|
37
|
-
Classes
|
|
38
|
-
</a></span>
|
|
39
|
-
|
|
40
|
-
<span><a target="_self" href="method_list.html">
|
|
41
|
-
Methods
|
|
42
|
-
</a></span>
|
|
43
|
-
|
|
44
|
-
<span><a target="_self" href="file_list.html">
|
|
45
|
-
Files
|
|
46
|
-
</a></span>
|
|
47
|
-
|
|
48
|
-
</div>
|
|
49
|
-
<div id="search">Search: <input type="text" /></div>
|
|
50
|
-
|
|
51
|
-
<ul id="full_list" class="file">
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<li class="r1"><span class="object_link"><a href="index.html" title="README">README</a></a></li>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</ul>
|
|
58
|
-
</div>
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
data/doc/frames.html
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
|
|
2
|
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
|
3
|
-
|
|
4
|
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
5
|
-
<head>
|
|
6
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
7
|
-
<title>Documentation by YARD 0.8.7.6</title>
|
|
8
|
-
</head>
|
|
9
|
-
<script type="text/javascript" charset="utf-8">
|
|
10
|
-
window.onload = function() {
|
|
11
|
-
var match = unescape(window.location.hash).match(/^#!(.+)/);
|
|
12
|
-
var name = match ? match[1] : 'index.html';
|
|
13
|
-
name = name.replace(/^(\w+):\/\//, '').replace(/^\/\//, '');
|
|
14
|
-
document.writeln('<frameset cols="20%,*">' +
|
|
15
|
-
'<frame name="list" src="class_list.html" />' +
|
|
16
|
-
'<frame name="main" src="' + escape(name) + '" />' +
|
|
17
|
-
'</frameset>');
|
|
18
|
-
}
|
|
19
|
-
</script>
|
|
20
|
-
<noscript>
|
|
21
|
-
<frameset cols="20%,*">
|
|
22
|
-
<frame name="list" src="class_list.html" />
|
|
23
|
-
<frame name="main" src="index.html" />
|
|
24
|
-
</frameset>
|
|
25
|
-
</noscript>
|
|
26
|
-
</html>
|
data/doc/images/alert.png
DELETED
|
Binary file
|
data/doc/images/breadcrumb.png
DELETED
|
Binary file
|
data/doc/images/button.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc/images/button_group.png
DELETED
|
Binary file
|
data/doc/images/button_link.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc/images/etiquette.png
DELETED
|
Binary file
|
data/doc/images/glyph.png
DELETED
|
Binary file
|
data/doc/images/list.png
DELETED
|
Binary file
|
data/doc/images/modal.png
DELETED
|
Binary file
|
data/doc/images/nav.png
DELETED
|
Binary file
|
data/doc/images/navbar.png
DELETED
|
Binary file
|
data/doc/images/panel.png
DELETED
|
Binary file
|
data/doc/images/progress_bar.png
DELETED
|
Binary file
|
data/doc/images/stars.png
DELETED
|
Binary file
|
data/doc/images/table.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc/images/table_panel.png
DELETED
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/doc/images/ui-bibz-logo.gif
DELETED
|
Binary file
|
data/doc/index.html
DELETED
|
@@ -1,1261 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
2
|
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
3
|
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
6
|
-
<title>
|
|
7
|
-
File: README
|
|
8
|
-
|
|
9
|
-
— Documentation by YARD 0.8.7.6
|
|
10
|
-
|
|
11
|
-
</title>
|
|
12
|
-
|
|
13
|
-
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
|
|
14
|
-
|
|
15
|
-
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
|
|
16
|
-
|
|
17
|
-
<script type="text/javascript" charset="utf-8">
|
|
18
|
-
hasFrames = window.top.frames.main ? true : false;
|
|
19
|
-
relpath = '';
|
|
20
|
-
framesUrl = "frames.html#!file.README.html";
|
|
21
|
-
</script>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
|
|
25
|
-
|
|
26
|
-
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</head>
|
|
30
|
-
<body>
|
|
31
|
-
<div id="header">
|
|
32
|
-
<div id="menu">
|
|
33
|
-
|
|
34
|
-
<a href="_index.html">Index</a> »
|
|
35
|
-
<span class="title">File: README</span>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<div class="noframes"><span class="title">(</span><a href="." target="_top">no frames</a><span class="title">)</span></div>
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
<div id="search">
|
|
42
|
-
|
|
43
|
-
<a class="full_list_link" id="class_list_link"
|
|
44
|
-
href="class_list.html">
|
|
45
|
-
Class List
|
|
46
|
-
</a>
|
|
47
|
-
|
|
48
|
-
<a class="full_list_link" id="method_list_link"
|
|
49
|
-
href="method_list.html">
|
|
50
|
-
Method List
|
|
51
|
-
</a>
|
|
52
|
-
|
|
53
|
-
<a class="full_list_link" id="file_list_link"
|
|
54
|
-
href="file_list.html">
|
|
55
|
-
File List
|
|
56
|
-
</a>
|
|
57
|
-
|
|
58
|
-
</div>
|
|
59
|
-
<div class="clear"></div>
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<iframe id="search_frame"></iframe>
|
|
63
|
-
|
|
64
|
-
<div id="content"><div id='filecontents'>
|
|
65
|
-
<p><img
|
|
66
|
-
src="http://hummel.link/Ui-Bibz/1.2.3/images/ui-bibz-logo-without-border.gif"></p>
|
|
67
|
-
|
|
68
|
-
<p><a href="http://badge.fury.io/rb/ui_bibz"><img
|
|
69
|
-
src="https://badge.fury.io/rb/ui_bibz.svg"></a> <a
|
|
70
|
-
href="https://travis-ci.org/thooams/Ui-Bibz"><img
|
|
71
|
-
src="https://travis-ci.org/thooams/Ui-Bibz.svg"></a> <a
|
|
72
|
-
href="https://codeclimate.com/github/thooams/Ui-Bibz"><img
|
|
73
|
-
src="https://codeclimate.com/github/thooams/Ui-Bibz/badges/gpa.svg"></a> <a
|
|
74
|
-
href="https://codeclimate.com/github/thooams/Ui-Bibz"><img
|
|
75
|
-
src="https://codeclimate.com/github/thooams/Ui-Bibz/badges/coverage.svg"></a>
|
|
76
|
-
<a href="http://inch-ci.org/github/thooams/Ui-Bibz"><img
|
|
77
|
-
src="http://inch-ci.org/github/thooams/Ui-Bibz.svg?branch=master"></a> <a
|
|
78
|
-
href="https://hakiri.io/github/thooams/Ui-Bibz/master"><img
|
|
79
|
-
src="https://hakiri.io/github/thooams/Ui-Bibz/master.svg"></a> <a
|
|
80
|
-
href="https://gemnasium.com/thooams/Ui-Bibz"><img
|
|
81
|
-
src="https://gemnasium.com/thooams/Ui-Bibz.svg"></a></p>
|
|
82
|
-
|
|
83
|
-
<p>This project rocks and uses MIT-LICENSE.</p>
|
|
84
|
-
|
|
85
|
-
<h1 id="label-Ui+Bibz">Ui Bibz</h1>
|
|
86
|
-
|
|
87
|
-
<blockquote>
|
|
88
|
-
<p>Ui Bibz est un <a
|
|
89
|
-
href="http://fr.wikipedia.org/wiki/Framework_d%27interface">framework
|
|
90
|
-
d’interface</a> permettant de construire une interface très rapidement et
|
|
91
|
-
simplement à l'aide de <a href="http://rubyonrails.org/">Ruby on Rails
|
|
92
|
-
4</a> et de <a href="http://getbootstrap.com/">Boostrap 3</a>.</p>
|
|
93
|
-
</blockquote>
|
|
94
|
-
|
|
95
|
-
<p>Ui Bibz charge la librairie <a href="http://getbootstrap.com/">boostrap</a>
|
|
96
|
-
et <a href="http://fontawesome.io/">awesomefont</a>.</p>
|
|
97
|
-
|
|
98
|
-
<p>Tous les composants du framework Ui Bibz comportent l'agument
|
|
99
|
-
<em>options</em> et l'argument <em>html_options</em>. Ces éléments sont
|
|
100
|
-
basés sur l'élément <code>Component</code>. Un <code>component</code>
|
|
101
|
-
accepte un contenu par variable ou par block.</p>
|
|
102
|
-
|
|
103
|
-
<h3 id="label-Component">Component</h3>
|
|
104
|
-
|
|
105
|
-
<p>L'élément <code>component</code> accepte dans content et block :</p>
|
|
106
|
-
<ul><li>
|
|
107
|
-
<p>le contenu</p>
|
|
108
|
-
</li></ul>
|
|
109
|
-
|
|
110
|
-
<p>L'élément <code>component</code> à pour <code>options</code> un Hash
|
|
111
|
-
acceptant les clefs :</p>
|
|
112
|
-
<ul><li>
|
|
113
|
-
<p><a href="#state-values">state</a></p>
|
|
114
|
-
</li><li>
|
|
115
|
-
<p><a href="#glyph-arguments">glyph</a></p>
|
|
116
|
-
</li><li>
|
|
117
|
-
<p><a href="#status-values">status</a></p>
|
|
118
|
-
</li><li>
|
|
119
|
-
<p>class</p>
|
|
120
|
-
</li></ul>
|
|
121
|
-
|
|
122
|
-
<p>L'élément <code>component</code> à pour <code>html_options</code> un
|
|
123
|
-
Hash acceptant les clefs :</p>
|
|
124
|
-
<ul><li>
|
|
125
|
-
<p>class</p>
|
|
126
|
-
</li><li>
|
|
127
|
-
<p>data</p>
|
|
128
|
-
</li><li>
|
|
129
|
-
<p>…</p>
|
|
130
|
-
</li></ul>
|
|
131
|
-
|
|
132
|
-
<p>Exemple :</p>
|
|
133
|
-
|
|
134
|
-
<pre class="code ruby"><code class="ruby">Component.new 'Exemple', { state: :success, glyph: { name: 'pencil', size: 3} }, { class: 'exemple' }
|
|
135
|
-
|
|
136
|
-
Component.new { state: :success, glyph: 'eye' }, { class: 'exemple' } do
|
|
137
|
-
'Exemple'
|
|
138
|
-
end</code></pre>
|
|
139
|
-
|
|
140
|
-
<p>Signature :</p>
|
|
141
|
-
|
|
142
|
-
<pre class="code ruby"><code class="ruby"><span class='const'>Component</span><span class='period'>.</span><span class='id identifier rubyid_new'>new</span> <span class='id identifier rubyid_content'>content</span> <span class='op'>=</span> <span class='kw'>nil</span><span class='comma'>,</span> <span class='id identifier rubyid_options'>options</span> <span class='op'>=</span> <span class='kw'>nil</span><span class='comma'>,</span> <span class='id identifier rubyid_html_options'>html_options</span> <span class='op'>=</span> <span class='kw'>nil</span><span class='comma'>,</span> <span class='op'>&</span><span class='id identifier rubyid_block'>block</span>
|
|
143
|
-
</code></pre>
|
|
144
|
-
|
|
145
|
-
<p><strong>NB</strong> : Pour des raisons de simplicité d'écriture,
|
|
146
|
-
l'argument <code>class</code> est présent dans <code>options</code> et
|
|
147
|
-
<code>html_options</code>.</p>
|
|
148
|
-
|
|
149
|
-
<h2 id="label-Installation">Installation</h2>
|
|
150
|
-
|
|
151
|
-
<p>Ajouter la gem dans Rails :</p>
|
|
152
|
-
|
|
153
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_gem'>gem</span> <span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>ui_bibz</span><span class='tstring_end'>"</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>~> 1.2.3</span><span class='tstring_end'>'</span></span>
|
|
154
|
-
</code></pre>
|
|
155
|
-
|
|
156
|
-
<p>Lancer la command suivante :</p>
|
|
157
|
-
|
|
158
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_bundle'>bundle</span> <span class='id identifier rubyid_install'>install</span>
|
|
159
|
-
</code></pre>
|
|
160
|
-
|
|
161
|
-
<p>Placer la ligne suivante dans
|
|
162
|
-
<code>/app/views/layouts/application.rb</code></p>
|
|
163
|
-
|
|
164
|
-
<pre class="code ruby"><code class="ruby">= ui_bibz_meta_links</code></pre>
|
|
165
|
-
|
|
166
|
-
<p>Exemple (<a href="http://haml.info/">haml</a>): <code> !!! %html %head
|
|
167
|
-
... = ui_bibz_meta_links ... %body </code></p>
|
|
168
|
-
|
|
169
|
-
<p>Ui Bibz chargera les librairies en CDN directement dans votre application.
|
|
170
|
-
Si vous préférez charger les librairies en locales, utilisez plutôt la
|
|
171
|
-
méthode <code>ui_bibz_local_meta_links</code> et insérez dans le fichier
|
|
172
|
-
<code>/config/initializers/assets.rb</code> de votre application cette
|
|
173
|
-
ligne:</p>
|
|
174
|
-
|
|
175
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># For Ui bibz js
|
|
176
|
-
</span><span class='const'>Rails</span><span class='period'>.</span><span class='id identifier rubyid_application'>application</span><span class='period'>.</span><span class='id identifier rubyid_config'>config</span><span class='period'>.</span><span class='id identifier rubyid_assets'>assets</span><span class='period'>.</span><span class='id identifier rubyid_precompile'>precompile</span> <span class='op'>+=</span> <span class='qwords_beg'>%w(</span><span class='tstring_content'>jquery-2.1.4.min.js</span><span class='words_sep'>)</span>
|
|
177
|
-
</code></pre>
|
|
178
|
-
|
|
179
|
-
<p>Placer la ligne suivante dans
|
|
180
|
-
<code>/app/assets/stylesheets/applications.css</code></p>
|
|
181
|
-
|
|
182
|
-
<pre class="code ruby"><code class="ruby">...
|
|
183
|
-
*= require ui_bibz
|
|
184
|
-
...</code></pre>
|
|
185
|
-
|
|
186
|
-
<p>Placer la ligne suivante dans
|
|
187
|
-
<code>/app/assets/javascripts/applications.js</code></p>
|
|
188
|
-
|
|
189
|
-
<pre class="code ruby"><code class="ruby">...
|
|
190
|
-
//= require ui_bibz
|
|
191
|
-
...</code></pre>
|
|
192
|
-
|
|
193
|
-
<p><em>Ps: Vous pouvez utiliser les variables sass présentes dans
|
|
194
|
-
boostrap.</em></p>
|
|
195
|
-
|
|
196
|
-
<h2 id="label-Utilisation">Utilisation</h2>
|
|
197
|
-
|
|
198
|
-
<h3 id="label-Alert">Alert</h3>
|
|
199
|
-
|
|
200
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/alert.png"></p>
|
|
201
|
-
|
|
202
|
-
<p>L'élément <code>notify</code> à pour <code>options</code> un Hash
|
|
203
|
-
acceptant les clefs :</p>
|
|
204
|
-
<ul><li>
|
|
205
|
-
<p><a href="#state-values">state</a></p>
|
|
206
|
-
</li><li>
|
|
207
|
-
<p><a href="#glyph-arguments">glyph</a></p>
|
|
208
|
-
</li></ul>
|
|
209
|
-
|
|
210
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_notify'>notify</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Alert</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:info</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>eye</span><span class='tstring_end'>'</span></span>
|
|
211
|
-
</code></pre>
|
|
212
|
-
|
|
213
|
-
<p>Voir la <a
|
|
214
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Alert.html">doc</a></p>
|
|
215
|
-
|
|
216
|
-
<h3 id="label-Breadcrumb+-28fil+d-27ariane-29">Breadcrumb (fil d'ariane)</h3>
|
|
217
|
-
|
|
218
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/breadcrumb.png"></p>
|
|
219
|
-
|
|
220
|
-
<p>L'élément <code>breadcrumb</code> à pour enfant l'élément
|
|
221
|
-
<code>link</code> qui accepte pour option un Hash avec les clefs :</p>
|
|
222
|
-
<ul><li>
|
|
223
|
-
<p><a href="#status-values">status</a></p>
|
|
224
|
-
</li><li>
|
|
225
|
-
<p><a href="#glyph-arguments">glyph</a></p>
|
|
226
|
-
</li><li>
|
|
227
|
-
<p>url</p>
|
|
228
|
-
</li></ul>
|
|
229
|
-
|
|
230
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_breadcrumb'>breadcrumb</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_b'>b</span><span class='op'>|</span>
|
|
231
|
-
<span class='id identifier rubyid_b'>b</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Exemple 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#exemple-1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>home</span><span class='tstring_end'>'</span></span>
|
|
232
|
-
<span class='id identifier rubyid_b'>b</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span><span class='lparen'>(</span><span class='lbrace'>{</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#exemple-2</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>class:</span><span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>link</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
233
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Exemple 2</span><span class='tstring_end'>'</span></span>
|
|
234
|
-
<span class='kw'>end</span>
|
|
235
|
-
<span class='id identifier rubyid_b'>b</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Exemple 3</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>status:</span> <span class='symbol'>:active</span>
|
|
236
|
-
<span class='kw'>end</span>
|
|
237
|
-
</code></pre>
|
|
238
|
-
|
|
239
|
-
<p>Voir la <a
|
|
240
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Breadcrumb.html">doc</a></p>
|
|
241
|
-
|
|
242
|
-
<h3 id="label-Buttons+-28Boutons-29">Buttons (Boutons)</h3>
|
|
243
|
-
|
|
244
|
-
<h4 id="label-Button">Button</h4>
|
|
245
|
-
|
|
246
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/button.png"></p>
|
|
247
|
-
|
|
248
|
-
<p>L'élément <code>button</code> à pour <code>options</code> un Hash
|
|
249
|
-
acceptant les clefs :</p>
|
|
250
|
-
<ul><li>
|
|
251
|
-
<p><a href="#state-values">state</a></p>
|
|
252
|
-
</li><li>
|
|
253
|
-
<p><a href="#status-values">status</a></p>
|
|
254
|
-
</li><li>
|
|
255
|
-
<p><a href="#glyph-arguments">glyph</a></p>
|
|
256
|
-
</li><li>
|
|
257
|
-
<p><a href="#size-values">size</a></p>
|
|
258
|
-
</li></ul>
|
|
259
|
-
|
|
260
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>state:</span> <span class='symbol'>:danger</span><span class='comma'>,</span> <span class='label'>size:</span> <span class='symbol'>:xs</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>star</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span> <span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>my-button</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
261
|
-
</code></pre>
|
|
262
|
-
|
|
263
|
-
<p>Voir la <a
|
|
264
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Button.html">doc</a></p>
|
|
265
|
-
|
|
266
|
-
<h4 id="label-Button+Dropdown">Button Dropdown</h4>
|
|
267
|
-
|
|
268
|
-
<p>L'élément <code>button_dropdown</code> accepte pour options les mêmes
|
|
269
|
-
clefs que l'élément <a href="#dropdown">dropdown</a>.</p>
|
|
270
|
-
|
|
271
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/button_dropdown.png"></p>
|
|
272
|
-
|
|
273
|
-
<pre class="code ruby"><code class="ruby">button_dropdown 'Button Dropdown' do |bd|
|
|
274
|
-
bd.link Link 1', '#'
|
|
275
|
-
bd.header 'Header 1'
|
|
276
|
-
bd.link 'Link 2'
|
|
277
|
-
bd.divider
|
|
278
|
-
bd.link 'Link 3', '#'
|
|
279
|
-
bd.html link_to('Link 4', '#')
|
|
280
|
-
end</code></pre>
|
|
281
|
-
|
|
282
|
-
<p>Voir la <a
|
|
283
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/ButtonLink.html">doc</a></p>
|
|
284
|
-
|
|
285
|
-
<h4 id="label-Button+group">Button group</h4>
|
|
286
|
-
|
|
287
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/button_group.png"></p>
|
|
288
|
-
|
|
289
|
-
<p>L'élément <code>button_group</code> à pour <code>options</code> un Hash
|
|
290
|
-
acceptant les clefs :</p>
|
|
291
|
-
<ul><li>
|
|
292
|
-
<p>position (:vertical, :horizontal)</p>
|
|
293
|
-
</li><li>
|
|
294
|
-
<p><a href="#size-values">size</a></p>
|
|
295
|
-
</li></ul>
|
|
296
|
-
|
|
297
|
-
<p>L'élément <code>list</code> à pour <code>options</code> un Hash
|
|
298
|
-
acceptant les clefs :</p>
|
|
299
|
-
<ul><li>
|
|
300
|
-
<p><a href="#status-values">status</a></p>
|
|
301
|
-
</li><li>
|
|
302
|
-
<p><a href="#state-values">state</a></p>
|
|
303
|
-
</li></ul>
|
|
304
|
-
|
|
305
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_button_group'>button_group</span><span class='lparen'>(</span><span class='lbrace'>{</span> <span class='label'>position:</span> <span class='symbol'>:vertical</span><span class='comma'>,</span> <span class='label'>size:</span> <span class='symbol'>:xs</span> <span class='rbrace'>}</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
306
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>status:</span> <span class='symbol'>:active</span>
|
|
307
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button 2</span><span class='tstring_end'>'</span></span>
|
|
308
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button 3</span><span class='tstring_end'>'</span></span>
|
|
309
|
-
<span class='kw'>end</span>
|
|
310
|
-
|
|
311
|
-
<span class='id identifier rubyid_button_group'>button_group</span> <span class='kw'>do</span>
|
|
312
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>status:</span> <span class='symbol'>:active</span>
|
|
313
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button 2</span><span class='tstring_end'>'</span></span>
|
|
314
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button 3</span><span class='tstring_end'>'</span></span>
|
|
315
|
-
<span class='id identifier rubyid_button_dropdown'>button_dropdown</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button Dropdown</span><span class='tstring_end'>'</span></span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_bd'>bd</span><span class='op'>|</span>
|
|
316
|
-
<span class='id identifier rubyid_bd'>bd</span><span class='period'>.</span><span class='id identifier rubyid_header'>header</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>header</span><span class='tstring_end'>'</span></span>
|
|
317
|
-
<span class='id identifier rubyid_bd'>bd</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span>
|
|
318
|
-
<span class='id identifier rubyid_bd'>bd</span><span class='period'>.</span><span class='id identifier rubyid_divider'>divider</span>
|
|
319
|
-
<span class='id identifier rubyid_bd'>bd</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span>
|
|
320
|
-
<span class='kw'>end</span>
|
|
321
|
-
<span class='kw'>end</span>
|
|
322
|
-
</code></pre>
|
|
323
|
-
|
|
324
|
-
<p>Voir la <a
|
|
325
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/ButtonGroup.html">doc</a></p>
|
|
326
|
-
|
|
327
|
-
<h4 id="label-Button+Link+-28Lien+Bouton-29">Button Link (Lien Bouton)</h4>
|
|
328
|
-
|
|
329
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/button_link.png"></p>
|
|
330
|
-
|
|
331
|
-
<p>L'élément <code>button_link</code> à pour <code>options</code> un Hash
|
|
332
|
-
acceptant les clefs :</p>
|
|
333
|
-
|
|
334
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_button_link'>button_link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Button</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#button</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:primary</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>star</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>my-button</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
335
|
-
</code></pre>
|
|
336
|
-
|
|
337
|
-
<p>Voir la <a
|
|
338
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/ButtonLink.html">doc</a></p>
|
|
339
|
-
|
|
340
|
-
<h4 id="label-Button+Split+Dropdown">Button Split Dropdown</h4>
|
|
341
|
-
|
|
342
|
-
<p><img
|
|
343
|
-
src="http://hummel.link/Ui-Bibz/1.2.3/images/button_split_dropdown.png"></p>
|
|
344
|
-
|
|
345
|
-
<p>L'élément <code>button_split_dropdown</code>accepte pour options les
|
|
346
|
-
mêmes clefs que l'élément <a href="#dropdown">dropdown</a>.</p>
|
|
347
|
-
|
|
348
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_button_split_dropdown'>button_split_dropdown</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Dropdown</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:primary</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_d'>d</span><span class='op'>|</span>
|
|
349
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>#</span><span class='tstring_end'>"</span></span> <span class='kw'>do</span>
|
|
350
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 1</span><span class='tstring_end'>'</span></span>
|
|
351
|
-
<span class='kw'>end</span>
|
|
352
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_header'>header</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Header 1</span><span class='tstring_end'>'</span></span>
|
|
353
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span>
|
|
354
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_divider'>divider</span>
|
|
355
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 3</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span>
|
|
356
|
-
<span class='kw'>end</span>
|
|
357
|
-
</code></pre>
|
|
358
|
-
|
|
359
|
-
<p>Voir la <a
|
|
360
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/ButtonSplitDropdown.html">doc</a></p>
|
|
361
|
-
|
|
362
|
-
<h3 id="label-Dropdown">Dropdown</h3>
|
|
363
|
-
|
|
364
|
-
<p>L'élément <code>dropdown</code> à pour <code>options</code> un Hash
|
|
365
|
-
acceptant les clefs :</p>
|
|
366
|
-
<ul><li>
|
|
367
|
-
<p><a href="#state-values">state</a></p>
|
|
368
|
-
</li><li>
|
|
369
|
-
<p><a href="#status-values">status</a></p>
|
|
370
|
-
</li><li>
|
|
371
|
-
<p>position (:left, :right)</p>
|
|
372
|
-
</li></ul>
|
|
373
|
-
|
|
374
|
-
<p>L'élément <code>list</code> est un <a href="#component">component</a>
|
|
375
|
-
qui accepte pour options les clefs :</p>
|
|
376
|
-
<ul><li>
|
|
377
|
-
<p>type (:header)</p>
|
|
378
|
-
</li><li>
|
|
379
|
-
<p><a href="#glyph-arguments">glyph</a></p>
|
|
380
|
-
</li></ul>
|
|
381
|
-
|
|
382
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_dropdown'>dropdown</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Dropdown</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:success</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_d'>d</span><span class='op'>|</span>
|
|
383
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='kw'>do</span>
|
|
384
|
-
<span class='id identifier rubyid_link_to'>link_to</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>#</span><span class='tstring_end'>"</span></span>
|
|
385
|
-
<span class='kw'>end</span>
|
|
386
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Header 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>type:</span> <span class='symbol'>:header</span>
|
|
387
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='id identifier rubyid_link_to'>link_to</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span>
|
|
388
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>---</span><span class='tstring_end'>'</span></span>
|
|
389
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='id identifier rubyid_link_to'>link_to</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 3</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span>
|
|
390
|
-
<span class='kw'>end</span>
|
|
391
|
-
</code></pre>
|
|
392
|
-
|
|
393
|
-
<p>Pour ajouter une ligne séparatrice, il suffit d'insérer 3 “-” à la
|
|
394
|
-
suite</p>
|
|
395
|
-
|
|
396
|
-
<p>Exemple :</p>
|
|
397
|
-
|
|
398
|
-
<pre class="code ruby"><code class="ruby">...
|
|
399
|
-
d.list '--'
|
|
400
|
-
...</code></pre>
|
|
401
|
-
|
|
402
|
-
<p>Voir la <a
|
|
403
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Dropdown.html">doc</a></p>
|
|
404
|
-
|
|
405
|
-
<h3 id="label-Progress+Bar">Progress Bar</h3>
|
|
406
|
-
|
|
407
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/progress_bar.png"></p>
|
|
408
|
-
|
|
409
|
-
<p>L'élément <code>progress_bar</code> à pour <code>options</code> un Hash
|
|
410
|
-
acceptant les clefs :</p>
|
|
411
|
-
<ul><li>
|
|
412
|
-
<p><a href="#state-values">state</a></p>
|
|
413
|
-
</li><li>
|
|
414
|
-
<p>type (:animated, :striped)</p>
|
|
415
|
-
</li><li>
|
|
416
|
-
<p>label - String (default: “percentage%”)</p>
|
|
417
|
-
</li><li>
|
|
418
|
-
<p>tap - Boolean (true: To add several bars)</p>
|
|
419
|
-
</li><li>
|
|
420
|
-
<p>percentage_min - Integer (default: 0)</p>
|
|
421
|
-
</li><li>
|
|
422
|
-
<p>percentage_max - Integer (default: 100)</p>
|
|
423
|
-
</li><li>
|
|
424
|
-
<p>sr_only - Boolean to show label (default: false)</p>
|
|
425
|
-
</li></ul>
|
|
426
|
-
|
|
427
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_progress_bar'>progress_bar</span> <span class='int'>30</span>
|
|
428
|
-
|
|
429
|
-
<span class='id identifier rubyid_progress_bar'>progress_bar</span> <span class='label'>state:</span> <span class='symbol'>:info</span><span class='comma'>,</span> <span class='label'>sr_only:</span> <span class='kw'>true</span><span class='comma'>,</span> <span class='label'>type:</span> <span class='symbol'>:animated</span> <span class='kw'>do</span>
|
|
430
|
-
<span class='int'>70</span>
|
|
431
|
-
<span class='kw'>end</span>
|
|
432
|
-
|
|
433
|
-
<span class='id identifier rubyid_progress_bar'>progress_bar</span><span class='lparen'>(</span><span class='label'>tap:</span> <span class='kw'>true</span><span class='rparen'>)</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_pb'>pb</span><span class='op'>|</span>
|
|
434
|
-
<span class='id identifier rubyid_pb'>pb</span><span class='period'>.</span><span class='id identifier rubyid_bar'>bar</span> <span class='int'>10</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>state:</span> <span class='symbol'>:success</span><span class='comma'>,</span> <span class='label'>label:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Loading...</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span><span class='comma'>,</span><span class='lbrace'>{</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>test</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
435
|
-
<span class='id identifier rubyid_pb'>pb</span><span class='period'>.</span><span class='id identifier rubyid_bar'>bar</span> <span class='int'>30</span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:warning</span>
|
|
436
|
-
<span class='id identifier rubyid_pb'>pb</span><span class='period'>.</span><span class='id identifier rubyid_bar'>bar</span><span class='lparen'>(</span><span class='label'>type:</span> <span class='symbol'>:striped</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
437
|
-
<span class='int'>10</span>
|
|
438
|
-
<span class='kw'>end</span>
|
|
439
|
-
<span class='kw'>end</span>
|
|
440
|
-
</code></pre>
|
|
441
|
-
|
|
442
|
-
<p>Voir la <a
|
|
443
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/ProgressBar.html">doc</a></p>
|
|
444
|
-
|
|
445
|
-
<h3 id="label-Glyph">Glyph</h3>
|
|
446
|
-
|
|
447
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/glyph.png"></p>
|
|
448
|
-
|
|
449
|
-
<p>Les glyphs utilisés proviennent de <a href="http://fontawesome.io/">Font
|
|
450
|
-
Awesome</a>. L'élément <code>glyph</code> peut contenir un hash pour
|
|
451
|
-
<code>content</code> L'élément <code>glyph</code> à pour
|
|
452
|
-
<code>options</code> un Hash acceptant les clefs :</p>
|
|
453
|
-
<ul><li>
|
|
454
|
-
<p>size</p>
|
|
455
|
-
</li><li>
|
|
456
|
-
<p>type</p>
|
|
457
|
-
</li></ul>
|
|
458
|
-
|
|
459
|
-
<pre class="code ruby"><code class="ruby">glyph 'star', { size: 3, type: 'fw' }, class: 'star-exemple'
|
|
460
|
-
|
|
461
|
-
glyph { name: 'star', size: 3, type: 'fw' }
|
|
462
|
-
</code></pre>
|
|
463
|
-
|
|
464
|
-
<p>Voir la <a
|
|
465
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Glyph.html">doc</a></p>
|
|
466
|
-
|
|
467
|
-
<h3 id="label-Stars">Stars</h3>
|
|
468
|
-
|
|
469
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/stars.png"></p>
|
|
470
|
-
|
|
471
|
-
<p>L'élément <code>stars</code> à pour <code>options</code> un Hash
|
|
472
|
-
acceptant les clefs :</p>
|
|
473
|
-
<ul><li>
|
|
474
|
-
<p>num - Correspond au nombre d'étoiles affichées (default: 5)</p>
|
|
475
|
-
</li><li>
|
|
476
|
-
<p><a href="#state-values">state</a></p>
|
|
477
|
-
</li></ul>
|
|
478
|
-
|
|
479
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_stars'>stars</span> <span class='float'>3.2</span>
|
|
480
|
-
|
|
481
|
-
<span class='id identifier rubyid_stars'>stars</span> <span class='int'>7</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>num:</span> <span class='int'>10</span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:danger</span> <span class='rbrace'>}</span>
|
|
482
|
-
|
|
483
|
-
<span class='id identifier rubyid_stars'>stars</span> <span class='label'>num:</span> <span class='int'>3</span> <span class='kw'>do</span>
|
|
484
|
-
<span class='int'>1</span>
|
|
485
|
-
<span class='kw'>end</span>
|
|
486
|
-
</code></pre>
|
|
487
|
-
|
|
488
|
-
<p>Voir la <a
|
|
489
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Stars.html">doc</a></p>
|
|
490
|
-
|
|
491
|
-
<h3 id="label-Modal">Modal</h3>
|
|
492
|
-
|
|
493
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/modal.png"></p>
|
|
494
|
-
|
|
495
|
-
<p>Les éléments <code>header</code>, <code>body</code>, <code>footer</code>
|
|
496
|
-
sont des éléments <a href="#component">component</a>.</p>
|
|
497
|
-
|
|
498
|
-
<p>Exemple :</p>
|
|
499
|
-
|
|
500
|
-
<pre class="code ruby"><code class="ruby">
|
|
501
|
-
<span class='id identifier rubyid_modal'>modal</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_m'>m</span><span class='op'>|</span>
|
|
502
|
-
<span class='id identifier rubyid_m'>m</span><span class='period'>.</span><span class='id identifier rubyid_header'>header</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Header</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>eye</span><span class='tstring_end'>'</span></span>
|
|
503
|
-
<span class='id identifier rubyid_m'>m</span><span class='period'>.</span><span class='id identifier rubyid_body'>body</span><span class='lparen'>(</span><span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>my-body</span><span class='tstring_end'>'</span></span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
504
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Content body</span><span class='tstring_end'>'</span></span>
|
|
505
|
-
<span class='kw'>end</span>
|
|
506
|
-
<span class='id identifier rubyid_m'>m</span><span class='period'>.</span><span class='id identifier rubyid_footer'>footer</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Footer</span><span class='tstring_end'>'</span></span>
|
|
507
|
-
<span class='kw'>end</span>
|
|
508
|
-
</code></pre>
|
|
509
|
-
|
|
510
|
-
<p>Voir la <a
|
|
511
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Modal.html">doc</a></p>
|
|
512
|
-
|
|
513
|
-
<h3 id="label-Panel">Panel</h3>
|
|
514
|
-
|
|
515
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/panel.png"></p>
|
|
516
|
-
|
|
517
|
-
<p>L'élément <code>panel</code> à pour <code>options</code> un Hash
|
|
518
|
-
acceptant les clefs :</p>
|
|
519
|
-
<ul><li>
|
|
520
|
-
<p><a href="#state-values">state</a></p>
|
|
521
|
-
</li><li>
|
|
522
|
-
<p>tap (true) : permet de créer un header, body et footer</p>
|
|
523
|
-
</li></ul>
|
|
524
|
-
|
|
525
|
-
<p>Les éléments <code>header</code>, <code>body</code>,<code>footer</code>
|
|
526
|
-
sont des éléments <a href="#component">component</a>.</p>
|
|
527
|
-
|
|
528
|
-
<p>Exemple :</p>
|
|
529
|
-
|
|
530
|
-
<pre class="code ruby"><code class="ruby">panel 'danger'
|
|
531
|
-
|
|
532
|
-
panel(state: :danger) do
|
|
533
|
-
'Content'
|
|
534
|
-
end
|
|
535
|
-
|
|
536
|
-
panel({ tap: true, state: :danger, table_options: { actionable: true } }, { class: 'exemple' }) |p|
|
|
537
|
-
p.header 'Header', glyph: 'eye'
|
|
538
|
-
p.body(class: 'my-body') do
|
|
539
|
-
'Content body'
|
|
540
|
-
end
|
|
541
|
-
p.footer 'Footer'
|
|
542
|
-
end
|
|
543
|
-
</code></pre>
|
|
544
|
-
|
|
545
|
-
<p>Voir la <a
|
|
546
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Panel.html">doc</a></p>
|
|
547
|
-
|
|
548
|
-
<h3 id="label-Table">Table</h3>
|
|
549
|
-
|
|
550
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/table.png"></p>
|
|
551
|
-
|
|
552
|
-
<p>L'élément <code>table</code> est un tableau composé d'une
|
|
553
|
-
recherche, une pagination et un trie de colonnes intégrées. Le tableau est
|
|
554
|
-
compatible <a href="http://guides.rubyonrails.org/i18n.html">I18n</a>. Le
|
|
555
|
-
tableau contient pour chaque ligne un bouton dropdown 'action' avec
|
|
556
|
-
par défaut ces 3 actions : voir, éditer, supprimer. Toutes les colonnes
|
|
557
|
-
sont présentes et affichées par défaut.</p>
|
|
558
|
-
|
|
559
|
-
<p>La table doit contenir un store. Ce store doit-être créé dans le
|
|
560
|
-
<em>controlleur</em> avec la méthode <code>table_search_pagination</code>.</p>
|
|
561
|
-
|
|
562
|
-
<p>La méthode <code>table_search_pagination</code> contient 3 arguments :</p>
|
|
563
|
-
<ul><li>
|
|
564
|
-
<p>params</p>
|
|
565
|
-
</li><li>
|
|
566
|
-
<p>session</p>
|
|
567
|
-
</li><li>
|
|
568
|
-
<p>args (optionel)</p>
|
|
569
|
-
</li></ul>
|
|
570
|
-
|
|
571
|
-
<p>Exemple :</p>
|
|
572
|
-
|
|
573
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/controllers/document_controller.rb
|
|
574
|
-
</span><span class='ivar'>@documents</span> <span class='op'>=</span> <span class='const'>Document</span><span class='period'>.</span><span class='id identifier rubyid_table_search_pagination'>table_search_pagination</span><span class='lparen'>(</span><span class='id identifier rubyid_params'>params</span><span class='comma'>,</span> <span class='id identifier rubyid_session'>session</span><span class='rparen'>)</span>
|
|
575
|
-
</code></pre>
|
|
576
|
-
|
|
577
|
-
<p>Dans le <em>model</em>, insérer la méthode
|
|
578
|
-
<code>searchable_attributes</code> afin de pouvoir faire une recherche sur
|
|
579
|
-
les attributs souhaités.</p>
|
|
580
|
-
|
|
581
|
-
<p>Exemple :</p>
|
|
582
|
-
|
|
583
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/models/document.rb
|
|
584
|
-
</span><span class='id identifier rubyid_searchable_attributes'>searchable_attributes</span> <span class='symbol'>:name_fr</span><span class='comma'>,</span> <span class='symbol'>:name_en</span>
|
|
585
|
-
</code></pre>
|
|
586
|
-
|
|
587
|
-
<p>Un champ recherche est disponible dans la vue :</p>
|
|
588
|
-
|
|
589
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/table_search_field.png"></p>
|
|
590
|
-
|
|
591
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_table_search_field'>table_search_field</span> <span class='label'>store:</span> <span class='ivar'>@documents</span>
|
|
592
|
-
</code></pre>
|
|
593
|
-
|
|
594
|
-
<p>Une pagination est disponible dans la vue :</p>
|
|
595
|
-
|
|
596
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_table_pagination'>table_pagination</span> <span class='label'>store:</span> <span class='ivar'>@documents</span>
|
|
597
|
-
</code></pre>
|
|
598
|
-
|
|
599
|
-
<p>Un champs select par page est disponible dans la vue :</p>
|
|
600
|
-
|
|
601
|
-
<p><img
|
|
602
|
-
src="http://hummel.link/Ui-Bibz/1.2.3/images/table_pagination_per_page.png"></p>
|
|
603
|
-
|
|
604
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_table_pagination_per_page'>table_pagination_per_page</span> <span class='label'>store:</span> <span class='ivar'>@documents</span>
|
|
605
|
-
</code></pre>
|
|
606
|
-
|
|
607
|
-
<h4 id="label-Simple+Example+table">Simple Example table</h4>
|
|
608
|
-
|
|
609
|
-
<p>Dans le <strong>controlleur</strong>, insérer la méthode
|
|
610
|
-
<code>table_search_pagination</code>. La méthode
|
|
611
|
-
<code>table_search_pagination</code> contient 3 arguments :</p>
|
|
612
|
-
<ul><li>
|
|
613
|
-
<p>params</p>
|
|
614
|
-
</li><li>
|
|
615
|
-
<p>session</p>
|
|
616
|
-
</li><li>
|
|
617
|
-
<p>args</p>
|
|
618
|
-
</li></ul>
|
|
619
|
-
|
|
620
|
-
<p>Exemple :</p>
|
|
621
|
-
|
|
622
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/controllers/document_controller.rb
|
|
623
|
-
</span><span class='ivar'>@documents</span> <span class='op'>=</span> <span class='const'>Document</span><span class='period'>.</span><span class='id identifier rubyid_table_search_pagination'>table_search_pagination</span><span class='lparen'>(</span><span class='id identifier rubyid_params'>params</span><span class='comma'>,</span> <span class='id identifier rubyid_session'>session</span><span class='rparen'>)</span>
|
|
624
|
-
</code></pre>
|
|
625
|
-
|
|
626
|
-
<p>Dans le <strong>model</strong>, insérer la méthode
|
|
627
|
-
<code>searchable_attributes</code> afin de pouvoir faire une recherche sur
|
|
628
|
-
les attributs souhaités. Vous pouvez même faire une recherche sur une table
|
|
629
|
-
différente en insérant un hash avec pour clef le nom du model et en valeur
|
|
630
|
-
le nom de l'attribut recherché.</p>
|
|
631
|
-
|
|
632
|
-
<p>Exemple :</p>
|
|
633
|
-
|
|
634
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/models/document.rb
|
|
635
|
-
</span><span class='id identifier rubyid_searchable_attributes'>searchable_attributes</span> <span class='symbol'>:name_fr</span><span class='comma'>,</span> <span class='symbol'>:name_en</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>user:</span> <span class='symbol'>:name</span> <span class='rbrace'>}</span>
|
|
636
|
-
</code></pre>
|
|
637
|
-
|
|
638
|
-
<p>Dans la <strong>vue</strong>, insérer la méthode <code>table</code> qui
|
|
639
|
-
peut contenir plusieurs arguments :</p>
|
|
640
|
-
<ul><li>
|
|
641
|
-
<p>store (ex: @documents)</p>
|
|
642
|
-
</li><li>
|
|
643
|
-
<p>paginable (true, false)</p>
|
|
644
|
-
</li><li>
|
|
645
|
-
<p>sortable (true, false)</p>
|
|
646
|
-
</li></ul>
|
|
647
|
-
|
|
648
|
-
<p>Une table comporte des <strong>colonnes</strong> et des
|
|
649
|
-
<strong>actions</strong>.</p>
|
|
650
|
-
|
|
651
|
-
<p>Exemple :</p>
|
|
652
|
-
|
|
653
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
654
|
-
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span>
|
|
655
|
-
</code></pre>
|
|
656
|
-
|
|
657
|
-
<p>Les actions par défauts peuvent être modifiées (<a
|
|
658
|
-
href="#Complex-Example-table">voir exemple complexe</a>) :</p>
|
|
659
|
-
<ul><li>
|
|
660
|
-
<p>edit</p>
|
|
661
|
-
</li><li>
|
|
662
|
-
<p>view</p>
|
|
663
|
-
</li><li>
|
|
664
|
-
<p>delete</p>
|
|
665
|
-
</li></ul>
|
|
666
|
-
|
|
667
|
-
<p>Elles sont intégrées à l'intérieur d'un bouton <a
|
|
668
|
-
href="#dropdown">dropdown</a>.</p>
|
|
669
|
-
|
|
670
|
-
<p>Exemple :</p>
|
|
671
|
-
|
|
672
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
673
|
-
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_g'>g</span><span class='op'>|</span>
|
|
674
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_actions'>actions</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_acs'>acs</span><span class='op'>|</span>
|
|
675
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_headr'>headr</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Main Actions</span><span class='tstring_end'>'</span></span>
|
|
676
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Show</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='id identifier rubyid_documents_path'>documents_path</span><span class='lparen'>(</span><span class='symbol'>:id</span><span class='rparen'>)</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>eye</span><span class='tstring_end'>'</span></span>
|
|
677
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Edit</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='id identifier rubyid_edit_document_path'>edit_document_path</span><span class='lparen'>(</span><span class='symbol'>:id</span><span class='rparen'>)</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>pencil</span><span class='tstring_end'>'</span></span>
|
|
678
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Delete</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='id identifier rubyid_documents_path'>documents_path</span><span class='lparen'>(</span><span class='symbol'>:id</span><span class='rparen'>)</span><span class='comma'>,</span> <span class='label'>method:</span> <span class='symbol'>:delete</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>trash</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>data:</span> <span class='lbrace'>{</span> <span class='label'>confirm:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Are you sure?</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
679
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_divider'>divider</span>
|
|
680
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Duplicate</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='id identifier rubyid_duplicate_document_path'>duplicate_document_path</span><span class='lparen'>(</span><span class='symbol'>:id</span><span class='rparen'>)</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>files-o</span><span class='tstring_end'>'</span></span>
|
|
681
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Alert</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='id identifier rubyid_alert_document_path'>alert_document_path</span><span class='lparen'>(</span><span class='symbol'>:id</span><span class='rparen'>)</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>bell</span><span class='tstring_end'>'</span></span>
|
|
682
|
-
<span class='kw'>end</span>
|
|
683
|
-
<span class='kw'>end</span>
|
|
684
|
-
</code></pre>
|
|
685
|
-
|
|
686
|
-
<p>L'ajout de colonnes à travers la méthode <code>column</code> contient
|
|
687
|
-
plusieurs arguments et cette méthode est basée sur le component :</p>
|
|
688
|
-
<ul><li>
|
|
689
|
-
<p>Content (ex: name)</p>
|
|
690
|
-
</li><li>
|
|
691
|
-
<p>options (hash)</p>
|
|
692
|
-
</li><li>
|
|
693
|
-
<p>data_index (le nom de l'attribut)</p>
|
|
694
|
-
</li><li>
|
|
695
|
-
<p>count (utilise la méthode count sur l'élément)</p>
|
|
696
|
-
</li><li>
|
|
697
|
-
<p>date_format (formate l'affichage de la date en utilisant la méthode
|
|
698
|
-
<code>strftime</code> ex: '%Y/%M/%D')</p>
|
|
699
|
-
</li><li>
|
|
700
|
-
<p>format (formate les élements de la colone en utilisant
|
|
701
|
-
<strong>lambda</strong>)</p>
|
|
702
|
-
</li><li>
|
|
703
|
-
<p>link (ajoute un lien où l'expression <code>:id</code> est parsé et
|
|
704
|
-
remplacé par l'entier correspondant)</p>
|
|
705
|
-
</li><li>
|
|
706
|
-
<p>sort (permet de trier sur des champs )</p>
|
|
707
|
-
</li><li>
|
|
708
|
-
<p>column_id (permet d'identifier la colonne : peut être utile pour le
|
|
709
|
-
sort)</p>
|
|
710
|
-
</li><li>
|
|
711
|
-
<p>custom_sort (indique que le tableau sera triéé d'une manière
|
|
712
|
-
personnalisée)</p>
|
|
713
|
-
</li><li>
|
|
714
|
-
<p>html_options (hash)</p>
|
|
715
|
-
</li></ul>
|
|
716
|
-
|
|
717
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
718
|
-
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_g'>g</span><span class='op'>|</span>
|
|
719
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_columns'>columns</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_c'>c</span><span class='op'>|</span>
|
|
720
|
-
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:id</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>name:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
721
|
-
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:name_fr</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>name:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Name fr</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>link:</span> <span class='id identifier rubyid_edit_document_path'>edit_document_path</span><span class='lparen'>(</span><span class='symbol'>:id</span><span class='rparen'>)</span> <span class='rbrace'>}</span>
|
|
722
|
-
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:name_en</span>
|
|
723
|
-
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:hotline_access</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>name:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Hotline</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>format:</span> <span class='id identifier rubyid_lambda'>lambda</span><span class='lbrace'>{</span> <span class='op'>|</span><span class='id identifier rubyid_records'>records</span><span class='comma'>,</span> <span class='id identifier rubyid_record'>record</span><span class='op'>|</span> <span class='id identifier rubyid_glyph'>glyph</span><span class='lparen'>(</span><span class='id identifier rubyid_record'>record</span><span class='period'>.</span><span class='id identifier rubyid_icon'>icon</span><span class='rparen'>)</span> <span class='rbrace'>}</span> <span class='rbrace'>}</span>
|
|
724
|
-
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:update_at</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>date_format:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>%Y</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
725
|
-
<span class='kw'>end</span>
|
|
726
|
-
<span class='kw'>end</span>
|
|
727
|
-
</code></pre>
|
|
728
|
-
|
|
729
|
-
<h4 id="label-Complex+Example+table">Complex Example table</h4>
|
|
730
|
-
|
|
731
|
-
<p>Si on souhaite voir apparaître certaines liasions avec d'autres tables
|
|
732
|
-
il faut pour cela :</p>
|
|
733
|
-
|
|
734
|
-
<p>Dans le controlleur, insérer la méthode
|
|
735
|
-
<code>table_search_pagination</code> en ajoutant un <code>includes</code>
|
|
736
|
-
juste avant.</p>
|
|
737
|
-
|
|
738
|
-
<p>Exemple : <code>ruby # app/controllers/document_controller.rb @documents =
|
|
739
|
-
Document.includes(:users).table_search_pagination(params, session) </code></p>
|
|
740
|
-
|
|
741
|
-
<p>Dans la vue, insérer la méthod <code>table</code>. NB: On peut créer ses
|
|
742
|
-
propres méthodes comme <code>user_name</code> dans notre <em>model</em>
|
|
743
|
-
“Document” et l'appeler comme valeur pour la clef
|
|
744
|
-
<code>data_index</code>.</p>
|
|
745
|
-
|
|
746
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
747
|
-
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_g'>g</span><span class='op'>|</span>
|
|
748
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_columns'>columns</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_c'>c</span><span class='op'>|</span>
|
|
749
|
-
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:user_name</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>name:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>User</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>sort:</span> <span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>user.name</span><span class='tstring_end'>"</span></span> <span class='rbrace'>}</span>
|
|
750
|
-
<span class='kw'>end</span>
|
|
751
|
-
<span class='kw'>end</span>
|
|
752
|
-
</code></pre>
|
|
753
|
-
|
|
754
|
-
<h4 id="label-Ultra+Complex+Example+table">Ultra Complex Example table</h4>
|
|
755
|
-
|
|
756
|
-
<p>Si l'on souhaite, par exemple, dénombrer des utilisateurs qui ont un
|
|
757
|
-
lien non direct avec les documents. Imaginons par exemple, un utilisateur à
|
|
758
|
-
des produits et que ces produits contiennent plusieurs documents. On
|
|
759
|
-
souhaite compter le nombre d'utilisateurs par documents.</p>
|
|
760
|
-
|
|
761
|
-
<p>On peut ajouter des arguments dans la méthode
|
|
762
|
-
<code>table_search_pagination</code> qui vont permettre de faire des
|
|
763
|
-
jointures.</p>
|
|
764
|
-
|
|
765
|
-
<p>Exemple : “`</p>
|
|
766
|
-
|
|
767
|
-
<h1 id="label-app-2Fcontrollers-2Fdocument_controller.rb">app/controllers/document_controller.rb</h1>
|
|
768
|
-
|
|
769
|
-
<p>arguments = { sortable: { column: 'users', count: true, joins:
|
|
770
|
-
“LEFT OUTER JOIN documents_products ON documents_products.document_id =
|
|
771
|
-
documents.id LEFT OUTER JOIN products ON products.id =
|
|
772
|
-
documents_products.product_id LEFT OUTER JOIN products_users ON
|
|
773
|
-
products_users.product_id = products.id LEFT OUTER JOIN users ON users.id
|
|
774
|
-
= products_users.user_id” } }</p>
|
|
775
|
-
|
|
776
|
-
<p>@documents = Document.includes(:users).table_search_pagination(params,
|
|
777
|
-
session, arguments) “`</p>
|
|
778
|
-
|
|
779
|
-
<p>Ici l'argument sortable signifie que l'on souhaite
|
|
780
|
-
s'interresser à la fonctionnalité de trie.</p>
|
|
781
|
-
|
|
782
|
-
<p>Pour celà il faut :</p>
|
|
783
|
-
<ul><li>
|
|
784
|
-
<p>définir le nom de la colonne triéé à travers l'argument
|
|
785
|
-
<code>column:</code> (string)</p>
|
|
786
|
-
</li><li>
|
|
787
|
-
<p>définir si le traitement se fait sur le comptage avec l'argument
|
|
788
|
-
<code>count:</code> (boolean)</p>
|
|
789
|
-
</li><li>
|
|
790
|
-
<p>définir la jointure avec l'argument <code>joins:</code> (string, array,
|
|
791
|
-
hash)</p>
|
|
792
|
-
</li></ul>
|
|
793
|
-
|
|
794
|
-
<p>Dans la vue :</p>
|
|
795
|
-
|
|
796
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
797
|
-
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_g'>g</span><span class='op'>|</span>
|
|
798
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_columns'>columns</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_c'>c</span><span class='op'>|</span>
|
|
799
|
-
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:users</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>name:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Users count</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>count:</span> <span class='kw'>true</span><span class='comma'>,</span> <span class='label'>custom_sort:</span> <span class='kw'>true</span> <span class='rbrace'>}</span>
|
|
800
|
-
<span class='kw'>end</span>
|
|
801
|
-
<span class='kw'>end</span>
|
|
802
|
-
</code></pre>
|
|
803
|
-
|
|
804
|
-
<h4 id="label-table+actions">table actions</h4>
|
|
805
|
-
|
|
806
|
-
<p>Les actions d'une table peuvent être formatées avec le 'record'
|
|
807
|
-
passé en paramètre.</p>
|
|
808
|
-
|
|
809
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
810
|
-
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_t'>t</span><span class='op'>|</span>
|
|
811
|
-
<span class='id identifier rubyid_t'>t</span><span class='period'>.</span><span class='id identifier rubyid_columns'>columns</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_cls'>cls</span><span class='op'>|</span>
|
|
812
|
-
<span class='id identifier rubyid_cls'>cls</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:id</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>name:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
813
|
-
<span class='id identifier rubyid_cls'>cls</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='symbol'>:name_en</span>
|
|
814
|
-
<span class='kw'>end</span>
|
|
815
|
-
<span class='id identifier rubyid_t'>t</span><span class='period'>.</span><span class='id identifier rubyid_actions'>actions</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_acs'>acs</span><span class='op'>|</span>
|
|
816
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_format'>format</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_record'>record</span><span class='op'>|</span>
|
|
817
|
-
<span class='kw'>if</span> <span class='id identifier rubyid_record'>record</span><span class='period'>.</span><span class='id identifier rubyid_active?'>active?</span>
|
|
818
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Active</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='id identifier rubyid_active_document_path'>active_document_path</span><span class='lparen'>(</span><span class='id identifier rubyid_record'>record</span><span class='period'>.</span><span class='id identifier rubyid_id'>id</span><span class='rparen'>)</span> <span class='rbrace'>}</span>
|
|
819
|
-
<span class='kw'>else</span>
|
|
820
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Disabled</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='id identifier rubyid_disabled_document_path'>disabled_document_path</span><span class='lparen'>(</span><span class='id identifier rubyid_record'>record</span><span class='period'>.</span><span class='id identifier rubyid_id'>id</span><span class='rparen'>)</span> <span class='rbrace'>}</span>
|
|
821
|
-
<span class='kw'>end</span>
|
|
822
|
-
<span class='id identifier rubyid_acs'>acs</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Show</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='id identifier rubyid_document_path'>document_path</span><span class='lparen'>(</span><span class='id identifier rubyid_record'>record</span><span class='period'>.</span><span class='id identifier rubyid_id'>id</span><span class='rparen'>)</span> <span class='rbrace'>}</span>
|
|
823
|
-
<span class='kw'>end</span>
|
|
824
|
-
<span class='kw'>end</span>
|
|
825
|
-
<span class='kw'>end</span>
|
|
826
|
-
</code></pre>
|
|
827
|
-
|
|
828
|
-
<p>Les actions ainsi que la colonne action peuvent être désactivées en passant
|
|
829
|
-
l'agument <code>actionable: false</code>.</p>
|
|
830
|
-
|
|
831
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
832
|
-
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span><span class='comma'>,</span> <span class='label'>actionable:</span> <span class='kw'>false</span>
|
|
833
|
-
</code></pre>
|
|
834
|
-
|
|
835
|
-
<h4 id="label-Plus+d-27une+table+sur+une+page+html">Plus d'une table sur une page html</h4>
|
|
836
|
-
|
|
837
|
-
<p>Si vous avez plus d'une table sur votre page html et que vous souhaitez
|
|
838
|
-
faire des recherches, paginer… Vous devez identifier chaque store pour que
|
|
839
|
-
l'action effectuée (recherche, pagination,…) ne soit affectée que sur
|
|
840
|
-
la table désirée.</p>
|
|
841
|
-
|
|
842
|
-
<p>Pour cela il faut que vous donniez un identifiant unique à vos stores.</p>
|
|
843
|
-
|
|
844
|
-
<p>ex:</p>
|
|
845
|
-
|
|
846
|
-
<pre class="code ruby"><code class="ruby"><span class='comment'># app/controllers/document_controller.rb
|
|
847
|
-
</span><span class='ivar'>@documents</span> <span class='op'>=</span> <span class='const'>Document</span><span class='period'>.</span><span class='id identifier rubyid_includes'>includes</span><span class='lparen'>(</span><span class='symbol'>:users</span><span class='rparen'>)</span><span class='period'>.</span><span class='id identifier rubyid_table_search_pagination'>table_search_pagination</span><span class='lparen'>(</span><span class='id identifier rubyid_params'>params</span><span class='comma'>,</span> <span class='id identifier rubyid_session'>session</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>store_id:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>store-1</span><span class='tstring_end'>'</span></span><span class='rbrace'>}</span><span class='rparen'>)</span>
|
|
848
|
-
</code></pre>
|
|
849
|
-
|
|
850
|
-
<h4 id="label-table+I18n">table I18n</h4>
|
|
851
|
-
|
|
852
|
-
<p>La table est utilisable avec I18n. Les traductions s'executent par
|
|
853
|
-
ordre d'importance dans cet ordre précis pour la colonne “name_fr” par
|
|
854
|
-
exemple.</p>
|
|
855
|
-
<ol><li>
|
|
856
|
-
<p>ui_biz.table.headers.document.name_fr</p>
|
|
857
|
-
</li><li>
|
|
858
|
-
<p>ui_biz.table.headers.defaults.name_fr</p>
|
|
859
|
-
</li><li>
|
|
860
|
-
<p>activerecord.attributes.document.name_fr</p>
|
|
861
|
-
</li><li>
|
|
862
|
-
<p>activerecord.attributes.defaults.name_fr</p>
|
|
863
|
-
</li></ol>
|
|
864
|
-
|
|
865
|
-
<p>Le placeholder du champ recherche est utilisable et traduisible avec les
|
|
866
|
-
attributs activerecord dans le fichier locale.</p>
|
|
867
|
-
|
|
868
|
-
<p>Exemple :</p>
|
|
869
|
-
|
|
870
|
-
<pre class="code ruby"><code class="ruby"># config/locales/fr.yml
|
|
871
|
-
...
|
|
872
|
-
activerecord:
|
|
873
|
-
models:
|
|
874
|
-
user: 'Utilisateur'
|
|
875
|
-
attributes:
|
|
876
|
-
defaults:
|
|
877
|
-
name_fr: 'Nom fr'
|
|
878
|
-
...</code></pre>
|
|
879
|
-
|
|
880
|
-
<p>Voir la <a
|
|
881
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Ux/Table.html">doc</a></p>
|
|
882
|
-
|
|
883
|
-
<h3 id="label-Table+Panel">Table Panel</h3>
|
|
884
|
-
|
|
885
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/table_panel.png"></p>
|
|
886
|
-
|
|
887
|
-
<p>Le composant <code>table_panel</code> est un <a href="#table">tableau</a>
|
|
888
|
-
dans un <a href="#panel">panel</a>.</p>
|
|
889
|
-
|
|
890
|
-
<pre class="code ruby"><code class="ruby">table_panel store: @users
|
|
891
|
-
|
|
892
|
-
table_panel({ store: @users, tap: true, glyph: 'home', state: :danger }) do |g|
|
|
893
|
-
g.columns do |cls|
|
|
894
|
-
cls.column :id, { name: '#' }
|
|
895
|
-
cls.column :username, { name: 'Username', link: edit_user_path(:id) }
|
|
896
|
-
cls.column :name
|
|
897
|
-
cls.column(:email) do
|
|
898
|
-
'Email'
|
|
899
|
-
end
|
|
900
|
-
cls.column :role_name, { name: 'Role', sort: 'roles.name' }
|
|
901
|
-
end
|
|
902
|
-
g.actions do |acs|
|
|
903
|
-
acs.link 'Action 1', { url: edit_user_path(:id), glyph: 'pencil' }
|
|
904
|
-
acs.divider
|
|
905
|
-
acs.link { url: user_path(:id), glyph: 'eye' } do
|
|
906
|
-
'Action 2'
|
|
907
|
-
end
|
|
908
|
-
end
|
|
909
|
-
end</code></pre>
|
|
910
|
-
|
|
911
|
-
<p>Voir la <a
|
|
912
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Ux/TablePanel.html">doc</a></p>
|
|
913
|
-
|
|
914
|
-
<h3 id="label-List">List</h3>
|
|
915
|
-
|
|
916
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/list.png"></p>
|
|
917
|
-
|
|
918
|
-
<p>Par défaut une liste à pour tag <code><li></code>. Mais elle peut se
|
|
919
|
-
transformer en lien <code><a></code> à travers l'option
|
|
920
|
-
<code>type:</code>. Par défaut le tag <code><li></code> est présent.</p>
|
|
921
|
-
|
|
922
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_list_group'>list_group</span> <span class='label'>type:</span> <span class='symbol'>:link</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_lg'>lg</span><span class='op'>|</span>
|
|
923
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Momo</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>state:</span> <span class='symbol'>:success</span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>home</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>href:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#Momo</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
924
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span><span class='lparen'>(</span><span class='lbrace'>{</span> <span class='label'>tap:</span> <span class='kw'>true</span><span class='comma'>,</span> <span class='label'>status:</span> <span class='symbol'>:active</span> <span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>href:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#Toto</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span><span class='rparen'>)</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_l'>l</span><span class='op'>|</span>
|
|
925
|
-
<span class='id identifier rubyid_l'>l</span><span class='period'>.</span><span class='id identifier rubyid_header'>header</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>My title</span><span class='tstring_end'>'</span></span>
|
|
926
|
-
<span class='id identifier rubyid_l'>l</span><span class='period'>.</span><span class='id identifier rubyid_body'>body</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>My title</span><span class='tstring_end'>'</span></span>
|
|
927
|
-
<span class='kw'>end</span>
|
|
928
|
-
<span class='kw'>end</span>
|
|
929
|
-
|
|
930
|
-
<span class='id identifier rubyid_list_group'>list_group</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_lg'>lg</span><span class='op'>|</span>
|
|
931
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Momo</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>glyph:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>home</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>badge:</span> <span class='int'>2</span>
|
|
932
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Toto</span><span class='tstring_end'>'</span></span>
|
|
933
|
-
<span class='kw'>end</span>
|
|
934
|
-
</code></pre>
|
|
935
|
-
|
|
936
|
-
<p>Voir la <a
|
|
937
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/List.html">doc</a></p>
|
|
938
|
-
|
|
939
|
-
<h3 id="label-Nav">Nav</h3>
|
|
940
|
-
|
|
941
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/nav.png"></p>
|
|
942
|
-
|
|
943
|
-
<p>Par défaut la navigation comporte des onglets “tab”. L'élément
|
|
944
|
-
<code>nav</code> accepte en option les arguments :</p>
|
|
945
|
-
<ul><li>
|
|
946
|
-
<p>type (:pills, :tabs)</p>
|
|
947
|
-
</li><li>
|
|
948
|
-
<p>position (:justified, :stacked)</p>
|
|
949
|
-
</li><li>
|
|
950
|
-
<p>tap (true)</p>
|
|
951
|
-
</li></ul>
|
|
952
|
-
|
|
953
|
-
<p>L'élement link est un <a href="#component">component</a>.</p>
|
|
954
|
-
|
|
955
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_nav'>nav</span><span class='lparen'>(</span><span class='label'>type:</span> <span class='symbol'>:pills</span><span class='comma'>,</span> <span class='label'>position:</span> <span class='symbol'>:justified</span><span class='rparen'>)</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_d'>d</span><span class='op'>|</span>
|
|
956
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#test</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>badge:</span> <span class='int'>6</span>
|
|
957
|
-
<span class='id identifier rubyid_d'>d</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span><span class='lparen'>(</span><span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#test2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>status:</span> <span class='symbol'>:active</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
958
|
-
<span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>Link 2</span><span class='tstring_end'>"</span></span>
|
|
959
|
-
<span class='kw'>end</span>
|
|
960
|
-
<span class='kw'>end</span>
|
|
961
|
-
</code></pre>
|
|
962
|
-
|
|
963
|
-
<p>Voir la <a
|
|
964
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Nav.html">doc</a></p>
|
|
965
|
-
|
|
966
|
-
<h3 id="label-Navbar">Navbar</h3>
|
|
967
|
-
|
|
968
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/navbar.png"></p>
|
|
969
|
-
|
|
970
|
-
<p>Par défaut la navigation comporte des onglets “tab”. L'élément
|
|
971
|
-
<code>navbar</code> accepte en option les arguments :</p>
|
|
972
|
-
<ul><li>
|
|
973
|
-
<p>type (:default, :inverse)</p>
|
|
974
|
-
</li><li>
|
|
975
|
-
<p><a href="#glyph-values">glyph</a></p>
|
|
976
|
-
</li><li>
|
|
977
|
-
<p>position (:top, :bottom)</p>
|
|
978
|
-
</li><li>
|
|
979
|
-
<p>title (string)</p>
|
|
980
|
-
</li></ul>
|
|
981
|
-
|
|
982
|
-
<p>L'élement nav est un <a href="#component">component</a> et contient les
|
|
983
|
-
composants :</p>
|
|
984
|
-
<ul><li>
|
|
985
|
-
<p>form</p>
|
|
986
|
-
</li><li>
|
|
987
|
-
<p>dropdown</p>
|
|
988
|
-
</li><li>
|
|
989
|
-
<p>text</p>
|
|
990
|
-
</li><li>
|
|
991
|
-
<p>link</p>
|
|
992
|
-
</li></ul>
|
|
993
|
-
|
|
994
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_navbar'>navbar</span><span class='lparen'>(</span><span class='label'>type:</span> <span class='symbol'>:inverse</span><span class='comma'>,</span> <span class='label'>position:</span> <span class='symbol'>:top</span><span class='rparen'>)</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_nb'>nb</span><span class='op'>|</span>
|
|
995
|
-
<span class='id identifier rubyid_nb'>nb</span><span class='period'>.</span><span class='id identifier rubyid_nav'>nav</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_n'>n</span><span class='op'>|</span>
|
|
996
|
-
<span class='id identifier rubyid_n'>n</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#link-1</span><span class='tstring_end'>'</span></span>
|
|
997
|
-
<span class='kw'>end</span>
|
|
998
|
-
<span class='id identifier rubyid_nb'>nb</span><span class='period'>.</span><span class='id identifier rubyid_nav'>nav</span><span class='lparen'>(</span><span class='label'>position:</span> <span class='symbol'>:right</span><span class='rparen'>)</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_n'>n</span><span class='op'>|</span>
|
|
999
|
-
<span class='id identifier rubyid_n'>n</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#test</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>badge:</span> <span class='int'>6</span>
|
|
1000
|
-
<span class='id identifier rubyid_n'>n</span><span class='period'>.</span><span class='id identifier rubyid_link'>link</span><span class='lparen'>(</span><span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#link-2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>status:</span> <span class='symbol'>:active</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
1001
|
-
<span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>Link 3</span><span class='tstring_end'>"</span></span>
|
|
1002
|
-
<span class='kw'>end</span>
|
|
1003
|
-
<span class='kw'>end</span>
|
|
1004
|
-
<span class='kw'>end</span>
|
|
1005
|
-
</code></pre>
|
|
1006
|
-
|
|
1007
|
-
<p>Voir la <a
|
|
1008
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Navbar.html">doc</a></p>
|
|
1009
|
-
|
|
1010
|
-
<h3 id="label-Etiquette">Etiquette</h3>
|
|
1011
|
-
|
|
1012
|
-
<p><img src="http://hummel.link/Ui-Bibz/1.2.3/images/etiquette.png"></p>
|
|
1013
|
-
|
|
1014
|
-
<p>NB : Les méthodes <code>Tag, label</code> sont déjà utilisées par Rails.
|
|
1015
|
-
L'élément <code>etiquette</code> à pour <code>options</code> un Hash
|
|
1016
|
-
acceptant les clefs :</p>
|
|
1017
|
-
<ul><li>
|
|
1018
|
-
<p><a href="#state-values">state</a></p>
|
|
1019
|
-
</li><li>
|
|
1020
|
-
<p><a href="#glyph-values">glyph</a></p>
|
|
1021
|
-
</li></ul>
|
|
1022
|
-
|
|
1023
|
-
<p>Exemple :</p>
|
|
1024
|
-
|
|
1025
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_etiquette'>etiquette</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>label</span><span class='tstring_end'>'</span></span>
|
|
1026
|
-
<span class='id identifier rubyid_etiquette'>etiquette</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>label 2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:success</span>
|
|
1027
|
-
<span class='id identifier rubyid_etiquette'>etiquette</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>label 2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>state:</span> <span class='symbol'>:danger</span>
|
|
1028
|
-
</code></pre>
|
|
1029
|
-
|
|
1030
|
-
<p>Voir la <a
|
|
1031
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Etiquette.html">doc</a></p>
|
|
1032
|
-
|
|
1033
|
-
<h3 id="label-Row">Row</h3>
|
|
1034
|
-
|
|
1035
|
-
<p>Le composant row génére une div avec la class row.</p>
|
|
1036
|
-
|
|
1037
|
-
<p><code> row class: 'toto' do 'content' end # => <div
|
|
1038
|
-
class='row toto'>content</div> </code></p>
|
|
1039
|
-
|
|
1040
|
-
<p>Voir la <a
|
|
1041
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Content.html">doc</a></p>
|
|
1042
|
-
|
|
1043
|
-
<h3 id="label-Col">Col</h3>
|
|
1044
|
-
|
|
1045
|
-
<p>L'élément <code>col</code> est un <a href="#composant">composant</a>
|
|
1046
|
-
qui accèpte en arguments :</p>
|
|
1047
|
-
<ul><li>
|
|
1048
|
-
<p>num</p>
|
|
1049
|
-
</li><li>
|
|
1050
|
-
<p>offset</p>
|
|
1051
|
-
</li><li>
|
|
1052
|
-
<p>size</p>
|
|
1053
|
-
</li></ul>
|
|
1054
|
-
|
|
1055
|
-
<p>ou</p>
|
|
1056
|
-
<ul><li>
|
|
1057
|
-
<p>un tableau de hashes avec les arguments <code>num</code>,
|
|
1058
|
-
<code>offset</code> et <code>size</code> à l'intérieur.</p>
|
|
1059
|
-
</li></ul>
|
|
1060
|
-
|
|
1061
|
-
<p>Ces paramètres génèrent les classes qui seront insérées dans la div avec la
|
|
1062
|
-
classe col.</p>
|
|
1063
|
-
|
|
1064
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_col'>col</span><span class='lparen'>(</span><span class='lbrace'>{</span><span class='label'>num:</span> <span class='int'>2</span><span class='comma'>,</span> <span class='label'>size:</span> <span class='symbol'>:lg</span><span class='rbrace'>}</span><span class='comma'>,</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>test</span><span class='tstring_end'>'</span></span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
1065
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>content</span><span class='tstring_end'>'</span></span>
|
|
1066
|
-
<span class='kw'>end</span>
|
|
1067
|
-
<span class='comment'># => <div class='col-lg-2 test'>content</div>
|
|
1068
|
-
</span>
|
|
1069
|
-
|
|
1070
|
-
<span class='id identifier rubyid_col'>col</span><span class='lparen'>(</span><span class='lbracket'>[</span><span class='lbrace'>{</span> <span class='label'>offset:</span> <span class='int'>1</span><span class='comma'>,</span> <span class='label'>size:</span> <span class='symbol'>:xs</span><span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>num:</span> <span class='int'>3</span><span class='rbrace'>}</span><span class='rbracket'>]</span><span class='comma'>,</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>test</span><span class='tstring_end'>'</span></span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
1071
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>content</span><span class='tstring_end'>'</span></span>
|
|
1072
|
-
<span class='kw'>end</span>
|
|
1073
|
-
<span class='comment'># => <div class='col-xs-offset-1 col-md-3 test'>content</div>
|
|
1074
|
-
</span></code></pre>
|
|
1075
|
-
|
|
1076
|
-
<p>Voir la <a
|
|
1077
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Core/Col.html">doc</a></p>
|
|
1078
|
-
|
|
1079
|
-
<h3 id="label-Grid">Grid</h3>
|
|
1080
|
-
|
|
1081
|
-
<p>Une grid est un composant qui est composé de 5 vues :</p>
|
|
1082
|
-
<ul><li>
|
|
1083
|
-
<p>top</p>
|
|
1084
|
-
</li><li>
|
|
1085
|
-
<p>right</p>
|
|
1086
|
-
</li><li>
|
|
1087
|
-
<p>bottom</p>
|
|
1088
|
-
</li><li>
|
|
1089
|
-
<p>left</p>
|
|
1090
|
-
</li><li>
|
|
1091
|
-
<p>center</p>
|
|
1092
|
-
</li></ul>
|
|
1093
|
-
|
|
1094
|
-
<p>La vue <strong>center</strong> est obligatoire. Une vue à pour arguments :</p>
|
|
1095
|
-
<ul><li>
|
|
1096
|
-
<p>position (:top, :left, :bottom, :right, :center)</p>
|
|
1097
|
-
</li><li>
|
|
1098
|
-
<p>num (1..12) 12 étant le nombre limite de colonnes utilisable dans boostrap.</p>
|
|
1099
|
-
</li></ul>
|
|
1100
|
-
|
|
1101
|
-
<p>L'argument <code>position</code> détermine la position de la vue et
|
|
1102
|
-
l'argument <code>num</code> determine le nombre de colonnes occupées
|
|
1103
|
-
par la vue.</p>
|
|
1104
|
-
|
|
1105
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_grid'>grid</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_g'>g</span><span class='op'>|</span>
|
|
1106
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span> <span class='label'>num:</span> <span class='int'>3</span><span class='comma'>,</span> <span class='label'>position:</span> <span class='symbol'>:left</span> <span class='kw'>do</span>
|
|
1107
|
-
<span class='id identifier rubyid_list_group'>list_group</span><span class='lparen'>(</span><span class='label'>type:</span> <span class='symbol'>:link</span><span class='rparen'>)</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_lg'>lg</span><span class='op'>|</span>
|
|
1108
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#link1</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
1109
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 2</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#link1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>status:</span> <span class='symbol'>:active</span> <span class='rbrace'>}</span>
|
|
1110
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 1</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#link1</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
1111
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 3</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#link1</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
1112
|
-
<span class='id identifier rubyid_lg'>lg</span><span class='period'>.</span><span class='id identifier rubyid_list'>list</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Link 4</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>url:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#link1</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
1113
|
-
<span class='kw'>end</span>
|
|
1114
|
-
<span class='kw'>end</span>
|
|
1115
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span><span class='lparen'>(</span><span class='lbrace'>{</span> <span class='label'>position:</span> <span class='symbol'>:top</span><span class='rbrace'>}</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
1116
|
-
<span class='id identifier rubyid_button_group'>button_group</span><span class='lparen'>(</span><span class='label'>type:</span> <span class='symbol'>:toolbar</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
1117
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>option 1</span><span class='tstring_end'>'</span></span>
|
|
1118
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>option 2</span><span class='tstring_end'>'</span></span>
|
|
1119
|
-
<span class='id identifier rubyid_button'>button</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>option 3</span><span class='tstring_end'>'</span></span>
|
|
1120
|
-
<span class='kw'>end</span>
|
|
1121
|
-
<span class='kw'>end</span>
|
|
1122
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span> <span class='label'>position:</span> <span class='symbol'>:center</span> <span class='kw'>do</span>
|
|
1123
|
-
<span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@users</span><span class='comma'>,</span> <span class='label'>type:</span> <span class='symbol'>:bordered</span>
|
|
1124
|
-
<span class='kw'>end</span>
|
|
1125
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span> <span class='label'>position:</span> <span class='symbol'>:bottom</span> <span class='kw'>do</span>
|
|
1126
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>bottom</span><span class='tstring_end'>'</span></span>
|
|
1127
|
-
<span class='kw'>end</span>
|
|
1128
|
-
<span class='kw'>end</span>
|
|
1129
|
-
|
|
1130
|
-
<span class='id identifier rubyid_grid'>grid</span> <span class='kw'>do</span> <span class='op'>|</span><span class='id identifier rubyid_g'>g</span><span class='op'>|</span>
|
|
1131
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span> <span class='label'>num:</span> <span class='int'>5</span><span class='comma'>,</span> <span class='label'>position:</span> <span class='symbol'>:left</span> <span class='kw'>do</span>
|
|
1132
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>left</span><span class='tstring_end'>'</span></span>
|
|
1133
|
-
<span class='kw'>end</span>
|
|
1134
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span> <span class='label'>position:</span> <span class='symbol'>:right</span> <span class='kw'>do</span>
|
|
1135
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>right</span><span class='tstring_end'>'</span></span>
|
|
1136
|
-
<span class='kw'>end</span>
|
|
1137
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span><span class='lparen'>(</span><span class='lbrace'>{</span> <span class='label'>position:</span> <span class='symbol'>:top</span><span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>success</span><span class='tstring_end'>'</span></span><span class='rbrace'>}</span><span class='rparen'>)</span> <span class='kw'>do</span>
|
|
1138
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>top</span><span class='tstring_end'>'</span></span>
|
|
1139
|
-
<span class='kw'>end</span>
|
|
1140
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span> <span class='label'>position:</span> <span class='symbol'>:center</span> <span class='kw'>do</span>
|
|
1141
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>center</span><span class='tstring_end'>'</span></span>
|
|
1142
|
-
<span class='kw'>end</span>
|
|
1143
|
-
<span class='id identifier rubyid_g'>g</span><span class='period'>.</span><span class='id identifier rubyid_view'>view</span> <span class='label'>position:</span> <span class='symbol'>:bottom</span> <span class='kw'>do</span>
|
|
1144
|
-
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>bottom</span><span class='tstring_end'>'</span></span>
|
|
1145
|
-
<span class='kw'>end</span>
|
|
1146
|
-
<span class='kw'>end</span>
|
|
1147
|
-
</code></pre>
|
|
1148
|
-
|
|
1149
|
-
<p>Voir la <a
|
|
1150
|
-
href="http://hummel.link/Ui-Bibz/1.2.3/UiBibz/Ui/Ux/Grid.html">doc</a></p>
|
|
1151
|
-
|
|
1152
|
-
<h3 id="label-Arguments+and+Values">Arguments and Values</h3>
|
|
1153
|
-
|
|
1154
|
-
<h4 id="label-status-values">status-values</h4>
|
|
1155
|
-
<ul><li>
|
|
1156
|
-
<p>:active</p>
|
|
1157
|
-
</li><li>
|
|
1158
|
-
<p>:disable</p>
|
|
1159
|
-
</li></ul>
|
|
1160
|
-
|
|
1161
|
-
<h4 id="label-size-values">size-values</h4>
|
|
1162
|
-
<ul><li>
|
|
1163
|
-
<p>:xs</p>
|
|
1164
|
-
</li><li>
|
|
1165
|
-
<p>:sm</p>
|
|
1166
|
-
</li><li>
|
|
1167
|
-
<p>:lg</p>
|
|
1168
|
-
</li></ul>
|
|
1169
|
-
|
|
1170
|
-
<h4 id="label-state-values">state-values</h4>
|
|
1171
|
-
<ul><li>
|
|
1172
|
-
<p>:default</p>
|
|
1173
|
-
</li><li>
|
|
1174
|
-
<p>:primary</p>
|
|
1175
|
-
</li><li>
|
|
1176
|
-
<p>:info</p>
|
|
1177
|
-
</li><li>
|
|
1178
|
-
<p>:success</p>
|
|
1179
|
-
</li><li>
|
|
1180
|
-
<p>:warning</p>
|
|
1181
|
-
</li><li>
|
|
1182
|
-
<p>:danger</p>
|
|
1183
|
-
</li></ul>
|
|
1184
|
-
|
|
1185
|
-
<h4 id="label-glyph-arguments">glyph-arguments</h4>
|
|
1186
|
-
<ul><li>
|
|
1187
|
-
<p>name</p>
|
|
1188
|
-
</li><li>
|
|
1189
|
-
<p>size</p>
|
|
1190
|
-
</li><li>
|
|
1191
|
-
<p>type</p>
|
|
1192
|
-
</li></ul>
|
|
1193
|
-
|
|
1194
|
-
<h1 id="label-Plus+de+d-C3-A9tails">Plus de détails</h1>
|
|
1195
|
-
|
|
1196
|
-
<p>Pour plus d'informations, vous pouvez accéder à la documentation rdoc
|
|
1197
|
-
en générant cette dernière :</p>
|
|
1198
|
-
|
|
1199
|
-
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_rake'>rake</span> <span class='id identifier rubyid_rdoc'>rdoc</span>
|
|
1200
|
-
</code></pre>
|
|
1201
|
-
|
|
1202
|
-
<h1 id="label-Conflits">Conflits</h1>
|
|
1203
|
-
|
|
1204
|
-
<p>Certaines méthodes dans le helper peuvent être en conflit avec d'autres
|
|
1205
|
-
librairies. Le cas échéant, vous pouvez utiliser directement la librairie
|
|
1206
|
-
UiBibz comme ci-dessous.</p>
|
|
1207
|
-
|
|
1208
|
-
<p>Exemple :</p>
|
|
1209
|
-
|
|
1210
|
-
<pre class="code ruby"><code class="ruby"><span class='const'>UiBibz</span><span class='op'>::</span><span class='const'>Ui</span><span class='op'>::</span><span class='const'>Core</span><span class='op'>::</span><span class='const'>Panel</span><span class='period'>.</span><span class='id identifier rubyid_new'>new</span><span class='lparen'>(</span><span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Exemple</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>state:</span> <span class='symbol'>:success</span> <span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>exemple</span><span class='tstring_end'>'</span></span><span class='rbrace'>}</span><span class='rparen'>)</span><span class='period'>.</span><span class='id identifier rubyid_render'>render</span>
|
|
1211
|
-
<span class='comment'># au lieu de
|
|
1212
|
-
</span><span class='id identifier rubyid_panel'>panel</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Exemple</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>state:</span> <span class='symbol'>:success</span> <span class='rbrace'>}</span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>exemple</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
1213
|
-
</code></pre>
|
|
1214
|
-
|
|
1215
|
-
<h1 id="label-Ui+Bibz+versions">Ui Bibz versions</h1>
|
|
1216
|
-
<ul><li>
|
|
1217
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.0/index.html">Ui Bibz v1.1.0</a></p>
|
|
1218
|
-
</li><li>
|
|
1219
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.1/index.html">Ui Bibz v1.1.1</a></p>
|
|
1220
|
-
</li><li>
|
|
1221
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.2/index.html">Ui Bibz v1.1.2</a></p>
|
|
1222
|
-
</li><li>
|
|
1223
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.3/index.html">Ui Bibz v1.1.3</a></p>
|
|
1224
|
-
</li><li>
|
|
1225
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.4/index.html">Ui Bibz v1.1.4</a></p>
|
|
1226
|
-
</li><li>
|
|
1227
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.5/index.html">Ui Bibz v1.1.5</a></p>
|
|
1228
|
-
</li><li>
|
|
1229
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.6/index.html">Ui Bibz v1.1.6</a></p>
|
|
1230
|
-
</li><li>
|
|
1231
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.1.7/index.html">Ui Bibz v1.1.7</a></p>
|
|
1232
|
-
</li><li>
|
|
1233
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.2.0/index.html">Ui Bibz v1.2.0</a></p>
|
|
1234
|
-
</li><li>
|
|
1235
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.2.3/index.html">Ui Bibz v1.2.1</a></p>
|
|
1236
|
-
</li><li>
|
|
1237
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.2.2/index.html">Ui Bibz v1.2.2</a></p>
|
|
1238
|
-
</li><li>
|
|
1239
|
-
<p><a href="http://hummel.link/Ui-Bibz/1.2.3/index.html">Ui Bibz v1.2.3</a></p>
|
|
1240
|
-
</li></ul>
|
|
1241
|
-
|
|
1242
|
-
<h1 id="label-Roadmap">Roadmap</h1>
|
|
1243
|
-
|
|
1244
|
-
<p>Pour la V2.</p>
|
|
1245
|
-
<ul><li>
|
|
1246
|
-
<p>créer des stores pour les listes, breadcrumb</p>
|
|
1247
|
-
</li><li>
|
|
1248
|
-
<p>créer d'autres extensions, plugins et une guideline</p>
|
|
1249
|
-
</li><li>
|
|
1250
|
-
<p>mise à jour vers bootstrap 4 …</p>
|
|
1251
|
-
</li></ul>
|
|
1252
|
-
</div></div>
|
|
1253
|
-
|
|
1254
|
-
<div id="footer">
|
|
1255
|
-
Generated on Mon Oct 19 15:25:08 2015 by
|
|
1256
|
-
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
1257
|
-
0.8.7.6 (ruby-2.2.3).
|
|
1258
|
-
</div>
|
|
1259
|
-
|
|
1260
|
-
</body>
|
|
1261
|
-
</html>
|