Tabs & Navigation | Stencil Library

LIST HEADER

ANOTHER LIST HEADER

Profile

Settings

Help

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"intrinsicTitle":"","htmlClass":"s9-ct","htmlStyle":"left: 0px; top: 0px; width: 300px; height: 275px;","normalSettings":{"fillColor":"F5F5F5","rounding":5,"shadow":-3,"showsScrollbars":false,"strokeWidth":1},"contentLockedFlag":1,"childComps":[{"oidChild":2047,"intrinsicTitle":"","htmlClass":"s9-v-st-nav","htmlStyle":"left: 1px; top: 40px; width: 298px; height: 85px;","oidLinkedState":1,"normalSettings":{"fillColor":"F5F5F5","horizAlign":"left","itemHorizGap":5,"itemMaxCols":1,"itemVertGap":0,"padding":13,"pagesPreset":"childrenOfRoot","subListType":"fly","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"fillColor":"0088CC","textFillColor":"FFFFFF"},"hoverSettings":{"fillColor":"EAEAEA","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},{"oidChild":5028,"intrinsicTitle":"LIST HEADER","htmlClass":"s9-text","htmlStyle":"left: 14px; top: 18px; width: 100px;","content":"LIST HEADER","normalSettings":{"textFillColor":"999999","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":11,"textStyle":"normal bold"},"positionLockedFlag":1,"childComps":[]},{"oidChild":5028,"intrinsicTitle":"ANOTHER LIST HEADER","htmlClass":"s9-text","htmlStyle":"left: 14px; top: 137px; width: 160px;","content":"ANOTHER LIST HEADER","normalSettings":{"textFillColor":"999999","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":11,"textStyle":"normal bold"},"childComps":[]},{"oidChild":2040,"intrinsicTitle":"","htmlClass":"s9-h-line","htmlStyle":"left: 14px; top: 225px; width: 276px;","normalSettings":{"opacity":33,"strokeB":false,"strokeColor":"FFFFFF","strokeL":false,"strokeR":false,"strokeStyle":"groove","strokeWidth":1},"childComps":[]},{"oidChild":5027,"intrinsicTitle":"Profile","htmlClass":"s9-link","htmlStyle":"left: 1px; top: 159px; width: 297px; height: 28px;","normalSettings":{"cursor":"pointer","fillColor":"F5F5F5","horizAlign":"left","padding":13,"text":"Profile","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"hoverSettings":{"fillColor":"EAEAEA","textFillColor":"1A678D"},"childComps":[]},{"oidChild":5027,"intrinsicTitle":"Settings","htmlClass":"s9-link","htmlStyle":"left: 1px; top: 188px; width: 297px; height: 28px;","normalSettings":{"cursor":"pointer","fillColor":"F5F5F5","horizAlign":"left","padding":13,"text":"Settings","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"hoverSettings":{"fillColor":"EAEAEA","textFillColor":"1A678D"},"childComps":[]},{"oidChild":5027,"intrinsicTitle":"Help","htmlClass":"s9-link","htmlStyle":"left: 1px; top: 235px; width: 297px; height: 28px;","normalSettings":{"cursor":"pointer","fillColor":"F5F5F5","horizAlign":"left","padding":13,"text":"Help","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"hoverSettings":{"fillColor":"EAEAEA","textFillColor":"1A678D"},"childComps":[]}]},"xy":[0,0],"wh":[300,275],"src-account":""}],"com.protoshare.states":[{"stateName":"List Items","valueNamesStr":"First\nSecond\nThird","src-oid":1,"src-account":""}]}

Nav List

Action

Another Action

Something Else Here

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"intrinsicTitle":"","htmlClass":"s9-ct","htmlStyle":"left: 0px; top: 0px; width: 165px; height: 109px;","animations":{"show":"fade 333ms easeInOutQuad"},"normalSettings":{"fillColor":"FFFFFF","rounding":5,"shadow":10,"showsScrollbars":false,"strokeColor":"AAAAAA","strokeStyle":"solid","strokeWidth":1},"contentLockedFlag":1,"childComps":[{"oidChild":5028,"intrinsicTitle":"Action","htmlClass":"s9-text","htmlStyle":"left: -2px; top: 8px; width: 165px; height: 30px;","content":"Action","normalSettings":{"cursor":"pointer","padding":10,"paddingB":false,"paddingR":false,"paddingT":false,"textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"hoverSettings":{"fillColor":"0088CC","textFillColor":"FFFFFF"},"childComps":[]},{"oidChild":5028,"intrinsicTitle":"Another Action","htmlClass":"s9-text","htmlStyle":"left: -2px; top: 37px; width: 165px; height: 30px;","content":"Another Action","normalSettings":{"cursor":"pointer","padding":10,"paddingB":false,"paddingR":false,"paddingT":false,"textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"hoverSettings":{"fillColor":"0088CC","textFillColor":"FFFFFF"},"childComps":[]},{"oidChild":5028,"intrinsicTitle":"Something Else Here","htmlClass":"s9-text","htmlStyle":"left: -2px; top: 66px; width: 165px; height: 30px;","content":"Something Else Here","normalSettings":{"cursor":"pointer","padding":10,"paddingB":false,"paddingR":false,"paddingT":false,"textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"hoverSettings":{"fillColor":"0088CC","textFillColor":"FFFFFF"},"childComps":[]},{"oidChild":2040,"intrinsicTitle":"","htmlClass":"s9-h-line","htmlStyle":"left: -2px; top: 98px; width: 165px;","normalSettings":{"strokeColor":"CCCCCC"},"childComps":[]}]},"xy":[0,0],"wh":[165,109],"src-account":""}],"com.protoshare.states":[]}

Drop-down Menu

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"htmlStyle":"left: 0px; top: 0px; width: 350px; height: 30px;","normalSettings":{"showsScrollbars":false},"contentLockedFlag":1,"childComps":[{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 32px; top: 0px; width: 286px; height: 30px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":-1,"itemVertGap":5,"pagesPreset":"childrenOfRoot","strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"fillColor":"EAEAEA","textFillColor":"9B9B9B"},"hoverSettings":{"fillColor":"EAEAEA"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 317px; top: 0px; width: 33px; height: 30px;","oidLinkedState":1,"normalSettings":{"delta":1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBL":false,"roundingTL":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"»","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 0px; top: 0px; width: 33px; height: 30px;","oidLinkedState":1,"normalSettings":{"delta":-1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBR":false,"roundingTR":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"«","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]}]},"xy":[0,0],"wh":[350,30],"src-account":""}],"com.protoshare.states":[{"stateName":"Page","valueNamesStr":"1\n2\n3\n4\n5\n6\n7\n8\n9","src-oid":1,"src-account":""}]}

Pagination

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"htmlStyle":"left: 0px; top: 0px; width: 343px; height: 44px;","normalSettings":{"showsScrollbars":false},"contentLockedFlag":1,"childComps":[{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 48px; top: 0px; width: 247px; height: 44px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":-1,"itemVertGap":5,"pagesPreset":"childrenOfRoot","strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":18,"vertAlign":"middle"},"targetSettings":{"fillColor":"EAEAEA","textFillColor":"9B9B9B"},"hoverSettings":{"fillColor":"EAEAEA"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 294px; top: 0px; width: 49px; height: 44px;","oidLinkedState":1,"normalSettings":{"delta":1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBL":false,"roundingTL":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"»","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":18,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 0px; top: 0px; width: 49px; height: 44px;","oidLinkedState":1,"normalSettings":{"delta":-1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBR":false,"roundingTR":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"«","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":18,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]}]},"xy":[0,0],"wh":[343,44],"src-account":""}],"com.protoshare.states":[{"stateName":"Page","valueNamesStr":"1\n2\n3\n4\n5","src-oid":1,"src-account":""}]}

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"htmlStyle":"left: 0px; top: 0px; width: 309px; height: 26px;","normalSettings":{"showsScrollbars":false},"contentLockedFlag":1,"childComps":[{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 27px; top: 0px; width: 255px; height: 26px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":-1,"itemVertGap":5,"pagesPreset":"childrenOfRoot","strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":11,"vertAlign":"middle"},"targetSettings":{"fillColor":"EAEAEA","textFillColor":"9B9B9B"},"hoverSettings":{"fillColor":"EAEAEA"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 281px; top: 0px; width: 28px; height: 26px;","oidLinkedState":1,"normalSettings":{"delta":1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBL":false,"roundingTL":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"»","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":11,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 0px; top: 0px; width: 28px; height: 26px;","oidLinkedState":1,"normalSettings":{"delta":-1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBR":false,"roundingTR":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"«","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":11,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]}]},"xy":[0,0],"wh":[309,26],"src-account":""}],"com.protoshare.states":[{"stateName":"Page","valueNamesStr":"1\n2\n3\n4\n5\n6\n7\n8\n9","src-oid":1,"src-account":""}]}

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"htmlStyle":"left: 0px; top: 0px; width: 223px; height: 22px;","normalSettings":{"showsScrollbars":false},"contentLockedFlag":1,"childComps":[{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 18px; top: 0px; width: 187px; height: 22px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":-1,"itemVertGap":5,"pagesPreset":"childrenOfRoot","strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":10,"vertAlign":"middle"},"targetSettings":{"fillColor":"EAEAEA","textFillColor":"9B9B9B"},"hoverSettings":{"fillColor":"EAEAEA"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 204px; top: 0px; width: 19px; height: 22px;","oidLinkedState":1,"normalSettings":{"delta":1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBL":false,"roundingTL":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"»","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":10,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},{"oidChild":2048,"intrinsicTitle":"","htmlClass":"s9-st-cycle-nav","htmlStyle":"left: 0px; top: 0px; width: 19px; height: 22px;","oidLinkedState":1,"normalSettings":{"delta":-1,"fillColor":"FFFFFF","horizAlign":"center","labelStyle":"custom","rounding":3,"roundingBR":false,"roundingTR":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"text":"«","textFillColor":"0088CC","textFont":"Helvetica, Arial, sans-serif","textSize":10,"vertAlign":"middle","wrapAtEnd":true},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]}]},"xy":[0,0],"wh":[223,22],"src-account":""}],"com.protoshare.states":[{"stateName":"Page","valueNamesStr":"1\n2\n3\n4\n5\n6\n7\n8\n9","src-oid":1,"src-account":""}]}

Accordion

First tab content
Use the Test button in the editor to switch to another tab and edit its content.

Second tab content

Third tab content

First

Second

Third

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"intrinsicTitle":"","htmlClass":"s9-ct","htmlStyle":"left: 0px; top: 36px; width: 360px; height: 270px;","normalSettings":{"fillColor":"FFFFFF","strokeColor":"CCCCCC","strokeStyle":"solid","strokeWidth":1},"visibilityStates":"1:0","groupNames":["g1"],"childComps":[{"oidChild":8,"intrinsicTitle":"First tab contentUse the Test button in the editor to switch to another tab and edit its content.","htmlStyle":"left: 32px; top: 69px; width: 295px; height: 100px;","content":"First tab content Use the Test button in the editor to switch to another&nbsp;tab and edit its content.","normalSettings":{"horizAlign":"center","showsScrollbars":false,"textFillColor":"6F6F6F","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":13,"textStyle":"normal normal","vertAlign":"middle"},"childComps":[]}]},"xy":[0,36],"wh":[360,270],"src-account":""},{"data":{"oidChild":2042,"intrinsicTitle":"","htmlClass":"s9-ct","htmlStyle":"left: 0px; top: 36px; width: 360px; height: 270px;","normalSettings":{"fillColor":"FFFFFF","strokeColor":"CCCCCC","strokeStyle":"solid","strokeWidth":1},"visibilityStates":"1:1","groupNames":["g1"],"childComps":[{"oidChild":5028,"intrinsicTitle":"Second tab content","htmlClass":"s9-text","htmlStyle":"left: -1px; top: 98px; width: 359px; height: 43px;","content":"Second tab content","normalSettings":{"horizAlign":"center","showsScrollbars":false,"textFillColor":"5D5D5D","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":16,"textStyle":"normal normal","vertAlign":"middle"},"childComps":[]}]},"xy":[0,36],"wh":[360,270],"src-account":""},{"data":{"oidChild":2042,"intrinsicTitle":"","htmlClass":"s9-ct","htmlStyle":"left: 0px; top: 36px; width: 360px; height: 270px;","normalSettings":{"fillColor":"FFFFFF","strokeColor":"CCCCCC","strokeStyle":"solid","strokeWidth":1},"visibilityStates":"1:2","groupNames":["g1"],"childComps":[{"oidChild":5028,"intrinsicTitle":"Third tab content","htmlClass":"s9-text","htmlStyle":"left: -1px; top: 98px; width: 359px; height: 43px;","content":"Third tab content","normalSettings":{"horizAlign":"center","showsScrollbars":false,"textFillColor":"5D5D5D","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":16,"textStyle":"normal normal","vertAlign":"middle"},"childComps":[]}]},"xy":[0,36],"wh":[360,270],"src-account":""},{"data":{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 0px; top: 0px; width: 220px; height: 37px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":2,"itemVertGap":5,"pagesPreset":"childrenOfRoot","rounding":5,"roundingBL":false,"roundingBR":false,"strokeColor":"CCCCCC","strokeL":false,"strokeR":false,"strokeStyle":"solid","strokeT":false,"strokeWidth":1,"tabStyle":"top","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"strokeB":false,"strokeColor":"CCCCCC","strokeL":true,"strokeR":true,"strokeT":true,"textFillColor":"333333"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},"xy":[0,0],"wh":[220,37],"src-account":""}],"com.protoshare.states":[{"stateName":"Tabs","valueNamesStr":"First\nSecond\nThird","src-oid":1,"src-account":""}]}

Tab & Pill Navs

First

Second

Third

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2047,"intrinsicTitle":"","htmlClass":"s9-v-st-nav","htmlStyle":"left: 0px; top: 0px; width: 65px; height: 130px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":5,"itemMaxCols":1,"itemVertGap":1,"pagesPreset":"childrenOfRoot","rounding":5,"roundingBR":false,"roundingTR":false,"strokeB":false,"strokeColor":"CCCCCC","strokeL":false,"strokeStyle":"solid","strokeT":false,"strokeWidth":1,"subListType":"fly","tabStyle":"left","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"strokeB":true,"strokeColor":"CCCCCC","strokeL":true,"strokeR":false,"strokeT":true,"textFillColor":"333333"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},"xy":[0,0],"wh":[65,130],"src-account":""}],"com.protoshare.states":[{"stateName":"Tabs","valueNamesStr":"First\nSecond\nThird","src-oid":1,"src-account":""}]}

First

Second

Third

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 0px; top: 0px; width: 200px; height: 37px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":2,"itemVertGap":5,"pagesPreset":"childrenOfRoot","rounding":5,"roundingBL":false,"roundingBR":false,"strokeColor":"CCCCCC","strokeL":false,"strokeR":false,"strokeStyle":"solid","strokeT":false,"strokeWidth":1,"tabStyle":"top","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"strokeB":false,"strokeColor":"CCCCCC","strokeL":true,"strokeR":true,"strokeT":true,"textFillColor":"333333"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},"xy":[0,0],"wh":[200,37],"src-account":""}],"com.protoshare.states":[{"stateName":"Tabs","valueNamesStr":"First\nSecond\nThird","src-oid":1,"src-account":""}]}

First

Second

Third

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 0px; top: 0px; width: 200px; height: 37px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":2,"itemVertGap":5,"pagesPreset":"childrenOfRoot","rounding":5,"roundingTL":false,"roundingTR":false,"strokeB":false,"strokeColor":"CCCCCC","strokeL":false,"strokeR":false,"strokeStyle":"solid","strokeWidth":1,"tabStyle":"top","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"strokeB":true,"strokeColor":"CCCCCC","strokeL":true,"strokeR":true,"strokeT":false,"textFillColor":"333333"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},"xy":[0,0],"wh":[200,37],"src-account":""}],"com.protoshare.states":[{"stateName":"Tabs","valueNamesStr":"First\nSecond\nThird","src-oid":1,"src-account":""}]}

First

Second

Third

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2047,"intrinsicTitle":"","htmlClass":"s9-v-st-nav","htmlStyle":"left: 0px; top: 0px; width: 65px; height: 130px;","oidLinkedState":1,"normalSettings":{"fillColor":"FFFFFF","horizAlign":"center","itemHorizGap":5,"itemMaxCols":1,"itemVertGap":1,"pagesPreset":"childrenOfRoot","rounding":5,"roundingBL":false,"roundingTL":false,"strokeB":false,"strokeColor":"CCCCCC","strokeR":false,"strokeStyle":"solid","strokeT":false,"strokeWidth":1,"subListType":"fly","tabStyle":"left","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"strokeB":true,"strokeColor":"CCCCCC","strokeL":false,"strokeR":true,"strokeT":true,"textFillColor":"333333"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"childComps":[]},"xy":[0,0],"wh":[65,130],"src-account":""}],"com.protoshare.states":[{"stateName":"Tabs","valueNamesStr":"First\nSecond\nThird","src-oid":1,"src-account":""}]}

First Panel

Second Panel

Third Panel

First Panel

Second Panel

Third Panel

Second Panel

Third Panel

Third Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque risus in enim porta aliquam. In vitae risus purus.

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"userTitle":"Container","htmlStyle":"left: 0px; top: 0px; width: 360px; height: 211px;","normalSettings":{"showsScrollbars":false},"contentLockedFlag":1,"childComps":[{"oidChild":5028,"intrinsicTitle":"First Panel","htmlStyle":"left: 0px; top: 0px; width: 360px; height: 36px;","content":"First Panel","events":{"click":"1:1"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:0,1:2,1:3","childComps":[]},{"oidChild":5028,"intrinsicTitle":"Second Panel","htmlStyle":"left: 0px; top: 38px; width: 360px; height: 36px;","content":"Second Panel","events":{"click":"1:2"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:0,1:3","childComps":[]},{"oidChild":5028,"intrinsicTitle":"Third Panel","htmlStyle":"left: 0px; top: 76px; width: 360px; height: 36px;","content":"Third Panel","events":{"click":"1:3"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:0","childComps":[]},{"oidChild":5028,"intrinsicTitle":"First Panel","htmlStyle":"left: 0px; top: 0px; width: 360px; height: 36px;","content":"First Panel","events":{"click":"1:0"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingBL":false,"roundingBR":false,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"000000","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:1","childComps":[]},{"oidChild":5028,"intrinsicTitle":"Second Panel","htmlStyle":"left: 0px; top: 137px; width: 360px; height: 36px;","content":"Second Panel","events":{"click":"1:2"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:1","childComps":[]},{"oidChild":5028,"intrinsicTitle":"Third Panel","htmlStyle":"left: 0px; top: 175px; width: 360px; height: 36px;","content":"Third Panel","events":{"click":"1:3"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:1","childComps":[]},{"oidChild":5028,"intrinsicTitle":"Second Panel","htmlStyle":"left: 0px; top: 38px; width: 360px; height: 36px;","content":"Second Panel","events":{"click":"1:0"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingBL":false,"roundingBR":false,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"000000","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:2","childComps":[]},{"oidChild":5028,"intrinsicTitle":"Third Panel","htmlStyle":"left: 0px; top: 175px; width: 360px; height: 36px;","content":"Third Panel","events":{"click":"1:3"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:2","childComps":[]},{"oidChild":5028,"intrinsicTitle":"Third Panel","htmlStyle":"left: 0px; top: 76px; width: 360px; height: 36px;","content":"Third Panel","events":{"click":"1:0"},"normalSettings":{"fillColor":"FFFFFF","horizAlign":"left","padding":14,"rounding":5,"roundingBL":false,"roundingBR":false,"roundingExt":true,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1,"textFillColor":"000000","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"textFillColor":"000000"},"hoverSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"clickSettings":{"fillColor":"EEEEEE","textFillColor":"1A678D"},"visibilityStates":"1:3","childComps":[]},{"oidChild":2042,"intrinsicTitle":"","htmlStyle":"left: 0px; top: 35px; width: 360px; height: 100px;","animations":{"hide":"none","show":"slide-t2b 333ms easeInOutQuad"},"normalSettings":{"fillColor":"FFFFFF","rounding":5,"roundingTL":false,"roundingTR":false,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1},"visibilityStates":"1:1","contentLockedFlag":1,"childComps":[{"oidChild":8,"intrinsicTitle":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque risus in enim porta aliquam. In vitae risus purus.","htmlClass":"s9-rich-text","htmlStyle":"left: 14px; top: 14px; width: 330px;","content":"Lorem ipsum dolor sit <a>amet</a>, consectetur adipiscing elit. Fusce pellentesque risus in enim porta aliquam. In vitae risus purus.","normalSettings":{"horizAlign":"center","showsScrollbars":false,"textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14},"childComps":[]}]},{"oidChild":2042,"intrinsicTitle":"","htmlStyle":"left: 0px; top: 73px; width: 360px; height: 100px;","animations":{"hide":"none","show":"slide-t2b 333ms easeInOutQuad"},"normalSettings":{"fillColor":"FFFFFF","rounding":5,"roundingTL":false,"roundingTR":false,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1},"visibilityStates":"1:2","contentLockedFlag":1,"childComps":[{"oidChild":8,"intrinsicTitle":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque risus in enim porta aliquam. In vitae risus purus.","htmlClass":"s9-rich-text","htmlStyle":"left: 14px; top: 14px; width: 330px;","content":"Lorem ipsum dolor sit <a>amet</a>, consectetur adipiscing elit. Fusce pellentesque risus in enim porta aliquam. In vitae risus purus.","normalSettings":{"horizAlign":"center","showsScrollbars":false,"textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14},"childComps":[]}]},{"oidChild":2042,"intrinsicTitle":"","htmlStyle":"left: 0px; top: 111px; width: 360px; height: 100px;","animations":{"hide":"none","show":"slide-t2b 333ms easeInOutQuad"},"normalSettings":{"fillColor":"FFFFFF","rounding":5,"roundingTL":false,"roundingTR":false,"showsScrollbars":false,"strokeColor":"D4D4D4","strokeStyle":"solid","strokeWidth":1},"visibilityStates":"1:3","contentLockedFlag":1,"childComps":[{"oidChild":8,"intrinsicTitle":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque risus in enim porta aliquam. In vitae risus purus.","htmlClass":"s9-rich-text","htmlStyle":"left: 14px; top: 14px; width: 330px;","content":"Lorem ipsum dolor sit <a>amet</a>, consectetur adipiscing elit. Fusce pellentesque risus in enim porta aliquam. In vitae risus purus.","normalSettings":{"horizAlign":"center","showsScrollbars":false,"textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14},"childComps":[]}]}]},"xy":[0,0],"wh":[360,211],"src-account":""}],"com.protoshare.states":[{"stateName":"Accordion","valueNamesStr":"1\n2\n3\n4","src-oid":1,"src-account":""}]}

Project Name

Link

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"intrinsicTitle":"","htmlClass":"s9-ct","htmlStyle":"left: 0px; top: 0px; width: 960px; height: 42px;","normalSettings":{"fillColor":"2C2C2C","rounding":5,"shadow":0,"showsScrollbars":false},"contentLockedFlag":1,"childComps":[{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 160px; top: 0px; width: 200px; height: 42px;","oidLinkedState":1,"normalSettings":{"fillColor":"2C2C2C","horizAlign":"center","itemHorizGap":0,"itemVertGap":5,"pagesPreset":"childrenOfRoot","strokeWidth":0,"textFillColor":"999999","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"fillColor":"222222","textFillColor":"FFFFFF"},"hoverSettings":{"textFillColor":"FFFFFF"},"childComps":[]},{"oidChild":5022,"intrinsicTitle":"Search","htmlClass":"s9-text-field","htmlStyle":"left: 490px; top: 6px; width: 140px; height: 28px;","normalSettings":{"fillColor":"626262","padding":8,"rounding":3,"shadow":-3,"strokeColor":"151515","text":"Search","textFillColor":"D4D4D4","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14},"childComps":[]},{"oidChild":2063,"intrinsicTitle":"","htmlClass":"s9-st-value-btn","htmlStyle":"left: 376px; top: 0px; width: 99px; height: 42px;","normalSettings":{"fillColor":"2C2C2C","horizAlign":"center","labelStyle":"custom","strokeColor":"2C2C2C","strokeWidth":0,"targetValue":1,"text":"Dropdown ▾","textFillColor":"999999","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"fillColor":"222222","shadow":-3,"strokeStyle":"inset","textFillColor":"FFFFFF"},"hoverSettings":{"textFillColor":"FFFFFF"},"clickSettings":{"shadow":-3,"strokeStyle":"inset"},"childComps":[]},{"oidChild":5028,"intrinsicTitle":"Project Name","htmlClass":"s9-text","htmlStyle":"left: 11px; top: 5px; width: 135px;","content":"Project Name","normalSettings":{"textFillColor":"999999","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":20},"childComps":[]},{"oidChild":2041,"intrinsicTitle":"","htmlClass":"s9-v-line","htmlStyle":"left: 835px; top: 1px; height: 39px;","normalSettings":{"strokeB":false,"strokeColor":"3D3D3D","strokeR":false,"strokeStyle":"groove","strokeT":false,"strokeWidth":1},"childComps":[]},{"oidChild":5027,"intrinsicTitle":"Link","htmlClass":"s9-link","htmlStyle":"left: 755px; top: 0px; width: 65px; height: 42px;","normalSettings":{"fillColor":"2C2C2C","horizAlign":"center","strokeColor":"2C2C2C","strokeWidth":0,"text":"Link","textFillColor":"999999","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"hoverSettings":{"cursor":"pointer","textFillColor":"FFFFFF"},"childComps":[]},{"oidChild":2063,"intrinsicTitle":"","htmlClass":"s9-st-value-btn","htmlStyle":"left: 850px; top: 0px; width: 94px; height: 42px;","normalSettings":{"fillColor":"2C2C2C","horizAlign":"center","labelStyle":"custom","strokeColor":"2C2C2C","strokeWidth":0,"targetValue":1,"text":"Dropdown ▾","textFillColor":"999999","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"fillColor":"222222","shadow":-3,"strokeStyle":"inset","textFillColor":"FFFFFF"},"hoverSettings":{"textFillColor":"FFFFFF"},"clickSettings":{"shadow":-3,"strokeStyle":"inset"},"childComps":[]}]},"xy":[0,0],"wh":[960,42],"src-account":""}],"com.protoshare.states":[{"stateName":"Nav Bar","valueNamesStr":"Home\nItem 1\nItem 2\nItem 3","src-oid":1,"src-account":""}]}

