Skip to content

Commit

Permalink
Move remaning images to the root folder too
Browse files Browse the repository at this point in the history
  • Loading branch information
@enisn
enisn committed Jul 7, 2024
1 parent 73808bb commit 42422fe
Show file tree
Hide file tree
Showing 111 changed files with 60 additions and 60 deletions.
4 changes: 2 additions & 2 deletions docs/en/themes/material/components/AutoCompleteTextField.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Then you can use it in a page like this:

| Light | Dark |
| --- | --- |
| ![MAUI AutoComplete Entry](images/autocompletetextfield-demo-android-light.gif) | ![MAUI AutoComplete Entry](images/autocompletetextfield-demo-android-dark.gif) |
| ![MAUI AutoComplete Entry](../../../../images/autocompletetextfield-demo-android-light.gif) | ![MAUI AutoComplete Entry](../../../../images/autocompletetextfield-demo-android-dark.gif) |


## Icon
Expand All @@ -56,7 +56,7 @@ AutoCompleteTextFields support setting an icon on the left side of the control.
Icon="{FontImageSource FontFamily=MaterialRegular, Glyph={x:Static m:MaterialRegular.Forest}}"/>
```

![MAUI AutoComplete Entry with icon](images/autocompletetextfield-icon-android-light.png)
![MAUI AutoComplete Entry with icon](../../../../images/autocompletetextfield-icon-android-light.png)

## Validation
Validation logic is exactly same with [InputKit Validations](https://enisn-projects.io/docs/en/inputkit/latest/components/controls/FormView#validations).
Expand Down
2 changes: 1 addition & 1 deletion docs/en/themes/material/components/Backdrop.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ You may visit [Material Design Backdrops](https://material.io/components/backdro

| Regular Implementation |
| --- |
| ![MAUI Material Design backdrop](images/backdrop-demo.gif) |
| ![MAUI Material Design backdrop](../../../../images/backdrop-demo.gif) |

## Usage
Backdrop is an [attachment](../../../infrastructure/UraniumContentPage.md#attachments) of [UraniumContentPage](../../../infrastructure/UraniumContentPage.md). So, it can be used only together with UraniumContentPage.
Expand Down
2 changes: 1 addition & 1 deletion docs/en/themes/material/components/BottomSheet.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ You may visit [Material Design Bottom Sheets](https://material.io/components/she

| Regular | Custom Header |
| --- | --- |
| ![MAUI Bottom Sheet Material](images/bottomsheet-regular-demo.gif) | ![MAUI Bottom Sheet Material](images/bottomsheet-expanding-demo.gif) |
| ![MAUI Bottom Sheet Material](../../../../images/bottomsheet-regular-demo.gif) | ![MAUI Bottom Sheet Material](../../../../images/bottomsheet-expanding-demo.gif) |

## Usage
Bottom Sheet is an [attachment](../../../infrastructure/UraniumContentPage.md#attachments) of [UraniumContentPage](../../../infrastructure/UraniumContentPage.md). So, it can be used only together with UraniumContentPage.
Expand Down
24 changes: 12 additions & 12 deletions docs/en/themes/material/components/DataGrid.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Then use it in XAML like this:
```
|Light - Desktop | Dark - Android | Light - iOS |
| :---: | :---: | :---: |
| ![MAUI datagrid](images/datagrid-demo.png) | ![](images/datagrid-demo-android.png) | ![](images/datagrid-selection-light-ios.gif) |
| ![MAUI datagrid](../../../../images/datagrid-demo.png) | ![](../../../../images/datagrid-demo-android.png) | ![](../../../../images/datagrid-selection-light-ios.gif) |


## Customizations
Expand All @@ -65,7 +65,7 @@ You can customize the cell item template by using `CellItemTemplate` property. I
</material:DataGrid>
```

![MAUI DataGrid Cell Item Template](images/datagrid-cellitemtemplate-editor-windows-dark.gif)
![MAUI DataGrid Cell Item Template](../../../../images/datagrid-cellitemtemplate-editor-windows-dark.gif)

### Columns

Expand All @@ -77,7 +77,7 @@ Columns are automatically detected by **DataGrid** when `UseAutoColumns` propert
public int Id { get; set; }
```

![MAUI Datagrid header](images/datagrid-displayname.png)
![MAUI Datagrid header](../../../../images/datagrid-displayname.png)


