Skip to content

Commit 893881a

Browse files
lacolacolacolaco
authored
fix: update origin to 2ecdb221d3bd80ddfd1817385d9ecc23c9002b5a (#1094)
* fix: migrate untranslated files * fix: migrate markdown translation changes * fix: update origin to 2ecdb221d3bd80ddfd1817385d9ecc23c9002b5a
1 parent 377a3fb commit 893881a

File tree

8 files changed

+124
-104
lines changed

8 files changed

+124
-104
lines changed

‎adev-ja/src/content/events/v21.md‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
1-
![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/angular-v21-hero.jpg 'Angular v21 Hero Image')
1+
![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/v21-event/angular-v21-hero.jpg 'Angular v21 Hero Image')
22

33
# Angular v21: The Adventure Begins
44

5+
## Release Blog
6+
57
**Angular v21 is live**: check out the [v21 release blog](http://goo.gle/angular-v21-blog) to learn about all of the amazing new features coming your way.
68

7-
## Save the Date November 20, 2025
9+
## Experience the v21 Release
10+
11+
Explore the Angular v21 release with this interactive game world. Curious how we made it? Click the `Show Code` button below to view the source code for this Angular app.
812

9-
<docs-pill-row>
10-
<docs-pill href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Angular+v21+Launch&dates=20251120T170000Z/20251120T173000Z&details=Get+ready+for+the+future+of+web+development+with+Angular.+Tune+in+https://goo.gle/angular-v21&location=https://goo.gle/angular-v21" title="Add to Google Calendar"/>
11-
<docs-pill href="/assets/others/angular-v21-release.ics" title="Add to iCal/Outlook" download="angular-v21-release.ics" target="_blank" />
12-
</docs-pill-row>
13+
<docs-code preview hideCode header="v21 Game World" path="adev/src/content/examples/v21-game-world/src/app/app.ts" />
1314

14-
<hr/>
15+
## Angular v21 Developer Event [Full Version]
1516

16-
Join the Angular team this November for a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular.
17+
Angular v21 is being delivered to you as a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular.
1718

1819
🔥 What's coming in v21
1920

2021
- New Angular MCP Server tools to improve AI-powered workflows and code generation
2122
- Your first look at Signal Forms, our new streamlined, signal-based approach to forms in Angular
22-
- Exciting new details about the Angular ARIA package
23-
24-
That’s just a taste of what’s coming in our upcoming major release event. You won't want to miss it.
25-
26-
<docs-pill-row>
27-
<docs-pill href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Angular+v21+Launch&dates=20251120T170000Z/20251120T173000Z&details=Get+ready+for+the+future+of+web+development+with+Angular.+Tune+in+https://goo.gle/angular-v21&location=https://goo.gle/angular-v21" title="Add to Google Calendar"/>
28-
<docs-pill href="/assets/others/angular-v21-release.ics" title="Add to iCal/Outlook" download="angular-v21-release.ics" target="_blank" />
29-
</docs-pill-row>
23+
- Exciting new details about the Angular Aria package
24+
25+
<div style="display: block; width: 80%; margin: 0 auto; margin-top: 20px;">
26+
<iframe
27+
credentialless
28+
width="560"
29+
height="315"
30+
src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr"
31+
title="YouTube video player"
32+
frameborder="0"
33+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
34+
referrerpolicy="strict-origin-when-cross-origin"
35+
allowfullscreen
36+
></iframe>
37+
</div>

‎adev-ja/src/content/guide/aria/overview.en.md‎

Lines changed: 29 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -52,24 +52,34 @@ In this one scenario, developers need to consider:
5252

5353
## What's included?
5454

55-
Angular Aria includes directives for common interactive patterns:
56-
57-
| Component | Description |
58-
| --------------------------------------- | ---------------------------------------------------------------------- |
59-
| [Accordion](guide/aria/accordion) | Collapsible content panels that can expand individually or exclusively |
60-
| [Autocomplete](guide/aria/autocomplete) | Text input with filtered suggestions that appear as users type |
61-
| [Combobox](guide/aria/combobox) | Primitive directive that coordinates a text input with a popup |
62-
| [Grid](guide/aria/grid) | Two-dimensional data display with cell-by-cell keyboard navigation |
63-
| [Listbox](guide/aria/listbox) | Single or multi-select option lists with keyboard navigation |
64-
| [Menu](guide/aria/menu) | Dropdown menus with nested submenus and keyboard shortcuts |
65-
| [Menubar](guide/aria/menubar) | Horizontal navigation bar for persistent application menus. |
66-
| [Multiselect](guide/aria/multiselect) | Multiple-selection dropdown pattern with compact display |
67-
| [Select](guide/aria/select) | Single-selection dropdown pattern with keyboard navigation |
68-
| [Tabs](guide/aria/tabs) | Tabbed interfaces with automatic or manual activation modes |
69-
| [Toolbar](guide/aria/toolbar) | Grouped sets of controls with logical keyboard navigation |
70-
| [Tree](guide/aria/tree) | Hierarchical lists with expand/collapse functionality |
71-
72-
Each component includes comprehensive documentation, working examples, and API references.
55+
Angular Aria includes directives with comprehensive documentation, working examples and API references for common interactive patterns:
56+
57+
### Search and selection
58+
59+
| Component | Description |
60+
| --------------------------------------- | -------------------------------------------------------------- |
61+
| [Autocomplete](guide/aria/autocomplete) | Text input with filtered suggestions that appear as users type |
62+
| [Listbox](guide/aria/listbox) | Single or multi-select option lists with keyboard navigation |
63+
| [Select](guide/aria/select) | Single-selection dropdown pattern with keyboard navigation |
64+
| [Multiselect](guide/aria/multiselect) | Multiple-selection dropdown pattern with compact display |
65+
| [Combobox](guide/aria/combobox) | Primitive directive that coordinates a text input with a popup |
66+
67+
### Navigation and call to actions
68+
69+
| Component | Description |
70+
| ----------------------------- | ----------------------------------------------------------- |
71+
| [Menu](guide/aria/menu) | Dropdown menus with nested submenus and keyboard shortcuts |
72+
| [Menubar](guide/aria/menubar) | Horizontal navigation bar for persistent application menus |
73+
| [Tabs](guide/aria/tabs) | Tabbed interfaces with automatic or manual activation modes |
74+
| [Toolbar](guide/aria/toolbar) | Grouped sets of controls with logical keyboard navigation |
75+
76+
### Content organization
77+
78+
| Component | Description |
79+
| --------------------------------- | ---------------------------------------------------------------------- |
80+
| [Accordion](guide/aria/accordion) | Collapsible content panels that can expand individually or exclusively |
81+
| [Tree](guide/aria/tree) | Hierarchical lists with expand/collapse functionality |
82+
| [Grid](guide/aria/grid) | Two-dimensional data display with cell-by-cell keyboard navigation |
7383

7484
## When to use Angular Aria
7585

@@ -89,24 +99,4 @@ Angular Aria might not fit every scenario:
8999

90100
## Next steps
91101

92-
Explore the component guides to find the pattern that fits your needs:
93-
94-
**Search and selection**
95-
96-
- Autocomplete - Search and filter options as users type
97-
- Listbox - Select one or multiple items from a list
98-
- Select - Choose one option from a list of options
99-
- Multiselect - Choose one option from a list of options
100-
101-
**Navigation and call to actions**
102-
103-
- Menu - Action menus with optional nested submenus
104-
- Tabs - Switch between related content panels
105-
- Toolbar - Group related controls and actions
106-
107-
**Content organization**
108-
109-
- Accordion - Show and hide sections of content
110-
- Tree - Display hierarchical data structures
111-
Data display
112-
- Grid - Navigate and interact with tabular data
102+
Check out a component from the side nav or [list above](#whats-included), or start with [Toolbar](guide/aria/toolbar) to see a complete example of how Angular Aria directives work!

‎adev-ja/src/content/guide/aria/overview.md‎

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -52,24 +52,34 @@ npm install @angular/aria
5252

5353
## 含まれているもの {#whats-included}
5454

55-
Angular Ariaには、一般的なインタラクティブパターンに対応するディレクティブが含まれています:
55+
Angular Ariaには、包括的なドキュメント、動作するサンプル、およびAPIリファレンスを備えた、一般的なインタラクティブパターンに対応するディレクティブが含まれています:
56+
57+
### 検索と選択 {#search-and-selection}
5658

5759
| Component | 説明 |
5860
| --------------------------------------- | ---------------------------------------------------------------------- |
59-
| [Accordion](guide/aria/accordion) | 個別に、または排他的に展開できる折りたたみ可能なコンテンツパネル |
6061
| [Autocomplete](guide/aria/autocomplete) | ユーザーが入力するにつれて表示される、フィルタリングされたサジェスト付きのテキスト入力 |
61-
| [Combobox](guide/aria/combobox) | テキスト入力とポップアップを連携させるプリミティブなディレクティブ |
62-
| [Grid](guide/aria/grid) | セル単位のキーボードナビゲーションを備えた2次元のデータ表示 |
6362
| [Listbox](guide/aria/listbox) | キーボードナビゲーション付きの単一選択または複数選択のオプションリスト |
64-
| [Menu](guide/aria/menu) | ネストされたサブメニューとキーボードショートカットを持つドロップダウンメニュー |
65-
| [Menubar](guide/aria/menubar) | 永続的なアプリケーションメニュー用の水平ナビゲーションバー |
66-
| [Multiselect](guide/aria/multiselect) | コンパクトな表示を持つ複数選択のドロップダウンパターン |
6763
| [Select](guide/aria/select) | キーボードナビゲーション付きの単一選択のドロップダウンパターン |
68-
| [Tabs](guide/aria/tabs) | 自動または手動のアクティベーションモードを持つタブ付きインターフェース |
69-
| [Toolbar](guide/aria/toolbar) | 論理的なキーボードナビゲーションを持つ、グループ化されたコントロールのセット |
70-
| [Tree](guide/aria/tree) | 展開/折りたたみ機能を持つ階層的なリスト |
64+
| [Multiselect](guide/aria/multiselect) | コンパクトな表示を持つ複数選択のドロップダウンパターン |
65+
| [Combobox](guide/aria/combobox) | テキスト入力とポップアップを連携させるプリミティブなディレクティブ |
66+
67+
### ナビゲーションとCTA {#navigation-and-call-to-actions}
68+
69+
| Component | 説明 |
70+
| ----------------------------- | ---------------------------------------------------- |
71+
| [Menu](guide/aria/menu) | ネストされたサブメニューとキーボードショートカットを持つドロップダウンメニュー |
72+
| [Menubar](guide/aria/menubar) | 永続的なアプリケーションメニュー用の水平ナビゲーションバー |
73+
| [Tabs](guide/aria/tabs) | 自動または手動のアクティベーションモードを持つタブ付きインターフェース |
74+
| [Toolbar](guide/aria/toolbar) | 論理的なキーボードナビゲーションを持つ、グループ化されたコントロールのセット |
7175

72-
各コンポーネントには、包括的なドキュメント、動作するサンプル、およびAPIリファレンスが含まれています。
76+
### コンテンツの構成 {#content-organization}
77+
78+
| Component | 説明 |
79+
| --------------------------------- | --------------------------------------------------------------- |
80+
| [Accordion](guide/aria/accordion) | 個別に、または排他的に展開できる折りたたみ可能なコンテンツパネル |
81+
| [Tree](guide/aria/tree) | 展開/折りたたみ機能を持つ階層的なリスト |
82+
| [Grid](guide/aria/grid) | セル単位のキーボードナビゲーションを備えた2次元のデータ表示 |
7383

7484
## Angular Ariaを使用する場面 {#when-to-use-angular-aria}
7585

@@ -89,24 +99,4 @@ Angular Ariaはすべてのシナリオに適しているわけではありま
8999

90100
## 次のステップ {#next-steps}
91101

92-
コンポーネントガイドを調べて、ニーズに合ったパターンを見つけてください:
93-
94-
**検索と選択**
95-
96-
- Autocomplete - ユーザーの入力に応じてオプションを検索・フィルタリングします
97-
- Listbox - リストから1つまたは複数の項目を選択します
98-
- Select - オプションのリストから1つのオプションを選択します
99-
- Multiselect - オプションのリストから1つのオプションを選択します
100-
101-
**ナビゲーションとCTA**
102-
103-
- Menu - ネスト可能なサブメニューを持つアクションメニュー
104-
- Tabs - 関連するコンテンツパネルを切り替えます
105-
- Toolbar - 関連するコントロールとアクションをグループ化します
106-
107-
**コンテンツの構成**
108-
109-
- Accordion - コンテンツのセクションを表示・非表示にします
110-
- Tree - 階層的なデータ構造を表示します
111-
データ表示
112-
- Grid - 表形式のデータをナビゲートし、操作します
102+
サイドナビまたは[上記のリスト](#whats-included)からコンポーネントを確認するか、[Toolbar](guide/aria/toolbar)から始めて、Angular Ariaディレクティブの動作の完全な例を確認してください！

‎adev-ja/src/content/guide/tailwind.en.md‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,27 @@
22

33
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project.
44

5-
## Setting up Tailwind CSS
5+
## Automated Setup with `ng add`
6+
7+
Angular CLI provides a streamlined way to integrate Tailwind CSS into your project using the `ng add` command. This command automatically installs the necessary packages, configures Tailwind CSS, and updates your project's build settings.
8+
9+
First, navigate to your Angular project's root directory in a terminal and run the following command:
10+
11+
```shell
12+
ng add tailwindcss
13+
```
14+
15+
This command performs the following actions:
16+
17+
- Installs `tailwindcss` and its peer dependencies.
18+
- Configures the project to use Tailwind CSS.
19+
- Adds the Tailwind CSS `@import` statement to your styles.
20+
21+
After running `ng add tailwindcss`, you can immediately start using Tailwind's utility classes in your component templates.
22+
23+
## Manual Setup (Alternative Method)
24+
25+
If you prefer to set up Tailwind CSS manually, follow these steps:
626

727
### 1. Create an Angular project
828

@@ -61,7 +81,7 @@ If you're using SCSS, add `@use` to `./src/styles.scss`.
6181

6282
### 5. Start using Tailwind in your project
6383

64-
You can now start using Tailwind's utility classes in your component templates to style your application.
84+
You can now start using Tailwind's utility classes in your component templates to style your application. Run your build process with `ng serve` and you should see the styled heading.
6585

6686
For example, you can add the following to your `app.html` file:
6787

@@ -71,10 +91,6 @@ For example, you can add the following to your `app.html` file:
7191
</h1>
7292
</docs-code>
7393

74-
### 6. Start using Tailwind in your project
75-
76-
Run your build process with `ng serve` and you should see the styled heading.
77-
7894
## Additional Resources
7995

8096
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)

‎adev-ja/src/content/guide/tailwind.md‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,27 @@
22

33
[Tailwind CSS](https://tailwindcss.com/)は、HTMLを離れることなくモダンなウェブサイトを構築するために使用できる、ユーティリティファーストのCSSフレームワークです。このガイドでは、AngularプロジェクトでTailwind CSSをセットアップする方法を説明します。
44

5-
## Tailwind CSSのセットアップ {#setting-up-tailwind-css}
5+
## `ng add`を使用した自動セットアップ {#automated-setup-with-ng-add}
6+
7+
Angular CLIは、`ng add`コマンドを使用してTailwind CSSをプロジェクトに統合する合理的な方法を提供します。このコマンドは、必要なパッケージを自動的にインストールし、Tailwind CSSを設定し、プロジェクトのビルド設定を更新します。
8+
9+
まず、ターミナルでAngularプロジェクトのルートディレクトリに移動し、次のコマンドを実行します:
10+
11+
```shell
12+
ng add tailwindcss
13+
```
14+
15+
このコマンドは以下のアクションを実行します:
16+
17+
- `tailwindcss`とそのpeer dependencyをインストールします。
18+
- Tailwind CSSを使用するようにプロジェクトを設定します。
19+
- Tailwind CSSの`@import`ステートメントをスタイルに追加します。
20+
21+
`ng add tailwindcss`を実行した後、コンポーネントのテンプレートでTailwindのユーティリティクラスをすぐに使い始めることができます。
22+
23+
## 手動セットアップ（代替方法） {#manual-setup-alternative-method}
24+
25+
Tailwind CSSを手動でセットアップする場合は、次の手順に従ってください:
626

727
### 1. Angularプロジェクトを作成する {#create-an-angular-project}
828

@@ -61,7 +81,7 @@ SCSSを使用している場合は、`@use`を`./src/styles.scss`に追加しま
6181

6282
### 5. プロジェクトでTailwindを使い始める {#start-using-tailwind-in-your-project}
6383

64-
これで、コンポーネントのテンプレートでTailwindのユーティリティクラスを使用して、アプリケーションのスタイルを設定できるようになります。
84+
これで、コンポーネントのテンプレートでTailwindのユーティリティクラスを使用して、アプリケーションのスタイルを設定できるようになります。`ng serve`でビルドプロセスを実行すると、スタイルが適用された見出しが表示されるはずです。
6585

6686
たとえば、次の内容を`app.html`ファイルに追加できます:
6787

@@ -71,10 +91,6 @@ SCSSを使用している場合は、`@use`を`./src/styles.scss`に追加しま
7191
</h1>
7292
</docs-code>
7393

74-
### 6. プロジェクトでTailwindを使い始める {#start-using-tailwind-in-your-project}
75-
76-
`ng serve`でビルドプロセスを実行すると、スタイルが適用された見出しが表示されるはずです。
77-
7894
## その他のリソース {#additional-resources}
7995

8096
- [Tailwind CSSドキュメント](https://tailwindcss.com/docs)

0 commit comments

Comments
 (0)