Element: <oj-c-action-card>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Since:
  • 16.0.0
Module:
  • action-card

Note: This component supersedes the following component: <oj-action-card>. Migration info available at preceding link.

QuickNav

Slots

Attributes

Events

Methods

Other Topics


JET Action

Description: Themeable, WAI-ARIA-compliant element that represents a card.

Action Card provides a styled rectangular area with hover/focus/active state rendering, along with an ojAction event. 


<oj-c-action-card onAction="[[actionHandler]]">
  Sample Text
</oj-c-action-card>

Differences between Cards in JET

There are several different options for creating cards in JET applications.

  • oj-c-action-card: ActionCard fires action events and is supported for use stand alone or in oj-c-card-view. For accessibility reasons nothing interactive (for example links or buttons) can be put in an action card.
  • oj-c-selection-card: SelectionCard is supported for use in oj-c-card-view, with single or multiple selection.
  • oj-panel CSS class: For simple cases with no associated action or selection. Panel is supported for use in standalone or in oj-c-card-view.

Accessibility

A clarification in a11y rules states that any element with role of ActionCard should not have interactive elements inside: https://www.w3.org/TR/html-aria/#allowed-descendants-of-aria-roles


Usage

Signature:

interface CActionCardElement

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

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

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.


Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

Default

The default slot is the content of the card.

Attributes

bg-color :"body"|"neutral-0"|"neutral-10"|"neutral-20"|"neutral-30"|"neutral-170"|"neutral-180"|"neutral-190"|"neutral-200"|"brand-10"|"brand-20"|"brand-30"|"danger-10"|"danger-20"|"danger-30"|"warning-10"|"warning-20"|"warning-30"|"success-10"|"success-20"|"success-30"|"info-10"|"info-20"|"info-30"

Specifies the background color of the Action Card using the supported JET card background design token palette. Higher-numbered neutral tokens, neutral-170 through neutral-200, are the darker neutral values and apply a contrasting color scheme to token-based card content.
Supported Values:
Value Description
body Use the current theme body background color.
neutral-0 Use the neutral-0 palette color.
neutral-10 Use the neutral-10 palette color.
neutral-20 Use the neutral-20 palette color.
neutral-30 Use the neutral-30 palette color.
neutral-170 Use the neutral-170 palette color.
neutral-180 Use the neutral-180 palette color.
neutral-190 Use the neutral-190 palette color.
neutral-200 Use the neutral-200 palette color.
brand-10 Use the brand-10 palette color.
brand-20 Use the brand-20 palette color.
brand-30 Use the brand-30 palette color.
danger-10 Use the danger-10 palette color.
danger-20 Use the danger-20 palette color.
danger-30 Use the danger-30 palette color.
warning-10 Use the warning-10 palette color.
warning-20 Use the warning-20 palette color.
warning-30 Use the warning-30 palette color.
success-10 Use the success-10 palette color.
success-20 Use the success-20 palette color.
success-30 Use the success-30 palette color.
info-10 Use the info-10 palette color.
info-20 Use the info-20 palette color.
info-30 Use the info-30 palette color.
Names
Item Name
Property bgColor
Property change event bgColorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-bg-color-changed

Events

ojAction

Triggered when a card is clicked, whether by keyboard, mouse, or touch events. To meet accessibility requirements, the only supported way to react to the click is to listen for this event.

See Events and Listeners for additional information.

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property string 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 object 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 string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Returns:
Type
void