#### Custom Columns
Expand Down Expand Up @@ -120,7 +120,7 @@ An ItemTemplate can be defined for each column via using `CellItemTemplate` prop
</material:DataGrid>
```

![MAUI DataGrid Custom Columns](images/datagrid-colum-template.png)
![MAUI DataGrid Custom Columns](../../../../images/datagrid-colum-template.png)


Columns are not limited to the properties of the data source. You can also use custom columns without any property mapping. You can use `CellItemTemplate` to define the content of the column. That column will be rendered with your custom template. You can use any property of row for current binding.
Expand All @@ -146,7 +146,7 @@ Columns are not limited to the properties of the data source. You can also use c
</material:DataGrid>
```

![MAUI DataGrid Custom Columns](images/datagrid-delete-sample.gif)
![MAUI DataGrid Custom Columns](../../../../images/datagrid-delete-sample.gif)

#### Column Width
Column width can be defined by using `Width` property of `DataGridColumn` class. It can be set as `Auto`, `Star` or a custom value. Its type is `GridLength` and it'll be passed as parameter to [ColumnDefinition](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/layouts/grid#simplify-row-and-column-definitions). `Auto` is the default value. It will be calculated automatically. `Star` will take the remaining space of the grid. You can also set a custom value. It can be a `double` or a `GridLength`.
Expand All @@ -165,7 +165,7 @@ Column width can be defined by using `Width` property of `DataGridColumn` class.
</material:DataGrid>
```

![MAUI DataGrid Column Width](images/datagrid-column-width.png)
![MAUI DataGrid Column Width](../../../../images/datagrid-column-width.png)

#### TitleView
You can define a custom view for the header of the column by using `TitleView` property of `DataGridColumn` class. It is a `View` that will be rendered as the header of the column. You can use `Binding` to bind the properties of the column.
Expand Down Expand Up @@ -196,7 +196,7 @@ You can define a custom view for the header of the column by using `TitleView` p

| Light | Dark |
| --- | --- |
| ![MAUI DataGrid TitleView](images/datagrid-titleview-demo-light.png) | ![MAUI DataGrid TitleView](images/datagrid-titleview-demo-dark.png) |
| ![MAUI DataGrid TitleView](../../../../images/datagrid-titleview-demo-light.png) | ![MAUI DataGrid TitleView](../../../../images/datagrid-titleview-demo-dark.png) |

---

Expand All @@ -215,7 +215,7 @@ You can define a custom template for the title of the **DataGrid** by using `Tit

| Light | Dark |
| --- | --- |
| ![MAUI DataGrid Title Template](images/datagrid-titletemplate-demo-light.png) | ![MAUI DataGrid Title Template](images/datagrid-titletemplate-demo-dark.png) |
| ![MAUI DataGrid Title Template](../../../../images/datagrid-titletemplate-demo-light.png) | ![MAUI DataGrid Title Template](../../../../images/datagrid-titletemplate-demo-dark.png) |

### EmptyView

Expand All @@ -237,7 +237,7 @@ You can define a view to be shown when the data source is empty. It can be defin
</material:DataGrid>
```

![MAUI DataGrid EmptyView](images/datagrid-emptyview-desktop-light.gif)
![MAUI DataGrid EmptyView](../../../../images/datagrid-emptyview-desktop-light.gif)

## Selection
DataGrid supports multiple row selection. You can add `DataGridSelectionColumn` column to enable selection. Selected Items can be accessed via `SelectedItems` property of **DataGrid**. You can bind it to a property of your ViewModel.
Expand All @@ -255,7 +255,7 @@ DataGrid supports multiple row selection. You can add `DataGridSelectionColumn`

| Dark - Desktop | Light - Mobile |
| :---: | :---: |
| ![MAUI DataGrid Selection](images/datagrid-selection-windows.gif) | ![MAUI DataGrid Selection android](images/datagrid-selection-android.gif)
| ![MAUI DataGrid Selection](../../../../images/datagrid-selection-windows.gif) | ![MAUI DataGrid Selection android](../../../../images/datagrid-selection-android.gif)


**SelectedItems** can be handled with `ObservableCollection` over `IList` interface. So you can use `INotifyCollectionChanged` to handle changes in selection. The bound list will be automatically updated. _You don't need to register to `CollectionChanged` event of `SelectedItems` property._
Expand Down Expand Up @@ -297,7 +297,7 @@ public class MainViewModel
</StackLayout>
```

