-
Notifications
You must be signed in to change notification settings - Fork 5
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
1 parent
4278089
commit 29130e4
Showing
18 changed files
with
415 additions
and
419 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1 @@ | ||
| # Component guides | ||
|
|
||
| # Guias de componentes |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,50 @@ | ||
| # Option lists | ||
| # Listas de opções | ||
|
|
||
| A drop menu ensures easy and error-free user input by offering a list of possible options. PocketBlocks supports implementing option lists using components such as **Select** and **Multiselect**. You can configure an option list either manually or by mapping data from your data sources. | ||
| Um menu suspenso garante uma entrada fácil e sem erros do usuário, oferecendo uma lista de opções possíveis. PocketBlocks suporta a implementação de listas de opções usando componentes como **Seletor** e **Seletor Mútiplo**. Você pode configurar uma lista de opções manualmente ou mapeando dados de suas fontes de dados. | ||
|
|
||
| <figure><img src="../../.gitbook/assets/build-apps/component-guides/option-lists/01.png" alt=""><figcaption></figcaption></figure> | ||
|
|
||
| ## Properties | ||
| ## Propriedades | ||
|
|
||
| Each option list has four properties. | ||
| Cada lista de opções possui quatro propriedades. | ||
|
|
||
| - **Label**: the displayed text of the option to users | ||
| - **Value**: the unique identifier of the option | ||
| - **Disabled**: disable the option (the default value is `false`) | ||
| - **Hidden**: hide the option (the default value is `false`) | ||
| - **Rótulo**: o texto da opção exibido aos usuários | ||
| - **Valor**: o identificador exclusivo da opção | ||
| - **Desativado**: desativa a opção (o valor padrão é `false`) | ||
| - **Oculto**: oculta a opção (o valor padrão é `false`) | ||
|
|
||
| <figure><img src="../../.gitbook/assets/build-apps/component-guides/option-lists/02.png" alt=""><figcaption></figcaption></figure> | ||
|
|
||
| {% hint style="warning" %} | ||
| When more than one option in one list uses the same value, only the first option is valid and thus displayed. | ||
| Quando mais de uma opção em uma lista utiliza o mesmo valor, apenas a primeira opção é válida e, portanto, exibida. | ||
| {% endhint %} | ||
|
|
||
| ## Manual mode | ||
| ## Modo manual | ||
|
|
||
| Under **Basic** > **Manual**, click **+ Add** to create a new option. Select an option to manually configure it. You can click `···` to **Duplicate** or **Delete** an option and drag `⋮⋮` to arrange its position. | ||
| Em **Básico** > **Manual**, clique em **+ Adicionar** para criar uma nova opção. Selecione uma opção para configurá-lo manualmente. Você pode clicar em `···` para **Duplicar** ou **Excluir** uma opção e arrastar `⋮⋮` para organizar sua posição. | ||
|
|
||
| <figure><img src="../../.gitbook/assets/build-apps/component-guides/option-lists/03.png" alt=""><figcaption></figcaption></figure> | ||
|
|
||
| Check the value of the selected option under **Components** in the data browser. For example, when **New York** is selected, you can find the string value `"1"` for **locationSelect**. | ||
| Verifique o valor da opção selecionada em **Componentes** no navegador de dados. Por exemplo, quando **Nova York** é selecionado, você pode encontrar o valor da string `"1"` para **localizacaoSelecionada**. | ||
|
|
||
| <figure><img src="../../.gitbook/assets/build-apps/component-guides/option-lists/04.png" alt=""><figcaption></figcaption></figure> | ||
|
|
||
| Manual mode is recommended for these scenarios: | ||
| O modo manual é recomendado para estes cenários: | ||
|
|
||
| - Manually manageable and enumerable. | ||
| - Used by only one component. | ||
| - Data doesn't come from data sources. | ||
| - Gerenciável e enumerável manualmente. | ||
| - Usado por apenas um componente. | ||
| - Os dados não vêm de fontes de dados. | ||
|
|
||
| ## Mapped mode | ||
| ## Modo mapeado | ||
|
|
||
| When you have option list data that comes from data sources, transformers or temporary state, you can use **Mapped Mode**. Under **Basic** > **Mapped**, input your data source array in **Data** box using JavaScript (JS) code. A list of options will be automatically mapped from this array. For example, access university information via `{{university.data}}`. Each item in the result array contains `country`, `web_pages`, `alpha_two_code`, and `name`. | ||
| Quando você tiver dados da lista de opções provenientes de fontes de dados, transformadores ou estado temporário, poderá usar o **Modo Mapeado**. Em **Básico** > **Mapeado**, insira sua matriz de fonte de dados na caixa **Dados** usando código JavaScript (JS). Uma lista de opções será mapeada automaticamente a partir deste array. Por exemplo, acesse informações da universidade via `{{universidade.dado}}`. Cada item na matriz de resultados contém `pais`, `paginas_web`, `codigo` e `nome`. | ||
|
|
||
| <figure><img src="../../.gitbook/assets/build-apps/component-guides/option-lists/05.png" alt=""><figcaption></figcaption></figure> | ||
|
|
||
| You can reference the value of any filed of an option through `item` and its index `i`, starting from 0. In the following example, the **Label** of each option is the `name` of the university, the **Value** is the `web_page`, and those containing an opening parenthesis `(` in their names are disabled. The default value is set to the `web_pages` of the first item using `{{university.data[0].web_pages}}`. Note that the default value of an option list should be an element from the **Value** array but not the **Label** array. | ||
| Você pode referenciar o valor de qualquer campo de uma opção através de `item` e seu índice `i`, começando em 0. No exemplo a seguir, o **Rótulo** de cada opção é o `nome` da universidade, o **Valor** é `web_page`, e aqueles que contêm um parêntese de abertura `(` em seus nomes estão desativados. O valor padrão é definido como `paginas_web` do primeiro item usando `{{universidade.dado[0] .paginas_web}}`. Observe que o valor padrão de uma lista de opções deve ser um elemento do array **Valor**, mas não do array **Rótulo**. | ||
|
|
||
| <figure><img src="../../.gitbook/assets/build-apps/component-guides/option-lists/06.png" alt=""><figcaption></figcaption></figure> | ||
|
|
||
| Check the value of the selected option under **Components** in the data browser. For example, when "Ahi Evran University" is selected, its string value `[\"http://www.ahievran.edu.tr/\"]` is displayed. | ||
| Verifique o valor da opção selecionada em **Componentes** no navegador de dados. Por exemplo, quando "Ahi Evran University" é selecionado, seu valor de string `[\"http://www.ahievran.edu.tr/\"]` é exibido. | ||
|
|
||
| <figure><img src="../../.gitbook/assets/build-apps/component-guides/option-lists/07.png" alt=""><figcaption></figcaption></figure> |
Oops, something went wrong.