Action Sheetは、一連のオプションを表示して、アクションを確認または取り消すことができます。
-Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.
+Action Sheets display a set of options with the ability to confirm or cancel an action.
+Alertは、特定のアクションまたはアクションのリストを選択する機能を、ユーザーに提供するための優れた方法です。
@@ -36,13 +40,18 @@ Ionic アプリは、コンポーネントと呼ばれる高レイヤーの構Badgeコンポーネントは、通常は数値をユーザーに伝えるための小さなコンポーネントです。
Breadcrumbs are navigation items that are used to indicate where a user is on an app.
+Buttonを使ってユーザが行動を起こせます。アプリと対話したり、移動したりするのに不可欠な方法です。
Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。
++ Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more. +
コンテンツは、アプリと対話してアプリをナビゲートするための典型的な方法です。
- 日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。 -
+Date & time pickers are used to present an interface that makes it easy for users to select dates and times.
ウェブ、iOS、Androidアプリで使える美しいデザインのアイコン。
-Gridはカスタムレイアウトを構築するための強力なモバイルファーストシステムです。
Beautifully designed icons for use in web, iOS, and Android apps.
+Infinite scrollは、ユーザーがアプリをスクロールするときに新しいデータを読み込むことができます。
Inputsはユーザーがアプリにデータを入力する方法を提供します。
+Inputs provides a way for users to enter data in your app.
Itemsは、Listの一部として使用できる汎用のUIコンテナです。
++ Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. + Items can be swiped, deleted, reordered, edited, and more. +
Listは、連絡先リスト、再生リスト、メニューなどの情報の行を表示できます。
Navigationは、ユーザーがアプリ内の異なるページ間を移動する方法です。
++ A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual + content. +
Navigation is how users move between different pages in your app.
+Popoverは、コンテキストを変えずに情報やオプションを提示する簡単な方法を提供します。
Radio inputsはあなたが排他的なオプションのセットを提示することを可能にします。
Refresherは、コンテンツコンポーネントの更新機能を提供します。
+Range sliders let users select a value by dragging a knob along a track.
Searchbarは、ールバーからアイテムを検索またはフィルタリングするために使用されます。
+Refresher provides pull-to-refresh functionality on a content component.
Routingは現在のpathに基づいてナビゲーションを可能にします。
Searchbar is used to search or filter items, usually from a toolbar.
+Segmentsは、フィルターまたはViewの切り替えとして使用できる一連の専用ボタンを提供します。
Toastは、アプリのコンテンツの上に通知を表示するために使用されます。一時的なものでも却下可能なものでもあります。
+Toasts are subtle notifications that appear over your app's content without interrupting user interaction.
Togglesは択一のInputでありオプションやスイッチによく使われます。
Toolbarsは、アプリに関連する情報や操作を格納するために使用されます。
-Toolbars are used to house information and actions relating to your app.
+Text is used to style or change the color of text within an application.
+
+## Additional Documentation
-新しいプロジェクトを作成すると、拡張機能は `package.json` にあるすべての共通タスクにアクセスできるようになります。
+Full documentation of the WebNative extension can be found at [webnative.dev](https://webnative.dev/introduction/getting-started/) covering topics like:
-## Capacitor の追加
-
-[Capacitor](https://capacitorjs.com/) をアプリケーションに追加するには、"Integrate Capacitor "を選択します。
-
-
-
-Capacitor が統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS 上でアプリを実行することができるようになりました。
-
-## Doing More
-
-Ionic VS Code 拡張は、マイグレーション、デバッグ、モノレポのサポートなど、非常に多くのことを支援します。拡張機能の全リストは、[extension overview on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をご確認ください。
+- Building, debugging and running your Ionic Framework application.
+- Bundle analysis, dependency upgrades.
+- Migration from Cordova.
+- Changing native settings.
+- Splash Screens & Icons.
+- Developing without a Mac using the WebNative app.
diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
index 1ed04d0a72d..df0d71d3097 100644
--- a/docs/layout/css-utilities.md
+++ b/docs/layout/css-utilities.md
@@ -12,13 +12,13 @@ title: CSSユーティリティ
Ionic Framework は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
-:::note
-使用可能な Ionic Framework スターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。
+:::important
+If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
:::
## テキストの修正
-### テキストの配置
+### Text Align
```html
-
- hidden
- You can't see me. -
-
- not-hidden
- You can see me! -| ` element. | +| `.ion-display-table-row` | `display: table-row` | The element behaves like an HTML ` |
.default})
-### Flex コンテナのプロパティ
+### Align Items
-```html
-.default})
- .default})
- .default})
+
+Ionic provides the following utility classes for `justify-content`:
| Class | Style Rule | Description |
| ------------------------------ | -------------------------------- | --------------------------------------------------------------------------- |
@@ -475,35 +397,77 @@ Margin エリアは、隣り合う要素とのスペースを広げるために
| `.ion-justify-content-around` | `justify-content: space-around` | Items are evenly distributed on the main axis with equal space around them. |
| `.ion-justify-content-between` | `justify-content: space-between` | Items are evenly distributed on the main axis. |
| `.ion-justify-content-evenly` | `justify-content: space-evenly` | Items are distributed so that the spacing between any two items is equal. |
-| `.ion-align-items-start` | `align-items: flex-start` | Items are packed toward the start on the cross axis. |
-| `.ion-align-items-end` | `align-items: flex-end` | Items are packed toward the end on the cross axis. |
-| `.ion-align-items-center` | `align-items: center` | Items are centered along the cross axis. |
-| `.ion-align-items-baseline` | `align-items: baseline` | Items are aligned so that their baselines align. |
-| `.ion-align-items-stretch` | `align-items: stretch` | Items are stretched to fill the container. |
-| `.ion-nowrap` | `flex-wrap: nowrap` | Items will all be on one line. |
-| `.ion-wrap` | `flex-wrap: wrap` | Items will wrap onto multiple lines, from top to bottom. |
-| `.ion-wrap-reverse` | `flex-wrap: wrap-reverse` | Items will wrap onto multiple lines, from bottom to top. |
-### Flex Item Properties
+### Flex Direction
-```html
-.default})
+
+Ionic provides the following utility classes for `flex-direction`:
+
+| Class | Style Rule | Description |
+| -------------------------- | -------------------------------- | ----------------------------------------------------------------- |
+| `.ion-flex-row` | `flex-direction: row` | Items are placed in the same direction as the text direction. |
+| `.ion-flex-row-reverse` | `flex-direction: row-reverse` | Items are placed in the opposite direction as the text direction. |
+| `.ion-flex-column` | `flex-direction: column` | Items are placed vertically. |
+| `.ion-flex-column-reverse` | `flex-direction: column-reverse` | Items are placed vertically in reverse order. |
+
+### Flex Wrap
+
+The [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
+
+.default})
+
+Ionic provides the following utility classes for `flex-wrap`:
+
+| Class | Style Rule | Description |
+| ------------------------ | ------------------------- | -------------------------------------------------------- |
+| `.ion-flex-nowrap` | `flex-wrap: nowrap` | Items will all be on one line. |
+| `.ion-flex-wrap` | `flex-wrap: wrap` | Items will wrap onto multiple lines, from top to bottom. |
+| `.ion-flex-wrap-reverse` | `flex-wrap: wrap-reverse` | Items will wrap onto multiple lines, from bottom to top. |
+
+### Responsive Flex Container Classes
+
+All of the flex container classes listed above have additional classes to modify the properties based on the screen size. Instead of the base class name, use `{property}-{breakpoint}-{modifier}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+
+The table below shows the default behavior, where `{property}` is one of the following: `justify-content`, `align-content`, `align-items`, `flex`, or `flex-wrap`, and `{modifier}` is the corresponding value as described above.
+
+| Class | Description |
+| ------------------------------- | ------------------------------------------------------------- |
+| `.ion-{property}-{modifier}` | Applies the modifier to the element on all screen sizes. |
+| `.ion-{property}-sm-{modifier}` | Applies the modifier to the element when `min-width: 576px`. |
+| `.ion-{property}-md-{modifier}` | Applies the modifier to the element when `min-width: 768px`. |
+| `.ion-{property}-lg-{modifier}` | Applies the modifier to the element when `min-width: 992px`. |
+| `.ion-{property}-xl-{modifier}` | Applies the modifier to the element when `min-width: 1200px`. |
+
+### Deprecated Classes
+
+:::warning Deprecation Notice
+
+The following classes are deprecated and will be removed in the next major release. Use the recommended `.ion-flex-*` classes instead.
+
+:::
+
+| Class | Description |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `.ion-nowrap` | Items will all be on one line..default})
+
+Ionic provides the following utility classes for `align-self`:
| Class | Style Rule | Description |
| -------------------------- | ------------------------ | ---------------------------------------------------------------------- |
@@ -514,9 +478,90 @@ Margin エリアは、隣り合う要素とのスペースを広げるために
| `.ion-align-self-stretch` | `align-self: stretch` | Item is stretched to fill the container. |
| `.ion-align-self-auto` | `align-self: auto` | Item is positioned according to the parent's `align-items` value. |
-## Border の表示
+### Flex
+
+The [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) CSS property is a shorthand property for `flex-grow`, `flex-shrink` and `flex-basis`. It sets how a flex item will grow or shrink to fit the space available in its flex container.
+
+.default})
+
+Ionic provides the following utility classes for `flex`:
+
+| Class | Style Rule | Description |
+| ------------------- | --------------- | ----------------------------------------------------------- |
+| `.ion-flex-1` | `flex: 1` | Item grows and shrinks equally with other flex items. |
+| `.ion-flex-auto` | `flex: auto` | Item grows and shrinks based on its content size. |
+| `.ion-flex-initial` | `flex: initial` | Item shrinks to its minimum content size but does not grow. |
+| `.ion-flex-none` | `flex: none` | Item does not grow or shrink. |
+
+### Flex Grow
+
+The [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size.
+
+.default})
+
+Ionic provides the following utility classes for `flex-grow`:
+
+| Class | Style Rule | Description |
+| ------------------ | -------------- | -------------------------------------------------- |
+| `.ion-flex-grow-0` | `flex-grow: 0` | Item does not grow beyond its content size. |
+| `.ion-flex-grow-1` | `flex-grow: 1` | Item grows to fill available space proportionally. |
+
+### Flex Shrink
+
+The [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their `flex-shrink` value. Each flex line's negative free space is distributed between the line's flex items that have a `flex-shrink` value greater than `0`.
+
+.default})
+
+Ionic provides the following utility classes for `flex-shrink`:
+
+| Class | Style Rule | Description |
+| -------------------- | ---------------- | -------------------------------------------------------- |
+| `.ion-flex-shrink-0` | `flex-shrink: 0` | Item does not shrink below its content size. |
+| `.ion-flex-shrink-1` | `flex-shrink: 1` | Item shrinks proportionally when container is too small. |
+
+### Order
+
+The [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order. Items not given an explicit `order` value are assigned the default value of `0`.
+
+.default})
+
+Ionic provides the following utility classes for `order`:
+
+| Class | Style Rule | Description |
+| ------------------ | ----------- | ----------------------------------------- |
+| `.ion-order-first` | `order: -1` | Item appears first in the flex container. |
+| `.ion-order-0` | `order: 0` | Item appears in its natural order. |
+| `.ion-order-1` | `order: 1` | Item appears after items with order 0. |
+| `.ion-order-2` | `order: 2` | Item appears after items with order 1. |
+| `.ion-order-3` | `order: 3` | Item appears after items with order 2. |
+| `.ion-order-4` | `order: 4` | Item appears after items with order 3. |
+| `.ion-order-5` | `order: 5` | Item appears after items with order 4. |
+| `.ion-order-6` | `order: 6` | Item appears after items with order 5. |
+| `.ion-order-7` | `order: 7` | Item appears after items with order 6. |
+| `.ion-order-8` | `order: 8` | Item appears after items with order 7. |
+| `.ion-order-9` | `order: 9` | Item appears after items with order 8. |
+| `.ion-order-10` | `order: 10` | Item appears after items with order 9. |
+| `.ion-order-11` | `order: 11` | Item appears after items with order 10. |
+| `.ion-order-12` | `order: 12` | Item appears after items with order 11. |
+| `.ion-order-last` | `order: 13` | Item appears last in the flex container. |
+
+### Responsive Flex Item Classes
+
+All of the flex item classes listed above have additional classes to modify the properties based on the screen size. Instead of the base class name, use `{property}-{breakpoint}-{modifier}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+
+The table below shows the default behavior, where `{property}` is one of the following: `align-self`, `flex`, `flex-grow`, `flex-shrink`, or `order`, and `{modifier}` is the corresponding value as described above.
+
+| Class | Description |
+| ------------------------------- | ------------------------------------------------------------- |
+| `.ion-{property}-{modifier}` | Applies the modifier to the element on all screen sizes. |
+| `.ion-{property}-sm-{modifier}` | Applies the modifier to the element when `min-width: 576px`. |
+| `.ion-{property}-md-{modifier}` | Applies the modifier to the element when `min-width: 768px`. |
+| `.ion-{property}-lg-{modifier}` | Applies the modifier to the element when `min-width: 992px`. |
+| `.ion-{property}-xl-{modifier}` | Applies the modifier to the element when `min-width: 1200px`. |
+
+## Border Display
-border display CSS プロパティは、border を表示するかどうかを指定します。このプロパティは、 `ion-header` と` ion-footer` に適用できます。
+The `.ion-no-border` utility class can be used to remove borders from Ionic components. This class can be applied to the `ion-header` and `ion-footer` components.
```html