Realogy Shared Components
该库包含以下可包含在 Realogy 产品中的
Changelog
组件
Installation
npm install @abt-desk/rsc
Integrating into a project
Using webpack (option A)
:库到你的主文件。
import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";
Using embedded script (option B)
复制公共目录下的 lib 文件夹。
<script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
<script type="text/javascript" src="public/rsc/lib/index.js"></script>
<link rel="stylesheet" href="public/rsc/lib/styles.css">
Usage
将任何或所有组件作为常规 html 标记包括在内,它们在逻辑上位于您的 HTML 结构中。 例如,您可以在正文顶部附近包含标头:
<rsc-header></rsc-header>
Usage to display any additional content
将组件作为常规 html 标记包含在您想要显示的任何其他内容中,如下所示,例如:
(由消费应用程序传递的附加内容可能是也可能不是可选的)
示例:
<rsc-advanced-footer>
<span>Licensed under CC BY 4.0.<span/>
</rsc-advanced-footer>
重要提示:有必要将您的主要内容封装到具有特定类的包装器中,并将其作为 传递给标头组件main-class
,它使菜单在移动视图端口上正常工作。
React Example
import React, { Component } from 'react';
import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";
import './App.css';
class App extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
const rscClient = window.__RSC__;
rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
}
render() {
return (
<div className="App">
<rsc-header
app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
brand-key="85440"
username="Sergey"
main-class="main"
user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
okta-id="00uhcgfrmyEIAef7R0h7"
service-url="https://general.url"
apps-service-url="https://applications.url"
avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div className="main">
<h1>Sample React App</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<rsc-footer></rsc-footer>
</div>
);
}
}
export default App;
Angular Example
Import the css on the main style file of angular
src/app/styles.scss
。
@import '@abt-desk/rsc/lib/styles.css';
Import the polyfills on the polyfills file of angular
src/app/polyfills.ts
。
import '@abt-desk/rsc/lib/polyfills';
Add the assets in angular json
"assets": [
...
{
"input": "./node_modules/@abt-desk/rsc/lib/assets/rsc-icons",
"glob": "**/*",
"output": "/assets/rsc-icons/"
}
],
Enable custom elements on your angular module adding the CUSTOM_ELEMENTS_SCHEMA
to the schemas
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
Import the components in the main file
import { Component, OnInit, AfterViewInit, AfterViewChecked, NgZone } from '@angular/core';
import '@abt-desk/rsc';
function _window(): any {
return window;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
constructor(private ngZone: NgZone) {
}
title = 'angular-integration-test';
public mounted = false;
public isSetMenu = false;
ngOnInit() {
this.ngZone.run(() => this.mounted = true);
}
ngAfterViewChecked() {
const rscClient = _window().__RSC__;
if (rscClient && !this.isSetMenu) {
rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
this.isSetMenu = true;
}
}
}
Template
<rsc-header *ngIf="mounted"
app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
brand-key="85440"
username="Sergey"
main-class="main"
user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
okta-id="00uhcgfrmyEIAef7R0h7"
service-url="https://general.url"
apps-service-url="https://applications.url"
avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div class="main">
<h1>Sample Angular App</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<rsc-footer *ngIf="mounted"></rsc-footer>
注意:确保在安装 Angular 组件后安装页眉和页脚。 注意已安装的变量,然后客户端库将可用。
Plain Web Page Example
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample</title>
<base href="/">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
<script type="text/javascript" src="public/rsc/lib/index.js"></script>
<link rel="stylesheet" href="public/rsc/lib/styles.css">
</head>
<body>
<rsc-header
app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
brand-key="85440"
username="Sergey"
user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
okta-id="00uhcgfrmyEIAef7R0h7"
service-url="https://general.url"
apps-service-url="https://applications.url"
avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div className="main">
<h1>Sample Plain Web Page</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<rsc-footer></rsc-footer>
<rsc-speed-dial></rsc-speed-dial>
<script>
var rscClient = window.__RSC__;
rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
</script>
</body>
</html>
Client library
暴露库后,就有了与组件交互的附加功能。 按如下方式获取 rscService:
const rscClient = window.__RSC__;
在 rsc 准备就绪后发出“rscServiceInit”事件。
Theming
可以通过两种方式全局添加主题
- By adding a brand key using rsc-client API
setGlobalTheme
(recommended method).
setGlobalTheme |
takes brand key as a parameter |
parameters |
brandKey: string |
rscClient.setGlobalTheme('<brandKey>');
- By adding a brand key to the body element as shown below
<body data-rsc-brand-key="<brand-key>">
...application template
</body>
选择器:
标题由三个主要功能组成:
- Waffle Menu
- Notifications
- Profile Menu
Waffle Menu 是一组可用的应用程序用户,因此他们可以更轻松地访问其产品套件中的不同工具,无论他们当前使用的是哪种工具。 应用程序可以按类别分组,另外一组包括当前用户最近访问的应用程序。
通知是适用于应用程序上下文的应用程序中可用的产品和公司特定通知,而不是电子邮件或推送通知等替代方法。 它们包括未读、已读和存档状态 - 以及所有已收到通知的索引以供将来参考。
配置文件菜单旨在包含所有与用户相关的链接和操作,这些链接和操作不适用于其他形式的导航,例如树结构。
这可能包括注销应用程序的能力,链接以查看或编辑个人资料,或编辑用户的应用程序特定设置和首选项。
标头组件接收以下属性:
Attribute |
Description |
app-key (required) |
Key of the application |
brand-key |
Key of the brand, if not added default brand will be set |
username |
Username that appears on the header and profile menu |
user-photo |
User photo that appears on the header and profile menu |
main-class |
Body's class name to show and hide body when needed |
okta-id |
Okta Id to retrieve the photo to display on the header |
service-url |
RSC service url (default: https://rsc.realogy.com) |
avatar-service-url |
Avatar service url (default: https://avatar.mycbdesk.com) |
apps-service-url |
Application/waffle service url (default: https://backend.mycbdesk.com) |
full-width-layout |
Header/Footer full screen width: true or false (default) |
header-size-update |
To increase the header size along with components in it: true or false (default) |
profile-menu |
profile menu appears on the header and turn off legacy hamburger menu: true or false (default) |
示例:
<rsc-header
app-key="6240dbdc-0758-48f8-be64-2d87c73a741e"
brand-key="95495"
username="Sergey"
user-photo="https://image.sergey"
service-url="https://general.url"
apps-service-url="https://applications.url"
main-class="main"
okta-id="00uhcgfrmyEIAef7R0h7"
avatar-service-url="https://dev-avatar.mycbdesk.com"
/>
// Here you can add you custom component
<my-custom-component></my-custom-component>
</rsc-header>
标头组件接收以下方法:
Set Okta Id
setOktaId |
takes okta id as the parameter and sets oktaId in rsc |
parameters |
url: string |
Set Access Token
setAccessToken |
sets oktaId in rsc to retrieve apps |
parameters |
token: string - access token |
Set Help Docs Url
setHelpDocsUrl |
URL to help documentation, if provided help button will appear in the header. |
parameters |
url: string - url for help doc |
Set User
setUser |
set user information |
parameters |
user: User - object containing details of the user |
Set Username
setUsername |
sets a username |
parameters |
username: string |
Set User First Name
setUserFirstName |
set a user first name |
parameters |
userFirstName: string |
Set User Photo
setUserPhoto |
set a user photo by url (e.g. https://image.sergey), set boolean to show or hide the photo on the user menu |
parameters |
userPhoto: string showProfileInUserMenu: boolean |
showProfileInUserMenu |
set boolean to show or hide the photo on the user menu |
parameters |
showProfileInUserMenu: boolean |
Show User Name In Topnav
showUserNameInTopnav |
set boolean to show or hide the first username on the topnav |
parameters |
showUserNameInTopnav: boolean |
Show Caret Down Icon In Topnav
showCaretDownIconInTopnav |
set boolean to show or hide the caret indicator in header near the username in Topnav |
parameters |
showCaretDownIconInTopnav: boolean |
Show Beta Indicator
showBetaIndicator |
set boolean to show or hide the "beta" indicator in header |
parameters |
showBetaIndicator: boolean |
showWaffleMenu |
set boolean to show or hide the "waffleMenu" indicator in header - default value is true. |
parameters |
showWaffleMenu: boolean |
setHomeButtonCallback |
set a home button callback function, which will be called, when a user clicks on the header logo/app name. |
parameters |
callback: function |
setMenuItem |
set additional item to the profile menu |
parameters |
menuItem: menu |
removeMenuItem |
removes an specific menu item by name |
parameters |
name: string |
setMenu |
An array of items to set the menu. |
parameters |
menuItems: Array\<menu> |
property |
type |
required |
description |
name |
string |
|
link text |
url |
string |
|
target url |
icon |
string |
|
fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons) |
onTab |
boolean |
|
set true to open in a new tab, default false |
callback |
function |
|
target callback function (optional, if not provided url will be used) |
weight |
int |
|
menu items are sorted in ascending order. (default: 0) |
showTooltip |
boolean |
|
to show the material tooltip. (default: false) |
tooltipText |
string |
|
content to be shown in the tooltip |
tooltipClass |
string |
|
custom class to be added in tooltip, if needed. |
tooltipPosition |
string |
|
set position of tooltip. (default: below) |
User
property |
type |
required |
description |
username |
string |
|
set username |
userPhoto |
string |
|
set a user photo by url (e.g. https://image.sergey) |
oktaId |
string |
|
set oktaId |
Speed Dial
选择器:
Overview of Speed Dial
快速拨号(或称为to 作为浮动操作按钮,或 FAB)将在您有一组操作要持续提供给用户时使用。
快速拨号显示为触发浮动操作按钮,固定在屏幕右下方。 滚动时它将跟随用户。 单击时,将出现一个叠加层及其组成的子操作。
每个子操作都应与更广泛的概念相关。 例如,表示为加号的附加操作可能包含添加列表、联系人或文档的能力。
快速拨号不应包含超过 6 个子操作。
将组件作为常规 html 标记包括在内,并添加下面提到的任何属性以修改组件。
要用自定义图像或内容替换默认图标,请在 rsc-speed-dial 标签内添加内容,如下所示。
如果使用侧边导航,则将快速拨号元素放在侧边导航元素之外。
<!-- Add custom content -->
<rsc-sidenav></rsc-sidenav>
<rsc-speed-dial>
<img src="path/to/img"></img>
</rsc-speed-dial>
可以使用下面提到的方法设置此组件的选项
主按钮颜色可以通过覆盖“fab”来更改-toggler' 类如下所示:
.rsc-speed-dial .fab-toggler{
background-color: <brand color>;
}
APIs of Speed Dial
Attributes of Speed Dial
Attribute |
Description |
fab-icon (optional) |
font awesome class name, default: support fab icon will be displayed. |
brand-key (optional) |
a theme is applied on the component based on the Brand key, overrides the global theme |
mat-color (optional) |
sets the theme palette, default: accent |
示例:
<!-- Font awesome icon override -->
<rsc-speed-dial fab-icon='far fa-align-left'>
</rsc-speed-dial>
Methods for Speed Dial
Set a single speed dial
| <代码>设置快速拨号选项 |
:------------------------------------------------ ---------------------------------------------- ---------------------------------------------- ---------------------------------- |
| 此方法用于单独设置快速拨号选项 |
| 参数 |
| 选项:speedDialOption - 包含选项详细信息的对象 |
示例:
// without callback
rscClient.setSpeedDialOption({
name: 'Leave Feedback',
icon: 'fal fa-comment-exclamation',
weight: 2,
url: 'https://www.mycbdesk.com/feedback',
target: '_blank',
});
// with callback
rscClient.setSpeedDialOption({
name: 'See Help Articles & FAQs',
icon: 'fal fa-question-circle',
callback: function(option) {window.open('https://www.mycbdesk.com/help-center', '_blank')},
});
Remove an option
removeSpeedDialOption |
removes one speed dial option based on the name |
parameters |
name: string - name of the option |
示例:
rscClient.removeSpeedDialOption('Leave Feedback');
Set multiple speed dial options
setSpeedDial |
this method adds the speed dial options passed to the method, all previous options will be replaced |
parameters |
speedDialOptions: Array\<speedDialOption> - collection of speed dial options |
示例:
rscClient.setSpeedDial([
{
name: 'Leave Feedback',
icon: 'far fa-align-left',
weight: 2,
url: 'https://www.mycbdesk.com/feedback',
target: '_blank',
},
{
name: 'See Help Articles & FAQs',
icon: 'fal fa-question-circle',
url: 'https://www.mycbdesk.com/help-center',
}
]);
Speed Dial Interfaces
Speed Dial Option
property |
type |
required |
description |
name |
string |
yes |
option name |
url |
string |
no |
target url |
icon |
string |
yes |
font-awesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons) |
weight |
int |
no |
options are sorted in ascending order (lowest weight is displayed at the top, default: 0) |
target |
string |
no |
sets target value, (default: '_blank)' |
callback |
function |
no |
an optional property, the call back function is called every time an option is clicked |
Side Nav
选择器:
Overview for Side Nav
SideNav 可用于内容以树结构组织的应用程序。 对于此组件,这应仅限于内容层次结构包含 2-3 级导航的应用程序。 更集中的面向任务的应用程序是不合适的,但是内容繁重的应用程序(例如 Intranet)应该能够利用该组件以与整个组织中的其他产品一致的方式快速组织内容。
实施:
将应用程序的主要内容放在侧边导航元素内。 理想情况下,header 组件将放置在侧边导航元素上方,偏移高度等于 header 的高度。
根据设备类型或页面要求设置 sidenav 配置,如下所示。
如果您想让桌面用户方便地折叠和展开 sidenav 以提供更多内容空间,请确保将 enableStaggeredNav 设置为 true。
如果正在使用快速拨号,则将快速拨号元素放在侧边导航元素之外。
示例:
<header></header>
<rsc-side-nav offset-height="45px">
<main><main>
</rsc-side-nav>
<rsc-speed-dial></rsc-speed-dial>
对于 Angular 应用程序,在 rsc-sidenav 元素上添加“已安装”标志。
在此处检查'mounted'标志实现
<rsc-side-nav offset-height="45px" *ngIf="mounted === true">
<!-- main content -->
</rsc-sidenav>
要在导航项上设置活动状态,导航项必须有一个URL,并且无论何时路由发生变化,调用setCurrentUrl
方法将当前路由推送到rsc。 仅当导航项 URL 和当前 URL 匹配时才会设置活动状态。
可以通过调用 setSidenavState
方法来控制其他侧导航状态。
APIs for Side Nav
Attributes of Side Nav
Attribute |
Description |
offset-height (optional) |
the height of the side nav is calculated by subtracting the offset height from 100vh |
示例:
<rsc-side-nav offset-height="45px"></rsc-side-nav>
Methods for Side Nav
Update side nav state
setSidenavState |
updates the state of the side nav, parameters can be pushed individually |
parameters |
sidenavState: SidenavState - contains properties that change the state of the side nav |
示例:
rscClient.setSidenavState({
open: true,
});
// Example config for mobile/touch devices
rscClient.setSidenavState({
enableCache: false,
enableStaggeredNav: false,
state: 'closed',
hasBackdrop: true,
});
// Example config for desktop devices
rscClient.setSidenavState({
enableCache: true,
enableStaggeredNav: true,
state: 'closed',
hasBackdrop: false,
});
Add a nav item
| 设置SidenavItem
|
:------------------------------------------------ ---------------------------------------------- ---------------------------------------------- ---------------------------------- |
| 此方法用于添加单个导航项|
| 参数 |
| sidenavItem: SidenavItem - 包含侧边导航项详细信息的对象 |
例子:
// without callback
rscClient.setSidenavItem({
icon: 'fal fa-book',
label: 'Education',
showAnchorTag: true,
url: '/test',
openInNewTab: boolean,
childItems: [
{
label: 'cbcdesk',
showAnchorTag: true,
url: 'https://cbcdesk.com/',
openInNewTab: false,
}
],
});
// with callback
rscClient.setSidenavItem(
{
icon: 'fal fa-book',
label: 'Education',
url: 'https://www.mycbdesk.com/help-center',
callback: function(option) {window.open('https://www.mycbdesk.com/help-center', '_blank')},
childItems: [
{
label: 'cbcdesk',
showAnchorTag: true,
url: 'https://cbcdesk.com/',
openInNewTab: false,
}
],
};
Remove a navigation item
removeSidenavItem |
removes one navigation item based on the name, applicable for the first level (removes all child items) |
parameters |
label: string - label of the navigation item |
例子:
rscClient.removeSidenavItem('Education');
Set multiple sidenav items
setSidenav |
this method adds the navigation items passed to the method, all previous items will be replaced |
parameters |
sidenavItems: Array\<SidenavItem> - collection of navigation items |
例子:
rscClient.setSidenav([
{
// First level
icon: 'fal fa-home',
label: 'Desk',
url: '/',
callback: () => { /* Do something when item is clicked/touched */ },
childItems: [
{
// Second level
label: 'level2',
url: '/level2',
callback: () => { /* Do something when item is clicked/touched */ },
childItems: [
{
// Tertiary level
label: 'mycbdesk',
showAnchorTag: true,
url: 'https://mycbdesk.com/',
openInNewTab: true,
childItems: [],
}
],
},
{
// Second level
label: 'level21',
url: '/level21',
callback: () => { /* Do something when item is clicked/touched */ },
// No tertiary level
childItems: [],
}
],
},
{
// First level
icon: 'fal fa-book',
label: 'Education',
url: '/education',
callback: () => { /* Do something when item is clicked/touched */ },
// No second level
childItems: [],
}
])
Update current url
setCurrentUrl |
updates the current url of the parent application |
parameters |
currentUrl: string |
例子:
// full route
rscClient.setCurrentUrl('mycbdesk.com');
// partial route
rscClient.setCurrentUrl('/company');
Events for Side Nav
Sidenav closed
rscSidenavClosed |
emitted when the sidenav is closed |
例子:
const sidenavEl = document.getElementsByTagName('rsc-side-nav')[0];
sidenavEl.addEventListener('rscSidenavClosed', () => {
// Execute code after side navigation is closed.
});
Side Nav Interfaces
Sidenav State
property |
type |
required |
description |
state |
string |
no |
available values: 'closed', 'open', if 'enableStaggeredNav' is true then the close state will display the navigation icons, default: 'closed' |
hasBackdrop |
boolean |
no |
if true adds a overlay over the content when the nav bar is open |
collapseAll |
boolean |
no |
collapses all the nav items |
enableStaggeredNav |
boolean |
no |
true will enable the staggered side nav, default: true |
offsetHeight |
string |
no |
sets the height of the container where the side nav and the content is rendered, overrides the value passed as the attribute 'offset-height' |
enableCache |
boolean |
no |
this flag allows the states to persist on the browser, only applicable for 'closed' state if enableStaggeredNav is enabled and 'open' state, default: true |
Sidenav Item
property |
type |
required |
description |
label |
string |
yes |
the name displayed on the side nav |
icon |
string |
no |
the icon displayed beside the label, only applicable for the 1st level, fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons) |
showAnchorTag |
boolean |
no |
if true an anchor tag is added to the DOM with url as the href (default is false) |
url |
string |
no |
used as href if anchor tag is enabled and used to set the active state |
openInNewTab |
boolean |
no |
if true adds target='_blank' attribute to the anchor tag (default is false) |
callback |
function |
no |
executes custom code when option is clicked/touched |
panelState |
string |
no |
determines if the nav item is expanded or collapsed, possible values 'expanded' and 'collapsed' (default is collapsed) |
childItems |
Array\ |
no |
contains child nav items, applicable for level one and two |
isActive |
boolean |
no |
sets the active class on the nav item, set o true when the current url and nav item url is same |
| 全部折叠 | 布尔 | 没有 | 折叠所有导航项目 |
选择器:
页脚组件应包括标准元素,例如法律信息、隐私政策链接、站点地图、使用条款以及公司品牌和社会媒体链接(以图标表示)。
将组件作为常规 html 标记包含在您想要显示的任何其他内容中,如下所示,示例:
(消费应用程序传递的附加内容是可选
的)高级页脚组件接收以下属性:
Attribute |
Description |
hide-help-desk-resources |
If true it will hide the help desk resources in advanced footer |
<rsc-footer *ngIf="mounted">
<span>It is licensed under CC BY 4.0.</span>
</rsc-footer>
or
<rsc-advanced-footer>
<span>It is licensed under CC BY 4.0.</span>
</rsc-advanced-footer>
注意:页脚组件需要安装标题组件
Constants
Brand keys
Brand |
Key |
Coldwellbanker |
cb |
Coldwellbanker commercial |
cbc |
Realogy products |
rp |
Realogy |
rlgy |
Century 21 |
c21 |
Better Homes and Gardens |
bhg |
ERA Real Estate |
era |
ZIP Realty |
zip |
Sotheby's International Realty |
sir |
Corcoran |
cor |
Theme palettes
Palettes |
primary, accent and warn |
Steps Required for Development
Run Dev Server
在端口 4000 上运行开发服务器
npm start
Run Tests
npm tests
Build
构建脚本是将生成lib文件夹。
npm run build
npm version patch
npm publish
此项目是使用 Angular CLI 1.7.4 版生成的。
Realogy Shared Components
This library contains the following components that can be included in Realogy products:
Changelog
We'll keep track of each release in the CHANGELOG.md
Installation
npm install @abt-desk/rsc
Integrating into a project
Using webpack (option A)
Working with webpack, you can import the library into your main file.
import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";
Using embedded script (option B)
Copy the lib folder under your public directory.
<script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
<script type="text/javascript" src="public/rsc/lib/index.js"></script>
<link rel="stylesheet" href="public/rsc/lib/styles.css">
Usage
Include any or all of the components as a regular html tag where they'd logically reside within your HTML structure. For example, you might include the header near the top of the body:
<rsc-header></rsc-header>
Usage to display any additional content
Include the components as a regular html tag with any additional content you wanted to display as below, example:
(The additional content which is passed by a consuming application may or may not be optional)
Example:
<rsc-advanced-footer>
<span>Licensed under CC BY 4.0.<span/>
</rsc-advanced-footer>
Important: It's necessary to enclose your main content into a wrapper with an specific class and pass it to the header component as main-class
, It makes the menus work correctly on mobile view ports.
React Example
import React, { Component } from 'react';
import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";
import './App.css';
class App extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
const rscClient = window.__RSC__;
rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
}
render() {
return (
<div className="App">
<rsc-header
app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
brand-key="85440"
username="Sergey"
main-class="main"
user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
okta-id="00uhcgfrmyEIAef7R0h7"
service-url="https://general.url"
apps-service-url="https://applications.url"
avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div className="main">
<h1>Sample React App</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<rsc-footer></rsc-footer>
</div>
);
}
}
export default App;
Angular Example
Import the css on the main style file of angular
src/app/styles.scss
.
@import '@abt-desk/rsc/lib/styles.css';
Import the polyfills on the polyfills file of angular
src/app/polyfills.ts
.
import '@abt-desk/rsc/lib/polyfills';
Add the assets in angular json
"assets": [
...
{
"input": "./node_modules/@abt-desk/rsc/lib/assets/rsc-icons",
"glob": "**/*",
"output": "/assets/rsc-icons/"
}
],
Enable custom elements on your angular module adding the CUSTOM_ELEMENTS_SCHEMA
to the schemas
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
Import the components in the main file
import { Component, OnInit, AfterViewInit, AfterViewChecked, NgZone } from '@angular/core';
import '@abt-desk/rsc';
function _window(): any {
return window;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
constructor(private ngZone: NgZone) {
}
title = 'angular-integration-test';
public mounted = false;
public isSetMenu = false;
ngOnInit() {
this.ngZone.run(() => this.mounted = true);
}
ngAfterViewChecked() {
const rscClient = _window().__RSC__;
if (rscClient && !this.isSetMenu) {
rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
this.isSetMenu = true;
}
}
}
Template
<rsc-header *ngIf="mounted"
app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
brand-key="85440"
username="Sergey"
main-class="main"
user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
okta-id="00uhcgfrmyEIAef7R0h7"
service-url="https://general.url"
apps-service-url="https://applications.url"
avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div class="main">
<h1>Sample Angular App</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<rsc-footer *ngIf="mounted"></rsc-footer>
Note: Ensure to mount the header and footer once your Angular component was mounted. Notice the mounted variable, then the client library will be available.
Plain Web Page Example
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample</title>
<base href="/">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
<script type="text/javascript" src="public/rsc/lib/index.js"></script>
<link rel="stylesheet" href="public/rsc/lib/styles.css">
</head>
<body>
<rsc-header
app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
brand-key="85440"
username="Sergey"
user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
okta-id="00uhcgfrmyEIAef7R0h7"
service-url="https://general.url"
apps-service-url="https://applications.url"
avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div className="main">
<h1>Sample Plain Web Page</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<rsc-footer></rsc-footer>
<rsc-speed-dial></rsc-speed-dial>
<script>
var rscClient = window.__RSC__;
rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
</script>
</body>
</html>
Client library
With the library exposed, there is additional functionality to interact with the component. Get the rscService as following:
const rscClient = window.__RSC__;
'rscServiceInit' event is emitted after rsc is ready.
Theming
A theme can be added globally by two ways
- By adding a brand key using rsc-client API
setGlobalTheme
(recommended method).
setGlobalTheme |
takes brand key as a parameter |
parameters |
brandKey: string |
rscClient.setGlobalTheme('<brandKey>');
- By adding a brand key to the body element as shown below
<body data-rsc-brand-key="<brand-key>">
...application template
</body>
selector: <rsc-header></rsc-header>
The header is composed of three main features:
- Waffle Menu
- Notifications
- Profile Menu
The Waffle Menu is a set of applications available to the user, so they may more easily access different tools in their product suite, no matter which they may currently be using. The applications can be grouped by category, with an additional set including the most recently accessed by the current user.
Notifications are product and company specific notices available within an application that are appropriate in context of the application, rather than an alternative such as email or a push notification. They include unread, read and archived states - as well as an index of all received notifications for future reference.
The Profile Menu is meant to contain all user related links and actions that aren't appropriate for other forms of navigation, such as a tree structure.
This might include the ability to log out of an application, linking to view or edit one's profile, or edit a user's application specific settings and preferences.
The header component receives the following properties:
Attribute |
Description |
app-key (required) |
Key of the application |
brand-key |
Key of the brand, if not added default brand will be set |
username |
Username that appears on the header and profile menu |
user-photo |
User photo that appears on the header and profile menu |
main-class |
Body's class name to show and hide body when needed |
okta-id |
Okta Id to retrieve the photo to display on the header |
service-url |
RSC service url (default: https://rsc.realogy.com) |
avatar-service-url |
Avatar service url (default: https://avatar.mycbdesk.com) |
apps-service-url |
Application/waffle service url (default: https://backend.mycbdesk.com) |
full-width-layout |
Header/Footer full screen width: true or false (default) |
header-size-update |
To increase the header size along with components in it: true or false (default) |
profile-menu |
profile menu appears on the header and turn off legacy hamburger menu: true or false (default) |
Example:
<rsc-header
app-key="6240dbdc-0758-48f8-be64-2d87c73a741e"
brand-key="95495"
username="Sergey"
user-photo="https://image.sergey"
service-url="https://general.url"
apps-service-url="https://applications.url"
main-class="main"
okta-id="00uhcgfrmyEIAef7R0h7"
avatar-service-url="https://dev-avatar.mycbdesk.com"
/>
// Here you can add you custom component
<my-custom-component></my-custom-component>
</rsc-header>
The header component receives the following methods:
Set Okta Id
setOktaId |
takes okta id as the parameter and sets oktaId in rsc |
parameters |
url: string |
Set Access Token
setAccessToken |
sets oktaId in rsc to retrieve apps |
parameters |
token: string - access token |
Set Help Docs Url
setHelpDocsUrl |
URL to help documentation, if provided help button will appear in the header. |
parameters |
url: string - url for help doc |
Set User
setUser |
set user information |
parameters |
user: User - object containing details of the user |
Set Username
setUsername |
sets a username |
parameters |
username: string |
Set User First Name
setUserFirstName |
set a user first name |
parameters |
userFirstName: string |
Set User Photo
setUserPhoto |
set a user photo by url (e.g. https://image.sergey), set boolean to show or hide the photo on the user menu |
parameters |
userPhoto: string showProfileInUserMenu: boolean |
showProfileInUserMenu |
set boolean to show or hide the photo on the user menu |
parameters |
showProfileInUserMenu: boolean |
Show User Name In Topnav
showUserNameInTopnav |
set boolean to show or hide the first username on the topnav |
parameters |
showUserNameInTopnav: boolean |
Show Caret Down Icon In Topnav
showCaretDownIconInTopnav |
set boolean to show or hide the caret indicator in header near the username in Topnav |
parameters |
showCaretDownIconInTopnav: boolean |
Show Beta Indicator
showBetaIndicator |
set boolean to show or hide the "beta" indicator in header |
parameters |
showBetaIndicator: boolean |
showWaffleMenu |
set boolean to show or hide the "waffleMenu" indicator in header - default value is true. |
parameters |
showWaffleMenu: boolean |
setHomeButtonCallback |
set a home button callback function, which will be called, when a user clicks on the header logo/app name. |
parameters |
callback: function |
setMenuItem |
set additional item to the profile menu |
parameters |
menuItem: menu |
removeMenuItem |
removes an specific menu item by name |
parameters |
name: string |
setMenu |
An array of items to set the menu. |
parameters |
menuItems: Array\<menu> |
property |
type |
required |
description |
name |
string |
|
link text |
url |
string |
|
target url |
icon |
string |
|
fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons) |
onTab |
boolean |
|
set true to open in a new tab, default false |
callback |
function |
|
target callback function (optional, if not provided url will be used) |
weight |
int |
|
menu items are sorted in ascending order. (default: 0) |
showTooltip |
boolean |
|
to show the material tooltip. (default: false) |
tooltipText |
string |
|
content to be shown in the tooltip |
tooltipClass |
string |
|
custom class to be added in tooltip, if needed. |
tooltipPosition |
string |
|
set position of tooltip. (default: below) |
User
property |
type |
required |
description |
username |
string |
|
set username |
userPhoto |
string |
|
set a user photo by url (e.g. https://image.sergey) |
oktaId |
string |
|
set oktaId |
Speed Dial
selector: <rsc-speed-dial></rsc-speed-dial>
Overview of Speed Dial
The speed dial (alternately referred to as a floating action button, or FAB) would be used when you have a set of actions you'd like to make persistently available to users.
The speed dial is presented as a triggering floating action button, anchored to the bottom right of the screen. It will follow users when scrolling. When clicked, an overlay and its constituent child actions will appear.
Each child action should relate to a more broad concept. For example, an additive action, represented as a plus, might contain the ability to add listings, contacts or documents.
Speed dials should contain no more than 6 child actions.
Include the components as a regular html tag and add any of the attributes mentioned below to modify the component.
To replace the default icon with a custom image or content add content inside the rsc-speed-dial tag as shown below.
If side nav is being used, then place the speed dial element outside the side nav element.
<!-- Add custom content -->
<rsc-sidenav></rsc-sidenav>
<rsc-speed-dial>
<img src="path/to/img"></img>
</rsc-speed-dial>
Options for this component can be set using the methods mentioned below
The main button color can be changed by overriding the 'fab-toggler' class as shown below:
.rsc-speed-dial .fab-toggler{
background-color: <brand color>;
}
APIs of Speed Dial
Attributes of Speed Dial
Attribute |
Description |
fab-icon (optional) |
font awesome class name, default: support fab icon will be displayed. |
brand-key (optional) |
a theme is applied on the component based on the Brand key, overrides the global theme |
mat-color (optional) |
sets the theme palette, default: accent |
Example:
<!-- Font awesome icon override -->
<rsc-speed-dial fab-icon='far fa-align-left'>
</rsc-speed-dial>
Methods for Speed Dial
Set a single speed dial
| setSpeedDialOption
|
:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| this method is used to set speed dial options individually |
| parameters |
| option: speedDialOption - object containing details of the option |
Example:
// without callback
rscClient.setSpeedDialOption({
name: 'Leave Feedback',
icon: 'fal fa-comment-exclamation',
weight: 2,
url: 'https://www.mycbdesk.com/feedback',
target: '_blank',
});
// with callback
rscClient.setSpeedDialOption({
name: 'See Help Articles & FAQs',
icon: 'fal fa-question-circle',
callback: function(option) {window.open('https://www.mycbdesk.com/help-center', '_blank')},
});
Remove an option
removeSpeedDialOption |
removes one speed dial option based on the name |
parameters |
name: string - name of the option |
Example:
rscClient.removeSpeedDialOption('Leave Feedback');
Set multiple speed dial options
setSpeedDial |
this method adds the speed dial options passed to the method, all previous options will be replaced |
parameters |
speedDialOptions: Array\<speedDialOption> - collection of speed dial options |
Example:
rscClient.setSpeedDial([
{
name: 'Leave Feedback',
icon: 'far fa-align-left',
weight: 2,
url: 'https://www.mycbdesk.com/feedback',
target: '_blank',
},
{
name: 'See Help Articles & FAQs',
icon: 'fal fa-question-circle',
url: 'https://www.mycbdesk.com/help-center',
}
]);
Speed Dial Interfaces
Speed Dial Option
property |
type |
required |
description |
name |
string |
yes |
option name |
url |
string |
no |
target url |
icon |
string |
yes |
font-awesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons) |
weight |
int |
no |
options are sorted in ascending order (lowest weight is displayed at the top, default: 0) |
target |
string |
no |
sets target value, (default: '_blank)' |
callback |
function |
no |
an optional property, the call back function is called every time an option is clicked |
Side Nav
selector: <rsc-sidenav></rsc-sidenav>
Overview for Side Nav
The SideNav may be used in applications where content is organized in a tree structure. In the case of this component, this should be limited to applications where the content hierarchy includes 2-3 levels of navigation. More focused task-oriented applications aren't appropriate, but content heavy applications such as intranets should be able to leverage the component to quickly organize content in a way consistent with other products across the organization.
Implementation:
Place the main content of the application inside the side nav element. Ideally header component will be placed above the side nav element and offset height to equal the height of the header.
Set the sidenav config based on the type of device or as required for pages as shown below.
If you'd like to allow users on desktops the convenience of collapsing and expanding the sidenav to provide more room for content, ensure that enableStaggeredNav is set to true.
If speed dial is being used, then place the speed dial element outside the side nav element.
Example:
<header></header>
<rsc-side-nav offset-height="45px">
<main><main>
</rsc-side-nav>
<rsc-speed-dial></rsc-speed-dial>
For Angular applications add the 'mounted' flag on rsc-sidenav element.
Check 'mounted' flag implementation here
<rsc-side-nav offset-height="45px" *ngIf="mounted === true">
<!-- main content -->
</rsc-sidenav>
To set active state on the nav item the nav items must have an URL and the whenever the route changes, the current route should be pushed to rsc by calling setCurrentUrl
method. Active state will be set only when the nav item URL and the current URL matches.
Other side nav states can be controlled by calling the setSidenavState
method.
APIs for Side Nav
Attributes of Side Nav
Attribute |
Description |
offset-height (optional) |
the height of the side nav is calculated by subtracting the offset height from 100vh |
Example:
<rsc-side-nav offset-height="45px"></rsc-side-nav>
Methods for Side Nav
Update side nav state
setSidenavState |
updates the state of the side nav, parameters can be pushed individually |
parameters |
sidenavState: SidenavState - contains properties that change the state of the side nav |
Example:
rscClient.setSidenavState({
open: true,
});
// Example config for mobile/touch devices
rscClient.setSidenavState({
enableCache: false,
enableStaggeredNav: false,
state: 'closed',
hasBackdrop: true,
});
// Example config for desktop devices
rscClient.setSidenavState({
enableCache: true,
enableStaggeredNav: true,
state: 'closed',
hasBackdrop: false,
});
Add a nav item
| setSidenavItem
|
:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| this method is used to add a single nav item|
| parameters |
| sidenavItem: SidenavItem - object containing details of the side nav item |
Example:
// without callback
rscClient.setSidenavItem({
icon: 'fal fa-book',
label: 'Education',
showAnchorTag: true,
url: '/test',
openInNewTab: boolean,
childItems: [
{
label: 'cbcdesk',
showAnchorTag: true,
url: 'https://cbcdesk.com/',
openInNewTab: false,
}
],
});
// with callback
rscClient.setSidenavItem(
{
icon: 'fal fa-book',
label: 'Education',
url: 'https://www.mycbdesk.com/help-center',
callback: function(option) {window.open('https://www.mycbdesk.com/help-center', '_blank')},
childItems: [
{
label: 'cbcdesk',
showAnchorTag: true,
url: 'https://cbcdesk.com/',
openInNewTab: false,
}
],
};
Remove a navigation item
removeSidenavItem |
removes one navigation item based on the name, applicable for the first level (removes all child items) |
parameters |
label: string - label of the navigation item |
Example:
rscClient.removeSidenavItem('Education');
Set multiple sidenav items
setSidenav |
this method adds the navigation items passed to the method, all previous items will be replaced |
parameters |
sidenavItems: Array\<SidenavItem> - collection of navigation items |
Example:
rscClient.setSidenav([
{
// First level
icon: 'fal fa-home',
label: 'Desk',
url: '/',
callback: () => { /* Do something when item is clicked/touched */ },
childItems: [
{
// Second level
label: 'level2',
url: '/level2',
callback: () => { /* Do something when item is clicked/touched */ },
childItems: [
{
// Tertiary level
label: 'mycbdesk',
showAnchorTag: true,
url: 'https://mycbdesk.com/',
openInNewTab: true,
childItems: [],
}
],
},
{
// Second level
label: 'level21',
url: '/level21',
callback: () => { /* Do something when item is clicked/touched */ },
// No tertiary level
childItems: [],
}
],
},
{
// First level
icon: 'fal fa-book',
label: 'Education',
url: '/education',
callback: () => { /* Do something when item is clicked/touched */ },
// No second level
childItems: [],
}
])
Update current url
setCurrentUrl |
updates the current url of the parent application |
parameters |
currentUrl: string |
Example:
// full route
rscClient.setCurrentUrl('mycbdesk.com');
// partial route
rscClient.setCurrentUrl('/company');
Events for Side Nav
Sidenav closed
rscSidenavClosed |
emitted when the sidenav is closed |
Example:
const sidenavEl = document.getElementsByTagName('rsc-side-nav')[0];
sidenavEl.addEventListener('rscSidenavClosed', () => {
// Execute code after side navigation is closed.
});
Side Nav Interfaces
Sidenav State
property |
type |
required |
description |
state |
string |
no |
available values: 'closed', 'open', if 'enableStaggeredNav' is true then the close state will display the navigation icons, default: 'closed' |
hasBackdrop |
boolean |
no |
if true adds a overlay over the content when the nav bar is open |
collapseAll |
boolean |
no |
collapses all the nav items |
enableStaggeredNav |
boolean |
no |
true will enable the staggered side nav, default: true |
offsetHeight |
string |
no |
sets the height of the container where the side nav and the content is rendered, overrides the value passed as the attribute 'offset-height' |
enableCache |
boolean |
no |
this flag allows the states to persist on the browser, only applicable for 'closed' state if enableStaggeredNav is enabled and 'open' state, default: true |
Sidenav Item
property |
type |
required |
description |
label |
string |
yes |
the name displayed on the side nav |
icon |
string |
no |
the icon displayed beside the label, only applicable for the 1st level, fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons) |
showAnchorTag |
boolean |
no |
if true an anchor tag is added to the DOM with url as the href (default is false) |
url |
string |
no |
used as href if anchor tag is enabled and used to set the active state |
openInNewTab |
boolean |
no |
if true adds target='_blank' attribute to the anchor tag (default is false) |
callback |
function |
no |
executes custom code when option is clicked/touched |
panelState |
string |
no |
determines if the nav item is expanded or collapsed, possible values 'expanded' and 'collapsed' (default is collapsed) |
childItems |
Array\ |
no |
contains child nav items, applicable for level one and two |
isActive |
boolean |
no |
sets the active class on the nav item, set o true when the current url and nav item url is same |
| collapseAll | boolean | no | collapses all the nav items |
selector: <rsc-footer></rsc-footer>
The footer component should include standard elements, such as legal information, links to privacy policies, sitemaps, terms of use and company branding and social media links (represented as icons).
Include the components as a regular html tag with any additional content you wanted to display as below, example:
(The additional content which is passed by consuming application is optional)
The advanced footer component receives the following properties:
Attribute |
Description |
hide-help-desk-resources |
If true it will hide the help desk resources in advanced footer |
<rsc-footer *ngIf="mounted">
<span>It is licensed under CC BY 4.0.</span>
</rsc-footer>
or
<rsc-advanced-footer>
<span>It is licensed under CC BY 4.0.</span>
</rsc-advanced-footer>
Note: Footer component needs the header component to be mounted
Constants
Brand keys
Brand |
Key |
Coldwellbanker |
cb |
Coldwellbanker commercial |
cbc |
Realogy products |
rp |
Realogy |
rlgy |
Century 21 |
c21 |
Better Homes and Gardens |
bhg |
ERA Real Estate |
era |
ZIP Realty |
zip |
Sotheby's International Realty |
sir |
Corcoran |
cor |
Theme palettes
Palettes |
primary, accent and warn |
Steps Required for Development
Run Dev Server
Run a dev server on port 4000
npm start
Run Tests
npm tests
Build
Build script is going to generate the lib folder.
npm run build
npm version patch
npm publish
This project was generated with Angular CLI version 1.7.4.