Anatomy
Slots
Good to Know
Components with Slots consist of one or more predefined slots, which are like placeholders within the component's template. Users can replace these slots with their own content when using the component, achieving dynamic customization.
- Logo: As a web application, Mews Operations uses its logo to provide users with instant recognition of the platform they are using. The logo also works as a home link, allowing users to return to the main dashboard with a simple click. Beyond its practical role, the logo holds internal significance, contributing to branding and marketing efforts.
- Sidebar trigger: It allows the user to collapse or expand the side menu on demand.
- Search bar: The smart search empowers users to find everything they need effortlessly. By default, it searches within the current hotel or multi-property the user is working on. Users can perform a search across all accessible properties and execute complex queries using advanced commanding and filtering options.
- Shortcuts: Global features like Messages or Notifications provide users with notifications about new entries added from any of the properties they have a profile in.
- Global actions: A [+] button is globally available from the top nav, so the users can quickly create new entities without navigating to any specific page. This button opens a floating panel that suggests the user create that new entity within the property/portfolio they currently are, but they can select a different target if needed.
- Hamburger menu: The hamburger icon is used to open product navigation such as the Side navigation.The hamburger menu is only needed when there is a collapsable left navigation.
- Wordmark: For Mews products, the wordmark is always preceded by “MEWS.”
- Search Input
- Sub-menu
- Header utilities: These utilities are reserved for universal, system-level functions such as profile, search, notifications, and similar functions. Not every product on a system is required to show the same utilities, but it is recommended for a better cross-product user experience.
- Use Profil
- Language selection
- Hamburger Menu
- Property Logo
- Property Name
- Currency Selection
- Language Selection
- Close Button
The Top navigation spans the full width of the viewport and is the topmost element in the browser window. The header is persistent throughout the product experience.
For each Top Nav component, left-to-right translates to product-to-global. The left side of the Top Navigation contains items relevant at the product level. Moving to the right along the Top, the functions become more global. Elements on the right side of the header, such as the switcher, are the most global in their scope and span multiple products. Adition depending on the product, the middle of the Top Navigation can have a search field.
Variants
|
Item |
Variant |
|---|---|
|
1 |
Portfolio |
|
2 |
PMS |
|
3 |
Guest Portal |
|
4 |
Booking Engine |
|
5 |
Product Vision |
Appearance
Light and Dark mode
|
Item |
Usage |
|---|---|
|
1 |
Light Mode (Default) |
|
2 |
Dark Mode |
Size
|
Item |
Usage |
|---|---|
|
1 |
Desktop, Tablets |
|
2 |
Mobile |
Spacing
Motion
Overall
|
Layer |
Action |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|---|
|
Side menu |
Collapse |
Click |
CenterX |
Duration30 |
EasyIn |
|
Slide In |
|
Side menu |
Expand |
Click |
CenterX |
Duration30 |
EasyOut |
|
Slide Out |
Choreography
Action: Side menu collapse
|
Layer |
Element |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|---|
|
Mews Logo |
M |
Auto |
CenterX |
Duration20 |
EasyOut |
|
Slide In |
|
|
E |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
|
W |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
|
S |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
Top bar |
Bar |
Auto |
CenterX |
Duration30 |
EasyIn |
|
Slide In |
|
|
Icon menu_arrow_left |
Auto |
Opacity |
Duration30 |
EasyIn |
|
Fade Out |
|
|
Icon menu_arrow_right |
Auto |
Opacity |
Duration30 |
EasyIn |
|
Fade In |
|
Side Bar |
Side Menu - expanded |
Auto |
CenterX |
Duration30 |
EasyIn |
|
Slide Out |
|
|
Side Menu - expanded |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
|
Side Menu - collapse |
Auto |
CenterX |
Duration10 |
EasyOut |
|
Slide In |
|
|
Side Menu - collapse |
Auto |
Opacity |
Duration30 |
EasyOut |
Delay10 |
Fade In |
|
|
Avatars |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide In |
Action: Side menu expand
|
Layer |
Element |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|---|
|
Mews Logo |
M |
Auto |
CenterX |
Duration20 |
EasyOut |
|
Slide In |
|
|
E |
Auto |
Opacity |
Duration10 |
EasyOut |
|
Fade In |
|
|
W |
Auto |
Opacity |
Duration10 |
EasyOut |
|
Fade In |
|
|
S |
Auto |
Opacity |
Duration10 |
EasyOut |
|
Fade In |
|
Top bar |
Bar |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide Out |
|
|
Icon menu_arrow_left |
Auto |
Opacity |
Duration30 |
EasyOut |
|
Fade In |
|
|
Icon menu_arrow_right |
Auto |
Opacity |
Duration30 |
EasyOut |
|
Fade Out |
|
Side Bar |
Side Menu - expanded |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide In |
|
|
Side Menu - expanded |
Auto |
Opacity |
Duration40 |
EasyOut |
Delay10 |
Fade In |
|
|
Side Menu - collapse |
Auto |
CenterX |
Duration20 |
EasyIn |
|
Slide Out |
|
|
Side Menu - collapse |
Auto |
Opacity |
Duration20 |
EasyIn |
|
Fade Out |
|
|
Avatars |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide Out |