![MAUI DataGrid Selection Deletion](images/datagrid-selection-deletion.gif)
![MAUI DataGrid Selection Deletion](../../../../images/datagrid-selection-deletion.gif)

## Tips

Expand All @@ -309,7 +309,7 @@ You can place an activity indicator inside the DataGrid to show loading state if
</material:DataGrid>
```

![MAUI DataGrid Loading](images/datagrid-tips-indicator.gif)
![MAUI DataGrid Loading](../../../../images/datagrid-tips-indicator.gif)
### DataGridColumn
`DataGridColumn` is a class that is used to define a column of **DataGrid**. It has the following properties:

Expand Down
8 changes: 4 additions & 4 deletions docs/en/themes/material/components/DatePickerField.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Then you can use it like this:

| Light | Dark |
| --- | --- |
| ![MAUI Material Design TimePicker](images/datepickerfield-demo-light-android.gif) | ![MAUI Material Design TimePicker](images/datepickerfield-demo-dark-ios.gif) |
| ![MAUI Material Design TimePicker](../../../../images/datepickerfield-demo-light-android.gif) | ![MAUI Material Design TimePicker](../../../../images/datepickerfield-demo-dark-ios.gif) |


## Icon
Expand All @@ -31,7 +31,7 @@ DatePickerFields support setting an icon on the left side of the control. You ca

| Light | Dark |
| --- | --- |
| ![MAUI Material Input](images/datepickerfield-icon-light-android.gif) | ![MAUI Material Input](images/datepickerfield-icon-dark-ios.gif) |
| ![MAUI Material Input](../../../../images/datepickerfield-icon-light-android.gif) | ![MAUI Material Input](../../../../images/datepickerfield-icon-dark-ios.gif) |

## AllowClear
DatePickerFields support clearing the selected date by setting the `AllowClear` property to `true`. Default value is `true`. You can make it `false` to disable clearing.
Expand All @@ -48,7 +48,7 @@ DatePickerFields support clearing the selected date by setting the `AllowClear`

| Dark | Light|
| --- | --- |
| ![MAUI Material Input](images/datepickerfield-allowclear-dark-android.gif) | ![MAUI Material Input](images/datepickerfield-allowclear-light-android.gif) |
| ![MAUI Material Input](../../../../images/datepickerfield-allowclear-dark-android.gif) | ![MAUI Material Input](../../../../images/datepickerfield-allowclear-light-android.gif) |

## Validation
DatePickerField supports validation rules such as `MinValueValidation` and `MaxValueValidation`. You can use them like this:
Expand All @@ -62,7 +62,7 @@ DatePickerField supports validation rules such as `MinValueValidation` and `MaxV

| Light | Dark |
| --- | --- |
| ![MAUI Material Input](images/datepickerfield-validation-light-android.gif) | ![MAUI Material Input](images/datepickerfield-validation-dark-ios.gif) |
| ![MAUI Material Input](../../../../images/datepickerfield-validation-light-android.gif) | ![MAUI Material Input](../../../../images/datepickerfield-validation-dark-ios.gif) |


### FormView Compatibility
Expand Down
6 changes: 3 additions & 3 deletions docs/en/themes/material/components/EditorField.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Then you can use it like this:

| Light | Dark |
| --- | --- |
| ![MAUI EditorView](images/editorfield-demo-android-light.gif) | ![MAUI EditorView](images/editorfield-demo-android-dark.gif) |
| ![MAUI EditorView](../../../../images/editorfield-demo-android-light.gif) | ![MAUI EditorView](../../../../images/editorfield-demo-android-dark.gif) |


## Icon
Expand All @@ -28,7 +28,7 @@ TextFields support setting an icon on the left side of the control. You can set
Icon="{FontImageSource FontFamily=MaterialRegular, Glyph={x:Static m:MaterialRegular.Edit}}"/>
```

![MAUI EditorView icon](images/editorfield-icon-android-dark.png)
![MAUI EditorView icon](../../../../images/editorfield-icon-android-dark.png)

## AccentColor
The color that is used to fill border and icon of control when it's focused. You can change it by setting `AccentColor` property of the control.
Expand All @@ -41,7 +41,7 @@ The color that is used to fill border and icon of control when it's focused. You
```


![MAUI AccentColor InputField](images/editorfield-accentcolor-android-dark.gif)
![MAUI AccentColor InputField](../../../../images/editorfield-accentcolor-android-dark.gif)


