Crate dioxus_html

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

• eval
• events
• extensions
• geometry
  Geometry primitives for representing e.g. mouse events
• input_data
  Data structures representing user input, such as modifier keys and mouse buttons
• point_interaction
• prelude

Structs

• HtmlEvent
• SerializedFileEngine
  A file engine that serializes files to bytes
• SerializedHtmlEventConverter
  A trait for converting from a serialized event to a concrete event type.
• a
  Build a <a> element.
• abbr
  Build a <abbr> element.
• address
  Build a <address> element.
• animate
  Build a <animate> element.
• animateMotion
  Build a <animateMotion> element.
• animateTransform
  Build a <animateTransform> element.
• annotation
  Build a <annotation> element.
• annotationXml
  Build a <annotation-xml> element.
• area
  Build a <area> element.
• article
  Build a <article> element.
• aside
  Build a <aside> element.
• audio
  Build a <audio> element.
• b
  Build a <b> element.
• base
  Build a <base> element.
• bdi
  Build a <bdi> element.
• bdo
  Build a <bdo> element.
• blockquote
  Build a <blockquote> element.
• body
  Build a <body> element.
• br
  Build a <br> element.
• button
  Build a <button> element.
• canvas
  Build a <canvas> element.
• caption
  Build a <caption> element.
• circle
  Build a <circle> element.
• cite
  Build a <cite> element.
• clipPath
  Build a <clipPath> element.
• code
  Build a <code> element.
• col
  Build a <col> element.
• colgroup
  Build a <colgroup> element.
• data
  Build a <data> element.
• datalist
  Build a <datalist> element.
• dd
  Build a <dd> element.
• defs
  Build a <defs> element.
• del
  Build a <del> element.
• desc
  Build a <desc> element.
• details
  Build a <details> element.
• dfn
  Build a <dfn> element.
• dialog
  Build dialog <dialog> element.
• discard
  Build a <discard> element.
• div
  Build a <div> element.
• dl
  Build a <dl> element.
• dt
  Build a <dt> element.
• ellipse
  Build a <ellipse> element.
• em
  Build a <em> element.
• embed
  Build a <embed> element.
• feBlend
  Build a <feBlend> element.
• feColorMatrix
  Build a <feColorMatrix> element.
• feComponentTransfer
  Build a <feComponentTransfer> element.
• feComposite
  Build a <feComposite> element.
• feConvolveMatrix
  Build a <feConvolveMatrix> element.
• feDiffuseLighting
  Build a <feDiffuseLighting> element.
• feDisplacementMap
  Build a <feDisplacementMap> element.
• feDistantLight
  Build a <feDistantLight> element.
• feDropShadow
  Build a <feDropShadow> element.
• feFlood
  Build a <feFlood> element.
• feFuncA
  Build a <feFuncA> element.
• feFuncB
  Build a <feFuncB> element.
• feFuncG
  Build a <feFuncG> element.
• feFuncR
  Build a <feFuncR> element.
• feGaussianBlur
  Build a <feGaussianBlur> element.
• feImage
  Build a <feImage> element.
• feMerge
  Build a <feMerge> element.
• feMergeNode
  Build a <feMergeNode> element.
• feMorphology
  Build a <feMorphology> element.
• feOffset
  Build a <feOffset> element.
• fePointLight
  Build a <fePointLight> element.
• feSpecularLighting
  Build a <feSpecularLighting> element.
• feSpotLight
  Build a <feSpotLight> element.
• feTile
  Build a <feTile> element.
• feTurbulence
  Build a <feTurbulence> element.
• fieldset
  Build a <fieldset> element.
• figcaption
  Build a <figcaption> element.
• figure
  Build a <figure> element.
• filter
  Build a <filter> element.
• footer
  Build a <footer> element.
• foreignObject
  Build a <foreignObject> element.
• form
  Build a <form> element.
• g
  Build a <g> element.
• h1
  Build a <h1> element.
• h2
  Build a <h2> element.
• h3
  Build a <h3> element.
• h4
  Build a <h4> element.
• h5
  Build a <h5> element.
• h6
  Build a <h6> element.
• hatch
  Build a <hatch> element.
• hatchpath
  Build a <hatchpath> element.
• head
  Build a <head> element.
• header
  Build a <header> element.
• hgroup
  Build a <hgroup> element.
• hr
  Build a <hr> element.
• i
  Build a <i> element.
• iframe
  Build a <iframe> element.
• image
  Build a <image> element.
