Skip to content

Commit

Permalink
Update template and videos sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@dobromirts
dobromirts committed Apr 15, 2024
1 parent 5252f1d commit 2b22457
Show file tree
Hide file tree
Showing 8 changed files with 9 additions and 64 deletions.
9 changes: 1 addition & 8 deletions en/app-themes/app-themes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,7 @@ An app theme is a collection of color palettes and attributes that create a sens

# App Builder themes

<section class="video-container">
<div>
<div class="video-container__item">
<iframe src="https://www.youtube.com/embed/gcTyeFp_65c?si=w-3ycuuDZ4whrEZc&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p>Customize App Themes</p>
</div>
</section>
> [!Video https://www.youtube.com/embed/gcTyeFp_65c?si=w-3ycuuDZ4whrEZc&list=UULF8cj8_eJROxAXsOjhbvduLw]
The [App Builder]({environment:appbuilderBaseUrl}) adopts a design systems approach to UI creation and you can download app themes and apply them at the app-level. With a single selection of a theme, the theme is globally applied to the whole application immediately. Having global theme avoids the need to create local styles that are difficult to maintain.

Expand Down
9 changes: 1 addition & 8 deletions en/flex-layouts/flex-layouts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,7 @@ In order to use the Flex layout in the App Builder, you need to define a contain

You can now choose from different Flex layout properties to define alignment, default behavior for how flex items are laid, set other values, and more.

<section class="video-container">
<div>
<div class="video-container__item">
<iframe width="800" height="450" src="https://www.youtube.com/embed/BRkaSYr7qHU?si=74eY9-rqm90A8kmh&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p> Create App Layouts</p>
</div>
</section>
> [!Video https://www.youtube.com/embed/BRkaSYr7qHU?si=74eY9-rqm90A8kmh&list=UULF8cj8_eJROxAXsOjhbvduLw]
One of the greatest differences between the App Builder and the regular product design tools are the flex-based layouts used in the design-to-code tool. Since the App Builder is targeting web apps, we are offering Flex as one of the approaches to create layouts. It's available to you as a row or column layout component in the toolbox. The outermost container you see here is the canvas and has flex settings already applied to it. You can change the canvas size by editing the viewport size in the properties panel.

Expand Down
9 changes: 1 addition & 8 deletions en/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,7 @@ _keywords: App builder, Indigo Design, Infragistics
* <a href="#getting-the-code">Getting the code</a>
* <a href="#running-the-generated-app-locally">Running the app locally</a>

<section class="video-container">
<div>
<div class="video-container__item">
<iframe src="https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p>Get Started with App Builder</p>
</div>
</section>
> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]

## Launch App Builder
Expand Down
9 changes: 1 addition & 8 deletions en/single-page-apps-and-navigation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,7 @@ _keywords: App builder, Indigo Design, Infragistics

# Single page apps and navigation

<section class="video-container">
<div>
<div class="video-container__item">
<iframe src="https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p>Set Up Single-Page Apps and Navigation</p>
</div>
</section>
> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw]
Another App Builder feature is the single-page apps and navigation. Unlike a page-based design approach, App Builder lets you create separate views that are injected or switched based on how users navigate. To see this action, you can create a new app using the create new application button, then select one of the default layouts that shows a top navigation defined.

Expand Down
9 changes: 1 addition & 8 deletions jp/app-themes/app-themes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,7 @@ _language: ja

# App Builder テーマ

<section class="video-container">
<div>
<div class="video-container__item">
<iframe src="https://www.youtube.com/embed/gcTyeFp_65c?si=w-3ycuuDZ4whrEZc&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p>テーマをカスタマイズする</p>
</div>
</section>
> [!Video https://www.youtube.com/embed/gcTyeFp_65c?si=w-3ycuuDZ4whrEZc&list=UULF8cj8_eJROxAXsOjhbvduLw]
[App Builder]({environment:appbuilderBaseUrl}) は、UI 作成にデザイン システム アプローチを採用しており、アプリ レベルでテーマを適用できます。テーマを 1 回選択するだけで、そのテーマはアプリケーション全体に即座にグローバルに適用されます。これにより、メンテナンスが難しいローカル スタイルを作成する必要がなくなります。

Expand Down
9 changes: 1 addition & 8 deletions jp/flex-layouts/flex-layouts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,7 @@ App Builderで Flex レイアウトを使用するには、コンテナー (ビ

さまざまな Flex レイアウト プロパティから選択して配置を定義したり、flex 項目のデフォルトの動作、その他の値を設定したりできます。

<section class="video-container">
<div>
<div class="video-container__item">
<iframe width="800" height="450" src="https://www.youtube.com/embed/BRkaSYr7qHU?si=74eY9-rqm90A8kmh&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p> アプリのレイアウトを作成する</p>
</div>
</section>
> [!Video https://www.youtube.com/embed/BRkaSYr7qHU?si=74eY9-rqm90A8kmh&list=UULF8cj8_eJROxAXsOjhbvduLw]
App Builder と通常の製品デザイン ツールの最大の違いの 1 つは、デザインからコードまでのツールで使用される Flex に基づくレイアウトです。App Builder は Web アプリを対象としているため、レイアウトを作成するアプローチの 1 つとして Flex を提供しています。ツールボックスの行または列のレイアウト ンポーネントとして利用できます。ここに表示されている最も外側のコンテナはキャンバスであり、flex 設定がすでに適用されています。プロパティ パネルで Viewport のサイズを編集することにより、キャンバス サイズを変更できます。

Expand Down
9 changes: 1 addition & 8 deletions jp/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,7 @@ _language: ja
* <a href="#コードの取得">コードの取得</a>
* <a href="#作成したアプリをローカルで実行する">アプリをローカルで実行する</a>

<section class="video-container">
<div>
<div class="video-container__item">
<iframe src="https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p>App Builder を使ってみましょう</p>
</div>
</section>
> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]

## App Builder を起動する
Expand Down
10 changes: 2 additions & 8 deletions jp/single-page-apps-and-navigation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,8 @@ _language: ja
---

# 単一ページアプリとナビゲーション
<section class="video-container">
<div>
<div class="video-container__item">
<iframe src="https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
</div>
<p>単一ページ アプリとナビゲーションを設定する</p>
</div>
</section>

> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw]
App Builder のもう 1 つの機能は、単一ページのアプリとナビゲーションです。ページに基づいたデザイン アプローチとは異なり、App Builder では、ユーザーのナビゲート方法に基づいて挿入または切り替えられる個別のビューを作成できます。このアクションを確認するには、[+ 新しいアプリ] ボタンを使用して新しいアプリを作成し、定義された上部ナビゲーションを表示するデフォルトのレイアウトの 1 つを選択します。

Expand Down

0 comments on commit 2b22457

Please sign in to comment.