Skip to content

Commit 6cf79b6

Browse files
author
Jeremy Buentello
authored
Merge pull request #7 from Unskilledcrab/releases/github
Fixing explaining all of the main components! Yay! Modifying the way …
2 parents e7b6664 + bb03d49 commit 6cf79b6

File tree

18 files changed

+476
-241
lines changed

18 files changed

+476
-241
lines changed

‎Blatomic.Examples/Pages/Dragdrop.razor‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -197,11 +197,4 @@
197197
</div>
198198
</DropArea>
199199
</DragContext>";
200-
201-
private string testData1 = "First";
202-
private string testData2 = "Second";
203-
private string testData3 = "Third";
204-
205-
private List<string> defaultItems = new() { "1", "2", "3" };
206-
207200
}

‎Blatomic.Examples/Pages/Guides.razor‎

Lines changed: 202 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,156 @@
11
@page "/guides"
2+
@inject ITheme Theme
3+
4+
<PageTitle>Progress Bars</PageTitle>
5+
6+
<div class="leading-relaxed @TwColors.Text_Slate_600">
7+
<h1 class="text-2xl font-bold @TwColors.Text_Slate_900">Guides</h1>
8+
9+
<h3 class="text-xl font-bold mt-6 @TwColors.Text_Slate_900">What are they?</h3>
10+
11+
<p class="my-2 font-medium">
12+
Guides are meant to take your user on a tour of specific areas of your webpage.
13+
Below shows the most basic example of a guide with only a single step. Click on the
14+
<b>Start Guide</b> button to see what I mean.
15+
</p>
16+
17+
<div class="mb-2">
18+
<GuideContext @bind-IsShowing="isGuideShowing">
19+
<div class="flex flex-col space-y-4">
20+
21+
<div>
22+
<NotificationContainer ShowNotification="@(!isGuideShowing)">
23+
<Button OnClickedAsync="(() => isGuideShowing = true)">Start Guide</Button>
24+
</NotificationContainer>
25+
</div>
26+
27+
<GuideStep>
28+
<ChildContent>
29+
<ProgressBar Percentage="50" />
30+
</ChildContent>
31+
<HelpContent>
32+
This Progress bar doesn't mean anything. but your focus is drawn to it because
33+
the rest of the website has been grayed out and it is the first (and only) step in the guide.
34+
</HelpContent>
35+
</GuideStep>
36+
</div>
37+
</GuideContext>
38+
</div>
239

3-
<GuideContext @bind-IsShowing="@isGuideShowing">
4-
<div class="flex flex-col space-y-5">
5-
<Button OnClickedAsync="(() => isGuideShowing = true)">Start Guide</Button>
6-
7-
<GuideStep>
8-
<ChildContent>
9-
<ProgressBar Percentage="50">50%</ProgressBar>
10-
</ChildContent>
11-
<HelpContent>
12-
<p>This progress bar tells you exactly how close we are until the end of time...</p>
13-
</HelpContent>
14-
</GuideStep>
15-
16-
<GuideStep>
17-
<ChildContent>
18-
<DragContext TData="string">
19-
<div class="flex justify-around">
20-
21-
<GuideStep>
22-
<ChildContent>
23-
24-
<div class="flex flex-col space-y-5 shrink-0">
25-
<DragItem DragData="@("Yay you did it")" Copy="true">
26-
<div class="p-3 bg-blue-400 rounded-full">
27-
Drag Me!
28-
</div>
29-
</DragItem>
30-
</div>
31-
</ChildContent>
32-
<HelpContent>
33-
This is an object that you can drop around on the screen
34-
</HelpContent>
35-
</GuideStep>
36-
37-
38-
<GuideStep>
39-
<ChildContent>
40-
41-
<DropArea Context="Items">
42-
<div class="p-5 flex flex-col space-y-2">
43-
<p>Items in this are will be copied to their drop location</p>
44-
@foreach (var item in Items)
45-
{
46-
<DragItem Copy="true" DragData="@item">
47-
<div class="p-3 bg-purple-400 rounded-full">
48-
Data: @item
49-
</div>
50-
</DragItem>
51-
}
40+
<CodeBlock Title=".razor" Code="@firstExample" />
41+
42+
43+
44+
<p class="my-2 font-semibold">
45+
Lets break down this example into it's parts
46+
</p>
47+
48+
<ol class="list-decimal ml-8 space-y-4 mt-2">
49+
<li>
50+
<p>
51+
First we have the <b>GuideContext</b>, this is how you will start and stop a guide with the <b>@("@bind-IsShowing")</b> property.
52+
Make sure that you use binding to make sure that your local parameter updates if the guide closes itself.
53+
This context will contain all of the <b>GuideStep</b> components.
54+
</p>
55+
</li>
56+
<li>
57+
<p>
58+
Next we have the <b>GuideStep</b> component, this is what you will place around each area of the site that you want to draw your
59+
users eyes to. Place the content you wish to show to the user in the <b>ChildContent</b> section and place any help context you
60+
wish to provide inside the <b>HelpContent</b> section. Here are are only placing text but you can place anything you want in these
61+
areas.
62+
</p>
63+
</li>
64+
<li>
65+
<p>
66+
That's it! Next let's look at some more advanced usages
67+
</p>
68+
</li>
69+
</ol>
70+
71+
<h3 class="text-xl font-bold mt-12 @TwColors.Text_Slate_900">Advanced</h3>
72+
73+
<p class="my-2">
74+
Here you can see that we can nest guide steps within each other. If you need to explain a broad section of your site and then would like
75+
to highlight specific subsections.
76+
</p>
77+
78+
<p class="my-2 max-w-xlg mx-auto">
79+
<GuideContext @bind-IsShowing="@isGuide2Showing">
80+
<div class="flex flex-col space-y-4">
81+
82+
<div>
83+
<NotificationContainer ShowNotification="@(!isGuide2Showing)">
84+
<Button OnClickedAsync="(() => isGuide2Showing = true)">Start Guide</Button>
85+
</NotificationContainer>
86+
</div>
87+
88+
<GuideStep>
89+
<ChildContent>
90+
<GuideStep>
91+
<ChildContent>
92+
<div class="my-2">
93+
<ProgressBar Percentage="25">25%</ProgressBar>
5294
</div>
53-
</DropArea>
54-
55-
</ChildContent>
56-
<HelpContent>
57-
You can drop the item here and it will update with the data of that item. Note: The data does not have to match the dragged items content
58-
</HelpContent>
59-
</GuideStep>
60-
61-
62-
<GuideStep>
63-
<ChildContent>
64-
<DropArea Context="Items"
65-
ShouldDropAsync="@((dragItem) => dragItem.Data == "Third" ? Task.FromResult(true) : Task.FromResult(false))">
66-
<div class="p-5 flex flex-col space-y-2">
67-
<p>You can only drop the 'Third' item into this location</p>
68-
@foreach (var item in Items)
69-
{
70-
<DragItem DragData="@item">
71-
<div class="p-3 bg-red-400 rounded-full">
72-
Data: @item
73-
</div>
74-
</DragItem>
75-
}
95+
</ChildContent>
96+
<HelpContent>
97+
I mean that i'm 25% sure that whoever smelt it, deblt it.
98+
</HelpContent>
99+
</GuideStep>
100+
101+
<GuideStep>
102+
<ChildContent>
103+
<div class="my-2">
104+
<ProgressBar Percentage="50">50%</ProgressBar>
76105
</div>
77-
</DropArea>
78-
79-
</ChildContent>
80-
<HelpContent>
81-
You won't ever be able to drop the item in this area... it doesn't like you
82-
</HelpContent>
83-
</GuideStep>
84-
</div>
85-
</DragContext>
86-
</ChildContent>
87-
<HelpContent>
88-
<p>This is using the drag and drop context</p>
89-
</HelpContent>
90-
</GuideStep>
106+
</ChildContent>
107+
<HelpContent>
108+
I mean that i'm 50% sure that dogs are better than cats.
109+
</HelpContent>
110+
</GuideStep>
111+
112+
<GuideStep>
113+
<ChildContent>
114+
<div class="my-2">
115+
<ProgressBar Percentage="75">75%</ProgressBar>
116+
</div>
117+
</ChildContent>
118+
<HelpContent>
119+
I mean that 75% of what you taste comes from your sense of smell.
120+
</HelpContent>
121+
</GuideStep>
122+
</ChildContent>
123+
<HelpContent>
124+
These are 3 progress bars that all mean different things... continue to find out more.
125+
</HelpContent>
126+
</GuideStep>
91127

