#502 [doc] Cleanup demos in documentation by using IDemoDataService -…

… DocDemoDataServiceNote
havit · Jan 15, 2024 · 78bda75 · 78bda75
1 parent 24ab6d5
commit 78bda75
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 36 deletions.
diff --git a/....Blazor.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor b/....Blazor.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor
@@ -14,6 +14,7 @@
 
         <DocHeading Title="Basic usage" />
         <Demo Type="typeof(HxAutosuggest_Demo_Basic)" Tabs="false" />
+		<DocDemoDataServiceNote />
 
 		<DocHeading Title="Initial suggestions" />
 		<p>

diff --git a/...lazor.Documentation/Pages/Components/HxCheckboxListDoc/HxCheckboxList_Documentation.razor b/...lazor.Documentation/Pages/Components/HxCheckboxListDoc/HxCheckboxList_Documentation.razor
@@ -3,6 +3,7 @@
 <ComponentApiDoc Type="typeof(HxCheckboxList<TValue, TItem>)">
     <DocHeading Title="Basic usage" />
     <Demo Type="typeof(HxCheckboxList_Demo)" Tabs="false" />
+	<DocDemoDataServiceNote />
 
     <DocHeading Title="Inline" />
     <p>Group checkboxes on the same horizontal row by adding <code>Inline="true"</code>.</p>

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxGridDoc/HxGrid_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxGridDoc/HxGrid_Documentation.razor
@@ -20,7 +20,7 @@
 			The method you provide should be <code>async</code> and should
 			<code>await</code> the data if needed (loading progress is indicated in the meantime).
 		</DocAlert>
-
+		<DocDemoDataServiceNote />
 
 		<DocHeading Title="Automatic sorting and paging" Id="ApplyTo" />
 		<p>

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Documentation.razor
@@ -5,6 +5,7 @@
 
 		<DocHeading Title="Basic usage" />
 		<Demo Type="typeof(HxListLayout_Demo_Basic)" />
+		<DocDemoDataServiceNote />
 
 		<DocHeading Title="Infinite scroll with sticky header" Id="sticky-header" />
 		<p>

diff --git a/....Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor b/....Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor
@@ -5,6 +5,7 @@
 
 		<DocHeading Title="Basic usage" />
 		<Demo Type="typeof(HxMultiSelect_Demo_BasicUsage)" />
+		<DocDemoDataServiceNote />
 
 		<DocHeading Title="Filtering" />
 		<p>

diff --git a/...Documentation/Pages/Components/HxRadioButtonListDoc/HxRadioButtonList_Documentation.razor b/...Documentation/Pages/Components/HxRadioButtonListDoc/HxRadioButtonList_Documentation.razor
@@ -5,6 +5,7 @@
 
     <DocHeading Title="Basic usage" />
     <Demo Type="typeof(HxRadioButtonList_Demo)" Tabs="false" />
+	<DocDemoDataServiceNote />
 
     <DocHeading Title="Inline" />
     <p>Group radios on the same horizontal row by adding <code>Inline="true"</code>.</p>

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxRepeaterDoc/HxRepeater_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxRepeaterDoc/HxRepeater_Documentation.razor
@@ -4,5 +4,6 @@
 
     <DocHeading Title="Basic usage" />
     <Demo Type="typeof(HxRepeater_Demo)" />
+	<DocDemoDataServiceNote />
 
 </ComponentApiDoc>
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor
@@ -1,23 +1,24 @@
 @attribute [Route("/components/" + nameof(HxSearchBox<TItem>))]
 
 <ComponentApiDoc Type="typeof(HxSearchBox<TItem>)">
-    <MainContent>
-   <p>
-			<code>HxSearchBox</code> component is similar to <a href="/components/HxAutosuggest">HxAutosuggest</a> component, but it is designed to be used for searching.<br/>
+	<MainContent>
+		<p>
+			<code>HxSearchBox</code> component is similar to <a href="/components/HxAutosuggest">HxAutosuggest</a> component, but it is designed to be used for searching.<br />
 			<ul>
 				<li><code>HxSearchBox</code> allows you to customize item rendering,</li>
 				<li><code>HxSearchBox</code> supports free-text query,</li>
 				<li><code>HxSearchBox</code> does not support <code>Value</code> binding to the model,</li>
 				<li><code>HxSearchBox</code> does not support validation.</li>
 			</ul>
