| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Toggle input"
|
|
|
4 |
date: 2022-01-17T00:00:00+01:00
|
|
|
5 |
draft: false
|
|
|
6 |
weight: 60
|
|
|
7 |
tags:
|
|
|
8 |
- MDL-73470
|
|
|
9 |
- 4.0
|
|
|
10 |
---
|
|
|
11 |
|
|
|
12 |
## How to use
|
|
|
13 |
|
|
|
14 |
Toggle input is rendered using a template found in lib/templates/toggle.mustache.
|
|
|
15 |
|
|
|
16 |
The parameters for the template context are:
|
|
|
17 |
* id: Unique id for the toggle input.
|
|
|
18 |
* extraclasses: Any extra classes added to the toggle input outer container.
|
|
|
19 |
* checked: If the initial status is checked.
|
|
|
20 |
* disabled: If toggle input is disabled.
|
|
|
21 |
* dataattributes: Array of name/value elements added as data-attributes.
|
|
|
22 |
* title: Title text.
|
|
|
23 |
* label: Label text.
|
|
|
24 |
* labelclasses: Any extra classes added to the label container.
|
|
|
25 |
|
|
|
26 |
## Examples
|
|
|
27 |
|
|
|
28 |
<div class="small">
|
|
|
29 |
Checked toggle and with "sr-only" label.
|
|
|
30 |
</div>
|
|
|
31 |
{{< mustache template="core/toggle" >}}
|
|
|
32 |
{
|
|
|
33 |
"id": "example-toggle-1",
|
|
|
34 |
"checked": true,
|
|
|
35 |
"dataattributes": [{
|
|
|
36 |
"name": "action",
|
|
|
37 |
"value": "toggle-status"
|
|
|
38 |
}],
|
|
|
39 |
"title": "Toggle Enabled",
|
|
|
40 |
"label": "Enable/disable status",
|
|
|
41 |
"labelclasses": "sr-only"
|
|
|
42 |
}
|
|
|
43 |
{{< /mustache >}}
|
|
|
44 |
|
|
|
45 |
<div class="mt-3 small">
|
|
|
46 |
Disabled toggle with extra classes.
|
|
|
47 |
</div>
|
|
|
48 |
{{< mustache template="core/toggle" >}}
|
|
|
49 |
{
|
|
|
50 |
"id": "example-toggle-2",
|
|
|
51 |
"disabled": true,
|
|
|
52 |
"extraclasses": "mt-2 ml-2",
|
|
|
53 |
"dataattributes": [{
|
|
|
54 |
"name": "action",
|
|
|
55 |
"value": "toggle-status"
|
|
|
56 |
}],
|
|
|
57 |
"title": "Toggle Disabled",
|
|
|
58 |
"label": "Enable/disable status"
|
|
|
59 |
}
|
|
|
60 |
{{< /mustache >}}
|
|
|
61 |
|
|
|
62 |
## Use toggle as a template block
|
|
|
63 |
|
|
|
64 |
It is also possible to include *core/toggle* in any other template using [blocks](https://moodledev.io/docs/guides/templates#blocks), instead of rendering it with a context.
|
|
|
65 |
The parameters that you can define are:
|
|
|
66 |
* id: Unique id for the toggle input.
|
|
|
67 |
* extraclasses: Any extra classes added to the toggle input outer container.
|
|
|
68 |
* attributes: Any attributes added to the toggle input.
|
|
|
69 |
* data-attributes
|
|
|
70 |
* checked
|
|
|
71 |
* disabled
|
|
|
72 |
* labelmarkup: Label element code block.
|
|
|
73 |
* Should include *class="custom-control-label"*.
|
|
|
74 |
* title: Title text.
|
|
|
75 |
* label: Label text.
|
|
|
76 |
* labelclasses: Any extra classes added to the label container.
|
|
|
77 |
|
|
|
78 |
<div class="small">
|
|
|
79 |
Example of template using toggle as a block.
|
|
|
80 |
</div>
|
|
|
81 |
{{< mustache template="tool_componentlibrary/examples/toggle/example" >}}
|
|
|
82 |
{
|
|
|
83 |
}
|
|
|
84 |
{{< /mustache >}}
|