@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 16.1 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3741:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return D},getElement:function(){return L}});var a=l(1594),n=l.n(a),r=l(5671),i=l(6547),c=l(5619),s=l(806),o=l(7412),d=l(538),m=l(2711),u=l(5526),p=l(8347),E=l(942),h=l.n(E),v=l(9825),f="input-id-01",b="entity-header",y="folder-header",_="search-results",R=function(e){return n().createElement("nav",{className:h()("slds-nav-vertical",{"slds-nav-vertical_compact":e.isCompact,"slds-nav-vertical_shade":e.isShaded}),"aria-label":"Sub page"},e.children)};R.propTypes={className:o.PropTypes.string,children:o.PropTypes.node,isCompact:o.PropTypes.bool,isShaded:o.PropTypes.bool};var g=function(e){return n().createElement("li",{className:h()("slds-nav-vertical__item",{"slds-is-active":e.active},e.className)},n().createElement("a",{href:"#",className:"slds-nav-vertical__action","aria-current":e.active,onClick:function(e){return e.preventDefault()}},e.children))};g.propTypes={active:o.PropTypes.oneOf([!0,void 0,"page","step","location","date","time"]),className:o.PropTypes.string,children:o.PropTypes.node},g.defaultProps={active:void 0};var N=function(e){var t,l=e.children,a=e.className,r=e.collapsed,i=e.expanded,c=e.headerId,s=e.isNavVerticalRadioSet,o=e.listId,d=e.title,m=r||i;return t=s?n().createElement("div",null,l):n().createElement("ul",{"aria-describedby":c},l),n().createElement("div",{className:h()(m?"slds-nav-vertical__overflow":"slds-nav-vertical__section",a)},!m&&!s&&d&&n().createElement("h2",{id:c,className:"slds-nav-vertical__title"},d),m&&n().createElement(v.$n,{className:"slds-button_reset slds-nav-vertical__action slds-nav-vertical__action_overflow","aria-controls":o,"aria-expanded":i?"true":"false"},n().createElement(p.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"chevronright"}),n().createElement("span",{className:"slds-nav-vertical__action-text"},r?"Show More":"Show Less",n().createElement("span",{className:"slds-assistive-text"},d))),m?n().createElement("div",{id:o,className:h()({"slds-hide":r,"slds-show":i})},t):t)};N.defaultProps={headerId:"header-id-1"},N.propTypes={children:o.PropTypes.node,className:o.PropTypes.string,collapsed:(0,s.VY)("listId",o.PropTypes.bool),expanded:(0,s.VY)("listId",o.PropTypes.bool),headerId:o.PropTypes.string.isRequired,isNavVerticalRadioSet:o.PropTypes.bool,listId:o.PropTypes.string,title:o.PropTypes.string};var w=function(){return n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},I=n().createElement(w,null),x=[{id:"collapsed",label:"Collapsed",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me")),n().createElement(N,{title:"Folders",collapsed:!0,listId:_,headerId:y},n().createElement(g,null,"Overflow Item One"),n().createElement(g,null,"Overflow Item Two"),n().createElement(g,null,"Overflow Item Three"))))},{id:"expanded",label:"Expanded",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me")),n().createElement(N,{title:"Folders",expanded:!0,listId:_,headerId:y},n().createElement(g,null,"Overflow Item One"),n().createElement(g,null,"Overflow Item Two"),n().createElement(g,null,"Overflow Item Three"))))}],P=[{id:"compact",label:"Compact",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,{isCompact:!0},n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"items-with-icons",label:"Items with icon",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,n().createElement(d.eX,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Created by Me"),n().createElement(g,null,n().createElement(d.eX,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"items-with-notifications",label:"Items with notification",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent",n().createElement("span",{className:"slds-badge slds-col_bump-left"},n().createElement("span",{className:"slds-assistive-text"},":"),"3",n().createElement("span",{className:"slds-assistive-text"},"New Items"))),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"shade",label:"Shaded Background",element:n().createElement("div",{className:"demo-only",style:{width:"320px",backgroundColor:"#FAFAFB"}},n().createElement(R,{isShaded:!0},n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"quickfind",label:"Quickfind",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(m.ZS,{formElementClassName:"slds-p-horizontal_large",labelContent:"Filter navigation items",inputId:f,hasLeftIcon:!0,hasHiddenLabel:!0},n().createElement(d.eX,{className:"slds-input__icon slds-input__icon_right slds-icon-text-default",symbol:"search",title:!1,assistiveText:!1}),n().createElement(u.A,{type:"search",id:f,placeholder:"Quick Find"})),n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"))))}],S="entity-header",O=function(e){return n().createElement("fieldset",{className:h()("slds-nav-vertical",{"slds-nav-vertical_shade":e.shaded},{"slds-nav-vertical_compact":e.compact})},n().createElement("legend",{className:"slds-nav-vertical__title"},"Reports"),e.children)},C=function(e){return n().createElement("span",{className:h()("slds-nav-vertical__item",e.className)},n().createElement("input",{defaultChecked:e.checked,type:"radio",id:e.id,value:e.id,name:e.name||"unique-id-example"}),n().createElement("label",{className:"slds-nav-vertical__action",htmlFor:e.id},n().createElement("span",{className:"slds-nav-vertical_radio-faux"},e.children)))},A=function(e){return n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,null,n().createElement(C,{checked:!0,id:"unique-id-01-recent"},"Recent"),n().createElement(C,{id:"unique-id-01-created-by-me"},"Created by Me"),n().createElement(C,{id:"unique-id-01-private-reports"},"Private Reports"),n().createElement(C,{id:"unique-id-01-public-reports"},"Public Reports"),n().createElement(C,{id:"unique-id-01-all-reports"},"All Reports")))},M=n().createElement(A,null),T=[{id:"compact",label:"Compact",element:n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,{compact:!0},n().createElement(C,{checked:!0,id:"unique-id-02-recent",name:"unique-id-compact"},"Recent"),n().createElement(C,{id:"unique-id-02-created-by-me",name:"unique-id-compact"},"Created by Me"),n().createElement(C,{id:"unique-id-02-private-reports",name:"unique-id-compact"},"Private Reports"),n().createElement(C,{id:"unique-id-02-public-reports",name:"unique-id-compact"},"Public Reports"),n().createElement(C,{id:"unique-id-02-all-reports",name:"unique-id-compact"},"All Reports")))},{id:"shade",label:"Shaded Background",element:n().createElement("div",{className:"demo-only",style:{backgroundColor:"#FAFAFB"}},n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,{shaded:!0},n().createElement(C,{checked:!0,id:"unique-id-03-recent",name:"unique-id-shade"},"Recent"),n().createElement(C,{id:"unique-id-03-created-by-me",name:"unique-id-shade"},"Created by Me"),n().createElement(C,{id:"unique-id-03-private-reports",name:"unique-id-shade"},"Private Reports"),n().createElement(C,{id:"unique-id-03-public-reports",name:"unique-id-shade"},"Public Reports"),n().createElement(C,{id:"unique-id-03-all-reports",name:"unique-id-shade"},"All Reports"))))}],k=r.XB.a,q=r.XB.h2,F=r.XB.h3,j=r.XB.h4,B=r.XB.p,L=function(){return(0,a.createElement)(r.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"Navigation represents a list of links that either take the user to another page or parts of the page the user is in."),q({id:"List"},"List"),(0,a.createElement)(i.A,null,(0,s.NO)(I)),(0,a.createElement)(c.A,{type:"a11y",header:"Accessibility Note"},(0,a.createElement)("p",null,"The ",(0,a.createElement)("code",null,"aria-current")," attribute is used when an element within a set (e.g., navigation list items) is styled to indicate the selected or active item. In our use case, the attribute should be placed on the ",(0,a.createElement)("code",null,"slds-nav-vertical__action")," link element. In our example above, we're using the generic ",(0,a.createElement)("code",null,"true")," value, but the attribute will accept a variety of options depending on your use case."),(0,a.createElement)("p",null,"For more information on ",(0,a.createElement)("code",null,"aria-current"),", please visit the ",(0,a.createElement)("a",{href:"https://www.w3.org/TR/wai-aria-1.1/#aria-current"},"W3C specification page"),".")),F({id:"States"},"States"),j({id:"Collapsed"},"Collapsed"),(0,a.createElement)(i.A,null,(0,s.NO)(x,"collapsed")),j({id:"Expanded"},"Expanded"),(0,a.createElement)(i.A,null,(0,s.NO)(x,"expanded")),F({id:"Examples"},"Examples"),j({id:"Compact"},"Compact"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"compact")),j({id:"Items-with-Icons"},"Items with Icons"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"items-with-icons")),j({id:"Items-with-Notifications"},"Items with Notifications"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"items-with-notifications")),j({id:"Shaded-Background"},"Shaded Background"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"shade")),j({id:"Quickfind"},"Quickfind"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"quickfind")),q({id:"Radio-Group"},"Radio Group"),B({},"The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the ",k({href:"/components/vertical-tabs"},"Vertical Tabs")," component."),(0,a.createElement)(i.A,null,(0,s.NO)(M)),F({id:"Examples-2"},"Examples"),j({id:"Compact-2"},"Compact"),(0,a.createElement)(i.A,null,(0,s.NO)(T,"compact")),j({id:"Shaded-Background-2"},"Shaded Background"),(0,a.createElement)(i.A,null,(0,s.NO)(T,"shade")))},D=function(){return(0,r.Qr)(L())}},5206:function(e){e.exports=ReactDOM}},n={};function r(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return a[e](l,l.exports,r),l.exports}r.m=a,r.amdO={},e=[],r.O=function(t,l,a,n){if(!l){var i=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],n=e[d][2];for(var c=!0,s=0;s<l.length;s++)(!1&n||i>=n)&&Object.keys(r.O).every(function(e){return r.O[e](l[s])})?l.splice(s--,1):(c=!1,n<i&&(i=n));if(c){e.splice(d--,1);var o=a();void 0!==o&&(t=o)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,a,n]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var n=Object.create(null);r.r(n);var i={};t=t||[null,l({}),l([]),l(l)];for(var c=2&a&&e;("object"==typeof c||"function"==typeof c)&&!~t.indexOf(c);c=l(c))Object.getOwnPropertyNames(c).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},r.d(n,i),n},r.d=function(e,t){for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=1276,function(){var e={1276:0};r.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,n,i=l[0],c=l[1],s=l[2],o=0;if(i.some(function(t){return 0!==e[t]})){for(a in c)r.o(c,a)&&(r.m[a]=c[a]);if(s)var d=s(r)}for(t&&t(l);o<i.length;o++)n=i[o],r.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return r.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),r.nc=void 0;var i=r.O(void 0,[3540],function(){return r(3741)});i=r.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/vertical-navigation/docs.mdx.js"]=i}();