-   </p>
+		</p>
 
-        <DocHeading Title="Basic usage" />
-        <Demo Type="typeof(HxSearchBox_Demo)" />
+		<DocHeading Title="Basic usage" />
+		<Demo Type="typeof(HxSearchBox_Demo)" />
+		<DocDemoDataServiceNote />
 
-        <DocHeading Title="Suggestions only" />
-        <p>You can disable free-text query by setting <code>AllowTextQuery="false"</code>. Only suggestions will be allowed.</p>
-        <Demo Type="typeof(HxSearchBox_Demo_DisableTextQuery)" />
+		<DocHeading Title="Suggestions only" />
+		<p>You can disable free-text query by setting <code>AllowTextQuery="false"</code>. Only suggestions will be allowed.</p>
+		<Demo Type="typeof(HxSearchBox_Demo_DisableTextQuery)" />
 
 		<DocHeading Title="Initial suggestions" />
 		<p>
@@ -34,30 +35,30 @@
 		<p>You may want to include a straightforward search box to initiate text-based searches. No suggestions, just visual cues to assist the user.</p>
 		<Demo Type="typeof(HxSearchBox_Demo_TextQueryOnly)" />
 	</MainContent>
-    <CssVariables>
-        <ComponentApiDocCssVariable Name="--hx-search-box-item-icon-margin" Default="0 .5rem 0 0">
-            Item icon margin.
-        </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-search-box-item-icon-font-size" Default="inherit">
-            Item icon font-size.
-        </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-search-box-item-title-font-size" Default="inherit">
-            Item title font-size.
-        </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-search-box-item-title-color" Default="inherit">
-            Item title color.
-        </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-search-box-item-subtitle-font-size" Default=".75rem">
-            Item subtitle font-size.
-        </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-search-box-item-subtitle-color" Default="var(--bs-secondary)">
-            Item subtitle color.
-        </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-search-box-dropdown-menu-height" Default="300px">
-            Maximum height of the results dropdown menu.
-        </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-search-box-item-highlighted-background-color" Default="var(--bs-tertiary-bg)">
-            Background color of an item when highlighted.
-        </ComponentApiDocCssVariable>
-    </CssVariables>
+	<CssVariables>
+		<ComponentApiDocCssVariable Name="--hx-search-box-item-icon-margin" Default="0 .5rem 0 0">
+			Item icon margin.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-item-icon-font-size" Default="inherit">
+			Item icon font-size.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-item-title-font-size" Default="inherit">
+			Item title font-size.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-item-title-color" Default="inherit">
+			Item title color.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-item-subtitle-font-size" Default=".75rem">
+			Item subtitle font-size.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-item-subtitle-color" Default="var(--bs-secondary)">
+			Item subtitle color.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-dropdown-menu-height" Default="300px">
+			Maximum height of the results dropdown menu.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-item-highlighted-background-color" Default="var(--bs-tertiary-bg)">
+			Background color of an item when highlighted.
+		</ComponentApiDocCssVariable>
+	</CssVariables>
 </ComponentApiDoc>
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSelectDoc/HxSelect_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSelectDoc/HxSelect_Documentation.razor
@@ -4,6 +4,7 @@
 <ComponentApiDoc Type="typeof(HxSelect<TValue, TItem>)">
     <DocHeading Title="Basic usage" />
     <Demo Type="typeof(HxSelect_Demo)" Tabs="false" />
+	<DocDemoDataServiceNote />
 
     <DocHeading Title="Input groups" />
     <Demo Type="typeof(HxSelect_Demo_InputGroups)" />

diff --git a/Havit.Blazor.Documentation/Shared/Components/DocDemoDataServiceNote.razor b/Havit.Blazor.Documentation/Shared/Components/DocDemoDataServiceNote.razor
@@ -0,0 +1,4 @@
+<p class="mt-2 fw-light">
+	<span class="fst-italic">Note:</span> The demos on this page use <code>DemoDataService</code>, in-memory simulation of a simple data store.
+	Find the implementation on <a href="https://github.com/havit/Havit.Blazor/tree/master/Havit.Blazor.Documentation/DemoData" target="_blank">GitHub</a>.
+</p>