爱招飞帮助手册
目录

附控控件

# FastWeb附控控件

  • 适用平台： APP(移动端)

# 1. TUgFSConfirm

  此控件用于设定显示确认的提示对话框。

# 1.1. 属性

属性 功能说明
BackgroundDismiss 设置点击背景时是否忽视操作
boxWidth 设置显示的提示框的宽度
ButtonEnterConfirm 设置按下enter按键表示为确认
ButtonTextCancel 设置取消按钮上显示的文本内容
ButtonTextConfirm 设置确认按钮上显示的文本内容
ButtonTextOK 设置OK按钮上显示的文本内容
ButtonTextOther 设置Other按钮上显示的文本内容
CloseIcon 设置是否显示关闭按钮
Content 设置提示框中显示的正文的内容
Draggable 设置提示框是否可以被鼠标拖动
EscapeKey 设置控件是否响应esc按键
Icon 设置显示的字体图标，所有可用的文本图标的样式请查阅https://fontawesome.com/v5.0/icons (opens new window)
PromptType 如果提示框需要用户输入信息以进行确认提示的，则可设置其中的相关选项
ScreenMask 设置是否使用屏幕提示的友好信息框
Theme 设置提示框显示的主题
Title 设置提示框的标题内容
TypeAnimated 设置输入框中的内容是否以动画方式显示
TypeColor 设置输入框中主题显示的颜色
TypeConfirm 设置输入确认提示框的样式

# 1.1.1. PromptType

property PromptType: TUniFSPromptType;
1

  设置需要输入的提示框中的相关信息。

名称 说明
CharCase 设置文字的大小写类型
Normal_：设置文字为正常模式，即保持所有文字默认的大小写情形
LowerCase_：所有的英文字符均转换为小写
UpperCase_：所有的英文字符均转换为大写
RequireField 是否设置文字输入为必须操作
TextRequireField 设置文字输入为必须操作的提示信息
TypePrompt 设置输入的文字显示的类型
text：设置显示为文本类型
password：设置显示为密码字符类型

# 1.1.2. ScreenMask

property ScreenMask: TUniFSScreenMask;
1

  设置屏幕友好提示信息，用于在处理过程中的显示内容。

名称 说明
Enabled 设置是否启用遮罩的功能
Text 设置屏幕遮罩上显示的文本内容

# 1.2. 事件

# 1.2.1. OnAlert

procedure UgFSConfirm01OnAlert(confirmbutton: tconfirmbutton);
1

  当在警告的对话框中按下确认按钮后触发事件。

# 1.2.2. OnConfirm

procedure UgFSConfirm01OnConfirm(confirmbutton: tconfirmbutton);
1

  当在确认的对话框中按下确认按钮后触发事件。

# 1.2.2.1. OnPrompt
procedure UgFSConfirm01OnPormpt(confirmbutton: tconfirmbutton;result: string);
1

  当在输入的对话框中按下确认按钮后触发事件，result中存储输入的文本内容。

# 1.3. 方法

# 1.3.1. Clear

procedure Clear;
1

  设置清除内容。

# 1.3.2. ShowMask

procedure ShowMask(Msg: string);
1

  调用显示相关信息的遮罩。

# 1.3.3. ShowMaskPercent

procedure ShowMaskPercent(Msg: string; Percent: Integer);
1

  设置显示包含进度条信息的遮罩。

# 1.3.4. ShowMaskJSName

procedure ShowMaskJSName(Msg: string; JSName: string);
1

  调用指定控件JS的遮罩信息。

# 1.3.5. ShowMaskUpdate

