Skip to content

indicator.md

Latest commit

 

History

History
89 lines (71 loc) · 2.58 KB

indicator.md

File metadata and controls

89 lines (71 loc) · 2.58 KB
Raw

<indicator>

0.4

Summary

This component must be used as a subcomponent of a slider component.

Child Components

This component supports no child components.

Attributes

There is no specific attribute for this component other than the common attributes.

Styles

  • item-color: <colors> This style attribute sets the normal item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
  • item-selectedColor: <colors> This style attribute sets the selected item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
  • item-size: <length> The size of the indicator elements, which is an float attribute.

common styles: check out the common styles

  • support flexbox related styles
  • support box model related styles
  • support position related styles
  • support opacity, background-color etc.

Events

common events: check out the common events

Example

<template>
  <div>
    <slider class="slider">
      <div class="slider-pages" repeat="{{itemList}}">
        <image class="img" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>

      <indicator class="indicator"></indicator>
    </slider>
  </div>
</template>

<style>
  .img {width: 150; height: 150;}
  .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
  .slider {
    flex-direction: row;
    margin: 18;
    width: 714;
    height: 230;
  }
  .slider-pages {
    flex-direction: row;
    width: 714;
    height: 200;
  }
  .indicator {
    width:714;
    height:200;
    position:absolute;
    top:1;
    left:1;
    item-color: red;
    item-selectedColor: blue;
    item-size: 20;
  }
</style>

<script>
  module.exports = {
    data: {
      itemList: [
        {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
        {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
        {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
      ]
    }
  }
</script>