92-
<GuideStep>
93-
<ChildContent>
94-
<Button>Very important button</Button>
95-
</ChildContent>
96-
<HelpContent>
97-
<p>This is a very important button.. push it if you would like</p>
98-
</HelpContent>
99-
</GuideStep>
128+
</div>
129+
</GuideContext>
130+
</p>
131+
132+
<CodeBlock Title=".razor" Code="@secondExample" />
133+
</div>
134+
135+
136+
137+
@code {
138+
private string firstExample = @"<GuideContext @bind-IsShowing=""isGuideShowing"">
139+
<div class=""flex flex-col space-y-4"">
140+
141+
<div>
142+
<NotificationContainer ShowNotification=""@(!isGuideShowing)"">
143+
<Button OnClickedAsync=""(() => isGuideShowing = true)"">Start Guide</Button>
144+
</NotificationContainer>
145+
</div>
100146
101147
<GuideStep>
102148
<ChildContent>
103-
<Button>Very important button</Button>
149+
<ProgressBar Percentage=""50"" />
104150
</ChildContent>
105151
<HelpContent>
106-
<p>This is a very important button.. push it if you would like</p>
152+
This Progress bar doesn't mean anything. but your focus is drawn to it because
153+
the rest of the website has been grayed out and it is the first (and only) step in the guide.
107154
</HelpContent>
108155
</GuideStep>
109156
@@ -112,4 +159,63 @@
112159
113160
@code {
114161
private bool isGuideShowing = false;
162+
}";
163+
private string secondExample = @"<GuideContext @bind-IsShowing=""@isGuide2Showing"">
164+
<div class=""flex flex-col space-y-4"">
165+
166+
<div>
167+
<NotificationContainer ShowNotification=""@(!isGuide2Showing)"">
168+
<Button OnClickedAsync=""(() => isGuide2Showing = true)"">Start Guide</Button>
169+
</NotificationContainer>
170+
</div>
171+
172+
<GuideStep>
173+
<ChildContent>
174+
<GuideStep>
175+
<ChildContent>
176+
<div class=""my-2"">
177+
<ProgressBar Percentage=""25"">25%</ProgressBar>
178+
</div>
179+
</ChildContent>
180+
<HelpContent>
181+
I mean that i'm 25% sure that whoever smelt it, deblt it.
182+
</HelpContent>
183+
</GuideStep>
184+
185+
<GuideStep>
186+
<ChildContent>
187+
<div class=""my-2"">
188+
<ProgressBar Percentage=""50"">50%</ProgressBar>
189+
</div>
190+
</ChildContent>
191+
<HelpContent>
192+
I mean that i'm 50% sure that dogs are better than cats.
193+
</HelpContent>
194+
</GuideStep>
195+
196+
<GuideStep>
197+
<ChildContent>
198+
<div class=""my-2"">
199+
<ProgressBar Percentage=""75"">75%</ProgressBar>
200+
</div>
201+
</ChildContent>
202+
<HelpContent>
203+
I mean that 75% of what you taste comes from your sense of smell.
204+
</HelpContent>
205+
</GuideStep>
206+
</ChildContent>
207+
<HelpContent>
208+
These are 3 progress bars that all mean different things... continue to find out more.
209+
</HelpContent>
210+
</GuideStep>
211+
212+
</div>
213+
</GuideContext>
214+
215+
@code {
216+
private bool isGuide2Showing = false;
217+
}";
218+
219+
private bool isGuideShowing = false;
220+
private bool isGuide2Showing = false;
115221
}

0 commit comments

Comments
 (0)