Autoría | Ultima modificación | Ver Log |
---layout: docstitle: "Example files"date: 2020-01-21T13:00:00+08:00draft: false---There may be times that we need to provide example implementations of the component being documented in order to further demonstrate how to use a component.We need to put these files in `examples` folders. It helps organise things and makes the maintenance of the component library code easier by allowing us to distinguish examples from the actual component library code.## Example pagesExample pages can be placed under the `componentlibrary/examples` folder.See the `formfields.php` example page as an example:```componentlibrary└── examples└── formfields.php```This can be embedded in the component's documentation page via iframe. For example in `componentlibrary/content/moodle/form-elements.md`:```<iframe src="../../../../examples/formfields.php" style="overflow:hidden;height:4000px;width:100%;border:0" title="Moodle form fields"></iframe>```## Example classesExample classes can be placed under the `componentlibrary/classes/local/examples/[componentname]` folder.In our form fields example, we have the `\tool_componentlibrary\local\examples\formelements\example` class under `componentlibrary/classes/local/examples/formelements`.## Example templatesExample templates can be placed under the `componentlibrary/templates/examples/[componentname]` folder.In our form fields example, we have the `tool_componentlibrary/examples/formelements/toggles` template under `componentlibrary/templates/examples/formelements`.## SummaryPlease put example files in their designated `examples` folders.```componentlibrary└── classes└── local└── examples└── [component folder]└── [example classes]└── examples└── [example page]└── templates└── examples└── [component folder]└── [example templates]```For the form elements documentation, its example files are in the following `examples` folders.```componentlibrary└── classes└── local└── examples└── formelements└── example.php└── examples└── formfields.php└── templates└── examples└── formelements└── toggles.mustache```