Tabs

Full Example

config: {
    tabs: {
        'User Profiles': {    // Configure a tab
            // translations for multilingual support
            // This works for all config objects: tabs, fields, actions, ...etc
            // Simply add the translations and pair them up to the language code that is passed to the dashboard in the config object
            translation: {
                'ar-AE':'ملفات تعريف المستخدم'
            },
            // The class name for the tab icon. You can use custom class names (add them to theme.css), or if you include the fontawesome library
            // you can just use the icon classname from fontawesome (Supports fontawesome)
            icon: "far fa-user",
            // A brief description that will appear on top of each tab
            // Can be just a string when multilanguage support is not needed
            // Alternatively, can be an object with language keys as below for multilingual support
            description: {
                'en-US': 'A list of all approved users',
                'ar-AE': 'قائمة بجميع المستخدمين المعتمدين'
            },    
            // Sets the default view mode for this tab: Cards view or List view
            viewMode: 'Cards',    // 'Cards' or 'List'
            // CSS GRID property/value pairs to format the records in Cards view.
            // Below is the default css properties, can be changed to any valid CSS property/value pairs
            recordsGrid:{                
                'grid-template-columns': '1fr 1fr 1fr',
                'gap': '20px',
                'justify-items': 'stretch'                    
            },
            // Pagination. Define how many records per page.
            // Defaults to 12!
            itemsPerPage: 12,
            // This property object configures the settings for the records,
            // including the fields, actions, the grid ...etc
            recordSettings:{
                ...
            }
        }
    }
}

Properties/Methods

viewMode <String>

Sets the default view mode for this tab.

Values

• "Cards" View this tab in Cards Mode

• "List" View this tab in List Mode

description <String> or <Object>

Description text to be displayed on top of the current Tab

Values

• <String> Description text to be displayed on top of the current Tab, in all languages

• <Object>

  An Object containing key/value pairs, with the description for each language. Example:

  description: {
    'en-US': 'A list of all approved users',			
    'ar-AE': 'قائمة بجميع المستخدمين المعتمدين'
  }

icon <String>

Shows an Icon for this Tab to appear above the Tab Name

Values

• <String> Classname of the icon. If you include fontawesome, you can add the classname in this property and the icon will appear formatted appropriatley

recordsGrid <Object>

An Object Literal of CSS GRID properties to arrange the records.

Values

• <Object>

  An Object containing key/value pairs of any valid CSS properties inside a CSS GRID container Default (if ommitted):

  recordsGrid:{				
  	'grid-template-columns': '1fr 1fr 1fr',
  	'gap': '20px',
  	'justify-items': 'stretch'					
  }