slide-view (1090+)

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text class="title">Left Slide</text>
    <div class="item-container">
      <slide-view class="slide-view" onButtonClick="buttonClick" buttons="{{slideButtons}}" layer="same" edge="left" enableslide="true">
        <div class="inner-div">
          <text class="text-div">Swipe left to delete it</text>
        </div>
      </slide-view>
    </div>
    <text class="title">enableslide = false</text>
    <slide-view class="slide-view" buttons="{{slideButtons}}" layer="same" isopen="false" edge="right" enableslide="false">
      <div class="inner-div">
          <text class="text-div">Swipe left to delete it</text>
      </div>
    </slide-view>
    <text class="title">isopen = true</text>
    <slide-view class="slide-view" buttons="{{slideButtons}}" layer="same" isopen="true" edge="left" enableslide="true">
      <div class="inner-div">
          <text class="text-div">Swipe left to delete it</text>
      </div>
    </slide-view>
    <text class="title">Right Slide</text>
    <slide-view class="slide-view" buttons="{{slideButtons}}" layer="same" isopen="false" edge="right" enableslide="true">
      <div class="inner-div">
          <text class="text-div">Swipe left to delete it</text>
      </div>
    </slide-view>
    <text class="title">Right Above Slide</text>
    <slide-view class="slide-view" buttons="{{slideButtons}}" layer="above" isopen="false" edge="right" enableslide="true">
      <div class="inner-div">
          <text class="text-div">Swipe left to delete it</text>
      </div>
    </slide-view>
    <text class="title">With Static Buttons</text>
    <slide-view id="slideview" class="slide-view" buttons="{{slideButtons}}" layer="same" isopen="false" edge="left" enableslide="true">
      <div class="inner-div">
          <text class="text-div">Swipe left to delete it</text>
      </div>
    </slide-view>
    <input type="button" value="Open" onclick="clickButton" />
    <input type="button" value="Close" onclick="closeclickButton" />
  </div>
</template>
<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  .title {
    font-size: 50px;
    margin-top: 40px;
  }
  .buttons {
    margin: 10px;
    border-radius: 15px;
    padding: 15px;
  }
  .surfaceContainer {
    border-width: 2px;
    background-color: #d2691e;
    width: 100%;
    height: 150px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .buttonHolder {
    width: 750px;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    background-color: #00ced1;
    justify-content: center;
  }
  .buttonHolder input {
    height: 100px;
  }
  .slide-view {
    width: 100%;
    height: 150px;
    background-color: #00008b;
  }
  .inner-div {
    height: 100px;
  }
  .text-div {
    color: #f0fff0;
  }
</style>
<script>
  import prompt from '@system.prompt'
  module.exports = {
    data: {
      title: 'World',
      slideButtons: [
        {
          id: "0",
          buttonWidth: '120px',
          clickButton: false,
          icon: '../Common/ic_update.png',
          text: 'Update',
          backgroundColor: '#FBD4FF',
          iconWidth: '50px',
          iconHeight: '50px',
          backgroundType: 'fill',
          secondaryConfirm: {
            text: "update ?",
            textSize: "12px",
            textColor: "#008000"
          }
        },
        {
          id: "1",
          buttonWidth: '150px',
          icon: '../Common/ic_delete.png',
          //clickButton : true,
          iconBackgroundColor: "#ff0000",
          backgroundColor: '#ff0000',
          backgroundType: 'icon',
          iconWidth: '70px',
          iconHeight: '65px',
          secondaryConfirm: {
            text: "delete ?",
            textSize: "12px",
            textColor: "#008000"
          }
        },
        {
          id: "2",
          buttonWidth: '180px',
          backgroundColor: '#ff0555',
          backgroundType: 'fill',
          text: 'Setting',
          textSize: '15px',
          textColor: '#f0f0f0'
        }
      ]
    },
    clickButton: function () {
      this.$element('slideview').open(true)
    },
    buttonClick(data) {
      const { id, isSecondaryConfirm } = data
      console.info(`### button:${id} is click, data is ${data} ###`)
      if (isSecondaryConfirm) {
        prompt.showToast({
          message: 'Triggered by the second tap.'
        })
      } else {
        prompt.showToast({
          message: 'Triggered by the first tap.'
        })
      }
    },
    closeclickButton: function () { this.$element('slideview').close(true) }
  }
</script>