# dom

The dom module is used to manipulate the components in weex pages.

You can use these APIs to get a component's bounding rect in the page, or scroll a list to some specific component, or add a font-face rule to the page and so on.

# API

# scrollToElement

Scroll the scrollable component to the referenced component. This API should only be used in the children components of a scrollable component, such as in a <scroller> or <list> component.

# scrollToElement(ref, options)

• @ref, the referenced component who is meant to scroll into the view.
• @options,
  • offset, an space on top of the ref component, which is also scrolling down to the visual viewport. Default is 0.
  • animated, a boolean indicates whether a scroll animation should be played. If set to false, the ref component will jump into the view without any transition animation. Default is true.

Demo

# getComponentRect

You can get the bounding rect of the referenced component using this API.

# getComponentRect(ref, callback)

• @ref, the referenced component.
• @callback, the callback function after executing this action.

An example callback result should be like:

{
  result: true,
  size: {
    bottom: 60,
    height: 15,
    left: 0,
    right: 353,
    top: 45,
    width: 353
  }
}

Demo

# getLayoutDirection 0.20.0+

You can get the layout direction the referenced component using this API.

# getLayoutDirection(ref, callback)

• @ref, the referenced component.
• @callback, the callback function after executing this action.

An example callback result should be like:

{
  "result": "rtl",
}

Demo

const element = this.$refs['kkk'][0];
dom.getLayoutDirection(element, function(ret) {
  console.log(ret.result);
});

# addRule 0.12.0+

Weex provide the ability of loading custom through DOM.addRule. Developers can load iconfont and custom font by specifying the font-family.

Developers may use the following code snippet to load their font:

const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

# addRule(type, contentObject)

• @fontFace You should not change this as this is the name of the font rule
• @fontFamily You should provide the name of your font-family there, the valid name should be a string.
• @src The src of your custom font, and url('') is reserved for protocol reason, the supported parameters are listed below:
  • http. Read from http, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
  • https. Read from https, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
  • local, Android ONLY. Read from assets directory e.g. url('local://foo.ttf'), the foo.ttf is in your android assets directory.
  • file. Read from a local file, e.g. url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
  • data. Read from a base64 data source, e.g. url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....'), the above data field is only a part of the actual data.

Demo.