common.template.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. ---
  2. layout: "fluid/docs_base"
  3. version: "<$ version.current.name $>"
  4. versionHref: "<$ version.current.href $>"
  5. path: "<$ doc.path $>"
  6. category: api
  7. id: "<$ doc.name|lower|replace(' ','-') $>"
  8. title: "<@ if doc.docType == "directive" @><$ doc.name | dashCase $><@ else @><$ doc.name $><@ endif @>"
  9. header_sub_title: "Ionic API Documentation"
  10. doc: "<$ doc.name $>"
  11. docType: "<$ doc.docType $>"
  12. <@ if doc.demo @>show_preview_device: true
  13. preview_device_url: "<$ doc.demo $>www/"
  14. angular_controller: APIDemoCtrl <@ endif @>
  15. ---
  16. <@ macro paramList(paramData) -@>
  17. <@- if paramData -@><span class="params">(
  18. <@- for param in paramData -@>
  19. <span class="param"><$ param | escape $><@ if not loop.last @>, <@ endif @></span>
  20. <@- endfor @>)</span>
  21. <@- endif @>
  22. <@- endmacro -@>
  23. <@ macro returnObject(params) -@>
  24. <@- if params -@>
  25. <table class="table returns-object-table param-table">
  26. <thead>
  27. <tr>
  28. <th>Property</th>
  29. <th>Type</th>
  30. <th>Details</th>
  31. </tr>
  32. </thead>
  33. <tbody>
  34. <@ for param in params @>
  35. <tr>
  36. <td class="fixed-width">
  37. <$ param.key $>
  38. </td>
  39. <td>
  40. <$ param.type | code $>
  41. </td>
  42. <td>
  43. <$ param.description | marked $>
  44. </td>
  45. </tr>
  46. <@ endfor @>
  47. </tbody>
  48. </table>
  49. <@- endif @>
  50. <@- endmacro -@>
  51. <@ macro githubViewLink(doc) -@>
  52. <a href="https://github.com/<$ versionInfo.gitRepoInfo.owner $>/<$ versionInfo.gitRepoInfo.repo $>/tree/master/<$ doc.fileInfo.relativePath $>#L<$ doc.location.start.line+1 $>-L<$ doc.location.end.line+1 $>"><$ doc.fileInfo.relativePath $> (line <$ doc.location.start.line+1 $>)</a>
  53. <@- endmacro -@>
  54. <@ macro paramTable(params, isDirective) -@>
  55. <table class="table param-table" style="margin:0;">
  56. <thead>
  57. <tr>
  58. <th><@ if isDirective @>Attr<@ else @>Param<@ endif @></th>
  59. <th>Type</th>
  60. <th>Details</th>
  61. </tr>
  62. </thead>
  63. <tbody>
  64. <@ for param in params @>
  65. <tr>
  66. <td>
  67. <$ param.name $>
  68. <@ if param.alias @>| <$ param.alias $><@ endif @>
  69. <@ if param.type.optional @><div><em>(optional)</em></div><@ endif @>
  70. </td>
  71. <td>
  72. <$ typeList(param.typeList) $>
  73. </td>
  74. <td>
  75. <$ param.description | marked $>
  76. <@ if param.default @><p><em>(default: <$ param.default $>)</em></p><@ endif @>
  77. </td>
  78. </tr>
  79. <@ endfor @>
  80. </tbody>
  81. </table>
  82. <@- endmacro -@>
  83. <@ macro inputTable(params, isDirective) -@>
  84. <table class="table param-table" style="margin:0;">
  85. <thead>
  86. <tr>
  87. <th>Attr</th>
  88. <th>Type</th>
  89. <th>Details</th>
  90. </tr>
  91. </thead>
  92. <tbody>
  93. <@ for param in params @>
  94. <tr>
  95. <td><$ param.name $></td>
  96. <td><code><$ param.type $></code></td>
  97. <td><$ param.description | marked $></td>
  98. </tr>
  99. <@ endfor @>
  100. </tbody>
  101. </table>
  102. <@- endmacro -@>
  103. <@ macro outputTable(params, isDirective) -@>
  104. <table class="table param-table" style="margin:0;">
  105. <thead>
  106. <tr>
  107. <th>Attr</th>
  108. <th>Details</th>
  109. </tr>
  110. </thead>
  111. <tbody>
  112. <@ for param in params @>
  113. <tr>
  114. <td><$ param.name $></td>
  115. <td><$ param.description | marked $></td>
  116. </tr>
  117. <@ endfor @>
  118. </tbody>
  119. </table>
  120. <@- endmacro -@>
  121. <@- macro functionSyntax(fn) @>
  122. <@- set sep = joiner(',&nbsp;') -@>
  123. <code><$ fn.name $><@- if not fn.isProperty @>(<@ endif -@><@- for param in fn.params @><$ sep() $>
  124. <@- if param.type.optional @>[<@ endif -@>
  125. <$ param.name $>
  126. <@- if param.type.optional @>]<@ endif -@>
  127. <@ endfor @><@- if not fn.isProperty @>)<@ endif -@></code>
  128. <@ if fn.alias @><small>(alias: <$ fn.alias $>)</small><@ endif @>
  129. <@ endmacro -@>
  130. <@ macro typeList(types) -@>
  131. <@ set separator = joiner("|") @>
  132. <@ for type in types @><$ separator() $><$ type | code $><@ endfor @>
  133. <@- endmacro -@>
  134. <@- macro typeInfo(fn) -@>
  135. <$ typeList(fn.typeList) $> <$ fn.description | marked $>
  136. <@- endmacro -@>
  137. <@- macro sassTable(files) -@>
  138. <div id="sass-variables" ng-controller="SassToggleCtrl">
  139. <div class="sass-platform-toggle">
  140. <@ if files.length > 1 @>
  141. <@ for file in files @>
  142. <@ if loop.first @>
  143. <a ng-init="setSassPlatform('<$ file.platform $>')" ng-class="{ active: active === '<$ file.platform $>' }" ng-click="setSassPlatform('<$ file.platform $>')" ><$ file.platform | platform $></a>
  144. <@ else @>
  145. <a ng-class="{ active: active === '<$ file.platform $>' }" ng-click="setSassPlatform('<$ file.platform $>')"><$ file.platform | platform $></a>
  146. <@ endif @>
  147. <@ endfor @>
  148. <@ else @>
  149. <h3 ng-init="setSassPlatform('<$ files[0].platform $>')"><$ files[0].platform | platform $></h3>
  150. <@ endif @>
  151. </div>
  152. <@ for file in files @>
  153. <table ng-show="active === '<$ file.platform $>'" id="sass-<$file.platform $>" class="table param-table" style="margin:0;">
  154. <thead>
  155. <tr>
  156. <th>Property</th>
  157. <th>Default</th>
  158. <th>Description</th>
  159. </tr>
  160. </thead>
  161. <tbody>
  162. <@ for prop in file.props @>
  163. <tr>
  164. <td><code>$<$ prop.name $></code></td>
  165. <@ if prop.default @>
  166. <td><$ prop.default | code $></td>
  167. <@ else @>
  168. <td>
  169. </td>
  170. <@ endif @>
  171. <td><$ prop.description | marked $></td>
  172. </tr>
  173. <@ endfor @>
  174. </tbody>
  175. </table>
  176. <@ endfor @>
  177. </div>
  178. <@- endmacro -@>
  179. <@ block body @>
  180. <@ block content @>
  181. <@ block header @>
  182. <h1 class="api-title">
  183. <a class="anchor" name="<$ doc.name | dashCase $>" href="#<$ doc.name | dashCase $>"></a>
  184. <@ if doc.docType == "directive" @>
  185. <$ doc.name | dashCase $>
  186. <@ else @>
  187. <$ doc.name $>
  188. <@- if doc.decorators[0].argumentInfo[0].selector @>
  189. <h3><code><$ doc.decorators[0].argumentInfo[0].selector $></code></h3>
  190. <@ endif -@>
  191. <@ endif @>
  192. <@ if doc.parent @>
  193. <br />
  194. <small>
  195. Child of <$ doc.parent $>
  196. </small>
  197. <@ endif @>
  198. <@ if doc.delegate @>
  199. <br/>
  200. <small>
  201. Delegate: <$ doc.delegate $>
  202. </small>
  203. <@ endif @>
  204. </h1>
  205. <a class="improve-v2-docs" href="http://github.com/ionic-team/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
  206. Improve this doc
  207. </a>
  208. <@ if doc.codepen @>
  209. {% include codepen.html id="<$ doc.codepen $>" %}
  210. <@ endif @>
  211. <@ endblock @>
  212. <@ block description @>
  213. <$ doc.description | marked $>
  214. <@ endblock @>
  215. <!-- @usage tag -->
  216. <@ if doc.usage @>
  217. <h2><a class="anchor" name="usage" href="#usage">Usage</a></h2>
  218. <@ block usage @>
  219. <$ doc.usage | marked $>
  220. <@ endblock @>
  221. <@ endif @>
  222. <!-- @property tags -->
  223. <@ if doc.properties @>
  224. <h2><a class="anchor" name="attributes" href="#attributes">Attributes</a></h2>
  225. <table class="table" style="margin:0;">
  226. <thead>
  227. <tr>
  228. <th>Attribute</th>
  229. <@ set hasTypes = false @>
  230. <@ for prop in doc.properties @>
  231. <@ if prop.type @>
  232. <@ set hasTypes = true @>
  233. <@ endif @>
  234. <@ endfor @>
  235. <@ if hasTypes @>
  236. <th>Type</th>
  237. <@ endif @>
  238. <th>Description</th>
  239. </tr>
  240. </thead>
  241. <tbody>
  242. <@ for prop in doc.properties @>
  243. <tr>
  244. <td>
  245. <$ prop.name $>
  246. </td>
  247. <@ if hasTypes @>
  248. <td>
  249. <$ prop.type.name $>
  250. </td>
  251. <@ endif @>
  252. <td>
  253. <$ prop.description $>
  254. </td>
  255. </tr>
  256. <@ endfor @>
  257. </tbody>
  258. </table>
  259. <@ endif @>
  260. <@- if doc.statics.length -@>
  261. <h2><a class="anchor" name="static-members" href="#static-members">Static Members</a></h2>
  262. <@- for method in doc.statics @><@ if not method.internal @>
  263. <div id="<$ method.name $>"></div>
  264. <h3><a class="anchor" name="<$ method.name $>" href="#<$ method.name $>"><$ functionSyntax(method) $></a></h3>
  265. <$ method.description $>
  266. <@ if method.params @>
  267. <$ paramTable(method.params) $>
  268. <@ endif @>
  269. <@ if method.this @>
  270. <h4> Method's `this`
  271. <$ method.this $>
  272. </h4>
  273. <@ endif @>
  274. <@ if method.returns @>
  275. <div class="anchor" class="return-value">
  276. <i class="icon ion-arrow-return-left"></i>
  277. <b>Returns:</b> <$ typeInfo(method.returns) $>
  278. <@ if method.returnsObjectParams @>
  279. <$ returnObject(method.returnsObjectParams) $>
  280. <@ endif @>
  281. </div>
  282. <@ endif @>
  283. <@ endif @>
  284. <@ endfor -@>
  285. <@ endif @>
  286. <!-- instance methods on the class -->
  287. <@- if doc.members and doc.members.length @>
  288. <h2><a class="anchor" name="instance-members" href="#instance-members">Instance Members</a></h2>
  289. <@- for method in doc.members @>
  290. <div id="<$ method.name $>"></div>
  291. <h3>
  292. <a class="anchor" name="<$ method.name $>" href="#<$ method.name $>">
  293. <$ functionSyntax(method) $>
  294. </a>
  295. </h3>
  296. <$ method.description $>
  297. <@ if method.params @>
  298. <$ paramTable(method.params) $>
  299. <@ endif @>
  300. <@ if method.this @>
  301. <h4> Method's `this`
  302. <$ method.this $>
  303. </h4>
  304. <@ endif @>
  305. <@ if method.returns @>
  306. <div class="return-value">
  307. <i class="icon ion-arrow-return-left"></i>
  308. <b>Returns:</b> <$ typeInfo(method.returns) $>
  309. <@ if method.returnsObjectParams @>
  310. <$ returnObject(method.returnsObjectParams) $>
  311. <@ endif @>
  312. </div>
  313. <@ endif @>
  314. <@ endfor -@>
  315. <@- endif -@>
  316. <@- if doc.inputs and doc.inputs.length @>
  317. <!-- input methods on the class -->
  318. <h2><a class="anchor" name="input-properties" href="#input-properties">Input Properties</a></h2>
  319. <$ inputTable(doc.inputs) $>
  320. <@- endif -@>
  321. <@- if doc.outputs and doc.outputs.length @>
  322. <!-- output events on the class -->
  323. <h2><a class="anchor" name="output-events" href="#output-events">Output Events</a></h2>
  324. <$ outputTable(doc.outputs) $>
  325. <@- endif -@>
  326. <@ block advanced @>
  327. <@- if doc.advanced -@>
  328. <h2><a class="anchor" name="advanced" href="#advanced">Advanced</a></h2>
  329. <$ doc.advanced | marked $>
  330. <@- endif -@>
  331. <@ endblock @>
  332. <@ if doc.sassVariables @>
  333. <h2 id="sass-variable-header"><a class="anchor" name="sass-variables" href="#sass-variables">Sass Variables</a></h2>
  334. <$ sassTable(doc.sassVariables) $>
  335. <@ endif @>
  336. <!-- related link -->
  337. <@- if doc.see @>
  338. <h2><a class="anchor" name="related" href="#related">Related</a></h2>
  339. <@ for s in doc.see @>
  340. <$ s | safe $> <@- if not loop.last @>,<@- endif -@>
  341. <@- endfor -@>
  342. <@- endif -@>
  343. <!-- end content block -->
  344. <@ endblock @>
  345. <!-- end body block -->
  346. <@ endblock @>