Wiki source code of Buttons Recommendations
Last modified by Vincent Massol on 2024/11/19 16:15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{velocity}}$xwiki.ssx.use("Standards.Buttons"){{/velocity}} | ||
| 2 | |||
| 3 | =(% id="recommendations" %)Buttons Usage Recommendations(%%)= | ||
| 4 | |||
| 5 | * [[Buttons Types Usage>>#recommendations]] | ||
| 6 | ** [[Primary action>>#primary]] | ||
| 7 | ** [[Secondary action>>#secondary]] | ||
| 8 | ** [[Common action>>#common]] | ||
| 9 | {{velocity}} | ||
| 10 | ## * [[Usage Possibilities (input/a/span) >>#possibilies]] | ||
| 11 | {{/velocity}} | ||
| 12 | * [[Primary/Secondary Buttons Code>>#psCss]] | ||
| 13 | * [[GWT Buttons Code >>#gwt]] | ||
| 14 | |||
| 15 | = Buttons Types Usage = | ||
| 16 | |||
| 17 | === (% id="primary" %)Primary action (%%)=== | ||
| 18 | |||
| 19 | * Class primaryButton (recommended) | ||
| 20 | |||
| 21 | {{velocity}}{{html}} | ||
| 22 | <input type="button" class="primaryButton" value="Login"/> | ||
| 23 | {{/html}}{{/velocity}} | ||
| 24 | {{code}} | ||
| 25 | <input type="button" class="primaryButton" value="Login"/> | ||
| 26 | {{/code}} | ||
| 27 | |||
| 28 | * Old Version | ||
| 29 | |||
| 30 | {{velocity}}{{html}} | ||
| 31 | <span class="buttonwrapper"> | ||
| 32 | <input type="submit" value="Login" class="button"/> | ||
| 33 | </span> | ||
| 34 | {{/html}}{{/velocity}} | ||
| 35 | {{code}} | ||
| 36 | <span class="buttonwrapper"> | ||
| 37 | <input type="submit" value="Login" class="button"/> | ||
| 38 | </span> | ||
| 39 | {{/code}} | ||
| 40 | |||
| 41 | === (% id="secondary" %)Secondary Action(%%) === | ||
| 42 | |||
| 43 | * Class secondaryButton (recommended) | ||
| 44 | |||
| 45 | {{velocity}}{{html}} | ||
| 46 | <input type="button" class="secondaryButton" value="Cancel"/> | ||
| 47 | {{/html}}{{/velocity}} | ||
| 48 | {{code}} | ||
| 49 | <input type="button" class="secondaryButton" value="Cancel"/> | ||
| 50 | {{/code}} | ||
| 51 | |||
| 52 | * Old Version | ||
| 53 | |||
| 54 | {{velocity}}{{html}} | ||
| 55 | <span class="xwikibuttonlink"><a href="">Cancel</a></span> | ||
| 56 | {{/html}}{{/velocity}} | ||
| 57 | {{code}} | ||
| 58 | <span class="xwikibuttonlink"><a href="">Cancel</a></span> | ||
| 59 | {{/code}} | ||
| 60 | |||
| 61 | === (% id="common" %)Common Actions (%%)=== | ||
| 62 | {{velocity}}{{html}} | ||
| 63 | <input class="button" type="submit" value="Login"/> | ||
| 64 | {{/html}}{{/velocity}} | ||
| 65 | {{code}} | ||
| 66 | <input class="button" type="submit" value="Login"/> | ||
| 67 | {{/code}} | ||
| 68 | |||
| 69 | =(% id="psCss" %)Primary/Secondary Buttons Code(%%)= | ||
| 70 | {{velocity}}{{html}} | ||
| 71 | <input type="button" class="primaryButton" value="Login"/> | ||
| 72 | <input type="button" class="secondaryButton" value="Cancel"/> | ||
| 73 | {{/html}}{{/velocity}} | ||
| 74 | |||
| 75 | === HTML === | ||
| 76 | |||
| 77 | {{code}} | ||
| 78 | <input type="button" class="primaryButton" value="Login"/> | ||
| 79 | <input type="button" class="secondaryButton" value="Cancel"/> | ||
| 80 | {{/code}} | ||
| 81 | |||
| 82 | === CSS === | ||
| 83 | |||
| 84 | {{code}} | ||
| 85 | .primaryButton{ | ||
| 86 | background:transparent url(images/buttons3.png) repeat-x scroll right top; | ||
| 87 | border:1px solid #8F908E; | ||
| 88 | color:#FFFFFF; | ||
| 89 | display:inline; | ||
| 90 | line-height:1.35em !important; | ||
| 91 | margin:0 !important; | ||
| 92 | min-height:24px !important; | ||
| 93 | white-space:nowrap; | ||
| 94 | } | ||
| 95 | .primaryButton:hover { | ||
| 96 | background:transparent url(images/buttons3.png) repeat-x scroll right 25%; | ||
| 97 | border-color:#94AD12; | ||
| 98 | color:#333333; | ||
| 99 | } | ||
| 100 | .secondaryButton{ | ||
| 101 | background-color:transparent; | ||
| 102 | color:#00007E; | ||
| 103 | padding: 0; | ||
| 104 | border: 0; | ||
| 105 | margin-left: 10px; | ||
| 106 | font-weight: normal; | ||
| 107 | } | ||
| 108 | .secondaryButton:hover { | ||
| 109 | border-bottom: 1px solid #00007E; | ||
| 110 | } | ||
| 111 | {{/code}} | ||
| 112 | |||
| 113 | =(% id="gwt" %)GWT Buttons Code(%%)= | ||
| 114 | {{velocity}}{{html}}#info("Order of the buttons is done with CSS. Please replace in gwt code. After the change the CSS will be remade."){{/html}}{{/velocity}} | ||
| 115 | [[image:gwtButtons.png]] | ||
| 116 | === HTML === | ||
| 117 | |||
| 118 | {{code}} | ||
| 119 | <div class="xwikigwt-editfield-actions"> | ||
| 120 | <button class="gwt-Button xwikigwt-editfield-cancel xwikigwt-cancel" tabindex="0" type="button">Cancel</button> | ||
| 121 | <button class="gwt-Button xwikigwt-editfield-next xwikigwt-next" tabindex="0" type="button">Save</button> | ||
| 122 | </div> | ||
| 123 | {{/code}} | ||
| 124 | |||
| 125 | === CSS === | ||
| 126 | |||
| 127 | {{code}} | ||
| 128 | div.xwikigwt-editfield tr.dialogMiddle td.dialogMiddleCenter div.xwikigwt-editfield-actions { | ||
| 129 | margin-top:10px; | ||
| 130 | width: 75%; | ||
| 131 | } | ||
| 132 | div.xwikigwt-editfield tr.dialogMiddle td.dialogMiddleCenter div.xwikigwt-editfield-actions .xwikigwt-cancel{ | ||
| 133 | background-color:#ffffff; | ||
| 134 | color:#00007E; | ||
| 135 | padding: 0; | ||
| 136 | border: 0; | ||
| 137 | float: right; | ||
| 138 | } | ||
| 139 | div.xwikigwt-editfield tr.dialogMiddle td.dialogMiddleCenter div.xwikigwt-editfield-actions .xwikigwt-next{ | ||
| 140 | background-color:#dddddd; | ||
| 141 | color:#000; | ||
| 142 | } | ||
| 143 | {{/code}} | ||
| 144 | |||
| 145 | {{velocity}} | ||
| 146 | #* ==(% id="possibilies" %)Usage Possibilities (%%)== | ||
| 147 | * [[Primary action>>#p]] | ||
| 148 | ** [[input >>#pi]] - Recommended | ||
| 149 | ** [[a >>#pa]] | ||
| 150 | ** [[span >>#ps]] | ||
| 151 | * [[Secondary action>>#s]] | ||
| 152 | ** [[input >>#si]] | ||
| 153 | ** [[a >>#sa]] - Style Recommended | ||
| 154 | ** [[span >>#ss]] | ||
| 155 | * [[Common action>>#c]] | ||
| 156 | ** [[input >>#ci]] - Recommended | ||
| 157 | ** [[a >>#ca]] | ||
| 158 | ** [[span >>#cs]] | ||
| 159 | |||
| 160 | === (% id="p" %)Primary action (%%)=== | ||
| 161 | ==== (% id="pi" %)<input> element(%%) ==== {{velocity}}{{html}} | ||
| 162 | <span class="buttonwrapper"> | ||
| 163 | <input type="submit" value="Login" class="button"/> | ||
| 164 | </span>{{/html}}{{/velocity}}{{code}} | ||
| 165 | <span class="buttonwrapper"> | ||
| 166 | <input type="submit" value="Login" class="button"/> | ||
| 167 | </span>{{/code}} | ||
| 168 | ==== (% id="pa" %)<a> element (%%)==== {{velocity}}{{html}} | ||
| 169 | <span class="buttonwrapper"> | ||
| 170 | <a href="">Cancel</a> | ||
| 171 | </span>{{/html}}{{/velocity}}{{code}} | ||
| 172 | <span class="buttonwrapper"> | ||
| 173 | <a href="">Cancel</a> | ||
| 174 | </span>{{/code}} | ||
| 175 | ==== (% id="ps" %)<span> element (%%)==== {{velocity}}{{html}} | ||
| 176 | <span class="buttonwrapper"> | ||
| 177 | <span>Cancel</span> | ||
| 178 | </span>{{/html}}{{/velocity}}{{code}} | ||
| 179 | <span class="buttonwrapper"> | ||
| 180 | <span>Cancel</span> | ||
| 181 | </span> | ||
| 182 | {{/code}} | ||
| 183 | |||
| 184 | === (% id="s" %)Secondary Action(%%) === | ||
| 185 | ==== (% id="si" %)<input> element(%%) ==== | ||
| 186 | {{velocity}}{{html}} | ||
| 187 | <span class="xwikibuttonlink"><input type="submit" value="Cancel" class="button"/></span> | ||
| 188 | {{/html}}{{/velocity}}{{code}} | ||
| 189 | <span class="xwikibuttonlink"><input type="submit" value="Cancel" class="button"/></span> | ||
| 190 | {{/code}} | ||
| 191 | ==== (% id="sa" %)<a> element(%%) ==== | ||
| 192 | {{velocity}}{{html}} | ||
| 193 | <span class="xwikibuttonlink"><a href="">Cancel</a></span> | ||
| 194 | {{/html}}{{/velocity}}{{code}} | ||
| 195 | <span class="xwikibuttonlink"><a href="">Cancel</a></span> | ||
| 196 | {{/code}} | ||
| 197 | ==== (% id="ss" %)<span> element(%%) ==== | ||
| 198 | {{velocity}}{{html}} | ||
| 199 | <span class="xwikibuttonlink">Cancel</span> | ||
| 200 | {{/html}}{{/velocity}}{{code}} | ||
| 201 | <span class="xwikibuttonlink">Cancel</span> | ||
| 202 | {{/code}} | ||
| 203 | |||
| 204 | === (% id="c" %)Common Actions (%%)=== | ||
| 205 | ==== (% id="ci" %)<input> element(%%) ==== | ||
| 206 | {{velocity}}{{html}} | ||
| 207 | <input class="button" type="submit" value="Create"/> | ||
| 208 | {{/html}}{{/velocity}}{{code}} | ||
| 209 | <input class="button" type="submit" value="Create"/> | ||
| 210 | {{/code}} | ||
| 211 | ==== (% id="ca" %)<a> element(%%) ==== | ||
| 212 | {{velocity}}{{html}} | ||
| 213 | <a class="button" href="">Create</a> | ||
| 214 | {{/html}}{{/velocity}}{{code}} | ||
| 215 | <a class="button" href="">Create</a> | ||
| 216 | {{/code}} | ||
| 217 | ==== (% id="cs" %)<span> element(%%) ==== | ||
| 218 | {{velocity}}{{html}} | ||
| 219 | <span class="button">Create</span> | ||
| 220 | {{/html}}{{/velocity}}{{code}} | ||
| 221 | <span class="button">Create</span> | ||
| 222 | {{/code}} | ||
| 223 | *# | ||
| 224 | {{/velocity}} |
