Nativescript绝对布局,父位置相对
我有一个绝对的布局,应该打开并浏览mdCardview,但它似乎试图压缩cardview中的所有内容。我试着弄乱CSS位置标签,但一点也没有改变 在下面的图片中,您可以看到save按钮,它也是一个绝对布局,这个按钮确实覆盖了所有其他组件 这是我的时间卡组件,它有一个按钮和一个绝对布局,可以用作弹出窗口Nativescript绝对布局,父位置相对,nativescript,nativescript-vue,absolutelayout,Nativescript,Nativescript Vue,Absolutelayout,我有一个绝对的布局,应该打开并浏览mdCardview,但它似乎试图压缩cardview中的所有内容。我试着弄乱CSS位置标签,但一点也没有改变 在下面的图片中,您可以看到save按钮,它也是一个绝对布局,这个按钮确实覆盖了所有其他组件 这是我的时间卡组件,它有一个按钮和一个绝对布局,可以用作弹出窗口 <template> <GridLayout class="dialog" rows="*, *" columns="*&q
<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
}
}
FYI,{N}不支持位置属性。我不知道你为什么首先需要AbsoluteLayout,你能告诉我们预期的输出是什么,这可能会更容易理解。@Manoj所以我试图得到这样一种模式,它会在每个组件上弹出。我认为你根本不需要AbsoluteLayout来在组件上放置模式,只要GridLayout就行了。将模态和组件包装在网格中,将背景色添加到模态,在顶部垂直对齐,在水平方向向左对齐。仅供参考,{N}不支持位置属性。我不知道你为什么首先需要AbsoluteLayout,你能告诉我们预期的输出是什么,这可能会更容易理解。@Manoj所以我试图得到这样一种模式,它会在每个组件上弹出。我认为你根本不需要AbsoluteLayout来在组件上放置模式,只要GridLayout就行了。将模态和组件包装在网格中,为模态添加背景色,在顶部垂直对齐,在水平方向向左对齐。
<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>