Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcCardActionsComponent

A container component for card action items such as buttons or icon buttons. Actions can be positioned at the start, center, or end of the container.

igc-card-actions

start - Renders items at the beginning of the actions area.

  • Renders items in the center of the actions area.

end - Renders items at the end of the actions area.

<igc-card-actions>
  <igc-button slot="start" variant="flat">Like</igc-button>
  <igc-button slot="start" variant="flat">Share</igc-button>
  <igc-icon-button slot="end" name="more_vert"></igc-icon-button>
</igc-card-actions>

Hierarchy

Hierarchy

  • LitElement
    • IgcCardActionsComponent

Other

styles

Other

orientation: ContentOrientation = 'horizontal'

The orientation of the actions layout.

orientation

'horizontal'

styles

styles: CSSResult[] = ...

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>