面粉布局
向面粉模板中添加一个包装和部分,并包含一系列设置和功能.
如何安装
npm install -s @flourish/layout
添加一个 layout 对象到模板状态 :
export var state = {
layout: {},
...
}
导入 @flourish/layout 进入您的 template.yml 设置.
如何使用
初始化任何函数外的布局( 只一次) 布局设置对象数字 :
import initLayout from "@flourish/layout";
var layout = initLayout(state.layout);
这增加了一个 main 包装 转到有5个名称的页面 section编号: 标题, (中文(简体) ), 控件, (中文(简体) ), 传说, (中文(简体) ), 小学 财务报告和审定财务报表 页脚编辑 小学 区域是一个灵活的容器,在高度上进行调整,以在另一个区域的内容之后填补可用的空间 sections已考虑在内。 这个 initLayout 调用还添加隐藏 覆盖 div 页:1 小学 如果一个模板在旧浏览器中无法工作的话,可以用来显示一个消息.
这个 layout 对象有多种方法:
layout.getDefaultPrimaryHeight()
如果使用标准的面粉断点( 除非在 fixed_height 模式,在此情况下返回实际可用的高度。 在使用标准面粉断点与使用 setHeight 方法(见下文).
layout.getOuterHeight([el])
返回命名的高度 section包括贴花 若为 el 时,函数返回高度 包装 节点,包括地垫.
layout.getOuterWidth([el])
返回命名的宽度 section包括贴花 若为 el ,函数返回宽度 包装 节点,包括地垫.
layout.getOverlay()
返回( 隐藏- 默认) 覆盖 div 节点.
layout.getInnerHeight([el])
返回命名的高度 section,不包括贴花. 若为 el 时,函数返回高度 包装 节点,不包括地垫.
layout.getInnerWidth([el])
返回命名的宽度 section,不包括贴花. 若为 el ,函数返回宽度 包装 节点,不包括地垫.
layout.getPrimaryHeight()
返回主容器内内容可用的高度.
layout.getPrimaryWidth()
返回主容器内内容可用的宽度.
layout.getSection(el)
返回内部的容器节点 section el。例如,这有利于在图例中添加一个图例块 传说 在面粉中的区域 draw 方法。 (直接添加到 section 应该避免,因为这会弄得一团糟。 )
layout.getSidebar()
返回 sidebar 节点.
layout.getWrapper()
返回 main 包装 节点.
layout.remToPx(rem)
返回像素值为雷姆值。 当您需要在 SVG 中添加 rem 值时,此功能是有用的 .
layout.setHeight(primary_height)
若为 primary_height 是数字,然后计算 total_height 需要满足 小学 在那个高地和所有其他 sections 在当前高度进入页面时没有滚动条和呼叫 Flourish.setHeight(total_height)如果 primary_height 等于 null 然后打电话 Flourish.setHeight(null)。 。 。 .
layout.showOverlay(show_overlay)
若为 show_overlay 是真的,它会显示 覆盖容器,如果它是发酵 它会隐藏它。 若为 show_overlay 是一个(非空的)字符串,然后该字符串将被用作覆盖内包含的段落元素的内容。 若为 show_overlay 是一个不是字符串的真理值,然后显示默认文本,建议用户更新其浏览器.
layout.update()
更新字体, section 基于当前值的顺序、标题和页脚 布局设置对象。 。 。 .
layout.awaitFonts(callback, duration, font_weights)
开始装入字体并执行一个函数 callback 当所有字体都装入时(使用 document.fonts.ready 事件听众)。 如果可选数组 font_weights 为每个字体重量提供无形的样本文本,然后在装入该重量时删除。 这样就停了 callback 正在对字体的每个重量不必要地触发。 例如,如果一个模板只包含有正常重量的字体,则包括粗体字体的弹出会触发字体加载事件. font_weights 默认为 ["normal", "bold"] (数字值也被接受). 如果所有字体没有被给定的加载 duration (ms,默认为500),那么回调会提前执行. 当字体最终装入完成时,调用会被再次执行. 一旦 document.fonts.ready 已触发事件,将设置一个新的事件倾听器,以收听进一步的字体加载事件,即在编辑器中选择一个新的字体. 这在v5.4.中被引入. 使用模块以前的版本更新模板(使用 @flourish/font-观察者)至v5.4及以上 v5.4 移徙指南。 。 。 .
layout.prepareScreenshotSVG()
创建包含页眉和页脚文本的临时 SVG,这些文本将包含在 SVG 导出中 。 在模板中确保调用此函数 screenshot 函数.
layout.clearScreenshotSVG()
删除由 layout.prepareScreenshotSVG()