| 1441 |
ariadna |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Notification badges"
|
|
|
4 |
description: "Notification badges used in Moodle"
|
|
|
5 |
date: 2025-02-25T09:40:32+01:00
|
|
|
6 |
draft: false
|
|
|
7 |
weight: 50
|
|
|
8 |
tags:
|
|
|
9 |
- Available
|
|
|
10 |
---
|
|
|
11 |
|
|
|
12 |
## How to use notification badges
|
|
|
13 |
|
|
|
14 |
Notification badges are used to display concise information or status indicators. They can be used to indicate the user an element has relevant information or new information.
|
|
|
15 |
|
|
|
16 |
## Example
|
|
|
17 |
|
|
|
18 |
{{< example show_markup="false">}}
|
|
|
19 |
<button class="btn btn-outline-secondary">
|
|
|
20 |
Grade
|
|
|
21 |
<span class="ms-1 badge rounded-pill text-bg-primary" title="Needs grading"><span class="visually-hidden"> (</span>1<span class="visually-hidden">)</span></span>
|
|
|
22 |
</button>
|
|
|
23 |
{{< /example >}}
|
|
|
24 |
|
|
|
25 |
### Usage
|
|
|
26 |
|
|
|
27 |
The `core_renderer` provides a `notice_badge` method to create a badge. The method accepts the following parameters:
|
|
|
28 |
|
|
|
29 |
- **contents** (`string`): The content to display inside the badge.
|
|
|
30 |
- **badgestyle** (`core\output\local\properties\badge`): The badge style to use. This is an enum that defines all possible badge styles. By default it will use primary style.
|
|
|
31 |
- **title** (`string`): An optional title attribute for the badge.
|
|
|
32 |
|
|
|
33 |
This is an example of how to render a notice badge using the `core_renderer` (the example uses dependency injection to get the renderer instance, see [Dependency Injection](https://moodledev.io/docs/5.0/apis/core/di) for more information):
|
|
|
34 |
|
|
|
35 |
```php
|
|
|
36 |
// Get the core renderer.
|
|
|
37 |
$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
|
|
|
38 |
|
|
|
39 |
// Save the badge into a variable.
|
|
|
40 |
$badge = $renderer->notice_badge(
|
|
|
41 |
contents: ($needgrading > 0) ? $needgrading : '',
|
|
|
42 |
title: get_string('numberofsubmissionsneedgrading', 'assign'),
|
|
|
43 |
badgestyle: \core\output\local\properties\badge::SECONDARY,
|
|
|
44 |
);
|
|
|
45 |
|
|
|
46 |
$content = new action_link(
|
|
|
47 |
url: new url('/some/index.php'),
|
|
|
48 |
text: get_string('gradeverb') . $badge,
|
|
|
49 |
);
|
|
|
50 |
echo $renderer->render($content);
|
|
|
51 |
```
|
|
|
52 |
|
|
|
53 |
### Badge Styling
|
|
|
54 |
|
|
|
55 |
The badge can be styled using the `\core\output\local\properties\badge` enum. The enum provides the following badge styles:
|
|
|
56 |
|
|
|
57 |
- `badge::PRIMARY`: 'primary' (default style for badges)
|
|
|
58 |
- `badge::SECONDARY`: 'secondary' (usually in dark gray color)
|
|
|
59 |
- `badge::SUCCESS`: 'success' (usually in green color)
|
|
|
60 |
- `badge::DANGER`: 'danger' (usually in red color)
|
|
|
61 |
- `badge::WARNING`: 'warning' (usually in yellow color)
|
|
|
62 |
- `badge::INFO`: 'info' (usually in blue color)
|
|
|
63 |
|
|
|
64 |
This is how every badge style looks like:
|
|
|
65 |
|
|
|
66 |
{{< example show_markup="false">}}
|
|
|
67 |
<ul class="list-group">
|
|
|
68 |
<li class="list-group-item">
|
|
|
69 |
Primary badge
|
|
|
70 |
<span class="ms-1 badge rounded-pill text-bg-primary" title=""><span class="visually-hidden"> (</span>1<span class="visually-hidden">)</span></span>
|
|
|
71 |
</li>
|
|
|
72 |
<li class="list-group-item">
|
|
|
73 |
Secondary badge
|
|
|
74 |
<span class="ms-1 badge rounded-pill text-bg-secondary" title=""><span class="visually-hidden"> (</span>1<span class="visually-hidden">)</span></span>
|
|
|
75 |
</li>
|
|
|
76 |
<li class="list-group-item">
|
|
|
77 |
Success badge
|
|
|
78 |
<span class="ms-1 badge rounded-pill text-bg-success" title=""><span class="visually-hidden"> (</span>1<span class="visually-hidden">)</span></span>
|
|
|
79 |
</li>
|
|
|
80 |
<li class="list-group-item">
|
|
|
81 |
Danger badge
|
|
|
82 |
<span class="ms-1 badge rounded-pill text-bg-danger" title=""><span class="visually-hidden"> (</span>1<span class="visually-hidden">)</span></span>
|
|
|
83 |
</li>
|
|
|
84 |
<li class="list-group-item">
|
|
|
85 |
Warning badge
|
|
|
86 |
<span class="ms-1 badge rounded-pill text-bg-warning" title=""><span class="visually-hidden"> (</span>1<span class="visually-hidden">)</span></span>
|
|
|
87 |
</li>
|
|
|
88 |
<li class="list-group-item">
|
|
|
89 |
Info badge
|
|
|
90 |
<span class="ms-1 badge rounded-pill text-bg-info" title=""><span class="visually-hidden"> (</span>1<span class="visually-hidden">)</span></span>
|
|
|
91 |
</li>
|
|
|
92 |
</ul>
|
|
|
93 |
{{< /example >}}
|
|
|
94 |
|
|
|
95 |
### Validate badges in behat
|
|
|
96 |
|
|
|
97 |
For behat and screen readers, the badge is read as a text in parentheses. For example, the badge with the text "1" is read as "1 (1)". However, it is not recommended to test the badge text directly in combination with the parent element text because mustache templates may add some line breaks. Instead, you should test the badge text separately.
|
|
|
98 |
|
|
|
99 |
This is an example of how to test the example "Grade" badge in behat:
|
|
|
100 |
|
|
|
101 |
```gherkin
|
|
|
102 |
And I should see "Grade" in the "Assign with pending grades" "table_row"
|
|
|
103 |
And I should see "(2)" in the "Assign with pending grades" "table_row"
|
|
|
104 |
```
|