87 lines
2.2 KiB
Markdown
87 lines
2.2 KiB
Markdown
# PCM Badge Bundle
|
|
|
|
Create badges from objects or as standalone elements.
|
|
|
|
IMAGE HERE
|
|
|
|
```twig
|
|
<twig:Pcm:Badge :obj="job.kind">{{ job.kind.label }}</twig:Pcm:Badge>
|
|
|
|
<twig:Pcm:Badge :obj="job.kind" outline>{{ job.kind.label }}</twig:Pcm:Badge>
|
|
|
|
<twig:Pcm:Badge colour="green">Sale 20% off</twig:Pcm:Badge>
|
|
|
|
<twig:Pcm:Badge class="text-xl p-8" colour="maroon" outline>Danger!</twig:Pcm:Badge>
|
|
```
|
|
|
|
<br>
|
|
|
|
# Badgeable interface
|
|
|
|
Any object that you would like to be able to be turned into a badge must implement `BadgeableInterface`.
|
|
|
|
This interface specifies a single method `getBadgeColour()` and is used to determine what colour the badge should be rendered as.
|
|
|
|
This method can contain as much logic in it as you'd like to return different colours of badge under different circumstances. EG:
|
|
|
|
```php
|
|
// Job.php
|
|
|
|
public function getBadgeColour(): Badge
|
|
{
|
|
return match ($this->getKind()) {
|
|
JobKind::Investigation => Badge::BLUE,
|
|
JobKind::Interrogation => Badge::RED,
|
|
JobKind::Shootout => Badge::BLACK,
|
|
JobKind::SipWhiskey => Badge::FOREST,
|
|
default => Badge::GREY
|
|
};
|
|
}
|
|
```
|
|
|
|
You then specify the object using the `obj` prop when rendering the badge:
|
|
|
|
```twig
|
|
{# job.html.twig #}
|
|
|
|
<twig:Pcm:Badge :obj="job">{{ job.kind.value }}</twig:Pcm:Badge>
|
|
```
|
|
|
|
<br>
|
|
|
|
# Standalone badges
|
|
|
|
If you just want a badge of a certain colour instead of associating it with an object, you can specify a `colour` prop instead.
|
|
|
|
```twig
|
|
<twig:Pcm:Badge colour="red">Danger</twig:Pcm:Badge>
|
|
```
|
|
|
|
<br>
|
|
|
|
# Props overview
|
|
|
|
A badge must contain either an `obj` or a `colour`, but not both.
|
|
|
|
`obj` - An instance of an object that implements `BadgeableInterface`. You can use either of the follow syntaxes:
|
|
```twig
|
|
:obj="job.kind"
|
|
|
|
obj="{{ job.kind }}"
|
|
```
|
|
|
|
`colour` - One of the available colours specified by the `Badge` enum. For a full list of acceptable values type in some junk and read the exception message.
|
|
|
|
`outline` - A boolean attribute that changes the style of the badge to an outline.
|
|
|
|
`class` - Extra classes you want to add to the badge element. These will override the base classes in case of conflicts.
|
|
|
|
<br>
|
|
|
|
# Config
|
|
|
|
```yaml
|
|
pcm_badge:
|
|
base_classes: "base classes here"
|
|
```
|