• img
  Build a <img> element.
• input
  Build a <input> element.
• ins
  Build a <ins> element.
• kbd
  Build a <kbd> element.
• label
  Build a <label> element.
• legend
  Build a <legend> element.
• li
  Build a <li> element.
• line
  Build a <line> element.
• linearGradient
  Build a <linearGradient> element.
• link
  Build a <link> element.
• main
  Build a <main> element.
• map
  Build a <map> element.
• mark
  Build a <mark> element.
• marker
  Build a <marker> element.
• mask
  Build a <mask> element.
• math
  Build a <math> element.
• menu
  Build a <menu> element.
• merror
  Build a <merror> element.
• meta
  Build a <meta> element.
• metadata
  Build a <metadata> element.
• meter
  Build a <meter> element.
• mfrac
  Build a <mfrac> element.
• mi
  Build a <mi> element.
• mmultiscripts
  Build a <mmultiscripts> element.
• mn
  Build a <mn> element.
• mo
  Build a <mo> element.
• mover
  Build a <mover> element.
• mpadded
  Build a <mpadded> element.
• mpath
  Build a <mpath> element.
• mphantom
  Build a <mphantom> element.
• mprescripts
  Build a <mprescripts> element.
• mroot
  Build a <mroot> element.
• mrow
  Build a <mrow> element.
• ms
  Build a <ms> element.
• mspace
  Build a <mspace> element.
• msqrt
  Build a <msqrt> element.
• mstyle
  Build a <mstyle> element.
• msub
  Build a <msub> element.
• msubsup
  Build a <msubsup> element.
• msup
  Build a <msup> element.
• mtable
  Build a <mtable> element.
• mtd
  Build a <mtd> element.
• mtext
  Build a <mtext> element.
• mtr
  Build a <mtr> element.
• munder
  Build a <munder> element.
• munderover
  Build a <munderover> element.
• nav
  Build a <nav> element.
• noscript
  Build a <noscript> element.
• object
  Build a <object> element.
• ol
  Build a <ol> element.
• optgroup
  Build a <optgroup> element.
• option
  Build a <option> element.
• output
  Build a <output> element.
• p
  Build a <p> element.
• param
  Build a <param> element.
• path
  Build a <path> element.
• pattern
  Build a <pattern> element.
• picture
  Build a <picture> element.
• polygon
  Build a <polygon> element.
• polyline
  Build a <polyline> element.
• pre
  Build a <pre> element.
• progress
  Build a <progress> element.
• q
  Build a <q> element.
• radialGradient
  Build a <radialGradient> element.
• rect
  Build a <rect> element.
• rp
  Build a <rp> element.
• rt
  Build a <rt> element.
• ruby
  Build a <ruby> element.
• s
  Build a <s> element.
• samp
  Build a <samp> element.
• script
  Build a <script> element.
• section
  Build a <section> element.
• select
  Build a <select> element.
• semantics
  Build a <semantics> element.
• set
  Build a <set> element.
• slot
  Build a <slot> element.
• small
  Build a <small> element.
• source
  Build a <source> element.
• span
  Build a <span> element.
• stop
  Build a <stop> element.
• strong
  Build a <strong> element.
• style
  Build a <style> element.
• sub
  Build a <sub> element.
• summary
  Build a <summary> element.
• sup
  Build a <sup> element.
• svg
  Build a <svg> element.
• switch
  Build a <switch> element.
• symbol
  Build a <symbol> element.
• table
  Build a <table> element.
• tbody
  Build a <tbody> element.
• td
  Build a <td> element.
• template
  Build a <template> element.
• text
  Build a <text> element.
• textPath
  Build a <textPath> element.
• textarea
  Build a <textarea> element.
• tfoot
  Build a <tfoot> element.
• th
  Build a <th> element.
• thead
  Build a <thead> element.
• time
  Build a <time> element.
• title
  Build a <title> element.
• tr
  Build a <tr> element.
• track
  Build a <track> element.
• tspan
  Build a <tspan> element.
• u
  Build a <u> element.
• ul
  Build a <ul> element.
• use
• var
  Build a <var> element.
• video
  Build a <video> element.
• view
  Build a <view> element.
• wbr
  Build a <wbr> element.

Enums

• EventData

Traits

• FileEngine
• GlobalAttributes
• GlobalAttributesExtension
• HasFileData
• SvgAttributes
• SvgAttributesExtension

Functions

• render_template_to_html
  Render a template to an HTML string

Type Aliases

• AttributeDiscription