Forum | Appery.io

The tab is only visible in the builder (design time). The tab is not present in run time. Do you want to see the tab in run time as well?

Yes, that is what we are saying. However, it needs to be optional. And we need to be able to specify the text. So in the Properties of the panel you could have:
[ ] Show tab
Tab text (____________)

I agree, I was also perplexed why it wasn't displaying at runtime as a very new user to appery. Just seems like there should be some sort of settings for it where you can assign an image for it, make it appear or not, or even allow a few px overlap for the panel if you choose not to have a tab.

Tommy, As a very new user to Appery you may not be aware that the panel is a very new addition to the Components, and a welcome one, I must say. I'm sure Appery will get it fixed up eventually.

As a programmer myself (Perl, MySQL, Javascript) I realize that one certainly can't think of every possible option and permutation right off the bat. Perhaps Appery, when they introduced the panel, expected we'd all just use your simple solution. Adam and I just wanted something more "eloquent" you might say.

The Panel component that we use is coming from jQuery Mobile (http://demos.jquerymobile.com/1.4.2/p...).

The tab is there in design time so that you can open it.

I don't remember seeing any apps where the Panel has a tab. There is usually a button in the header to open the Panel or via slide. Can you show me a screen shot of an app where the tab is present?

This is an example of an app with a tab. The tab (referred to here as a panel handle) was created based on the code in a post in this topic, above, by Adam Garbinski (many thanks to Adam!), which I'll put in below the screen shot, without Adam's great explanations.

In custom css file. Note that this differs from what is above in that I moved the tab down to allow for the Home button in the header. I added a border to the tab. I also made some adjustments to place the word "Menu" properly. Depending on the word on the tab, adjustments may also be made to some heights and widths.

code/* This is styling for left and right panel handle */

/* General styling */

.handle {
width: 22px;
height: 47px;
position: absolute;
top: 1px;
border: 1px solid #000000;
background: -webkit-linear-gradient(left, #5D9AC3, #4176A6); /*#3A6C9F For Safari /
background: -o-linear-gradient(right, #5D9AC3, #4176A6); / For Opera 11.1 to 12.0 /
background: -moz-linear-gradient(right, #5D9AC3, #4176A6); / For Firefox 3.6 to 15 /
background: linear-gradient(to right, #5D9AC3, #4176A6); / Standard syntax /
box-shadow: 0 1px 0 #84A8CB;
text-shadow: black 1px 1px 1px;
/ background: #558FBA; /
/ opacity:0.6; */
overflow:hidden !important;
}

.handle-label {
width: 20px;
height: 45px;
position: absolute;
text-shadow: none;
color:#ffffff;
}

/* Left handle styling */

.handle-left {
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}

.handle-label-left {
top: 10px;
left: 13px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
writing-mode: lr-bt;
}

.handle-visible-left {
transition: 0.4s;
left: 0px;
}

.handle-hidden-left {
transition: 0.4s;
left:-25px;
}

/* Right handle styling */

.handle-right {
top: 35px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}

.handle-label-right {
top: -10px;
right: 12px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
writing-mode: lr-tb;
}

.handle-visible-right {
transition: 0.4s;
right: 0px;
}

.handle-hidden-right {
transition: 0.4s;
right:-25px;
}/code

This is the properties of an html block placed in the header. The html, which displays the tab (or panel handle) is below

HTML in the above block:

code<div id="PanelHandle-right" class="handle handle-right handle-visible-right">
<div class="handle-label handle-label-right">Menu<>
<>/code

In a javascript file:

codefunction togglePanelHandle(handleID, position){
&#47;&#47; This function hides and unhides panel handle
document&#46;querySelector(handleID + '-' + position)&#46;classList&#46;toggle('handle-visible-' + position);
document&#46;querySelector(handleID + '-' + position)&#46;classList&#46;toggle('handle-hidden-' + position);
}/code

Events on the page, for the above HTML block (panel_handle_right)

Javascript code in the above event:

codetogglePanelHandle('#PanelHandle','right');/code

Event on the panel component:

Javascript code in the above event:

codetogglePanelHandle('#PanelHandle','right');/code

The tab (panel handle) is hidden when the panel opens, and shown when it closes. If the panel is on the left, simply change all instances of "right" in the HTML block and the togglePanelHandle code to "left"

Thank you for sharing!