Skip to content

Commit

Permalink
Merge pull request #2301 from exadel-inc/uip-menu
Browse files Browse the repository at this point in the history 
chore(site): ui-playground integration for menu
  • Loading branch information
@ala-n
ala-n authored Apr 3, 2024
2 parents 929b6dd + 2565cf7 commit 9539041
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 122 deletions.
19 changes: 15 additions & 4 deletions site/src/common/dropdown-menu.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@
align-items: center;
width: 100%;
min-height: 3.5rem;
background-color: @primary-blue;
margin: 0;
border: 1px solid @secondary-blue;
border-radius: 8px;
padding: 0 0.5rem;

.menu-item {
position: relative;
display: block;
list-style: none;
color: #fff;

&:not(:first-child) {
border-left: 1px solid @secondary-blue;
}
}

.menu-item-btn {
Expand Down Expand Up @@ -61,8 +64,9 @@
z-index: 99;

color: black;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 2px 2px 6px rgba(161, 160, 160, 0.4);
box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
transform: translate3d(0, 0, 0);

Expand Down Expand Up @@ -103,3 +107,10 @@
border-top: 1px solid rgb(202, 201, 201);
}
}

.esl-popup-menu {
min-width: 200px;

color: black;
border-radius: 8px;
}
219 changes: 101 additions & 118 deletions site/views/examples/menu.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: content
title: Menu
seoTitle: Simple menu ui example based on ESL web components
name: Menu
tags: examples
tags: [examples, playground]
icon: examples/menu.svg
aside:
components:
Expand All @@ -15,123 +15,106 @@ aside:

<section class="row">
<div class="col-12">
<h2>Simple Hover Menu:</h2>

<ul class="esl-example-menu">
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow"
target="::next"
track-hover
hover-hide-delay="400">
Hover Menu 1
</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on="li" close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow"
target="::next"
track-hover
hover-hide-delay="400">
Hover Menu 2
</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on-esc close-on-outside-action>
<div class="esl-example-menu-400">{{ lorem.paragraphs(1) }}</div>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow"
target="::next"
track-hover
hover-hide-delay="400">
Hover Menu 3
</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on="li" close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</esl-panel>
</li>
</ul>
<uip-root>
<script type="text/html" uip-snippet uip-isolated label="Simple Menu">
<ul class="esl-example-menu">
<li class="menu-item">
<esl-trigger class="menu-item-btn" target="::next">Menu 1</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on="li" close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn" target="::next">Menu 2</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on-esc close-on-outside-action>
<div class="esl-example-menu-400">
<!-- text 50 -->
</div>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn" target="::next">Menu 3</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on="li" close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</esl-panel>
</li>
</ul>
</script>
<script type="text/plain" uip-js-snippet label="Simple Menu">
import { ESLPanel, ESLTrigger } from '@exadel/esl';
ESLPanel.register();
ESLTrigger.register();
</script>
<script type="text/html" uip-snippet label="Popup Menu">
<ul class="esl-example-menu">
<li class="menu-item">
<esl-trigger mode="toggle" class="menu-item-btn" target="::next">Menu 1</esl-trigger>
<esl-popup class="esl-popup-menu disable-arrow" position="bottom" offset-arrow="20">
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</esl-popup>
</li>
<li class="menu-item">
<esl-trigger mode="toggle" class="menu-item-btn" target="::next">Menu 2</esl-trigger>
<esl-popup class="esl-popup-menu disable-arrow" position="bottom" offset-arrow="13">
<div class="esl-example-menu-400">
<!-- text 50 -->
</div>
</esl-popup>
</li>
<li class="menu-item">
<esl-trigger mode="toggle" class="menu-item-btn" target="::next">Menu 3</esl-trigger>
<esl-popup class="esl-popup-menu disable-arrow" position="bottom" offset-arrow="20">
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</esl-popup>
</li>
</ul>
</script>
<script type="text/plain" uip-js-snippet label="Popup Menu">
import { ESLPopup, ESLTrigger } from '@exadel/esl';
ESLPopup.register();
ESLTrigger.register();
</script>
<uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
<uip-preview></uip-preview>
<uip-settings target="esl-trigger" label="Settings" resizable vertical="@+sm">
<uip-bool-setting target=".menu-item-btn" label="Hover" attribute="track-hover"></uip-bool-setting>
</uip-settings>
<uip-editor label="Source code" collapsible copy></uip-editor>
<uip-editor source="js" copy collapsible label="JavaScript"></uip-editor>
</uip-root>
</div>
</section>

<section class="row">
<div class="col-12">
<h2>Simple Menu:</h2>

<ul class="esl-example-menu">
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow" target="::next">Menu 1</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on="li" close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow" target="::next">Menu 2</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on-esc close-on-outside-action>
<div class="esl-example-menu-400">{{ lorem.paragraphs(1) }}</div>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow" target="::next">Menu 3</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on="li" close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</esl-panel>
</li>
</ul>
</div>
</section>

0 comments on commit 9539041

Please sign in to comment.