+# What is MaterialUI?
+Material is an adaptable design system that is backed by open-source code that helps to build high quality digital experiences. From design to components, Material can help you build products faster. Material Guidelines provides the best practices and use Interface design, it also as a well-defined platform guidelines that helps you cover all platforms.
+As you might know the components being the basic building block making product usable and functional and each component comes with a well-designed interaction pattern.
-
-
-
-
-
-
-
-
-
-
+# Benefits
+Let's see more granular benefits of using Material
+1. Three Dimensional effects that makes interaction and hierarchy simple.
+2. The design are highly intuitive thus making the learning curve easy.
+3. Imbibing animations is smooth using material.
+4. Easy conceptual models close enough to make the experience seamless.
+# Typical Use Cases
+
+
-
-
-
-
-
-
+# Usage Instructions
-
+# List of Libraries
+# 1. Buttons
+# 2. Radio Buttons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+A **radio button** is a component used to select only one option from a predefined set of options, therefore it is also called as ***option button***.
- 
-
+## 2. Benefits
-
+* Offers an element of flexibility.
+* Material Design provides a clean and intuitive interface.
+* Can be applied to complex and rare use cases.
+* Having a vast set of guidelines and documentation.
-
+## 3. Typical UseCases:
+MaterialRadio library can be implemented in most of the commonly used applications where users have to select only one option out of many. Below are some of the examples:
-
-
+
-
+## 4. List of Features:
-
-
-
-
+There are few features of Radio buttons listed below:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
- 
1. Introduction
-Material Design is a design standard for creating and designing websites and apps. Material design was introduced to bring order and unity to web design.
-Material design concept was inspired by paper and ink in the physical world. As paper exists in three dimensions having shadows and can be structured in different ways - same way material design works. It removed the flat UI's with three dimensional designs.
-A radio button is a component used to select only one option from a predefined set of options, therefore it is also called as option button.
-Radio buttons are used where users need to select only one option out of 2 or more options. These options contain circular white space. If any option is selected then circular white space is getting filled with a dot. -If any option is already selected and you will click on any other option then the first option will be deselected.
-In the image below One is selected, Two & Three are deselected.
-
2. Benefits
--
-
- Offers an element of flexibility. -
- Material Design provides a clean and intuitive interface. -
- Can be applied to complex and rare use cases. -
- Having a vast set of guidelines and documentation. -
3. Typical UseCases:
-MaterialRadio library can be implemented in most of the commonly used applications where users have to select only one option out of many. Below are some of the examples:
-
4. List of Features:
-There are few features of Radio buttons listed below:
-1. Enabled: Radio button can be selected. (Vastly used in application)
-RadioButton({
+***1. Enabled:*** Radio button can be selected. (Vastly used in application)
+```
+RadioButton({
model: this.radioModel1,
onCheckChange: this.onRadioCheck
})
-2. Disabled: Radio button can't be selected.
-aboutToAppear() {
+```
+
+***2. Disabled:*** Radio button can't be selected.
+```
+aboutToAppear() {
this.radioModel2.setDisabled(true);
}
RadioButton({
model: this.radioModel2,
onCheckChange: this.onRadioCheck
})
-3. Checked and Enabled: Radio button will be selected by default. While clicking the dot will show some ripple effect.
-RadioButton({
+```
+
+***3. Checked and Enabled:*** Radio button will be selected by default. While clicking the dot will show some ripple effect.
+```
+RadioButton({
model: this.radioModel3,
checked: true,
onCheckChange: this.onRadioCheck
})
-4. Checked and Disabled: Radio button will be selected and can't be deselected. This button appears a little bit off color.
-aboutToAppear() {
+```
+
+***4. Checked and Disabled:*** Radio button will be selected and can't be deselected. This button appears a little bit off color.
+```
+aboutToAppear() {
this.radioModel4.setDisabled(true);
}
RadioButton({
@@ -2839,136 +96,115 @@ RadioButton({
checked: true,
onCheckChange: this.onRadioCheck
})
-Please refer below Image:
-
5. Download & Install:
-Install using npm:
-npm i ohos-material-radio
-Details about OpenHarmony NPM environment configuration, click here.
--
6. Usage Instructions:
--
-
- Import files and code dependencies -
import { RadioButton, RadioGroup, RadioOption, RadioModel } from '@ohos/material-radio'
--
-
- Initialize model data -
private radioModel: RadioModel = new RadioModel(1, "Radio Label")
--
-
- Code for creating radio button -
RadioButton({
+```
+
+Please refer below Image:
+
+
+
+## 5. Download & Install:
+
+Install using npm:
+```
+npm i ohos-material-radio
+```
+
+Details about OpenHarmony NPM environment configuration, click [here](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md).
+
+
+
+## 6. Usage Instructions:
+
+1. Import files and code dependencies
+
+```ets
+import { RadioButton, RadioGroup, RadioOption, RadioModel } from '@ohos/material-radio'
+```
+
+2. Initialize model data
+
+```
+private radioModel: RadioModel = new RadioModel(1, "Radio Label")
+```
+
+3. Code for creating radio button
+
+```
+RadioButton({
checked: true,
model: this.radioModel,
- onCheckChange: (selectedRadioId) => {
+ onCheckChange: (selectedRadioId) => {
console.log("Selected Radio Button Id:: " + selectedRadioId);
}
})
-
-
-
- Code for creating radio group -
RadioGroup(
+```
+
+
+
+4. Code for creating radio group
+
+```
+RadioGroup(
{
selectedRadioId: 1,
options: [new RadioOption(1, "Option 1"), new RadioOption(2, "Option 2")],
- onCheckChange: (selectedRadioId) => {
+ onCheckChange: (selectedRadioId) => {
console.log("Selected Radio Button Id:: " + selectedRadioId);
}
}
)
-
7. Library Features:
-Feature-1:
-Description: User needs to provide radioId, radiolabel, selectedRadioId to create material radio button. Apart from those, users can also send checked and disabled properties also.
-Code Snippet:
-private radioModel: RadioModel = new RadioModel(1, “Radio Button”)
+
+
+## 7. Library Features:
+
+### Feature-1:
+
+***Description:*** User needs to provide radioId, radiolabel, selectedRadioId to create material radio button. Apart from those, users can also send checked and disabled properties also.
+
+***Code Snippet:***
+
+```
+private radioModel: RadioModel = new RadioModel(1, “Radio Button”)
radioModel.setRingColor(Color.Blue);
radioModel.setDisabled(false);
RadioButton({
model: this.radioModel,
checked: false,
- onCheckChange: (id: number) => {
+ onCheckChange: (id: number) => {
console.log(“Radio button selected:: ” + id);
})
-Explanation:
-In above code one radio button was created, where button color was set to blue and was enabled for selection. By default it was deselected. While clicking button one toast will appear giving message "Radio button selected::buttonid"
-Below are list of properties available:
-| Properties | -Description | -
|---|---|
setRingColor |
-Changing color of radio button circle | -
setDisabled |
-making radio button enabled or disabled | -
checked |
-showing radio button is selected or deselected by default | -
| - | - |
Screenshot:
-
+
-
Feature-2:
-Description: User needs to provide a radio options list to create a material radio group.
-Code Snippet:
-private radioOptions: RadioOption [] = [
+### Feature-2:
+
+***Description:*** User needs to provide a radio options list to create a material radio group.
+
+***Code Snippet:***
+
+```
+private radioOptions: RadioOption [] = [
new RadioOption(1, “Option 1”),
new RadioOption(2, “Option 2”),
new RadioOption(3, “Option 3”)
@@ -2976,161 +212,586 @@ RadioGroup({
RadioGroup({
options: this.radioOptions,
- onCheckChange: (id: number) => {
+ onCheckChange: (id: number) => {
console.log(“Selected radio button id:: ” + id);
})
-Explanation:
-In the above code one Radio Group was created with 3 sets of options. By default all buttons will be deselected. If you click any option one toast will appear giving the message "Radio button selected::buttonid". Again if you click any other option then previous selected option will be deselected and one toast will appear "Radio button selected::buttonid"
-Screenshot:
-
8. Conclusion:
-This library is useful for providing material designs effects in radio button/group components. We can also give other specifications like whether the radio button is checked, disabled and a callback function to listen for changes on the radio button check status.
-9. Code Contribution:
-If you find any problems during usage, you can submit an Issue to us. Of course, we also welcome you to send us PR.
-
+
+# 2. Sliders
+
+Sliders allow users to make selections from a range of values. We can adjust volume, brightness or use it for selection in e-commerce application. Lets see how to create Slider.
+
+
+
+
+#### Import
+```js
+import { MaterialSlider, SliderModel, SliderType } from '@ohos/materialslider'
+```
+
+#### Usage
+Access slider attributes through a object of SliderModel and customize the slider(if needed) using setter functions and finally pass the object to MaterialSlider.
+
+ Below are list of properties available.
+ | Properties | Description | Type |
+ | -------------| ------------| -----|
+ | SliderType | Defined the type of the Slider | SliderType Enum (Continue, Discrete) |
+ | SliderStyle | Defines the style of the Slider | SliderStyle Enum (InSet, OutSet) |
+ | min, max| Defines the minimum and maximun values of the Slider | number |
+ | step | Step of the slider | number |
+ | showSteps | Whether to display the current step | boolean (Default: false) |
+ | showTips | Displays the bubble to indicate the percentage while sliding | boolean (Default: false) |
+ | showMin, showMax | Displays the minimum and maximum values on the screen | boolean |
+ | showValue | Displays the value of the Slider on the screen | boolean |
+ | trackThickness | Defines the thickness of the track | number |
+ | reverse | Whether to display the slider values in reverse | boolean (Default: false) |
+ | direction | Defines the direction of the slider (Horizontally or Vertically) | Axis Enum (Horizontal, Vertical) |
+ | currentValue | Current progress of the slider | number |
+ | blockColor | Color of the Slider | ResourceColor |
+ | trackColor | Background color of the Slider | ResourceColor |
+ | selectedColor | Color of the Slider rail that has been slid | ResourceColor |
+ | | | |
+
+ Below are the events that are supported by Slider
+ | Properties | Description |
+ | -------------| ------------|
+ | onSliderChange(callback: (value: number, mode: SliderChangeMode) => void) | Callback is invoked when the slider slides 
+
+Developers can develop their custom switch containing text, icon, animation etc.
+
+## 2. Benefits
+
+* Provides better user experience while dealing with independently controlled items.
+
+## 3. Typical UseCases:
+
+MaterialSwitches can be implemented in most of the commonly used applications where users need to either enable or disable any functionality. Below are some of the examples:
+
+
s
+
+## 4. List of Features:
+
+There are few features of Radio buttons listed below:
+
+|Features|Description|
+|:-:|:-:|
+|On-State|Can be enabled or disabled|
+|Off-State/Enabled|By default functionality is enabled and can't be changed|
+|Off-State/Disabled|By default functionality is disabled and can't be changed|
+|Customized|Can contain some icons or some texts as developers choice|
+|||
+
+Please refer below Image:
+
+
+
+## 5. Download & Install:
+
+Install using npm:
+```
+npm i @ohos/material-switch
+```
+
+Details about OpenHarmony NPM environment configuration, click [here](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md).
+
+
+
+4. Code for creating custom switch with icon
+
+```
+ this.model.reset()
+ this.model.setSwitchId(1)
+ this.model.setWithIcon(true)
+ this.model.setIsOn(true)
+ this.model.setIcon($r('app.media.tick'))
+
+Switch({
+ model: this.model,
+ onSelect: (id, isOn) => {
+ prompt.showToast({
+ message: id.toString()
+ })
+})
+```
+
+
+
+## 7. Library Features:
+
+### Feature-1:
+
+***Description:*** A default toggle switch is provided by the library.
+
+***Code Snippet:***
+
+```
+updateModelForFirst() {
+ this.switchModel1.reset()
+ this.switchModel1.setSwitchId(1)
+}
+
+Switch({
+ model: this.switchModel1,
+ onSelect: (id, isOn) => {
+ prompt.showToast({
+ message: id.toString()
+ })
+ }
+})
+```
+***Explanation:***
+
+In above code one switch was created whose all attributes values were resetted to default one and then switch id assigned with value 1. While clicking the button one toast will appear showing the ***id*** of the switch.
+
+
+***Below are list of properties available:***
+
+|Properties|Description|
+|:-:|:-:|
+|`setSwitchId(number)`|Providing id to switches|
+|`reset()`|Will initialize the value of all attributes with default value|
+|||
+
+***Screenshot:***
+
+
+
+
+This library is for using toggle switches that can be customized based on colors, an icon passed by the user and also be set to disabled or On/Off state.
+
+# 4. Checkboxs
+# 5. TextFields
+# 6. Select Menus
+# 7. Lists
+# 8. Dialogs
+# 9. Progress Indicators
+# 10. Tabs
+# 11. Snackbar
+Snackbars provide brief messages about app processes at the bottom of the screen. Snackbar informs the user that the application has performed or will be performing certain task. They appear at the bottom of the screen for a brief time. They do not interfere in user experience and do not wait for user input to disappear. A Snackbar can contain a single action that is optional.
+
+
+
+The Library can be referred from [here](https://github.com/Applib-OpenHarmony/MaterialSnackbar)
+
+#### Import
+```js
+import { MaterialSnackBar, SnackBarModel, SnackBarType } from "@ohos/materialsnackbar"
+```
+
+#### Usage
+Access Snackbar attributes through a object of SnackBarModel and customize the Snackbar using setter functionS and finally pass the object to MaterialSnackBar and action associated with optional action button.
+
+ Below are list of properties available.
+ | Properties | Description | Type |
+ | -------------| ------------| -----|
+ | snackBarType | Defines the type of the Snackbar | SnackBarType Enum (SimpleSnack, OneLineActionSnack, TwoLineActionSnack, BigTwoLineActionSnack) |
+ | snacBarText | Text associated with the Snackbar | String |
+ | buttonText | Defines the text of the Snackbar button | String |
+ | show | Defines the visibility of the Snackbar | Visibility Enum (Visible, None) |
+ | timer | Defines the number of seconds the Snackbar will be visible | number |
+ | snackBackColor | Background Color of the Snackbar | ResourceColor |
+ | snackTextColor | Defines the color of the Snackbar text | ResourceColor |
+ | buttonTextColor | Defines the color of the button text | ResourceColor |
+ | opacity | Defines the opacity of the Snackbar | number (values range from 0-1) |
+ | | | |
+
+ #### List of Snackbars
+
+ #### Simple Snack
+ This is a Simple snackbar with just a message. There is no action associated with this type. The Picture describing the design parameters are shown below.
+
+ 
+
+###### Usage
+
+```js
+//Creating SnackBarModel object with the SnackBarType as SimpleSnack
+@State snackBarModel1: SnackBarModel = new SnackBarModel(SnackBarType.SimpleSnack)
+
+//Customization of the model object with appropriate values
+aboutToAppear(){
+ this.snackBarModel1.setSnackBarText("Text associated with SimpleSnack")
+ this.snackBarModel1.setSnackTextColor("#ffffff")
+ this.snackBarModel1.setSnackBackColor("#9400D3")
+ this.snackBarModel1.setOpacity(1)
+ this.snackBarModel1.setTimer(4000)
+}
+
+//Passing SnackBarModel object to MaterialSnackBar component
+MaterialSnackBar({
+ obj : this.snackBarModel1
+})
+```
+
+
+
+#### One Line Action Snackbar
+This is a Snackbar with a one line message and a action associated with it. The Picture describing the design parameters are shown below.
+
+
+
+##### Usage
+
+```js
+//Creating SnackBarModel object with the SnackBarType as OneLineActionSnack
+@State snackBarModel2: SnackBarModel = new SnackBarModel(SnackBarType.OneLineActionSnack)
+
+//Defining the Action for the Snackbar Button
+ SnackButtonAction: () => void = function () {
+ console.log("test")
+ }
+
+//Customization of the model object with appropriate values
+aboutToAppear(){
+ this.snackBarModel2.setSnackBarText("Text of OneLineActionSnack")
+ this.snackBarModel2.setSnackTextColor("#ffffff")
+ this.snackBarModel2.setSnackBackColor("#9400D3")
+ this.snackBarModel2.setOpacity(1)
+ this.snackBarModel2.setTimer(4000)
+ this.snackBarModel2.setButtonText("ACTION")
+ this.snackBarModel2.setButtonTextColor("#ECD540")
+}
+//Passing SnackBarModel object to MaterialSnackBar component
+MaterialSnackBar({
+ obj : this.snackBarModel2,
+ func : this.SnackButtonAction
+})
+```
+
+
+
+#### Two Line Action Snackbar
+This is a Snackbar with two line message and an action associated with it. The Picture describing the design parameters are shown below.
+
+
+
+###### Usage
+
+```js
+//Creating SnackBarModel object with the SnackBarType as TwoLineActionSnack
+@State snackBarModel3: SnackBarModel = new SnackBarModel(SnackBarType.TwoLineActionSnack)
+
+//Defining the Action for the Snackbar Button
+ SnackButtonAction: () => void = function () {
+ console.log("test")
+ }
+
+//Customization of the model object with appropriate values
+aboutToAppear(){
+ this.snackBarModel3.setSnackBarText("Longer text associated with TwoLineActionSnack")
+ this.snackBarModel3.setSnackTextColor("#ffffff")
+ this.snackBarModel3.setSnackBackColor("#9400D3")
+ this.snackBarModel3.setOpacity(1)
+ this.snackBarModel3.setTimer(4000)
+ this.snackBarModel3.setButtonText("ACTION")
+ this.snackBarModel3.setButtonTextColor("#ECD540")
+}
+
+//Passing SnackBarModel object to MaterialSnackBar component
+MaterialSnackBar({
+ obj : this.snackBarModel3,
+ func : this.SnackButtonAction
+})
+```
+
+
+#### Big Line Action Snackbar
+This is a Snackbar with two line text and a longer action text. The Picture describing the design parameters are shown below.
+
+
+
+###### Usage
+
+```js
+//Creating SnackBarModel object with the SnackBarType as BigTwoLineActionSnack
+@State snackBarModel4: SnackBarModel = new SnackBarModel(SnackBarType.BigTwoLineActionSnack)
+
+//Defining the Action for the Snackbar Button
+ SnackButtonAction: () => void = function () {
+ console.log("test")
+ }
+
+//Customization of the model object with appropriate values
+aboutToAppear(){
+ this.snackBarModel4.setSnackBarText("Longer text associated with BigTwoLineActionSnack")
+ this.snackBarModel4.setSnackTextColor("#ffffff")
+ this.snackBarModel4.setSnackBackColor("#9400D3")
+ this.snackBarModel4.setOpacity(1)
+ this.snackBarModel4.setTimer(4000)
+ this.snackBarModel4.setButtonText("LONGER ACTION")
+ this.snackBarModel4.setButtonTextColor("#ECD540")
+}
+///Passing SnackBarModel object to MaterialSnackBar component
+MaterialSnackBar({
+ obj : this.snackBarModel4,
+ func : this.SnackButtonAction
+ })
+```
+
+
+
+
+# 13. Cards
+# 14. Fab
+# 15. Chips
+# 16. Date Picker
+# 17. Time Picker
+# 18. Bottom Bar
+# 19. Banners
+# 20. Navigation Drawer
+# 21. Navigation Bar
+# 22. backdrop
+# 23. ImageList
+# 24. Bottom Sheets
+# 25. Select
+# 26. Business Hour Picker
+# 27. CalendarView
+# 28. Top Bar
+# 29. Side Sheet
+
+# Conclusion
+
+# Open source License
+
+This project is based on