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
  93860742945248["mkmaterialbadge.MkMaterialBadge"]
  93860738888176["mktemplate.MkTemplate"]
  93860744077920["mkcontainer.MkContainer"]
  93860744073616["mknode.MkNode"]
  93860744080896["node.Node"]
  140589822947552["builtins.object"]
  93860738888176 --> 93860742945248
  93860744077920 --> 93860738888176
  93860744073616 --> 93860744077920
  93860744080896 --> 93860744073616
  140589822947552 --> 93860744080896
/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