Expand description
§dioxus-html: Html (and SVG) Namespace for Dioxus
Website | Guides | API Docs | Chat
§Overview
The Dioxus rsx! macro 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 bytes;pub use keyboard_types;pub use elements::*;pub use events::*;pub use crate::point_interaction::*;
Modules§
- elements
- events
- Event Handlers
- extensions
- geometry
- Geometry primitives for representing e.g. mouse events
- global_
attributes - input_
data - Data structures representing user input, such as modifier keys and mouse buttons
- point_
interaction - svg_
attributes - traits
Structs§
- Data
Transfer - File
Data - Html
Event - Modifiers
- Pressed modifier keys.
- Serialized
Data Transfer - A serialized version of DataTransfer
- Serialized
Data Transfer Item - Serialized
File Data - A serializable representation of file data
- Serialized
Html Event Converter - A trait for converting from a serialized event to a concrete event type.
Enums§
- Code
- Code is the physical position of a key.
- Event
Data - Key
- Key represents the meaning of a keypress.
- Location
- The location attribute contains an indication of the logical location of the key on the device.
Traits§
- AExtension
- Abbr
Extension - Address
Extension - Animate
Extension - Animate
Motion Extension - Animate
Transform Extension - Annotation
Extension - Annotation
XmlExtension - Area
Extension - Article
Extension - Aside
Extension - Audio
Extension - BExtension
- Base
Extension - BdiExtension
- BdoExtension
- Blockquote
Extension - Body
Extension - BrExtension
- Button
Extension - Canvas
Extension - Caption
Extension - Circle
Extension - Cite
Extension - Clip
Path Extension - Code
Extension - ColExtension
- Colgroup
Extension - Data
Extension - Datalist
Extension - DdExtension
- Defs
Extension - DelExtension
- Desc
Extension - Details
Extension - DfnExtension
- Dialog
Extension - Discard
Extension - DivExtension
- DlExtension
- DtExtension
- Ellipse
Extension - EmExtension
- Embed
Extension - FeBlend
Extension - FeColor
Matrix Extension - FeComponent
Transfer Extension - FeComposite
Extension - FeConvolve
Matrix Extension - FeDiffuse
Lighting Extension - FeDisplacement
MapExtension - FeDistant
Light Extension - FeDrop
Shadow Extension - FeFlood
Extension - FeFuncA
Extension - FeFuncB
Extension - FeFuncG
Extension - FeFuncR
Extension - FeGaussian
Blur Extension - FeImage
Extension - FeMerge
Extension - FeMerge
Node Extension - FeMorphology
Extension - FeOffset
Extension - FePoint
Light Extension - FeSpecular
Lighting Extension - FeSpot
Light Extension - FeTile
Extension - FeTurbulence
Extension - Fieldset
Extension - Figcaption
Extension - Figure
Extension - Filter
Extension - Footer
Extension - Foreign
Object Extension - Form
Extension - GExtension
- Global
Attributes Extension - H1Extension
- H2Extension
- H3Extension
- H4Extension
- H5Extension
- H6Extension
- HasData
Transfer Data - HasFile
Data - Hatch
Extension - Hatchpath
Extension - Head
Extension - Header
Extension - Hgroup
Extension - HrExtension
- IExtension
- Iframe
Extension - Image
Extension - ImgExtension
- Input
Extension - InsExtension
- KbdExtension
- Label
Extension - Legend
Extension - LiExtension
- Line
Extension - Linear
Gradient Extension - Link
Extension - Main
Extension - MapExtension
- Mark
Extension - Marker
Extension - Mask
Extension - Math
Extension - Menu
Extension - Merror
Extension - Meta
Extension - Metadata
Extension - Meter
Extension - Mfrac
Extension - MiExtension
- Mmultiscripts
Extension - MnExtension
- MoExtension
- Mover
Extension - Mpadded
Extension - Mpath
Extension - Mphantom
Extension - Mprescripts
Extension - Mroot
Extension - Mrow
Extension - MsExtension
- Mspace
Extension - Msqrt
Extension - Mstyle
Extension - Msub
Extension - Msubsup
Extension - Msup
Extension - Mtable
Extension - MtdExtension
- Mtext
Extension - MtrExtension
- Munder
Extension - Munderover
Extension - Native
Data Transfer - Native
File Data - NavExtension
- Noscript
Extension - Object
Extension - OlExtension
- Optgroup
Extension - Option
Extension - Output
Extension - PExtension
- Param
Extension - Path
Extension - Pattern
Extension - Picture
Extension - Polygon
Extension - Polyline
Extension - PreExtension
- Progress
Extension - QExtension
- Radial
Gradient Extension - Rect
Extension - RpExtension
- RtExtension
- Ruby
Extension - SExtension
- Samp
Extension - Script
Extension - Section
Extension - Select
Extension - Semantics
Extension - SetExtension
- Slot
Extension - Small
Extension - Source
Extension - Span
Extension - Stop
Extension - Strong
Extension - Style
Extension - SubExtension
- Summary
Extension - SupExtension
- SvgAttributes
Extension - SvgExtension
- Switch
Extension - Symbol
Extension - Table
Extension - Tbody
Extension - TdExtension
- Template
Extension - Text
Extension - Text
Path Extension - Textarea
Extension - Tfoot
Extension - ThExtension
- Thead
Extension - Time
Extension - Title
Extension - TrExtension
- Track
Extension - Tspan
Extension - UExtension
- UlExtension
- UseExtension
- VarExtension
- Video
Extension - View
Extension - WbrExtension
Functions§
- render_
template_ to_ html - Render a template to an HTML string