MyUW Web Components
Our mission: This small library of web components was created to provide developers across the UW-Madison campus with an easy-to-use, framework agnostic collection of elements that closely follows the design specifications of our university's User Experience experts.
Interactive Demos
Each entry in the table below has information about one of our components, the latest versions of which are currently in use on this site.
Component | Github link | Toggle visibility |
---|---|---|
Top app bar | myuw-app-bar | n/a |
Navigation drawer | myuw-drawer | |
Notifications new_releases (new 2019) | myuw-notifications |
Hide notifications
|
Banner message new_releases (new 2019) | myuw-banner | |
Search bar | myuw-search |
Hide search
|
Profile button | myuw-profile |
Hide profile
|
Help and feedback | myuw-help |
Hide help
|
MyUW badge new_releases (new 2019) | myuw-badge |
Exclude badge from code generation
|
How to use this site
The best way to get the most out of this site is to take a quick tour.
Otherwise, you can follow these basic instructions:
- Click a component's name in the table above
- Use the dialog that opens to customize the component however you like. Any changes you make will be reflected live on this page.
- When you've customized the page to your liking, scroll down to the "Get components" section where you can generate the code for your custom components that you can copy and paste into your own app/web page.
- Browse individual component pages (click the hamburger menu) to view usage and pattern guidance before implementing them in your app.
Get components
The markup generated bythis tool will reflect any configuration options you have changed (or left unchanged) while experimenting with the demos.
Please note: The markup generated by this tool includes the latest 1.0+ version of every component by default (the same ones used on the site). You can view the CHANGELOG.md file in each component's repository on Github to keep up to date. Any breaking changes will result in a new major version (i.e. 2.0.0) and require manual updating to use.
-
Import components and dependencies into your document
Copy to clipboard
-
Add component HTML to your page
Copy to clipboard
-
Copy custom CSS variables
Copy to clipboard
-
Custom javascript events
Copy to clipboard
<!-- Script tags to import components will appear here -->
<!-- Component HTMl will appear here -->
/* Custom CSS properties will appear here */
myuw-help: When you know a user has an active session, dispatch the "myuw-login" custom event to tell the profile component that someone is logged in.
myuw-notifications: When you have organized the notifications you want to display, dispatch the "myuw-has-notifications" custom event.
/* Javascript events for selected components */