You can use facets to do this. For example, a simple test.app
:
<aura:application access="GLOBAL">
<aura:attribute name="messages" type="Aura.Component[]" access="GLOBAL"/>
<div aura:id="messages">
{!v.messages}
</div>
<ui:button label="Show Message" press="{!c.showMessage}"/>
</aura:application>
The corresponding testController.js
:
({
showMessage: function(component, event, helper) {
$A.createComponent("ui:outputText",
{value: "Message created at " + Date.now()},
function(cmp) {
component.set("v.messages", [cmp]);
setTimeout(function() {
$A.run(function() {
component.set("v.messages", []);
});
}, 5000)
});
}
})
The facet is an attribute of type Aura.Component[]
that you render in the desired spot using an expression such as {!v.messages}
. When the element is created, set the value of this facet to be an array with one component, the [cmp]
in the code. Set a timeout, etc., then set the value of this facet to be an empty array with []
. Make sure to wrap the calls with $A.run
.
If you use the Chrome or other tools to inspect the DOM, you'll see the component elements appear and disappear.
If this isn't what you're looking for, please provide more details.
I don't think there is an SLDS class specifically that enables scrolling, however an easy way to enable this using standard CSS is to do the following:
<style>
.scrollable {
height: 400px; <!-- Don't need this if it's okay for height to be dynamic -->
overflow-y:auto;
}
</style>
<div class="slds-page-header">
<p class="slds-text-heading--label">Contacts</p>
<h1>My Contacts</h1>
</div>
<div class="scrollable">
<!-- The rest of the page goes here -->
</div>
EDIT: As @techbusinessman wrote in a comment below, there is now a standard utility class for making a div scrollable. The documentation can be found here: https://www.lightningdesignsystem.com/components/utilities/scrollable/#overview
The code would now be as follows:
<div class="slds-page-header">
<p class="slds-text-heading--label">Contacts</p>
<h1>My Contacts</h1>
</div>
<div class="slds-scrollable">
<!-- The rest of the page goes here -->
</div>
Best Answer
I don't believe so - as mentioned here