<dy-side-navigation>
A navigation component that displays a hierarchical menu structure on the side of a page. It supports nested items, groups, icons, and automatic collapsing when space is limited.
Example
Loading...
<dy-side-navigation style=${"width: 240px"} .items=${ [ {"title":"Page 1","hash":"#1"}, {"title":"Page 2","hash":"#2"}, {"title":"Page 3","hash":"#3"}, { "title": "Group 2", "group": [ {"title":"Route 1","hash":"#4"}, {"title":"Route 2","hash":"#5"}, {"title":"Route 3","hash":"#6"} ] } ] }></dy-side-navigation>
API
DuoyunSideNavigationElement
Shadow DOM; Extends DuoyunScrollBaseElement
DuoyunSideNavigationElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
items |
Yes | NavItems |
DuoyunSideNavigationElement Other
| Type | Value |
|---|---|
| Part | item, group, group-title, group-body |
| CSS State | compact |
TapScrollBaseElement
Shadow DOM; Extends TapResizeBaseElement
TapScrollBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
disableScrollMask(disable-scroll-mask) |
Yes | boolean |
TapScrollBaseElement Other
| Type | Value |
|---|---|
| CSS State | top-overflow, right-overflow, bottom-overflow, left-overflow |
TapResizeBaseElement
Extends GemElement
TapResizeBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
resize |
Emitter<ResizeDetail> |
|
resizeThrottle |
Yes | boolean |
borderBoxSize |
{ blockSize: number; inlineSize: number; } |
|
contentRect |
{ x: number; y: number; height: number; width: number; } |
TapResizeBaseElement Other
| Type | Value |
|---|---|
| Event | resize |