onsenui adding a custom image in the navigation title - onsen-ui

Would like to know how to set an image in the navigation bar instead of the title. I would still require the left hamburger menu icon though.
Can this be easily achieved?

This was done part of their documentation of "ons-toolbar-button"
See it here: 'http://codepen.io/onsen/pen/aHmGL'
Click on the Images selection under "Toolbar Variants" to see how it looks.
[1]: http://codepen.io/onsen/pen/aHmGL

Related

React JS : Chakra UI - Split view

I am looking for a split view in react js , i am using chakra ui for my layouts and i am not able to achive it .
Left Pane is Menu which has a fixed height (no scrolling needed)
Right Pane is the page which gets loaded every-time user selects an option in left menu.
Right pane should be scrollable.
You should give a try on the Choc-UI Layouts for achieving this:
https://choc-ui.com/docs/application-shells/sidebar-layouts
Or here too:
https://chakra-templates.dev/navigation/sidebar
On the links you will get previews of components that have a side bar on left side getting th full height of the viewport, also a sidebar and a container for your app content or other components.
This section is independent of the sidebar and navbar showed on the previews. You can access the code with the show code option on each previo (top-right location)
Try removing the navbar and modifying the width of sidebar, and you will get a split version of the layouts as you are reaching for.

How to hide browserAction icon and show only on sites that match in content_scripts?

My browser extension is always showing actionbar icon. But I want to browser_action displayed only on matches content scripts. Because my webextension users not often use it, so i want to hide icon for dont irritate they.
Use a pageAction, it can do what you want: hide and show when necessary. It will show in the address bar.
The functionality is very similar to a browserAction.
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/pageAction

I need to edit the z-index overlay in woo slider

I'm using woocommerce storefront theme and want to edit the woo-slider overlay to a gradient instead of a black box. I also want to style the text overlay and add some padding. Does anyone know how I can do this?
Here's a link to the page in question: https://olivetreemortuary.biz

How to change the page title without changing the navigation bar title in Ionic v1?

When I change the ion-view title attribute the title is changing on the navigation bar and browser tab. However, I just want to change the title on the browser tab.
i'm not sure i get what you mean but i think the attribute title works like that
<ion-view title="Ingredients" id="page2">
of course this change won't lead to anything since they don't show on the app but i hope my answer could help

Appgyver: How to use Ionic Icons or images in super-navbar?

I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. 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 "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.

Resources