Плавающая кнопка над полноэкранным веб-представлением в Nativescript - PullRequest
Новая
       30

Плавающая кнопка над полноэкранным веб-представлением в Nativescript

0 голосов
/ 05 апреля 2019

Я очень новичок в nativescript, и я потерян с макетом контейнера. Как настроить веб-просмотр в полноэкранном режиме с двумя плавающими панелями поверх веб-обзора, закрепленного в нижней части приложения?

! https://imgur.com/a/TMi3IQz

Я пробовал в это время 2 решения:

Можете ли вы помочь мне, пожалуйста? 

<GridLayout rows="*,60">
    <WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
        id="webViewID" width="100%" src="https://www.stackoverflow.com" />
    <AbsoluteLayout class="mywidget" row="1" orientation="horizontal">
        <Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
        <Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
            height="55" />
    </AbsoluteLayout>
</GridLayout>
  • https://play.nativescript.org/?template=play-js&id=aPtpmB Я пытался настроить его с помощью html, положение относительно родителя, положение с абсолютным основанием: 0px к стеку с классом absolut-it. 
<GridLayout class="relative-it" rows="*">
    <ScrollView row="0">
        <WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
            id="webViewID" width="100%" src="https://www.stackoverflow.com" />
    </ScrollView>
    <StackLayout class="absolute-it" row="1">
        <Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
        <Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
            height="55" />
    </StackLayout>
</GridLayout>

1 Ответ

0 голосов
/ 05 апреля 2019

Попробуйте это, 

<GridLayout rows="*,auto" columns="*,*">
    <WebView src="https://www.nativescript.org" colSpan="2" />
    <Button row="1" col="0" text="Button 1" class="btn btn-primary" />
    <Button row="1" col="1" text="Button 2" class="btn btn-primary" />
</GridLayout>

Обновленная игровая площадка

...