ui_bibz 2.0.0.alpha10 → 2.0.0.alpha11

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