Как иметь кнопку закрытия в правом верхнем углу в nativescript? - PullRequest
Новая
       6

Как иметь кнопку закрытия в правом верхнем углу в nativescript?

1 голос
/ 11 октября 2019

Я хочу создать свой собственный модальный макет с моей собственной кнопкой закрытия в правом верхнем углу.

Я что-то придумал, но у него слишком много проблем, особенно в IOS, я опубликую егоно позвольте мне не повторять возникающие у него проблемы, потому что я уверен, что есть общее решение, которое используют люди, и я не настаиваю на своей собственной реализации, я просто хочу что-то, что ведет себя так, как я хочу.

Вот моя реализация: 

<template>
  <ScrollView>
    <GridLayout rows="*" columnts="*,auto">
      <GridLayout 
        row="0"
        col="1"
        opacity=".5"
        @tap="$modal.close"
      >
        <label class="fas" color="white" :text="'fa-circle' | iconmap" />
        <label class="fas" color="black" :text="'fa-times-circle' | iconmap" />
      </GridLayout>
      <StackLayout col="0" row="0">
        <!-- The content of my modal -->
      </StackLayout>
    </GridLayout>
  </ScrollView>
</template>

Я тоже хочу, чтобы это выглядело так, как если бы это было: 

<template>
  <ScrollView>
    <StackLayout col="0" row="0">
      <!-- The content of my modal -->
    </StackLayout>
  </ScrollView>
</template>

За исключением небольшого квадрата наверхний правый угол, который выше всего (z-index), и если пользователь нажимает на него, модальное окно закрывается. Я хочу, чтобы он не оказывал никакого влияния на остальную часть страницы и просто независимо появлялся в верхнем правом углу, над всем остальным.

Для этого есть два очень распространенных случая. одна из них - иметь закрепленную кнопку с фиксированным положением, другая - прокручивать кнопку вдоль содержимого. Моя реализация делает последнее, но я стремлюсь найти решение для первого здесь.

1 Ответ

0 голосов
/ 14 октября 2019

Мне удалось получить именно то, что я хочу, с помощью nstudio / nativescript-плавающей кнопки действия

tns plugin add @nstudio/nativescript-floatingactionbutton

In main.js

import Vue from 'nativescript-vue';

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

Мой модальный компонент: 

<template>
  <GridLayout>
    <VerticalCenterScroll>
      <slot />
    </VerticalCenterScroll>
    <fab @tap="close()" row="1" text="×" rippleColor="#f1f1f1" class="fab-button"/>
  </GridLayout>
</template>

<script>
  export default {
    methods: {
      close() {
        if (this.$modal.close) this.$modal.close();
        else $emit('close');
      },
    },
  };
</script>

<style scoped>
  .fab-button {
    height: 50;
    width: 50;
    margin: 15;
    background-color: silver;
    horizontal-align: right;
    vertical-align: top;
    color: black;
  }
</style>

Вы можете просто использовать this.$modal.close() у меня есть функция из-за определенных сложностей и навигации по кадрам в некоторых из моих модалов.

Это сработало очень хорошо. Я действительно доволен этим замечательным плагином.

...