Can SearchBar Merged with Other Controls?


#1

Hi mate,

I am doing a UI that a SearchBar is supposed to be positioned between a couple of buttons, all embedded in a single row. The UI definition is follow:

<GridLayout rows="*, *, 8*">  
  <StackLayout row="0" cols="*,4*,*,*" orientation="horizontal">
      <Button text="<" col="0"></Button>
      <SearchBar hint="Search..." col="1"></SearchBar>
      <Button text="heart" col="2"></Button>
      <Button text="chat" col="3"></Button>
  </StackLayout>
  <GridLayout row="1" columns="*,*,*,*" class="small-spacing" class="search-bar">
      <Label col="0" text="BROWSE" horizontalAlignment="center" verticalAlignment="center" class="tab-title"></Label>
      <Label col="1" text="GROUPS" horizontalAlignment="center" verticalAlignment="center" class="tab-title"></Label>
      <Label col="2" text="ACTIVITY" horizontalAlignment="center" verticalAlignment="center" class="tab-title"></Label>
      <Label col="3" text="ME" horizontalAlignment="center" verticalAlignment="center" class="tab-title"></Label>
  </GridLayout>  
</GridLayout>

And the component file:

import { Page } from 'ui/page';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'main',
  templateUrl: 'components/main/main.component.html',
  styleUrls: ['components/main/main.component.css']
})
export class MainComponent implements OnInit {

  constructor(private page:Page) {
    console.log("MainComponent constructed");

   }

  ngOnInit() {
    this.page.actionBarHidden = true;    
  }

}

However, no buttons can be created after the SearchBar:

Can anyone show me how to do it? Or is it impossible?

TNS version: 3.0.1
Template: Angular

Thanks for any help.

Jimmy