Skip to content

MkMaterialBadge

Show source on GitHub

Node for a CSS-based badge a la MkDocs-Material.

Example: Regular

Jinja

{{ "mdi:wrench" | MkMaterialBadge(text="text") }}

Python

MkMaterialBadge('mdi:wrench', 'text')

text 

<span class="md-typeset mdx-badge">
  <span class="mdx-badge__icon">:mdi-wrench:</span>
  <span class="mdx-badge__text">text</span>
</span>

<p><span class="md-typeset mdx-badge">
  <span class="mdx-badge__icon"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9c-2-2-5-2.4-7.4-1.3L9 6L6 9L1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4"/></svg></span></span>
  <span class="mdx-badge__text">text</span>
</span></p>

Example: Heart type

Jinja

{{ "mdi:file" | MkMaterialBadge(text="text", animated=True) }}

Python

MkMaterialBadge('mdi:file', 'text', animated=True)

text 

<span class="md-typeset mdx-badge mdx-badge--heart">
  <span class="mdx-badge__icon">:mdi-file:</span>
  <span class="mdx-badge__text">text</span>
</span>

<p><span class="md-typeset mdx-badge mdx-badge--heart">
  <span class="mdx-badge__icon"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/></svg></span></span>
  <span class="mdx-badge__text">text</span>
</span></p>

Example: Right aligned

Jinja

{{ "mdi:file" | MkMaterialBadge(text="text", align_right=True) }}

Python

MkMaterialBadge('mdi:file', 'text', align_right=True)

text 

<span class="md-typeset mdx-badge mdx-badge--right">
  <span class="mdx-badge__icon">:mdi-file:</span>
  <span class="mdx-badge__text">text</span>
</span>

<p><span class="md-typeset mdx-badge mdx-badge--right">
  <span class="mdx-badge__icon"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/></svg></span></span>
  <span class="mdx-badge__text">text</span>
</span></p>

Jinja

{{ "mdi:file" | MkMaterialBadge(text="text", target="https://phil65.github.io/mknodes") }}

Python

MkMaterialBadge('mdi:file', 'text', target='https://phil65.github.io/mknodes')

text 

<span class="md-typeset mdx-badge">
  <span class="mdx-badge__icon">[:mdi-file:](https://phil65.github.io/mknodes)</span>
  <span class="mdx-badge__text">text</span>
</span>

<p><span class="md-typeset mdx-badge">
  <span class="mdx-badge__icon"><a href="https://phil65.github.io/mknodes"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/></svg></span></a></span>
  <span class="mdx-badge__text">text</span>
</span></p>

Bases: MkTemplate

__init__ 

__init__(
    icon: str,
    text: str = "",
    *,
    animated: bool = False,
    align_right: bool = False,
    target: LinkableType | None = None,
    **kwargs: Any
)

Parameters:

Name Type Description Default
icon str

Icon to display. Can either be an iconify or an emoji slug

 required
text str

Text to display

 ''
animated bool

Optional animated style

 False
align_right bool

Right-align badge

 False
target LinkableType | None

An optional URL / page target for the badge

 None
kwargs Any

Keyword arguments passed to parent

 {}
Name Children Inherits
MkTemplate
mknodes.templatenodes.mktemplate
Node representing a jinja template.		 
graph TD
  94721307731600["mkmaterialbadge.MkMaterialBadge"]
  94721308869584["mktemplate.MkTemplate"]
  94721311697232["mkcontainer.MkContainer"]
  94721308848336["mknode.MkNode"]
  94721311766592["node.Node"]
  140564252373184["builtins.object"]
  94721308869584 --> 94721307731600
  94721311697232 --> 94721308869584
  94721308848336 --> 94721311697232
  94721311766592 --> 94721308848336
  140564252373184 --> 94721311766592
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkmaterialbadge/metadata.toml
[metadata]
name = "MkMaterialBadge"
icon = "simple-icons:shieldsdotio"
group = "badge"

[[resources.css]]
filename = "materialbadge.css"

[examples.regular]
title = "Regular"
jinja = """
{{ "mdi:wrench" | MkMaterialBadge(text="text") }}
"""

[examples.heart_type]
title = "Heart type"
jinja = """
{{ "mdi:file" | MkMaterialBadge(text="text", animated=True) }}
"""

[examples.right_aligned]
title = "Right aligned"
jinja = """
{{ "mdi:file" | MkMaterialBadge(text="text", align_right=True) }}
"""

[examples.linked]
title = "With link"
jinja = """
{{ "mdi:file" | MkMaterialBadge(text="text", target="https://phil65.github.io/mknodes") }}
"""

[output.html]
template = """
<span class="md-typeset mdx-badge{{ " mdx-badge--right" if node.align_right else "" }}{{ " mdx-badge--heart" if node.animated else "" }}">
{% set icon = "[" ~ node.icon | get_emoji_slug ~ "](" ~ node.target | get_url ~ ")" if node.target else node.icon | get_emoji_slug %}
{% if node.icon %}  <span class="mdx-badge__icon">{{ icon }}</span>
{% endif %}
{% if node.text %}  <span class="mdx-badge__text">{{ node.text }}</span>
{% endif %}
</span>
"""
mknodes.basenodes.mkmaterialbadge.MkMaterialBadge
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
class MkMaterialBadge(mktemplate.MkTemplate):
    """Node for a CSS-based badge a la MkDocs-Material."""

    ICON = "simple/shieldsdotio"
    CSS = [resources.CSSFile("materialbadge.css")]

    def __init__(
        self,
        icon: str,
        text: str = "",
        *,
        animated: bool = False,
        align_right: bool = False,
        target: linkprovider.LinkableType | None = None,
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            icon: Icon to display. Can either be an iconify or an emoji slug
            text: Text to display
            animated: Optional animated style
            align_right: Right-align badge
            target: An optional URL / page target for the badge
            kwargs: Keyword arguments passed to parent
        """
        super().__init__("output/html/template", **kwargs)
        self.icon = icon
        self.text = text
        self.animated = animated
        self.align_right = align_right
        self.target = target