procedure ShowMaskUpdate(Msg: string; Percent: Integer);
1

  当遮罩启用时设置遮罩的百分比数值更新。

    //JScript
  try{
    UgFSConfirm01.ShowMaskPercent("Starting Processing...",10);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Creating Order...",25);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Processing Payment...",70);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Ending Asking...",90);
    Sleep(1000);
    UgFSConfirm01.ShowMaskUpdate("Ending Asking...",100);
    Sleep(1000);
    UgFSConfirm01.Alert("Thanks for the purchase","Order 561560");
  }
  finally{
    UgFSConfirm01.RemoveMask;
  }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //PasScript
  //更新进度的设置
  try
    UgFSConfirm01.ShowMaskPercent('Starting Processing...',10);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Creating Order...',25);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Processing Payment...',70);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Ending Asking...',90);
    Sleep(1000);
    UgFSConfirm01.ShowMaskUpdate('Ending Asking...',100);
    Sleep(1000);
    UgFSConfirm01.Alert('Thanks for the purchase','Order 561560');
  finally
    UgFSConfirm01.RemoveMask;
  end;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // Make sure to add code blocks to your code group

    # 1.3.6. RemoveMask

    procedure RemoveMask;
    1

      如果当前正在显示遮罩，使用此方法可移除遮罩。

    # 1.3.7. Alert

    procedure Alert(const Title: string; const Content: string);
    1

      设置警告提示信息。

    # 1.3.8. Prompt

    procedure Prompt(const Title: string; const Msg: string);
    1

      设置文本的输入信息。

    # 1.3.9. Question

    procedure Question(const Title: string; const Content: string; TP: TTypeConfirm);
    1

      显示提问类型的对话框。

    # 1.3.10. Mask

    procedure Mask(const Msg: string);
    1

      显示遮罩。

    # 2. TUgAppFSToggle

      该组件显示为一个滑动开关，点击实现动态的滑动，以达到开关显示的效果。

    # 2.1. 属性

    名称 说明
    ThemeOff 关闭状态的颜色
    ThemeOn 开启状态的颜色
    TitleOff 关闭状态下显示的文字标题
    TitleOn 开启状态下显示的文字标题
    Toggled 开关是否处于开启状态

    # 2.1.1. ThemeOff

    procedure ThemeOff: TThemeToggle;
    1

      设置关闭状态下按钮显示的样式颜色，可从下拉选框中选择颜色主题样式。

    # 2.1.2. ThemeOn

    procedure ThemeOn: TThemeToggle;
    1

      设置开启状态下按钮显示的样式颜色，可从下拉选框中选择颜色主题样式。

    # 2.1.3. TitleOff

    property TitleOff: string;
    1

      设置关闭状态下显示的文字标题。

    # 2.1.4. TitleOn

    property TitleOn: string;
    1

      设置开启状态下显示的文字标题。

    # 2.1.5. Toggled

    property Toggled: Boolean;
    1

      设置开关当前的状态，当设置为True时，开关为On状态，反之，开关为Off状态。

    # 2.2. 事件

    事件 触发条件
    OnToggled 当开关状态切换时触发该事件

    # 3. TUgAppFSGoogleChart

      该组件使用Google图表进行数据展示。可显示面积图，柱状图等相关的统计图表。

    # 3.1. 属性

    属性 功能说明
    ChartType 设定图表的类型
    ChartDataSet 设定图表绑定的数据集
    ChartOptions 图表的相关设置选项

    # 3.1.1. ChartType

    property ChartType: TChartType;
    1

      设定GoogleChart的图表类型。

    名称 说明 图示
    AreaChart 面积图
    Bar 柱状图
    BubbleChart 气泡图
    Gauge 仪表盘
    GeoChart 地理信息图
    LineChart 线型图
    PieChart 饼图

    # 3.1.2. ChartDataSet

    property ChartDataSet: TDataSet;
    1

      设定数据来源的数据集控件名称。

    # 3.1.3. ChartOptions

    property ChartOptions: TStrings;
    1

      图表设置的相关选项。该选项以JSON格式进行存储。

    • GeoChart选项

      一个GeoChart选项设置如下：

    displayMode: "region",
backgroundColor: "#81d4fa",
colorAxis: {colors: ["#00853f", "black", "#e31b23"]},
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},
    1
    2
    3
    4
    名称 说明
    displayMode 地理图类型，数据表类型需与数据展示的类型相匹配，支持以下类型：
    auto:根据数据表的类型自动选择
    regions:可为区域上色的地理图
    markers:在区域内放置标记
    text:为区域标记数据表中的文本内容
    backgroundColor 设置图表的背景颜色，可以是HTML定义的颜色，比如red或者#00cc00。
    colorAxis 规定值地图的颜色列的数值
    tooltip 提示工具的相关选项

      如需要更详细的设置选项以实现自定义图表，点击GoogleChart GeoChart文档 (opens new window)查阅。

    • PieChart选项

      一个PieChart选项设置如下：

    title: "My Daily Activities (1)", 
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},
    1
    2
    名称 说明
    title 标题名称
    tooltip 提示框的相关选项

      如需要更详细的设置选项以实现自定义图表，点击GoogleChart PieChart文档 (opens new window)查阅。

    • Gauge选项

      一个Gauge选项设置如下：

    redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
    1
    2
    3
    名称 说明
    redFrom 显示红色区域的起始值
    redTo 显示红色区域的终止值
    yellowFrom 显示黄色区域的起始值
    yellowTo 显示黄色区域的终止值
    minorTicks 在两个显示数值的刻度之间设置的小刻度区域的数量

      如需要更详细的设置选项以实现自定义图表，点击GoogleChart Gauge文档 (opens new window)查阅。

    • Area Charts选项

      一个Area Chart选项设置如下：

    title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
    1
    2
    3
    名称 说明
    title 图表的标题名称
    curveType 曲线类型
    function:函数曲线
    none:无类型
    lengend 图表标签的选项

      如需要更详细的设置选项以实现自定义图表，点击GoogleChart AreaChart文档 (opens new window)查阅。

    • Bar Chart选项

      一个Bar Chart选项设置如下：

    title: 'Company Performance',
