幽灵头像

Spectre Avatars 让我们可以在图形元素中包含头像。如果您想设计类似的用户配置文件，那么您肯定需要使用此功能。将头像类添加到 元素。有 4 种额外尺寸可供选择，包括 avatar-xl(64px)、avatar-lg(48px)、avatar-sm(24px) 和 avatar-xs(16px)。默认情况下，头像大小为 32px。

假设用户个人资料没有任何图片，那么有一个解决方案，您也可以使用他们的姓名首字母作为头像。将头像类和头像尺寸类添加到

元素。 data-initial 属性是出现在头像内的名称。

幽灵头像类：

• avatar：这个类也用于包含头像。
• avatar-xl|lg|sm|xs：该类用于定义头像的大小。

幽灵头像：

• Spectre Avatar 图标： Spectre Avatar 图标让我们可以将图像作为图标包含在内。
• 幽灵分身存在：幽灵分身存在用于设置存在的指示器。

注意：如果头像图像丢失，您需要添加 data-initial 属性来提及初始值。如果没有 data-initial 或未指定属性，则头像将显示为一个点。

句法：

...

下面的示例说明了 Spectre Avatar：

例子：

HTML

 

    
    
    

 

    
    
GeeksforGeeks
    SPECTRE Avatar Class
    


    

        Different Sizes & Presence Avatars:
        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
        


        Different Sizes & Without Image Avatars:
        

             
        
        

             
        
        

             
        
        

             
        
    
    

 

输出：

参考： https ://picturepan2.github.io/spectre/components/avatars.html