Skip to content

Latest commit

 

History

History
109 lines (73 loc) · 3.16 KB

README.md

File metadata and controls

109 lines (73 loc) · 3.16 KB
Raw

notification-banner

NPM Version Maven Central Build Status

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Attributes

<notification-banner> takes the following attributes:

notification-api-url

Url to connect notification-endpoint. Defaults to /NotificationPortlet/api/v2/notifications.

<notification-banner
    notification-api-url="/NotificationPortlet/api/v2/notifications"
></notification-banner>

user-info-api-url

Url to connect to oidc. The default for this value is /uPortal/api/v5-1/userinfo.

<notification-banner user-info-api-url="/uPortal/api/v5-1/userinfo"></notification-banner>

notificationVariant

Bootstrap variant of 'alert' component to style notification items. Default is 'info'. Can be set to 'custom' to add 'alert-custom' class which will allow styling according to theming section below.

<notification-banner notificationVariant="info"></notification-banner>

notificationIcon

Icon displayed next to heading. Supports "info" and "exclamation-triangle" from Font Awesome.

<notification-banner notificationIcon="info"></notification-banner>

notificationIconSize

Icon size for Font Awesome icon displayed next to heading.

<notification-banner notificationIconSize="2x"></notification-banner>

filter

Query string parameter to append to api call to retrieve notifications.

<notification-banner notificationIconSize="2x"></notification-banner>

debug

Skips oidc call for api token.

<notification-banner debug></notification-banner>

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.

:root {
    --notif-banner-heading-text-color: white; /* text color of notification item heading */
    --notif-banner-body-text-color: white; /* text color of notification item body  */
    --notif-banner-bg-color: darkred; /* background color of notification items */
    --notif-banner-border-color: darkred; /* border color of notification items */
    --notif-banner-border-radius: 0; /* border radius of notification items */
    --notif-banner-item-margin: 0 0 1px 0; /* margin between notification items */
    --notif-banner-container-margin: 0; /* margin around notification item list */
}