Dom.Attribute

Set the value of a content attribute

The functions in this module wrap VirtualDom.attribute, which should always be used when setting attributes on SVG nodes and may also be used to set nonstandard HTML attributes.

See here for some background on when to use the functions in this module versus the functions in Dom.Property.

string : String -> String -> Property msg

Set an attribute by giving its value as a string; the first argument gives the value and the second argument gives the key

myGraphics
  |> Dom.Svg.container "svg"
    [ "viewbox"
      |> Dom.Attribute.string "0 0 400 400"
    ]

int : Int -> String -> Property msg

Set an attribute by giving its value as an integer, which will be converted to a string; the first argument gives the value and the second argument gives the key

"Hello World!"
  |> Dom.Svg.textWrapper "text"
    [ "x"
      |> Dom.Attribute.int 200
    , "y"
      |> Dom.Attribute.int 200
    ]

float : Float -> String -> Property msg

Set an attribute by giving its value as a floating point number, which will be converted to a string; the first argument gives the value and the second argument gives the key

myShapeElement
  |> Dom.Element.addAttribute
    ( "stroke-width"
      |> Dom.Attribute.float 0.5
    )

namespaced : ( String, String ) -> String -> String -> Property msg

Set an attribute in a given namespace; the first argument gives the namespace prefix and URL, the second argument is the value, and the third argument is the key

"script"
  |> Dom.Element.leaf
  |> Dom.Element.withAttributes
    [ "href"
      |> Dom.Attribute.namespaced ("xlink", "http://www.w3.org/1999/xlink") "cool-script.js"
    , "type"
      |> Dom.Attribute.string "text/ecmascript"
    ]

See here for an explanation of the use of namespaces in XML generally, and in SVG more specifically.

danielnarey/elm-semantic-dom/1.0.0

Dom.Attribute

Modules