| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Example"
|
|
|
4 |
description: "This is an example page describing the example component"
|
|
|
5 |
date: 2020-01-28T10:13:29+01:00
|
|
|
6 |
draft: true
|
|
|
7 |
weight: 30
|
|
|
8 |
---
|
|
|
9 |
|
|
|
10 |
## How it works
|
|
|
11 |
|
|
|
12 |
The EXAMPLE is used to [...] . It can be found in Moodle on pages where [...]
|
|
|
13 |
|
|
|
14 |
## Example
|
|
|
15 |
|
|
|
16 |
Show what the example looks like in Moodle, if your component includes and JavaScript backend please describe how it is initiated.
|
|
|
17 |
|
|
|
18 |
{{< example >}}
|
|
|
19 |
|
|
|
20 |
<div class="example w-25 border border-secondary p-3">
|
|
|
21 |
<button class="btn btn-primary btn-block" id="clickme">
|
|
|
22 |
Click me
|
|
|
23 |
<span id="waiting" class="spinner-grow-sm" role="status" aria-hidden="true"></span>
|
|
|
24 |
</button>
|
|
|
25 |
</div>
|
|
|
26 |
|
|
|
27 |
{{#js}}
|
|
|
28 |
require(['jquery'], function($) {
|
|
|
29 |
$('#clickme').on('click', function() {
|
|
|
30 |
$('#waiting').toggleClass('spinner-grow');
|
|
|
31 |
});
|
|
|
32 |
});
|
|
|
33 |
{{/js}}
|
|
|
34 |
{{< /example >}}
|
|
|
35 |
|
|
|
36 |
## Example explained
|
|
|
37 |
|
|
|
38 |
How can you use this example?
|
|
|
39 |
Are there any example pages in Moodle?
|
|
|
40 |
What are the different options you have for different contexts (places in Moodle)?
|
|
|
41 |
What colours can be used?
|
|
|
42 |
Can it be called from PHP and JavaScript
|
|
|
43 |
|
|
|
44 |
## JavaScript behavior
|
|
|
45 |
|
|
|
46 |
Showcase the different ways this buttons can behave:
|
|
|
47 |
|
|
|
48 |
Does it trigger any events, does it listen to events?
|
|
|
49 |
Does it require any core AMD modules?
|
|
|
50 |
Is there a webservice backend required?
|
|
|
51 |
|
|
|
52 |
## Accessibility
|
|
|
53 |
|
|
|
54 |
Descripbe the `aria-something` parts of the element. Are there any possible accessibility issues using this example?
|
|
|
55 |
What are the considerations for keyboard navigation?
|
|
|
56 |
What accessibile colors can be used?
|
|
|
57 |
How to test its accessibility?
|