This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathtypes.tsx
More file actions
117 lines (105 loc) · 5.29 KB
/
types.tsx
File metadata and controls
117 lines (105 loc) · 5.29 KB
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
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SampleBase } from '../common/sample-base';
import './types.css';
// tslint:disable:max-line-length
// * Sample for CSS avatar component
export class Types extends SampleBase<{}, {}> {
render() {
return (
<div className='control-pane'>
<div className="sample_container avatar-types">
<div className="avatar-block">
{/* <!-- Card Component --> */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* <!-- XLarge Circle Avatar Component --> */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<img className="image" src="./src/avatar/images/pic01.png" alt="avatar" />
</div>
</div>
<div className="e-card-content">
<div>Image</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* <!-- Card Component --> */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* <!-- XLarge Circle Avatar Component --> */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<div className="svg_icons chrome"></div>
</div>
</div>
<div className="e-card-content">
<div>SVG</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* <!-- Card Component --> */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* <!-- XLarge Circle Avatar Component --> */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
</div>
<div className="e-card-content">
<div>Initial</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* <!-- Card Component --> */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* <!-- XLarge Circle Avatar Component --> */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<div className="e-people icons"></div>
</div>
</div>
<div className="e-card-content">
<div>Font Icon</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* <!-- Card Component --> */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* <!-- XLarge Circle Avatar Component --> */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
</div>
<div className="e-card-content">
<div>Word</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* <!-- Card Component --> */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* <!-- XLarge Circle Avatar Component --> */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle custom">
<div className="e-people icons"></div>
</div>
</div>
<div className="e-card-content">
<div>Custom</div>
</div>
</div>
</div>
</div>
<div id="action-description">
<p>This sample demonstrates the different types of content that are used with avatar component like SVG icons, Font icons,
words, letters, and images.</p>
</div>
<div id="description">
<p>The avatar component is flexible to support various types of icons and images. In this sample, the content like SVG,
font icons, and letters will be wrapped by the avatar element.
</p>
</div>
</div>
);
}
}