Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete BitCallout demo (#8317) #8322

Merged
merged 3 commits into from
Aug 16, 2024
Merged

Complete BitCallout demo (#8317) #8322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c3eaee3
Complete BitCallout demo #8317
mhrastegari Aug 15, 2024
c7c2c60
Add missing Style & Class sample
mhrastegari Aug 16, 2024
6b4a5b6
Apply Saleh's review
mhrastegari Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 124 additions & 15 deletions ...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,45 @@
Description="callout component of the bit BlazorUI components" />

<ComponentDemo ComponentName="Callout"
ComponentDescription="The Callout component ..."
ComponentDescription="A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them."
ComponentParameters="componentParameters"
ComponentPublicMembers="componentPublicMembers"
ComponentSubClasses="componentSubClasses"
ComponentSubEnums="componentSubEnums">
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
<ExamplePreview>
<BitCallout>
<Anchor>
<BitButton>Click me</BitButton>
</Anchor>
<Content>
<div style="width: fit-content; padding: 1rem; border:1px solid gray;">
This is the callout content.
</div>
</Content>
</BitCallout>
<div>Basic usage of BitCallout component with a simple content and a button as the anchor to show or hide the callout.</div>
<br />
<div>
<BitCallout>
<Anchor>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style="padding: 1rem; border: 1px solid gray;">
This is the callout content.
</div>
</Content>
</BitCallout>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="External anchor" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
<ExamplePreview>
<div>Use an external element as the anchor for a BitCallout component, with both ID-based and ElementSelector-based anchoring options.</div>
<br />
<div class="example-box">
<BitButton Id="anchor_id" OnClick="() => callout1.Toggle()">AnchorId</BitButton>
<BitCallout AnchorId="anchor_id" @ref="callout1">
<div style="padding:1rem; border:1px solid gray;">
<div style="padding: 1rem; border: 1px solid gray;">
<BitCalendar />
</div>
</BitCallout>

<button @ref="anchorEl" @onclick="() => callout2.Toggle()">AnchorEl</button>
<BitCallout AnchorEl="() => anchorEl" @ref="callout2">
<div style="padding:1rem; border:1px solid gray;">
<div style="padding: 1rem; border: 1px solid gray;">
<BitCalendar />
</div>
</BitCallout>
Expand All @@ -47,19 +53,122 @@

<ComponentExampleBox Title="Binding" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
<ExamplePreview>
<div>Bind the Open state of BitCallout component to a boolean variable, allowing for more control over its opening and closing behavior.</div>
<br />
<div class="example-box">
<BitButton OnClick="() => isOpen = true">Open callout</BitButton>
<BitButton OnClick="() => isOpen = true">Show callout</BitButton>

<BitCallout @bind-IsOpen="isOpen">
<Anchor>
<button>Anchor</button>
</Anchor>
<Content>
<div style="width: fit-content; padding: 1rem; border:1px solid gray;">
<div style="padding: 1rem; border: 1px solid gray;">
This is the callout content.
<br />
You can even close it from here!
<br /><br />
<div>
<BitButton OnClick="() => isOpen = false">Done</BitButton>
<BitButton OnClick="() => isOpen = false" Variant="BitVariant.Outline">Cancel</BitButton>
</div>
</div>
</Content>
</BitCallout>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="DropDirection" RazorCode="@example4RazorCode" Id="example4">
<ExamplePreview>
<div>Explores different drop directions for the BitCallout component, including automatic and explicit directions.</div>
<br /><br />
<div>
<div>DropDirection: All</div><br />
<BitCallout Direction="BitDropDirection.All">
<Anchor>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style="padding: 1rem; border: 1px solid gray;">
@for (int i = 1; i < 13; i++)
{
var item = i;
<div>Callout content @(item)</div><br />
}
</div>
</Content>
</BitCallout>
<br /><br />
<div>DropDirection: TopAndBottom</div><br />
<BitCallout Direction="BitDropDirection.TopAndBottom">
<Anchor>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style="padding: 1rem; border: 1px solid gray;">
@for (int i = 1; i < 13; i++)
{
var item = i;
<div>Callout content @(item)</div><br />
}
</div>
</Content>
</BitCallout>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
<ExamplePreview>
<div>Explores styling and class customization for BitCallout, including component styles, custom classes, and detailed style options.</div>
<br />
<div>
<div>Component's Style & Class:</div><br />
<BitCallout Style="width: fit-content; box-shadow: tomato 0px 0px 8px;">
<Anchor>
<BitButton Color="BitColor.Error">Show callout</BitButton>
</Anchor>
<Content>
<div style="padding: 1rem; border: 1px solid gray;">
This is the callout content.
</div>
</Content>
</BitCallout>
<br />
<BitCallout Class="custom-class">
<Anchor>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style="padding: 1rem; border: 1px solid gray;">
This is the callout content.
</div>
</Content>
</BitCallout>
<br /><br />
<div>Styles & Classes:</div><br />
<BitCallout Styles="@(new() { Root = "--anchor-color: #2e8b5775; width: fit-content;",
Opened = "--anchor-color: #04cb5b75;",
AnchorContainer = "background-color: var(--anchor-color);" })">
<Anchor>
<BitActionButton>Show callout</BitActionButton>
</Anchor>
<Content>
<div style="padding: 1rem; border: 1px solid gray;">
This is the callout content.
</div>
</Content>
</BitCallout>
<br />
<BitCallout Classes="@(new() { Content = "custom-content", AnchorContainer = "custom-anchor" })">
<Anchor>
Show callout
</Anchor>
<Content>
This is the callout content.
</Content>
</BitCallout>
</div>
</ExamplePreview>
</ComponentExampleBox>
Expand Down
119 changes: 112 additions & 7 deletions ...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,10 +213,10 @@ public partial class BitCalloutDemo
private readonly string example1RazorCode = @"
<BitCallout>
<Anchor>
<BitButton>Click me</BitButton>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style=""width: fit-content; padding: 1rem; border:1px solid gray;"">
<div style=""padding: 1rem; border: 1px solid gray;"">
This is the callout content.
</div>
</Content>
Expand All @@ -225,15 +225,14 @@ This is the callout content.
private readonly string example2RazorCode = @"
<BitButton Id=""anchor_id"" OnClick=""() => callout1.Toggle()"">AnchorId</BitButton>
<BitCallout AnchorId=""anchor_id"" @ref=""callout1"">
<div style=""padding:1rem; border:1px solid gray;"">
<div style=""padding: 1rem; border: 1px solid gray;"">
<BitCalendar />
</div>
</BitCallout>


<button @ref=""anchorEl"" @onclick=""() => callout2.Toggle()"">AnchorEl</button>
<BitCallout AnchorEl=""() => anchorEl"" @ref=""callout2"">
<div style=""padding:1rem; border:1px solid gray;"">
<div style=""padding: 1rem; border: 1px solid gray;"">
<BitCalendar />
</div>
</BitCallout>";
Expand All @@ -243,18 +242,124 @@ This is the callout content.
private BitCallout callout2;";

private readonly string example3RazorCode = @"
<BitButton OnClick=""() => isOpen = true"">Open callout</BitButton>
<BitButton OnClick=""() => isOpen = true"">Show callout</BitButton>

<BitCallout @bind-IsOpen=""isOpen"">
<Anchor>
<button>Anchor</button>
</Anchor>
<Content>
<div style=""width: fit-content; padding: 1rem; border:1px solid gray;"">
<div style=""padding: 1rem; border: 1px solid gray;"">
This is the callout content.
<br />
You can even close it from here!
<br /><br />
<div>
<BitButton OnClick=""() => isOpen = false"">Done</BitButton>
<BitButton OnClick=""() => isOpen = false"" Variant=""BitVariant.Outline"">Cancel</BitButton>
</div>
</div>
</Content>
</BitCallout>";
private readonly string example3CsharpCode = @"
private bool isOpen;";

private readonly string example4RazorCode = @"
<BitCallout Direction=""BitDropDirection.All"">
<Anchor>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style=""padding: 1rem; border: 1px solid gray;"">
@for (int i = 1; i < 13; i++)
{
var item = i;
<div>Callout content @(item)</div><br />
}
</div>
</Content>
</BitCallout>

<BitCallout Direction=""BitDropDirection.TopAndBottom"">
<Anchor>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style=""padding: 1rem; border: 1px solid gray;"">
@for (int i = 1; i < 13; i++)
{
var item = i;
<div>Callout content @(item)</div><br />
}
</div>
</Content>
</BitCallout>";

private readonly string example5RazorCode = @"
<style>
.custom-class {
width: fit-content;
box-shadow: dodgerblue 0px 0px 8px;
}

.custom-content {
padding: 16px;
border-radius: 2px;
box-shadow: #a9a9a92e 0px 0px 4px 2px;
}

.custom-anchor {
color: white;
cursor: pointer;
padding: 8px 16px;
border-radius: 2px;
background-color: darkviolet;
}
</style>


<BitCallout Style=""width: fit-content; box-shadow: tomato 0px 0px 8px;"">
<Anchor>
<BitButton Color=""BitColor.Error"">Show callout</BitButton>
</Anchor>
<Content>
<div style=""padding: 1rem; border: 1px solid gray;"">
This is the callout content.
</div>
</Content>
</BitCallout>

<BitCallout Class=""custom-class"">
<Anchor>
<BitButton>Show callout</BitButton>
</Anchor>
<Content>
<div style=""padding: 1rem; border: 1px solid gray;"">
This is the callout content.
</div>
</Content>
</BitCallout>


<BitCallout Styles=""@(new() { Root = ""--anchor-color: #2e8b5775; width: fit-content;"",
Opened = ""--anchor-color: #04cb5b75;"",
AnchorContainer = ""background-color: var(--anchor-color);"" })"">
<Anchor>
<BitActionButton>Show callout</BitActionButton>
</Anchor>
<Content>
<div style=""padding: 1rem; border: 1px solid gray;"">
This is the callout content.
</div>
</Content>
</BitCallout>

<BitCallout Classes=""@(new() { Content = ""custom-content"", AnchorContainer = ""custom-anchor"" })"">
<Anchor>
Show callout
</Anchor>
<Content>
This is the callout content.
</Content>
</BitCallout>";
}
22 changes: 22 additions & 0 deletions ...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,26 @@
.example-box {
gap: 3rem;
display: flex;
flex-wrap: wrap;
}

::deep {
.custom-class {
width: fit-content;
box-shadow: dodgerblue 0px 0px 8px;
}

.custom-content {
padding: 16px;
border-radius: 2px;
box-shadow: #a9a9a92e 0px 0px 4px 2px;
}

.custom-anchor {
color: white;
cursor: pointer;
padding: 8px 16px;
border-radius: 2px;
background-color: darkviolet;
}
}
Loading