-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
30 changed files
with
1,065 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| # MaterialBottomSheet | ||
| MaterialBottomSheet shows secondary content anchored to the bottom of the screen. | ||
| <br/> | ||
| [View Material Design documentation](https://m3.material.io/components/bottom-sheets/overview) | ||
|
|
||
| ## Screenshot | ||
| <img src="screenshots/bottomsheet.gif" width="300"> | ||
|
|
||
| ## Example | ||
| ```XML | ||
| <material3:MaterialBottomSheet | ||
| x:Name="materialBottomSheet"> | ||
| <material3:MaterialBottomSheet.Content> | ||
| <StackLayout> | ||
| <material3:MaterialLabel | ||
| Text="Secondary content anchored to the bottom of the screen" /> | ||
| </StackLayout> | ||
| </material3:MaterialBottomSheet.Content> | ||
| </material3:MaterialBottomSheet> | ||
| ``` | ||
|
|
||
| ## Documentation | ||
|
|
||
| ### Method Open: | ||
| Method used to open/show the bottom sheet. | ||
| ```C# | ||
| await materialBottomSheet.Open(); | ||
| ``` | ||
| <br/> | ||
|
|
||
| ### Method Close: | ||
| Method used to close/hide the bottom sheet. | ||
| ```C# | ||
| await materialBottomSheet.Close(); | ||
| ``` | ||
| <br/> | ||
|
|
||
| ### Property BackgroundColor: | ||
| Gets or sets the container background color. | ||
| <br/> | ||
|
|
||
| ### Property CornerRadius: | ||
| Gets or sets the container corner radius. | ||
| <br/> | ||
|
|
||
| ### Property Content: | ||
| Gets or sets the content that will be displayed inside the container. | ||
| <br/> | ||
|
|
||
| ### Property ContentVerticalOptions: | ||
| Gets or sets the vertical options to the container's content. By default it has the **Start** value. | ||
| <br/> | ||
|
|
||
| ### Property ContainerHeight: | ||
| Gets or sets the container height. By default it has a **-1** and the height of the container adjusts to the container's content. This property should only be used if a fixed height is needed for the container. | ||
| <br/> | ||
|
|
||
| ### Property MaximumContainerHeightRequest: | ||
| Gets or sets the maximum height to which the container can expand. It only works when the ContainerHeight property is not set and the container height is dynamic. | ||
| <br/> | ||
|
|
||
| ### Property IsOpened: | ||
| Gets a boolean that indicates whether the container is open or not. It is a read-only binding property. | ||
| <br/> | ||
|
|
||
| ### Property ScrimColor: | ||
| Gets or sets the scrim color. | ||
| <br/> | ||
|
|
||
| ### Property ScrimOpacity: | ||
| Gets or sets the scrim opacity/transparency. | ||
| <br/> | ||
|
|
||
| ### Property DragHandleColor: | ||
| Gets or sets the drag handle color. | ||
| <br/> | ||
|
|
||
| ### Property DragHandleWidth: | ||
| Gets or sets the drag handle width. | ||
| <br/> | ||
|
|
||
| ### Property DragHandleHeight: | ||
| Gets or sets the drag handle height. | ||
| <br/> | ||
|
|
||
| ### Property DragHandleIsVisible: | ||
| Gets or sets if the the drag handle is visible. | ||
| <br/> | ||
|
|
||
| ### Property AnimationDuration: | ||
| Gets or sets the amount of time in milliseconds that will be used to animate the container when it is opening or closing. | ||
| <br/> | ||
|
|
||
| ### Property DismissThreshold: | ||
| Gets or sets the threshold point where the container will be dismissed if the user is swiping to hide it. This property accepts values between 0 and 1. By default it has a **0.4**. | ||
| <br/> | ||
|
|
||
| ### Property IsSwipeEnabled: | ||
| Gets or sets if the user will be able to swipe the container to dismiss/hide it. | ||
| <br/> | ||
|
|
||
| ### Property DismissWhenScrimIsTapped: | ||
| Gets or sets if the user will be able to tap over the scrim to dismiss/hide the container. | ||
| <br/> | ||
|
|
||
| ## Best Practices and Considerations | ||
|
|
||
| > ⚠️ Avoid utilizing the **Margin** property within the root element of the MaterialBottomSheet's content, as its usage may result in errors or unexpected behaviors. | ||
| > ⚠️ If the MaterialBottomSheet will be used within a tabbed view (TabbedPage), setting a BackgroundColor for the TabBar is advisable, as it may cause unexpected behaviors on iOS. | ||
| Example of how to set the BackgroundColor of the TabBar: | ||
| UITabBar.Appearance.BackgroundColor = UIColor.White; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
182 changes: 182 additions & 0 deletions
182
example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| <?xml version="1.0" encoding="UTF-8" ?> | ||
| <ContentPage | ||
| xmlns="http://xamarin.com/schemas/2014/forms" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | ||
| x:Class="ExampleMaterialDesignControls.Pages.MaterialBottomSheetPage" | ||
| xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms" | ||
| xmlns:contentViews="clr-namespace:ExampleMaterialDesignControls.ContentViews" | ||
| xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" | ||
| xmlns:material3="clr-namespace:Plugin.MaterialDesignControls.Material3;assembly=Plugin.MaterialDesignControls" | ||
| ios:Page.UseSafeArea="True" | ||
| BackgroundColor="White" | ||
| NavigationPage.HasNavigationBar="false"> | ||
| <ContentPage.Content> | ||
| <Grid | ||
| RowDefinitions="Auto,*" | ||
| RowSpacing="0"> | ||
| <material3:MaterialTopAppBar | ||
| Headline="MaterialBottomSheet" | ||
| LeadingIconCommand="{Binding BackCommand}"> | ||
| <material3:MaterialTopAppBar.CustomLeadingIcon> | ||
| <ffimageloadingsvg:SvgCachedImage | ||
| Source="resource://ExampleMaterialDesignControls.Resources.Svg.ic_back_b.svg" /> | ||
| </material3:MaterialTopAppBar.CustomLeadingIcon> | ||
| </material3:MaterialTopAppBar> | ||
|
|
||
| <ScrollView | ||
| Grid.Row="1" | ||
| VerticalScrollBarVisibility="Never"> | ||
| <StackLayout | ||
| Padding="20,0,20,20" | ||
| Spacing="10"> | ||
|
|
||
| <contentViews:InfoIndicatorView | ||
| Message="MaterialBottomSheet follows the latest guidelines of Material Design 3" /> | ||
|
|
||
| <material3:MaterialDivider /> | ||
|
|
||
| <material3:MaterialLabel | ||
| Text="MaterialBottomSheet samples:" | ||
| HorizontalTextAlignment="Center" /> | ||
|
|
||
| <material3:MaterialButton | ||
| ButtonType="Text" | ||
| Command="{Binding OpenBottomSheetCommand}" | ||
| CommandParameter="materialBottomSheet1" | ||
| Text="Dynamic size" /> | ||
|
|
||
| <material3:MaterialButton | ||
| ButtonType="Text" | ||
| Command="{Binding OpenBottomSheetCommand}" | ||
| CommandParameter="materialBottomSheet2" | ||
| Text="Fixed size" /> | ||
|
|
||
| <material3:MaterialButton | ||
| ButtonType="Text" | ||
| Command="{Binding OpenBottomSheetCommand}" | ||
| CommandParameter="materialBottomSheet3" | ||
| Text="Dynamic size and MaximumContainerHeightRequest" /> | ||
|
|
||
| <material3:MaterialDivider /> | ||
|
|
||
| <material3:MaterialButton | ||
| ButtonType="Text" | ||
| Command="{Binding OpenInModalPageCommand}" | ||
| Text="Open in modal page" /> | ||
|
|
||
| </StackLayout> | ||
| </ScrollView> | ||
|
|
||
| <!--Dynamic size--> | ||
| <material3:MaterialBottomSheet | ||
| x:Name="materialBottomSheet1" | ||
| Grid.Row="1"> | ||
| <material3:MaterialBottomSheet.Content> | ||
| <StackLayout | ||
| Spacing="10" | ||
| Padding="22,44,22,12"> | ||
| <material3:MaterialLabel | ||
| FontFamily="{StaticResource BoldFont}" | ||
| FontSize="{StaticResource H4FontSize}" | ||
| Text="Material Design" | ||
| TextColor="{StaticResource GradientColor1}" /> | ||
| <material3:MaterialLabel | ||
| FontAttributes="Bold" | ||
| FontFamily="{StaticResource SemiBoldFont}" | ||
| FontSize="{StaticResource H5FontSize}" | ||
| Text="Plugin for Xamarin Forms" | ||
| TextColor="{StaticResource BlackColor}" /> | ||
| <material3:MaterialLabel | ||
| FontSize="{StaticResource Body2FontSize}" | ||
| Text="Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products." | ||
| TextColor="{StaticResource DarkGrayColor}" /> | ||
| </StackLayout> | ||
| </material3:MaterialBottomSheet.Content> | ||
| </material3:MaterialBottomSheet> | ||
|
|
||
| <!--Fixed size--> | ||
| <material3:MaterialBottomSheet | ||
| x:Name="materialBottomSheet2" | ||
| Grid.Row="1" | ||
| ContainerHeight="400" | ||
| ContentVerticalOptions="Center"> | ||
| <material3:MaterialBottomSheet.Content> | ||
| <StackLayout | ||
| Spacing="10" | ||
| Padding="22,44,22,12"> | ||
| <material3:MaterialLabel | ||
| FontFamily="{StaticResource BoldFont}" | ||
| FontSize="{StaticResource H4FontSize}" | ||
| Text="Material Design" | ||
| TextColor="{StaticResource GradientColor1}" /> | ||
| <material3:MaterialLabel | ||
| FontAttributes="Bold" | ||
| FontFamily="{StaticResource SemiBoldFont}" | ||
| FontSize="{StaticResource H5FontSize}" | ||
| Text="Plugin for Xamarin Forms" | ||
| TextColor="{StaticResource BlackColor}" /> | ||
| <material3:MaterialLabel | ||
| FontSize="{StaticResource Body2FontSize}" | ||
| Text="Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products." | ||
| TextColor="{StaticResource DarkGrayColor}" /> | ||
| </StackLayout> | ||
| </material3:MaterialBottomSheet.Content> | ||
| </material3:MaterialBottomSheet> | ||
|
|
||
| <!--Dynamic size with MaximumContainerHeightRequest--> | ||
| <material3:MaterialBottomSheet | ||
| x:Name="materialBottomSheet3" | ||
| Grid.Row="1" | ||
| MaximumContainerHeightRequest="300"> | ||
| <material3:MaterialBottomSheet.Content> | ||
| <StackLayout | ||
| Padding="22,44,22,0"> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="MaterialBottomSheet sample" /> | ||
| <ScrollView> | ||
| <StackLayout> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="1" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="2" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="3" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="4" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="5" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="6" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="7" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="8" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="9" /> | ||
| <material3:MaterialLabel | ||
| HorizontalTextAlignment="Center" | ||
| Text="10" /> | ||
| </StackLayout> | ||
| </ScrollView> | ||
| <material3:MaterialButton | ||
| ButtonType="Text" | ||
| Command="{Binding CloseBottomSheetCommand}" | ||
| CommandParameter="materialBottomSheet3" | ||
| Text="Close" /> | ||
| </StackLayout> | ||
| </material3:MaterialBottomSheet.Content> | ||
| </material3:MaterialBottomSheet> | ||
|
|
||
| </Grid> | ||
| </ContentPage.Content> | ||
| </ContentPage> |
23 changes: 23 additions & 0 deletions
23
example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| using ExampleMaterialDesignControls.ViewModels; | ||
| using Plugin.MaterialDesignControls.Material3; | ||
| using Xamarin.Forms; | ||
|
|
||
| namespace ExampleMaterialDesignControls.Pages | ||
| { | ||
| public partial class MaterialBottomSheetPage : ContentPage | ||
| { | ||
| public MaterialBottomSheetPage(bool isModalPage = false) | ||
| { | ||
| InitializeComponent(); | ||
|
|
||
| BindingContext = new MaterialBottomSheetViewModel | ||
| { | ||
| IsModalPage = isModalPage, | ||
| DisplayAlert = DisplayAlert, | ||
| Navigation = Navigation, | ||
| OpenBottomSheetControl = async (controlName) => await this.FindByName<MaterialBottomSheet>(controlName).Open(), | ||
| CloseBottomSheetControl = async (controlName) => await this.FindByName<MaterialBottomSheet>(controlName).Close() | ||
| }; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.