Unigui 自定义FontAwesome与自定义字体

本人要解决的问题如标题所示：

 

根据SF的组件TUniSFLabel进行修改，增加一个FTSIcon类，FTSIcon类如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
TTSIcon = class(TPersistent)
private
  FIconName : string;             //Aw Icon图标名字
  FClassName: string;             //属于CSS中那个类名
  FIconType : string;             //是那种ICON 类型, s,l,r,d
  FFontSize : string;             //当前字体大小
  FEnable   : Boolean;            //是否使能当前功能
  FSexyClass: string;
  FSpanClass: string;
  FSpanNum  : Integer;            //SPAN的数量
  FUseType  : Integer;            //使用那种类型，类型0是Aw字体。
published
  property IconName:  string   read FIconName write FIconName ;
  property ClassName:  string   read FClassName write FClassName ;
  property IconType:  string   read FIconType write FIconType ;
  property FontSize:  string   read FFontSize write FFontSize ;
  property SexyClass:  string   read FSexyClass write FSexyClass ;
  property SpanClass:  string   read FSpanClass write FSpanClass ;
  property UseType:  Integer   read FUseType write FUseType ;
  property SpanNum:  Integer   read FSpanNum write FSpanNum ;
 
  property Enable: Boolean read FEnable write FEnable default False;
end;

 

相关参数说明如下：

TSICon
Enable : 当前控制是否使能，如果不使能则使用组件的FAIcon的属性进行设置。
UseType ：当前使用方式，分为以下几种。
　　A): 0: 使用模式0，采用aw方式显示，有效属性为。ClassName,IconName,IconType,FontSize. 
　　　　a):其中IconType,表示使用的是那种类型。 取值为s,l,b,r.
　　　　b):ClassName设置当前使用的类的名字。
　　　　c):IconName当前使用的iocn的名字。
　　　　d):FontSize为字体大小。
　　B): 1，2: 使用模式1或2
　　　　a): 当为1时 使用SexBtn模式。 有效的参数为SexyClass，SpanClass ，SpanNum。SexyClass为最外层的属性，SpanClass为内层。
　　　　b): 当为2时 使用TsBtn模式。 有效的参数为SexyClass，SpanClass ，SpanNum。SexyClass为最外层的属性，SpanClass为内层。

 

修改后的TUniSFLabel文件如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
interface
 
uses
  uniLabel, Classes, sysUtils, UniGUIInterfaces, UniSFCore, uniGUIJSInterface, uniGUITypes, uniGUIClasses, UniGUIAbstractClasses;
 
type
  [ComponentPlatformsAttribute(pidWin32 or pidWin64)]
  TUniSFLabel = class(TUniCustomLabel)
  private
    FStyleLabel: TUniSFStyleLabel;
    FFAIcon: TFAIcon;
    FTSIcon:TTSIcon;
    procedure setStyleLabel(const Value: TUniSFStyleLabel);
    function GetAbout: string;
    procedure SetAbout(const Value: string);
  protected
    procedure SetJSCaption(const Value: string); override;
    property TextConversion;
    {Being painted}
    procedure Paint; override;
    procedure WebCreate; override;
  published
    property About: string read GetAbout write SetAbout stored False;
    property Alignment;
    property AutoSize default True;
    property Caption;
    property Align;
    property Anchors;
    property ParentFont;
    property Font;
    property ParentColor;
    property Color;
    property ClientEvents;
    property Transparent;
    property TabOrder;
    property ScreenMask;
    property LayoutConfig;
    property StyleLabel: TUniSFStyleLabel read FStyleLabel write setStyleLabel;
    property OnDblClick;
    property OnClick;
    property OnMouseDown;
    property OnMouseUp;
    property OnMouseEnter;
    property OnMouseLeave;
    property OnAjaxEvent;
    property FAIcon: TFAIcon read FFAIcon write FFAIcon;
    property TSIcon: TTSIcon read FTSIcon write FTSIcon;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  end;
 
 
implementation
 
uses
  uniGUIServer;
 
// ------------------------------------------------------------------------------
 
 
{ TUniSFLabel }
 
constructor TUniSFLabel.Create(AOwner: TComponent);
begin
  inherited;
  AutoSize := True;
  FStyleLabel := TUniSFStyleLabel.Create;
  FFAIcon := TFAIcon.Create;
  FFAIcon.IconName := 'fa-abacus';
  FFAIcon.ClassName := 'ts';
  FFAIcon.IconType := 's';
 
  FTSIcon :=  TTSIcon.Create;
  FTSIcon.IconName := 'fa-abacus';
  FTSIcon.ClassName := 'ts';
  FTSIcon.IconType := '';
  FTSIcon.FontSize := 'sf-48';
  FTSIcon.UseType := 0;
end;
 
destructor TUniSFLabel.Destroy;
begin
  FStyleLabel.Free;
  FFAIcon.Free;
  inherited;
end;
 
function TUniSFLabel.GetAbout: string;
begin
  Result := GetUniSFVersion(cnLabel);
end;
 
procedure TUniSFLabel.Paint;
begin
  if FStyleLabel.Model = lm_required then
    Text := '* ' + Caption
  else
    Text := Caption;
  inherited;
end;
 
procedure TUniSFLabel.SetAbout(const Value: string);
begin
 //
end;
 
procedure TUniSFLabel.SetJSCaption(const Value: string);
var
  vStyle: string;
  vCaption: string;
  i,j     : Integer;
