Skip to content

Commit

Permalink
Merge pull request #43 from ZeroGachis/feature/choice-chips-component
Browse files Browse the repository at this point in the history 
✨Choice chips component
  • Loading branch information
@pewho
pewho authored Jan 15, 2021
2 parents 11ef185 + cf984b5 commit 6fa49b7
Show file tree
Hide file tree
Showing 5 changed files with 180 additions and 26 deletions.
8 changes: 8 additions & 0 deletions Smartway.UiComponent.Sample/Inputs/ViewModels/InputsViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows.Input;
using Smartway.UiComponent.Inputs;
using Xamarin.Forms;

namespace Smartway.UiComponent.Sample.Inputs.ViewModels
Expand Down Expand Up @@ -32,5 +33,12 @@ public InputsViewModel()
var message = $"{SelectedElement.Label} selected element";
DependencyService.Get<INotifyMessage>().ShortAlert(message);
});

public ICommand ChipsAction => new Command((param) =>
{
var chips = (Chips) param;
chips.IsVisible = false;
DependencyService.Get<INotifyMessage>().ShortAlert("Chips tapped !");
});
}
}
100 changes: 74 additions & 26 deletions Smartway.UiComponent.Sample/Inputs/Views/Inputs.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,81 @@
xmlns:inputs="clr-namespace:Smartway.UiComponent.Inputs;assembly=Smartway.UiComponent"
x:Class="Smartway.UiComponent.Sample.Inputs.Views.Inputs"
x:DataType="viewModels:InputsViewModel">
<ContentPage.Resources>
<Style x:Key="SubtitleStyle" TargetType="Label">
<Setter Property="FontFamily" Value="OpenSansSemiBold"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style x:Key="TitleStyle" TargetType="Label">
<Setter Property="FontFamily" Value="OpenSansBold"/>
<Setter Property="FontSize" Value="16"/>
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Spacing="30" Margin="16, 30, 16, 0">
<barcode:BarcodeInput />
<Frame>
<StackLayout>
<inputs:RadioButton>
<Label Text="Banane" FontSize="16"/>
</inputs:RadioButton>
<inputs:RadioButton>
<Label Text="Fraise" FontSize="16"/>
</inputs:RadioButton>
</StackLayout>
</Frame>
<Frame>
<StackLayout>
<StackLayout BindableLayout.ItemsSource="{Binding RadioButtons}">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="viewModels:RadioButtonInputViewModel">
<inputs:RadioButton Name="Group2" Position="Right" IsChecked="{Binding IsChecked}">
<Label Text="{Binding Label}" FontSize="16"/>
</inputs:RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
<ScrollView>
<StackLayout Spacing="30" Padding="16, 30, 16, 0" BackgroundColor="#E5E5E5">
<Frame>
<StackLayout Padding="0, 0, 0, 5">
<Label Text="Barcode Input" Style="{StaticResource TitleStyle}"/>
<barcode:BarcodeInput />
</StackLayout>
<Button Command="{Binding Validate}" Text="Valider" />
</StackLayout>
</Frame>
</StackLayout>
</Frame>

<Frame>
<StackLayout>
<Label Text="RadioButton" Style="{StaticResource TitleStyle}"/>
<inputs:RadioButton>
<Label Text="Banane" FontSize="16"/>
</inputs:RadioButton>
<inputs:RadioButton>
<Label Text="Fraise" FontSize="16"/>
</inputs:RadioButton>
</StackLayout>
</Frame>
<Frame>
<StackLayout>
<Label Text="RadioButton with Validation" Style="{StaticResource TitleStyle}"/>
<StackLayout BindableLayout.ItemsSource="{Binding RadioButtons}">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="viewModels:RadioButtonInputViewModel">
<inputs:RadioButton Name="Group2" Position="Right" IsChecked="{Binding IsChecked}">
<Label Text="{Binding Label}" FontSize="16"/>
</inputs:RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<Button Command="{Binding Validate}" Text="Valider" />
</StackLayout>
</Frame>
<Frame>
<StackLayout Orientation="Vertical">
<Label Text="Choice Chips" Style="{StaticResource TitleStyle}"/>
<Label Text="Defaut" Style="{StaticResource SubtitleStyle}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="10">
<inputs:Chips Label="Chips" />
<inputs:Chips Label="Chips Selected" IsSelected="True" />
</StackLayout>
<Label Text="Counter" Style="{StaticResource SubtitleStyle}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="10">
<inputs:Chips Label="Chips • 125" />
<inputs:Chips Label="Chips • 125" IsSelected="True"/>
</StackLayout>
<Label Text="With Command" Style="{StaticResource SubtitleStyle}" />
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<inputs:Chips Label="Tap me !" Command="{Binding ChipsAction}"/>
</StackLayout>
<Label Style="{StaticResource SubtitleStyle}" Text="Chips en mode Block"/>
<Grid ColumnSpacing="10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<inputs:Chips Label="Block 1"/>
<inputs:Chips Label="Block 2" IsSelected="True" Grid.Column="1" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
45 changes: 45 additions & 0 deletions Smartway.UiComponent/Inputs/Chips.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Smartway.UiComponent.Inputs.Chips"
x:Name="Chip">
<ContentView.Resources>
<Style TargetType="{x:Type Frame}" x:Key="RoundBtn">
<Setter Property="BorderColor" Value="#E2E4F0"/>
<Setter Property="CornerRadius" Value="80" />
<Setter Property="BackgroundColor" Value="White"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="16,12" />
<Setter Property="HasShadow" Value="False" />
</Style>
<Style TargetType="{x:Type Frame}" x:Key="RoundBtnSelected">
<Setter Property="BorderColor" Value="Black"/>
<Setter Property="CornerRadius" Value="80" />
<Setter Property="BackgroundColor" Value="#EBEBEB"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="16,12" />
<Setter Property="HasShadow" Value="False" />
</Style>
<Style TargetType="{x:Type Label}" x:Key="ChipsLabel">
<Setter Property="FontFamily" Value="OpenSans"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
</Style>
</ContentView.Resources>
<ContentView.Content>
<Frame Style="{StaticResource RoundBtn}">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Frame.GestureRecognizers>
<Frame.Triggers>
<DataTrigger TargetType="Frame" Binding="{Binding Source={x:Reference Chip}, Path=IsSelected}" Value="True">
<Setter Property="Style" Value="{StaticResource RoundBtnSelected}" />
</DataTrigger>
<DataTrigger TargetType="Frame" Binding="{Binding Source={x:Reference Chip}, Path=IsSelected}" Value="False">
<Setter Property="Style" Value="{StaticResource RoundBtn}" />
</DataTrigger>
</Frame.Triggers>
<Label Style="{StaticResource ChipsLabel}" Text="{Binding Source={x:Reference Chip}, Path=Label}" />
</Frame>
</ContentView.Content>
</ContentView>
50 changes: 50 additions & 0 deletions Smartway.UiComponent/Inputs/Chips.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
using System;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Smartway.UiComponent.Inputs
{
[ContentProperty("CustomContent")]
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Chips: ContentView
{
public static readonly BindableProperty IsSelectedProperty =
BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(Chips), false);

public static readonly BindableProperty LabelProperty = BindableProperty.Create(nameof(Label), typeof(string),
typeof(Chips));

public static readonly BindableProperty CommandProperty =
BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(Chips));

public bool IsSelected
{
get => (bool) GetValue(IsSelectedProperty);
set => SetValue(IsSelectedProperty, value);
}

public string Label
{
get => (string) GetValue(LabelProperty);
set => SetValue(LabelProperty, value);
}

public ICommand Command
{
get => (ICommand) GetValue(CommandProperty);
set => SetValue(CommandProperty, value);
}

public Chips()
{
InitializeComponent();
}

private void OnTapped(object sender, EventArgs e)
{
IsSelected = !IsSelected;
Command?.Execute(this);
}
}
}
3 changes: 3 additions & 0 deletions Smartway.UiComponent/Smartway.UiComponent.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,9 @@
<EmbeddedResource Update="Cards\RoundedFrame.xaml">
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
<EmbeddedResource Update="Inputs\Chips.xaml">
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
<EmbeddedResource Update="Inputs\FormEntry.xaml">
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
Expand Down

0 comments on commit 6fa49b7

Please sign in to comment.