[SalesForce] Lightning Design System component for dashed separator line

Is there a Lightning Design Component that will generate a dashed separator line like what you see for the Next Steps and Past Activities sections in the standard Opportunity record page?

(I don't need the More Steps button, I just want the dashed separator line immediately after the section text)

I've looked at the CSS on a typical page and I see classes like slds-section__title-action slds-align-middle slds-truncate but when I try to use these in my custom component, I don't get anything like what I see in the screnshot.

I've searched using various terms like separator, header, dashed, etc but haven't found anything applicable.

Best Answer

I dont know of anything that applies a border other than the class slds-border_* (top, bottom, left, right)

you can specify it to be dotted throught css though:

Example:

<lightning:input class="slds-border_top" .... />

CSS

.THIS.slds-border_top{
    border-top : 1px dotted;
}

or, if you want to add some dots after some text

component:

<div class="dots-here">Something</div>

Style:

.THIS.dots-here:after {
    border-bottom: 1px dotted;
    content: '';
    flex: 1;
}

.THIS.dots-here{
    display: flex;
    width: 300px;
}

But nothing OOTB to my knowledge.

Related Solutions

[SalesForce] Salesforce Lightning Design System Modals

Add <apex:slds /> to your page and wrap your code in a container

<div class="slds-scope">...</div>

Sample code can be:

<apex:page>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <!-- Import the Design System style sheet -->
            <apex:slds />
       </head>
    <body>
        <div class="slds-scope">...</div>
    </body>
   </html>
</apex:page>

Hope this helps you!

[SalesForce] Lightning design system – SVG disappears after rerender

Its a known bug in SFDC Visualforce page .I have used a jquery approach with action function to manually write the DOM .You can use Oncomplete event and custom write the DOM to replace

The Script would look like below

  <script>
        var j$ = jQuery.noConflict();
          function renderSVG(){
            var imageURL = '{!URLFOR($Resource.SLDS0102, 'assets/icons/standard-sprite/svg/symbols.svg#user')}';
            var SVG = j$('<svg/>', {
               class: 'slds-icon slds-icon--large slds-icon-standard-user',
            });

            var SVGUse = j$('<use/>');
            SVGUse.attr('xlink:href',imageURL);
            j$('#Icon').prepend(SVG.append(SVGUse));
            j$('#Icon' ).html(j$('#Icon').html());
          }
        </script>

The complete code is as below Showing an Action Function calling an apex method and then OnComplete Jquery call to render back the SVG .Also note you can write a generic function to handle this if you have multiple ajax calls

<apex:page controller="SVGRerendering" standardStylesheets="false" showHeader="false" id="thepage">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>
        <apex:stylesheet value="{!URLFOR($Resource.SLDS0102, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
         <apex:includeScript value="//code.jquery.com/jquery-2.1.4.min.js" />
    </head>
    <body>
        <apex:form id="frm">
            <apex:outputPanel id="SVGIcon" layout="block">
            <div class="slds" id="Icon">
                <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
                    <use xlink:href="{!URLFOR($Resource.SLDS0102, 'assets/icons/standard-sprite/svg/symbols.svg#user')}" />
                </svg>
                <apex:outputText value="{!helloUser}"></apex:outputText><br/><br/>
                <apex:commandButton value="Rerender Form" styleClass="slds-button slds-button--neutral" reRender="frm" action="{!HelloWorld}" oncomplete="renderSVG();"/>
            </div>
            </apex:outputPanel>
        </apex:form>
        <script>
        var j$ = jQuery.noConflict();
          function renderSVG(){
            var imageURL = '{!URLFOR($Resource.SLDS0102, 'assets/icons/standard-sprite/svg/symbols.svg#user')}';
            var SVG = j$('<svg/>', {
               class: 'slds-icon slds-icon--large slds-icon-standard-user',
            });

            var SVGUse = j$('<use/>');
            SVGUse.attr('xlink:href',imageURL);
            j$('#Icon').prepend(SVG.append(SVGUse));
            j$('#Icon' ).html(j$('#Icon').html());
          }
        </script>
    </body>
</html>

Best Answer

Related Solutions

[SalesForce] Salesforce Lightning Design System Modals

[SalesForce] Lightning design system – SVG disappears after rerender

Related Topic