Skip to content

Commit

Permalink
Merge branch 'main' of github.com:ionic-team/ionic-docs
Browse files Browse the repository at this point in the history 
# Conflicts:
#	docs/api/accordion.md
#	docs/api/datetime-button.md
#	docs/api/datetime.md
#	docs/api/infinite-scroll.md
#	docs/api/picker.md
#	docs/layout/css-utilities.md
#	docs/layout/global-stylesheets.md
#	docs/layout/structure.md
#	docs/theming/advanced.md
#	docs/theming/colors.md
#	docs/theming/css-variables.md
#	docs/theming/dark-mode.md
#	docs/theming/themes.md
#	docs/updating/6-0.md
  • Loading branch information
@rdlabo
rdlabo committed Mar 31, 2024
2 parents b27a1ee + 3f5325a commit b42a34b
Show file tree
Hide file tree
Showing 3,967 changed files with 136,602 additions and 4,705 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
2 changes: 1 addition & 1 deletion _templates/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Once you've generated your playground, you need to add it to the main markdown f
```
## Feature
import Feature from '@site/static/usage/v7/button/feature/index.md';
import Feature from '@site/static/usage/v8/button/feature/index.md';
<Feature />
```
4 changes: 2 additions & 2 deletions _templates/playground/new/demo.html.ejs.t
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= h.changeCase.titleCase(name) %></title>
<link rel="stylesheet" href="<%= directoryChanges %>../../../common.css" />
<script src="<%= directoryChanges %>../../../common.js"></script>
<link rel="stylesheet" href="<%= directoryChanges %>../../common.css" />
<script src="<%= directoryChanges %>../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/css/ionic.bundle.css" /><% if (css){ %>
Expand Down
6 changes: 3 additions & 3 deletions _templates/playground/new/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ module.exports = {
type: 'select',
name: 'version',
message: 'Select the Ionic Framework version for the playground',
initial: '7',
choices: ['6', '7'],
initial: '8',
choices: ['6', '7', '8'],
},
{
type: 'toggle',
Expand All @@ -77,7 +77,7 @@ module.exports = {

const playgroundName = changeCase.pascal(answers.path.split('/').pop());
console.log(
`\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
`\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
);

return answers;
Expand Down
1 change: 1 addition & 0 deletions cspell-wordlist.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ Swiper
Udemy
Vetur
Wistia
WCAG

actionsheet
fabs
Expand Down
2 changes: 1 addition & 1 deletion docs/angular/slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ The `ion-slides` component had additional styling that helped create a native lo
```css
swiper-container {
--swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
--swiper-pagination-color: var(--ion-color-primary, #3880ff);
--swiper-pagination-color: var(--ion-color-primary, #0054e9);
--swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
--swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
--swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
Expand Down
12 changes: 6 additions & 6 deletions docs/api/accordion-group.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
title: "ion-accordion-group"
---
import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
import Props from '@ionic-internal/component-api/v8/accordion-group/props.md';
import Events from '@ionic-internal/component-api/v8/accordion-group/events.md';
import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md';
import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md';
import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.md';
import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

Expand Down
46 changes: 26 additions & 20 deletions docs/api/accordion.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
title: "ion-accordion"
---
import Props from '@ionic-internal/component-api/v7/accordion/props.md';
import Events from '@ionic-internal/component-api/v7/accordion/events.md';
import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
import Props from '@ionic-internal/component-api/v8/accordion/props.md';
import Events from '@ionic-internal/component-api/v8/accordion/events.md';
import Methods from '@ionic-internal/component-api/v8/accordion/methods.md';
import Parts from '@ionic-internal/component-api/v8/accordion/parts.md';
import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.md';
import Slots from '@ionic-internal/component-api/v8/accordion/slots.md';

<head>
<title>ion-accordion: Accordion Components: How to Build & Examples</title>
Expand All @@ -22,31 +22,37 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';

## 基本的な使い方

import Basic from '@site/static/usage/v7/accordion/basic/index.md';
import Basic from '@site/static/usage/v8/accordion/basic/index.md';

<Basic />

## アコーディオンをトグルする方法

どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。

import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
import Toggle from '@site/static/usage/v8/accordion/toggle/index.md';

<Toggle />

## アコーディオンの状態変化を監視

開発者は `ionChange` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。
:::caution
[Input](./input) や [Textarea](./textarea) などの他のコンポーネントが発する `ionChange` イベントのほとんどはバブル化されます。その結果、アコーディオンの中で関連コンポーネントが使用されている場合、これらのイベントはバブルアップし、アコーディオングループの `ionChange` リスナーを発火させます。

import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
アコーディオンの内部で `ionChange` を発する他のコンポーネントを使用する場合は、アコーディオングループの `ionChange` コールバックに、コールバックに渡されたイベントの `target` キーをチェックさせ、`ionChange` がアコーディオングループからのものであり、子孫からのものでないことを確認することをお勧めします。
:::

開発者は `ionChange` イベントをリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。

import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';

<ListenChanges />

## 複数のアコーディオン

開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。

import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
import Multiple from '@site/static/usage/v8/accordion/multiple/index.md';

<Multiple />

Expand All @@ -56,15 +62,15 @@ import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';

個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。

import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md';

<DisableIndividual />

### アコーディオングループ

アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。

import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md';

<DisableGroup />

Expand All @@ -74,15 +80,15 @@ import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md

個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。

import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md';

<ReadonlyIndividual />

### アコーディオングループ

アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。

import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md';

<ReadonlyGroup />

Expand All @@ -106,7 +112,7 @@ import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.

`expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。

import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md';

<ExpansionStyles />

Expand All @@ -130,7 +136,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
}
```

import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md';
import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md';

<AdvancedExpansionStyles />

Expand All @@ -142,15 +148,15 @@ import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customizati

どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。

import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md';

<Icons />

### テーマ

`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。

import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md';

<Theming />

Expand All @@ -160,7 +166,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index

デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。

import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md';

<AccessibilityAnimations />

Expand Down
24 changes: 12 additions & 12 deletions docs/api/action-sheet.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ title: "ion-action-sheet"
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
import Props from '@ionic-internal/component-api/v8/action-sheet/props.md';
import Events from '@ionic-internal/component-api/v8/action-sheet/events.md';
import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md';
import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md';
import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.md';
import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md';

<head>
<title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
Expand All @@ -27,7 +27,7 @@ Action Sheetは複数の選択肢を表示するダイアログです。アプ

`ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。

import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md';

<Trigger />

Expand All @@ -37,15 +37,15 @@ import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md'

`isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。

import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md';

<IsOpen />

## Controller アクションシート

アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。

import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
import Controller from '@site/static/usage/v8/action-sheet/controller/index.md';

<Controller />

Expand All @@ -59,7 +59,7 @@ Buttonは `ActionSheetButton` の `data` プロパティを介してデータを

`didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。

import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md';

<RoleInfo />

Expand All @@ -83,15 +83,15 @@ import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/in
}
```

import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md';
import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md';

<Styling />

## CSSカスタムプロパティ

[CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。

import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md';

<CssCustomProperties />

Expand Down
Loading

0 comments on commit b42a34b

Please sign in to comment.