BranchesTags

Repository files navigation

ReloadlyUI

Angular UI library for building rich UI experiences

npm version

Please check our demo site and the list of issues to see all the things we are working on. Feel free to make comments there.

Table of Contents

Demo

Please check all components we have in action at https://ui.reloadly.com

Dependencies

The only dependency is Angular. The supported versions are:

reloadly-uiAngular
1.0.518.0.6

Installation

Just run the following:

npm install reloadly-ui

It will install reloadly-ui for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option:

npm install reloadly-ui --project myProject

Development

To run a local version of the library, and link it to your app, first run in the library:

npm run build:dev

Then

npm run build:scss:dev

Then in dist/reloadly-ui run:

npm link

In your Angular project's package.json, use

"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}

In angular.json use "preserveSymlinks": true, and:

"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],

After installing dependencies (npm install), run:

npm link reloadly-ui

or

npm link reloadly-ui --force

This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.

Supported browsers

We support the same browsers and versions supported by Angular. See Angular browser support for more details.

Our code is automatically tested on all supported browsers.

Getting help

Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.

Do you think you've found a bug?

We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.

We ask you to respect two things:

  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz

A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.

Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.

Contributing to the project

Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.

Code of conduct

Please take a moment and read our Code of Conduct

About

Reloadly UI - angular UI library for building powerful web apps

ui.reloadly.com

Topics

angularlibrarynpm-packageuiui-componentsuikit

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity
Custom properties

Stars

7 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
ReloadlyUI
Angular UI library for building rich UI experiences
npm version
Please check our demo site and the list of
issues to see all the things we are working on. Feel free to make comments there.
Table of Contents
Demo
Please check all components we have in action at https://ui.reloadly.com
Dependencies
The only dependency is Angular.
The supported versions are:
reloadly-uiAngular
1.0.518.0.6
Installation
Just run the following:
npm install reloadly-ui
It will install reloadly-ui for the default application specified in your angular.json.
If you have multiple projects and you want to target a specific application, you could specify the --project option:
npm install reloadly-ui --project myProject
Development
To run a local version of the library, and link it to your app, first run in the library:
npm run build:dev
Then
npm run build:scss:dev
Then in dist/reloadly-ui run:
npm link
In your Angular project's package.json, use
"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}
In angular.json use "preserveSymlinks": true, and:
"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],
After installing dependencies (npm install), run:
npm link reloadly-ui
or
npm link reloadly-ui --force
This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.
Supported browsers
We support the same browsers and versions supported by Angular. See Angular browser support for more details.
Our code is automatically tested on all supported browsers.
Getting help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.
Do you think you've found a bug?
We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.
We ask you to respect two things:
  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz
A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Contributing to the project
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Code of conduct
Please take a moment and read our Code of Conduct
About
Reloadly UI - angular UI library for building powerful web apps
ui.reloadly.com
Topics
angularlibrarynpm-packageuiui-componentsuikit
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
7 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ReloadlyUI
Angular UI library for building rich UI experiences
npm version
Please check our demo site and the list of
issues to see all the things we are working on. Feel free to make comments there.
Table of Contents
Demo
Please check all components we have in action at https://ui.reloadly.com
Dependencies
The only dependency is Angular.
The supported versions are:
reloadly-uiAngular
1.0.518.0.6
Installation
Just run the following:
npm install reloadly-ui
It will install reloadly-ui for the default application specified in your angular.json.
If you have multiple projects and you want to target a specific application, you could specify the --project option:
npm install reloadly-ui --project myProject
Development
To run a local version of the library, and link it to your app, first run in the library:
npm run build:dev
Then
npm run build:scss:dev
Then in dist/reloadly-ui run:
npm link
In your Angular project's package.json, use
"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}
In angular.json use "preserveSymlinks": true, and:
"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],
After installing dependencies (npm install), run:
npm link reloadly-ui
or
npm link reloadly-ui --force
This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.
Supported browsers
We support the same browsers and versions supported by Angular. See Angular browser support for more details.
Our code is automatically tested on all supported browsers.
Getting help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.
Do you think you've found a bug?
We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.
We ask you to respect two things:
  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz
A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Contributing to the project
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Code of conduct
Please take a moment and read our Code of Conduct
About
Reloadly UI - angular UI library for building powerful web apps
ui.reloadly.com
Topics
angularlibrarynpm-packageuiui-componentsuikit
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
7 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ReloadlyUI
Angular UI library for building rich UI experiences
npm version
Please check our demo site and the list of
issues to see all the things we are working on. Feel free to make comments there.
Table of Contents
Demo
Please check all components we have in action at https://ui.reloadly.com
Dependencies
The only dependency is Angular.
The supported versions are:
reloadly-uiAngular
1.0.518.0.6
Installation
Just run the following:
npm install reloadly-ui
It will install reloadly-ui for the default application specified in your angular.json.
If you have multiple projects and you want to target a specific application, you could specify the --project option:
npm install reloadly-ui --project myProject
Development
To run a local version of the library, and link it to your app, first run in the library:
npm run build:dev
Then
npm run build:scss:dev
Then in dist/reloadly-ui run:
npm link
In your Angular project's package.json, use
"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}
In angular.json use "preserveSymlinks": true, and:
"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],
After installing dependencies (npm install), run:
npm link reloadly-ui
or
npm link reloadly-ui --force
This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.
Supported browsers
We support the same browsers and versions supported by Angular. See Angular browser support for more details.
Our code is automatically tested on all supported browsers.
Getting help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.
Do you think you've found a bug?
We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.
We ask you to respect two things:
  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz
A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Contributing to the project
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Code of conduct
Please take a moment and read our Code of Conduct
About
Reloadly UI - angular UI library for building powerful web apps
ui.reloadly.com
Topics
angularlibrarynpm-packageuiui-componentsuikit
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
7 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
ReloadlyUI
Angular UI library for building rich UI experiences
npm version
Please check our demo site and the list of
issues to see all the things we are working on. Feel free to make comments there.
Table of Contents
Demo
Please check all components we have in action at https://ui.reloadly.com
Dependencies
The only dependency is Angular.
The supported versions are:
reloadly-uiAngular
1.0.518.0.6
Installation
Just run the following:
npm install reloadly-ui
It will install reloadly-ui for the default application specified in your angular.json.
If you have multiple projects and you want to target a specific application, you could specify the --project option:
npm install reloadly-ui --project myProject
Development
To run a local version of the library, and link it to your app, first run in the library:
npm run build:dev
Then
npm run build:scss:dev
Then in dist/reloadly-ui run:
npm link
In your Angular project's package.json, use
"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}
In angular.json use "preserveSymlinks": true, and:
"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],
After installing dependencies (npm install), run:
npm link reloadly-ui
or
npm link reloadly-ui --force
This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.
Supported browsers
We support the same browsers and versions supported by Angular. See Angular browser support for more details.
Our code is automatically tested on all supported browsers.
Getting help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.
Do you think you've found a bug?
We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.
We ask you to respect two things:
  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz
A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Contributing to the project
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Code of conduct
Please take a moment and read our Code of Conduct
About
Reloadly UI - angular UI library for building powerful web apps
ui.reloadly.com
Topics
angularlibrarynpm-packageuiui-componentsuikit
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
7 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ReloadlyUI
Angular UI library for building rich UI experiences
npm version
Please check our demo site and the list of
issues to see all the things we are working on. Feel free to make comments there.
Table of Contents
Demo
Please check all components we have in action at https://ui.reloadly.com
Dependencies
The only dependency is Angular.
The supported versions are:
reloadly-uiAngular
1.0.518.0.6
Installation
Just run the following:
npm install reloadly-ui
It will install reloadly-ui for the default application specified in your angular.json.
If you have multiple projects and you want to target a specific application, you could specify the --project option:
npm install reloadly-ui --project myProject
Development
To run a local version of the library, and link it to your app, first run in the library:
npm run build:dev
Then
npm run build:scss:dev
Then in dist/reloadly-ui run:
npm link
In your Angular project's package.json, use
"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}
In angular.json use "preserveSymlinks": true, and:
"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],
After installing dependencies (npm install), run:
npm link reloadly-ui
or
npm link reloadly-ui --force
This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.
Supported browsers
We support the same browsers and versions supported by Angular. See Angular browser support for more details.
Our code is automatically tested on all supported browsers.
Getting help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.
Do you think you've found a bug?
We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.
We ask you to respect two things:
  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz
