Themes Leave a comment
x
 
1
<section>
2
    <h2>Default</h2>
3
    <p>
4
        Panel is a style that is is implemented by inheriting the vertical group, just like the vertical menu.
5
        
6
        <div class="panel">
7
            <div class="head">
8
                <i class="icon-left"></i> <strong>Panel Heading</strong>
9
            </div>
10
            <div class="body">
11
                The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effect.
12
                It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin.
13
            </div>
14
            <div class="foot">
15
                Panel Footer
16
            </div>
17
        </div>
18
    </p>
19
20
    <p class="br">
21
        The following is an example that can be implemented more simply by excluding the <strong>head</strong> and/or the <strong>foot</strong>.
22
        
23
        <div class="row">
24
            <div class="col col-6">
25
                <div class="panel">
26
                    <div class="head">
27
                        <strong>Panel Heading</strong>
28
                    </div>
29
                    <div class="body">
30
                        Panel Body
31
                    </div>
32
                </div>
33
            </div>
34
            <div class="col col-6" style="padding-left: 5px;">
35
                <div class="panel">
36
                    <div class="body">
37
                        Panel Body
38
                    </div>
39
                    <div class="foot">
40
                        <strong>Panel Footer</strong>
41
                    </div>
42
                </div>
43
            </div>
44
        </div>
45
    </p>
46
</section>
47
48
<section>
49
    <h2>Combine</h2>
50
    <p>
51
        Panel provides a function that enables combination with other components. and that can be used instead of <strong>body</strong>.
52
        
53
        <div class="panel">
54
            <div class="head">
55
                <strong>Panel Heading</strong>
56
            </div>
57
            <table class="table classic hover">
58
                <thead>
59
                    <tr>
60
                        <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th>
61
                    </tr>
62
                </thead>
63
                <tbody>
64
                    <tr>
65
                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
66
                    </tr>
67
                    <tr>
68
                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
69
                    </tr>
70
                    <tr>
71
                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
72
                    </tr>
73
                </tbody>
74
            </table>
75
        </div>
76
    </p>
77
</section>
78
79
<section>
80
    <h2>Close</h2>
81
    <p>
82
        Panel provides a closed option. The user needs to add a panel-close class as shown below.
83
        
84
        <div class="panel close">
85
            <div class="head">
86
                <i class="icon-left"></i> <strong>Panel Heading</strong>
87
            </div>
88
            <div class="body">
89
                Panel Body
90
            </div>
91
            <div class="foot">
92
                Panel Footer
93
            </div>
94
        </div>
95
    </p>
96
</section>
97
98
<section>
99
    <h2>Fit</h2>
100
    <p>
101
        When you want to set the padding value in the body area to 0, add a <strong>fit </strong>class to the body.
102
        
103
        <div class="panel">
104
            <div class="head">
105
                <i class="icon-left"></i> <strong>Panel Heading</strong>
106
            </div>
107
            <div class="body fit">
108
                The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.
109
                It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.
110
                It also supports, but does not require, the Easing Plugin.
111
            </div>
112
        </div>
113
    </p>
114
</section>
115
116
<section>
117
    <h2>Include</h2>
118
    <p>
119
        Panel can add a component such as a <strong>small</strong> button or a label to the header or the footer.
120
        
121
        <div class="panel">
122
            <div class="head">
123
                <i class="icon-left"></i> <strong>Panel Heading</strong>
124
                
125
                <div style="float: right;">
126
                    <div class="combo">
127
                        <a class="btn small" style="width: 150px;">Select...</a>
128
                        <a class="btn small toggle"><i class="icon-arrow2"></i></a>
129
                    </div>
130
                </div>
131
            </div>
132
            <div class="body">
133
                Panel Body
134
            </div>
135
        </div>
136
    </p>
137
</section>
138
139
<section>
140
    <h2>Tab Header</h2>
141
    <p>
142
        Panel can add a tab component to the header.
143
144
        <div class="panel">
145
            <div class="head">
146
                <ul class="tab top">
147
                    <li class="active">
148
                        <a href="#">Home</a>
149
                    </li>
150
                    <li><a href="#">CSS</a></li>
151
                    <li><a href="#">Script</a></li>
152
                    <li class="checked">
153
                        <a href="#">Menu <i class="icon-arrow1"></i></a>
154
                    </li>
155
                </ul>
156
            </div>
157
            <div class="body">
158
                Panel Body
159
            </div>
160
        </div>
161
    </p>
162
</section>
163
164
<section>
165
    <h2>Panel Group</h2>
166
    <p>
167
        Panel Group can combine several panels as a group.
168
        
169
        <div class="pgroup">
170
            <div class="panel" style="width: 33.3%;">
171
                <div class="head">
172
                    <strong>Panel Heading</strong>
173
                </div>
174
                <div class="body">
175
                    Panel Body
176
                </div>
177
            </div>
178
            <div class="panel" style="width: 33.3%;">
179
                <div class="head">
180
                    <strong>Panel Heading</strong>
181
                </div>
182
                <div class="body">
183
                    Panel Body
184
                </div>
185
            </div>
186
            <div class="panel" style="width: 33.3%;">
187
                <div class="head">
188
                    <strong>Panel Heading</strong>
189
                </div>
190
                <div class="body">
191
                    Panel Body
192
                </div>
193
            </div>
194
        </div>
195
    </p>
196
</section>

Result
API