forked from shoelace-style/shoelace
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
header component implementation and examples
- Loading branch information
1 parent
5bc3795
commit f99cf5b
Showing
6 changed files
with
462 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,342 @@ | ||
| --- | ||
| meta: | ||
| title: Mf Header | ||
| description: | ||
| layout: component | ||
| --- | ||
|
|
||
| ```html:preview | ||
| <mf-header template="basic"> | ||
| <mf-img src="https://www.dev.mallgiftcard.ae/assets/maf-logo-header.svg" alt="MAF" slot="logo"></mf-img> | ||
| <mf-navigation slot="navigation"> | ||
| <mf-nav-item> | ||
| Neighbourhoods | ||
| <mf-navigation slot="subnav" vertical="true"> | ||
| <mf-nav-item value="find">Serra</mf-nav-item> | ||
| <mf-nav-item value="find-previous">Cilia</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item value="undo">Contact Us</mf-nav-item> | ||
| <mf-nav-item value="redo">Download Brochure</mf-nav-item> | ||
| <mf-nav-item> | ||
| Language | ||
| <mf-navigation slot="subnav" vertical="true"> | ||
| <mf-nav-item value="uppercase">AR</mf-nav-item> | ||
| <mf-nav-item value="lowercase">EN</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-header> | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Basic Example | ||
|
|
||
| ```html:preview | ||
| <mf-header style="max-width: 1200px;margin: 0 auto;" template="basic"> | ||
| <mf-img src="https://www.dev.mallgiftcard.ae/assets/maf-logo-header.svg" alt="MAF" slot="logo"></mf-img> | ||
| <mf-navigation slot="navigation"> | ||
| <mf-nav-item> | ||
| Neighbourhoods | ||
| <mf-navigation slot="subnav" vertical="true"> | ||
| <mf-nav-item value="find">Serra</mf-nav-item> | ||
| <mf-nav-item value="find-previous">Cilia</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item value="undo">Contact Us</mf-nav-item> | ||
| <mf-nav-item value="redo">Download Brochure</mf-nav-item> | ||
| <mf-nav-item hideChevron="true"> | ||
| Language | ||
| <mf-navigation slot="subnav" vertical="true"> | ||
| <mf-nav-item value="uppercase">AR</mf-nav-item> | ||
| <mf-nav-item value="lowercase">EN</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-header> | ||
| ``` | ||
|
|
||
| {% raw %} | ||
|
|
||
| ```jsx:react | ||
| import MfHeader from '@shoelace-style/shoelace/dist/react/mf-header'; | ||
| import MfImg from '@shoelace-style/shoelace/dist/react/mf-img'; | ||
| import MfNavigation from '@shoelace-style/shoelace/dist/react/mf-navigation'; | ||
| import MfNavItem from '@shoelace-style/shoelace/dist/react/mf-nav-item'; | ||
| const App = () => ( | ||
| <MfHeader style={{maxWidth: "1200px",margin: "0 auto"}} template="basic"> | ||
| <MfImg src="https://www.dev.mallgiftcard.ae/assets/maf-logo-header.svg" alt="MAF" slot="logo"></MfImg> | ||
| <MfNavigation slot="navigation"> | ||
| <MfNavItem> | ||
| Neighbourhoods | ||
| <MfNavigation slot="subnav" vertical="true"> | ||
| <MfNavItem value="find">Serra</MfNavItem> | ||
| <MfNavItem value="find-previous">Cilia</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| <MfNavItem value="undo">Contact Us</MfNavItem> | ||
| <MfNavItem value="redo">Download Brochure</MfNavItem> | ||
| <MfNavItem hideChevron="true"> | ||
| Language | ||
| <MfNavigation slot="subnav" vertical="true"> | ||
| <MfNavItem value="uppercase">AR</MfNavItem> | ||
| <MfNavItem value="lowercase">EN</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| </MfNavigation> | ||
| </MfHeader> | ||
| ); | ||
| ``` | ||
|
|
||
| {% endraw %} | ||
|
|
||
| ### Single Row Example | ||
|
|
||
| ```html:preview | ||
| <mf-header template="singleRow" style="max-width: 1400px;margin: 0 auto;background-color: rgba(0, 0, 0, 1);"> | ||
| <mf-img | ||
| src="https://www.malloftheemirates.com/images/default-source/default-album/navigation-_desktop_-_1_.webp?sfvrsn=c2c2c500_2" | ||
| alt="MAF" slot="logo" width="150px"></mf-img> | ||
| <mf-navigation slot="navigation"> | ||
| <mf-nav-item wide highlight> | ||
| Men | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="sale" highlight>Sale</mf-nav-item> | ||
| <mf-nav-item value="new-in" wide>New In | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="adidas">Adidas</mf-nav-item> | ||
| <mf-nav-item value="nike">Nike</mf-nav-item> | ||
| <mf-nav-item value="nb">NB</mf-nav-item> | ||
| <mf-nav-item value="item">item</mf-nav-item> | ||
| <mf-nav-item value="item">item</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item value="designer">Designers</mf-nav-item> | ||
| <mf-nav-item value="clothing">clothing</mf-nav-item> | ||
| <mf-nav-item value="shoes">Shoes</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item wide> | ||
| Women | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="sale" highlight>Sale</mf-nav-item> | ||
| <mf-nav-item value="new-in">New In</mf-nav-item> | ||
| <mf-nav-item value="designer">Designers</mf-nav-item> | ||
| <mf-nav-item value="clothing">clothing</mf-nav-item> | ||
| <mf-nav-item value="shoes">Shoes</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item wide> | ||
| Home & Gifts | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="sale" highlight>Sale</mf-nav-item> | ||
| <mf-nav-item value="new-in">New In</mf-nav-item> | ||
| <mf-nav-item value="designer">Designers</mf-nav-item> | ||
| <mf-nav-item value="clothing">clothing</mf-nav-item> | ||
| <mf-nav-item value="shoes">Shoes</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| </mf-navigation> | ||
| <sl-dropdown slot="actions"> | ||
| <sl-icon-button name="person-circle" label="auth" slot="trigger" style="font-size: 2.5rem;"></sl-icon-button> | ||
| <sl-menu> | ||
| <sl-menu-item value="login">Login</sl-menu-item> | ||
| <sl-menu-item value="register">Register</sl-menu-item> | ||
| <sl-menu-item value="logout">Logout</sl-menu-item> | ||
| </sl-menu> | ||
| </sl-dropdown> | ||
| </mf-header> | ||
| ``` | ||
|
|
||
| {% raw %} | ||
|
|
||
| ```jsx:react | ||
| import MfHeader from '@shoelace-style/shoelace/dist/react/mf-header'; | ||
| import MfImg from '@shoelace-style/shoelace/dist/react/mf-img'; | ||
| import MfNavigation from '@shoelace-style/shoelace/dist/react/mf-navigation'; | ||
| import MfNavItem from '@shoelace-style/shoelace/dist/react/mf-nav-item'; | ||
| const App = () => ( | ||
| <MfHeader template="singleRow" style={{maxWidth: '1400px',margin: '0 auto',backgroundColor: 'rgba(0, 0, 0, 1)'}}> | ||
| <MfImg | ||
| src="https://www.malloftheemirates.com/images/default-source/default-album/navigation-_desktop_-_1_.webp?sfvrsn=c2c2c500_2" | ||
| alt="MAF" slot="logo" ></MfImg> | ||
| <MfNavigation slot="navigation"> | ||
| <mf-nav-item wide highlight> | ||
| Men | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="sale" highlight>Sale</MfNavItem> | ||
| <MfNavItem value="new-in" wide>New In | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="adidas">Adidas</MfNavItem> | ||
| <MfNavItem value="nike">Nike</MfNavItem> | ||
| <MfNavItem value="nb">NB</MfNavItem> | ||
| <MfNavItem value="item">item</MfNavItem> | ||
| <MfNavItem value="item">item</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| <MfNavItem value="designer">Designers</MfNavItem> | ||
| <MfNavItem value="clothing">clothing</MfNavItem> | ||
| <MfNavItem value="shoes">Shoes</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| <MfNavItem wide> | ||
| Women | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="sale" highlight>Sale</MfNavItem> | ||
| <MfNavItem value="new-in">New In</MfNavItem> | ||
| <MfNavItem value="designer">Designers</MfNavItem> | ||
| <MfNavItem value="clothing">clothing</MfNavItem> | ||
| <MfNavItem value="shoes">Shoes</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| <MfNavItem wide> | ||
| Home & Gifts | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="sale" highlight>Sale</MfNavItem> | ||
| <MfNavItem value="new-in">New In</MfNavItem> | ||
| <MfNavItem value="designer">Designers</MfNavItem> | ||
| <MfNavItem value="clothing">clothing</MfNavItem> | ||
| <MfNavItem value="shoes">Shoes</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| </MfNavigation> | ||
| </MfHeader> | ||
| ); | ||
| ``` | ||
|
|
||
| {% endraw %} | ||
|
|
||
| ### Separate Navigation Example | ||
|
|
||
| ```html:preview | ||
| <mf-header style="max-width: 1400px;margin: 0 auto;" template="separateNavigation"> | ||
| <mf-img | ||
| src="https://api-prod.thatconceptstore.com/medias/THATlogo.svg?context=bWFzdGVyfGltYWdlc3wxOTA1fGltYWdlL3N2Zyt4bWx8YURBNEwyZ3pPQzg1TkRNNE5EUTVNak00TURRMkwxUklRVlJzYjJkdkxuTjJad3xkMjhkOGMyODljNjEyMzlhODBkZDQzMGM0NDdiNzEzODljNjU0NWU1MmJlZDk3MjVkYTA5Y2Y1NDBiZGU1MzJi" | ||
| alt="MAF" slot="logo"></mf-img> | ||
| <mf-navigation slot="navigation"> | ||
| <mf-nav-item wide> | ||
| Men | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="sale" highlight>Sale</mf-nav-item> | ||
| <mf-nav-item value="new-in" wide>New In | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="adidas">Adidas</mf-nav-item> | ||
| <mf-nav-item value="nike">Nike</mf-nav-item> | ||
| <mf-nav-item value="nb">NB</mf-nav-item> | ||
| <mf-nav-item value="item">item</mf-nav-item> | ||
| <mf-nav-item value="item">item</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item value="designer">Designers</mf-nav-item> | ||
| <mf-nav-item value="clothing">clothing</mf-nav-item> | ||
| <mf-nav-item value="shoes">Shoes</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item wide> | ||
| Women | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="sale" highlight>Sale</mf-nav-item> | ||
| <mf-nav-item value="new-in">New In</mf-nav-item> | ||
| <mf-nav-item value="designer">Designers</mf-nav-item> | ||
| <mf-nav-item value="clothing">clothing</mf-nav-item> | ||
| <mf-nav-item value="shoes">Shoes</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| <mf-nav-item wide> | ||
| Home & Gifts | ||
| <mf-navigation slot="subnav" wide> | ||
| <mf-nav-item value="sale" highlight>Sale</mf-nav-item> | ||
| <mf-nav-item value="new-in">New In</mf-nav-item> | ||
| <mf-nav-item value="designer">Designers</mf-nav-item> | ||
| <mf-nav-item value="clothing">clothing</mf-nav-item> | ||
| <mf-nav-item value="shoes">Shoes</mf-nav-item> | ||
| </mf-navigation> | ||
| </mf-nav-item> | ||
| </mf-navigation> | ||
| <sl-dropdown slot="actions"> | ||
| <sl-icon-button name="person-circle" label="auth" slot="trigger" style="font-size: 2.5rem;"></sl-icon-button> | ||
| <sl-menu> | ||
| <sl-menu-item value="login">Login</sl-menu-item> | ||
| <sl-menu-item value="register">Register</sl-menu-item> | ||
| <sl-menu-item value="logout">Logout</sl-menu-item> | ||
| </sl-menu> | ||
| </sl-dropdown> | ||
| </mf-header> | ||
| ``` | ||
|
|
||
| {% raw %} | ||
|
|
||
| ```jsx:react | ||
| import MfHeader from '@shoelace-style/shoelace/dist/react/mf-header'; | ||
| import MfImg from '@shoelace-style/shoelace/dist/react/mf-img'; | ||
| import MfNavigation from '@shoelace-style/shoelace/dist/react/mf-navigation'; | ||
| import MfNavItem from '@shoelace-style/shoelace/dist/react/mf-nav-item'; | ||
| const App = () => ( | ||
| <MfHeader template="separateNavigation" style={{maxWidth: '1400px',margin: '0 auto',backgroundColor: 'rgba(0, 0, 0, 1)'}}> | ||
| <MfImg | ||
| src="https://www.malloftheemirates.com/images/default-source/default-album/navigation-_desktop_-_1_.webp?sfvrsn=c2c2c500_2" | ||
| alt="MAF" slot="logo" ></MfImg> | ||
| <MfNavigation slot="navigation"> | ||
| <mf-nav-item wide highlight> | ||
| Men | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="sale" highlight>Sale</MfNavItem> | ||
| <MfNavItem value="new-in" wide>New In | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="adidas">Adidas</MfNavItem> | ||
| <MfNavItem value="nike">Nike</MfNavItem> | ||
| <MfNavItem value="nb">NB</MfNavItem> | ||
| <MfNavItem value="item">item</MfNavItem> | ||
| <MfNavItem value="item">item</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| <MfNavItem value="designer">Designers</MfNavItem> | ||
| <MfNavItem value="clothing">clothing</MfNavItem> | ||
| <MfNavItem value="shoes">Shoes</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| <MfNavItem wide> | ||
| Women | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="sale" highlight>Sale</MfNavItem> | ||
| <MfNavItem value="new-in">New In</MfNavItem> | ||
| <MfNavItem value="designer">Designers</MfNavItem> | ||
| <MfNavItem value="clothing">clothing</MfNavItem> | ||
| <MfNavItem value="shoes">Shoes</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| <MfNavItem wide> | ||
| Home & Gifts | ||
| <MfNavigation slot="subnav" wide> | ||
| <MfNavItem value="sale" highlight>Sale</MfNavItem> | ||
| <MfNavItem value="new-in">New In</MfNavItem> | ||
| <MfNavItem value="designer">Designers</MfNavItem> | ||
| <MfNavItem value="clothing">clothing</MfNavItem> | ||
| <MfNavItem value="shoes">Shoes</MfNavItem> | ||
| </MfNavigation> | ||
| </MfNavItem> | ||
| </MfNavigation> | ||
| </MfHeader> | ||
| ); | ||
| ``` | ||
|
|
||
| {% endraw %} | ||
|
|
||
| [component-metadata:mf-header] |
Oops, something went wrong.