2

I have created one lightning application which I'm using in my vf page. To use lightning app in vf page I need to extends ltng:outApp but at the same time I also want to use lightning design system. How can I use both at the same time.

Improve this question

2 Answers 2

Reset to default
3

You don't have to do anything, extending ltng:outApp will also get you SLDS, as stated in the documentation:

Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.

Improve this answer
-1


Please go through the code, add the line before commenting lines of the code will resolve your problem

<apex:page id="CommercialFinance" sidebar="false" showHeader="false" standardStylesheets="false">
      <head>
         <title>Commercial Finance</title>
         <apex:includeLightning/> 
    // Help you to have SLDS to your VF page
         <style>
            * {
               margin: 0;
               padding: 0;
            }
         </style>
      </head>
      <body>
      <div id="CommercialFinanceDiv"></div>
      <script>
         $Lightning.use("wizard3:AssetFinanceApp", function(){
            $Lightning.createComponent(
                  "wizard3:CommercialFinance",
                  {},
                  "CommercialFinanceDiv",
                  function (cmp){
                  }
            );
         });
      </script>
      </body>
    </apex:page>
    <aura:application description="CommercialFinanceApp" extends="ltng:outApp"> 
    // extend ltng:outApp in this fashion
    </aura:application>

This might help you out.
Regards,
Akshay

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .