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