jx.Attrs class

class Attrs

Contains all the HTML attributes/properties (a property is an attribute without a value) passed to a component but that weren't in the declared attributes list.

Attrs(
    attrs: 'dict[str, t.Any| LazyString]'
) -> None

For HTML classes you can use the name "classes" (instead of "class") if you need to.

NOTE: The string values passed to this class, are not cast to str until the string representation is actually needed, for example when attrs.render() is invoked.

attr as_dict property

An ordered dict of all the attributes and properties, both sorted by name before join.

Example:

attrs = Attrs({
"class": "lorem ipsum",
"data_test": True,
"hidden": True,
"aria_label": "hello",
"id": "world",
})
attrs.as_dict
{
    "aria_label": "hello",
    "class": "lorem ipsum",
    "id": "world",
    "data_test": True,
    "hidden": True
}

attr classes property

All the HTML classes separated by a space.

Example:

attrs = Attrs({"class": "italic bold bg-blue wide abcde"})
attrs.set(class="bold text-white")
print(attrs.classes)
italic bold bg-blue wide abcde text-white

function add_class

Adds one or more classes to the end of the list of classes, if not already present.

add_class(
    *values: str
) -> None
ArgumentDescription
values

One or more class names to add, separated by spaces.

Example:

attrs = Attrs({"class": "a b c"})
attrs.add_class("c d")
attrs.as_dict
{"class": "a b c d"}

function get

Returns the value of the attribute or property, or the default value if it doesn't exists.

get(
    name: str,
    default: Any = None
) -> Any
ArgumentDescription
name

The name of the attribute or property to get.
default

The default value to return if the attribute or property doesn't exist.

Example:

attrs = Attrs({"lorem": "ipsum", "hidden": True})

attrs.get("lorem", defaut="bar")
'ipsum'

attrs.get("foo")
None

attrs.get("foo", defaut="bar")
'bar'

attrs.get("hidden")
True

function prepend_class

Adds one or more classes to the beginning of the list of classes, if not already present.

prepend_class(
    *values: str
) -> None
ArgumentDescription
values

One or more class names to add, separated by spaces.

Example:

attrs = Attrs({"class": "a b c"})
attrs.add_class("c d |")
attrs.as_dict
{"class": "d | a b c"}

function remove_class

Removes one or more classes from the list of classes.

remove_class(
    *names: str
) -> None

Example:

attrs = Attrs({"class": "a b c"})
attrs.remove_class("c", "d")
attrs.as_dict
{"class": "a b"}

function render

Renders the attributes and properties as a string.

render(
    **kw
) -> str

Any arguments you use with this function are merged with the existing attibutes/properties by the same rules as the Attrs.set() function:

  • Pass a name and a value to set an attribute (e.g. type="text")
  • Use True as a value to set a property (e.g. disabled)
  • Use False to remove an attribute or property
  • If the attribute is "class", the new classes are appended to the old ones (if not repeated) instead of replacing them.
  • The underscores in the names will be translated automatically to dashes, so aria_selected becomes the attribute aria-selected.

To provide consistent output, the attributes and properties are sorted by name and rendered like this: <sorted attributes> + <sorted properties>.

Example:

attrs = Attrs({"class": "ipsum", "data_good": True, "width": 42})

attrs.render()
'class="ipsum" width="42" data-good'

attrs.render(class="abc", data_good=False, tabindex=0)
'class="abc ipsum" width="42" tabindex="0"'

function set

Sets an attribute or property

set(
    **kw
) -> None
  • Pass a name and a value to set an attribute (e.g. type="text")
  • Use True as a value to set a property (e.g. disabled)
  • Use False to remove an attribute or property
  • If the attribute is "class", the new classes are appended to the old ones (if not repeated) instead of replacing them.
  • The underscores in the names will be translated automatically to dashes, so aria_selected becomes the attribute aria-selected.

Example:

attrs = Attrs({"secret": "qwertyuiop"})
attrs.set(secret=False)
attrs.as_dict
{}

attrs.set(unknown=False, lorem="ipsum", count=42, data_good=True)
attrs.as_dict
{"count":42, "lorem":"ipsum", "data_good": True}

attrs = Attrs({"class": "b c a"})
attrs.set(class="c b f d e")
attrs.as_dict
{"class": "b c a f d e"}

function setdefault

Adds an attribute, but only if it's not already present.

setdefault(
    **kw
) -> None

The underscores in the names will be translated automatically to dashes, so aria_selected becomes the attribute aria-selected.

Example:

attrs = Attrs({"lorem": "ipsum"})
attrs.setdefault(tabindex=0, lorem="meh")
attrs.as_dict
# "tabindex" changed but "lorem" didn't
{"lorem": "ipsum", tabindex: 0}