text: (window.webpackJsonp=window.webpackJsonp||[]).push([[2063],{"013z":function(e,t,a){"use strict";var o=a("q1tI"),r=a.n(o),n=a("NmYn"),l=a.n(n),i=a("Wbzz"),s=a("Xrax"),c=a("a7k6"),b=a("TSYQ"),d=a.n(b),m=a("QH2O"),p=a("qKvR");var u=({title:e,tabs:t=[]})=>Object(p.b)("div",{className:d()(m.pageHeader,{[m.withTabs]:t.length})},Object(p.b)("div",{className:"bx--grid"},Object(p.b)("div",{className:"bx--row"},Object(p.b)("div",{className:"bx--col-lg-12"},Object(p.b)("h1",{id:"page-title",className:m.text},e))))),h=a("BAC9");var x=({relativePagePath:e,repository:t})=>{const{site:{siteMetadata:{repository:a}}}=Object(i.useStaticQuery)("1364590287"),{baseUrl:o,subDirectory:r,branch:n}=t||a,l=`${o}/edit/${n}${r}/src/pages${e}`;return o?Object(p.b)("div",{className:"bx--row "+h.row},Object(p.b)("div",{className:"bx--col"},Object(p.b)("a",{className:h.link,href:l},"Edit this page on GitHub"))):null},w=a("FCXl"),g=a("I8xM");class y extends r.a.Component{render(){const{tabs:e,slug:t}=this.props,a=t.split("/").filter(Boolean).slice(-1)[0],o=e.map(e=>{const o=l()(e,{lower:!0,strict:!0}),r=o===a,n=new RegExp(a+"/?(#.*)?$"),s=t.replace(n,o);return Object(p.b)("li",{key:e,className:d()({[g.selectedItem]:r},g.listItem)},Object(p.b)(i.Link,{className:g.link,to:""+s},e))});return Object(p.b)("div",{className:g.tabsContainer},Object(p.b)("div",{className:"bx--grid"},Object(p.b)("div",{className:"bx--row"},Object(p.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(p.b)("nav",null,Object(p.b)("ul",{className:g.list},o))))))}}var O=y,j=a("MjG9");t.a=({pageContext:e,children:t,location:a,Title:o})=>{const{frontmatter:r={},relativePagePath:n,titleType:b}=e,{tabs:d,title:m,theme:h,description:g,keywords:y}=r,{site:{pathPrefix:v}}=Object(i.useStaticQuery)("2456312558"),f=v?a.pathname.replace(v,""):a.pathname,T=d?f.split("/").filter(Boolean).slice(-1)[0]||l()(d[0],{lower:!0}):"";return Object(p.b)(c.a,{tabs:d,homepage:!1,theme:h,pageTitle:m,pageDescription:g,pageKeywords:y,titleType:b},Object(p.b)(u,{title:o?Object(p.b)(o,null):m,label:"label",tabs:d}),d&&Object(p.b)(O,{slug:f,tabs:d,currentTab:T}),Object(p.b)(j.a,{padded:!0},t,Object(p.b)(x,{relativePagePath:n})),Object(p.b)(w.a,{pageContext:e,location:a,slug:f,tabs:d,currentTab:T}),Object(p.b)(s.a,null))}},BAC9:function(e,t,a){e.exports={bxTextTruncateEnd:"EditLink-module--bx--text-truncate--end--2pqje",bxTextTruncateFront:"EditLink-module--bx--text-truncate--front--3_lIE",link:"EditLink-module--link--1qzW3",row:"EditLink-module--row--1B9Gk"}},I8xM:function(e,t,a){e.exports={bxTextTruncateEnd:"PageTabs-module--bx--text-truncate--end--267NA",bxTextTruncateFront:"PageTabs-module--bx--text-truncate--front--3xEQF",tabsContainer:"PageTabs-module--tabs-container--8N4k0",list:"PageTabs-module--list--3eFQc",listItem:"PageTabs-module--list-item--nUmtD",link:"PageTabs-module--link--1mDJ1",selectedItem:"PageTabs-module--selected-item--YPVr3"}},QH2O:function(e,t,a){e.exports={bxTextTruncateEnd:"PageHeader-module--bx--text-truncate--end--mZWeX",bxTextTruncateFront:"PageHeader-module--bx--text-truncate--front--3zvrI",pageHeader:"PageHeader-module--page-header--3hIan",withTabs:"PageHeader-module--with-tabs--3nKxA",text:"PageHeader-module--text--o9LFq"}},kCNf:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return i})),a.d(t,"default",(function(){return x}));a("3bBZ"),a("q1tI");var o=a("7ljp"),r=a("013z");a("qKvR");function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var o in a)Object.prototype.hasOwnProperty.call(a,o)&&(e[o]=a[o])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var a,o,r=function(e,t){if(null==e)return{};var a,o,r={},n=Object.keys(e);for(o=0;o<n.length;o++)a=n[o],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)a=n[o],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}const i={},s=e=>function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(o.b)("div",t)},c=s("PageDescription"),b=s("Row"),d=s("Column"),m=s("ResourceCard"),p=s("MdxIcon"),u={_frontmatter:i},h=r.a;function x(e){let{components:t}=e,a=l(e,["components"]);return Object(o.b)(h,n({},u,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)(c,{mdxType:"PageDescription"},Object(o.b)("p",null,"Preview the UI shell header in React. For detailed code usage documentation, see\nthe Storybooks for each framework below.")),Object(o.b)("h2",null,"Documentation"),Object(o.b)(b,{className:"resource-card-group",mdxType:"Row"},Object(o.b)(d,{colLg:4,colMd:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(m,{subTitle:"React",href:"https://react.carbondesignsystem.com/?path=/story/ui-shell--header-base",mdxType:"ResourceCard"},Object(o.b)(p,{name:"react",mdxType:"MdxIcon"}))),Object(o.b)(d,{colLg:4,colMd:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(m,{subTitle:"Angular (Community)",href:"https://angular.carbondesignsystem.com/?path=/story/components-ui-shell--header",mdxType:"ResourceCard"},Object(o.b)(p,{name:"angular",mdxType:"MdxIcon"}))),Object(o.b)(d,{colLg:4,colMd:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(m,{subTitle:"Vue (Community)",href:"https://vue.carbondesignsystem.com/?path=/story/components-cvuishell-header--header-base",mdxType:"ResourceCard"},Object(o.b)(p,{name:"vue",mdxType:"MdxIcon"})))),Object(o.b)("h2",null,"Demo"),Object(o.b)("h2",null,"Header base"),Object(o.b)(b,{mdxType:"Row"},Object(o.b)(d,{mdxType:"Column"},Object(o.b)("iframe",{loading:"lazy",src:"https://codesandbox.io/embed/v10-starter-sandbox-kf3h4?fontsize=14&hidenavigation=1&view=preview",title:"header-base",allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media",style:{width:"100%",height:"500px",border:"0",borderRadius:"4px",overflow:"hidden"},sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin"}))),Object(o.b)("h2",null,"Header with nav"),Object(o.b)(b,{mdxType:"Row"},Object(o.b)(d,{mdxType:"Column"},Object(o.b)("iframe",{loading:"lazy",src:"https://codesandbox.io/embed/header-base-v07hj?fontsize=14&hidenavigation=1&view=preview",title:"header-with-nav",allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media",style:{width:"100%",height:"500px",border:"0",borderRadius:"4px",overflow:"hidden"},sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin"}))),Object(o.b)("h2",null,"Header with actions"),Object(o.b)(b,{mdxType:"Row"},Object(o.b)(d,{mdxType:"Column"},Object(o.b)("iframe",{loading:"lazy",src:"https://codesandbox.io/embed/header-with-actions-vh014?fontsize=14&hidenavigation=1&view=preview",title:"header-with-actions",allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media",style:{width:"100%",height:"500px",border:"0",borderRadius:"4px",overflow:"hidden"},sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin"}))),Object(o.b)("h2",null,"Header with actions and nav"),Object(o.b)(b,{mdxType:"Row"},Object(o.b)(d,{mdxType:"Column"},Object(o.b)("iframe",{loading:"lazy",src:"https://codesandbox.io/embed/header-with-actions-and-nav-m0lo2?fontsize=14&hidenavigation=1&view=preview",title:"header-with-actions-and-nav",allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media",style:{width:"100%",height:"500px",border:"0",borderRadius:"4px",overflow:"hidden"},sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin"}))),Object(o.b)("h2",null,"Header with sidenav"),Object(o.b)(b,{mdxType:"Row"},Object(o.b)(d,{mdxType:"Column"},Object(o.b)("iframe",{loading:"lazy",src:"https://codesandbox.io/embed/header-with-sidenav-1u7su?fontsize=14&hidenavigation=1&view=preview",title:"header-with-sidenav",allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media",style:{width:"100%",height:"500px",border:"0",borderRadius:"4px",overflow:"hidden"},sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin"}))))}x.isMDXComponent=!0}}]);