@uportal/dashboard-carousel

Dashboard Carousel

Demo

https://uportal-project.github.io/uPortal-web-components/en/components/dashboard-carousel/demo

uPortal Demo

uPortal Demo Guide

Installation

# install with npm
npm install @uportal/dashboard-carousel

# install with yarn
yarn add @uportal/dashboard-carousel

install with maven

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>uportal__dashboard-carousel</artifactId>
    <version>{version number goes here}</version>
</dependency>

install with gradle

compile 'org.webjars.npm:uportal__dashboard-carousel:{version number goes here}'

Usage

<!-- this uses the unpkg cdn, this could alternatively use resource server as a cdn -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@uportal/dashboard-carousel"></script>

<dashboard-carousel></dashboard-carousel>

Options

• debug (optional, boolean, default: false): when enabled debug mode skips oauth authentication.
• layout-api-url (optional, string, default: "/uPortal/api/v4-3/dlm/layout.json"): url to layout for carousel to use.
• region-name (optional, string, default: "dashboard"): name of the region in the layout that should be displayed.

Theming

Currently this component supports CSS Variables for overriding button colors. Defining the following variables will change the colors for the component accordingly. They will fall back to the colors described below.

You should define this in your custom stylesheet.

fg = foreground (text) bg = background

:root {
  --dash-carousel-btn-bg-color: #007bff; // Used for background and border
  --dash-carousel-btn-fg-color: #fff; // Default text color
  --dash-carousel-btn-bg-active-color: white; // border remains same as background color
  --dash-carousel-btn-fg-active-color: black; // active text color
}