@myuw-web-components/myuw-profile

Web component that provides an avatar button and profile menu

1.2.2
Source
npm

Version published: 6 years ago

Weekly downloads: 406; decreased by-1.69%

Maintainers: 6

Weekly downloads

Created: 6 years ago

Source

myuw-profile

Getting Started

Add the following import to your page's <head>:

<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-profile@^1?module"></script>
<script nomodule src="https://unpkg.com/@myuw-web-components/myuw-profile@^1"></script>

Use the component's HTML tag wherever you want:

<myuw-profile
    login-url=""
    logout-url=""
    session-endpoint=""
    background-color=""
    open-right
>
</myuw-profile>

Configurable properties

Login URL (login-url): The URL to redirect users to on login
Logout URL (logout-url): The Logout URL to redirect users to on logout
Session Endpoint (session-endpoint): The endpoint URL for session info
Background color (background-color): Use this to dynamically set the background color of the profile menu button
Open Menu Right (open-right): Include this attribute if you would like the profile menu to open to the right, instead of left

Slots

Profile Navigation Item (nav-item): Add a custom item to the profile button's navigation menu, this slot expects an <a> tag

CSS Variables

--myuw-profile-font: Set the font stack for this component
--myuw-profile-login-color: Set the font color of the "Login" button
--myuw-profile-background-color: Set the background color of the circular menu button
--myuw-menu-color: The text color of links/buttons in the profile menu

For more information about CSS variables and how they work with MyUW Web Components, reference the styles component

FAQs

What is @myuw-web-components/myuw-profile?

Is @myuw-web-components/myuw-profile popular?

Is @myuw-web-components/myuw-profile well maintained?

Package last updated on 15 Oct 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.

Install

@myuw-web-components/myuw-profile