legend: { position: 'bottom' }
    1
    2
    名称 说明
    title 图表的标题名称
    lengend 图表标签的选项

      如需要更详细的设置选项以实现自定义图表，点击GoogleChart BarChart文档 (opens new window)查阅。

    • Bubble Chart选项

      一个Bubble Chart选项设置如下：

    title: 'Correlation between life expectancy',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
    1
    2
    3
    4
    名称 说明
    title 图表的标题名称
    hAxis 设置横轴的标题名称
    vAxis 设置纵轴的标题名称
    bubble 设置气泡内的样式

      如需要更详细的设置选项以实现自定义图表，点击GoogleChart BubbleChart文档 (opens new window)查阅。

    • Line Chart选项

      一个Line Chart选项设置如下：

    title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
    1
    2
    3
    名称 说明
    title 图表的标题名称
    curveType 曲线类型
    function:函数曲线
    none:无类型
    lengend 图表标签的选项

      如需要更详细的设置选项以实现自定义图表，点击GoogleChart LineChart文档 (opens new window)查阅。

    # 3.2. 方法

    # 3.2.1. LoadChart

    procedure LoadChart;
    1

      该方法用于初始化并加载图表。

    # 4. TUgAppFSKendoUI

      该组件为图表显示组件，可用于图表数据的分析结果的汇总展示。

    # 4.1. 属性

    属性 功能说明
    ChartDataSet 设置图表绑定的数据集的名称
    ChartLengendPosition 设置图表铭牌的位置
    ChartNameExport 设置图表导出时使用的文件名称
    ChartProperties 图表的设置选项，使用JSON语法格式
    ChartSeries 设置数据系列
    ChartSeriesDefaults 设置数据系列的默认取值
    ChartSeriesProperties 设置数据系列的选项
    ChartStacked 设置堆栈
    ChartTheme 设置图表的主题
    ChartTitle 设置图表标题
    ChartTitleVisible 设置图表是否可见
    ChartType 设置图表类型

    # 4.1.1. ChartDataSet

    property ChartDataSet: TDataSet;
    1

      设置图表绑定的数据集控件的名称。

    # 4.1.2. ChartLengendPosition

    property ChartLegendPosition: TUgFSKendoUIPosition;
    1

      设置图例说明的显示位置。

    # 4.1.3. ChartNameExport

    property ChartNameExport: string;
    1

      设置导出文件的图表名称。

    # 4.1.4. ChartProperties

    property ChartProperties: TStrings;
    1

      设置图表的相关属性。

      //JScript
UgAppFSKendoUI01.ChartProperties.Values["valueAxis"] = "{labels: {format: \"0:c\"}}";
      1
      2
      //PasScript
UgAppFSKendoUI01.ChartProperties.Values['valueAxis'] := '{labels: {format: "0:c"}}';
      1
      2
      // Make sure to add code blocks to your code group

        关于属性设置的相关内容可以参考KendoUI属性文档 (opens new window)进行配置，选择对应的图表类型后进行查询。除以下属性外的剩余选项（通常处于JSON配置的末尾）可作为该属性的内容进行填充。

      # 4.1.5. ChartSeries

      property ChartSeries: TStrings;
      1

        设置数据系列。关于该内容可参考KendoUI属性文档 (opens new window)进行配置，选择对应的图表类型后进行查询。配置为series部分的内容可用于该属性的设置选项。

        //JScript
UgAppFSKendoUI01.ChartSeries.Values["Mundo"] = "world_users";
        1
        2
        //PasScript
