<div class="container">
  <!-- list_test -->
  <list scrollpage="{{scrollpage}}" cachedcount="{{cachedcount}}" scrollbar="{{scrollbar}}" scrolleffect="{{scrolleffect}}" indexer="{{indexer}}"
      shapemode="{{shapemode}}" updateeffect="{{updateeffect}}" initialindex="{{initialindex}}" initialoffset="{{initialoffset}}">
    <list-item-group type="{{type}}"></list-item-group>
    <list-item type="{{type}}" primary="{{primary}}" section="{{section}}" sticky="{{sticky}}"stickyradius="{{stickyradius}}" clickeffect="{{clickeffect}}"></list-item>
  </list>

  <!-- swiper_test -->
  <swiper index="{{index}}" autoplay="{{autoplay}}" interval="{{interval}}" indicator="{{indicator}}" digital="{{digital}}" loop="{{loop}}"
      duration="{{duration}}" vertical="{{vertical}}" indicatordisabled="true">
  </swiper>

  <!-- tabs_test -->
  <tabs index="{{index}}" vertical="{{vertical}}">
    <tab-bar mode="{{mode}}"></tab-bar>
    <tab-content scrollable="{{scrollable}}"></tab-content>
  </tabs>

  <!-- popup_test -->
  <popup target="title" placement="{{placement}}" keepalive="true" clickable="false" arrowoffset="20px"></popup>

  <!-- refresh_test -->
  <refresh offset="{{offset}}" refreshing="{{refreshing}}" type="auto" lasttime="{{lasttime}}" friction="{{friction}}"></refresh>

  <!-- image_test -->
  <image alt="img" src="{{src}}"></image>

  <!-- image-animator_test -->
  <image-animator images="{{images}}" iteration="{{iteration}}" reverse="{{reverse}}" fixedsize="{{fixedsize}}" duration="{{duration}}"></image-animator>

  <!-- progress_test_1 -->
  <progress type="horizontal" percent="{{percent}}" secondarypercent="{{secondarypercent}}"></progress>

  <!-- progress_test_2 -->
  <progress type="scale-ring" percent="{{percent}}" secondarypercent="{{secondarypercent}}" clockwise="{{clockwise}}"></progress>

  <!-- progress_test_3 -->
  <progress type="arc" percent="{{percent}}"></progress>

  <!--  rating_test  -->
  <rating numstars="{{numstars}}" rating="{{rating}}" stepsize="{{stepsize}}"indicator="{{indicator}}"></rating>

  <!-- marquee_test -->
  <marquee scrollamount="{{scrollamount}}" loop="{{loop}}" direction="{{direction}}"></marquee>

  <!-- divider_test -->
  <divider vertical="{{vertical}}"></divider>

  <!-- search_test -->
  <search icon="{{icon}}" hint="{{hint}}" value="{{value}}" searchbutton="content"></search>

  <!-- menu_test -->
  <menu target="{{target}}" type="{{type}}" title="{{title}}"></menu>

  <!-- chart_test -->
  <chart type="line" options="{{options}}" datasets="{{datasets}}"></chart>

  <!-- input_test -->
  <input type="time" checked="{{checked}}" name="{{name}}" value="{{value}}" placeholder="{{placeholder}}" maxlength="{{maxlength}}"
      enterkeytype="default" headericon="{{headericon}}" showcounter="true">
  </input>

  <!-- button_test -->
  <button type="capsule" value="{{value}}" icon="{{icon}}" value="{{value}}"></button>

  <!-- label_test -->
  <label target="{{target}}"></label>

  <!-- option_test -->
  <select>
    <option selected="{{selected}}" value="{{value}}" icon="{{icon}}" action="show" focusable="{{focusable}}" disabled="true"></option>
  </select>

  <!-- slider_test -->
  <slider min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}" type="continuous" minicon="{{minicon}}" maxicon="{{maxicon}}"></slider>

  <!-- switch_test -->
  <switch checked="{{checked}}" showtext="{{showtext}}" texton="{{texton}}" textoff="{{textoff}}"></switch>

  <!-- textarea_test -->
  <textarea placeholder="{{placeholder}}" maxlength="{{maxlength}}" headericon="{{headericon}}" extend="{{extend}}" showcounter="true"></textarea>

  <!-- picker_test_1 -->
  <picker type="text" range="{{range}}" selected="{{selected}}" value="{{value}}"></picker>

  <!-- picker_test_2 -->
  <picker type="date" start="{{start}}" end="{{end}}" selected="{{selected}}" value="{{value}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}"></picker>

  <!-- picker_test_3 -->
  <picker type="time" containsecond="{{containsecond}}" selected="{{selected}}" value="{{value}}" hours="{{hours}}"></picker>

  <!-- picker_test_4 -->
  <picker type="datetime" selected="{{selected}}" value="{{value}}" hours="{{hours}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}"></picker>

  <!-- picker_test_5 -->
  <picker type="multi-text" columns="{{columns}}" range="{{range}}" selected="{{selected}}" value="{{value}}"></picker>

  <!-- picker-view_test_1 -->
  <picker-view type="text" range="{{range}}" selected="{{selected}}" indicatorprefix="{{indicatorprefix}}" indicatorsuffix="{{indicatorsuffix}}"></picker-view>

  <!-- picker-view_test_2 -->
  <picker-view type="date" start="{{start}}" end="{{end}}" selected="{{selected}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}"></picker-view>

  <!-- picker-view_test_3 -->
  <picker-view type="time" containsecond="{{containsecond}}" selected="{{selected}}" hours="{{hours}}"></picker-view>

  <!-- picker-view_test_4 -->
  <picker-view type="datetime" selected="{{selected}}" hours="{{hours}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}"></picker-view>

  <!-- picker-view_test_5 -->
  <picker-view type="multi-text" columns="{{columns}}" range="{{range}}" selected="{{selected}}"></picker-view>

  <!-- qrcode_test -->
  <qrcode value="{{value}}" type="rect"></qrcode>

  <!-- video_test -->
  <video muted="{{muted}}" src="{{src}}" autoplay="{{autoplay}}" poster="{{poster}}" controls="{{controls}}"></video>

  <!-- badge_test -->
  <badge placement="right" count="2" visible = "true" maxcount="90"></badge>

  <!-- panel_test -->
  <panel type="foldable" mode="mini" dragbar="true" miniheight="300px"></panel>

  <!-- stepper_test -->
  <stepper index="1"></stepper>

  <!-- xcomponent_test -->
  <xcomponent name="{{name}}" type="texture"></xcomponent>

  <!-- web_test -->
  <web src="{{src}}"></web>
</div>