0
# Template System
1

2
Professional application templates providing structured layouts and theming for building production-ready web applications. Templates offer complete application frameworks with navigation, styling, and responsive design patterns.
3

4
## Capabilities
5

6
### Base Template
7

8
Foundation class for creating custom templates with common functionality.
9

10
```python { .api }
11
class Template:
12
    """
13
    Base template class for creating custom application templates.
14
    
15
    Parameters:
16
    - title: Application title displayed in browser tab
17
    - header: Components to include in header area
18
    - sidebar: Components to include in sidebar area  
19
    - main: Components to include in main content area
20
    - **params: Additional template parameters
21
    """
22
```
23

24
### Bootstrap Templates
25

26
Templates based on the Bootstrap CSS framework for responsive web applications.
27

28
```python { .api }
29
class BootstrapTemplate:
30
    """
31
    Bootstrap-based template with responsive grid layout.
32
    
33
    Parameters:
34
    - title: Application title
35
    - sidebar_width: Width of sidebar in Bootstrap grid units
36
    - header_background: Background color for header
37
    - header_color: Text color for header
38
    - **params: Additional parameters
39
    """
40
```
41

42
### Material Design Templates
43

44
Templates implementing Google's Material Design principles and components.
45

46
```python { .api }
47
class MaterialTemplate:
48
    """
49
    Material Design template with Material UI components.
50
    
51
    Parameters:
52
    - title: Application title
53
    - theme: Material theme ('default', 'dark')
54
    - color_primary: Primary theme color
55
    - color_secondary: Secondary theme color
56
    - **params: Additional parameters
57
    """
58
```
59

60
### Fast Templates
61

62
High-performance templates optimized for fast loading and rendering.
63

64
```python { .api }
65
class FastListTemplate:
66
    """
67
    Fast loading list-style template for data-focused applications.
68
    
69
    Parameters:
70
    - title: Application title
71
    - sidebar: List of sidebar items
72
    - main: Main content components
73
    - header: Header components
74
    - **params: Additional parameters
75
    """
76

77
class FastGridTemplate:
78
    """
79
    Fast loading grid-style template with flexible layout areas.
80
    
81
    Parameters:  
82
    - title: Application title
83
    - sidebar: Sidebar content
84
    - main: Main grid content
85
    - header: Header content
86
    - **params: Additional parameters
87
    """
88
```
89

90
### Golden Layout Templates
91

92
Templates using the Golden Layout library for advanced windowing systems.
93

94
```python { .api }
95
class GoldenTemplate:
96
    """
97
    Golden layout-based template with dockable panels and tabs.
98
    
99
    Parameters:
100
    - title: Application title
101
    - config: Golden Layout configuration
102
    - **params: Additional parameters
103
    """
104
```
105

106
### Vanilla Templates
107

108
Minimal templates with basic styling for custom design requirements.
109

110
```python { .api }
111
class VanillaTemplate:
112
    """
113
    Minimal vanilla template with minimal built-in styling.
114
    
115
    Parameters:
116
    - title: Application title
117
    - **params: Additional parameters
118
    """
119
```
120

121
### React Templates
122

123
Templates that integrate with React components and ecosystems.
124

125
```python { .api }
126
class ReactTemplate:
127
    """
128
    React-based template for integrating React components.
129
    
130
    Parameters:
131
    - title: Application title
132
    - **params: Additional parameters
133
    """
134
```
135

136
### Presentation Templates
137

138
Templates designed for presentations and slide-based content.
139

140
```python { .api }
141
class SlidesTemplate:
142
    """
143
    Presentation slides template for slide-based applications.
144
    
145
    Parameters:
146
    - title: Presentation title
147
    - **params: Additional parameters
148
    """
149
```
150

151
### Editable Templates
152

153
Templates that support live editing and customization of layout and content.
154

155
```python { .api }
156
class EditableTemplate:
157
    """
158
    Editable template with live layout customization capabilities.
159
    
160
    Parameters:
161
    - title: Application title
162
    - **params: Additional parameters
163
    """
164
```
165

166
## Usage Examples
167

168
### Basic Bootstrap Template
169

