0

This question already has an answer here:

Just getting my feet wet in lightning.

I am trying to render the following lightning app in Salesforce classic. However the form displayed is returned only in basic HTML (without the default lightning styling).

Is it required that lightning be enabled to render lightning components? I would think not since the lightning components can be rendered on visualforce pages. Do I need to include any additional markup to render correctly?

appName.app:

<aura:application>
<c:myFirstComponent/>
</aura:application>

myfirstComponent.cmp:

<aura:component implements="force:appHostable">

    <div class="row">
        <h2 class="header">Basic Input Text</h2>
        <lightning:input name="input1" label="Enter some text" />
        <lightning:input name="input2" label="Text field with predefined value" value="initial value"/>
        <lightning:input name="input3" label="Text field with a placeholder" placeholder="type here..."/>
    </div>

    <div class="row">
        <h2 class="header">Advanced Input Text</h2>
        <lightning:input name="input4" readonly="true" value="initial value" label="Read-only text field with a predefined value" />
        <lightning:input name="input5" disabled="true" value="initial value" label="Disabled text field with a predefined value" />
        <lightning:input name="input6" required="true" value="0123456789" label="Required text field with a maximum length of 10" maxlength="10" />
        <lightning:input name="input7" label="Text field that handles the onfocus and onblur events" onfocus="{! c.handleFocus }" onblur="{! c.handleBlur }" />
    </div>

    <aura:attribute name="firstName" type="String"/>
    <div class="row">
        <h2 class="header">Live Input Text</h2>
        <lightning:input name="input8" value="{! v.firstName }" placeholder="type your first name..." label="Text field with attribute binding" />
        <p>
            FirstName: {! v.firstName }
        </p>
    </div>
</aura:component>

What is being displayed on preview:

enter image description here

marked as duplicate by sfdcfox lightning-components Oct 31 '18 at 19:10

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

3

Unlike in the flexi pages(Lightning app builder pages) when you use components in an app, Your app needs to extend force:slds.

Using the Salesforce Lightning Design System in Apps

The Salesforce Lightning Design System (SLDS) provides a look and feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom stand-alone Lightning applications a UI that is consistent with Salesforce, without having to reverse-engineer our styles.

Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. This method is the easiest way to stay up to date and consistent with Lightning Design System enhancements

<aura:application extends="force:slds">
    <!-- customize your application here -->
</aura:application>

Not the answer you're looking for? Browse other questions tagged or ask your own question.