Security News
Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
By Sarah Gooding - Jan 28, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@myuw-web-components/myuw-app-bar
Advanced tools
@myuw-web-components/myuw-app-bar
A material top app bar designed for use with other MyUW web components
<myuw-app-bar>
A material top app bar designed for use with other MyUW web components
Getting Started
Add the following import to your page's <head>:
<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-app-bar@^1?module"></script>
<script nomodule scr="https://unpkg.com/@myuw-web-components/myuw-app-bar@^1"></script>
Important: For responsiveness to many screen sizes, ensure you have included the viewport meta tag in your application:
<meta name="viewport" content="width=device-width, initial-scale=1">
Use the component's HTML tag wherever you want:
<myuw-app-bar
theme-name="MyUW"
app-name=""
app-url=""
>
</myuw-app-bar>
Configurable properties via attributes
- themeName (theme-name): Sets the theme/portal name (defaults to "MyUW")
- appName (app-name): Sets the app name (e.g. "Bucky Backup")
- appUrl (app-url): Sets then URL to go to when user clicks the app title
Styling the app bar
MyUW app bar exposes custom CSS properties so users can change some of its styles.
--myuw-app-bar-bg: Background color for the app bar--myuw-app-bar-font: Font stack for the app bar--myuw-app-bar-color: Font color for the app bar
For more information about CSS variables and how they work with MyUW Web Components, reference the styles component
How to use custom CSS properties
Add the following selector to your CSS:
myuw-app-bar {
--myuw-app-bar-bg: #fff;
--myuw-app-bar-color: #c5050c;
--myuw-app-bar-font: 'Roboto', sans-serif;
}
Configuration / child components
Use the named <slot> tags to include child components of the top-app-bar:
<myuw-app-bar>
<your-navigation-drawer-component slot="myuw-navigation"></your-navigation-drawer-component>
<your-notifications-component slot="myuw-notifications"></your-notifications-component>
</myuw-app-bar>
Available slots:
- myuw-navigation: Insert the
<myuw-navigation-drawer>component - myuw-help: Insert the
<myuw-help-and-feedback>component - myuw-notifications: Insert the
<myuw-notifications>component - myuw-profile: Insert the
<myuw-profile>component - myuw-search: Insert the
<myuw-search>component
Development and contribution
To run the demo app locally and test the component, run the following commands:
$ npm install
$ npm start
1.5.0
Changed
- Deprecated support for "theme-url" property for better UX. You can still set a theme name and app name, but now the title only supports a single link.
How to upgrade
If you are using the recommended version (1^), you don't need to do anything special to get these changes. Upgrading to this version will not cause breaking changes. For implementations that use a "theme-url" property and no "app-url" property, the "theme-url" will be used as the title link. For implementations currently using both, the "app-url" will be favored.
FAQs
A material top app bar designed for use with other MyUW web components
The npm package @myuw-web-components/myuw-app-bar receives a total of 0 weekly downloads. As such, @myuw-web-components/myuw-app-bar popularity was classified as not popular.
We found that @myuw-web-components/myuw-app-bar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 12 Sep 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
By Sarah Gooding - Jan 24, 2025
Security News
cURL Project and Go Security Teams Reject CVSS as Broken
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
By Sarah Gooding - Jan 24, 2025