Up: updating readme file

mouadcherkaoui · Mar 20, 2020 · dd8bb81 · dd8bb81
1 parent ce2691f
commit dd8bb81
Showing 1 changed file with 94 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -191,63 +191,79 @@ under the hood the shell it self is composed from three building blocks:
                   IsExpanded="false">
 </BxNavigationMenu>
 ```
-okey, now if you are using the blazor web assembly project template you have to make some changes:
+
+all is fine, now if you are using the blazor web assembly project template you have to make some changes:
 
 - Index.razor
 
-```html
-<BxGrid>
-    <BxRow>
-        <BxCol lg="10" offset="lg-1">
-            <h1>Hello, world!</h1>
+    ```html
+    <BxGrid>
+        <BxRow>
+            <BxCol lg="10" offset="lg-1">
+                <h1>Hello, world!</h1>
 
-            Welcome to your new app.
+                Welcome to your new app.
 
-            <SurveyPrompt Title="How is Blazor working for you?" />
-        </BxCol>
-    </BxRow>
-</BxGrid>
-```
+                <SurveyPrompt Title="How is Blazor working for you?" />
+            </BxCol>
+        </BxRow>
+    </BxGrid>
+    ```
 
 - Counter.razor 
 
-```html
-<BxGrid>
-    <BxRow>
-        <BxCol lg="10" offset="lg-1">
-            <h1>Counter</h1>
-
-            <p>Current count: @currentCount</p>
-
-            <BxButton prefix="bx" Type="BxButton.ButtonType.Primary" OnClick="IncrementCount" Text="Click me"></BxButton>
-        </BxCol>
-    </BxRow>
-</BxGrid>
-```
+    ```html
+    <BxGrid>
+        <BxRow>
+            <BxCol lg="10" offset="lg-1">
+                <h1>Counter</h1>
+
+                <p>Current count: @currentCount</p>
+
+                <BxButton prefix="bx" Type="BxButton.ButtonType.Primary" OnClick="IncrementCount" Text="Click me"></BxButton>
+            </BxCol>
+        </BxRow>
+    </BxGrid>
+    ```
+
+- FetchData.rzor 
+
+    ```html
+    <BxGrid>
+        <BxRow>
+            <BxCol offset="lg-1" lg="10">
+                <h3>Weahther Forecasts</h3>
+                <p>This component demonstrates fetching data from the server.</p>
+                @if (forecasts == null)
+                {
+                    <p><em>Loading...</em></p>
+                }
+                else
+                {
+                    <BxDataTableV2 TItem="WeatherForecast" Items="forecasts" IsSelectable="true">
+                        <BatchActionsToolbar>
+                            <BxDataTableV2_Toolbar OnPrimaryButtonClick="@(() => Console.WriteLine("BxTable primary button clicked!"))" />
+                        </BatchActionsToolbar>
+                    </BxDataTableV2>
+                }
+            </BxCol>
+        </BxRow>
+    </BxGrid>
+    ```
 
--FetchData.rzor 
+finally a little change in the index.html file to show a styled loader component
 
 ```html
-<BxGrid>
-    <BxRow>
-        <BxCol offset="lg-1" lg="10">
-            <h3>Weahther Forecasts</h3>
-            <p>This component demonstrates fetching data from the server.</p>
-            @if (forecasts == null)
-            {
-                <p><em>Loading...</em></p>
-            }
-            else
-            {
-                <BxDataTableV2 TItem="WeatherForecast" Items="forecasts" IsSelectable="true">
-                    <BatchActionsToolbar>
-                        <BxDataTableV2_Toolbar OnPrimaryButtonClick="@(() => Console.WriteLine("BxTable primary button clicked!"))" />
-                    </BatchActionsToolbar>
-                </BxDataTableV2>
-            }
-        </BxCol>
-    </BxRow>
-</BxGrid>
+    <app>
+        <div class="bx--loading-overlay">
+            <div data-loading class="bx--loading">
+                <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+                    <title>Loading</title>
+                    <circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
+                </svg>
+            </div>
+        </div>
+    </app>
 ```
 
 ## Running the project
@@ -265,14 +281,43 @@ also you can host your application whther on azure storage public websites "prev
 ## Components
 
 - BxAccordion
-- BxModal
+- BxButton
 - BxTabs
 - BxCheckbox
-- BxDatatable
 - BxStructuredList
 - BxOverflowMenu
+- BxDatatable
+- BxModal
 
-```
+
+### BxAccordion 
+
+```html
+<BxAccordion Items="Items" />
+
+@code {
+    public IEnumerable<AccordionItem>
+        Items { get; set; }
+            = new List<AccordionItem>
+            {
+                new AccordionItem
+                {
+                    Title = "first pane",
+                    Content = (tree) => tree.AddMarkupContent(0, "<p>a sample content with some tags in it, <strong>First item!</strong></p>")
+                },
+                new AccordionItem
+                {
+                    Title = "second pane",
+                    Content = (tree) => tree.AddMarkupContent(0, "<p>a sample content with some tags in it, <strong>Second  item!</strong></p>")
+                },
+                new AccordionItem
+                {
+                    Title = "third pane",
+                    Content = (tree) => tree.AddMarkupContent(0, "<p>a sample content with some tags in it, <strong>Third item!</strong></p>")
+                }
+        };
+
+}
 ```
 
 ## Deployment