export type FabricToolbarResetNavbarApi = () => void; declare class FabricError extends Error { code: string; message: string; data: any; protected constructor(code: string, message: string, data: any); toJSON: () => { name: any; code: any; data: any; message: any; description: any; number: any; fileName: any; lineNumber: any; columnNumber: any; stack: any; }; } export type ToolbarNavbarItemWithIcon = { /** * 按钮大小 IOS 30 X 30 默认尺寸 * Note: ICON设计准则: 周边留白为24px, 内容空间80 X 80; 总尺寸128 * 128为原图 * https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472 * type===`icon` */ iconSize?: number; }; export type ToolbarNavbarItemWithText = { /** * navbar字体大小 * @default 18 */ fontSize?: number; /** * 字体样式. 加粗, 斜体, 下划线. */ fontStyle?: Array<"bold" | "italic" | "underline">; /** * navbar字体颜色 */ fontColor?: string; /** * 仅`iOS`支持 * 字体权重, 支持字符串和数字,字符串支持, * 字符串类型: `ultraLight,thin,light,regular,medium,semibold,bold,heavy,black` * 数字类型: `1-1000`,`包含1和1000` * 字体权重 */ fontWeight?: "ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black" | number; }; export type ToolbarNavbarItemType = "icon" | "text"; export type ToolbarNavbarItem = (T extends "icon" ? ToolbarNavbarItemWithIcon : ToolbarNavbarItemWithText) & { /** * 自定义内容, 用来标识当前传递的内容项, 当自定义区域按钮点击时间的时候会返回这个tag用来标识当前点击的项 */ tag?: string; /** * 定义一个标记, 标识当前的item与默认的back按钮行为一致 * @default undefined */ asBackButton?: boolean; /** * 类型, `icon`|`text` */ type: T; /** * type: 'icon' * https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472 * `data:image/png;base64,iVBORw0K....` 如果是图片传递需要去掉`data:image/png;base64,` */ value: string; /** * 左边距 */ marginLeft?: number; /** * 右边距, */ marginRight?: number; }; export type FabricToolbarNavbarOptions = { /** * 状态栏/navbar背景色透明度, 采用字符串, 考虑到android内部number默认有值0, 不能区分是否为更新的设置的0还是默认值. * 0-255 */ opacity?: string; /** * 状态栏/navbar的背景色 */ bgColor?: string; /** * 线性梯度渐变. 优先级在bgColor之上. * 网页的rgba, 最后2位数是代表透明度. 取值16进制从00 -> FF(越小越透明),00表示完全透明, FF就是全不透明, 后面六位是色值 * 需要转换成Native约定的ARGB格式, 透明度放前2位 * background: -webkit-linear-gradient(top, #CE5937FF 0%, #1C6EA4FF 42%, #C59237FF 100%); * 公式如: background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下:先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4C。 * 常用透明度对应16进制关系 * ``` * .0(00) .1(19) .05(0C) .15(26) * .2(33) .3(4C) .25(3F) .35(59) * .4(66) .5(7F) .45(72) .55(8C) * .6(99) .7(B2) .65(A5) .75(BF) * .8(CC) .9(E5) .85(D8) .95(F2) * ``` * @see https://html-css-js.com/css/generator/gradient/ * @example * ```ts * { * direction: "top", * gradients:[ * ["#FFCE5937", 0] * ["#FF1C6EA4", 0.42] * ["#FFC59237", 1] * ] * } * ``` */ linearGradient?: { /** * 方位起点'top'|'left' */ direction: "top" | "left"; /** * 渐变数据 */ gradients: Array<[ string, number ]>; }; /** * 当自定义toolbar的back按钮的时候, 是否开启当前webview返回按钮默认行为支持浏览器栈(默认开启) * 当开启: 当前webview的`locationTo`(location.href)产生的栈, 返回默认优先返回浏览器的栈, 待无浏览器栈的时候再掉用户自定义callback(如果为定义callback, 直接返回上一级) * 当未开启: 点back按钮直接退出当前webview * 注意Note: 如果用户未配置navbar此时的back按钮应该保持默认支持浏览器栈的行为能力. * 注意Note: 如果当前没有`asBackButton`配置, 如果通过`asBackButton`找到最后一次back应该响应JS注册回调时间, 如果找不到`asBackButton` Native * 会尝试找默认back按钮(`left`未被占用)此时走native默认back行为. * @default true */ browserHistory?: boolean; /** * 状态栏风格 */ statusBarStyle?: "dark" | "light"; /** * navbar布局顺序, 默认值: `right-left-center(最后一个剩余空间(`center`)居中)`. * 如果需要让中间内容居中`left-center-right(最后一个剩余空间(`right`)居右)`或者`right-center-left(最后一个剩余空间`left`居左)` * @default `left-center-right` (形态2) */ layout?: "left-center-right" | "right-center-left" | "left-right-center" | "right-left-center" | "center-left-right" | "center-right-left"; /** * left[0]=左边区域左侧位置,left[1]=左边区域右侧位置 */ left?: ToolbarNavbarItem[]; /** * center[0]=中间区域左侧位置,center[1]=中间区域右侧位置 */ center?: ToolbarNavbarItem[]; /** * right[0]=右边区域左侧位置,right[1]=右边区域右侧位置 */ right?: ToolbarNavbarItem[]; }; export type ToolbarCallbackAction = "reset" | "update"; export type FabricToolbarSetNavbarApi = (options: FabricToolbarNavbarOptions, callback?: ((err: FabricError | null, clickedItemTag: string, action: ToolbarCallbackAction) => void) | undefined) => void; export type FabricToolbarSetPageTitleOptions = { bgColor?: string; fontColor?: string; statusBarStyle?: "dark" | "light"; }; export type FabricToolbarSetPageTitleApi = (title: string, options?: FabricToolbarSetPageTitleOptions) => void; export type FabricToolbarUpdateNavbarApi = (options: FabricToolbarNavbarOptions, callback?: ((err: FabricError | null, clickedItemTag: string, action: ToolbarCallbackAction) => void) | undefined) => void; export type FabricToolbarApi = { /** * 设置navbar. 如果开启float模式则需要在H5 url上增加 `ntv_float`参数 * 注意数据内容的配置与UI上`left`,`center`,`right`保持一致. */ setNavbar: FabricToolbarSetNavbarApi; /** * 更新navbar. 在极端情况下, 我们可能需要多次更新navbar, 这个时候我们不想每次全量传输数据, 比如有图片base64有性能问题. * 这个时候我们需要调用updateNavbar()进行第一级别的差异更新. * `opacity`, `bgColor`, `statusBarStyle`,`left`,`center`,`right` */ updateNavbar: FabricToolbarUpdateNavbarApi; /** * 重置标题栏, 如果当前是float模式, 仍然保持, 只是重置调toolbar设置的按钮相关功能. */ resetNavbar: FabricToolbarResetNavbarApi; /** * 设置自定义标题 */ setPageTitle: FabricToolbarSetPageTitleApi; }; export declare const fabricToolbar: FabricToolbarApi; export {};