170
```python
171
import panel as pn
172

173
# Create template
174
template = pn.template.BootstrapTemplate(
175
    title="My Dashboard",
176
    sidebar_width=2,
177
    header_background='#2596be',
178
)
179

180
# Add content to template areas
181
template.sidebar.append(
182
    pn.Column(
183
        "## Navigation",
184
        pn.widgets.Select(name="Dataset", options=["A", "B", "C"]),
185
        pn.widgets.IntSlider(name="Year", start=2000, end=2023),
186
    )
187
)
188

189
template.main.append(
190
    pn.Column(
191
        "# Main Content",
192
        pn.pane.Markdown("Welcome to the dashboard!"),
193
        pn.pane.DataFrame(df)
194
    )
195
)
196

197
# Serve the template
198
template.servable()
199
```
200

201
### Material Design Template
202

203
```python
204
# Create Material Design template
205
template = pn.template.MaterialTemplate(
206
    title="Data Analysis App",
207
    theme='dark',
208
    color_primary='#1976d2',
209
    color_secondary='#dc004e'
210
)
211

212
# Add components
213
template.sidebar.extend([
214
    pn.widgets.Select(name="Chart Type", options=["Line", "Bar", "Scatter"]),
215
    pn.widgets.MultiSelect(name="Columns", options=df.columns.tolist()),
216
])
217

218
template.main.extend([
219
    pn.pane.Markdown("## Analysis Results"),
220
    plot_pane,
221
    results_table
222
])
223
```
224

225
### Fast Grid Template
226

227
```python
228
# Create fast grid template
229
template = pn.template.FastGridTemplate(
230
    title="Performance Dashboard",
231
    theme='dark'
232
)
233

234
# Define template areas
235
template.sidebar[:] = [control_panel]
236
template.main[:] = [
237
    pn.Row(metric_cards),
238
    pn.Row(charts),
239
    pn.Row(data_tables)
240
]
241
template.header[:] = [navigation_bar]
242
```
243

244
### Custom Template Configuration
245

246
```python
247
# Advanced template customization
248
template = pn.template.BootstrapTemplate(
249
    title="Advanced App",
250
    sidebar_width=3,
251
    header_background='linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
252
    theme='dark'
253
)
254

255
# Configure template styling
256
template.config.sizing_mode = 'stretch_width'
257
template.config.background_color = '#f0f0f0'
258

259
# Add custom CSS
260
template.add_panel(pn.pane.HTML("""
261
<style>
262
.custom-header { font-family: 'Arial', sans-serif; }
263
</style>
264
"""), area='header')
265
```
266

267
### Multi-Page Template Application
268

269
```python
270
import param
271

272
class MultiPageApp(param.Parameterized):
273
    page = param.Selector(default='Home', objects=['Home', 'Data', 'Analysis', 'Settings'])
274
    
275
    def __init__(self, **params):
276
        super().__init__(**params)
277
        self.template = pn.template.MaterialTemplate(title="Multi-Page App")
278
        self._setup_sidebar()
279
        self._setup_main()
280
    
281
    def _setup_sidebar(self):
282
        self.template.sidebar.append(
283
            pn.Param(self, parameters=['page'], widgets={'page': pn.widgets.RadioButtonGroup})
284
        )
285
    
286
    def _setup_main(self):
287
        self.template.main.append(
288
            pn.bind(self._render_page, self.param.page)
289
        )
290
    
291
    def _render_page(self, page):
292
        if page == 'Home':
293
            return pn.pane.Markdown("# Welcome to the Home Page")
294
        elif page == 'Data':
295
            return pn.pane.DataFrame(df)
296
        elif page == 'Analysis':
297
            return pn.Column(analysis_plots)
298
        else:
299
            return pn.pane.Markdown("# Settings Page")
300

301
app = MultiPageApp()
302
app.template.servable()
303
```
304

305
## Template Areas
306

307
Most templates provide the following common areas:
308

309
- **`header`**: Top navigation and branding area
310
- **`sidebar`**: Left or right sidebar for navigation and controls
311
- **`main`**: Primary content area for application content
312
- **`modal`**: Overlay area for dialogs and popups (some templates)
313

314
Access template areas using list-like syntax:
315
```python
316
template.sidebar.append(widget)
317
template.main.extend([widget1, widget2])
318
template.header[:] = [header_components]
319
```