begin
  vCaption := Caption;
  if FTSIcon.Enable then
  begin
    if FTSIcon.UseType = 0 then
    begin
      vCaption := format('<i class="fa%s %s  fa-%s"></i>', [FTSIcon.IconType,FTSIcon.IconName,FTSIcon.FontSize]) + vCaption;
      vStyle := Format('<span class="f-%s f-%s-btn %s">%s</span>', [FTSIcon.ClassName,FTSIcon.ClassName,FTSIcon.SpanClass, vCaption]);
    end
    else if ((FTSIcon.UseType = 1) or (FTSIcon.UseType = 2)) then
    begin
      if FTSIcon.SpanNum <> 0 then
      begin
        vCaption := format('<span class="%s">%s</span>', [FTSIcon.SpanClass,vCaption]);
        j := FTSIcon.SpanNum-1;
        for i := 0 to j-1 do
          vCaption := '<span>'+vCaption+'</span>';
      end;
//      vCaption := format('<span><span><span class="%s">%s</span></span></span>', [FTSIcon.SpanClass,vCaption]);
      if FTSIcon.UseType = 1 then
        vStyle := Format('<button class="sexybutton %s">%s</button>', [FTSIcon.SexyClass, vCaption])
      else
        vStyle := Format('<button class="tsbutton %s">%s</button>', [FTSIcon.SexyClass, vCaption])
    end
    else if (FTSIcon.UseType = 3) then
    begin
      vCaption := format('<i class="%s"></i>', [FTSIcon.SpanClass]) + vCaption;
      vStyle := Format('<span class="%s">%s</span>', [FTSIcon.ClassName,vCaption]);
    end;
          
  end
  else
  begin
    if FFAIcon.Icon <> fa_none then
    begin
      if FStyleLabel.Model = lm_badge_btn then
      begin
         vCaption := '';
         Height := 40;
         Width :=40;
         AutoSize := false;
         FFAIcon.Size := fs_24;
      end;
 
      if vCaption <> '' then
        vCaption := ' ' + vCaption;
      if FStyleLabel.Model = lm_badge_btn then
       vCaption := format('<i class="fa %s fa-badge-sf-24 %s"></i>', [FontAwesomeToStr(FFAIcon.Icon),  FontColorToStr(FFAIcon.Color)]) + vCaption
      else if FStyleLabel.Model = lm_ts_btn then
       vCaption := format('<i class="fa %s  %s"></i>', [FFAIcon.IconName,  FontSizeToStr(FFAIcon.Size)]) + vCaption
  //     vCaption := format('<i class="fa %s  %s"></i>', [FontAwesomeToStr(FFAIcon.Icon),  FontSizeToStr(FFAIcon.Size)]) + vCaption
      else if FStyleLabel.Model = lm_fas_btn then
       vCaption := format('<i class="fa%s %s  %s"></i>', [FFAIcon.IconType,FFAIcon.IconName,  FontSizeToStr(FFAIcon.Size)]) + vCaption
      else
       vCaption := format('<i class="fa %s %s %s"></i>', [FontAwesomeToStr(FFAIcon.Icon), FontSizeToStr(FFAIcon.Size), FontColorToStr(FFAIcon.Color)]) + vCaption;
    end;
 
    if FStyleLabel.Model = lm_required then
      vStyle := '<i class="fa fa-asterisk fa-sf-required"></i>' + vCaption
    else if (Ord(FStyleLabel.Model) > 1) and (Ord(FStyleLabel.Model) < 12) then
      vStyle := Format('<span class="f-label %s %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme), LabelModelToStr(FStyleLabel.Model), vCaption])
    else if FStyleLabel.Model = lm_badge then
      vStyle := Format('<span class="f-badge %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme, true), vCaption])
    else if FStyleLabel.Model = lm_badge_btn then
      vStyle := Format('<span class="f-badge f-badge-btn %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme, true), vCaption])
    else if FStyleLabel.Model = lm_ts_btn then
      vStyle := Format('<span class="f-%s f-%s-btn ">%s</span>', [FFAIcon.ClassName,FFAIcon.ClassName, vCaption])
    else if FStyleLabel.Model = lm_fas_btn then
      vStyle := Format('<span class="f-%s f-%s-btn ">%s</span>', [FFAIcon.ClassName,FFAIcon.ClassName, vCaption])
    else
      vStyle := vCaption;
  end;
 
 
  JSProperty('html', [vStyle, False], 'setText');
end;
 
procedure TUniSFLabel.setStyleLabel(const Value: TUniSFStyleLabel);
begin
  FStyleLabel := Value;
end;
 
procedure TUniSFLabel.WebCreate;
begin
  inherited;
  TextConversion := txtHTML;
end;
 
initialization
//增加的CSS文件位置
  UniAddCSSLibrary('uniSFJS/thinksign/ts_wix.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
  UniAddCSSLibrary('uniSFJS/SexyButtons/sexybuttons.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
  UniAddCSSLibrary('uniSFJS/fenix/fenix.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
  UniAddCSSLibrary('uniSFJS/font-awesome/css/fontawesome-all.min.css', False, [upoFolderUni, upoPlatformBoth]);
end.

　　

到这里，然后主程序，只要设置UniSFLabel的TTSIcon 即可显示对应的组件。

posted @   _成飞  阅读(578)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示