内置 Gem 元素

Gem 提供了一些常用的自定义元素, 他们没有默认内置, 需要自己手动引入:

import { html } from '@mantou/gem'; import '@mantou/gem/elements/link'; html`<gem-link path="/page"></gem-link>`;

类似 <a>，支持引用路由。

Name Description
GemLinkElement Bug: can't print <link>
GemActiveLinkElement

Name Description
GemLinkElement Bug: can't print <link>
GemActiveLinkElement

<gem-route>

提供路由匹配，可以嵌套。

Name Description
matchPath - 大小写敏感
- 匹配成功时返回 params
- 以 / 结尾时能不带 / 结尾的路径
- * 匹配到的 params 名称为数字
createPath
createHistoryParams
GemLightRouteElement
GemRouteElement

Name Description
matchPath - 大小写敏感
- 匹配成功时返回 params
- 以 / 结尾时能不带 / 结尾的路径
- * 匹配到的 params 名称为数字
createPath
createHistoryParams
GemLightRouteElement
GemRouteElement

<gem-light-route>

Name Description
matchPath - 大小写敏感
- 匹配成功时返回 params
- 以 / 结尾时能不带 / 结尾的路径
- * 匹配到的 params 名称为数字
createPath
createHistoryParams
GemLightRouteElement
GemRouteElement

<gem-title>

更新 document.title 或者显示在你需要他的地方。

Name Description
GemTitleElement

<gem-use>

类似 SVG 的 <use>。

Name Description
GemUseElement svg 中的 <use> 不能穿透 ShadowDOM,
此元素用来模拟 <use>,
由于是复制元素，所以不能像 <use> 一样自动更新
slot 支持为 icon 添加效果，如涟漪，徽章

<gem-reflect>

直接将字符串渲染成内容。

Name Description
GemReflectElement

<gem-gesture>

提供基本的手势支持，支持 pan, pinch, rotate, swipe, press, end 手势事件。

Name Description
GemGestureElement 块级元素，如果要设置成 contents，则内容块要设置 touch-action: none
https://javascript.info/pointer-events#event-pointercancel
在移动端上，必须设置 touch-action 以允许滚动等原生动作

<gem-unsafe>

直接将字符串在安全容器中渲染成 HTML/SVG 内容。

Name Description
GemUnsafeElement

其他

还有用于开发涉及历史记录栈组件的模块：

模块 描述
createModalClass 一个函数，他能生成一个可以显示 UI 的静态类
DialogBaseElement 一个类，基于他创建 Dialog 元素