@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 6.06 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,n,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9938:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return O},getElement:function(){return y}});var a=n(1594),r=n.n(a),l=n(5671),i=n(6547),o=n(806),c=n(8342),u=n(2937),s=n(405),d=[{id:"default",label:"Default",element:r().createElement(u.eu,null,r().createElement(s.Ph,{iconClassName:"slds-icon-standard-account",title:"company name",initials:"Ac"}))}],f=[{id:"linked-avatar-initials",label:"Wrapped in a link",element:r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},r().createElement(u.eu,null,r().createElement(s.Ph,{iconClassName:"slds-icon-standard-account",title:"company name",initials:"Ac"})))}],m=l.XB.code,p=l.XB.h2,v=l.XB.h3,b=l.XB.h4,g=l.XB.p,y=function(){return(0,a.createElement)(l.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"An avatar component represents an object or entity"),(0,a.createElement)(i.A,{exampleOnly:!0},(0,o.NO)(u.Ay)),p({id:"About-Avatar"},"About Avatar"),g({},"An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires ",m({},".slds-avatar")," as the base class."),v({id:"Examples"},"Examples"),b({id:"Profile-Icon"},"Profile Icon"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"profile-icon")),b({id:"Group-Icon"},"Group Icon"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"group-icon")),b({id:"Fallback-User-Icon"},"Fallback User Icon"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"fallback-user-icon")),b({id:"Fallback-Entity-Icon"},"Fallback Entity Icon"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"fallback-entity-icon")),b({id:"Fallback-User-Initials"},"Fallback User Initials"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"fallback-user-initials")),b({id:"Fallback-Entity-Initials"},"Fallback Entity Initials"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"fallback-entity-initials")),b({id:"Fallback-User-Inverse"},"Fallback User Inverse"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"fallback-user-initials-inverse")),b({id:"Linked-Avatar"},"Linked Avatar"),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"linked-avatar")),p({id:"Initials"},"Initials"),g({},"If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback."),(0,a.createElement)(i.A,null,(0,o.NO)(d)),v({id:"Examples-2"},"Examples"),b({id:"Linked-Avatar-2"},"Linked Avatar"),(0,a.createElement)(i.A,null,(0,o.NO)(f,"linked-avatar-initials")),p({id:"Layout"},"Layout"),v({id:"Circle"},"Circle"),g({},"Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the ",m({},".slds-avatar_circle")," class. Four additional classes are available for sizing."),(0,a.createElement)(i.A,null,(0,o.NO)(u.K1,"circle")),p({id:"Sizes"},"Sizes"),v({id:"X-Small"},"X-Small"),(0,a.createElement)(i.A,{toggleCode:!1},(0,o.NO)(u.K1,"x-small-image")),v({id:"Small"},"Small"),(0,a.createElement)(i.A,{toggleCode:!1},(0,o.NO)(u.K1,"small-image")),v({id:"Medium"},"Medium"),(0,a.createElement)(i.A,{toggleCode:!1},(0,o.NO)(u.K1,"medium-image")),v({id:"Large"},"Large"),(0,a.createElement)(i.A,{toggleCode:!1},(0,o.NO)(u.K1,"large-image")),p({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,a.createElement)(c.A,{name:"avatar",type:"component"}))},O=function(){return(0,l.Qr)(y())}}},r={};function l(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={id:e,exports:{}};return a[e](n,n.exports,l),n.exports}l.m=a,l.amdO={},e=[],l.O=function(t,n,a,r){if(!n){var i=1/0;for(s=0;s<e.length;s++){n=e[s][0],a=e[s][1],r=e[s][2];for(var o=!0,c=0;c<n.length;c++)(!1&r||i>=r)&&Object.keys(l.O).every(function(e){return l.O[e](n[c])})?n.splice(c--,1):(o=!1,r<i&&(i=r));if(o){e.splice(s--,1);var u=a();void 0!==u&&(t=u)}}return t}r=r||0;for(var s=e.length;s>0&&e[s-1][2]>r;s--)e[s]=e[s-1];e[s]=[n,a,r]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.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 r=Object.create(null);l.r(r);var i={};t=t||[null,n({}),n([]),n(n)];for(var o=2&a&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},l.d(r,i),r},l.d=function(e,t){for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=7928,function(){var e={7928:0};l.O.j=function(t){return 0===e[t]};var t=function(t,n){var a,r,i=n[0],o=n[1],c=n[2],u=0;if(i.some(function(t){return 0!==e[t]})){for(a in o)l.o(o,a)&&(l.m[a]=o[a]);if(c)var s=c(l)}for(t&&t(n);u<i.length;u++)r=i[u],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(s)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),l.nc=void 0;var i=l.O(void 0,[3540],function(){return l(9938)});i=l.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/avatar/docs.mdx.js"]=i}();