-
Notifications
You must be signed in to change notification settings - Fork 146
/
Copy pathCodeEditorLayout.razor
151 lines (138 loc) · 6.56 KB
/
CodeEditorLayout.razor
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
@page "/splitter/code-editor-layout"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts
@*Hidden:Lines*@
@inherits SampleBaseComponent
@inject NavigationManager NavigationManager
<PageTitle>Blazor Splitter Code Editor Layout Example - Syncfusion Demos</PageTitle>
<HeadContent>
<meta name="description" content="This example demonstrates the Code Editor Layout in Blazor Splitter Component. Explore here for more details." />
<link rel="canonical" href="@canonicalURL" />
</HeadContent>
@*End:Hidden*@
<SampleDescription>
<p>This sample demonstrates the Blazor Splitter component that is used to design code editor-like applications using multiple panes. You can resize its panes vertically as well as horizontally.</p>
</SampleDescription>
<ActionDescription>
<p>The Splitter is used to design a code editor-like application using multiple panes. In this code editor layout, display HTML, CSS, and JavaScript (JS) code as horizontal panes at the top and output of sample at the bottom pane.</p>
</ActionDescription>
<div class="col-lg-12 control-section">
<div class="control_wrapper">
<div id="target">
<SfSplitter Height="400px" Orientation="Orientation.Vertical">
<SplitterPanes>
<SplitterPane Size="53%" Min="30%">
<SfSplitter Height="100%" Width="100%">
<SplitterPanes>
<SplitterPane Size="29%" Min="23%">
<ContentTemplate>
<div>
<div class="code-editor-content">
<h3 class="h3">HTML</h3>
<div class="code-preview">
<<span>!DOCTYPE html></span>
<div><<span>html></span></div>
<div><<span>body></span></div>
<<span>div</span> id="custom-image">
<div style="margin-left: 5px"><<span>img</span> src="src/albert.png"></div>
<div><<span>div</span>></div>
<div><<span>/body></span></div>
<div><<span>/html></span></div>
</div>
</div>
</div>
</ContentTemplate>
</SplitterPane>
<SplitterPane Size="20%" Min="15%">
<ContentTemplate>
<div>
<div class="code-editor-content">
<h3 class="h3">CSS</h3>
<div class="code-preview">
<span>img {</span>
<div id="code-text">margin:<span>0 auto;</span></div>
<div id="code-text">display:<span>flex;</span></div>
<div id="code-text">height:<span>70px;</span></div>
<span> }</span>
</div>
</div>
</div>
</ContentTemplate>
</SplitterPane>
<SplitterPane Size="35%" Min="35%">
<ContentTemplate>
<div>
<div class="code-editor-content">
<h3 class="h3">JavaScript</h3>
<div class="code-preview">
<span>var</span> image = document.getElementById("custom-image");
<div>image.addEventListener("click", function() {</div>
<div style="padding-left: 20px;">// Code block for click action</div>
<span> }</span>
</div>
</div>
</div>
</ContentTemplate>
</SplitterPane>
</SplitterPanes>
</SfSplitter>
</SplitterPane>
<SplitterPane Size="53%" Min="30%">
<ContentTemplate>
<div>
<div class="code-editor-content">
<h3 class="h3">Preview of sample</h3>
<div class="splitter-image">
<img class="img1" src="@(SampleService.WebAssetsPath + "images/splitter/albert.png")" style="width: 20%;margin: 0 auto;">
</div>
</div>
</div>
</ContentTemplate>
</SplitterPane>
</SplitterPanes>
</SfSplitter>
</div>
</div>
</div>
@*Hidden:Lines*@
@code {
private string canonicalURL { get; set; }
protected override void OnInitialized()
{
canonicalURL = NavigationManager.Uri.Split("?")[0];
}
}
@*End:Hidden*@
<style>
#code-text {
margin-left: 5px;
}
#target {
margin: 20px auto;
max-width: 600px;
}
.code-preview {
margin-top: 15px;
font-size: 12px;
padding: 6px;
}
.control-section {
min-height: 370px;
margin-bottom: 15px;
margin-top: 10px;
}
.h3 {
font-size: 14px;
margin: 4px;
padding: 5px;
}
.code-editor-content {
padding: 12px;
}
.splitter-image {
margin: 0 auto;
display: flex;
height: 115px;
margin-top: 10px;
}
</style>