ui_bibz 2.0.0.alpha10 → 2.0.0.alpha11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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_list.html DELETED
@@ -1,60 +0,0 @@
1
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
- <html>
4
- <head>
5
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
-
7
- <link rel="stylesheet" href="css/full_list.css" type="text/css" media="screen" charset="utf-8" />
8
-
9
- <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" charset="utf-8" />
10
-
11
-
12
-
13
- <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
14
-
15
- <script type="text/javascript" charset="utf-8" src="js/full_list.js"></script>
16
-
17
-
18
- <title>File List</title>
19
- <base id="base_target" target="_parent" />
20
- </head>
21
- <body>
22
- <script type="text/javascript" charset="utf-8">
23
- var hasFrames = false;
24
- try {
25
- hasFrames = window.top.frames.main ? true : false;
26
- } catch (e) { }
27
- if (hasFrames) {
28
- document.getElementById('base_target').target = 'main';
29
- document.body.className = 'frames';
30
- }
31
- </script>
32
- <div id="content">
33
- <h1 id="full_list_header">File List</h1>
34
- <div id="nav">
35
-
36
- <span><a target="_self" href="class_list.html">
37
- Classes
38
- </a></span>
39
-
40
- <span><a target="_self" href="method_list.html">
41
- Methods
42
- </a></span>
43
-
44
- <span><a target="_self" href="file_list.html">
45
- Files
46
- </a></span>
47
-
48
- </div>
49
- <div id="search">Search: <input type="text" /></div>
50
-
51
- <ul id="full_list" class="file">
52
-
53
-
54
- <li class="r1"><span class="object_link"><a href="index.html" title="README">README</a></a></li>
55
-
56
-
57
- </ul>
58
- </div>
59
- </body>
60
- </html>
data/doc/frames.html DELETED
@@ -1,26 +0,0 @@
1
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
2
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
3
-
4
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5
- <head>
6
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7
- <title>Documentation by YARD 0.8.7.6</title>
8
- </head>
9
- <script type="text/javascript" charset="utf-8">
10
- window.onload = function() {
11
- var match = unescape(window.location.hash).match(/^#!(.+)/);
12
- var name = match ? match[1] : 'index.html';
13
- name = name.replace(/^(\w+):\/\//, '').replace(/^\/\//, '');
14
- document.writeln('<frameset cols="20%,*">' +
15
- '<frame name="list" src="class_list.html" />' +
16
- '<frame name="main" src="' + escape(name) + '" />' +
17
- '</frameset>');
18
- }
19
- </script>
20
- <noscript>
21
- <frameset cols="20%,*">
22
- <frame name="list" src="class_list.html" />
23
- <frame name="main" src="index.html" />
24
- </frameset>
25
- </noscript>
26
- </html>
data/doc/images/alert.png DELETED
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
data/doc/images/glyph.png DELETED
Binary file
data/doc/images/list.png DELETED
Binary file
data/doc/images/modal.png DELETED
Binary file
data/doc/images/nav.png DELETED
Binary file
Binary file
data/doc/images/panel.png DELETED
Binary file
Binary file
data/doc/images/stars.png DELETED
Binary file
data/doc/images/table.png DELETED
Binary file
Binary file
Binary file
Binary file
data/doc/index.html DELETED
@@ -1,1261 +0,0 @@
1
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
- <head>
5
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6
- <title>
7
- File: README
8
-
9
- &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:08 2015 by
1256
- <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
1257
- 0.8.7.6 (ruby-2.2.3).
1258
- </div>
1259
-
1260
- </body>
1261
- </html>