Appgyver: How to use Ionic Icons or images in a super navigator?

Question

I'm trying to use navigation images to the left and right of <super-navbar>, but in the official documentation it is indicated that only text is supported in the buttons of the super navigator. But for this, something needs to be done. Below is my code where I want to place images instead of text:

<super-navbar>
    <super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
    <super-navbar-title>MyApp</super-navbar-title>
    <super-navbar-button side="right">Search</super-navbar-button>
  </super-navbar>

Instead of the text “menu”, I want to at least have a hamburger type icon or PNG image. Same for search text.

Thank.

Answer 1

You can do this right now by deleting the section <super-navbar>and creating your own html header.

If you look in the layout file for your project, you can specify the import statement:

<link rel="import" href="/components/supersonic/components/import.html">

, :

* @name super-navbar-button

* When used inside the element, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.

. github, . https://github.com/AppGyver/steroids

, <super-navbar> , - , & equiv;

<super-navbar-button ng-click="toggleMenuDrawer()">
    &equiv;
</super-navbar-button>

. , , <super-navbar>. : <i class="icon super-search"></i> , navbar -, <super>.