UgAppFSKendoUI01.ChartSeries.Values['Mundo'] := 'world_users';
        1
        2
        // Make sure to add code blocks to your code group

        # 4.1.6. ChartSeriesDefaults

        property ChartSeriesDefaults: string;
        1

          设置数据系列的默认值。关于该内容可参考KendoUI属性文档 (opens new window)进行配置，选择对应的图表类型后进行查询。配置为seriesDefaults部分的内容可用于该属性的设置选项。

          //JScript
UgAppFSKendoUI01.ChartSeriesDefaults = "labels: {visible: true, position: \"insideEnd\", format: \"0:c\"}";
          1
          2
          //PasScript
UgAppFSKendoUI01.ChartSeriesDefaults := 'labels: {visible: true, position: "insideEnd", format: "0:c"}';
          1
          2
          // Make sure to add code blocks to your code group

          # 4.1.7. ChartSeriesProperties

          property ChartSeriesProperties: TStrings;
          1

            设置数据系列的选项。关于该内容可参考KendoUI属性文档 (opens new window)进行配置，选择对应的图表类型后进行查询。配置在series中的选项的展开选项项目可用于该属性的选项设置。

            //JScript
UgAppFSKendoUI01.ChartSeriesProperties.Values["United States"] = "labels: {visible: true, align: \"column\", format: \"{0}%\"}";
            1
            2
            //PasScript
UgAppFSKendoUI01.ChartSeriesProperties.Values['United States'] := 'labels: {visible: true, align: "column", format: "{0}%"}';
            1
            2
            // Make sure to add code blocks to your code group

            # 4.1.8. ChartStacked

            property ChartStacked: Boolean;
            1

              是否进行图表的堆叠。

            # 4.1.9. ChartTheme

            property ChartTheme: TUgFSKendoUITheme;
            1

              设置图表的主题风格。

            # 4.1.10. ChartTitle

            property ChartTitle: string;
            1

              设置图表标题。

            # 4.1.11. ChartTitleVisible

            property ChartTitleVisible: Boolean;
            1

              设置图表标题是否可见。

            # 4.1.12. ChartType

            property ChartType: TUgFSKendoUIType;
            1

              设置图表的类型。

            名称 说明 图示
            Columns 纵向柱状图
            Bar 横向柱状图
            Line 折线图
            Pie 饼图
            Scatter 散点图
            ScatterLine 散点连线图

            # 4.2. 方法

            # 4.2.1. InitChart

            procedure InitChart;
            1

              初始化设置图表并打开。

            # 5. TUgAppFSQrCode

              此控件显示为二维码，可输入信息以呈现所需的二维码信息。

            # 5.1. 属性

            # 5.1.1. QrOptions

            property QrOptions: TQrOptions;
            1

              设定二维码显示的选项。

            名称 说明
            BackgroundColor 设定背景的颜色，无背景颜色的使用null，此处的颜色值以CSS颜色为基准。若需要了解在此处可使用的颜色表达式，请查看<color> (opens new window)
            Content 设定二维码中包含的文本内容
            Fill 设定填充二维码的颜色，此处的颜色值以CSS颜色为基准。若需要了解在此处可使用的颜色表达式，请查看<color> (opens new window)
            FontColor 设定二维码中心显示的字体的颜色，此处的颜色值以CSS颜色为基准。若需要了解在此处可使用的颜色表达式，请查看<color> (opens new window)
            FontName 设定二维码中心显示的字体名称
            ImageUrl 输入图片的地址用于在二维码中心区域显示图标
            LabelQr 设置显示在二维码中心区域的文字的内容
            Level 设置编码的级别
            MinVersion 用于设置二维码的点阵密度
            Mode 设置二维码中心的图标的显示模式
            image_box：设置显示为图片盒子
            image_strip：设置显示为图片横条
            label_box：设置显示为标签盒子
            label_strip：设置显示为标签条
            normal：不显示
            PositionLabelQrX 设置标签的横向偏移量
            PositionLabelQrY 设置标签的纵向偏移量
            QuietZone 设置控件边框与二维码之间的空白区域宽度
            Radius 设置二维码点阵的弧度
            Render 设定二维码在浏览器中的渲染模式
            SizeLabelQr 设定二维码中的标签显示的尺寸大小

            # 5.2. 方法

            # 5.2.1. Generate

            procedure Generate;
            1

              调用此方法可动态重新生成二维码。

            # 5.2.2. GetImage

            procedure GetImage;
            1

              使用此方法可动态更新获取标签中的图像信息。

            3D-AI控件
            菜单列表

            ← 菜单列表→

            Copyright © 2021-2025 爱招飞IsoFace | ALL Rights Reserved