Crate dioxus_html
source ·Expand description
dioxus-html: Html (and SVG) Namespace for Dioxus
Website | Guides | API Docs | Chat
Overview
The Dioxus rsx! and html! macros can accept any compile-time correct namespace on top of NodeFactory. This crate provides the HTML (and SVG) namespaces which get imported in the Dioxus prelude.
However, this abstraction enables you to add any namespace of elements, provided they’re in scope when rsx! is called. For an example, a UI that is designed for Augmented Reality might use different primitives than HTML:
use ar_namespace::*;
rsx! {
magic_div {
magic_header {}
magic_paragraph {
on_magic_click: move |event| {
//
}
}
}
}This is currently a not-very-explored part of Dioxus. However, the namespacing system does make it possible to provide syntax highlighting, documentation, “go to definition” and compile-time correctness, so it’s worth having it abstracted.
How it works:
Elements for dioxus must implement the (simple) DioxusElement trait to be used in the rsx! macro.
struct div;
impl DioxusElement for div {
const TAG_NAME: &'static str = "div";
const NAME_SPACE: Option<&'static str> = None;
}All elements should be defined as a zero-sized-struct (also known as unit struct). These structs are zero-cost and just provide the type-level trickery to Rust for compile-time correct templates.
Attributes would then be implemented as constants on these unit structs.
The HTML namespace is defined mostly with macros. However, the expanded form would look something like this:
struct base;
impl DioxusElement for base {
const TAG_NAME: &'static str = "base";
const NAME_SPACE: Option<&'static str> = None;
}
impl base {
const href: (&'static str, Option<'static str>, bool) = ("href", None, false);
const target: (&'static str, Option<'static str>, bool) = ("target", None, false);
}Because attributes are defined as methods on the unit struct, they guard the attribute creation behind a compile-time correct interface.
How to extend it:
Whenever the rsx! macro is called, it relies on a module dioxus_elements to be in scope. When you enable the html feature in dioxus, this module gets imported in the prelude. However, you can extend this with your own set of custom elements by making your own dioxus_elements module and re-exporting the html namespace.
mod dioxus_elements {
use dioxus::prelude::dioxus_elements::*;
struct my_element;
impl DioxusElement for my_element {
const TAG_NAME: &'static str = "base";
const NAME_SPACE: Option<&'static str> = None;
}
}Contributing
- Report issues on our issue tracker.
- Join the discord and ask questions!
License
This project is licensed under the MIT license.
Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you shall be licensed as MIT without any additional terms or conditions.
Dioxus Namespace for HTML
This crate provides a set of compile-time correct HTML elements that can be used with the Rsx and Html macros. This system allows users to easily build new tags, new types, and customize the output of the Rsx and Html macros.
An added benefit of this approach is the ability to lend comprehensive documentation on how to use these elements inside of the Rsx and Html macros. Each element comes with a substantial amount of documentation on how to best use it, hopefully making the development cycle quick.
All elements are used as zero-sized unit structs with trait impls.
Currently, we don’t validate for structures, but do validate attributes.
Re-exports
pub use events::*;
Modules
- Geometry primitives for representing e.g. mouse events
- Data structures representing user input, such as modifier keys and mouse buttons
Structs
- Build a
<a>element. - Build a
<abbr>element. - Build a
<address>element. - Build a
<animate>element. - Build a
<animateMotion>element. - Build a
<animateTransform>element. - Build a
<area>element. - Build a
<article>element. - Build a
<aside>element. - Build a
<audio>element. - Build a
<b>element. - Build a
<base>element. - Build a
<bdi>element. - Build a
<bdo>element. - Build a
<blockquote>element. - Build a
<body>element. - Build a
<br>element. - Build a
<button>element. - Build a
<canvas>element. - Build a
<caption>element. - Build a
<circle>element. - Build a
<cite>element. - Build a
<clipPath>element. - Build a
<code>element. - Build a
<col>element. - Build a
<colgroup>element. - Build a
<data>element. - Build a
<datalist>element. - Build a
<dd>element. - Build a
<defs>element. - Build a
<del>element. - Build a
<desc>element. - Build a
<details>element. - Build a
<dfn>element. - Build dialog
<dialog>element. - Build a
<discard>element. - Build a
<div>element. - Build a
<dl>element. - Build a
<dt>element. - Build a
<ellipse>element. - Build a
<em>element. - Build a
<embed>element. - Build a
<feBlend>element. - Build a
<feColorMatrix>element. - Build a
<feComponentTransfer>element. - Build a
<feComposite>element. - Build a
<feConvolveMatrix>element. - Build a
<feDiffuseLighting>element. - Build a
<feDisplacementMap>element. - Build a
<feDistantLight>element. - Build a
<feDropShadow>element. - Build a
<feFlood>element. - Build a
<feFuncA>element. - Build a
<feFuncB>element. - Build a
<feFuncG>element. - Build a
<feFuncR>element. - Build a
<feGaussianBlur>element. - Build a
<feImage>element. - Build a
<feMerge>element. - Build a
<feMergeNode>element. - Build a
<feMorphology>element. - Build a
<feOffset>element. - Build a
<fePointLight>element. - Build a
<feSpecularLighting>element. - Build a
<feSpotLight>element. - Build a
<feTile>element. - Build a
<feTurbulence>element. - Build a
<fieldset>element. - Build a
<figcaption>element. - Build a
<figure>element. - Build a
<filter>element. - Build a
<footer>element. - Build a
<foreignObject>element. - Build a
<form>element. - Build a
<g>element. - Build a
<h1>element. - Build a
<h2>element. - Build a
<h3>element. - Build a
<h4>element. - Build a
<h5>element. - Build a
<h6>element. - Build a
<hatch>element. - Build a
<hatchpath>element. - Build a
<head>element. - Build a
<header>element. - Build a
<hgroup>element. - Build a
<hr>element. - Build a
<i>element. - Build a
<iframe>element. - Build a
<img>element. - Build a
<input>element. - Build a
<ins>element. - Build a
<kbd>element. - Build a
<label>element. - Build a
<legend>element. - Build a
<li>element. - Build a
<line>element. - Build a
<linearGradient>element. - Build a
<link>element. - Build a
<main>element. - Build a
<map>element. - Build a
<mark>element. - Build a
<marker>element. - Build a
<mask>element. - Build a
<menu>element. - Build a
<meta>element. - Build a
<metadata>element. - Build a
<meter>element. - Build a
<mpath>element. - Build a
<nav>element. - Build a
<noscript>element. - Build a
<object>element. - Build a
<ol>element. - Build a
<optgroup>element. - Build a
<option>element. - Build a
<output>element. - Build a
<p>element. - Build a
<param>element. - Build a
<path>element. - Build a
<pattern>element. - Build a
<picture>element. - Build a
<polygon>element. - Build a
<polyline>element. - Build a
<pre>element. - Build a
<progress>element. - Build a
<q>element. - Build a
<radialGradient>element. - Build a
<rect>element. - Build a
<rp>element. - Build a
<rt>element. - Build a
<ruby>element. - Build a
<s>element. - Build a
<samp>element. - Build a
<script>element. - Build a
<section>element. - Build a
<select>element. - Build a
<set>element. - Build a
<slot>element. - Build a
<small>element. - Build a
<source>element. - Build a
<span>element. - Build a
<stop>element. - Build a
<strong>element. - Build a
<style>element. - Build a
<sub>element. - Build a
<summary>element. - Build a
<sup>element. - Build a
<svg>element. - Build a
<switch>element. - Build a
<symbol>element. - Build a
<table>element. - Build a
<tbody>element. - Build a
<td>element. - Build a
<template>element. - Build a
<text>element. - Build a
<textPath>element. - Build a
<textarea>element. - Build a
<tfoot>element. - Build a
<th>element. - Build a
<thead>element. - Build a
<time>element. - Build a
<title>element. - Build a
<tr>element. - Build a
<track>element. - Build a
<tspan>element. - Build a
<u>element. - Build a
<ul>element. - Build a
<var>element. - Build a
<video>element. - Build a
<view>element. - Build a
<wbr>element.
Enums
Traits
Functions
- Render a template to an HTML string