UI Component library
Example files
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 pages
Example 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 classes
Example 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 templates
Example 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
.
Summary
Please 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