link function

Component link({
  1. required String href,
  2. String? rel,
  3. String? type,
  4. String? as,
  5. Key? key,
  6. String? id,
  7. String? classes,
  8. Styles? styles,
  9. Map<String, String>? attributes,
  10. Map<String, EventCallback>? events,
})

The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

  • href: This attribute specifies the URL of the linked resource. A URL can be absolute or relative.
  • rel: This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of link type values.
  • type: This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as text/css), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the type attribute, but is actually now recommended practice. It is also used on rel="preload" link types, to make sure the browser only downloads file types that it supports.
  • as: This attribute is only used when rel="preload" or rel="prefetch" has been set on the <link> element. It specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header. Furthermore, rel="preload" uses this as a signal for request prioritization.

Implementation

Component link(
    {required String href,
    String? rel,
    String? type,
    String? as,
    Key? key,
    String? id,
    String? classes,
    Styles? styles,
    Map<String, String>? attributes,
    Map<String, EventCallback>? events}) {
  return DomComponent(
    tag: 'link',
    key: key,
    id: id,
    classes: classes,
    styles: styles,
    attributes: {
      ...attributes ?? {},
      'href': href,
      if (rel != null) 'rel': rel,
      if (type != null) 'type': type,
      if (as != null) 'as': as,
    },
    events: events,
  );
}