wjd
/
rui-neng
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(mask): enhance expandable mask navigation with subitem support and styling adjustments

master
peijunlei 2 weeks ago
parent
2a15d708ea
commit
0010ac5ed5
3 changed files with 114 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      public/themes/dist_static/static/css/common.css
  2. 6
      public/themes/dist_static/static/js/common.js
  3. 100
      public/themes/website/1/zh/demo/components/mask.html

14
public/themes/dist_static/static/css/common.css
View File

@ -1997,7 +1997,7 @@ body {
height: 1rem; height: 1rem;
flex-shrink: 0; flex-shrink: 0;
transition: transform var(--duration-normal) var(--easing); transition: transform var(--duration-normal) var(--easing);
}.mask-nav__item--expandable[data-expanded="true"] .mask-nav__icon {
}.mask-nav__item--expandable[data-expanded="true"] > .mask-nav__link .mask-nav__icon {
transform: rotate(45deg); transform: rotate(45deg);
}/* ── 子菜单列表（grid 展开动画） ── */.mask-nav__sublist-wrapper { }/* ── 子菜单列表（grid 展开动画） ── */.mask-nav__sublist-wrapper {
display: grid; display: grid;
@ -2007,8 +2007,11 @@ body {
}.mask-nav__sublist { }.mask-nav__sublist {
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
}.mask-nav__item[data-expanded="true"] .mask-nav__sublist-wrapper {
}.mask-nav__item[data-expanded="true"] > .mask-nav__sublist-wrapper,
.mask-nav__subitem--expandable[data-expanded="true"] > .mask-nav__sublist-wrapper {
grid-template-rows: 1fr; grid-template-rows: 1fr;
}.mask-nav__subitem--expandable[data-expanded="true"] > .mask-nav__sublink .mask-nav__icon {
transform: rotate(45deg);
}.mask-nav__subitem { }.mask-nav__subitem {
border-bottom: 1px solid rgba(223, 224, 226, 1); border-bottom: 1px solid rgba(223, 224, 226, 1);
}.mask-nav__subitem:last-child { }.mask-nav__subitem:last-child {
@ -2017,18 +2020,25 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%;
padding: 16Px 0; padding: 16Px 0;
border: none;
background: transparent;
font-family: "MiSans VF", "PingFang SC", sans-serif; font-family: "MiSans VF", "PingFang SC", sans-serif;
font-size: 14Px; font-size: 14Px;
font-weight: 400; font-weight: 400;
line-height: var(--font-18); line-height: var(--font-18);
color: var(--color-text-muted); color: var(--color-text-muted);
text-decoration: none; text-decoration: none;
cursor: pointer;
text-align: left;
transition: color var(--duration-fast) var(--easing); transition: color var(--duration-fast) var(--easing);
&:hover { &:hover {
color: var(--color-primary); color: var(--color-primary);
} }
}.mask-nav__sublist--l2 .mask-nav__sublink {
padding-left: 1rem;
}/* ── 子菜单箭头 > ── */.mask-nav__arrow { }/* ── 子菜单箭头 > ── */.mask-nav__arrow {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;

6
public/themes/dist_static/static/js/common.js
View File

@ -97,10 +97,10 @@ $(function() {
setMaskOpenUi(false); setMaskOpenUi(false);
}); });
$(".mask-nav__toggle").on("click", function() { $(".mask-nav__toggle").on("click", function() {
const $item = $(this).closest(".mask-nav__item--expandable");
const $item = $(this).closest(".mask-nav__item--expandable, .mask-nav__subitem--expandable");
const isExpanded = $item.attr("data-expanded") === "true"; const isExpanded = $item.attr("data-expanded") === "true";
$item.attr("data-expanded", !isExpanded);
$(this).attr("aria-expanded", !isExpanded);
$item.attr("data-expanded", String(!isExpanded));
$(this).attr("aria-expanded", String(!isExpanded));
}); });
// $(".section-contact-form").on("submit", function(e) { // $(".section-contact-form").on("submit", function(e) {
// e.preventDefault(); // e.preventDefault();

100
public/themes/website/1/zh/demo/components/mask.html
View File

@ -46,9 +46,107 @@
{php} {php}
$mask_title = $vo['title'] ?? ''; $mask_title = $vo['title'] ?? '';
$mask_href = $vo['href'] ?? ''; $mask_href = $vo['href'] ?? '';
$mask_cid = (int)($vo['category_id'] ?? 0);
$mask_children = $vo['children'] ?? []; $mask_children = $vo['children'] ?? [];
$mask_is_solution = ($mask_cid === 345);
{/php} {/php}
{if condition="!empty($mask_children)"}
{if $mask_is_solution}
<!-- 解决方案：一级可继续展开二级（栏目树） -->
<li class="mask-nav__item mask-nav__item--expandable" data-expanded="false">
<button class="mask-nav__link mask-nav__toggle" type="button" aria-expanded="false">
<span>{$mask_title}</span>
<svg
class="mask-nav__icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M12 5v14" />
<path d="M5 12h14" />
</svg>
</button>
<div class="mask-nav__sublist-wrapper">
<ul class="mask-nav__sublist">
{hcTaglib:allSubCategory pid="345" item="sol" sort=""}
{php}
$sol_children = $sol['children'] ?? [];
$sol_has_children = !empty($sol_children);
$sol_href = $sol['alias'] ?? '';
{/php}
{if $sol_has_children}
<li class="mask-nav__subitem mask-nav__subitem--expandable" data-expanded="false">
<button class="mask-nav__sublink mask-nav__toggle" type="button" aria-expanded="false">
<span>{$sol.title}</span>
<svg
class="mask-nav__icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M12 5v14" />
<path d="M5 12h14" />
</svg>
</button>
<div class="mask-nav__sublist-wrapper">
<ul class="mask-nav__sublist mask-nav__sublist--l2">
{volist name="sol_children" id="sol2"}
<li class="mask-nav__subitem">
<a href="{$sol2.alias}" class="mask-nav__sublink">
<span>{$sol2.title}</span>
<svg
class="mask-nav__arrow"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" />
</svg>
</a>
</li>
{/volist}
</ul>
</div>
</li>
{else /}
<li class="mask-nav__subitem">
<a href="{$sol_href}" class="mask-nav__sublink">
<span>{$sol.title}</span>
<svg
class="mask-nav__arrow"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" />
</svg>
</a>
</li>
{/if}
{/hcTaglib:allSubCategory}
</ul>
</div>
</li>
{elseif condition="!empty($mask_children)" /}
<li class="mask-nav__item mask-nav__item--expandable" data-expanded="false"> <li class="mask-nav__item mask-nav__item--expandable" data-expanded="false">
<button class="mask-nav__link mask-nav__toggle" type="button" aria-expanded="false"> <button class="mask-nav__link mask-nav__toggle" type="button" aria-expanded="false">
<span>{$mask_title}</span> <span>{$mask_title}</span>

Write Preview
Loading…
Cancel
Save