## Validation
Expand Down
4 changes: 2 additions & 2 deletions docs/en/themes/material/components/InputField.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ InputField can be used in XAML like any other control. You can pass an existing
</material:InputField>
```

![MAUI Material Design Picker](images/inputfield-demo-timepicker.png)
![MAUI Material Design Picker](../../../../images/inputfield-demo-timepicker.png)

### Inherit from InputField

Expand All @@ -51,7 +51,7 @@ public class TimePickerField : InputField

`HasValue` property should be overriden. That property is responsible for determining if the control has a value or not. If the control has a value, the title will be moved up. If the control does not have a value, the title will be moved down when unfocused. The following example shows how to implement the `HasValue` property for the Editor control.

![MAUI Material Input](images/inputfield-demo-custom.gif)
![MAUI Material Input](../../../../images/inputfield-demo-custom.gif)


## Styling
Expand Down
2 changes: 1 addition & 1 deletion docs/en/themes/material/components/MultiplePickerField.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ MultiplePickerField is a component that allows you to select multiple values fro

| Light | Dark |
| --- | --- |
| ![MAUI Multiple selection](images/multiplepickerfield-demo-light.gif) | ![MAUI Multiple selection](images/multiplepickerfield-demo-dark.gif) |
| ![MAUI Multiple selection](../../../../images/multiplepickerfield-demo-light.gif) | ![MAUI Multiple selection](../../../../images/multiplepickerfield-demo-dark.gif) |


## Usage
Expand Down
2 changes: 1 addition & 1 deletion docs/en/themes/material/components/Paginator.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Then, you can use the paginator in your XAML file like this:
HorizontalOptions="Center"/>
```

![Paginator](images/paginator-preview.png)
![Paginator](../../../../images/paginator-preview.png)


## Properties
Expand Down
8 changes: 4 additions & 4 deletions docs/en/themes/material/components/PickerField.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Then you can use it like this:

| Light | Dark |
| --- | --- |
| ![MAUI Material PickerField](images/pickerfield-demo-light-android.gif) | ![MAUI Material PickerField](images/pickerfield-demo-dark-ios.gif) |
| ![MAUI Material PickerField](../../../../images/pickerfield-demo-light-android.gif) | ![MAUI Material PickerField](../../../../images/pickerfield-demo-dark-ios.gif) |


## Icon
Expand All @@ -33,7 +33,7 @@ PickerFields support setting an icon on the left side of the control. You can se

| Light | Dark |
| --- | --- |
| ![MAUI Material PickerField](images/pickerfield-icon-light-android.gif) | ![MAUI Material PickerField](images/pickerfield-icon-dark-ios.gif) |
| ![MAUI Material PickerField](../../../../images/pickerfield-icon-light-android.gif) | ![MAUI Material PickerField](../../../../images/pickerfield-icon-dark-ios.gif) |

## AllowClear
PickerFields support clearing the selected item by setting the `AllowClear` property to `true`. Default value is `true`. You can make it `false` to disable clearing.
Expand All @@ -52,7 +52,7 @@ PickerFields support clearing the selected item by setting the `AllowClear` prop

| Dark | Light|
| --- | --- |
| ![MAUI Material Input](images/pickerfield-allowclear-dark-android.gif) | ![MAUI Material Input](images/pickerfield-allowclear-light-android.gif) |
| ![MAUI Material Input](../../../../images/pickerfield-allowclear-dark-android.gif) | ![MAUI Material Input](../../../../images/pickerfield-allowclear-light-android.gif) |

## Validation
PickerField supports validation rules since it uses `object` as its **SelectedItem**. You can use any validation rule that supports your type. For example, if you are using List of `int` as **ItemsSource**, you can use `MinValueValidation` and `MaxValueValidation` rules. Still `RequiredValidation` is supported with any type of ItemsSource.
Expand All @@ -67,4 +67,4 @@ PickerField supports validation rules since it uses `object` as its **SelectedIt