A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Contributing to the project
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Code of conduct
Please take a moment and read our Code of Conduct
About
Reloadly UI - angular UI library for building powerful web apps
ui.reloadly.com
Topics
angularlibrarynpm-packageuiui-componentsuikit
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
7 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
ReloadlyUI
Angular UI library for building rich UI experiences
npm version
Please check our demo site and the list of
issues to see all the things we are working on. Feel free to make comments there.
Table of Contents
Demo
Please check all components we have in action at https://ui.reloadly.com
Dependencies
The only dependency is Angular.
The supported versions are:
reloadly-uiAngular
1.0.518.0.6
Installation
Just run the following:
npm install reloadly-ui
It will install reloadly-ui for the default application specified in your angular.json.
If you have multiple projects and you want to target a specific application, you could specify the --project option:
npm install reloadly-ui --project myProject
Development
To run a local version of the library, and link it to your app, first run in the library:
npm run build:dev
Then
npm run build:scss:dev
Then in dist/reloadly-ui run:
npm link
In your Angular project's package.json, use
"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}
In angular.json use "preserveSymlinks": true, and:
"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],
After installing dependencies (npm install), run:
npm link reloadly-ui
or
npm link reloadly-ui --force
This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.
Supported browsers
We support the same browsers and versions supported by Angular. See Angular browser support for more details.
Our code is automatically tested on all supported browsers.
Getting help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.
Do you think you've found a bug?
We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.
We ask you to respect two things:
  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz
A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Contributing to the project
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Code of conduct
Please take a moment and read our Code of Conduct
About
Reloadly UI - angular UI library for building powerful web apps
ui.reloadly.com
Topics
angularlibrarynpm-packageuiui-componentsuikit
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
7 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
ReloadlyUI
Angular UI library for building rich UI experiences
npm version
Please check our demo site and the list of
issues to see all the things we are working on. Feel free to make comments there.
Table of Contents
Demo
Please check all components we have in action at https://ui.reloadly.com
Dependencies
The only dependency is Angular.
The supported versions are:
reloadly-uiAngular
1.0.518.0.6
Installation
Just run the following:
npm install reloadly-ui
It will install reloadly-ui for the default application specified in your angular.json.
If you have multiple projects and you want to target a specific application, you could specify the --project option:
npm install reloadly-ui --project myProject
Development
To run a local version of the library, and link it to your app, first run in the library:
npm run build:dev
Then
npm run build:scss:dev
Then in dist/reloadly-ui run:
npm link
In your Angular project's package.json, use
"dependencies": {
...
"reloadly-ui": "file:../reloadly-ui/dist/reloadly-ui",
...
}
In angular.json use "preserveSymlinks": true, and:
"styles": [
"src/styles.scss",
"node_modules/reloadly-ui/styles/styles.css"
],
After installing dependencies (npm install), run:
npm link reloadly-ui
or
npm link reloadly-ui --force
This will make Angular automatically rebuild your project when you modify this ui library. You might need to modify and save a component's style sheet file for global style files to be rebuilt.
Supported browsers
We support the same browsers and versions supported by Angular. See Angular browser support for more details.
Our code is automatically tested on all supported browsers.
Getting help
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. For general support questions you can try StackOverflow and tag the question with the reloadly-ui tag.
Do you think you've found a bug?
We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.
We ask you to respect two things:
  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, reloadly-ui and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz
A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Contributing to the project
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Code of conduct
Please take a moment and read our Code of Conduct
About
Reloadly UI - angular UI library for building powerful web apps
ui.reloadly.com
Topics
angularlibrarynpm-packageuiui-componentsuikit
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
7 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages