ns plugin add @nstudio/nativescript-loading-indicator
tns plugin add @nstudio/nativescript-loading-indicator@3.0.x
import {
LoadingIndicator,
Mode,
OptionsCommon,
} from '@nstudio/nativescript-loading-indicator';
const indicator = new LoadingIndicator();
const options: OptionsCommon = {
message: 'Loading...',
details: 'Additional detail note!',
progress: 0.65,
margin: 10,
dimBackground: true,
color: '#4B9ED6', // color of indicator and labels
// background box around indicator
// hideBezel will override this if true
backgroundColor: 'yellow',
userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
hideBezel: true, // default false, can hide the surrounding bezel
mode: Mode.AnnularDeterminate, // see options below
android: {
view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
cancelable: true,
cancelListener: function (dialog) {
console.log('Loading cancelled');
},
},
ios: {
view: someButton.ios, // Target view to show on top of (Defaults to entire window)
square: false,
},
};
indicator.show(options);
// after some async event maybe or a timeout hide the indicator
indicator.hide();
const LoadingIndicator = require('@nstudio/nativescript-loading-indicator')
.LoadingIndicator;
const Mode = require('@nstudio/nativescript-loading-indicator').Mode;
const loader = new LoadingIndicator();
// optional options
// android and ios have some platform specific options
const options = {
message: 'Loading...',
details: 'Additional detail note!',
progress: 0.65,
margin: 10,
dimBackground: true,
color: '#4B9ED6', // color of indicator and labels
// background box around indicator
// hideBezel will override this if true
backgroundColor: 'yellow',
userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
hideBezel: true, // default false, can hide the surrounding bezel
mode: Mode.AnnularDeterminate, // see options below
android: {
view: android.view.View, // Target view to show on top of (Defaults to entire window)
cancelable: true,
cancelListener: function (dialog) {
console.log('Loading cancelled');
},
},
ios: {
view: UIView, // Target view to show on top of (Defaults to entire window)
},
};
loader.show(options); // options is optional
// Do whatever it is you want to do while the loader is showing, then
loader.hide();
export interface OptionsCommon {
/**
* Message in the loading indicator.
*/
message?: string;
/**
* Details message in the loading indicator.
*/
details?: string;
/**
* Color of the message text.
*/
color?: string;
/**
* Background color of the loading indicator.
*/
backgroundColor?: string;
/**
* Progress of the indicator when not using CustomView or Text Mode.
*/
progress?: number;
/**
* Margin for the message/indicator to the edge of the bezel.
*/
margin?: number;
/**
* Set true to allow user interaction.
*/
userInteractionEnabled?: boolean;
/**
* Dim the background behind the indicator.
*/
dimBackground?: boolean;
/**
* Hide bezel around indicator
*/
hideBezel?: boolean;
/**
* The mode of the loading indicator.
*/
mode?: Mode;
/**
* If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
*/
customView?: any;
/**
* iOS specific configuration options.
*/
ios?: OptionsIOS;
/**
* Android specific configuration options.
*/
android?: OptionsAndroid;
}
export interface OptionsAndroid {
/**
* Native View instance to anchor the loading indicator to.
*/
view?: android.view.View;
max?: number;
progressNumberFormat?: string;
progressPercentFormat?: number;
progressStyle?: number;
secondaryProgress?: number;
cancelable?: boolean;
cancelListener?: (dialog: any) => void;
elevation?: number;
}
export interface OptionsIOS {
/**
* Native View instance to anchor the loading indicator to.
*/
view?: UIView;
square?: boolean;
}
export enum Mode {
Indeterminate = 0,
Determinate = 1,
DeterminateHorizontalBar = 2,
AnnularDeterminate = 3,
CustomView = 4,
Text = 5,
}
加载提示的过渡效果。 支持 安装 $ npm install universal-loading --save 方法 show(options) 显示 loading 提示框。 参数 属性 类型 默认值 必选 描述 支持 content String √ 提示中的文字内容 delay Number 0 x 延迟显示,单位 ms mask Boolean false x 是否显示透明蒙层,防止触摸穿
简介 <loading> 为容器提供上拉加载功能。 注意 <loading> 是 <scroller>、<list>、<waterfall> 的子组件,只能在被它们包含时才能被正确渲染。 <scroller> <div v-for="num in lists"> <text>{{num}}</text> </div> <loading> <text>Loading<
加载,提供了可自定义大小的加载动画。 示例 图标大小 默认大小为24px,可通过size属性配置 <cube-loading></cube-loading> <cube-loading :size="28"></cube-loading> <cube-loading :size="40"></cube-loading> Props 配置 参数 说明 类型 默认值 size 加载图标的大小,单位p
Weex 加载提示组件 规则 让用户知道页面正在加载 在某些特定场景下,提供有意义的文案,帮助用户明白哪个任务正在进行中 局部 Loading 不建议设置太大 Demo 使用方法 <template> <div> <wxc-loading :show="isShow" type="trip"></wxc-loading> <wxc-part-loading
描述 (Description) 在延迟加载中,即使未声明变量,也可以使用变量。 例子 (Example) 以下示例演示了在LESS文件中使用lazy loading of variable - <html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> <title>L
描述 (Description) 延迟加载,当用于大尺寸多媒体文件时,需要花费时间来加载诸如图片,视频等。 例子 (Example) 以下示例演示了延迟加载的使用,它通过触发Framework7中的“lazy”事件来加载图像 - <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = dev