```

![MAUI Material Picker Validation](images/pickerfield-validation-light-android.gif)
![MAUI Material Picker Validation](../../../../images/pickerfield-validation-light-android.gif)
14 changes: 7 additions & 7 deletions docs/en/themes/material/components/TabView.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Then you can use it like this:

| Light - Mobile | Dark - Desktop | Light - iOS |
| --- | --- | --- |
| ![MAUI TabView](images/tabview-simple-light-android.gif) | ![MAUI TabView](images/tabview-simple-dark-windows.gif) | ![MAUI TabView](images/tabview-simple-light-ios.gif) |
| ![MAUI TabView](../../../../images/tabview-simple-light-android.gif) | ![MAUI TabView](../../../../images/tabview-simple-dark-windows.gif) | ![MAUI TabView](../../../../images/tabview-simple-light-ios.gif) |


### TabHeader Placement
Expand All @@ -60,7 +60,7 @@ Table tabs can be placed at the top, bottom, start or left of the tab view. You

| Light - Android | Dark - Desktop | Light - iOS |
| --- | --- | --- |
| ![MAUI TabView Tab Placement](images/tabview-tabplacement-light-android.gif)| ![MAUI TabView Tab Placement](images/tabview-tabplacement-dark-windows.gif) | ![MAUI TabView Tab Placement](images/tabview-tabplacement-light-ios.gif) |
| ![MAUI TabView Tab Placement](../../../../images/tabview-tabplacement-light-android.gif)| ![MAUI TabView Tab Placement](../../../../images/tabview-tabplacement-dark-windows.gif) | ![MAUI TabView Tab Placement](../../../../images/tabview-tabplacement-light-ios.gif) |

### Custom Tab Header
You can customize the tab header by setting the `TabHeaderItemTemplate` property. The `TabHeaderItemTemplate` property is a **DataTemplate** that is used to render the tab header. The `TabHeaderItemTemplate` property is useful when you want to customize the tab header. In the datatemplate `Command` must be used in binding. That Command must be triggered when use tapped in the custom tab header.
Expand All @@ -86,7 +86,7 @@ Following parameters can be used in DataTemplate for binding:

| Light - Mobile | Dark - Desktop |
| --- | --- |
| ![MAUI TabView](images/tabview-simple-custom-light-android.gif) | ![MAUI TabView](images/tabview-simple-custom-dark-windows.gif) |
| ![MAUI TabView](../../../../images/tabview-simple-custom-light-android.gif) | ![MAUI TabView](../../../../images/tabview-simple-custom-dark-windows.gif) |


Also, tabs can be customized using [Triggers](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/triggers) according to the state of tab. `DataTrigger` can be used for styling tab item according to the state of tab. `IsSelected` property of `TabItem` can be used in DataTrigger.
Expand Down Expand Up @@ -135,7 +135,7 @@ Also, tabs can be customized using [Triggers](https://docs.microsoft.com/en-us/d

| Light - Mobile | Dark - Desktop |
| --- | --- |
| ![MAUI TabView](images/tabview-custom-template-light-android.gif) | ![MAUI TabView](images/tabview-custom-template-dark-windows.gif) |
| ![MAUI TabView](../../../../images/tabview-custom-template-light-android.gif) | ![MAUI TabView](../../../../images/tabview-custom-template-dark-windows.gif) |


---
Expand Down Expand Up @@ -187,7 +187,7 @@ Even you can define DataTemplate tab by tab separetely.

| Light - Mobile | Dark - Desktop |
| --- | --- |
| ![MAUI TabView](images/tabview-custom-item-template-light-android.gif) | ![MAUI TabView](images/tabview-custom-item-template-dark-windows.gif) |
| ![MAUI TabView](../../../../images/tabview-custom-item-template-light-android.gif) | ![MAUI TabView](../../../../images/tabview-custom-item-template-dark-windows.gif) |

### Dynamic Tabs
TabView supports dynamic tabs. You can add/remove tabs dynamically from a source. `ItemsSource` and `Itemtemplate` properties can be used for this purpose.
Expand Down Expand Up @@ -246,7 +246,7 @@ public class WebTabItem : UraniumBindableObject
}
```

![](images/tabview-dynamictabs-simple-windows-dark.gif)
![](../../../../images/tabview-dynamictabs-simple-windows-dark.gif)

## Caching options
TabView has three caching options. `CacheOnCodeBehind`, `CacheOnLayout` and `RecreateAlways` You can choose the best option for your scenario.
Expand Down Expand Up @@ -277,4 +277,4 @@ You can customize the `TabView` by using the style properties. You can use the f
</Style>
```

![MAUI TabView Customization](images/tabview-customizations-dark-windows.png)
![MAUI TabView Customization](../../../../images/tabview-customizations-dark-windows.png)
Loading

0 comments on commit 42422fe

Please sign in to comment.