New Documentation

docs
documentation

(Diego Barreiro Pérez) #1

Hello Makeroid’ers :wave:

We would like to introduce to you our new documentation :open_book:!
Our old documentation was powered by GitBook, but it was not too easy to work with and contribute to, plus it was a bit restrictive with theming.
But now, our new documentation is hosted on GitHub Pages, and it’s powered by MKDocs with Material Design :muscle:

Documentation URL is the same as the old one: docs.makeroid.io
What has been changed is the GitHub Repository. (do to Star the Repo :star:):

As you can see, it’s much simpler to add new components and pages (just check the example and use it as a template), because it’s pure Markdown.

The old repository is still available here, but it’s read-only. We have kept it because the docs have not been fully migrated yet (only a few components are ready so far).
So, you could help us in moving them and earn the Makeroid Contributor badge :blush:

Regards,
:makeroid: Makeroid Staff


The explanation of what the components do on docs.makeroid.io is empty
(Ben) #2

On any page besides the home, CSS files seems to be conflicted.


(Diego Barreiro Pérez) #3

That’s only the 404 page, it’s already reported to MKDocs:

There’s already an active PR with a fix for it


(Ben) #4

That’s not 404. Any page I select for example Google or Experimental looks like that (without css).


(Diego Barreiro Pérez) #5

Scroll down a little bit…
The page is not yet created, it’s 404 page


(Ben) #6

I knew it, shush :smile:


(Arda Çebi) #7

Done, they merged the PR.


(Diego Barreiro Pérez) #8

If someone could help :roll_eyes:

image

15 pages of 208 completed


(KrishuTech) #9

Components Section are not open with click on components


(Diego Barreiro Pérez) #10

Can you explain more and give an example?


(Franck G) #11

I’m willing to help, but I just don’t know how to do it at all. I never understood how GIT stuff worked. I only already used GIT with GitKraken


(Shreyash Saitwal) #12

I’m also having the same problem. Github is too much difficult to use. :persevere:


(Diego Barreiro Pérez) #13
  1. Fork the Repo

  2. Edit any file at docs/components/category/component.md in the forked repo (which is not index.md)

  3. Paste this code in that file:

# Linear Progressbar

## Overview
A Progressbar is used to visually indicate the user the progress of some task, such as a download, data transfer etc.

A **determinate progress bar** is used to indicate the progress of an task whose exact value of  progress is known for eg. the percentage of a file download, number of files transferred.

A **indeterminate progress bar** is used in situations where the extent of the task is unknown  or the progress of the task cannot be determined in a way that could be expressed as a percentage, for example, when a request to a server is being processed where we don't know the exact value of progress, but there is a need to indicate to the user that the task is in progress.

<br><br>
![Linear Progressbar](/assets/images/components/user-interface/linear-progressbar/preview.gif){: class="preview-img" }


A determinate progressbar fills from 0% to 100%.  
An indeterminate progress bar moves in a fixed path, growing and shrinking in size.
{: .img-caption }

!!! tip
    Use progressbars in a non-interupptive manner.


## Properties

### Indeterminate

![](/assets/images/components/user-interface/linear-progressbar/d_indeterminate.png) ![](/assets/images/components/user-interface/linear-progressbar/p_indeterminate.png)

_**\(** Getter + Setter **\)**  
`Type: Boolean`_

Determines whether the progress bar is to be displayed in the **indeterminate** mode.
(See [_Overview_](#overview) for the difference between **determinate** and **indeterminate** modes.)

Options              | []()
-------------------- | ------------
`true `              | The progressbar is in **indeterminate** mode.
`false `             | The progressbar is in **determinate** mode.



### Indeterminate Color

![](/assets/images/components/user-interface/linear-progressbar/d_indeterminate-color.png) ![](/assets/images/components/user-interface/linear-progressbar/p_indeterminate-color.png)

_**\(** Getter + Setter **\)**  
`Type: Color`_

The color in which the indeterminate progress bar is displayed, if the [_Indeterminate_](#indeterminate) property is set to _true_. Has no effect on the apperance of the **determinate** progress bar.


### Maximum

![](/assets/images/components/user-interface/linear-progressbar/d_maximum.png) ![](/assets/images/components/user-interface/linear-progressbar/p_maximum.png)

_**\(** Getter + Setter **\)**  
`Type: Number`_

The upper range of the progress bar in **determinate** mode (i.e when the **Indeterminate** property is set to _false_.)  

The default value is _100_


### Minimum

![](/assets/images/components/user-interface/linear-progressbar/d_minimum.png) ![](/assets/images/components/user-interface/linear-progressbar/p_minimum.png)

_**\(** Getter + Setter **\)**  
`Type: Number`_

The lower range of the progress bar in **determinate** mode (i.e when the **Indeterminate** property is set to _false_.)  

The default value is _0_  

!!! caution "Note"
    This property can be set only on devices using Android Oreo or newer versions.
    Setting this method has no effect on devices using older versions of Android.


### Progress

![](/assets/images/components/user-interface/linear-progressbar/p_progress.png)

_**\(** Getter + Setter | Blocks**\)**  
`Type: Number`_

The current progress value of the progress bar in **determinate** mode (i.e when the  [_Indeterminate_](#indeterminate) property is set to _false_). When using _Getter_, returns 0 if **Indeterminate** is set to _true_

{!includes/visible-property.md!}

{!includes/width-property.md!}


## Methods


### Increment Progress By

![](/assets/images/components/user-interface/linear-progressbar/m_increment-progress-by.png)

_**\(** Number value **\)**_

Increases the value progress by the given value.


Params               |  []()       
-------------------- | ------- 
`value`              | **Number:**  The amount by which progress should be increased.


## Events

### Progress Changed

![](/assets/images/components/user-interface/linear-progressbar/e_progress-changed.png)

_**\(** Number progress **\)**_

Indicates that the value of the progress bar has changed.

Params               | []()
-------------------- | ---------- 
`progress`           | **Number:**  The current value of the progressbar.This is 0 if the progressbar is in **indeterminate** mode.
  1. Edit it so it fits the component file you want to finish (for example. change component description and replace all “Linear Progressbar” to “Feature Collection”)

  2. Change all properties, methods and events to the required ones for the component (see “Indeterminate” for a boolean property example

  3. Uploads all images to docs/assets/images/category/component/image.png, replacing image.png with x_name.png, where x is e for event, m for method, p for property or d for designer, and name is the name of property/event/method in lowercase and spaces replaced with -

  4. Save the file

  5. Open a new Pull Request


(Diego Barreiro Pérez) #14

I agree here, but because GitHub Web doesn’t offer all posibilities Git has :sweat_smile:

Everything is better with Visual Studio Code and GitKraken:


(KrishuTech) #15

actually i have opened components section and Component i have open button.md but it was epmpty


(Diego Barreiro Pérez) #16

The Button documentation is half done, you shouldn’t have seen a blank page


(Nathan) #17

A typical button.


(Franck G) #18

Thanks i will try tomorrow


(Kanishka Chakraborty) #19

I use Termux on Android for pulling and pushing repos. Yeah, it’s painful, and why I don’t use Git much… :joy:


(Diego Barreiro Pérez) #20

Use FastHub, it’s easier

https://play.google.com/store/apps/details?id=com.fastaccess.github