3

Is there a way to preview how a component will react if I add a new slds class to it? I am new to Lightning component development, doing my development in VS Code and using scratch orgs.

Currently I spend a lot of time making changes to a component, doing push source to default org, refreshing, and checking how something reacts if I add "slds-p-around--small" for example.

Is there a way to see what a class consisting of? Or a way to preview before I push to scratch org?

Improve this question
2
  • Are you working on Lightning Web Components?
    – Jayant Das
    Apr 17, 2019 at 17:15
  • No, still in aura. @Jayant
    – Art S
    Apr 17, 2019 at 17:16

2 Answers 2

Reset to default
2

There's no direct way to preview the changes in your aura components unless you have it in your Org. If you were using Lightning Web Components, you could though have utilized Lightning Web Components Playground.

But for your use case where you are working with aura components, you can utilize Developer Console. Let's say you want to test out a SLDS class, you can say create and utilize a test application (.app) as you will get a preview option on Developer Console. Then you can make any changes on the component, CSS, and preview it right from the Developer Console. Once you have confirmed the behavior, you can then make changes on your original component and push your code to the Org.

Sample Preview option in Developer Console for a test myApp.app.

enter image description here

Improve this answer
2
  • Yeah that is what I have been doing: <aura:application extends="force:slds" description="gos_addBulkCsvTestHarness"> <div class="body"> <c:gos_addBulkCsv/> </div> </aura:application > But since I am working from IDE it is a lot of back and forth
    – Art S
    Apr 17, 2019 at 17:38
  • You are on the right track then. That's the only way as far as I can tell you.
    – Jayant Das
    Apr 17, 2019 at 17:39
0

I would normally do this in my browser's document inspector (after deploying an initial version of a component). Inspect the element, then double-click into it in the inspector DOM view to add classes. If the class attribute isn't present, right-click and "add attribute".

Once you've typed or pasted the class name, click out of the element to activate. Any available CSS class will take effect on the element. Experiment until the layout is as desired, then transfer all changes to your component view markup and redeploy.

enter image description here

Of course, this will not help with classes intended to trigger dynamic modification via JavaScript.

Improve this answer

You must log in to answer this question.

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