Element: <oj-c-skeleton>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Since:
  • 18.0.0
Module:
  • skeleton

QuickNav

Attributes

Methods


JET Skeleton

Description: A skeleton gives a visual representation that content is loading.

The oj-c-skeleton is a component that may be placed within the skeletonTemplate of oj-c-card-view. 


<oj-c-card-view
   id="cardview"
         class="demo-card-view"
         aria-label="cardview with custom skeleton"
         data=[[dataProvider]]>
     <template slot="skeletonTemplate" data-oj-as="context">
       <div class="oj-panel oj-sm-padding-0 
        :style="[[context.loadingStatus === 'initial' ? { width: '300px', height: '240px' } : { width: context.width, height: context.height } ]]">
           <oj-c-skeleton height ="100%">
           </oj-c-skeleton>
       </div>
     </template>
     <template data-oj-as="item" slot="itemTemplate">
       <div class="oj-panel">
         <demo-profile-card-layout
           name="[[item.data.name]]"
           initials="[[item.data.initials]]"
         >
         </demo-profile-card-layout>
       </div>
     </template>
</oj-c-card-view>


Usage

Signature:

interface CSkeletonElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CSkeletonElement } from "oj-c/skeleton";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/skeleton";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Attributes

border-radius :(number|string)

Specifies the border radius of the skeleton
Names
Item Name
Property borderRadius
Property change event borderRadiusChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-border-radius-changed

height* :(number|string)

Specifies the height of the skeleton
Names
Item Name
Property height
Property change event heightChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-height*-changed

width :(number|string)

Specifies the width of the skeleton
Names
Item Name
Property width
Property change event widthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-width-changed

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void