Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create shortcode for markdown tabs #872

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions website_and_docs/assets/scss/_tabpane-md.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.tabpane-md {
border-style: outset;
border-width: thin;
}

.tabpane-md .tab-pane {
padding: 10px;
}
3 changes: 2 additions & 1 deletion website_and_docs/assets/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
@import "images";
@import "links";
@import "logo";
@import "screen";
@import "screen";
@import "tabpane-md";
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ aliases: [
]
---

First you need to install the Selenium bindings for your automation project.
The installation process for libraries depends on the language you choose to use.
The installation process for libraries depends on the language you choose to use:

### Java
{{< tabpane-md paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
{{< tab-md ID="1" >}}
Installation of Selenium libraries for Java is accomplished using a build tool.
You can find the latest version on [Selenium Downloads](/downloads/) and see all available versions on
[Maven Repository](https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java)
Expand All @@ -28,14 +28,14 @@ For Maven, add the _selenium-java_ dependency in your project `pom.xml` file:
</dependency>
```

For Gradle, add the _selenium-java_ dependency in your project `build.gradle` file:
For Gradle, add the _selenium-java_ dependency in your project `build.gradle` file:

```text
dependencies {
compile group: 'org.seleniumhq.selenium', name: 'selenium-java', version: '4.0.0'
```

### Python
{{< /tab-md >}}
{{< tab-md ID="2" >}}
Installation of Selenium libraries for Python can be done using pip:

```shell
Expand All @@ -49,7 +49,8 @@ Alternatively you can download the [PyPI source archive](https://pypi.org/projec
python setup.py install
```

### C#
{{< /tab-md >}}
{{< tab-md ID="3" >}}
Installation of Selenium libraries for C# can be done using NuGet:

```shell
Expand All @@ -58,8 +59,8 @@ Install-Package Selenium.WebDriver
# or using .Net CLI
dotnet add package Selenium.WebDriver
```

### Ruby
{{< /tab-md >}}
{{< tab-md ID="4" >}}
Installation of Selenium libraries for Ruby can be done using gem:

```shell
Expand All @@ -72,13 +73,17 @@ Or add it to your `Gemfile`:
gem 'selenium-webdriver', '~> 4.0'
```

### JavaScript
{{< /tab-md >}}
{{< tab-md ID="5" >}}
Installation of Selenium libraries for JavaScript can be done using npm:

```shell
npm install selenium-webdriver
```

### Kotlin
Due to missing native language bindings for Kotlin, you have to use the
{{< /tab-md >}}
{{< tab-md ID="6" >}}
Due to missing native language bindings for Kotlin, you have to use the
Java Bindings, e.g. with maven [Java](#java)
{{< /tab-md >}}
{{< /tabpane-md >}}
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ aliases: [
最初にあなたの自動化プロジェクトにSeleniumのバインディングをインストールする必要があります。
インストールの方法は選択した言語によって異なります。

### Java
{{< tabpane-md paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
{{< tab-md ID="1" >}}
JavaへのSeleniumライブラリのインストールはMavenを使います。
プロジェクトのpom.xmlに _selenium-java_ の依存関係を追加してください。

Expand Down Expand Up @@ -48,7 +49,8 @@ _selenium-java_ 依存関係は、Seleniumがサポートする全てのブラ
</dependency>
```

### Python
{{< /tab-md >}}
{{< tab-md ID="2" >}}
PythonへのSeleniumライブラリのインストールはpipを使います。

```shell
Expand All @@ -62,7 +64,8 @@ pip install selenium
python setup.py install
```

### C#
{{< /tab-md >}}
{{< tab-md ID="3" >}}
C#へのSeleniumライブラリのインストールはNuGetを使います。

```shell
Expand All @@ -72,21 +75,25 @@ Install-Package Selenium.WebDriver
dotnet add package Selenium.WebDriver
```

### Ruby
{{< /tab-md >}}
{{< tab-md ID="4" >}}
RubyへのSeleniumライブラリのインストールはgemを使います。

```shell
gem install selenium-webdriver
```

## _JavaScript_
{{< /tab-md >}}
{{< tab-md ID="5" >}}
JavaScriptへのSeleniumライブラリのインストールはnpmを使います。

```shell
npm install selenium-webdriver
```

### Kotlin
Due to missing native language bindings for Kotlin, you have to use the
{{< /tab-md >}}
{{< tab-md ID="6" >}}
Due to missing native language bindings for Kotlin, you have to use the
Java Bindings, e.g. with maven [Java](#java)

{{< /tabpane-md >}}
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ aliases: [
Primeiro você precisa instalar as ligações Selenium para seu projeto de automação.
O processo de instalação de bibliotecas depende da linguagem que você escolher usar.

### Java
{{< tabpane-md paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
{{< tab-md ID="1" >}}
A instalação de bibliotecas Selenium para Java pode ser feita usando Maven.
Adicione a dependência selenium-java em seu pom.xml:

Expand All @@ -26,7 +27,7 @@ Adicione a dependência selenium-java em seu pom.xml:
</dependency>
```

A dependência _selenium-java_ suporta a execução de sua automação com todos os navegadores
A dependência _selenium-java_ suporta a execução de sua automação com todos os navegadores
com suporte Selenium. Se você quiser fazer testes
apenas em um navegador específico, você pode adicionar a dependência para esse navegador
em seu arquivo _pom.xml_.
Expand All @@ -40,7 +41,7 @@ arquivo para executar seus testes apenas no Firefox:
<version>4.X</version>
</dependency>
```

De maneira semelhante, se você deseja executar testes apenas no Chrome,
você deve adicionar a seguinte dependência:

Expand All @@ -51,8 +52,8 @@ você deve adicionar a seguinte dependência:
<version>4.X</version>
</dependency>
```

### Python
{{< /tab-md >}}
{{< tab-md ID="2" >}}
A instalação de bibliotecas Selenium para Python pode ser feita usando pip:

```shell
Expand All @@ -66,7 +67,8 @@ Como alternativa, você pode baixar o [arquivo de origem do PyPI](https://pypi.o
python setup.py install
```

### C#
{{< /tab-md >}}
{{< tab-md ID="3" >}}
A instalação de bibliotecas Selenium para C# pode ser feita usando NuGet:

```shell
Expand All @@ -76,20 +78,22 @@ Install-Package Selenium.WebDriver
dotnet add package Selenium.WebDriver
```

### Ruby
{{< /tab-md >}}
{{< tab-md ID="4" >}}
A instalação de bibliotecas Selenium para Ruby pode ser feita usando gem:

```shell
gem install selenium-webdriver
```

### JavaScript
{{< /tab-md >}}
{{< tab-md ID="5" >}}
A instalação de bibliotecas Selenium para JavaScript pode ser feita usando npm:

```shell
npm install selenium-webdriver
```

### Kotlin
{{< /tab-md >}}
{{< tab-md ID="6" >}}
Devido à ausência de vínculos de linguagem nativo para Kotlin, você deve usar vínculos Java, por exemplo, com Maven [Java](#java)

{{< /tabpane-md >}}
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ aliases: [
首先,您需要为自动化项目安装 Selenium 绑定库。
库的安装过程取决于您选择使用的语言。

### Java

{{< tabpane-md paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
{{< tab-md ID="1" >}}
可以使用 Maven 安装 Java 的 Selenium 库。
在项目 pom.xml 中添加 _selenium-java_ 依赖项:

Expand Down Expand Up @@ -49,8 +49,8 @@ _selenium-java_ 依赖项支持在所有 Selenium 支持的浏览器中运行自
</dependency>
```

### Python

{{< /tab-md >}}
{{< tab-md ID="2" >}}
可以使用 pip 安装 Python 的 Selenium 库:

```shell
Expand All @@ -64,8 +64,8 @@ pip install selenium
python setup.py install
```

### C#

{{< /tab-md >}}
{{< tab-md ID="3" >}}
可以使用 NuGet 安装 C# 的 Selenium 库:

```shell
Expand All @@ -75,21 +75,24 @@ Install-Package Selenium.WebDriver
dotnet add package Selenium.WebDriver
```

### Ruby

{{< /tab-md >}}
{{< tab-md ID="4" >}}
可以使用 gem 安装 Ruby 的 Selenium 库:

```shell
gem install selenium-webdriver
```

### JavaScript

{{< /tab-md >}}
{{< tab-md ID="5" >}}
可以使用 npm 安装 JavaScript 的 Selenium 库

```shell
npm install selenium-webdriver
```

### Kotlin
{{< /tab-md >}}
{{< tab-md ID="6" >}}
由于缺少Kotlin的原生语言的绑定, 您不得不借助Java的生态环境, 例如Maven [Java](#java)

{{< /tabpane-md >}}
14 changes: 14 additions & 0 deletions website_and_docs/layouts/shortcodes/tab-md.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!--https://github.com/google/docsy/commit/51a208b49d876ae0995d4b18e6779374b35ff2fa-->

{{ $tabID := .Get "ID" }}
{{ $paneID := print (.Parent.Get "paneID") $tabID }}
{{ $tab := (print "tab" $tabID) }}
{{ if eq $tabID "1" }}
<div class="tab-pane fade show active" id="tab{{ $paneID }}" role="tabpanel" aria-labelledby="nav-{{ $tab }}">
{{ $.Inner | markdownify }}
</div>
{{ else }}
<div class="tab-pane fade" id="tab{{ $paneID }}" role="tabpanel" aria-labelledby="nav-{{ $tab }}">
{{ $.Inner | markdownify }}
</div>
{{ end }}
22 changes: 22 additions & 0 deletions website_and_docs/layouts/shortcodes/tabpane-md.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!--https://github.com/google/docsy/commit/51a208b49d876ae0995d4b18e6779374b35ff2fa-->

<div class="tabpane-md">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
{{ range $i, $sequence := (seq (.Get "tabCount")) }}
{{ $paneID := $.Get "paneID" }}
{{ $headerTab := (print "headerTab" $sequence) }}
{{ $tabHREF := (print "tab" $paneID $sequence) }}
{{ if eq $sequence 1 }}
<a class="nav-item nav-link active" id="nav-{{ $paneID }}" data-toggle="tab" href="#{{ $tabHREF | urlize }}" role="tab"
aria-controls="nav-home" aria-selected="true">{{ $.Get $headerTab }}</a>
{{ else }}
<a class="nav-item nav-link" id="nav-{{ $paneID }}" data-toggle="tab" href="#{{ $tabHREF | urlize }}" role="tab"
aria-controls="nav-home" aria-selected="false">{{ $.Get $headerTab }}</a>
{{ end }}
{{ end }}
</div>
</nav>
<div class="tab-content {{ .Get "content" }}" id="{{ $.Get "paneID" }}">
{{ .Inner }}
</div>
</div>