Canonical 全球导航
此工程包含 JavaScript 和样式, 用于在其中添加一个“ All Canonical” 导航滴入项 香草导航模式。 。 。 .
降下包含一个Canonical生态系统网站列表,使一个用户能够轻松地跳过核心站点.
重要 - 不要使用3.7.x 版本
全球导航3.7.x、3.7.x和3.7.x版本对下放菜单的滑动导航进行了修改, 不知此工程只应包含“ All Canonical” 链接的代码 我们大部分网站的导航.
3.8.0版本中所有这些改动都已恢复,3.6.4版本的编码相同 (3.7.0前释放).
使用量
使用节点软件包管理器安装此组件,然后将JS文件链接到您站点的头部,带有可选设置.
样式将自动注入页面 <head>。 。 。 .
- 通过纱线或 npm 安装
yarn add @canonical/global-nav
或者说...
npm install @canonical/global-nav --save
- 然后可以通过直接链接或通过ES6导入来安装库.
要直接使用该图书馆,请在JS文件中添加一个链接,其中包含 IIFE (英语) 运行 canonicalGlobalNav.createNav() 函数;
<script src="/node_modules/@canonical/global-nav/dist/iife.js"></script>
<script>
canonicalGlobalNav.createNav();
</script>
要导入它,只需从你的全网站JS文件中调用它;
import { createNav } from '@canonical/global-nav';
createNav();
- 然后您需要添加
.global-nav类为 aul.p-navigation__items。导航模式中的元素。 模块将查找此类, 并添加下拉作为列表的第一个项目 .
字体
从4.0.0版本开始,注入的样式不再包括Ubuntu字体. 导航 "Ubuntu variable" 但期望页面能加载它.
- 如果你的网站使用香草,你已经有了: 香草的基底样式包括字体.
- 如果您的网站主机字体本身,没有改变:导航使用您
@font-face规则. - 否则在您网站的CSS中添加这些规则:
@font-face {
font-family: 'Ubuntu variable';
font-stretch: 100%;
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('https://assets.ubuntu.com/v1/f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2');
}
@font-face {
font-family: 'Ubuntu variable';
font-stretch: 100%;
font-style: italic;
font-weight: 100 800;
font-display: swap;
src: url('https://assets.ubuntu.com/v1/90b59210-Ubuntu-Italic%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2');
}
这些都是相同的文件 香草装载。 没有它们,导航就会回到系统字体.
选项
这个 createNav 函数带有以下属性的选项对象:
-
breakpoint: 该点以像素为单位,导航开关在桌面和移动布局之间. 默认是620px,用于反映$breakpoint-navigation-threshold香草(见 香草的断点文件) (中文(简体) ). -
mobileContainerSelector财务报告和审定财务报表desktopContainerSelector: 选择器(可以是"id"或"class"),用于附加全局导航的移动和桌面视图. 这也将绕过默认事件听从者被附加,因为他们依赖于默认结构,所以自定义JS将是nessacary. 还有这个,班级global-nav仍然应该用于表示“全条”标签按钮的位置。 如果使用 Ony , 它会使默认的全球导航 .
如果 $breakpoint-navigation-threshold 香草变量在您的项目中被覆盖, 您需要设置此选项在全球导航上 .
例如,设置 breakpoint 改为 1036数字 :
<script src="/node_modules/@canonical/global-nav/dist/index.js"></script>
<script>
canonicalGlobalNav.createNav({
breakpoint: 1036,
mobileContainerSelector: 'global-nav-mobile',
desktopContainerSelector: 'global-nav-desktop',
});
</script>
如果你正在进口;
import { createNav } from '@canonical/global-nav';
createNav({ breakpoint: 1036 });
建设全球导航
将联署材料纳入 /dist 文件夹, 运行 :
./run build
本地运行项目
本地运行最简单的方式是首先 安装嵌入器 (在Linux上,你可能需要 将您的用户添加到 docker 组),然后使用 ./run 脚本 :
./run
你也可以使用这个 点数快取,通过运行:
dotrun
集装箱装好后,你就可以参观了 http://127.0.0.1:8300 (中文(简体) ) 在您的浏览器中.
监视已更改的文件
因为工作 Sass 文件 财务报告和审定财务报表 联合来文文件 中,您可能想要动态地监视修改,以在有变化时重建 dist 文件.
要设置监视器,请打开一个新的终端窗口并运行:
./run watch
在提交拉拉请求之前 进行测试 检查JS和Sass是否出错.
./run test
如何添加内置 svgs
只是因为有点痛, 这就是我所做的.
- 收缩svg 尽可能多
- 上传到其他资产服务器 - OPTIONAL
- 在浏览器中查看并抓取源代码.
- 从双倍转换引号
"改为单'- 绿色 - 编码 svg
- 将此添加为
data:image/svg+xml,在产品细节的正确位置。 编
香草的更新
该项目使用 香草框架 直接导入 SCSS 文件以构建全局导航本身的样式( 通过 vanilla-framework npm 软件包, 以依赖性定义 软件包.json)和演示页的样式(通过在 索引.html 存档).
将香草更新到最新版本时 两个依赖关系 应更新.
释放过程
软件包使用 语义版本 并公布于国家预防机制登记册.
要剪切新发布运行 :
npm version [patch|minor|major]
这将触发 prepublishonly 脚本将确保在出版前建立必要的手工艺品.
代码许可LGPLv3 由Canonical Ltd.
和来自Canonical的..