ui_bibz 1.0.0 → 1.1.0
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 +13 -5
- data/.gitignore +1 -1
- data/.yardoc/checksums +52 -0
- data/.yardoc/object_types +0 -0
- data/.yardoc/objects/root.dat +0 -0
- data/.yardoc/proxy_types +0 -0
- data/Gemfile +1 -1
- data/Gemfile.lock +11 -21
- data/README.md +359 -239
- data/Rakefile +12 -13
- data/doc/UiBibz/Concerns/Models/Searchable/ClassMethods.html +174 -0
- data/doc/UiBibz/Concerns/Models/Searchable.html +120 -0
- data/doc/UiBibz/Helpers/MetaHelper.html +218 -0
- data/doc/UiBibz/Helpers/UiCoreHelper.html +1130 -0
- data/doc/UiBibz/Helpers/UiUxHelper.html +463 -0
- data/doc/UiBibz/Helpers/UtilsHelper.html +187 -0
- data/doc/UiBibz/Rails/Engine.html +123 -0
- data/doc/UiBibz/Rails.html +115 -0
- data/doc/UiBibz/Ui/Base.html +304 -0
- data/doc/UiBibz/Ui/Core/Alert.html +367 -0
- data/doc/UiBibz/Ui/Core/Bar.html +356 -0
- data/doc/UiBibz/Ui/Core/Breadcrumb.html +427 -0
- data/doc/UiBibz/Ui/Core/BreadcrumbLink.html +354 -0
- data/doc/UiBibz/Ui/Core/Button.html +363 -0
- data/doc/UiBibz/Ui/Core/ButtonDropdown.html +385 -0
- data/doc/UiBibz/Ui/Core/ButtonGroup.html +356 -0
- data/doc/UiBibz/Ui/Core/ButtonLink.html +365 -0
- data/doc/UiBibz/Ui/Core/ButtonSplitDropdown.html +387 -0
- data/doc/UiBibz/Ui/Core/Col.html +357 -0
- data/doc/UiBibz/Ui/Core/Component.html +1144 -0
- data/doc/UiBibz/Ui/Core/Dropdown.html +877 -0
- data/doc/UiBibz/Ui/Core/DropdownList.html +369 -0
- data/doc/UiBibz/Ui/Core/Glyph.html +742 -0
- data/doc/UiBibz/Ui/Core/Jumbotron.html +363 -0
- data/doc/UiBibz/Ui/Core/Label.html +361 -0
- data/doc/UiBibz/Ui/Core/List.html +486 -0
- data/doc/UiBibz/Ui/Core/ListGroup.html +446 -0
- data/doc/UiBibz/Ui/Core/Nav.html +474 -0
- data/doc/UiBibz/Ui/Core/NavDropdown.html +376 -0
- data/doc/UiBibz/Ui/Core/NavLink.html +347 -0
- data/doc/UiBibz/Ui/Core/Navbar.html +535 -0
- data/doc/UiBibz/Ui/Core/NavbarForm.html +341 -0
- data/doc/UiBibz/Ui/Core/NavbarNav.html +301 -0
- data/doc/UiBibz/Ui/Core/NavbarText.html +341 -0
- data/doc/UiBibz/Ui/Core/Panel.html +806 -0
- data/doc/UiBibz/Ui/Core/ProgressBar.html +433 -0
- data/doc/UiBibz/Ui/Core/Row.html +335 -0
- data/doc/UiBibz/Ui/Core.html +117 -0
- data/doc/UiBibz/Ui/Ux/Actionable.html +478 -0
- data/doc/UiBibz/Ui/Ux/Actions.html +314 -0
- data/doc/UiBibz/Ui/Ux/Column.html +1177 -0
- data/doc/UiBibz/Ui/Ux/Columns.html +312 -0
- data/doc/UiBibz/Ui/Ux/Grid.html +823 -0
- data/doc/UiBibz/Ui/Ux/Paginable.html +368 -0
- data/doc/UiBibz/Ui/Ux/Searchable.html +363 -0
- data/doc/UiBibz/Ui/Ux/Sortable.html +289 -0
- data/doc/UiBibz/Ui/Ux/Store.html +968 -0
- data/doc/UiBibz/Ui/Ux/Table.html +957 -0
- data/doc/UiBibz/Ui/Ux/TableAction.html +309 -0
- data/doc/UiBibz/Ui/Ux/TablePagination.html +319 -0
- data/doc/UiBibz/Ui/Ux/TablePaginationPerPage.html +331 -0
- data/doc/UiBibz/Ui/Ux/TablePanel.html +576 -0
- data/doc/UiBibz/Ui/Ux/TableSearchField.html +291 -0
- data/doc/UiBibz/Ui/Ux.html +117 -0
- data/doc/UiBibz/Ui.html +117 -0
- data/doc/UiBibz/Utils/Internationalization.html +262 -0
- data/doc/UiBibz/Utils.html +115 -0
- data/doc/UiBibz.html +129 -0
- data/doc/_index.html +635 -0
- data/doc/class_list.html +58 -0
- data/doc/css/common.css +1 -0
- data/doc/css/full_list.css +57 -0
- data/doc/css/style.css +339 -0
- data/doc/file.README.html +1022 -0
- data/doc/file_list.html +60 -0
- data/doc/frames.html +26 -0
- data/doc/images/navbar.png +0 -0
- data/doc/index.html +1022 -0
- data/doc/js/app.js +219 -0
- data/doc/js/full_list.js +181 -0
- data/doc/js/jquery.js +4 -0
- data/doc/method_list.html +1335 -0
- data/doc/top-level-namespace.html +112 -0
- data/lib/ui_bibz/helpers/ui_core_helper.rb +94 -0
- data/lib/ui_bibz/helpers/ui_ux_helper.rb +43 -0
- data/lib/ui_bibz/rails/engine.rb +2 -1
- data/lib/ui_bibz/ui/{ui.rb → base.rb} +1 -1
- data/lib/ui_bibz/ui/{alert.rb → core/alert.rb} +15 -7
- data/lib/ui_bibz/ui/core/breadcrumb/breadcrumb.rb +71 -0
- data/lib/ui_bibz/ui/{breadcrumb → core/breadcrumb}/components/breadcrumb_link.rb +6 -6
- data/lib/ui_bibz/ui/{button → core/button}/button.rb +13 -6
- data/lib/ui_bibz/ui/{button → core/button}/button_dropdown.rb +15 -4
- data/lib/ui_bibz/ui/{button → core/button}/button_group.rb +14 -6
- data/lib/ui_bibz/ui/{button → core/button}/button_link.rb +14 -6
- data/lib/ui_bibz/ui/{button → core/button}/button_split_dropdown.rb +15 -4
- data/lib/ui_bibz/ui/{grid/components → core}/col.rb +12 -6
- data/lib/ui_bibz/ui/{component.rb → core/component.rb} +7 -7
- data/lib/ui_bibz/ui/{dropdown → core/dropdown}/components/dropdown_list.rb +7 -7
- data/lib/ui_bibz/ui/{dropdown → core/dropdown}/dropdown.rb +18 -7
- data/lib/ui_bibz/ui/{glyph.rb → core/glyph.rb} +18 -10
- data/lib/ui_bibz/ui/{jumbotron.rb → core/jumbotron.rb} +14 -6
- data/lib/ui_bibz/ui/{label.rb → core/label.rb} +14 -6
- data/lib/ui_bibz/ui/{list → core/list}/components/list.rb +8 -8
- data/lib/ui_bibz/ui/{list → core/list}/list_group.rb +28 -6
- data/lib/ui_bibz/ui/core/nav/components/nav_dropdown.rb +64 -0
- data/lib/ui_bibz/ui/{nav → core/nav}/components/nav_link.rb +6 -6
- data/lib/ui_bibz/ui/core/nav/components/navbar_form.rb +45 -0
- data/lib/ui_bibz/ui/core/nav/components/navbar_nav.rb +56 -0
- data/lib/ui_bibz/ui/core/nav/components/navbar_text.rb +45 -0
- data/lib/ui_bibz/ui/core/nav/nav.rb +90 -0
- data/lib/ui_bibz/ui/core/nav/navbar.rb +121 -0
- data/lib/ui_bibz/ui/{panel.rb → core/panel.rb} +36 -8
- data/lib/ui_bibz/ui/{progress_bar → core/progress_bar}/components/bar.rb +7 -7
- data/lib/ui_bibz/ui/{progress_bar → core/progress_bar}/progress_bar.rb +20 -9
- data/lib/ui_bibz/ui/{grid/components → core}/row.rb +12 -4
- data/lib/ui_bibz/ui/{grid → ux}/grid.rb +17 -8
- data/lib/ui_bibz/ui/{table → ux/table}/components/actions.rb +5 -5
- data/lib/ui_bibz/ui/ux/table/components/column.rb +34 -0
- data/lib/ui_bibz/ui/ux/table/components/columns.rb +16 -0
- data/lib/ui_bibz/ui/{table → ux/table}/components/store.rb +4 -4
- data/lib/ui_bibz/ui/{table → ux/table}/components/table_action.rb +2 -2
- data/lib/ui_bibz/ui/{table/ux → ux/table/extensions}/actionable.rb +3 -3
- data/lib/ui_bibz/ui/{table/ux → ux/table/extensions}/paginable.rb +5 -5
- data/lib/ui_bibz/ui/{table/ux → ux/table/extensions}/searchable.rb +4 -4
- data/lib/ui_bibz/ui/{table/ux → ux/table/extensions}/sortable.rb +3 -3
- data/lib/ui_bibz/ui/{table → ux/table}/table.rb +40 -22
- data/lib/ui_bibz/ui/ux/table/table_pagination.rb +51 -0
- data/lib/ui_bibz/ui/{table → ux/table}/table_pagination_per_page.rb +26 -4
- data/lib/ui_bibz/ui/ux/table/table_panel.rb +155 -0
- data/lib/ui_bibz/ui/{table → ux/table}/table_search_field.rb +7 -7
- data/lib/ui_bibz/version.rb +1 -1
- data/lib/ui_bibz.rb +40 -29
- data/test/store_test.rb +2 -2
- data/test/ui/button_test.rb +6 -6
- data/test/ui/component_test.rb +2 -2
- data/test/ui/dropdown_test.rb +1 -1
- data/test/ui/glyph_test.rb +3 -3
- data/test/ui/grid_test.rb +4 -4
- data/test/ui/list_group_test.rb +2 -2
- data/test/ui/nav_test.rb +3 -4
- data/test/ui/panel_test.rb +4 -4
- data/test/ui/table_test.rb +32 -32
- data/test/ui_helper_test.rb +18 -2
- data/ui_bibz.gemspec +1 -0
- data/vendor/assets/stylesheets/ui_bibz.sass +3 -0
- metadata +166 -132
- data/README.rdoc +0 -0
- data/lib/ui_bibz/helpers/ui_helper.rb +0 -119
- data/lib/ui_bibz/ui/breadcrumb/breadcrumb.rb +0 -54
- data/lib/ui_bibz/ui/nav/nav.rb +0 -65
- data/lib/ui_bibz/ui/table/components/column.rb +0 -34
- data/lib/ui_bibz/ui/table/components/columns.rb +0 -16
- data/lib/ui_bibz/ui/table/table_pagination.rb +0 -29
- data/lib/ui_bibz/ui/table/table_panel.rb +0 -66
data/doc/index.html
ADDED
|
@@ -0,0 +1,1022 @@
|
|
|
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'><p><img src="images/ui-bibz-logo-without-border.gif" alt="Ui Bibz logo"></p>
|
|
65
|
+
|
|
66
|
+
<p><a href="https://travis-ci.org/thooams/Ui-Bibz"><img src="https://travis-ci.org/thooams/Ui-Bibz.svg" alt="Build Status"></a>
|
|
67
|
+
<a href="https://codeclimate.com/github/thooams/Ui-Bibz"><img src="https://codeclimate.com/github/thooams/Ui-Bibz/badges/gpa.svg" alt="Code Climate"></a>
|
|
68
|
+
<a href="https://codeclimate.com/github/thooams/Ui-Bibz"><img src="https://codeclimate.com/github/thooams/Ui-Bibz/badges/coverage.svg" alt="Test Coverage"></a></p>
|
|
69
|
+
|
|
70
|
+
<p>This project rocks and uses MIT-LICENSE.</p>
|
|
71
|
+
|
|
72
|
+
<h1>Ui Bibz</h1>
|
|
73
|
+
|
|
74
|
+
<blockquote>
|
|
75
|
+
<p>Ui Bibz est un <a href="http://fr.wikipedia.org/wiki/Framework_d%27interface">framework d'interface</a>
|
|
76
|
+
permettant de construire une interface très rapidement et simplement
|
|
77
|
+
à l'aide de <a href="http://rubyonrails.org/">Ruby on Rails 4</a> et de <a href="http://getbootstrap.com/">Boostrap 3</a>.</p>
|
|
78
|
+
</blockquote>
|
|
79
|
+
|
|
80
|
+
<p>Ui Bibz charge la librairie <a href="http://getbootstrap.com/">boostrap</a> et
|
|
81
|
+
<a href="http://fontawesome.io/">awesomefont</a> en <a href="https://fr.wikipedia.org/wiki/Content_delivery_network">CDN</a>.</p>
|
|
82
|
+
|
|
83
|
+
<p>Tous les composants du framework Ui Bibz comportent l'agument <em>options</em> et l'argument <em>html_options</em>.
|
|
84
|
+
Ces éléments sont basés sur l'élément <code>Component</code>.
|
|
85
|
+
Un <code>component</code> accepte un contenu par variable ou par block.</p>
|
|
86
|
+
|
|
87
|
+
<h3>Component</h3>
|
|
88
|
+
|
|
89
|
+
<p>L'élément <code>component</code> accepte dans content et block :</p>
|
|
90
|
+
|
|
91
|
+
<ul>
|
|
92
|
+
<li>le contenu</li>
|
|
93
|
+
</ul>
|
|
94
|
+
|
|
95
|
+
<p>L'élément <code>component</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
96
|
+
|
|
97
|
+
<ul>
|
|
98
|
+
<li><a href="#state-values">state</a></li>
|
|
99
|
+
<li><a href="#glyph-arguments">glyph</a></li>
|
|
100
|
+
<li><a href="#status-values">status</a></li>
|
|
101
|
+
<li>class</li>
|
|
102
|
+
</ul>
|
|
103
|
+
|
|
104
|
+
<p>L'élément <code>component</code> à pour <code>html_options</code> un Hash acceptant les clefs :</p>
|
|
105
|
+
|
|
106
|
+
<ul>
|
|
107
|
+
<li>class</li>
|
|
108
|
+
<li>data</li>
|
|
109
|
+
<li>...</li>
|
|
110
|
+
</ul>
|
|
111
|
+
|
|
112
|
+
<p>Exemple :</p>
|
|
113
|
+
|
|
114
|
+
<pre class="code ruby"><code class="ruby">Component.new 'Exemple', { state: :success, glyph: { name: 'pencil', size: 3} }, { class: 'exemple' }
|
|
115
|
+
|
|
116
|
+
Component.new { state: :success, glyph: 'eye' }, { class: 'exemple' } do
|
|
117
|
+
'Exemple'
|
|
118
|
+
end
|
|
119
|
+
</code></pre>
|
|
120
|
+
|
|
121
|
+
<p>Signature :</p>
|
|
122
|
+
|
|
123
|
+
<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>
|
|
124
|
+
</code></pre>
|
|
125
|
+
|
|
126
|
+
<p><strong>NB</strong> : Pour des raisons de simplicité d'écriture, l'argument <code>class</code> est présent
|
|
127
|
+
dans <code>options</code> et <code>html_options</code>.</p>
|
|
128
|
+
|
|
129
|
+
<h2>Installation</h2>
|
|
130
|
+
|
|
131
|
+
<p>Ajouter la gem dans Rails :</p>
|
|
132
|
+
|
|
133
|
+
<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.0.0</span><span class='tstring_end'>'</span></span>
|
|
134
|
+
</code></pre>
|
|
135
|
+
|
|
136
|
+
<p>Lancer la command suivante :</p>
|
|
137
|
+
|
|
138
|
+
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_bundle'>bundle</span> <span class='id identifier rubyid_install'>install</span>
|
|
139
|
+
</code></pre>
|
|
140
|
+
|
|
141
|
+
<p>Placer la ligne suivante dans <code>/app/views/layouts/application.rb</code></p>
|
|
142
|
+
|
|
143
|
+
<pre class="code ruby"><code class="ruby"> = ui_bibz_meta_links
|
|
144
|
+
</code></pre>
|
|
145
|
+
|
|
146
|
+
<p>Exemple (<a href="http://haml.info/">haml</a>):</p>
|
|
147
|
+
|
|
148
|
+
<pre class="code ruby"><code class="ruby">!!!
|
|
149
|
+
%html
|
|
150
|
+
%head
|
|
151
|
+
...
|
|
152
|
+
= ui_bibz_meta_links
|
|
153
|
+
...
|
|
154
|
+
%body
|
|
155
|
+
</code></pre>
|
|
156
|
+
|
|
157
|
+
<p>Placer la ligne suivante dans <code>/app/assets/stylesheets/applications.css</code></p>
|
|
158
|
+
|
|
159
|
+
<pre class="code ruby"><code class="ruby">...
|
|
160
|
+
*= require ui_bibz
|
|
161
|
+
...
|
|
162
|
+
</code></pre>
|
|
163
|
+
|
|
164
|
+
<p>Placer la ligne suivante dans <code>/app/assets/javascripts/applications.js</code></p>
|
|
165
|
+
|
|
166
|
+
<pre class="code ruby"><code class="ruby">...
|
|
167
|
+
//= require ui_bibz
|
|
168
|
+
...
|
|
169
|
+
</code></pre>
|
|
170
|
+
|
|
171
|
+
<h2>Utilisation</h2>
|
|
172
|
+
|
|
173
|
+
<h3>Alert</h3>
|
|
174
|
+
|
|
175
|
+
<p><img src="images/alert.png" alt="alert"></p>
|
|
176
|
+
|
|
177
|
+
<p>L'élément <code>notify</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
178
|
+
|
|
179
|
+
<ul>
|
|
180
|
+
<li><a href="#state-values">state</a></li>
|
|
181
|
+
<li><a href="#glyph-arguments">glyph</a></li>
|
|
182
|
+
</ul>
|
|
183
|
+
|
|
184
|
+
<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>
|
|
185
|
+
</code></pre>
|
|
186
|
+
|
|
187
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Alert.html">doc</a></p>
|
|
188
|
+
|
|
189
|
+
<h3>Breadcrumb (fil d'ariane)</h3>
|
|
190
|
+
|
|
191
|
+
<p><img src="images/breadcrumb.png" alt="breadcrumb"></p>
|
|
192
|
+
|
|
193
|
+
<p>L'élément <code>breadcrumb</code> à pour enfant l'élément <code>link</code> qui accepte pour option un Hash avec les clefs :</p>
|
|
194
|
+
|
|
195
|
+
<ul>
|
|
196
|
+
<li><a href="#status-values">status</a></li>
|
|
197
|
+
<li><a href="#glyph-arguments">glyph</a></li>
|
|
198
|
+
<li>url</li>
|
|
199
|
+
</ul>
|
|
200
|
+
|
|
201
|
+
<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>
|
|
202
|
+
<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>
|
|
203
|
+
<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>
|
|
204
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Exemple 2</span><span class='tstring_end'>'</span></span>
|
|
205
|
+
<span class='kw'>end</span>
|
|
206
|
+
<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>
|
|
207
|
+
<span class='kw'>end</span>
|
|
208
|
+
</code></pre>
|
|
209
|
+
|
|
210
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Breadcrumb.html">doc</a></p>
|
|
211
|
+
|
|
212
|
+
<h3>Buttons (Boutons)</h3>
|
|
213
|
+
|
|
214
|
+
<h4>Button</h4>
|
|
215
|
+
|
|
216
|
+
<p><img src="images/button.png" alt="button"></p>
|
|
217
|
+
|
|
218
|
+
<p>L'élément <code>button</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
219
|
+
|
|
220
|
+
<ul>
|
|
221
|
+
<li><a href="#state-values">state</a></li>
|
|
222
|
+
<li><a href="#status-values">status</a></li>
|
|
223
|
+
<li><a href="#glyph-arguments">glyph</a></li>
|
|
224
|
+
<li><a href="#size-values">size</a></li>
|
|
225
|
+
</ul>
|
|
226
|
+
|
|
227
|
+
<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>
|
|
228
|
+
</code></pre>
|
|
229
|
+
|
|
230
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Button.html">doc</a></p>
|
|
231
|
+
|
|
232
|
+
<h4>Button Dropdown</h4>
|
|
233
|
+
|
|
234
|
+
<p>L'élément <code>button_dropdown</code> accepte pour options les mêmes clefs que l'élément
|
|
235
|
+
<a href="#dropdown">dropdown</a>.</p>
|
|
236
|
+
|
|
237
|
+
<p><img src="images/button_dropdown.png" alt="button_link"></p>
|
|
238
|
+
|
|
239
|
+
<pre class="code ruby"><code class="ruby"><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>
|
|
240
|
+
<span class='id identifier rubyid_bd'>bd</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='lparen'>(</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><span class='rparen'>)</span>
|
|
241
|
+
<span class='id identifier rubyid_bd'>bd</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>
|
|
242
|
+
<span class='id identifier rubyid_bd'>bd</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='lparen'>(</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><span class='rparen'>)</span>
|
|
243
|
+
<span class='id identifier rubyid_bd'>bd</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>
|
|
244
|
+
<span class='id identifier rubyid_bd'>bd</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='lparen'>(</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><span class='rparen'>)</span>
|
|
245
|
+
<span class='kw'>end</span>
|
|
246
|
+
</code></pre>
|
|
247
|
+
|
|
248
|
+
<p>Voir la <a href="UiBibz/Ui/Core/ButtonLink.html">doc</a></p>
|
|
249
|
+
|
|
250
|
+
<h4>Button group</h4>
|
|
251
|
+
|
|
252
|
+
<p><img src="images/button_group.png" alt="button_group"></p>
|
|
253
|
+
|
|
254
|
+
<p>L'élément <code>button_group</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
255
|
+
|
|
256
|
+
<ul>
|
|
257
|
+
<li>position (:vertical, :horizontal)</li>
|
|
258
|
+
<li><a href="#size-values">size</a></li>
|
|
259
|
+
</ul>
|
|
260
|
+
|
|
261
|
+
<p>L'élément <code>list</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
262
|
+
|
|
263
|
+
<ul>
|
|
264
|
+
<li><a href="#status-values">status</a></li>
|
|
265
|
+
<li><a href="#state-values">state</a></li>
|
|
266
|
+
</ul>
|
|
267
|
+
|
|
268
|
+
<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>
|
|
269
|
+
<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>
|
|
270
|
+
<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>
|
|
271
|
+
<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>
|
|
272
|
+
<span class='kw'>end</span>
|
|
273
|
+
|
|
274
|
+
<span class='id identifier rubyid_button_group'>button_group</span> <span class='kw'>do</span>
|
|
275
|
+
<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>
|
|
276
|
+
<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>
|
|
277
|
+
<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>
|
|
278
|
+
<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>
|
|
279
|
+
<span class='id identifier rubyid_bd'>bd</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</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='label'>type:</span> <span class='symbol'>:header</span>
|
|
280
|
+
<span class='id identifier rubyid_bd'>bd</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='lparen'>(</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><span class='rparen'>)</span>
|
|
281
|
+
<span class='id identifier rubyid_bd'>bd</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>
|
|
282
|
+
<span class='id identifier rubyid_bd'>bd</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='lparen'>(</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><span class='rparen'>)</span>
|
|
283
|
+
<span class='kw'>end</span>
|
|
284
|
+
<span class='kw'>end</span>
|
|
285
|
+
</code></pre>
|
|
286
|
+
|
|
287
|
+
<p>Voir la <a href="UiBibz/Ui/Core/ButtonGroup.html">doc</a></p>
|
|
288
|
+
|
|
289
|
+
<h4>Button Link (Lien Bouton)</h4>
|
|
290
|
+
|
|
291
|
+
<p><img src="images/button_link.png" alt="button_link"></p>
|
|
292
|
+
|
|
293
|
+
<p>L'élément <code>button_link</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
294
|
+
|
|
295
|
+
<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>
|
|
296
|
+
</code></pre>
|
|
297
|
+
|
|
298
|
+
<p>Voir la <a href="UiBibz/Ui/Core/ButtonLink.html">doc</a></p>
|
|
299
|
+
|
|
300
|
+
<h4>Button Split Dropdown</h4>
|
|
301
|
+
|
|
302
|
+
<p><img src="images/button_split_dropdown.png" alt="button_group"></p>
|
|
303
|
+
|
|
304
|
+
<p>L'élément <code>button_split_dropdown</code>accepte pour options les mêmes clefs
|
|
305
|
+
que l'élément <a href="#dropdown">dropdown</a>.</p>
|
|
306
|
+
|
|
307
|
+
<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>
|
|
308
|
+
<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>
|
|
309
|
+
<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>
|
|
310
|
+
<span class='kw'>end</span>
|
|
311
|
+
<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>
|
|
312
|
+
<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>
|
|
313
|
+
<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>
|
|
314
|
+
<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>
|
|
315
|
+
<span class='kw'>end</span>
|
|
316
|
+
</code></pre>
|
|
317
|
+
|
|
318
|
+
<p>Voir la <a href="UiBibz/Ui/Core/ButtonSplitDropdown.html">doc</a></p>
|
|
319
|
+
|
|
320
|
+
<h3>Dropdown</h3>
|
|
321
|
+
|
|
322
|
+
<p>L'élément <code>dropdown</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
323
|
+
|
|
324
|
+
<ul>
|
|
325
|
+
<li><a href="#state-values">state</a></li>
|
|
326
|
+
<li><a href="#status-values">status</a></li>
|
|
327
|
+
<li>position (:left, :right)</li>
|
|
328
|
+
</ul>
|
|
329
|
+
|
|
330
|
+
<p>L'élément <code>list</code> est un <a href="#component">component</a> qui accepte pour options les clefs :</p>
|
|
331
|
+
|
|
332
|
+
<ul>
|
|
333
|
+
<li>type (:header)</li>
|
|
334
|
+
<li><a href="#glyph-arguments">glyph</a></li>
|
|
335
|
+
</ul>
|
|
336
|
+
|
|
337
|
+
<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>
|
|
338
|
+
<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>
|
|
339
|
+
<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>
|
|
340
|
+
<span class='kw'>end</span>
|
|
341
|
+
<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>
|
|
342
|
+
<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>
|
|
343
|
+
<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>
|
|
344
|
+
<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>
|
|
345
|
+
<span class='kw'>end</span>
|
|
346
|
+
</code></pre>
|
|
347
|
+
|
|
348
|
+
<p>Pour ajouter une ligne séparatrice, il suffit d'insérer 3 "-" à la suite</p>
|
|
349
|
+
|
|
350
|
+
<p>Exemple :</p>
|
|
351
|
+
|
|
352
|
+
<pre class="code ruby"><code class="ruby">...
|
|
353
|
+
d.list '--'
|
|
354
|
+
...
|
|
355
|
+
</code></pre>
|
|
356
|
+
|
|
357
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Dropdown.html">doc</a></p>
|
|
358
|
+
|
|
359
|
+
<h3>Progress Bar</h3>
|
|
360
|
+
|
|
361
|
+
<p><img src="images/progress_bar.png" alt="glyph"></p>
|
|
362
|
+
|
|
363
|
+
<p>L'élément <code>progress_bar</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
364
|
+
|
|
365
|
+
<ul>
|
|
366
|
+
<li><a href="#state-values">state</a></li>
|
|
367
|
+
<li>type (:animated, :striped)</li>
|
|
368
|
+
<li>label - String (default: "percentage%")</li>
|
|
369
|
+
<li>tap - Boolean (true: To add several bars)</li>
|
|
370
|
+
<li>percentage_min - Integer (default: 0)</li>
|
|
371
|
+
<li>percentage_max - Integer (default: 100)</li>
|
|
372
|
+
<li>sr_only - Boolean to show label (default: false)</li>
|
|
373
|
+
</ul>
|
|
374
|
+
|
|
375
|
+
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_progress_bar'>progress_bar</span> <span class='int'>30</span>
|
|
376
|
+
|
|
377
|
+
<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>
|
|
378
|
+
<span class='int'>70</span>
|
|
379
|
+
<span class='kw'>end</span>
|
|
380
|
+
|
|
381
|
+
<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>
|
|
382
|
+
<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>
|
|
383
|
+
<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>
|
|
384
|
+
<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>
|
|
385
|
+
<span class='int'>10</span>
|
|
386
|
+
<span class='kw'>end</span>
|
|
387
|
+
<span class='kw'>end</span>
|
|
388
|
+
</code></pre>
|
|
389
|
+
|
|
390
|
+
<p>Voir la <a href="UiBibz/Ui/Core/ProgressBar.html">doc</a></p>
|
|
391
|
+
|
|
392
|
+
<h3>Glyph</h3>
|
|
393
|
+
|
|
394
|
+
<p><img src="images/glyph.png" alt="glyph"></p>
|
|
395
|
+
|
|
396
|
+
<p>Les glyphs utilisés proviennent de <a href="http://fontawesome.io/">Font Awesome</a>.
|
|
397
|
+
L'élément <code>glyph</code> peut contenir un hash pour <code>content</code>
|
|
398
|
+
L'élément <code>glyph</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
399
|
+
|
|
400
|
+
<ul>
|
|
401
|
+
<li>size</li>
|
|
402
|
+
<li>type</li>
|
|
403
|
+
</ul>
|
|
404
|
+
|
|
405
|
+
<pre class="code ruby"><code class="ruby">glyph 'star', { size: 3, type: 'fw' }, class: 'star-exemple'
|
|
406
|
+
|
|
407
|
+
glyph { name: 'star', size: 3, type: 'fw' }
|
|
408
|
+
</code></pre>
|
|
409
|
+
|
|
410
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Glyph.html">doc</a></p>
|
|
411
|
+
|
|
412
|
+
<h3>Panel</h3>
|
|
413
|
+
|
|
414
|
+
<p><img src="images/panel.png" alt="panel"></p>
|
|
415
|
+
|
|
416
|
+
<p>L'élément <code>panel</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
417
|
+
|
|
418
|
+
<ul>
|
|
419
|
+
<li><a href="#state">state</a></li>
|
|
420
|
+
<li>tap (true) : permet de créer un header, body et footer</li>
|
|
421
|
+
</ul>
|
|
422
|
+
|
|
423
|
+
<p>Les éléments <code>header</code>, <code>body</code>,<code>footer</code> sont des éléments <a href="#component">component</a>.</p>
|
|
424
|
+
|
|
425
|
+
<p>Exemple :</p>
|
|
426
|
+
|
|
427
|
+
<pre class="code ruby"><code class="ruby">panel 'danger'
|
|
428
|
+
|
|
429
|
+
panel(state: :danger) do
|
|
430
|
+
'Content'
|
|
431
|
+
end
|
|
432
|
+
|
|
433
|
+
panel({ tap: true, state: :danger }, { class: 'exemple' }) |p|
|
|
434
|
+
p.header 'Header', glyph: 'eye'
|
|
435
|
+
p.body(class: 'my-body') do
|
|
436
|
+
'Content body'
|
|
437
|
+
end
|
|
438
|
+
p.footer 'Footer'
|
|
439
|
+
end
|
|
440
|
+
</code></pre>
|
|
441
|
+
|
|
442
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Panel.html">doc</a></p>
|
|
443
|
+
|
|
444
|
+
<h3>Table</h3>
|
|
445
|
+
|
|
446
|
+
<p><img src="images/table.png" alt="table"></p>
|
|
447
|
+
|
|
448
|
+
<p>L'élément <code>table</code> est un tableau composé d'une recherche, une pagination et un trie de colonnes intégrées.
|
|
449
|
+
Le tableau est compatible <a href="http://guides.rubyonrails.org/i18n.html">I18n</a>.
|
|
450
|
+
Le tableau contient pour chaque ligne un bouton dropdown 'action' avec par défaut
|
|
451
|
+
ces 3 actions : voir, éditer, supprimer. Toutes les colonnes sont présentes et
|
|
452
|
+
affichées par défaut.</p>
|
|
453
|
+
|
|
454
|
+
<p>La table doit contenir un store. Ce store doit-être créé dans le <em>controlleur</em> avec la
|
|
455
|
+
méthode <code>table_search_pagination</code>.</p>
|
|
456
|
+
|
|
457
|
+
<p>La méthode <code>table_search_pagination</code> contient 3 arguments :</p>
|
|
458
|
+
|
|
459
|
+
<ul>
|
|
460
|
+
<li>params</li>
|
|
461
|
+
<li>session</li>
|
|
462
|
+
<li>args (optionel)</li>
|
|
463
|
+
</ul>
|
|
464
|
+
|
|
465
|
+
<p>Exemple :</p>
|
|
466
|
+
|
|
467
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/controllers/document_controller.rb
|
|
468
|
+
</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>
|
|
469
|
+
</code></pre>
|
|
470
|
+
|
|
471
|
+
<p>Dans le <em>model</em>, insérer la méthode <code>searchable_attributes</code> afin de pouvoir
|
|
472
|
+
faire une recherche sur les attributs souhaités.</p>
|
|
473
|
+
|
|
474
|
+
<p>Exemple :</p>
|
|
475
|
+
|
|
476
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/models/document.rb
|
|
477
|
+
</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>
|
|
478
|
+
</code></pre>
|
|
479
|
+
|
|
480
|
+
<p>Un champ recherche est disponible dans la vue :</p>
|
|
481
|
+
|
|
482
|
+
<p><img src="images/table_search_field.png" alt="table_search_field"></p>
|
|
483
|
+
|
|
484
|
+
<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>
|
|
485
|
+
</code></pre>
|
|
486
|
+
|
|
487
|
+
<p>Une pagination est disponible dans la vue :</p>
|
|
488
|
+
|
|
489
|
+
<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>
|
|
490
|
+
</code></pre>
|
|
491
|
+
|
|
492
|
+
<p>Un champs select par page est disponible dans la vue :</p>
|
|
493
|
+
|
|
494
|
+
<p><img src="images/table_pagination_per_page.png" alt="table_search_field"></p>
|
|
495
|
+
|
|
496
|
+
<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>
|
|
497
|
+
</code></pre>
|
|
498
|
+
|
|
499
|
+
<h4>Simple Example table</h4>
|
|
500
|
+
|
|
501
|
+
<p>Dans le <strong>controlleur</strong>, insérer la méthode <code>table_search_pagination</code>.
|
|
502
|
+
La méthode <code>table_search_pagination</code> contient 3 arguments :</p>
|
|
503
|
+
|
|
504
|
+
<ul>
|
|
505
|
+
<li>params</li>
|
|
506
|
+
<li>session</li>
|
|
507
|
+
<li>args</li>
|
|
508
|
+
</ul>
|
|
509
|
+
|
|
510
|
+
<p>Exemple :</p>
|
|
511
|
+
|
|
512
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/controllers/document_controller.rb
|
|
513
|
+
</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>
|
|
514
|
+
</code></pre>
|
|
515
|
+
|
|
516
|
+
<p>Dans le <strong>model</strong>, insérer la méthode <code>searchable_attributes</code> afin de pouvoir
|
|
517
|
+
faire une recherche sur les attributs souhaités.</p>
|
|
518
|
+
|
|
519
|
+
<p>Exemple :</p>
|
|
520
|
+
|
|
521
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/models/document.rb
|
|
522
|
+
</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>
|
|
523
|
+
</code></pre>
|
|
524
|
+
|
|
525
|
+
<p>Dans la <strong>vue</strong>, insérer la méthode <code>table</code> qui peut contenir plusieurs arguments :</p>
|
|
526
|
+
|
|
527
|
+
<ul>
|
|
528
|
+
<li>store (ex: @documents)</li>
|
|
529
|
+
<li>paginable (true, false)</li>
|
|
530
|
+
<li>sortable (true, false)</li>
|
|
531
|
+
</ul>
|
|
532
|
+
|
|
533
|
+
<p>Une table comporte des <strong>colonnes</strong> et des <strong>actions</strong>.</p>
|
|
534
|
+
|
|
535
|
+
<p>Exemple :</p>
|
|
536
|
+
|
|
537
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
538
|
+
</span><span class='id identifier rubyid_table'>table</span> <span class='label'>store:</span> <span class='ivar'>@documents</span>
|
|
539
|
+
</code></pre>
|
|
540
|
+
|
|
541
|
+
<p>Les actions par défauts peuvent être modifiées (<a href="#Complex-Example-table">voir exemple complexe</a>) :</p>
|
|
542
|
+
|
|
543
|
+
<ul>
|
|
544
|
+
<li>edit</li>
|
|
545
|
+
<li>view</li>
|
|
546
|
+
<li>delete</li>
|
|
547
|
+
</ul>
|
|
548
|
+
|
|
549
|
+
<p>Elles sont intégrées à l'intérieur d'un bouton <a href="#dropdown">dropdown</a>.</p>
|
|
550
|
+
|
|
551
|
+
<p>Exemple :</p>
|
|
552
|
+
|
|
553
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
554
|
+
</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>
|
|
555
|
+
<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>
|
|
556
|
+
<span class='id identifier rubyid_link_action'>link_action</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>
|
|
557
|
+
<span class='id identifier rubyid_link_action'>link_action</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>
|
|
558
|
+
<span class='id identifier rubyid_link_action'>link_action</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>
|
|
559
|
+
<span class='id identifier rubyid_link_action'>link_action</span> <span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>---</span><span class='tstring_end'>"</span></span>
|
|
560
|
+
<span class='id identifier rubyid_link_action'>link_action</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>
|
|
561
|
+
<span class='id identifier rubyid_link_action'>link_action</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>
|
|
562
|
+
<span class='kw'>end</span>
|
|
563
|
+
<span class='kw'>end</span>
|
|
564
|
+
</code></pre>
|
|
565
|
+
|
|
566
|
+
<p>L'ajout de colonnes à travers la méthode <code>column</code> contient plusieurs arguments et cette méthode est basée sur le component :</p>
|
|
567
|
+
|
|
568
|
+
<ul>
|
|
569
|
+
<li>Content (ex: name)</li>
|
|
570
|
+
<li>options (hash)
|
|
571
|
+
|
|
572
|
+
<ul>
|
|
573
|
+
<li>data_index (le nom de l'attribut)</li>
|
|
574
|
+
<li>count (utilise la méthode count sur l'élément)</li>
|
|
575
|
+
<li>date_format (formate l'affichage de la date en utilisant la méthode <code>strftime</code> ex: '%Y/%M/%D')</li>
|
|
576
|
+
<li>format (formate les élements de la colone en utilisant <strong>lambda</strong>)</li>
|
|
577
|
+
<li>link (ajoute un lien où l'expression <code>:id</code> est parsé et remplacé par l'entier correspondant)</li>
|
|
578
|
+
<li>sort (permet de trier sur des champs )</li>
|
|
579
|
+
<li>custom_sort (indique que le tableau sera triéé d'une manière personnalisée)</li>
|
|
580
|
+
</ul></li>
|
|
581
|
+
<li>html_options (hash)</li>
|
|
582
|
+
</ul>
|
|
583
|
+
|
|
584
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
585
|
+
</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>
|
|
586
|
+
<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>
|
|
587
|
+
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>#</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>data_index:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>id</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
588
|
+
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</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='lbrace'>{</span> <span class='label'>data_index:</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>
|
|
589
|
+
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Name en</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>data_index:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>name_en</span><span class='tstring_end'>'</span></span> <span class='rbrace'>}</span>
|
|
590
|
+
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</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='lbrace'>{</span> <span class='label'>data_index:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>hotline_access</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>
|
|
591
|
+
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Updated at</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>data_index:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>updated_at</span><span class='tstring_end'>'</span></span><span class='comma'>,</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>
|
|
592
|
+
<span class='kw'>end</span>
|
|
593
|
+
<span class='kw'>end</span>
|
|
594
|
+
</code></pre>
|
|
595
|
+
|
|
596
|
+
<h4>Complex Example table</h4>
|
|
597
|
+
|
|
598
|
+
<p>Si on souhaite voir apparaître certaines liasions avec d'autres tables il faut pour
|
|
599
|
+
cela :</p>
|
|
600
|
+
|
|
601
|
+
<p>Dans le controlleur, insérer la méthode <code>table_search_pagination</code> en ajoutant
|
|
602
|
+
un <code>includes</code> juste avant.</p>
|
|
603
|
+
|
|
604
|
+
<p>Exemple :</p>
|
|
605
|
+
|
|
606
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/controllers/document_controller.rb
|
|
607
|
+
</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='rparen'>)</span>
|
|
608
|
+
</code></pre>
|
|
609
|
+
|
|
610
|
+
<p>Dans la vue, insérer la méthod <code>table</code>.
|
|
611
|
+
NB: On peut créer ses propres méthodes comme <code>user_name</code> dans notre <em>model</em> "Document" et
|
|
612
|
+
l'appeler comme valeur pour la clef <code>data_index</code>.</p>
|
|
613
|
+
|
|
614
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
615
|
+
</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>
|
|
616
|
+
<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>
|
|
617
|
+
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Users</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>data_index:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>user_name</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>
|
|
618
|
+
<span class='kw'>end</span>
|
|
619
|
+
<span class='kw'>end</span>
|
|
620
|
+
</code></pre>
|
|
621
|
+
|
|
622
|
+
<h4>Ultra Complex Example table</h4>
|
|
623
|
+
|
|
624
|
+
<p>Si l'on souhaite, par exemple, dénombrer des utilisateurs qui ont un lien non
|
|
625
|
+
direct avec les documents.
|
|
626
|
+
Imaginons par exemple, un utilisateur à des produits et que
|
|
627
|
+
ces produits contiennent plusieurs documents. On souhaite compter le nombre
|
|
628
|
+
d'utilisateurs par documents.</p>
|
|
629
|
+
|
|
630
|
+
<p>On peut ajouter des arguments dans la méthode <code>table_search_pagination</code>
|
|
631
|
+
qui vont permettre de faire des jointures.</p>
|
|
632
|
+
|
|
633
|
+
<p>Exemple :</p>
|
|
634
|
+
|
|
635
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/controllers/document_controller.rb
|
|
636
|
+
</span><span class='id identifier rubyid_arguments'>arguments</span> <span class='op'>=</span> <span class='lbrace'>{</span> <span class='label'>sortable:</span> <span class='lbrace'>{</span>
|
|
637
|
+
<span class='label'>column:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>users</span><span class='tstring_end'>'</span></span><span class='comma'>,</span>
|
|
638
|
+
<span class='label'>count:</span> <span class='kw'>true</span><span class='comma'>,</span>
|
|
639
|
+
<span class='label'>joins:</span> <span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>LEFT OUTER JOIN documents_products ON documents_products.document_id = documents.id
|
|
640
|
+
LEFT OUTER JOIN products ON products.id = documents_products.product_id
|
|
641
|
+
LEFT OUTER JOIN products_users ON products_users.product_id = products.id
|
|
642
|
+
LEFT OUTER JOIN users ON users.id = products_users.user_id</span><span class='tstring_end'>"</span></span>
|
|
643
|
+
<span class='rbrace'>}</span> <span class='rbrace'>}</span>
|
|
644
|
+
|
|
645
|
+
<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='id identifier rubyid_arguments'>arguments</span><span class='rparen'>)</span>
|
|
646
|
+
</code></pre>
|
|
647
|
+
|
|
648
|
+
<p>Ici l'argument sortable signifie que l'on souhaite s'interresser à la
|
|
649
|
+
fonctionnalité de trie.</p>
|
|
650
|
+
|
|
651
|
+
<p>Pour celà il faut :</p>
|
|
652
|
+
|
|
653
|
+
<ul>
|
|
654
|
+
<li>définir le nom de la colonne triéé à travers l'argument <code>column:</code> (string)</li>
|
|
655
|
+
<li>définir si le traitement se fait sur le comptage avec l'argument <code>count:</code>
|
|
656
|
+
(boolean)</li>
|
|
657
|
+
<li>définir la jointure avec l'argument <code>joins:</code> (string, array, hash)</li>
|
|
658
|
+
</ul>
|
|
659
|
+
|
|
660
|
+
<p>Dans la vue :</p>
|
|
661
|
+
|
|
662
|
+
<pre class="code ruby"><code class="ruby"><span class='comment'># app/views/documents/index.html.haml
|
|
663
|
+
</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>
|
|
664
|
+
<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>
|
|
665
|
+
<span class='id identifier rubyid_c'>c</span><span class='period'>.</span><span class='id identifier rubyid_column'>column</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>Users</span><span class='tstring_end'>'</span></span><span class='comma'>,</span> <span class='lbrace'>{</span> <span class='label'>data_index:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>users</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>
|
|
666
|
+
<span class='kw'>end</span>
|
|
667
|
+
<span class='kw'>end</span>
|
|
668
|
+
</code></pre>
|
|
669
|
+
|
|
670
|
+
<h4>table I18n</h4>
|
|
671
|
+
|
|
672
|
+
<p>La table est utilisable avec I18n. Les traductions
|
|
673
|
+
s'executent par ordre d'importance dans cet ordre précis pour la colonne "name_fr" par exemple.</p>
|
|
674
|
+
|
|
675
|
+
<ol>
|
|
676
|
+
<li>ui_biz.table.headers.document.name_fr</li>
|
|
677
|
+
<li>ui_biz.table.headers.defaults.name_fr</li>
|
|
678
|
+
<li>activerecord.attributes.document.name_fr</li>
|
|
679
|
+
<li>activerecord.attributes.defaults.name_fr</li>
|
|
680
|
+
</ol>
|
|
681
|
+
|
|
682
|
+
<p>Le placeholder du champ recherche est utilisable et traduisible avec les attributs activerecord dans le fichier locale.</p>
|
|
683
|
+
|
|
684
|
+
<p>Exemple :</p>
|
|
685
|
+
|
|
686
|
+
<pre class="code ruby"><code class="ruby"># config/locales/fr.yml
|
|
687
|
+
...
|
|
688
|
+
activerecord:
|
|
689
|
+
models:
|
|
690
|
+
user: 'Utilisateur'
|
|
691
|
+
attributes:
|
|
692
|
+
defaults:
|
|
693
|
+
name_fr: 'Nom fr'
|
|
694
|
+
...
|
|
695
|
+
</code></pre>
|
|
696
|
+
|
|
697
|
+
<p>Voir la <a href="UiBibz/Ui/Ux/Table.html">doc</a></p>
|
|
698
|
+
|
|
699
|
+
<h3>Table Panel</h3>
|
|
700
|
+
|
|
701
|
+
<p><img src="images/table_panel.png" alt="table_panel"></p>
|
|
702
|
+
|
|
703
|
+
<p>Le composant <code>table_panel</code> est un <a href="#table">tableau</a> dans un <a href="#panel">panel</a>.</p>
|
|
704
|
+
|
|
705
|
+
<pre class="code ruby"><code class="ruby">table_panel store: @users
|
|
706
|
+
|
|
707
|
+
table_panel({ store: @users, tap: true, glyph: 'home', state: :danger }) do |g|
|
|
708
|
+
g.columns do |cls|
|
|
709
|
+
cls.column '#', { data_index: 'id' }
|
|
710
|
+
cls.column 'Username', { data_index: 'username', link: edit_user_path(:id) }
|
|
711
|
+
cls.column 'Name', { data_index: 'name' }
|
|
712
|
+
cls.column({ data_index: 'email' }) do
|
|
713
|
+
'Email'
|
|
714
|
+
end
|
|
715
|
+
cls.column 'Role', { data_index: 'role_name', sort: 'roles.name' }
|
|
716
|
+
end
|
|
717
|
+
g.actions do |acs|
|
|
718
|
+
acs.action 'Action 1', { url: edit_user_path(:id), glyph: 'pencil' }
|
|
719
|
+
acs.action "---"
|
|
720
|
+
acs.action { url: user_path(:id), glyph: 'eye' } do
|
|
721
|
+
'Action 2'
|
|
722
|
+
end
|
|
723
|
+
end
|
|
724
|
+
end
|
|
725
|
+
</code></pre>
|
|
726
|
+
|
|
727
|
+
<p>Voir la <a href="UiBibz/Ui/Ux/TablePanel.html">doc</a></p>
|
|
728
|
+
|
|
729
|
+
<h3>List</h3>
|
|
730
|
+
|
|
731
|
+
<p><img src="images/list.png" alt="list"></p>
|
|
732
|
+
|
|
733
|
+
<p>Par défaut une liste à pour tag <code><li></code>.
|
|
734
|
+
Mais elle peut se transformer en lien <code><a></code> à travers l'option <code>type:</code>.
|
|
735
|
+
Par défaut le tag <code><li></code> est présent.</p>
|
|
736
|
+
|
|
737
|
+
<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>
|
|
738
|
+
<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>
|
|
739
|
+
<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>
|
|
740
|
+
<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>
|
|
741
|
+
<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>
|
|
742
|
+
<span class='kw'>end</span>
|
|
743
|
+
<span class='kw'>end</span>
|
|
744
|
+
|
|
745
|
+
<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>
|
|
746
|
+
<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>
|
|
747
|
+
<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>
|
|
748
|
+
<span class='kw'>end</span>
|
|
749
|
+
</code></pre>
|
|
750
|
+
|
|
751
|
+
<p>Voir la <a href="UiBibz/Ui/Core/List.html">doc</a></p>
|
|
752
|
+
|
|
753
|
+
<h3>Nav</h3>
|
|
754
|
+
|
|
755
|
+
<p><img src="images/nav.png" alt="nav"></p>
|
|
756
|
+
|
|
757
|
+
<p>Par défaut la navigation comporte des onglets "tab".
|
|
758
|
+
L'élément <code>nav</code> accepte en option les arguments :</p>
|
|
759
|
+
|
|
760
|
+
<ul>
|
|
761
|
+
<li>type (:pills, :tabs)</li>
|
|
762
|
+
<li>position (:justified, :stacked)</li>
|
|
763
|
+
<li>tap (true)</li>
|
|
764
|
+
</ul>
|
|
765
|
+
|
|
766
|
+
<p>L'élement link est un <a href="#component">component</a>.</p>
|
|
767
|
+
|
|
768
|
+
<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>
|
|
769
|
+
<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>
|
|
770
|
+
<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>
|
|
771
|
+
<span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>Link 2</span><span class='tstring_end'>"</span></span>
|
|
772
|
+
<span class='kw'>end</span>
|
|
773
|
+
<span class='kw'>end</span>
|
|
774
|
+
</code></pre>
|
|
775
|
+
|
|
776
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Nav.html">doc</a></p>
|
|
777
|
+
|
|
778
|
+
<p>### Navbar</p>
|
|
779
|
+
|
|
780
|
+
<p><img src="images/navbar.png" alt="navbar"></p>
|
|
781
|
+
|
|
782
|
+
<p>Par défaut la navigation comporte des onglets "tab".
|
|
783
|
+
L'élément <code>navbar</code> accepte en option les arguments :</p>
|
|
784
|
+
|
|
785
|
+
<ul>
|
|
786
|
+
<li>type (:default, :inverse)</li>
|
|
787
|
+
<li><a href="#glyph-values">glyph</a></li>
|
|
788
|
+
<li>position (:top, :bottom)</li>
|
|
789
|
+
<li>title (string)</li>
|
|
790
|
+
</ul>
|
|
791
|
+
|
|
792
|
+
<p>L'élement link est un <a href="#component">component</a>.
|
|
793
|
+
L'élement nav est un <a href="#component">component</a>.</p>
|
|
794
|
+
|
|
795
|
+
<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>
|
|
796
|
+
<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>
|
|
797
|
+
<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>
|
|
798
|
+
<span class='kw'>end</span>
|
|
799
|
+
<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>
|
|
800
|
+
<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>
|
|
801
|
+
<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>
|
|
802
|
+
<span class='tstring'><span class='tstring_beg'>"</span><span class='tstring_content'>Link 3</span><span class='tstring_end'>"</span></span>
|
|
803
|
+
<span class='kw'>end</span>
|
|
804
|
+
<span class='kw'>end</span>
|
|
805
|
+
<span class='kw'>end</span>
|
|
806
|
+
</code></pre>
|
|
807
|
+
|
|
808
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Navbar.html">doc</a></p>
|
|
809
|
+
|
|
810
|
+
<h3>Etiquette</h3>
|
|
811
|
+
|
|
812
|
+
<p><img src="images/etiquette.png" alt="list"></p>
|
|
813
|
+
|
|
814
|
+
<p>NB : Les méthodes <code>Tag, label</code> sont déjà utilisées par Rails.
|
|
815
|
+
L'élément <code>etiquette</code> à pour <code>options</code> un Hash acceptant les clefs :</p>
|
|
816
|
+
|
|
817
|
+
<ul>
|
|
818
|
+
<li><a href="#state-values">state</a></li>
|
|
819
|
+
<li><a href="#glyph-values">glyph</a></li>
|
|
820
|
+
</ul>
|
|
821
|
+
|
|
822
|
+
<p>Exemple :</p>
|
|
823
|
+
|
|
824
|
+
<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>
|
|
825
|
+
<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>
|
|
826
|
+
<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>
|
|
827
|
+
</code></pre>
|
|
828
|
+
|
|
829
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Etiquette.html">doc</a></p>
|
|
830
|
+
|
|
831
|
+
<h3>Row</h3>
|
|
832
|
+
|
|
833
|
+
<p>Le composant row génére une div avec la class row.</p>
|
|
834
|
+
|
|
835
|
+
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_row'>row</span> <span class='label'>class:</span> <span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>toto</span><span class='tstring_end'>'</span></span> <span class='kw'>do</span>
|
|
836
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>content</span><span class='tstring_end'>'</span></span>
|
|
837
|
+
<span class='kw'>end</span>
|
|
838
|
+
<span class='comment'># => <div class='row toto'>content</div>
|
|
839
|
+
</span></code></pre>
|
|
840
|
+
|
|
841
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Content.html">doc</a></p>
|
|
842
|
+
|
|
843
|
+
<h3>Col</h3>
|
|
844
|
+
|
|
845
|
+
<p>L'élément <code>col</code> est un <a href="#composant">composant</a> qui accèpte en arguments :</p>
|
|
846
|
+
|
|
847
|
+
<ul>
|
|
848
|
+
<li>num</li>
|
|
849
|
+
<li>offset</li>
|
|
850
|
+
<li>size</li>
|
|
851
|
+
</ul>
|
|
852
|
+
|
|
853
|
+
<p>ou</p>
|
|
854
|
+
|
|
855
|
+
<ul>
|
|
856
|
+
<li>un tableau de hashes avec les arguments <code>num</code>, <code>offset</code> et <code>size</code> à l'intérieur.</li>
|
|
857
|
+
</ul>
|
|
858
|
+
|
|
859
|
+
<p>Ces paramètres génèrent les classes qui seront insérées dans la div avec la classe
|
|
860
|
+
col.</p>
|
|
861
|
+
|
|
862
|
+
<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>
|
|
863
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>content</span><span class='tstring_end'>'</span></span>
|
|
864
|
+
<span class='kw'>end</span>
|
|
865
|
+
<span class='comment'># => <div class='col-lg-2 test'>content</div>
|
|
866
|
+
</span>
|
|
867
|
+
|
|
868
|
+
<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>
|
|
869
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>content</span><span class='tstring_end'>'</span></span>
|
|
870
|
+
<span class='kw'>end</span>
|
|
871
|
+
<span class='comment'># => <div class='col-xs-offset-1 col-md-3 test'>content</div>
|
|
872
|
+
</span></code></pre>
|
|
873
|
+
|
|
874
|
+
<p>Voir la <a href="UiBibz/Ui/Core/Col.html">doc</a></p>
|
|
875
|
+
|
|
876
|
+
<h3>Grid</h3>
|
|
877
|
+
|
|
878
|
+
<p>Une grid est un composant qui est composé de 5 vues :</p>
|
|
879
|
+
|
|
880
|
+
<ul>
|
|
881
|
+
<li>top</li>
|
|
882
|
+
<li>right</li>
|
|
883
|
+
<li>bottom</li>
|
|
884
|
+
<li>left</li>
|
|
885
|
+
<li>center</li>
|
|
886
|
+
</ul>
|
|
887
|
+
|
|
888
|
+
<p>La vue <strong>center</strong> est obligatoire.
|
|
889
|
+
Une vue à pour arguments :</p>
|
|
890
|
+
|
|
891
|
+
<ul>
|
|
892
|
+
<li>position (:top, :left, :bottom, :right, :center)</li>
|
|
893
|
+
<li>num (1..12) 12 étant le nombre limite de colonnes utilisable dans boostrap.</li>
|
|
894
|
+
</ul>
|
|
895
|
+
|
|
896
|
+
<p>L'argument <code>position</code> détermine la position de la vue et l'argument <code>num</code> determine
|
|
897
|
+
le nombre de colonnes occupées par la vue.</p>
|
|
898
|
+
|
|
899
|
+
<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>
|
|
900
|
+
<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>
|
|
901
|
+
<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>
|
|
902
|
+
<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>
|
|
903
|
+
<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>
|
|
904
|
+
<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>
|
|
905
|
+
<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>
|
|
906
|
+
<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>
|
|
907
|
+
<span class='kw'>end</span>
|
|
908
|
+
<span class='kw'>end</span>
|
|
909
|
+
<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>
|
|
910
|
+
<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>
|
|
911
|
+
<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>
|
|
912
|
+
<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>
|
|
913
|
+
<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>
|
|
914
|
+
<span class='kw'>end</span>
|
|
915
|
+
<span class='kw'>end</span>
|
|
916
|
+
<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>
|
|
917
|
+
<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>
|
|
918
|
+
<span class='kw'>end</span>
|
|
919
|
+
<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>
|
|
920
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>bottom</span><span class='tstring_end'>'</span></span>
|
|
921
|
+
<span class='kw'>end</span>
|
|
922
|
+
<span class='kw'>end</span>
|
|
923
|
+
|
|
924
|
+
<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>
|
|
925
|
+
<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>
|
|
926
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>left</span><span class='tstring_end'>'</span></span>
|
|
927
|
+
<span class='kw'>end</span>
|
|
928
|
+
<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>
|
|
929
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>right</span><span class='tstring_end'>'</span></span>
|
|
930
|
+
<span class='kw'>end</span>
|
|
931
|
+
<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>
|
|
932
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>top</span><span class='tstring_end'>'</span></span>
|
|
933
|
+
<span class='kw'>end</span>
|
|
934
|
+
<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>
|
|
935
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>center</span><span class='tstring_end'>'</span></span>
|
|
936
|
+
<span class='kw'>end</span>
|
|
937
|
+
<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>
|
|
938
|
+
<span class='tstring'><span class='tstring_beg'>'</span><span class='tstring_content'>bottom</span><span class='tstring_end'>'</span></span>
|
|
939
|
+
<span class='kw'>end</span>
|
|
940
|
+
<span class='kw'>end</span>
|
|
941
|
+
</code></pre>
|
|
942
|
+
|
|
943
|
+
<p>Voir la <a href="UiBibz/Ui/Ux/Grid.html">doc</a></p>
|
|
944
|
+
|
|
945
|
+
<h3>Arguments and Values</h3>
|
|
946
|
+
|
|
947
|
+
<h4>Status values</h4>
|
|
948
|
+
|
|
949
|
+
<ul>
|
|
950
|
+
<li>:active</li>
|
|
951
|
+
<li>:disable</li>
|
|
952
|
+
</ul>
|
|
953
|
+
|
|
954
|
+
<h4>Size values</h4>
|
|
955
|
+
|
|
956
|
+
<ul>
|
|
957
|
+
<li>:xs</li>
|
|
958
|
+
<li>:sm</li>
|
|
959
|
+
<li>:lg</li>
|
|
960
|
+
</ul>
|
|
961
|
+
|
|
962
|
+
<h4>State values</h4>
|
|
963
|
+
|
|
964
|
+
<ul>
|
|
965
|
+
<li>:default</li>
|
|
966
|
+
<li>:primary</li>
|
|
967
|
+
<li>:info</li>
|
|
968
|
+
<li>:success</li>
|
|
969
|
+
<li>:warning</li>
|
|
970
|
+
<li>:danger</li>
|
|
971
|
+
</ul>
|
|
972
|
+
|
|
973
|
+
<h4>Glyph arguments</h4>
|
|
974
|
+
|
|
975
|
+
<ul>
|
|
976
|
+
<li>name</li>
|
|
977
|
+
<li>size</li>
|
|
978
|
+
<li>type</li>
|
|
979
|
+
</ul>
|
|
980
|
+
|
|
981
|
+
<h1>Plus de détails</h1>
|
|
982
|
+
|
|
983
|
+
<p>Pour plus d'informations, vous pouvez accéder à la documentation rdoc en
|
|
984
|
+
générant cette dernière :</p>
|
|
985
|
+
|
|
986
|
+
<pre class="code ruby"><code class="ruby"><span class='id identifier rubyid_rake'>rake</span> <span class='id identifier rubyid_rdoc'>rdoc</span>
|
|
987
|
+
</code></pre>
|
|
988
|
+
|
|
989
|
+
<h1>Conflits</h1>
|
|
990
|
+
|
|
991
|
+
<p>Certaines méthodes dans le helper peuvent être en conflit avec d'autres
|
|
992
|
+
librairies. Le cas échéant, vous pouvez utiliser directement la librairie UiBibz
|
|
993
|
+
comme ci-dessous.</p>
|
|
994
|
+
|
|
995
|
+
<p>Exemple :</p>
|
|
996
|
+
|
|
997
|
+
<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>
|
|
998
|
+
<span class='comment'># au lieu de
|
|
999
|
+
</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>
|
|
1000
|
+
</code></pre>
|
|
1001
|
+
|
|
1002
|
+
<h1>Roadmap</h1>
|
|
1003
|
+
|
|
1004
|
+
<p>Pour la V2.</p>
|
|
1005
|
+
|
|
1006
|
+
<ul>
|
|
1007
|
+
<li>créer des stores pour les listes, breadcrumb</li>
|
|
1008
|
+
<li>créer d'autres extensions, plugins et une guideline</li>
|
|
1009
|
+
<li>donner le choix de la dépendence boostrap et awesomefont en CDN ou en local</li>
|
|
1010
|
+
<li>mise à jour vers bootstrap 4
|
|
1011
|
+
...</li>
|
|
1012
|
+
</ul>
|
|
1013
|
+
</div></div>
|
|
1014
|
+
|
|
1015
|
+
<div id="footer">
|
|
1016
|
+
Generated on Wed Jul 8 15:00:15 2015 by
|
|
1017
|
+
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
1018
|
+
0.8.7.6 (ruby-1.9.3).
|
|
1019
|
+
</div>
|
|
1020
|
+
|
|
1021
|
+
</body>
|
|
1022
|
+
</html>
|