CODEWITHSUNDEEP
nativescriptnativescript-vue
Halnex
Halnex

Reputation: 4526

Is it possible to add a second custom ActionBar?

I tried to add a second ActionBar but that didn't work as expected. The action bar appeared at the top of the frame above everything else and not where I wanted it to go.

All I want to do is add another section under the ActionBar so I can display some icons and text.

I started with a Label as a test but it wouldn't even display on the page.

<ActionBar class="action-bar">
    <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>

    <ActionItem icon="res://navigation/menu"
                android:visibility="collapsed"
                @tap="onDrawerButtonTap"
                ios.position="left">
    </ActionItem>

    <Label class="action-bar-title" text="Tasks"></Label>

    <ActionItem ios.systemIcon="16" ios.position="right"
                android.systemIcon="ic_menu_add" android.position="popup"
                text="Add" class="add-task"
                @tap="addTodo">
    </ActionItem>
    <ActionItem ios.systemIcon="16" ios.position="right"
                 android.position="popup"
                text="Sort" class="sort-tasks"
                @tap="sortTodos">
    </ActionItem>
    <ActionItem ios.systemIcon="16" ios.position="right"
                icon="res://menu" android.position="popup"
                text="Delete" class="delete-task">
    </ActionItem>
</ActionBar>

<Label text="Label" class="item" />

<GridLayout class="page-content">
    <ListView for="(task, index) in todosFiltered" key="task.id" @itemTap="onLabelTap" row="0">
        <v-template>
            <GridLayout columns="auto,*">
                <!--<CheckBox :text="task.title" :checked="task.completed" @checkedChange="onCheckChange($event, task, index)" col="0" />-->
                <Label :text="task.title" class="item" :class="{ completed : task.completed}" col="0" row="0" />
            </GridLayout>
        </v-template>
    </ListView>
</GridLayout>

Upvotes: 0

Views: 354

Answers (2)

Amar Yadav
Amar Yadav

Reputation: 172

use Gradient and GridLayout for custom action bar

<FlexboxLayout justifyContent="center" class="page">
  <ScrollView>
    <StackLayout>
      <StackLayout>
        <Gradient direction="to right">
          <GridLayout class="list-group-item" rows="auto, *" columns="50, 80, *">
            <Label row="0" col="0" flexGrow="1" class="fas m-t-25 m-l-15" style="font-size: 20px; color: #fff;" text="&#xf060;"
              (tap)="goBack()"></Label>
          </GridLayout>
        </Gradient>
      </StackLayout>
  </ScrollView>
  </FlexboxLayout>

Upvotes: 0

Manoj
Manoj

Reputation: 21908

If you like to use multiple ActionBar, you should have multiple frames. So each page at each frame can have a ActionBar.

If you don't want to complicate with multiple frames, you may use custom layout. Looking at your sample code, you can have only one element at root level, that's said you can't have both Label and GridLayout at same level. More than one element should be always wrapped inside a layout.

Upvotes: 1

Related Questions