function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Michael LudwigMichael Ludwig 

slds header component - which attributes and values

Hi,

I have inherited a VF page that uses the slds framework and I am trying to get my head around it.
I am fairly new to visual force, but I understand the logic in the site and the controller.
I did ask the developer the following question:

When using this component for example:

<div class="slds-page-header" role="banner">

Where do I find a reference about all the attributes that can be used in the page header class and what values are allowed ?
In other words, how do I know what values are allowed for the 'role'attribute above and are there any other attributes available for 'role' ?
The slds homepage doesn't seem to provide that information, at least I have not found it.

Many thanks

Michael
Best Answer chosen by Michael Ludwig
Ajay K DubediAjay K Dubedi
Hi Michael,

I got your point. You just want the attribute list but attribute value changes according to the tags or the elements you use. For the class you can have a look at the Component Overview Section.
Search for the 'elements' from the search box you will get all the possible class that can be used below to that particular element page.

For more details please visit to the Lightning Design System site : https://www.lightningdesignsystem.com/components-overview/
I hope this might answer to your question.

Regards,
Ajay

All Answers

Ajay K DubediAjay K Dubedi
Hi Michael,
The below link will help you and try given example of page header.
https://www.lightningdesignsystem.com/platforms/visualforce/

Example : 
<apex:page>
 <apex:slds>
  <div class="slds-page-header">
   <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
     <div class="slds-media slds-no-space slds-grow">
      <div class="slds-media__body">
       <p class="slds-text-title--caps slds-line-height--reset">Record Type</p>
       <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Record Title</h1>
      </div>
     </div>
    </div>
   </div>
  </div>
 </apex:slds>
</apex:page>
For more detail please visit to the Lightning Design System site : https://www.lightningdesignsystem.com/
Hope this will help you .

Regards,
Ajay
Michael LudwigMichael Ludwig
Hi Ajay,

thanks for your reply. I am still not quite clear if that answers my question.

<div class="slds-page-header" role="banner">

When I look at the above div, my questios are:

- what other values for the attribute 'roel' do exist and where do I find a reference for all of them ? On the Lightning Design page I find other values, for example role="grid" for the slds table class, role="alert" for the slds-notify class. Where do I find all possible values for the attribute 'role' ?
- when looking at any given class, where do I find a reference about all the attributes that can be used for that class ? How would I know that the 'role' attribute can be applied to 'slds-page-header' but maybe not to a different class ?

Hope that makes sense.

Thanks

Michael
Ajay K DubediAjay K Dubedi
Hi Michael,

I got your point. You just want the attribute list but attribute value changes according to the tags or the elements you use. For the class you can have a look at the Component Overview Section.
Search for the 'elements' from the search box you will get all the possible class that can be used below to that particular element page.

For more details please visit to the Lightning Design System site : https://www.lightningdesignsystem.com/components-overview/
I hope this might answer to your question.

Regards,
Ajay
This was selected as the best answer
Michael LudwigMichael Ludwig
Hi Ajay,

Thanks again for your reply. So, if I choose the 'header' component for example and look at the definition for the 'Base' header, the definition would show me all possibilities, no need to search further.
Thanks, that answers my question :-)

Michael
Ajay K DubediAjay K Dubedi
Hi Michael,
It's my pleasure to help you! Please mark my answer as a best answer, if it is really helpful.

Regards,
Ajay
Orchay NaehOrchay Naeh
well a bit late to answer but since i was looking for the refference myself, it might help others whom look for explanation  
the role attribute is taken from html ( you can use html and apex in vf pages )
please reffer to:
https://www.w3schools.com/html/html_attributes.asp

best regards
Naeh Orchay
Orchay NaehOrchay Naeh
http://w3c.github.io/html/dom.html#allowed-aria-roles-states-and-properties