Nativescript AbsoluteLayout, родительская позиция относительно - PullRequest
Новая
       42

Nativescript AbsoluteLayout, родительская позиция относительно

1 голос
/ 21 апреля 2020

У меня есть AbsoluteLayout, который должен открыться и go поверх mdCardview, но, похоже, он пытается сжать все внутри карты. Я попытался возиться с тегом позиции css, но он не изменился ни на один бит.

На рисунке ниже вы можете увидеть кнопку сохранения, которая также является абсолютным, эта кнопка делает go для каждого другой компонент.

Это мой компонент TimeCard, у которого есть кнопка и абсолютный макет, который будет использоваться в качестве всплывающего окна 

<template>
  <GridLayout class="dialog" rows="*, *" columns="*" :class="{ dialogOpen: dialogOpen }">
    <MDButton :text="label" @tap="showDialog()" class="fill" />
    <AbsoluteLayout class="dialog-wrapper">
      <StackLayout top="100" left="20" class="dialog">
        <TimePicker v-bind="$attrs" v-on="$listeners" />
        <MDButton text="Confirm" class="cancel" />
        <Button class="btn btn-outline" text="Cancel" @tap="closeDialog"></Button>
      </StackLayout>
    </AbsoluteLayout>
  </GridLayout>
</template>

 data: () => ({
    dialogOpen: false
  }),
  methods: {
    showDialog() {
      this.dialogOpen = true
    },
    closeDialog() {
      this.dialogOpen = false
    }
  }

Это моя карточка доступности, которая содержит слот с компонентом таймкарты 

  <StackLayout >
    <MDCardView elevation="5px" ripple="true" width="100%" margin="30px" class="cardview">
      <GridLayout rows="*, *" columns="*, *, *" class="card" width="auto">
        <StackLayout col="0" row="0">
          <Label class="title" :text="getNameAndDayOfMonth(day)" />
        </StackLayout>
        <MDButton col="2" row="0" text="fill" class="fill" @tap="showActions()" v-if="!show && Object.keys(value).length === 0" />
        <GridLayout row="1" colSpan="3" columns="auto, auto, *" rows="*, *" width="auto" v-else>
          <GridLayout row="0"  columns="auto, auto" rows="*" colSpan="2" width="auto">
            <slot  />
          </GridLayout>
          <MDButton text="clear" col="2" row="0" class="cancel" @tap="cancelTime()" />
          <template v-if="Object.keys(value).length !== 0">
            <Label :text="format(value.start)" col="0" row="1" />
            <Label :text="format(value.end)" col="1" row="1" />
          </template>
        </GridLayout>
      </GridLayout>
    </MDCardView>
  </StackLayout>

Это доступность родительского компонента, которая определяет компонент временной карты 

 <StackLayout>
            <AvailabilityCard v-for="(day, i) in days" :key="i" v-model="day.element" :day="day.date">
              <TimeCard col="0" label="begin" v-model="day.element.start"></TimeCard>
              <TimeCard col="1" label="eind" v-model="day.element.end"></TimeCard>
            </AvailabilityCard>
          </StackLayout>

Экран компонента доступности

...