protoshare-pboard-data{"com.protoshare.components2":[{"data":{"oidChild":2042,"intrinsicTitle":"","htmlClass":"s9-ct","htmlStyle":"left: 0px; top: 0px; width: 960px; height: 42px;","normalSettings":{"fillColor":"EEEEEE","rounding":4,"shadow":0,"showsScrollbars":false,"strokeColor":"E5E5E5","strokeWidth":1},"contentLockedFlag":1,"childComps":[{"oidChild":2044,"intrinsicTitle":"","htmlClass":"s9-h-st-nav","htmlStyle":"left: 14px; top: 0px; width: 221px; height: 42px;","oidLinkedState":1,"normalSettings":{"fillColor":"EEEEEE","horizAlign":"center","itemHorizGap":-2,"itemVertGap":5,"pagesPreset":"childrenOfRoot","strokeStyle":"none","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"fillColor":"DDDDDD","textFillColor":"777777"},"hoverSettings":{"fillColor":"EAEAEA","textFillColor":"1A678D"},"childComps":[]},{"oidChild":2063,"intrinsicTitle":"","htmlClass":"s9-st-value-btn","htmlStyle":"left: 275px; top: 0px; width: 110px; height: 42px;","normalSettings":{"fillColor":"EEEEEE","horizAlign":"center","labelStyle":"custom","strokeColor":"EEEEEE","strokeStyle":"none","strokeWidth":0,"targetValue":1,"text":"Dropdown ▾","textFillColor":"0088CC","textFont":"\"Helvetica Neue\", Helvetica, Arial, sans-serif","textSize":14,"vertAlign":"middle"},"targetSettings":{"fillColor":"999999","textFillColor":"FFFFFF"},"hoverSettings":{"fillColor":"EAEAEA","textFillColor":"1A678D"},"childComps":[]},{"oidChild":2041,"intrinsicTitle":"","htmlClass":"s9-v-line","htmlStyle":"left: 261px; top: 1px; height: 40px;","normalSettings":{"strokeB":false,"strokeColor":"FFFFFF","strokeR":false,"strokeStyle":"groove","strokeT":false,"strokeWidth":1},"childComps":[]}]},"xy":[0,0],"wh":[960,42],"src-account":""}],"com.protoshare.states":[{"stateName":"Nav Bar","valueNamesStr":"Home\nItem 1\nItem 2\nItem 3","src-oid":1,"src-account":""}]}

Navbars

Home

/

Bootstrap