diff --git a/.ai/skills/igniteui-doc-topics/SKILL.md b/.ai/skills/igniteui-doc-topics/SKILL.md index 92b2996b6d..c667e6e22f 100644 --- a/.ai/skills/igniteui-doc-topics/SKILL.md +++ b/.ai/skills/igniteui-doc-topics/SKILL.md @@ -73,12 +73,14 @@ Section → mode map (full contents in `house-style.md`): | Live Demo | demonstration (action) | prose/explanation | | Anatomy: visual + DOM tree / skeleton | orientation (reference) | opinion, install steps | | Getting Started, Usage | **how-to** | *why* explanations, exhaustive option lists | +| Getting Started → Prerequisites and Version Compatibility | reference / how-to | unverified support claims, migration history | | Usage → Do/Don't | **explanation** | install steps, code, API detail | | Properties / Methods / Events | **reference** | instructions, opinion | | Styling (`### Sass Theming`, `### Tailwind`, …) | how-to (steps) + reference (tables) | conceptual essays | | Accessibility | reference (keyboard/ARIA/compliance tables) | tutorials, marketing, unverified conformance claims | | Troubleshooting | how-to (cause → fix) | background theory | -| API References / Dependencies / Additional Resources | reference / navigation | new teaching | +| Known Limitations | **reference** | troubleshooting fixes, tutorials, unverified claims | +| API References / Dependencies / Additional Resources / Related Components / FAQ | reference / navigation | new teaching | Concrete mode-bleed to catch: a *why* paragraph inside **Usage** (→ move to Do/Don't or a concept topic, link back); "how to build X" prose inside **Properties** (→ move to Usage; keep the table @@ -92,7 +94,10 @@ cheat-sheet's "two classic confusions" section explains the reasoning. for React/WC/Blazor using `{Platform}`/`{ProductName}` tokens and ``. Load the relevant details from `house-style.md`. 3. **Follow the verification workflow** in `house-style.md` before writing technical content. - Existing snippets and old prose are clues, not authority. + Existing snippets and old prose are clues, not authority. For component topics, also inspect the + matching Indigo.Design component documentation under + `https://www.infragistics.com/products/indigo-design/help/components/` and use its component + structure as input for Usage subsection suggestions. 4. **Write frontmatter first** — `title`, `description` (answer-shaped, ≤~160 chars), `keywords`, `license`, `llms.description`, `mentionedTypes` (xplat), and `relatedComponents` if the component has close siblings (this lets **Usage**'s final **Do/Don't** subsection name the specific @@ -100,12 +105,23 @@ cheat-sheet's "two classic confusions" section explains the reasoning. 5. **Lay out the canonical sections** in order for that topic type, required ones always present. Feature-specific content goes as sub-headings under **Usage**, never as new top-level sections. 6. **Fill each section in its mode.** Lead every section with one plain, specific sentence. Put - reference in tables. In **Usage**, start with a basic declaration and then add property-focused - sub-sections so every public input is shown with a minimal snippet; group only tightly coupled - properties that form one behavior. End **Usage** with `### Do/Don't`, using inline **When to use:** - and **When not to use:** labels rather than nested headings. Embed exactly one top ``, then - Usage samples only for distinct tasks (soft max 5/page). Phrase Do/Don't and Troubleshooting as - the reader's real questions. + reference in tables. In **Usage**, add property-focused sub-sections so every public input is + shown with a minimal snippet; group only tightly coupled properties that form one behavior. Keep + existing useful subsections, then compare against Indigo.Design's component sections by meaning, + not by exact heading name, to suggest or add any missing runtime-relevant Usage subsections. + End **Usage** with `### Do/Don't`, using inline **When to use:** + and **When not to use:** labels rather than nested headings, plus the matching guidance image + from the Indigo.Design documentation or a `{/* TODO */}` marker when the asset is not available. + Add a required `## Live Demo` section + with exactly one top ``, then Usage samples only for distinct tasks (soft max 5/page). + Phrase Do/Don't and Troubleshooting as the reader's real questions. Include the required + `### Prerequisites and Version Compatibility` subsection under **Getting Started**, and the + required **Known Limitations**, **Related Components**, and **FAQ** sections in their canonical + positions. + For FAQ content, import and use the shared Astro `Faq` and `FaqItem` components. In slot mode, + set `indicatorPosition="end"` on every `FaqItem`, because the value on `Faq` does not flow into + slotted children. When auditing, flag plain FAQ headings or custom accordion markup and convert + each question/answer pair to an `FaqItem` while keeping the answer concise and component-specific. 7. **Self-check against the rubric** before presenting — especially mode-bleed (C-checks) and metadata (D-checks). Fix, then deliver the `.mdx`. @@ -113,10 +129,15 @@ cheat-sheet's "two classic confusions" section explains the reasoning. 1. **Classify** the topic and identify its doc set (Angular vs xplat) and type. 2. **Follow the verification workflow** in `house-style.md` before judging technical content. - Old snippets/prose are never the source of truth by themselves. + Old snippets/prose are never the source of truth by themselves. For component topics, inspect the + matching Indigo.Design component documentation and compare its structure to the topic's Usage + subsections by semantic content, not heading text, before making Usage-coverage suggestions. 3. **Run every check** in `references/audit-rubric.md` — structure/order (A), naming (B), Diátaxis mode integrity (C), metadata/AI-readiness and correctness (D), samples/links (E), formatting and snippet currency (F). For mode integrity, run the compass on each section and flag drift. + For detailed frontmatter-only audits or normalization, use the companion + `igniteui-topic-frontmatter` skill; for full topic audits, apply only the basic metadata checks + here unless the user asks for frontmatter suggestions. 4. **Report** in the rubric's exact format: Verdict → Summary → Findings (each with Where / Issue / Principle / Fix) → Quick wins. Order findings Error → Warning → Suggestion. 5. Keep every **Fix** concrete and applyable (the corrected heading, the sentence to move, the table diff --git a/.ai/skills/igniteui-doc-topics/references/audit-rubric.md b/.ai/skills/igniteui-doc-topics/references/audit-rubric.md index 1d3d2dc93e..3e13348c57 100644 --- a/.ai/skills/igniteui-doc-topics/references/audit-rubric.md +++ b/.ai/skills/igniteui-doc-topics/references/audit-rubric.md @@ -13,18 +13,24 @@ concrete rule below (structure, naming, Diátaxis mode, or metadata) and to a fi ## Checks ### A. Structure & order -- A1 (Error) A required section is missing (Live Demo, Anatomy, Getting Started, Usage, - Properties, Accessibility, API References, Additional Resources on a component - topic). +- A1 (Error) A required section or subsection is missing (`## Live Demo`, Anatomy, Getting Started + with `### Prerequisites and Version Compatibility`, Usage, Properties, Accessibility, + Known Limitations, API References, Dependencies, Additional Resources, Related Components, and + FAQ on a component topic. **Troubleshooting** is conditional and is required only when the topic + contains version-migration, deprecation, or legacy-setup notes.) - A2 (Warning) Sections are present but out of the canonical order. - A3 (Warning) A conditional section sits in the wrong slot. - A4 (Error) A feature-specific top-level `##` exists that should be a sub-heading under **Usage**, - including a top-level `## Do/Don't`. -- A5 (Error) **Live Demo** is missing near the top of the topic or appears after **Anatomy**. -- A6 (Suggestion) >10 live samples on one page (soft cap) — consider splitting. Up to 10 is fine; + including a top-level `## Do/Don't`; or a required canonical section has been omitted or replaced + by a non-standard heading. +- A5 (Error) `## Live Demo` is missing near the top of the topic, appears after **Anatomy**, or the + top preview `` is left as a bare block instead of living inside the `## Live Demo` section. +- A6 (Suggestion) >5 live samples on one page (soft cap) — consider splitting. Up to 5 is fine; only flag when a page clearly sprawls past that. -- A7 (Warning) **Usage** does not end with `### Do/Don't`, or **When to use:** / **When not to use:** - are written as nested headings instead of inline labels inside that subsection. +- A7 (Warning) **Usage** does not end with `### Do/Don't`, **Do/Don't** is missing the + Indigo.Design guidance image or a `{/* TODO */}` marker for the not-yet-available asset, or + **When to use:** / **When not to use:** are written as nested headings instead of inline labels + inside that subsection. - A8 (Warning) **Anatomy** is incomplete: missing its opening screenshot/GIF (or a `{/* TODO */}` marker for a not-yet-available asset), or missing the verified DOM tree / skeleton. - A9 (Warning) **Accessibility** is missing one of its three required `###` sub-sections — @@ -33,6 +39,11 @@ concrete rule below (structure, naming, Diátaxis mode, or metadata) and to a fi - A10 (Warning) **Usage**'s **Do/Don't** subsection contains install steps, code snippets, a property table, or other reference/how-to content that belongs in Getting Started, another Usage subsection, Properties, or Accessibility instead of do/don't guidance. +- A11 (Warning) **FAQ** uses plain question headings or hand-written accordion markup instead of + the shared Astro `` / `` components, or does not keep each answer concise and + component-specific. +- A12 (Warning) A slot-mode FAQ does not set `indicatorPosition="end"` on every ``; + setting it only on `` does not affect slotted children. ### B. Naming - B1 (Warning) A heading uses a drifted name with a standard equivalent (see reconciliation table). @@ -56,12 +67,17 @@ Run the compass on each section; flag content that has drifted out of the sectio - C6 (Warning) **Styling content inside Usage** (CSS-var overrides, `color`/background snippets) — move to the **Styling** section; Styling should also open with a `` of the result. - C7 (Warning) **Usage doesn't cover every public input** with a property-focused sub-section and - minimal snippet, omits `### Basic Declaration`, or documents each option in isolation instead of + minimal snippet, or documents each option in isolation instead of grouping tightly coupled properties and stating the behavioral relationship once (e.g. the content-type priority). - C8 (Warning) **Usage**'s **Do/Don't** drifts into another mode — install/code steps (belongs in Getting Started/Usage), an exhaustive option table (belongs in Properties), or conformance claims (belongs in Accessibility) instead of do/don't guidance. +- C9 (Suggestion) **Usage subsection opportunities from Indigo.Design** — the matching + Indigo.Design component topic has a section whose meaning maps to a real Ignite UI API, slot, + state, layout pattern, or verified sample, but the topic does not cover it. Compare by semantic + content rather than heading text, and do not flag Figma-only structure that belongs in Anatomy or + Styling instead of Usage. ### D. Metadata & AI-readiness - D1 (Warning) `relatedComponents` is set but **Usage**'s **Do/Don't** guidance doesn't name the @@ -87,10 +103,15 @@ Run the compass on each section; flag content that has drifted out of the sectio `https://www.infragistics.com/api/blazor`). Use typed source for implementation details not exposed by API docs, and official framework docs for framework/version behavior; if unverifiable, don't assert it. Existing topic snippets/prose are not sufficient proof. -- D10 (Warning) **Voice/tone drift** — prose isn't imperative/second-person present tense, mixes +- D10 (Error) A component topic is missing the required `last_updated` metadata, or is missing the + corresponding visible `**Last updated:** Month D, YYYY` line immediately after the lead paragraph, + uses a different placement or format, or duplicates the date elsewhere in the body. The visible + value must be generated from or match the `last_updated` metadata and must not be manually hard-coded + independently in the body. +- D11 (Warning) **Voice/tone drift** — prose isn't imperative/second-person present tense, mixes first-person-plural narration ("we create") with how-to, or carries filler ("simply", "just") or marketing inside instructional prose. -- D11 (Error) **Blanket or unverified accessibility-conformance claim** — "fully accessible" / +- D12 (Error) **Blanket or unverified accessibility-conformance claim** — "fully accessible" / "WCAG compliant" prose, a conformance target (WCAG level, Section 508, EN 301 549) with no official source, a conformance-table row not traceable to behavior verified on the page or in source, an "N/A" filler row for an irrelevant criterion, or an invented testing/AT matrix or VPAT link. diff --git a/.ai/skills/igniteui-doc-topics/references/house-style.md b/.ai/skills/igniteui-doc-topics/references/house-style.md index 6dcdbdabf6..1a24d2c308 100644 --- a/.ai/skills/igniteui-doc-topics/references/house-style.md +++ b/.ai/skills/igniteui-doc-topics/references/house-style.md @@ -26,7 +26,7 @@ Topics are **Astro `.mdx`**. Frontmatter is YAML. Observed + target fields: ```yaml --- -title: "Angular Star Rating Component – Ignite UI for Angular - MIT license" # SEO title +title: "{ComponentTitle}" # xplat component title; the layout appends the resolved product name description: "…" # <=~160 chars, shaped as an answer ("X is a … that …") keywords: "…" # comma-separated license: MIT @@ -39,6 +39,9 @@ relatedComponents: [Toast, Banner] # TARGET field — drives the Usage Do/Don' - **`llms.description`** already exists in both sets and is high-value — write it as a crisp, self-contained answer sentence. It is *not* optional filler. +- **`title`** uses `"{ComponentTitle}"` for xplat topics because the layout appends the resolved + product name to the HTML title. Do not add a framework-specific suffix or duplicate the framework in + the component phrase. - **`relatedComponents`** is the revision-2 trigger and is **not yet in the repo**. When authoring to target, set it. When auditing, treat a missing-but-warranted value as a finding, and a set value with no **Usage** → **Do/Don't** guidance as a hard error. @@ -47,9 +50,12 @@ relatedComponents: [Toast, Banner] # TARGET field — drives the Usage Do/Don' ```mdx import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import { Image } from 'astro:assets'; // when embedding repo-owned images import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; # xplat only +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; // xplat only +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; ``` ## Per-framework mechanics @@ -134,26 +140,42 @@ under **Usage**, never a new top-level section. | # | Section (`##`) | Required? | Diátaxis mode | Contents | |---|---|---|---|---| -| 1 | *Title + one-line definition* (`#` + lead ¶) | required | orient / reference | H1 is **`‹Component› Component`** — **no** framework prefix, **no** "Overview" suffix (the framework lives in the SEO `title`). Follow with one plain sentence: what it is, what problem it solves. Mirror `llms.description`. | -| 2 | *Live Demo* | required | demonstration (action) | `` of the simplest useful state near the top of the page, before **Anatomy**. | +| 1 | *Title + one-line definition* (`#` + lead ¶) | required | orient / reference | H1 is **`‹Component› Component`** — **no** framework prefix, **no** "Overview" suffix (the framework lives in the SEO `title`). Follow with one plain sentence: what it is, what problem it solves. Mirror `llms.description`. Every topic must render the visible `**Last updated:** Month D, YYYY` line immediately after the lead paragraph; do not place it in the H1 or duplicate it elsewhere in the body. | +| 2 | **Live Demo** | required | demonstration (action) | A `## Live Demo` section containing exactly one `` of the simplest useful state, before **Anatomy**. Keep this section sample-only unless a one-sentence setup is truly needed. | | 3 | **Anatomy** | required for component topics | orientation (reference) | Opens with a screenshot/GIF of the component's parts or the behavior being shown, then the **DOM tree / skeleton** (rendered elements, parts, slots). If the visual asset doesn't exist yet, leave a `{/* TODO */}` marker rather than a broken image, but still include the section and verified skeleton. | -| 4 | **Getting Started** | required | how-to | **Lead with the component-specific import/registration** — the page-unique, high-value part. Compress the generic library install to a **single prerequisite line linking the general getting-started topic** (an inline `ng add igniteui-angular` as a parenthetical is fine); **don't** repeat the multi-sentence install boilerplate that is identical on every component page. Show the **current** registration (standalone import) first; put legacy NgModule **after**, marked as legacy. | -| 5 | **Usage** | required | how-to + explanation | Start with `### Basic Declaration`, showing the smallest valid component markup for each platform. Then add property-focused sub-sections that showcase every public input with a minimal snippet and, when a verified demo exists and adds visual value, a ``. Give standalone properties their own sub-section (`Shape`, not `Avatar Shape`); group only tightly coupled properties that form one behavior (for example, content-source priority such as `src`, `alt`, `initials`, and default slot content). The final Usage subsection must be `### Do/Don't`; it uses inline **When to use:** and **When not to use:** labels, not nested headings. Styling content belongs in **Styling**, not here. | +| 4 | **Getting Started** | required | how-to | **Lead with the component-specific import/registration** and include the required `### Prerequisites and Version Compatibility` subsection for verified package, framework, and version guidance. Compress the generic library install to a **single prerequisite line linking the general getting-started topic**; **don't** repeat identical install boilerplate. Show the **current** registration first; put legacy setup after, marked as legacy. | +| 5 | **Usage** | required | how-to + explanation | Add property-focused sub-sections that showcase every public input with a minimal snippet and, when a verified demo exists and adds visual value, a ``. Give standalone properties their own sub-section (`Shape`, not `Avatar Shape`); group only tightly coupled properties that form one behavior (for example, content-source priority such as `src`, `alt`, `initials`, and default slot content). The final Usage subsection must be `### Do/Don't`; it uses inline **When to use:** and **When not to use:** labels, not nested headings, and includes the matching guidance image from the Indigo.Design documentation or a `{/* TODO */}` marker when the asset is not available. Styling content belongs in **Styling**, not here. | | 6 | **Properties** | required | reference | Table: name · type · default · description. (Replaces "Configuration".) | | 7 | **Methods** | conditional | reference | Table of callable actions. | | 8 | **Events** | conditional | reference | Table of emitted events. | | 9 | **Styling** | required when applicable | how-to + reference | **Open with a `` of the styled result** + one intro line, then the **Styling Variables table** (**one table** — variable · what it changes; **no default-value column, no per-theme tabs**) and styleable-parts table. Subsections cover each approach — **first `### Sass Theming`** (the primary Sass theme workflow), then others (e.g. `### Tailwind`, `### Custom sizing`). All styling content lives here, not under Usage. | | 10 | **Accessibility** | required | reference | Three sub-sections, in order: **Keyboard Interaction** (key→action table), **Screen Readers / ARIA**, **Accessibility Compliance** (conformance evidence — see the sub-structure spec below). | | 11 | **Troubleshooting** | conditional (required when version-migration or legacy-setup notes exist) | how-to | Gotchas phrased as the reader's real question; answer as cause → fix. **Collect version-migration notes, deprecations, and legacy/alternative approaches here** — not buried in code-fence comments or scattered asides. | -| 12 | **API References** | required | reference | `` out to the full generated reference; don't duplicate it. | -| 13 | **Dependencies** | conditional | reference | Themes, styles, or supporting components the component relies on to render or function — modules to import (Angular) or supporting components/themes (xplat). (Currently "Theming Dependencies".) | -| 14 | **Additional Resources** | required | navigation | Forums, GitHub, related topics. | - +| 12 | **Known Limitations** | required | reference | Verified platform-independent limitations and boundaries of the component. Do not use this section for troubleshooting fixes or unsupported claims. | +| 13 | **API References** | required | reference | `` out to the full generated reference; don't duplicate it. | +| 14 | **Dependencies** | required | reference | Themes, styles, or supporting components the component relies on to render or function — modules to import (Angular) or supporting components/themes (xplat). | +| 15 | **Additional Resources** | required | navigation | Forums, GitHub, related topics. | +| 16 | **Related Components** | required | navigation / decision support | Verified sibling components and concise links explaining when they are a better fit. | +| 17 | **FAQ** | required | reference / how-to | Frequently asked, component-specific questions; render them with `Faq` and `FaqItem`, keep answers concise, and move troubleshooting diagnosis to **Troubleshooting**. | + +### FAQ component + +When authoring or updating a component topic, use the Astro FAQ components instead of plain FAQ +headings or hand-written accordion markup. Import `Faq` and `FaqItem` from +`igniteui-astro-components/components/mdx/`, wrap the questions in ``, and put each answer in a +``. In slot mode, set +`indicatorPosition="end"` on every `FaqItem`; the value on `Faq` does not flow into slotted +children. Prefer slot mode so answers can contain normal MDX, links, code blocks, and other +components. Keep the FAQ questions component-specific and concise; do not move troubleshooting +content into the FAQ merely to populate it. **When Not to Use trigger:** every component topic ends **Usage** with `### Do/Don't`. This subsection -must include inline **When to use:** and **When not to use:** labels, not nested headings. When -`relatedComponents` is non-empty, **When not to use:** must name the specific better-fit sibling(s) -by name and link them; when it's empty (standalone primitives like Badge/Divider), **When not to -use:** states the boundary without inventing a sibling. +must include the matching guidance image from the Indigo.Design documentation before the guidance +text. Use a repo-owned image import with ``; if the visual asset does not exist yet, leave a +`{/* TODO */}` marker rather than a broken image. The subsection must also include inline **When to +use:** and **When not to use:** labels, not nested headings. When `relatedComponents` is non-empty, +**When not to use:** must name the specific better-fit sibling(s) by name and link them; when it's +empty (standalone primitives like Badge/Divider), **When not to use:** states the boundary without +inventing a sibling. **Reference-table contract:** Properties / Methods / Events tables are **generated from the same typed API source** as the full reference — not hand-typed. Inline tables = the core knobs for fast scanning; @@ -162,17 +184,33 @@ hand-write or invent rows:** emit the fixed column headers (`name · type · def single build-injection note, and leave the row values to the generator. Inventing a plausible property or event name is exactly the failure this contract exists to prevent. -**Usage coverage contract:** begin with `### Basic Declaration`, then use property-focused -sub-sections to demonstrate every public input. Prefer one sub-section per standalone property; group +**Usage coverage contract:** use property-focused sub-sections to demonstrate every public input. +Prefer one sub-section per standalone property; group properties only when they are inseparable in real use or define a shared precedence/behavior. Each sub-section should include a minimal, copyable snippet for every platform it affects. Add a `` only when the demo path is verified and the visual result teaches something the snippet alone does not. -**Live-sample contract:** exactly one top preview; add Usage samples only for distinct, +**Indigo.Design Usage suggestions:** for every component topic, inspect the matching Indigo.Design +component documentation under `https://www.infragistics.com/products/indigo-design/help/components/` +before finalizing or auditing the **Usage** structure. Extract the Indigo.Design component outline +(typically the H2/H3 sections after the demo) and map it to Ignite UI by **meaning**, not by exact +heading text. A section named `Image` may become `Media`; `Card Layout` may become `Layout`; +`Item Content Template` may become `Content`; and a Figma-only `Areas` section may belong in +**Anatomy** instead of **Usage**. Keep useful existing Usage subsections, then suggest or add missing +subsections only when the Indigo.Design section corresponds to a real Ignite UI API, slot, state, +layout pattern, or verified sample. Do not copy Figma-only implementation details into runtime docs; +translate them into the closest verified Ignite UI behavior, or leave them as suggestion-level notes. +If the Indigo.Design topic or asset cannot be reached, state that limitation and continue from the +verified Ignite UI API/source. + +**Live Demo contract:** every component topic has a `## Live Demo` section immediately after the +intro and before **Anatomy**. It contains exactly one top preview `` of the simplest useful +state so the page table of contents exposes the demo as a navigable section. Do not leave the top +sample as a bare block between the intro and Anatomy. Add Usage samples only for distinct, user-facing tasks or property-focused behaviors (selection, editing, sorting, validation, -templating, styling, shape, content, sizing). Soft max **10 samples/page**; up to 10 is fine, and -only clear sprawl past that warrants splitting into focused topics. +templating, styling, shape, content, sizing). Soft max **5 samples/page**; up to 5 is fine, and only +clear sprawl past that warrants splitting into focused topics. ### `` configuration — pick the props deliberately @@ -199,7 +237,7 @@ Choose the display config from **what the sample is showing**, not by habit: | `lob` / `dv` / `crm` | default base | The demo lives in the LOB, Data-Viz, or CRM demos app rather than the default — **verify before setting**. | Defaults are right for most Usage samples: ``. Reach for the extra props -only when the component type calls for it — the top preview and standard task demos keep the code tabs (no +only when the component type calls for it — the `## Live Demo` preview and standard task demos keep the code tabs (no `iframeOnly`); the **Styling** section still opens with a styled-result ``, using `iframeOnly` only when its styling isn't shown as copyable code. diff --git a/.ai/skills/igniteui-topic-frontmatter/SKILL.md b/.ai/skills/igniteui-topic-frontmatter/SKILL.md new file mode 100644 index 0000000000..11ab3566a3 --- /dev/null +++ b/.ai/skills/igniteui-topic-frontmatter/SKILL.md @@ -0,0 +1,160 @@ +--- +name: igniteui-topic-frontmatter +description: >- + Audit and normalize YAML frontmatter metadata for Ignite UI MDX documentation topics. Use when a + task mentions frontmatter, SEO titles, meta descriptions, llms.description, keywords, canonical + links, relatedComponents, mentionedTypes, license, metadata uniformity, or AI-readable page + identity in Ignite UI Angular or xplat documentation topics. This skill is strictly + frontmatter-only: audit first and provide suggestions for the user to choose from before changing + anything; never edit topic body content, headings, prose, samples, code snippets, links, tables, or + section structure. +--- + +# Ignite UI topic frontmatter + +Audit Ignite UI documentation topic frontmatter so pages have modern, uniform metadata for SEO, +generated schema, and LLM-readable manifests without touching the topic body. + +## Scope + +Only inspect and discuss the YAML frontmatter block between the opening and closing `---`. + +Do not edit or rewrite: + +- H1/H2/H3 headings +- intro paragraphs or body prose +- samples, code snippets, API tables, or links outside frontmatter +- section order or topic structure + +If a metadata issue depends on body content, cite the body content only as evidence and suggest a +frontmatter change. Leave the body unchanged. + +## Operating mode + +This skill is **audit-first**. + +1. Read the topic's frontmatter. +2. Audit it against the rules below. +3. Return categorized findings and concrete replacement suggestions. +4. Stop. Do not edit the file until the user explicitly selects what to change. + +When the user later asks to apply selected suggestions, edit only the frontmatter fields involved in +those selected suggestions. + +## Doc sets + +- Angular topics live under `docs/angular/src/content//components/`. +- xplat topics live under `docs/xplat/src/content//components/` and may use tokens such as + `{Platform}`, `{ProductName}`, `{ComponentTitle}`, and `{ComponentKeywords}`. + +Keep valid platform tokens in xplat frontmatter. Do not replace them with a single concrete +framework name unless the topic itself is framework-specific. + +For xplat component metadata, avoid repeating the framework identity in the same field. The xplat +site layout already appends the resolved product name to the HTML title, so use +`title: "{ComponentTitle}"` and do not add `| {ProductName}` in topic frontmatter. Use `{ProductName}` in +`description` and `llms.description` when the resolved product name identifies the platform, and use +`{Platform}` in `keywords` or when the field genuinely needs the shorter platform label. + +## Expected fields + +Common fields: + +```yaml +--- +title: "..." +description: "..." +keywords: "..." +license: MIT +last_updated: "YYYY-MM-DD" +llms: + description: "..." +--- +``` + +Additional fields when relevant: + +```yaml +mentionedTypes: ["ComponentType"] +relatedComponents: [SiblingComponent] +_canonicalLink: "{environment:dvUrl}/components/..." +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 3 +``` + +The xplat component topic standard requires `last_updated`. Other optional fields should be +recommended only when the topic type or existing repo pattern warrants them. + +## Audit rules + +### Required quality checks + +- **Title:** present, concise, and topic-specific. All component topics use + `title: "{ComponentTitle}"` because the xplat site layout appends the resolved product name to the + HTML title. Do not add a framework-specific product suffix or duplicate the framework/platform in + the component phrase. Avoid "complete guide", "ultimate guide", + "try for free", and other marketing phrases. +- **Description:** present, about 140-160 characters when practical, answer-first, and specific + enough to stand alone in search results and generated schema. Avoid marketing calls to action. +- **`llms.description`:** present and more answer-shaped than the meta description. It should be a + single self-contained sentence that says what the topic/component is and what it helps developers + do. Prefer this over keyword stuffing. +- **Framework/package clarity:** frontmatter must not blur Angular, React, Web Components, and + Blazor APIs. Angular topics should identify Ignite UI for Angular when needed. xplat topics should + use `{Platform}` / `{ProductName}` tokens instead of hard-coded single-framework wording. +- **`license`:** present when the topic belongs to a doc set that uses license frontmatter. +- **`mentionedTypes`:** xplat component topics should list the concrete API types linked or + discussed by the page. Do not invent API type names; if unsure, flag as a verification issue. +- **`relatedComponents`:** recommend only for close sibling components that should affect Do/Don't + guidance. Do not add generic category neighbors just to fill the field. +- **`keywords`:** treat as legacy/internal metadata, not an SEO optimization surface. Keep it + coherent if present, but do not spend effort keyword-stuffing. If the repo later drops `keywords`, + remove it only when the user asks or a repo-level policy exists. +- **`_canonicalLink`:** do not invent. Flag inconsistent or suspicious canonical links, but require + an explicit canonical policy or nearby precedent before suggesting a replacement. +- **`last_updated`:** required for component topics. Use the `YYYY-MM-DD` format and keep the value + maintained by the topic workflow or another clear source of truth. + +### Severity + +- **Error:** missing required frontmatter for the doc set, malformed YAML, or metadata that clearly + misidentifies the component/framework. +- **Warning:** weak, inconsistent, misleading, too-long, or marketing-heavy metadata. +- **Suggestion:** polish, consistency improvements, optional fields, or policy-dependent changes. + +## Report format + +Use this shape: + +```md +# Frontmatter Audit: + +**Verdict:** +**Summary:** <1-2 sentences about the highest-value metadata fixes.> + +## Findings +### · +- **Field:** `` +- **Issue:** +- **Suggestion:** + +## Suggested Frontmatter Changes +| Field | Current | Suggested | Reason | +|---|---|---|---| +| `description` | ... | ... | ... | + +No file changes were made. Tell me which suggestions to apply. +``` + +If there are no issues, say that the frontmatter conforms and do not invent changes. + +## Applying selected suggestions + +When the user explicitly asks to apply one or more suggestions: + +1. Re-read the file. +2. Modify only the YAML frontmatter block. +3. Preserve unrelated frontmatter fields and field order where practical. +4. Do not edit body content after the closing `---`. +5. Run a focused diff check when available. diff --git a/.claude/skills/igniteui-topic-frontmatter/SKILL.md b/.claude/skills/igniteui-topic-frontmatter/SKILL.md new file mode 100644 index 0000000000..cdbdaa626a --- /dev/null +++ b/.claude/skills/igniteui-topic-frontmatter/SKILL.md @@ -0,0 +1,22 @@ +--- +name: igniteui-topic-frontmatter +description: >- + Audit and normalize YAML frontmatter metadata for Ignite UI MDX documentation topics. Use when a + task mentions frontmatter, SEO titles, meta descriptions, llms.description, keywords, canonical + links, relatedComponents, mentionedTypes, license, metadata uniformity, or AI-readable page + identity in Ignite UI Angular or xplat documentation topics. This skill is strictly + frontmatter-only: audit first and provide suggestions for the user to choose from before changing + anything; never edit topic body content, headings, prose, samples, code snippets, links, tables, or + section structure. +--- + +# Ignite UI topic frontmatter adapter + +This is a Claude adapter for the canonical repo-local skill. + +Before doing any task actions, read and follow the canonical skill at: + +`../../../.ai/skills/igniteui-topic-frontmatter/SKILL.md` + +Do not treat this adapter as a separate source of rules. If this adapter conflicts with the canonical +skill, the canonical `.ai` skill wins. diff --git a/.codex/skills/igniteui-topic-frontmatter/SKILL.md b/.codex/skills/igniteui-topic-frontmatter/SKILL.md new file mode 100644 index 0000000000..1420e738cc --- /dev/null +++ b/.codex/skills/igniteui-topic-frontmatter/SKILL.md @@ -0,0 +1,22 @@ +--- +name: igniteui-topic-frontmatter +description: >- + Audit and normalize YAML frontmatter metadata for Ignite UI MDX documentation topics. Use when a + task mentions frontmatter, SEO titles, meta descriptions, llms.description, keywords, canonical + links, relatedComponents, mentionedTypes, license, metadata uniformity, or AI-readable page + identity in Ignite UI Angular or xplat documentation topics. This skill is strictly + frontmatter-only: audit first and provide suggestions for the user to choose from before changing + anything; never edit topic body content, headings, prose, samples, code snippets, links, tables, or + section structure. +--- + +# Ignite UI topic frontmatter adapter + +This is a Codex adapter for the canonical repo-local skill. + +Before doing any task actions, read and follow the canonical skill at: + +`../../../.ai/skills/igniteui-topic-frontmatter/SKILL.md` + +Do not treat this adapter as a separate source of rules. If this adapter conflicts with the canonical +skill, the canonical `.ai` skill wins. diff --git a/.github/README.md b/.github/AW-README.md similarity index 100% rename from .github/README.md rename to .github/AW-README.md diff --git a/docs/angular/src/content/jp/components/stepper.mdx b/docs/angular/src/content/jp/components/stepper.mdx index aa1c90be09..0776563843 100644 --- a/docs/angular/src/content/jp/components/stepper.mdx +++ b/docs/angular/src/content/jp/components/stepper.mdx @@ -101,8 +101,6 @@ Angular Stepper モジュールまたはディレクティブをインポート ステップは、以下の方法のいずれかを使用して宣言できます。 - データセットの繰り返し -- 静的ステップの作成 - ```html @@ -122,7 +120,7 @@ Angular Stepper モジュールまたはディレクティブをインポート このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `` -各ステップで、`igxStepIndicator`、`igxStepTitle`、`igxStepSubtitle`、および `igxStepContent` ディレクティブを使用してインジケーター、タイトル、サブタイトル、コンテンツを構成できます。 +- 静的ステップの作成 ```html @@ -135,7 +133,7 @@ Angular Stepper モジュールまたはディレクティブをインポート ``` -For each step the user has the ability to configure indicator, title, subtitle and content using the `igxStepIndicator`, `igxStepTitle`, `igxStepSubtitle` and `igxStepContent` directives as follows: +各ステップで、`igxStepIndicator`、`igxStepTitle`、`igxStepSubtitle`、および `igxStepContent` ディレクティブを使用してインジケーター、タイトル、サブタイトル、コンテンツを構成できます。 ```html @@ -196,9 +194,6 @@ For each step the user has the ability to configure indicator, title, subtitle a は、双方向バインド可能な プロパティで各ステップの検証ロジックを設定できます。その値に基づいて、ユーザーがリニア ステッパー モードで前に進むことができるかどうかが決定されます。 デフォルトで、ステップの プロパティは `true` に設定されます。 -The gives you the opportunity to set validation logic for each step through the two-way bindable property. Based on its value it is decided whether the user will have the ability to move forward in linear stepper mode. -By default, the property of a step is set to `true`. - ### リニア ステッパー `igx-stepper` は、 プロパティを使用してステップ フローを設定できます。デフォルトで、linear は `false` に設定され、ユーザーは で無効にされていないステップを選択できます。 @@ -229,10 +224,6 @@ By default, the propert reset メソッドはステップの内容をクリアしません。これは手動で行う必要があります。 - -The reset method would not clear the step`s content. This should be done manually. - - ### ステップのカスタマイズ Ignite UI for Angular Stepper では、タイトル、インジケーターなどのさまざまなオプションを構成できます。 @@ -279,17 +270,11 @@ Ignite UI for Angular Stepper では、タイトル、インジケーターな 以下のサンプルは公開されたすべてのステップ タイプと変更方法を示しています。 - では、アクティブなステップ、無効なステップ、完了したステップの描画されたインジケーターをカスタマイズできます。これは、`igxStepActiveIndicator`、`igxStepInvalidIndicator`、および `igxStepCompletedIndicator` ディレクティブで実現できます。 - - -このテンプレートは、関連する状態のすべてのステップに適用されます。 - -
-The also allows you to customize the rendered indicators for active, invalid and completed steps. This could be achieved through the `igxStepActiveIndicator`, `igxStepInvalidIndicator` and `igxStepCompletedIndicator` directives: + では、アクティブなステップ、無効なステップ、完了したステップの描画されたインジケーターをカスタマイズできます。これは、`igxStepActiveIndicator`、`igxStepInvalidIndicator`、および `igxStepCompletedIndicator` ディレクティブで実現できます。 ```html @@ -309,9 +294,10 @@ The also allows you to customize the rendered indicat ``` -This templates would be applied for all steps with the relevant state. +このテンプレートは、関連する状態のすべてのステップに適用されます。 + ### Angular Stepper のアニメーション Angular Stepper のアニメーションにより、エンドユーザーは定義されたステッをプ操作しているときに高いエクスペリエンスを得ることができます。使用可能なアニメーション オプションは、ステッパーの向きによって異なります。 diff --git a/docs/xplat/src/content/en/components/grid-lite/overview.mdx b/docs/xplat/src/content/en/components/grid-lite/overview.mdx index 7566dbe956..74350fb16c 100644 --- a/docs/xplat/src/content/en/components/grid-lite/overview.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/overview.mdx @@ -174,7 +174,7 @@ dotnet add package IgniteUI.Blazor.GridLite 3 - Add the Grid Lite component to your razor page: ```razor - + @code { diff --git a/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx index 6a33d3d418..64d12980b3 100644 --- a/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx +++ b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx @@ -4,6 +4,7 @@ description: "Ignite UI CLI MCP を AI クライアントに接続して、{Prod keywords: "{Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, エージェント, GitHub Copilot, Cursor, Claude, JetBrains" license: MIT _canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" +_language: ja mentionedTypes: [] llms: description: "Ignite UI CLI MCP は、AI アシスタントが {ProductName} アプリケーションのプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問に回答できるようにする Model Context Protocol (MCP) サーバーです。" diff --git a/docs/xplat/src/content/jp/components/ai/skills.mdx b/docs/xplat/src/content/jp/components/ai/skills.mdx index 9dc8a240ee..2eb61f336a 100644 --- a/docs/xplat/src/content/jp/components/ai/skills.mdx +++ b/docs/xplat/src/content/jp/components/ai/skills.mdx @@ -4,6 +4,8 @@ description: "エージェント スキルを使用して、{ProductName} コン keywords: "{ProductName}, エージェント スキル, AI 支援開発, github copilot, cursor, windsurf, claude, gemini cli, junie" license: MIT mentionedTypes: [] +last_updated: "2026-04-24" +_language: ja llms: description: "{ProductName} には エージェント スキル が付属しています。" --- @@ -30,6 +32,7 @@ AI ツールのランドスケープは急速に進化しています。スキ | プラットフォーム統合 | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.mdx) | ユーザーが選択したプラットフォームへのコンポーネントの統合を支援 | | テーマ設定とスタイル設定 | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.mdx) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | | 最適化 | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.mdx) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス | +| 画像デザインからの生成 | [`skills/igniteui-wc-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-generate-from-image-design/SKILL.mdx) | スクリーンショット、モックアップ、ワイヤーフレームから Ignite UI コンポーネントを使用した Web Components アプリを構築 | @@ -40,6 +43,7 @@ AI ツールのランドスケープは急速に進化しています。スキ | コンポーネント | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.mdx) | 適切なコンポーネントの特定、インストール、インポート、使用 — JSX パターン、イベント処理、refs、フォーム、TypeScript | | テーマ設定とスタイル設定 | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.mdx) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | | 最適化 | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.mdx) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス | +| 画像デザインからの生成 | [`skills/igniteui-react-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-generate-from-image-design/SKILL.mdx) | スクリーンショット、モックアップ、ワイヤーフレームから Ignite UI コンポーネントを使用した React アプリを構築 | @@ -50,6 +54,7 @@ AI ツールのランドスケープは急速に進化しています。スキ | コンポーネントとレイアウト | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.mdx) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト | | データ グリッド | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.mdx) | Grid、Tree Grid、Hierarchical Grid、Pivot Grid、ソート、フィルタリング、グループ化、ページング、リモート データ | | テーマ設定とスタイル設定 | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.mdx) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | +| 画像デザインからの生成 | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.mdx) | スクリーンショット、モックアップ、ワイヤーフレームから Ignite UI コンポーネントを使用した Angular アプリを構築 | {ProductName} **21.1.0** 以降、これらのスキルはエージェントのスキル パス (例: `.claude/skills`、`.agents/skills`、`.cursor/rules/`) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。 @@ -57,6 +62,17 @@ AI ツールのランドスケープは急速に進化しています。スキ + + +| スキル | パス | 説明 | +|:------|:-----|:------------| +| コンポーネントとレイアウト | [`skills/igniteui-blazor-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-components/SKILL.mdx) | コンポーネント、フォーム コントロール、オーバーレイ、レイアウト | +| データ グリッド | [`skills/igniteui-blazor-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-grids/SKILL.mdx) | Grid、Tree Grid、Hierarchical Grid、Grid Lite、ソート、フィルタリング、グループ化、ページング、リモート データ | +| テーマ設定とスタイル設定 | [`skills/igniteui-blazor-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.mdx) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | +| 画像デザインからの生成 | [`skills/igniteui-blazor-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-generate-from-image-design/SKILL.mdx) | スクリーンショット、モックアップ、ワイヤーフレームから Ignite UI コンポーネントを使用した Blazor アプリを構築 | + + + ## スキルの場所 各 AI コーディング ツールは、特定のディレクトリからスキルを検出します。AI アシスタントがスキルを自動的に検出して使用できるように、スキル ファイルを適切な場所に配置します。一般的な `.agents/skills/` の規則は複数のツールでサポートされていますが、各ツールには独自の特定のディレクトリもあります。 @@ -78,6 +94,8 @@ AI ツールのランドスケープは急速に進化しています。スキ SKILL.md igniteui-wc-optimize-bundle-size/ SKILL.md + igniteui-wc-generate-from-image-design/ + SKILL.md ``` @@ -93,6 +111,8 @@ AI ツールのランドスケープは急速に進化しています。スキ SKILL.md igniteui-react-optimize-bundle-size/ SKILL.md + igniteui-react-generate-from-image-design/ + SKILL.md ``` @@ -108,6 +128,25 @@ AI ツールのランドスケープは急速に進化しています。スキ SKILL.md igniteui-angular-theming/ SKILL.md + igniteui-angular-generate-from-image-design/ + SKILL.md +``` + + + + + +``` +.agents/ + skills/ + igniteui-blazor-components/ + SKILL.md + igniteui-blazor-grids/ + SKILL.md + igniteui-blazor-theming/ + SKILL.md + igniteui-blazor-generate-from-image-design/ + SKILL.md ``` @@ -178,9 +217,49 @@ AI ツールのランドスケープは急速に進化しています。スキ 以下のオプションのいずれかを使用して、スキル ファイルをダウンロードし、AI アシスタントに適した[スキルの場所](#スキルの場所)に配置します。 -### **オプション A — インストールされた npm パッケージを使用する** +### **オプション A — Ignite UI CLI を使用する** + +`ai-config` コマンドは、MCP サーバーの構成、フレームワーク固有のスキル ファイルを各エージェントのスキル ディレクトリへのコピー、および指示ファイルの設定をすべて 1 つの手順で完了します。`--assistants` で MCP 構成を受け取るコーディング アシスタントを選択し、`--agents` でスキル ファイルを受け取るエージェントを選択します。既存のファイルは、コンテンツが変更された場合のみ更新されます。パラメーターが指定されていない場合、コマンドはインタラクティブ モードになり、アシスタントとエージェントを選択するよう求めます。利用可能なオプションについては、以下のテーブルを参照してください。 + +```bash +ig ai-config --assistants generic --agents claude +``` + +`--agents` に複数の値を指定することで、複数のエージェントを同時に対象にすることもできます: + +```bash +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| フラグ | 値 | デフォルト | +|------|--------|---------| +| `--assistants` | `generic`、`vscode`、`cursor`、`gemini`、`junie`、`none` | インタラクティブに選択 | +| `--agents` | `generic`、`claude`、`copilot`、`cursor`、`codex`、`windsurf`、`gemini`、`junie`、`none` | インタラクティブに選択 | + + + +Blazor の場合、`ai-config` は `.csproj` または `.sln` からプロジェクトを検出します。`IgniteUI.Blazor` NuGet パッケージはインストールされている必要はありません。プロジェクト ファイルが見つからない場合、コマンドがフレームワークの選択を求めます。 + + + + + +**Angular Schematics を使用する:** + +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot +``` + +これにより、Ignite UI サーバーに加えて `@angular/cli` の MCP サーバーも登録されます。 + + + -{ProductName} がプロジェクトに既にインストールされている場合、スキル ファイルは `node_modules` の下で利用できます。それらをプロジェクトにコピーする (例: `.agents/skills/` の下での使用) には、次のコマンドを実行します: + + + +{ProductName} を手動でインストールし、`ai-config` を実行せずにスキルをコピーしたい場合、スキル ファイルは `node_modules` の下でも利用できます。それらをプロジェクトにコピーする (例: `.agents/skills/` の下での使用) には、次のコマンドを実行してください: + **macOS / Linux / Windows (PowerShell)** @@ -205,6 +284,7 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-choose-components .agents/ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-customize-component-theme .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-optimize-bundle-size .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-generate-from-image-design .agents/skills/ ``` @@ -215,6 +295,7 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework . cp -r node_modules/{PackageCommon}/skills/igniteui-react-components .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-react-customize-theme .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-generate-from-image-design .agents/skills/ ``` @@ -225,6 +306,7 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .a cp -r node_modules/{PackageCommon}/skills/igniteui-angular-components .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-angular-grids .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-angular-theming .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-generate-from-image-design .agents/skills/ ``` @@ -238,6 +320,7 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-wc-choose-components .agen robocopy node_modules\{PackageCommon}\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E robocopy node_modules\{PackageCommon}\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-generate-from-image-design .agents\skills\igniteui-wc-generate-from-image-design /E ``` @@ -248,6 +331,7 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framewor robocopy node_modules\{PackageCommon}\skills\igniteui-react-components .agents\skills\igniteui-react-components /E robocopy node_modules\{PackageCommon}\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-generate-from-image-design .agents\skills\igniteui-react-generate-from-image-design /E ``` @@ -258,11 +342,86 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size robocopy node_modules\{PackageCommon}\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E robocopy node_modules\{PackageCommon}\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E ``` -### **オプション B — `gemini skills` CLI を使用する** + + +### **オプション B — `GitHub CLI` を使用する** + +GitHub CLI を使用すると、{ProductName} リポジトリからスキル ファイルを直接ダウンロードできます。インストール を開始するには、プロジェクト ルートで次のコマンドを実行してください: + + + +```bash +gh skill install IgniteUI/igniteui-angular +``` + + + + + +```bash +gh skill install IgniteUI/igniteui-webcomponents +``` + + + + + +```bash +gh skill install IgniteUI/igniteui-react +``` + + + + + +```bash +gh skill install IgniteUI/igniteui-blazor +``` + + + +インストール時に、どのスキルをインストールするか、およびプロジェクト内のスキル ファイルの対象 エージェントを選択するよう求められます。CLI は選択したエージェントに応じて選択したスキルをダウンロードして所定の場所へ配置します。 + +後でスキルを更新するには、次のコマンドを実行してください: + + + +```bash +gh skill update IgniteUI/igniteui-angular +``` + + + + + +```bash +gh skill update IgniteUI/igniteui-webcomponents +``` + + + + + +```bash +gh skill update IgniteUI/igniteui-react +``` + + + + + +```bash +gh skill update IgniteUI/igniteui-blazor +``` + + + +### **オプション C — `gemini skills` CLI を使用する** `gemini skills install` コマンドは、Git リポジトリから直接スキルをインストールします。2 つのスコープをサポートします: @@ -278,6 +437,7 @@ gemini skills install {GithubLink}.git --path skills/igniteui-wc-choose-componen gemini skills install {GithubLink}.git --path skills/igniteui-wc-customize-component-theme gemini skills install {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size gemini skills install {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework +gemini skills install {GithubLink}.git --path skills/igniteui-wc-generate-from-image-design ``` @@ -288,6 +448,7 @@ gemini skills install {GithubLink}.git --path skills/igniteui-wc-integrate-with- gemini skills install {GithubLink}.git --path skills/igniteui-react-components gemini skills install {GithubLink}.git --path skills/igniteui-react-customize-theme gemini skills install {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +gemini skills install {GithubLink}.git --path skills/igniteui-react-generate-from-image-design ``` @@ -298,6 +459,18 @@ gemini skills install {GithubLink}.git --path skills/igniteui-react-optimize-bun gemini skills install {GithubLink}.git --path skills/igniteui-angular-components gemini skills install {GithubLink}.git --path skills/igniteui-angular-grids gemini skills install {GithubLink}.git --path skills/igniteui-angular-theming +gemini skills install {GithubLink}.git --path skills/igniteui-angular-generate-from-image-design +``` + + + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-components +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-grids +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-theming +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-generate-from-image-design ``` @@ -311,6 +484,7 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-customize-component-theme gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-generate-from-image-design ``` @@ -321,6 +495,7 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-components gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-customize-theme gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-generate-from-image-design ``` @@ -331,20 +506,44 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-components gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-grids gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-theming +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-generate-from-image-design +``` + + + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-grids +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-theming +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-generate-from-image-design ``` インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。 -### **オプション C — `npx skills` CLI を使用する** +### **オプション D — `npx skills` CLI を使用する** `skills` CLI は、スキルをプロジェクトに直接ダウンロードしてインストールするインタラクティブなツールです。プロジェクト ルートで次のコマンドを実行します: -```shell + + +```bash npx skills add IgniteUI/{PackageCommon} ``` + + + + +```bash +npx skills add IgniteUI/igniteui-blazor +``` + + + CLI は、一連のプロンプトをガイドします: 1. インストールするスキルを選択します (components、theming など)。 @@ -353,7 +552,13 @@ CLI は、一連のプロンプトをガイドします: 完了すると、スキルはすぐに使用できます。手動でファイルをコピーする必要はありません。 + > **注:** Node.js とインターネット接続が必要です。コマンドは、[IgniteUI/{PackageCommon}]({GithubLink}) リポジトリから最新のスキル ファイルを取得します。 + + + +> **注:** Node.js とインターネット接続が必要です。コマンドは、[IgniteUI/igniteui-blazor]({GithubLink}) リポジトリから最新のスキル ファイルを取得します。 + --- @@ -373,7 +578,13 @@ CLI は、一連のプロンプトをガイドします: -**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.mdx)を参照してください。 +**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、パレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールに AI アシスタントがアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.mdx)を参照してください。 + + + + + +**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.mdx)を参照してください。 @@ -382,8 +593,10 @@ Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.mdx ## その他のリソース - + - [{ProductName} で作業を開始](../general-getting-started.mdx) + + - [Ignite UI CLI](../general-cli-overview.mdx) diff --git a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx index 8d374d2d8b..949ca2c730 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx @@ -162,7 +162,7 @@ dotnet add package IgniteUI.Blazor.GridLite 3 - Grid Lite コンポーネントを razor ページに追加します。 ```razor - + @code { diff --git a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx index f6d115fe01..b591a4d9a3 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx @@ -24,17 +24,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - デフォルトで、 は独自のロジックを使用してデータ操作を実行します。 +これらのタスクをリモートで実行し、 によって公開される特定の入力とイベントを利用することで、結果として得られたデータを にフィードできます。 + -## Remote Virtualization +## リモート仮想化 -The supports the scenario in which the data chunks are requested from a remote service, exposing the behavior implemented in the `ForOf` directive it uses internally. + は、データ チャンクがリモート サービスから要求されるシナリオをサポートし、内部で使用される `ForOf` ディレクティブで実装された動作を公開します。 -To utilize this feature, you need to subscribe to the output so that you make the appropriate request based on the arguments received, as well as set the public property with the respective information coming from the service. +この機能を使用するには、取得した引数に基づいて適切な要求を実行できるように 出力にサブスクライブし、サービスから送信される該当情報とともにパブリック プロパティ を設定する必要があります。 ```html -When requesting data, you need to utilize the interface, which provides the and properties. +データを要求する際には、 インターフェイスを利用する必要があります。このインターフェイスは、 および プロパティを提供します。 -The first will always be 0 and should be determined by you based on the specific application scenario. +最初の は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。 @@ -85,68 +85,97 @@ The first will always be 0 and -### Remote Virtualization Demo +### リモート仮想化のデモ {/*NOTE: this sample is differed*/} - + -## リモート仮想化 - は、データ チャンクがリモート サービスから要求されるシナリオをサポートし、内部で使用される `ForOf` ディレクティブで実装された動作を公開します。 +## 無限スクロール -この機能を使用するには、取得した引数に基づいて適切な要求を実行するために `DataPreLoad` 出力にサブスクライブし、サービスから送信される相対する情報とパブリック `{ComponentName}` の `TotalItemCount` プロパティを設定する必要があります。 + エンドポイントからデータを分割して取得するシナリオの一般的な設計は、無限スクロールです。データ グリッドの場合、エンドユーザーが一番下までスクロールするたびに追加のデータが読み込まれ、表示されるデータが継続的に増えていくのが特徴です。次の段落では、使用可能な API を使用して で無限スクロールを簡単に実現する方法について説明します。 -データを要求する際に および プロパティを提供する `IForOfState` インターフェイスを使用できます。 +無限スクロールを実装するには、データをチャンク単位で取得する必要があります。既に取得したデータはローカルに保存し、チャンクの長さといくつのチャンクがあるかを判断する必要があります。また、グリッドで最後に表示されているデータ行のインデックスを追跡しておく必要があります。これにより、 と プロパティを使用して、ユーザーが上にスクロールして既に取得済みのデータを表示する必要があるか、下にスクロールしてエンドポイントからさらにデータを取得する必要があるかを判断できます。 - -```html - - - - - -``` - - + +最初に、データの最初のチャンクを取得します。 プロパティを設定することは、グリッドがスクロールバーのサイズを正しく設定できるようにするために重要です。 + + ```typescript public ngAfterViewInit() { - this.grid.isLoading = true; - - this._remoteService.getData(this.grid.virtualizationState, this.grid.sortingExpressions[0], true, (data) => { - this.grid.totalItemCount = data['@odata.count']; + this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { + if (request.data) { + this.grid.totalItemCount = this.page * this.pageSize; + this.grid.data = this._remoteService.getCachedData({startIndex: 0, chunkSize: 10}); + this.totalItems = request.data['@odata.count']; + this.totalPageCount = Math.ceil(this.totalItems / this.pageSize); this.grid.isLoading = false; + } }); } +``` -public processData(reset) { - if (this.prevRequest) { - this.prevRequest.unsubscribe(); - } + - this._prevRequest = this._remoteService.getData(this.grid.virtualizationState, - this.grid.sortingExpressions[0], reset, () => { - this.cdr.detectChanges(); - }); + +```razor +@code { + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + var grid = this.grid; + grid.IsLoading = true; + double dataViewSize = 480.0 / 50.0; + this.PageSize = Convert.ToInt32(Math.Floor(dataViewSize * 1.5)); + var data = await GetDataRemote(1, this.PageSize); + this.CachedData = data; + this.LocalData = this.CachedData; + grid.TotalItemCount = (this.PageSize * this.Page) + 1; + double pageCount = Math.Ceiling((double)this.TotalItems / (double)this.PageSize); + this.TotalPageCount = (int)pageCount; + grid.IsLoading = false; + StateHasChanged(); + } + + } } ``` - -最初の は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。 - +さらに、 出力にサブスクライブする必要があります。これにより、グリッドが現在読み込まれているチャンクとは異なるチャンクを表示しようとする際に必要なデータを提供できます。イベント ハンドラーでは、新しいデータを取得するか、既にローカルにキャッシュされているデータを返すかを判断する必要があります。 -```razor -BLAZOR CODE SNIPPET HERE +```typescript +public handlePreLoad() { + const isLastChunk = this.grid.totalItemCount === + this.grid.virtualizationState.startIndex + this.grid.virtualizationState.chunkSize; + // when last chunk reached load another page of data + if (isLastChunk) { + if (this.totalPageCount === this.page) { + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + return; + } + this.page++; + this.grid.isLoading = true; + this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { + if (request.data) { + this.grid.totalItemCount = Math.min(this.page * this.pageSize, this.totalItems); + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + this.grid.isLoading = false; + } + }); + } else { + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + } +} ``` @@ -231,27 +260,39 @@ BLAZOR CODE SNIPPET HERE ``` -### リモートの仮想化デモ +### 無限スクロールのデモ -## 無限スクロール +## リモート ソート/フィルタリング - エンドポイントからデータを分割して取得するシナリオの一般的なデザインは、無限スクロールです。データ グリッドの場合、エンドユーザーが一番下までスクロールすることによってトリガーされたロードデータが連続的に増加します。次の段落では、使用可能な API を使用して で無限スクロールを簡単に実現する方法について説明します。 +リモート ソートおよびフィルタリングを提供するには、受け取った引数に基づいて適切な要求を行うために 、、および 出力にサブスクライブし、サービスから送信される該当情報とともにパブリック プロパティ を設定する必要があります。 -無限スクロールを実装するには、データを分割してフェッチする必要があります。すでにフェッチされたデータはローカルに保存し、チャンクの長さおよび数を決定する必要があります。また、グリッドで最後に表示されるデータ行インデックスを追跡する必要があります。このように、 と プロパティを使用して、ユーザーが上にスクロールして既にフェッチしたデータを表示するか、下にスクロールしてエンドポイントからさらにデータをフェッチする必要があるかを決定できます。 +また、**rxjs** `debounceTime` 関数を使用します。この関数は、特定の期間の経過後、別のソースが出力されない場合にのみ、Observable のソースから値を出力します。この方法では、ユーザーが中断することなく指定された時間が経過した場合にのみ、リモート操作がトリガーされます。 ```typescript +const DEBOUNCE_TIME = 300; public ngAfterViewInit() { - this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { - if (request.data) { - this.grid.totalItemCount = this.page * this.pageSize; - this.grid.data = this._remoteService.getCachedData({startIndex: 0, chunkSize: 10}); - this.totalItems = request.data['@odata.count']; - this.totalPageCount = Math.ceil(this.totalItems / this.pageSize); - this.grid.isLoading = false; - } + this.grid.dataPreLoad.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); + }); + + this.grid.filteringExpressionsTreeChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(true); + }); + + this.grid.sortingExpressionsChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); }); } ``` @@ -262,55 +303,19 @@ BLAZOR CODE SNIPPET HERE ``` -最初に、データの最初のチャンクをフェッチします。`TotalItemCount` プロパティはグリッドがスクロールバーのサイズを正しく設定できるようにするために重要です。 +リモート ソートおよびフィルタリングが提供される場合、通常はグリッドに組み込まれているソートおよびフィルタリングは必要ありません。グリッドの および 入力を、それぞれ および のインスタンスに設定することで無効にできます。 -```razor -@code { - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - var grid = this.grid; - grid.IsLoading = true; - double dataViewSize = 480.0 / 50.0; - this.PageSize = Convert.ToInt32(Math.Floor(dataViewSize * 1.5)); - var data = await GetDataRemote(1, this.PageSize); - this.CachedData = data; - this.LocalData = this.CachedData; - grid.TotalItemCount = (this.PageSize * this.Page) + 1; - double pageCount = Math.Ceiling((double)this.TotalItems / (double)this.PageSize); - this.TotalPageCount = (int)pageCount; - grid.IsLoading = false; - StateHasChanged(); - } - - } -} +```html + + ``` ```typescript -public handlePreLoad() { - const isLastChunk = this.grid.totalItemCount === - this.grid.virtualizationState.startIndex + this.grid.virtualizationState.chunkSize; - // when last chunk reached load another page of data - if (isLastChunk) { - if (this.totalPageCount === this.page) { - this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); - return; - } - this.page++; - this.grid.isLoading = true; - this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { - if (request.data) { - this.grid.totalItemCount = Math.min(this.page * this.pageSize, this.totalItems); - this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); - this.grid.isLoading = false; - } - }); - } else { - this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); - } -} +public noopFilterStrategy = NoopFilteringStrategy.instance(); +public noopSortStrategy = NoopSortingStrategy.instance(); ``` @@ -319,39 +324,27 @@ BLAZOR CODE SNIPPET HERE ``` -さらに、`DataPreLoad` 出力にサブスクライブする必要があります。これにより、グリッドが現在ロードされているものではなく、異なるチャンクを表示しようとするときに必要なデータを提供できます。イベント ハンドラーで、ローカルに既にキャッシュされている新しいデータをフェッチするか、データを返すかを決定する必要があります。 + +リモート データが要求される場合、フィルタリング操作は大文字と小文字を区別します。 + -### 無限スクロールのデモ +### リモート ソート/フィルタリングのデモ -You can see the result of the code from above at the beginning of this article in the Demo section. +このトピックのはじめにあるコードの結果は、デモで確認できます。 -### リモート ソート/フィルタリング +### リモート フィルタリング -リモート ソートおよびフィルタリングは、`DataPreLoad`、`SortingExpressionsChange`、および `FilteringExpressionsTreeChange` 出力にサブスクライブし、パブリック プロパティの `TotalItemCount` をサービスから送信される個々の情報とともに設定し、受け取った引数に基づいて適切な要求を作成します。 +リモート フィルタリングを提供するには、受け取った引数に基づいて適切な要求を行うために 出力にサブスクライブする必要があります。Tree Grid のデータソースとしてフラット コレクションを使用するために、 と `ForeignKey` を指定しましょう。 また、**rxjs** `debounceTime` 関数を使用します。この関数は、特定の期間の経過後、別のソースが出力されない場合にのみ、Observable のソースから値を出力します。この方法では、ユーザーが中断することなく指定された時間が経過した場合にのみ、リモート操作がトリガーされます。 ```typescript const DEBOUNCE_TIME = 300; public ngAfterViewInit() { - this.grid.dataPreLoad.pipe( - debounceTime(DEBOUNCE_TIME), - takeUntil(this.destroy$) - ).subscribe(() => { - this.processData(); - }); - - this.grid.filteringExpressionsTreeChange.pipe( - debounceTime(DEBOUNCE_TIME), - takeUntil(this.destroy$) - ).subscribe(() => { - this.processData(true); - }); - - this.grid.sortingExpressionsChange.pipe( + this.treeGrid.filteringExpressionsTreeChange.pipe( debounceTime(DEBOUNCE_TIME), takeUntil(this.destroy$) ).subscribe(() => { @@ -366,7 +359,7 @@ BLAZOR CODE SNIPPET HERE ``` -リモート ソートとフィルタリングが提供される場合、グリッドの組み込みのソートとフィルタリングは必要ありません。グリッドの および 入力をそれぞれのインスタンスの および に設定して、無効にできます。 +リモート フィルタリングが提供される場合、通常はツリー グリッドに組み込まれているフィルタリングは必要ありません。ツリー グリッドの 入力を のインスタンスに設定することで無効にできます。 ```html @@ -381,8 +374,18 @@ BLAZOR CODE SNIPPET HERE ``` -```razor -BLAZOR CODE SNIPPET HERE +```typescript +public noopFilterStrategy = NoopFilteringStrategy.instance(); + +public processData() { + this.treeGrid.isLoading = true; + + const filteringExpr = this.treeGrid.filteringExpressionsTree; + + this._remoteService.getData(filteringExpr, () => { + this.treeGrid.isLoading = false; + }); +} ``` @@ -391,68 +394,63 @@ BLAZOR CODE SNIPPET HERE ``` - -リモー トデータが要求された場合、フィルタリング操作が大文字と小文字を区別します。 - +リモート フィルタリングは、フラット コレクションで直接実行する必要があります。また、親がフィルターに一致するかどうかにかかわらず、フィルター条件に一致するすべてのレコードにすべての親を含める必要があります (階層をそのままにするためにこれを行います)。結果は以下で確認できます。 -When remote data is requested, the filtering operation is case-sensitive. +リモート データが要求される場合、フィルタリング操作は大文字と小文字を区別します。 -### リモート ソート/フィルタリングのデモ +### リモート フィルタリングのデモ このトピックのはじめにあるコードの結果は、デモで確認できます。 -## リモート フィルタリング - -リモート フィルタリングを提供するには、受け取った引数に基づいて適切な要求を行うように `FilteringExpressionsTreeChange` 出力にサブスクライブする必要があります。 と `ForeignKey` を提供して、Tree Grid のデータソースとしてフラット コレクションを使用します。 +## 一意の列値ストラテジー -また、**rxjs** `debounceTime` 関数を使用します。この関数は、特定の期間の経過後、別のソースが出力されない場合にのみ、Observable のソースから値を出力します。この方法では、ユーザーが中断することなく指定された時間が経過した場合にのみ、リモート操作がトリガーされます。 +Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。 は、デフォルトでデータソースに基づいてこれらの値を生成します。リモート フィルタリングの場合、グリッドのデータにはサーバーからのすべてのデータが含まれていません。これらの一意の値を手動で提供してオンデマンドで読み込むために、 の 入力を利用できます。この入力は、実際には 3 つの引数を提供するメソッドです。 -リモート フィルタリングが提供される場合、ツリー グリッドの組み込みのフィルタリングは必要ありません。ツリー グリッドの 入力を インスタンスに設定して、無効にできます。 +- - それぞれの列インスタンス。 +- - フィルタリング式ツリー。それぞれの列に基づいて絞り込まれます。 +- `Done` - サーバーから取得された新しく生成された列値を指定して呼び出す必要があるコールバック。 -リモート フィルタリングは、フラット コレクションで直接実行する必要があります。また、親がフィルターに一致するかどうかにかかわらず、フィルター条件に一致するすべてのレコードにすべての親を含める必要があります (階層をそのままにするためにこれを行います)。結果は以下で確認できます。 +開発者は、 と 引数によって提供される情報に基づいて、必要な一意の列値を手動で生成し、`Done` コールバックを呼び出すことができます。 + +`UniqueColumnValuesStrategy` 入力が指定されている場合、Excel スタイル フィルタリングにおけるデフォルトの一意の値の生成処理は使用されません。 + -```typescript -const DEBOUNCE_TIME = 300; -public ngAfterViewInit() { - this.treeGrid.filteringExpressionsTreeChange.pipe( - debounceTime(DEBOUNCE_TIME), - takeUntil(this.destroy$) - ).subscribe(() => { - this.processData(); - }); -} -``` -```razor -BLAZOR CODE SNIPPET HERE +```html + + ``` ```html - - - - + ``` +```typescript +public columnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); +} +``` + ```razor BLAZOR CODE SNIPPET HERE ``` -### リモート フィルタリングのデモ +### 一意の列値ストラテジーのデモ + + - ```html @@ -489,7 +487,7 @@ BLAZOR CODE SNIPPET HERE ``` -このトピックのはじめにあるコードの結果は、デモで確認できます。 +Excel スタイル フィルタリングのカスタム ロード テンプレートを提供するには、`ExcelStyleLoading` ディレクティブを使用できます。 ```html @@ -524,10 +522,10 @@ BLAZOR CODE SNIPPET HERE -## 一意の列値ストラテジ +## リモート ページング -Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。`{ComponentName}` は、デフォルトでデータソースに基づいてこれらの値を生成します。リモート フィルタリングの場合、グリッドのデータにはサーバーからのすべてのデータが含まれていません。これらの一意の値を手動で提供し、オンデマンドで読み込むために、`{ComponentName}` の `UniqueColumnValuesStrategy` 入力を利用できます。この入力は、実際には 3 つの引数を提供するメソッドです。 +ページング機能はリモート データで処理できます。これを説明するために、まずデータの取得を担当するサービスを宣言しましょう。ページ数を計算するには、すべてのデータ項目数が必要になるため、このロジックをサービスに追加します。 ```typescript @@ -600,7 +598,7 @@ export class RemotePagingService { -As Blazor Server is already a remote instance, unlike the demos in the other platforms we do not need to set another remote instance for the data, as the data is already remote. In order to do remote paging, we just need to set a couple of methods ins the data class +Blazor Server はすでにリモート インスタンスであるため、他のプラットフォームのデモとは異なり、データがすでにリモートであるため、データ用に別のリモート インスタンスを設定する必要はありません。リモート ページングを行うには、データ クラスにいくつかのメソッドを設定する必要があります。 ```csharp public Task> GetData(int index, int perPage) @@ -655,7 +653,7 @@ export class RemoteService { -The paging feature can operate with remote data. In order to demonstrate this let's first declare our service that will be responsible for data fetching. We will need the count of all data items in order to calculate the page count. This logic will be added to our service. +ページング機能はリモート データで処理できます。これを説明するために、まずデータの取得を担当するサービスを宣言しましょう。ページ数を計算するには、すべてのデータ項目数が必要になるため、このロジックをサービスに追加します。 ```typescript @@ -735,7 +733,7 @@ export class RemotePagingService { -As Blazor Server is already a remote instance, unlike the demos in the other platforms we do not need to set another remote instance for the data, as the data is already remote. In order to do remote paging, we just need to set a couple of methods ins the data class +Blazor Server はすでにリモート インスタンスであるため、他のプラットフォームのデモとは異なり、データがすでにリモートであるため、データ用に別のリモート インスタンスを設定する必要はありません。リモート ページングを行うには、データ クラスにいくつかのメソッドを設定する必要があります。 ```csharp public Task> GetData(int index, int perPage) @@ -795,9 +793,7 @@ export class RemoteService { -- - それぞれの列インスタンス。 -- - フィルタリング式ツリー。各列に基づいて削減されます。 -- `Done` - サーバーから取得されたときに、新しく生成された列値で呼び出されるコールバック。 +サービスを宣言した後、 の構築とデータのサブスクリプションを担当するコンポーネントを作成する必要があります。 @@ -828,7 +824,7 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy -First we need to bind to the relevant events so when we change pages and the amount of records shown per page, the remote service will fetch the correct amount of data +まず、関連するイベントにバインドして、ページを変更したり、ページごとに表示されるレコードの量を変更したりするときに、リモート サービスが正しい量のデータを取得するようにする必要があります。 ```ts constructor() { @@ -855,7 +851,7 @@ First we need to bind to the relevant events so when we change pages and the amo } ``` -We also need to set the method for loading data and update the UI accordingly: +また、データを読み込む方法を設定し、それに応じて UI を更新する必要があります。 ```ts private loadData(pageIndex?: number, pageSize?: number): void { @@ -887,16 +883,16 @@ We also need to set the method for loading data and update the UI accordingly: ``` -For further reference, please check the demo bellow: +詳細については、以下のデモを確認してください。 -### Grid Remote Paging Demo +### グリッド リモート ページングのデモ - + -First we should load some data to the grid. It is best to do after the grid has been rendered to avoid any timing issues. +まず、グリッドにデータを読み込む必要があります。タイミングの問題を回避するには、グリッドが描画された後に実行することをお勧めします。 ```csharp protected override async Task OnAfterRenderAsync(bool firstRender) @@ -910,7 +906,7 @@ First we should load some data to the grid. It is best to do after the grid has } ``` -After that we just need to bind the paging events to our custom methods, and remote paging is set: +その後は、ページング イベントをカスタム メソッドにバインドするだけで、リモート ページングが設定されます。 ```razor @@ -949,11 +945,11 @@ After that we just need to bind the paging events to our custom methods, and rem } ``` -For further reference please check the full demo bellow: +詳細については、以下の完全なデモを確認してください。 -### Grid Remote Paging Demo +### グリッド リモート ページングのデモ - + @@ -982,7 +978,7 @@ For further reference please check the full demo bellow: ``` -then set up the state: +次に、状態を設定します。 ```tsx const grid = useRef(null); @@ -997,7 +993,7 @@ then set up the state: }, [page, perPage]); ``` -and finally set up the method for loading the data: +最後に、データを読み込むメソッドを設定します。 ```tsx function loadGridData(pageIndex?: number, pageSize?: number) { @@ -1021,11 +1017,11 @@ and finally set up the method for loading the data: } ``` -For further reference please check the full sample bellow: +詳細については、以下の完全なサンプルを確認してください。 -### Grid Remote Paging Demo +### グリッド リモート ページングのデモ - + @@ -1060,7 +1056,7 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, -First we need to bind to the relevant events so when we change pages and the amount of records shown per page, the remote service will fetch the correct amount of data +まず、関連するイベントにバインドして、ページを変更したり、ページごとに表示されるレコードの量を変更したりするときに、リモート サービスが正しい量のデータを取得するようにする必要があります。 ```ts constructor() { @@ -1101,7 +1097,7 @@ First we need to bind to the relevant events so when we change pages and the amo } ``` -We also need to set the method for loading data and update the UI accordingly: +また、データを読み込む方法を設定し、それに応じて UI を更新する必要があります。 ```ts private updateUI(): void { @@ -1132,7 +1128,7 @@ We also need to set the method for loading data and update the UI accordingly: } ``` -And finally we need to handle the behaviour behind the actual hierarchy levels of the Hierarchical Gird +最後に、階層グリッドの実際の階層レベルの背後にある動作を処理する必要があります。 ```ts public gridCreated(event: CustomEvent, parentKey: string) { @@ -1163,16 +1159,16 @@ And finally we need to handle the behaviour behind the actual hierarchy levels o } ``` -For further reference, please check the demo bellow: +詳細については、以下のデモを確認してください。 -### Grid Remote Paging Demo +### グリッド リモート ページングのデモ - + -First we should load some data to the grid. It is best to do after the grid has been rendered to avoid any timing issues. +まず、グリッドにデータを読み込む必要があります。タイミングの問題を回避するには、グリッドが描画された後に実行することをお勧めします。 ```csharp protected override async Task OnAfterRenderAsync(bool firstRender) @@ -1186,7 +1182,7 @@ First we should load some data to the grid. It is best to do after the grid has } ``` -After that we just need to bind the paging events to our custom methods, and remote paging is set: +その後は、ページング イベントをカスタム メソッドにバインドするだけで、リモート ページングが設定されます。 ```razor @@ -1225,11 +1221,11 @@ After that we just need to bind the paging events to our custom methods, and rem } ``` -For further reference please check the full demo bellow: +詳細については、以下の完全なデモを確認してください。 -### Grid Remote Paging Demo +### グリッド リモート ページングのデモ - + @@ -1266,7 +1262,7 @@ For further reference please check the full demo bellow: ``` -then set up the state: +次に、状態を設定します。 ```tsx const hierarchicalGrid = useRef(null); @@ -1282,7 +1278,7 @@ then set up the state: }, [page, perPage]); ``` -next set up the method for loading the data: +次に、データを読み込むメソッドを設定します。 ```tsx function loadGridData(pageIndex?: number, pageSize?: number) { @@ -1311,7 +1307,7 @@ next set up the method for loading the data: -開発者は、 と 引数によって提供される情報に基づいて、必要な一意の列値を手動で生成し、`Done` コールバックを呼び出すことができます。 +最後に、RowIsland の動作を設定します。 ```tsx function gridCreated(event: IgrGridCreatedEventArgs, parentKey: string) { @@ -1346,18 +1342,19 @@ next set up the method for loading the data: ``` -For further reference please check the full sample bellow: +詳細については、以下の完全なサンプルを確認してください。 -### Grid Remote Paging Demo +### グリッド リモート ページングのデモ - + + -In this sample we will demonstrate how to display a certain number of root records per page no matter how many child records they have. In order to cancel the built-in Tree Grid paging algorithm, which displays a certain number of records no matter their level (root or child), we have to set the property to `Number.MAX_SAFE_INTEGER`. +このサンプルでは、各行の子レコード数に関係なく、ページごとに一定数のルート レコードを表示する方法を示します。レベル (ルートまたは子) に関係なく一定数のレコードを表示する Tree Grid の組み込みページング アルゴリズムを無効にするには、 プロパティを `Number.MAX_SAFE_INTEGER` に設定する必要があります。 ```html @@ -1378,52 +1375,77 @@ BLAZOR CODE SNIPPET HERE - -`UniqueColumnValuesStrategy` 入力が提供される場合、Excel スタイル フィルタリングでプロセスを生成するデフォルトの一意の値は使用されません。 - +独自のカスタム ページング テンプレートを設定するか、 が提供するデフォルトのテンプレートを使用するかを選択できます。まず、デフォルトのページング テンプレートを使用してリモート ページングを設定するために必要な内容を確認しましょう。 -### 一意の列値ストラテジーのデモ +### デフォルト テンプレートを使用したリモート ページング -Excel スタイル フィルタリングのカスタム ロード テンプレートを提供するには、`ExcelStyleLoading` ディレクティブを使用できます。 +デフォルトのページング テンプレートを使用する場合は、Paginator の プロパティを設定する必要があります。これにより、グリッドはリモートのレコード総数に基づいてページの総数を計算できるようになります。リモート ページングを実行する場合、Paginator は現在のページのデータのみをグリッドに渡すため、グリッドは提供されたデータソースをページング処理しようとしません。そのため、Grid の プロパティを に設定する必要があります。また、リモート サービスからデータを取得するために、`PagingDone` または `PerPageChange` イベントのいずれかにサブスクライブする必要があります。どちらのイベントを使用するかは、ユース ケースによって異なります。 ```html - - - + + + + + + +``` + +```html + + + + + + +``` + +```html + + + + + ``` ```typescript -public singersColumnValuesStrategy = (column: IgxColumnComponent, - columnExprTree: IFilteringExpressionsTree, - done: (uniqueValues: any[]) => void) => { -// Get specific column data for the singers. -this.remoteValuesService.getColumnData( - null, 'Singers', column, columnExprTree, uniqueValues => done(uniqueValues)); +public totalCount = 0; +public data: Observable; +public mode = GridPagingMode.remote; +public isLoading = true; +@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + +private _dataLengthSubscriber; + +public set perPage(val: number) { + this._perPage = val; + this.paginate(0); } -public albumsColumnValuesStrategy = (column: IgxColumnComponent, - columnExprTree: IFilteringExpressionsTree, - done: (uniqueValues: any[]) => void) => { -// Get specific column data for the albums of a specific singer. -const parentRowId = (column.grid as any).foreignKey; -this.remoteValuesService.getColumnData( - parentRowId, 'Albums', column, columnExprTree, uniqueValues => done(uniqueValues)); +public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data: any) => { + this.totalCount = data; + this.grid1.isLoading = false; + }); } -``` -```razor -BLAZOR CODE SNIPPET HERE -``` +public ngAfterViewInit() { + const skip = this.page * this.perPage; + this.remoteService.getData(skip, this.perPage); +} -```html - - - Loading... - - +public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + + this.remoteService.getData(skip, top); +} ``` @@ -1432,42 +1454,28 @@ BLAZOR CODE SNIPPET HERE ``` - + -### リモート ページング -ページング機能はリモート データで処理することもできます。はじめにデータ フェッチングを行うサービスを宣言します。ページ カウントを計算するためすべてのデータ項目のカウントをが必要なため、ロジックをサービスに追加する必要があります。 - -```typescript -@Injectable() -export class RemotePagingService { - public remoteData: BehaviorSubject; - public dataLenght: BehaviorSubject = new BehaviorSubject(0); - public url = 'https://www.igniteui.com/api/products'; - constructor(private http: HttpClient) { - this.remoteData = new BehaviorSubject([]) as any; - } +### カスタム Paginator コンテンツを使用したリモート ページング - public getData(index?: number, perPage?: number): any { - let qS = ''; +カスタム paginator コンテンツを定義する場合、要求されたページのデータのみを取得し、選択されたページと項目の に応じて正しい **skip** および **top** パラメーターをリモート サービスに渡すように、コンテンツを定義する必要があります。ここでは、例の設定を簡略化するために を使用し、併せて紹介されている `PageSizeSelectorComponent` と `PageNavigationComponent` を使用します。`PageSize` はページごとのドロップダウンとラベルを追加し、`PageNav` はナビゲーション用のアクション ボタンとラベルを追加します。 - if (perPage) { - qS = `?$skip=${index}&$top=${perPage}&$count=true`; - } - - this.http - .get(`${this.url + qS}`).pipe( - map((data: any) => data) - ).subscribe((data) => this.remoteData.next(data)); - } - - public getDataLength(): any { - return this.http.get(this.url).pipe( - map((data: any) => data.length) - ); - } -} +```html + + + + [This is my custom content] + + + ``` @@ -1570,115 +1578,27 @@ BLAZOR CODE SNIPPET HERE -Blazor Server はすでにリモート インスタンスであるため、他のプラットフォームのデモとは異なり、データがすでにリモートであるため、データ用に別のリモート インスタンスを設定する必要はありません。リモート ページングを行うには、データ クラスにいくつかのメソッドを設定する必要があります。 - - -```ts -export class RemotePagingService { - public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`; - constructor() {} - - public static getDataWithPaging(pageIndex?: number, pageSize?: number) { - return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize)) - .then((result) => result.json()) - .catch((error) => console.error(error.message)); - } - - private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) { - let qS = ""; - if (baseUrl) { - qS += `${baseUrl}`; - } + +リモート ページングを正しく設定するには、 を設定する必要があります。 + - // Add pageIndex and size to the query string if they are defined - if (pageIndex !== undefined) { - qS += `?pageIndex=${pageIndex}`; - if (pageSize !== undefined) { - qS += `&size=${pageSize}`; - } - } else if (pageSize !== undefined) { - qS += `?perPage=${pageSize}`; - } - return `${qS}`; - } -} +```typescript +public mode = GridPagingMode.Remote; ``` -```csharp - public Task> GetData(int index, int perPage) - { - var itemsToReturn = items.Skip(index).Take(perPage).ToList(); - return Task.FromResult(itemsToReturn); - } - - public Task GetDataLength() - { - return Task.FromResult(items.Count); - } +```html + ``` -```tsx -const CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`; - -export class RemoteService { - - public static getDataWithPaging(pageIndex?: number, pageSize?: number) { - return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize)) - .then((result) => result.json()); - } - - private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) { - let qS = ""; - if (baseUrl) { - qS += `${baseUrl}`; - } - - // Add pageIndex and size to the query string if they are defined - if (pageIndex !== undefined) { - qS += `?pageIndex=${pageIndex}`; - if (pageSize !== undefined) { - qS += `&size=${pageSize}`; - } - } else if (pageSize !== undefined) { - qS += `?perPage=${pageSize}`; - } - - return `${qS}`; - } -} +```html + ``` -```typescript -@Injectable() -export class RemotePagingService { - public remoteData: BehaviorSubject; - public dataLenght: BehaviorSubject = new BehaviorSubject(0); - public url = 'https://www.igniteui.com/api/products'; - - constructor(private http: HttpClient) { - this.remoteData = new BehaviorSubject([]) as any; - } - - public getData(index?: number, perPage?: number): any { - let qS = ''; - - if (perPage) { - qS = `?$skip=${index}&$top=${perPage}&$count=true`; - } - - this.http - .get(`${this.url + qS}`).pipe( - map((data: any) => data) - ).subscribe((data) => this.remoteData.next(data)); - } - - public getDataLength(): any { - return this.http.get(this.url).pipe( - map((data: any) => data.length) - ); - } -} +```html + ``` @@ -1687,45 +1607,14 @@ BLAZOR CODE SNIPPET HERE ``` -ページング機能はリモート データで処理することもできます。はじめにデータ フェッチングを行うサービスを宣言します。ページ カウントを計算するためすべてのデータ項目のカウントをが必要なため、ロジックをサービスに追加する必要があります。 - -```ts -export class RemotePagingService { - public static BASE_URL = 'https://data-northwind.indigo.design/'; - public static CUSTOMERS_URL = `${RemotePagingService.BASE_URL}Customers/GetCustomersWithPage`; - - constructor() {} - - public static getDataWithPaging(pageIndex?: number, pageSize?: number) { - return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize)) - .then((result) => result.json()) - .catch((error) => console.error(error.message)); - } - - public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) { - return fetch(`${RemotePagingService.BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`) - .then((result) => result.json()); - } - - private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) { - let qS = ""; - if (baseUrl) { - qS += `${baseUrl}`; - } +最後のステップは、要件に基づいて paginator コンテンツを宣言することです。 - // Add pageIndex and size to the query string if they are defined - if (pageIndex !== undefined) { - qS += `?pageIndex=${pageIndex}`; - if (pageSize !== undefined) { - qS += `&size=${pageSize}`; - } - } else if (pageSize !== undefined) { - qS += `?perPage=${pageSize}`; - } - - return `${qS}`; - } -} +```html + + + [This is my custom content] + + ``` @@ -1734,20 +1623,22 @@ BLAZOR CODE SNIPPET HERE ``` -Blazor Server はすでにリモート インスタンスであるため、他のプラットフォームのデモとは異なり、データがすでにリモートであるため、データ用に別のリモート インスタンスを設定する必要はありません。リモート ページングを行うには、データ クラスにいくつかのメソッドを設定する必要があります。 +上記のすべての変更を行うと、次の結果が得られます。 + + -### Remote Paging with Custom Paginator +### カスタム Paginator を使用したリモート ページング -In some cases you may want to define your own paging behavior and this is when we can take advantage of the Paging template and add our custom logic along with it. We are going to extend the Remote Paging example in order to demonstrate this: +場合によっては、独自のページング動作を定義したいことがあります。そのような場合、Paging テンプレートを利用してカスタム ロジックを追加できます。これを説明するために、Remote Paging の例を拡張します。 - + -Below you will find the methods that we've defined in order to implement our own `next` and `previous` page actions. +以下に、独自の `next` および `previous` ページ アクションを実装するために定義したメソッドを示します。 ```typescript @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; @@ -1802,11 +1693,11 @@ BLAZOR CODE SNIPPET HERE -### Remote Paging with Batch editing +### バッチ編集を使用したリモート ページング -With the examples so far we clarified how to set up the with remote data. Now, let's focus on enabling batch editing for the grid by following the [Batch Editing topic/guide](batch-editing.mdx). +これまでの例で、リモート データを使用して を設定する方法を説明しました。ここでは、[バッチ編集のトピック/ガイド](batch-editing.mdx) に従って、グリッドのバッチ編集を有効にすることに焦点を当てます。 -Before continuing with the sample it is good to clarify the current use case. When pagination is done on the server, the grid contains the data only for the current page and if we add new rows the newly added rows (with Batch Editing) will be concatenated with the current data that the grid contains. Therefore, if the server returns no data for a given page, grid's data source will be consisted only from the newly added rows, which the grid will paginate based on the defined pagination settings (page, perPage). +サンプルに進む前に、現在のユース ケースを明確にしておくとよいでしょう。ページングがサーバー側で行われる場合、グリッドには現在のページのデータのみが含まれ、新しい行を追加すると (バッチ編集を使用)、新しく追加された行はグリッドが保持している現在のデータと連結されます。そのため、サーバーが特定のページに対してデータを返さない場合、グリッドのデータソースは新しく追加された行のみで構成され、グリッドは定義されたページング設定 (page、perPage) に基づいてそれをページングします。 ```typescript public ngOnInit() { @@ -1825,9 +1716,9 @@ BLAZOR CODE SNIPPET HERE ``` -In order to handle this use case properly, we need to implement some custom logic. +このユース ケースを適切に処理するには、いくつかのカスタム ロジックを実装する必要があります。 -First, we have to know the total number of records that are on the server. Given that, we calculate the total number of data pages on the server, and based on its value, we will implement the custom pagination logic. +まず、サーバー上にあるレコードの総数を把握する必要があります。それをもとに、サーバー上のデータ ページの総数を計算し、その値に基づいてカスタム ページング ロジックを実装します。 ```typescript public paginate(page: number) { @@ -1855,32 +1746,42 @@ BLAZOR CODE SNIPPET HERE ``` -As you can see in the method, custom pagination logic is performed, based on the `TotalPagesOnServer` value. + メソッドで確認できるように、`TotalPagesOnServer` の値に基づいてカスタム ページング ロジックが実行されます。 -#### Remote Paging with Batch Editing Demo +#### バッチ編集を使用したリモート ページングのデモ - + -## グリッド リモート ページングのデモ +## 既知の問題と制限 -まず、グリッドにデータを読み込む必要があります。タイミングの問題を回避するには、グリッドが描画された後に実行することをお勧めします。 +グリッドに が設定されておらず、リモート データのシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロールによってリモート サーバーへの要求がトリガーされ、グリッドに表示するデータを取得する場合)、データ要求が完了すると、行は次の状態を失います。 -その後は、ページング イベントをカスタム メソッドにバインドするだけで、リモート ページングが設定されます。 +- 行の選択 +- 行の展開/折りたたみ +- 行の編集 +- 行のピン留め ## API リファレンス - -
-
- -## グリッド リモート ページングのデモ + + +## その他のリソース -まず、関連するイベントにバインドして、ページを変更したり、ページごとに表示されるレコードの量を変更したりするときに、リモート サービスが正しい量のデータを取得するようにする必要があります。 +- [ページング](paging.mdx) +- [仮想化とパフォーマンス](virtualization.mdx) +- [フィルタリング](filtering.mdx) +- [ソート](sorting.mdx) +- [集計](summaries.mdx) +- [列の移動](column-moving.mdx) +- [列のピン固定](column-pinning.mdx) +- [列のサイズ変更](column-resizing.mdx) +- [選択](selection.mdx) -また、データを読み込む方法を設定し、それに応じて UI を更新する必要があります。 +コミュニティに参加して新しいアイデアをご提案ください。 -最後に、階層グリッドの実際の階層レベルの背後にある動作を処理する必要があります。 +- [{ProductName} **フォーラム (英語)**]({ForumsLink}) +- [{ProductName} **GitHub (英語)**]({GithubLink}) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx index aa7efae696..8f44950d66 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx @@ -1,6 +1,6 @@ --- title: "{Platform} {ComponentTitle} 行の追加 - {ProductName}" -description: "{Platform} を使用して、定義済みの行追加機能の使用およびカスタマイズする方法を学びます。直感的なグリッド行の追加と CRUD 機能を利用できます。" +description: "{Platform} で組み込みの行追加機能を使用およびカスタマイズする方法を説明します。直感的なグリッドの行追加と CRUD 機能を活用できます。" keywords: "{Platform}, {ComponentKeywords}, {ProductName}, Infragistics, インフラジスティックス" license: commercial mentionedTypes: [{ComponentApiMembers}] @@ -18,13 +18,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} {ComponentTitle} 行の追加 -{Platform} {ComponentTitle} の {ProductName} 行追加機能を使用すると、ユーザーは別のフォームやページに移動することなく、新しいデータ レコードを入力して送信できます。 を使用すると、ユーザーはインライン行追加と CRUD 操作用の強力な API を通じてデータを操作できます。 -グリッドのテンプレートで編集操作が有効になっている コンポーネントを追加します。その後、行にカーソルを置き、提供されたボタンを使用します。最後に ALT + + を押して、行追加 UI を表示します。 +{Platform} {ComponentTitle} の {ProductName} 行追加機能を使用すると、ユーザーは別のフォームやページに移動せずに新しいデータ レコードを入力して送信できます。 では、インラインでの行追加と、CRUD 操作のための強力な API によってデータを操作できます。 +グリッド テンプレートに、編集アクションを有効にした コンポーネントを追加します。次に行へホバーして表示されたボタンを使用し、最後に ALT + + を押して行追加 UI を表示します。 - はインライン行追加や {Platform} CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている コンポーネントを追加し、ホバーして提供されたボタンを使用するか、ALT + + を押して、行追加 UI を生成するか、ALT + SHIFT + + を押して、選択した行に子を追加するための UI を生成します。 + では、インライン行追加と {Platform} 向け CRUD API により、便利な方法でデータを操作できます。グリッド テンプレートに編集アクションを有効化した を追加し、行へホバーして表示されるボタンを使用します。ALT + + で行追加 UI を表示し、ALT + SHIFT + + で選択行の子行追加 UI を表示できます。 @@ -50,17 +50,17 @@ export class AppModule {} -次に、バインドしたデータ ソースに を定義をして `RowEditable` を true に設定し、編集アクションを有効にした コンポーネントを定義します。 入力は、行追加 UI を生成するボタンの表示状態を制御します。 +次に、データ ソースをバインドした を定義し、 を true に設定します。さらに、編集アクションを有効にした コンポーネントを追加します。 入力は、行追加 UI を表示するボタンの表示状態を制御します。 ```html <{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowEditable]="true"> - - - - + + + + @@ -74,12 +74,12 @@ export class AppModule {} ```html <{ComponentSelector} id="grid" primary-key="ProductID" auto-generate="false" row-editable="true"> - - - - - - + + + + + + @@ -91,7 +91,7 @@ export class AppModule {} ```tsx -<{ComponentSelector} autoGenerate={false} data={NwindData} primaryKey="ProductID" rowEditable={true}> +<{ComponentSelector} autoGenerate={false} data={nwindData} primaryKey="ProductID" rowEditable={true}> @@ -152,12 +152,12 @@ export class AppModule {} ```html <{ComponentSelector} id="treeGrid" primary-key="ID" foreign-key="ParentID" row-editable="true"> - - - - + + + + - + @@ -246,12 +246,12 @@ export class AppModule {} ```html <{ComponentSelector} id="hGrid" auto-generate="false" primary-key="Debut" row-editable="true"> - - + + - - - + + + @@ -259,14 +259,14 @@ export class AppModule {} - - - + + + - - - - + + + + @@ -391,11 +391,11 @@ export class AppModule {} > プライマリ キーは行追加操作で必須です。 > **注**: -> プライマリ キーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、`Editable` 列の入力を **false** に設定します。 +> プライマリ キーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、 列の入力を **false** に設定します。 > **注**: -> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ を使用して、ボタンが表示するレコードを調整できます。 +> [行の追加] ボタンの表示状態を制御する 入力では、アクション ストリップのコンテキスト (型: ) を使用して、ボタンを表示するレコードを調整できます。 @@ -405,11 +405,11 @@ export class AppModule {} -内部の `BaseTransactionService` は に自動的に提供されます。行の状態が送信またはキャンセルされるまで、保留中のセルの変更を保持します。 +`BaseTransactionService` は に内部的に提供され、行の状態が送信またはキャンセルされるまで保留中のセル変更を保持します。 ## プログラムで行の追加を開始 - allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported. + では、2 つの公開メソッドを使って行追加 UI をプログラムから表示できます。1 つは UI を表示する位置の基準となる行 ID を受け取り、もう 1 つはインデックスで位置を指定します。これらのメソッドを使うことで、現在のデータ ビュー内の任意の位置に UI を表示できます。ページ変更や、たとえばフィルターで除外された行を指定することはサポートされません。 を使用すると、2 つの異なるパブリック メソッドを使用して、プログラムで行追加 UI を生成できます。1 つは UI が生成される行を指定するための行 ID を受け入れ、もう 1 つはインデックスによって機能します。これらのメソッドを使用して、現在のデータ ビュー内の任意の場所に UI を生成できます。ページの変更や、たとえばフィルターで除外された行の指定はサポートされていません。 @@ -437,7 +437,7 @@ gridRef.current.beginAddRowById(null); // Spawns the add row UI as the first ``` -`BeginAddRowById` を使用するには、`RowID` (PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクション ストリップ ボタンをクリックしたかのように機能し、その下に UI を生成します。最初のパラメーターに `null` を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。 + メソッドも同様に機能しますが、UI が表示されるインデックスを指定する必要があります。指定可能な値の範囲は 0 からデータ ビューのサイズ - 1 までです。 ```typescript @@ -465,7 +465,7 @@ gridRef.current.beginAddRowByIndex(0); // Spawns the add row UI as the first -`BeginAddRowByIndex` メソッドも同様に機能しますが、UI が生成されるインデックスを指定する必要があります。許可される値の範囲は、0 からデータ ビューのサイズ -1 までです。 + を使用する場合は、`RowID` (PK) で操作コンテキストとなる行を指定します。このメソッドは、エンド ユーザーが指定行の [行の追加] ボタンをクリックした場合と同様に動作し、その行の下に UI を表示します。2 番目のパラメーターで、行をコンテキスト行の子として追加するか兄弟として追加するかを制御できます。最初のパラメーターに `null` を渡すと、UI をグリッドの先頭行として表示できます。 ```typescript @@ -483,7 +483,7 @@ this.treeGrid.beginAddRowById(null); // Spawns the add row UI as the ``` -`BeginAddRowById` を使用するには、`RowID` (PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクション ストリップ ボタンをクリックしたかのように機能し、その下に UI を生成します。2 番目のパラメーターは、行を子としてコンテキスト行に追加するか、兄弟として追加するかを制御します。最初のパラメーターに `null` を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。 + も同様に機能しますが、コンテキスト行をインデックスで指定します。 ```typescript @@ -513,9 +513,9 @@ this.treeGrid.beginAddRowByIndex(null); // Spawns the add row UI as the fi ## 動作 -行追加 UI は、エンド ユーザーに整合性のある編集エクスペリエンスを提供するように設計されているため、行編集 UI と同じ動作をします。詳細については、[{ComponentTitle} 行の編集](row-editing.mdx)のトピックを参照してください。 +行追加 UI は、エンド ユーザーに一貫した編集エクスペリエンスを提供するため、行編集 UI と同じ動作をします。詳細は [{ComponentTitle} 行の編集](row-editing.mdx) を参照してください。 -行追加 UI を介して新しい行が追加された後、その位置や表示状態は、 のソート、フィルタリングおよびグループ化の状態によって決定されます。これらの状態のいずれも適用されていない では、最後のレコードとして表示されます。スナックバーが短時間表示され、 が表示されていない場合にはエンド ユーザーがコントロールの位置までスクロールするためのボタンが含まれています。 +行追加 UI から新しい行を追加した後、その位置や表示状態は のソート、フィルタリング、グループ化の状態によって決まります。これらの状態が適用されていない では、新しい行は末尾レコードとして表示されます。また、追加行が表示領域外にある場合は、 のその位置までスクロールできるボタンを含むスナックバーが短時間表示されます。 ## キーボード ナビゲーション @@ -545,11 +545,11 @@ this.treeGrid.beginAddRowByIndex(null); // Spawns the add row UI as the fi ### テキストのカスタマイズ -行追加オーバーレイのテキストのカスタマイズは、 `RowAddTextTemplate` を使用して可能です。 +行追加オーバーレイのテキストは、 を使用してカスタマイズできます。 -行追加オーバーレイのテキストのカスタマイズは、`RowAddTextDirective` を使用して可能です。 +行追加オーバーレイのテキストは、`RowAddTextDirective` でカスタマイズできます。 ```html @@ -606,7 +606,7 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { ### ボタンのカスタマイズ -`RowEditActionsDirective` を使用して行編集オーバーレイのボタンのカスタマイズが可能です。 +`RowEditActionsDirective` を使用すると、行編集オーバーレイのボタンをカスタマイズできます。 キーボード ナビゲーションにボタンを含める場合、各ボタンに `RowEditTabStopDirective` が必要です。 @@ -617,13 +617,13 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { ``` -> **Note**: -> Using `RowEditActions` directive will change edit actions for both editing and adding overlay buttons. +> **注**: +> `RowEditActions` ディレクティブを使用すると、編集オーバーレイと追加オーバーレイの両方で編集アクション ボタンが変更されます。 ### ボタンのカスタマイズ -行編集オーバーレイのボタンをカスタマイズするには、`RowEditActions` テンプレートを使用します。 +行編集オーバーレイのボタンは、`RowEditActions` テンプレートでカスタマイズできます。 ```ts @@ -654,11 +654,39 @@ igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { }, false); ``` +> **注**: +> `RowEditActions` テンプレートを使用すると、編集オーバーレイと追加オーバーレイの両方で編集アクション ボタンが変更されます。 + + + +## リモート シナリオ + +多くのリモート データ シナリオでは、プライマリ キーは作成時のサーバー リクエストで割り当てられます。そのため、クライアント側で追加されたレコードは、サーバーのデータベースに保存されるまで最終的なプライマリ キー値を持ちません。この場合、 での推奨対応は次のとおりです。 + +- がトランザクションを使用していない場合。 + + 作成リクエストが成功し、追加レコードのデータが返却されたら、ローカル データ インスタンス内の該当レコード ID を置き換えます。 + +- がトランザクションを使用している場合。 + + 作成リクエストまたは一括更新リクエストが成功し、DB で生成された ID を持つ追加レコードが返却されたら、`Clear` API メソッドで関連する ADD トランザクションをトランザクション ログからクリアします。ローカル トランザクションに含まれる生成 ID とデータベース側で生成された ID が異なる可能性があるためです。その後、レスポンスで返されたレコードをローカル データに追加します。 + +これにより、リモートで生成された ID が常にローカル データに反映され、以降の更新/削除処理でも正しいレコード ID を対象にできます。 + + +## スタイル設定 + +行追加 UI は、 の編集アクション ボタン、編集エディターとオーバーレイ、さらに新規追加行へスクロールするためのスナックバーで構成されています。これらのスタイル設定は、各トピックのガイドを参照してください。 + +- [{ComponentTitle} 行の編集](row-editing.mdx#スタイル設定) +- [Snackbar](../../notifications/snackbar.mdx#スタイル設定) + ## API リファレンス -
+ + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx index 889632fa28..6dc63d020e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx @@ -18,16 +18,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} {ComponentTitle} 行の編集 -{Platform} {ComponentTitle} の {ProductName} 行編集機能を使用すると、`{ComponentName}` 内でデータを直接編集できます。データを操作するこの便利な方法に加えて、完全な CRUD 操作のための強力な API があります。行をクリックして **Enter キー**を押すと、グリッド行の編集を実行できます。もう 1 つの簡単な方法は、変更する必要がある行をマウスでダブルクリックすることです。 +{Platform} {ComponentTitle} の {ProductName} 行編集機能では、`{ComponentName}` 内でデータを直接編集できます。直感的な編集操作に加えて、完全な CRUD 操作を実現する強力な API も提供されます。行をクリックして **Enter キー**を押すと行編集を開始できます。もう 1 つの方法として、編集したい行をマウスでダブルクリックしても開始できます。 ## {Platform} {ComponentTitle} 行編集の例 -以下の手順では、`{ComponentName}` で行編集を有効にする方法を示します。セル値を変更してから同じ行の他のセルをクリックまたはナビゲーションした場合も **[完了]** ボタンを使用して確定するまで行値を更新しません。または **[キャンセル]** ボタンを使用して破棄します。 +次のサンプルは、`{ComponentName}` で行編集を有効にする方法を示します。セル値を変更した後、同じ行内の別セルへクリックまたは移動しても、**[完了]** ボタンで確定するまで行の値は更新されません。**[キャンセル]** ボタンで変更を破棄することもできます。 -行が編集モードにある場合、他の行のセルをクリックすると [完了] ボタンが押されたように動作し、前の行の変更をすべての変更をサブミットします。新しくフォーカスされたセルが編集可能な場合、新しい行も編集モードになります。ただし、セルが編集可能でない場合は、前の行のみが編集モードを終了します。 +行が編集モードのときに別の行のセルをクリックすると、[完了] ボタンを押した場合と同様に動作し、直前の行の変更がすべて送信されます。新しくフォーカスされたセルが編集可能であれば、その行も編集モードに入ります。編集不可セルの場合は、前の行のみが編集モードを終了します。 ## 行編集の使用 @@ -48,7 +48,7 @@ export class AppModule {} -次に をバインドしたデータソースで定義し、`RowEditable` を true に設定してバインドします。 +次に、データ ソースをバインドした `{ComponentName}` を定義し、 を true に設定します。 @@ -75,7 +75,7 @@ export class AppModule {} - + ``` @@ -107,10 +107,10 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { <{ComponentSelector} primaryKey="ProductID" width="100%" height="500px" rowEditable={true}> - - - - + + + + @@ -157,7 +157,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { <{ComponentSelector} [data]="data" [primaryKey]="'ID'" width="100%" height="500px" [rowEditable]="true"> - + ``` @@ -169,7 +169,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { - + ``` @@ -225,7 +225,7 @@ constructor() { ```html - + @@ -425,23 +425,30 @@ RowEditable="true"> -個々の列の編集を有効にする必要はありません。 の `RowEditable` プロパティを使用すると、定義された `Field` プロパティを持つすべての行 (主行を除く) が編集可能になります。特定の列の編集を無効にしたい場合は、その列の `Editable` 入力を **false** に設定するだけです。 +個々の列の編集を有効にする必要はありません。 プロパティを使用すると、定義された `Field` プロパティを持つすべての行 (主行を除く) が編集可能になります。特定の列の編集を無効にしたい場合は、その列の 入力を **false** に設定するだけです。 -```html -<{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true"> - - - - - - - - - - - +```typescript +import { Component, ViewChild } from '@{Platform}/core'; +import { data } from './data'; +import { {ComponentName} } from 'igniteui-{Platform}'; + +@Component({ + selector: 'app-grid-row-edit', + styleUrls: [app-grid-row-edit.component.css], + templateUrl: 'app-grid-row-edit.component.html' +}) +export class {ComponentName}RowEditSampleComponent { + @ViewChild('gridRowEdit', { read: {ComponentName} }) public gridRowEdit: {ComponentName}; + + public data: any[]; + + constructor() { + this.data = data; + } +} + ``` @@ -451,27 +458,27 @@ RowEditable="true"> ## 位置 -- オーバーレイのデフォルトの位置は編集モードで行の下にあります。 +- オーバーレイの既定位置は、編集モードの行の下です。 - 行の下にスペースがない場合、オーバーレイが行の上に表示されます。 -- 一番上または下に表示されると、オーバーレイは閉じられるまでスクロール時にこの位置を保持します。 +- 一度表示されたオーバーレイ (上または下) は、閉じるまでスクロールしてもその位置を維持します。 ## 動作 -- 行が編集モードの場合、編集が継続します。同じ行のセルがクリックされたかどうか。 +- 行が編集モードのとき、同じ行内のセルをクリックすると編集は継続されます。 -- [完了] ボタンをクリックすると行編集を完了し、変更をデータソースまたはトランザクションへサブミットします。更に行が編集モードを完了します。 +- [完了] ボタンをクリックすると行編集が完了し、変更はデータ ソースまたはトランザクションに送信され、行は編集モードを終了します。 -- [キャンセル] ボタンがをクリックすると現在の行のすべての変更を元に戻し、行編集モードを終了します。 +- [キャンセル] ボタンをクリックすると、その行に対する現在の変更はすべて元に戻り、行は編集モードを終了します。 -- 行が編集モードにある場合、他の行のセルをクリックすると現在の行編集を終了し、行の新規の変更をサブミット ([完了] ボタンをクリックした場合と同じ) します。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。 +- 行が編集モードのときに別の行のセルをクリックすると、現在の行編集を終了し、変更を送信します ([完了] ボタンと同じ動作)。新しくフォーカスされたセルが編集可能であれば新しい行も編集モードに入ります。編集不可セルの場合は、前の行のみが編集モードを終了します。 -- 行が編集モードの時にグリッドがスクロールされると行が表示領域外になりますが、`{ComponentName}` は編集モードのままです。`{ComponentName}` をスクロールすると編集行は再度表示されますが編集行が編集モードのままになります。`{ComponentName}` 以外をクリックしたときにセルも編集モードに残ります。 +- 行が編集モードのまま表示領域外へスクロールされても、編集状態は維持されます。再び行が表示される位置までスクロールすると、その行は引き続き編集モードです。また、`{ComponentName}` の外側をクリックしてもセルは編集モードのままです。 - **ソート**、**フィルタリング**、**検索**、および**非表示**操作を実行すると、現在の行のすべての変更が元に戻され、行の編集モードを終了します。 -- **ページング**、**サイズ変更**、**ピン固定**、**移動**操作を実行すると、編集モードを終了して最新の値を送信します。 +- **ページング**、**サイズ変更**、**ピン固定**、**移動**操作を実行すると、編集モードを終了して最新値を送信します。 - 編集した各セルは行編集が終了するまで変更スタイルを取得します。`{ComponentName}` がトランザクションで提供されない場合の動作です。トランザクションが有効な場合、すべての変更がコミットされるまでセル編集スタイルが適用されます。 @@ -479,15 +486,15 @@ RowEditable="true"> - ENTER と F2 で行編集モードに入ります -- ESC で行編集モードを終了し、行の編集モード時に変更されたいずれのセルの変更もサブミットしません +- ESC で行編集モードを終了し、編集中に行ったセル変更は送信されません -- TAB - 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。 +- TAB は、行内の編集可能セル間でフォーカスを移動し、右端セルの次は [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンの次は現在編集中の行の左端の編集可能セルへ移動します。 ## 機能の統合 -- すべてのデータ変更操作は行変更操作を終了し、現在の行の変更をサブミットします。ソート、グループの変更、フィルタリング条件、ページングなどが含まれます。 +- データを変更する操作を行うと、行編集は終了し、現在の行の変更が送信されます。これにはソート、グループ化条件の変更、フィルタリング条件の変更、ページングなどが含まれます。 -- 行編集が終了した後に集計が更新されます。同様にソートやフィルタリングなどの他の機能が有効になります。 +- 行編集が完了すると集計も更新されます。ソートやフィルタリングなど他の機能にも同様に反映されます。 - グループ行の展開と縮小は現在の行の編集を終了しません。 @@ -498,7 +505,7 @@ RowEditable="true"> ### テキストのカスタマイズ -テンプレート化を使用した行編集オーバーレイのテキストのカスタマイズが可能です。 +テンプレートを使って、行編集オーバーレイのテキストをカスタマイズできます。 `RowChangesCount` プロパティが公開されて変更されたセルのカウントを保持します。 @@ -508,23 +515,27 @@ RowEditable="true"> Changes: {{rowChangesCount}} - ``` +``` -```razor +```javascript +igRegisterScript("RowEditTextTemplate", (ctx) => { + var html = window.igTemplating.html; + return html`
+ Changes: ${ctx.implicit} +
`; +}, false); ``` - -```ts +```ts +public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => { + return html`Changes: ${ctx.implicit}`; +} ``` - - - -```tsx @@ -541,12 +552,12 @@ const rowEditTextTemplate = (ctx: IgrGridRowEditTextTemplateContext) =>{ -### Customizing Buttons +### ボタンのカスタマイズ -Customizing the buttons of the row editing overlay also possible via templating. +テンプレートを使用して、行編集オーバーレイのボタンもカスタマイズできます。 -If you want the buttons to be part of the keyboard navigation, then each on of them should have the `RowEditTabStopDirective`. +ボタンをキーボード ナビゲーション対象に含める場合は、それぞれに `RowEditTabStopDirective` を付与してください。 @@ -601,36 +612,36 @@ const rowEditActionsTemplate =(ctx: IgrGridRowEditActionsTemplateContext) => { -## Styling +## スタイル設定 -Using the [{ProductName} Theme Library](themes/index.mdx), we can greatly alter the Row Editing overlay. +[{ProductName} Theme Library](themes/index.mdx) を使用すると、行編集オーバーレイの見た目を大きく変更できます。 -The Row Editing overlay is a composite element - its UI is comprised of a couple of other components: +行編集オーバーレイは複合要素で、UI は複数のコンポーネントで構成されています。 -- [igx-banner](banner.mdx) in order to render its contents -- [igx-button](button.mdx)s are rendered in the default template (for the `Done` and `Cancel` buttons). +- [igx-banner](banner.mdx): コンテンツの表示に使用 +- [igx-button](button.mdx): 既定テンプレート内の `Done` / `Cancel` ボタンに使用 -In the below example, we will make use of those two components' styling options, ([button styling](button.mdx#styling) & [banner-styling](../banner.mdx#styling)), to customize the experience of our `{ComponentName}`'s Row Editing. +次の例では、これら 2 つのコンポーネントのスタイル機能 ([button styling](button.mdx#styling) と [banner-styling](../banner.mdx#styling)) を利用して、`{ComponentName}` の行編集をカスタマイズします。 -We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in this [topic](cell-editing.mdx#styling). +さらに、現在のセルのエディターと背景にもスタイルを適用して、視認性を高めます。セルのスタイル設定についてはこの[トピック](cell-editing.mdx#styling)を参照してください。 -### Import Theme +### テーマのインポート -The easiest way to style the Row Editing banner is to define styles in our `app`'s global style file (typically `styles.scss`). -The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the {ProductName} Sass framework: +行編集バナーをスタイル設定する最も簡単な方法は、`app` のグローバル スタイル ファイル (通常は `styles.scss`) にスタイルを定義することです。 +まず `themes/index` ファイルをインポートします。これで {ProductName} Sass フレームワークの各種機能を利用できます。 ```scss @use "igniteui-{Platform}/theming" as *; -// IMPORTANT: Prior to {ProductName} version 13 use: +// 重要: {ProductName} 13 より前のバージョンでは次を使用: // @import '~igniteui-{Platform}/lib/core/styles/themes/index'; ``` -Once we've imported the themes file, we can create custom themes. +テーマ ファイルをインポートしたら、カスタム テーマを作成できます。 -#### Define the Theme +#### テーマの定義 -We can now define a custom that will affect our Row Editing background and make use of one of the predefined palettes namely `$purple-palette` : +次に、 を定義して行編集の背景に適用します。ここでは定義済みパレットの `$purple-palette` を利用します。 ```scss $my-light-gray: #e3e3e3; @@ -642,25 +653,25 @@ We can now define a custom -If the component is using an [Emulated](themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. -We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component: +コンポーネントが [Emulated](themes/styles.mdx#view-encapsulation) の ViewEncapsulation を使用している場合、グリッドをスタイル設定するには `::ng-deep` でカプセル化を通過する必要があります。 +コンポーネント外の要素へ影響しないよう、` :host` セレクター内で定義します。 ```scss @@ -673,14 +684,14 @@ We wrap the statement inside of a `:host` selector to prevent our styles from af } ``` -With the above syntax, our custom banner theme properly applies to the grid's Row Editing overlay. +上記の構文で、カスタム バナー テーマをグリッドの行編集オーバーレイへ正しく適用できます。 -### Custom Templates +### カスタム テンプレート -To further customize our Row Editing overlay, we can pass a custom template so we can style the `Done` and `Cancel` buttons separately: +行編集オーバーレイをさらにカスタマイズするには、カスタム テンプレートを渡して `Done` ボタンと `Cancel` ボタンを個別にスタイル設定できます。 ```html - + <{ComponentSelector}>
@@ -695,7 +706,7 @@ To further customize our Row Editing overlay, we can pass a custom template so w ``` -After we've defined our custom buttons, we can make use of the to style them. You can learn more about `igx-button` styling in this [topic](../button.mdx#styling). We can create a custom theme for our `Done` and `Cancel`: +カスタム ボタンを定義したら、 を使ってスタイルを適用できます。`igx-button` の詳細はこの[トピック](../button.mdx#styling)を参照してください。`Done` と `Cancel` 用に次のようなテーマを作成できます。 ```scss // custom.component.scss @@ -710,11 +721,11 @@ $button-theme: button-theme( } ``` -We scope our `@include` statement in `.custom-buttons` so that it is only applied to the `Done`and `Cancel` buttons. +`@include` は `.custom-buttons` に限定することで、`Done` と `Cancel` ボタンのみに適用されます。 -### Demo +### デモ -After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.mdx#styling). The result of all the combined styles can be seen below: +バナーとボタンのスタイル設定に加えて、[編集モードのセル](cell-editing.mdx#スタイル設定)にもカスタム スタイルを定義します。組み合わせた結果は次のサンプルで確認できます。 @@ -722,16 +733,16 @@ After styling the banner and buttons, we also define a custom style for [the cel -The sample will not be affected by the selected global theme from **Change Theme**. +このサンプルは **Change Theme** で選択したグローバル テーマの影響を受けません。 -## Styling +## スタイル設定 -In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.mdx). -In case you would like to change some of the colors, you need to set a class for the grid first: +定義済みテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx) を設定することでグリッドをさらにカスタマイズできます。 +色を変更したい場合は、まずグリッドにクラスを設定します。 ```html @@ -751,7 +762,7 @@ In case you would like to change some of the colors, you need to set a class for ``` -Then set the related CSS properties for that class: +続いて、そのクラスに対して関連する CSS プロパティを設定します。 ```css .grid { @@ -760,42 +771,42 @@ Then set the related CSS properties for that class: } ``` -### Demo +### デモ -## Known Issues and Limitations +## 既知の問題と制限事項 -- When the grid has no set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- グリッドに が設定されておらず、かつリモート データ シナリオが有効な場合 (ページング、ソート、フィルタリング、スクロールによりリモート サーバーへのデータ要求が発生する場合)、データ要求完了後に行の次の状態が失われます。 -- Row Selection -- Row Expand/collapse -- Row Editing -- Row Pinning +- 行選択 +- 行の展開/折りたたみ +- 行編集 +- 行のピン固定 -## API References +## API リファレンス -## Additional Resources +## その他のリソース -- [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud.mdx) +- [igxGrid で CRUD 操作を構築](/general/how-to/how-to-perform-crud.mdx) -- [{ComponentTitle} Editing](editing.mdx) -- [{ComponentTitle} Transactions](batch-editing.mdx) +- [{ComponentTitle} 編集](editing.mdx) +- [{ComponentTitle} トランザクション](batch-editing.mdx) -- [{ComponentTitle} Editing](editing.mdx) +- [{ComponentTitle} 編集](editing.mdx) -Our community is active and always welcoming to new ideas. +コミュニティに参加して新しいアイデアをご提案ください。 -- [{ProductName} **Forums**]({ForumsLink}) -- [{ProductName} **GitHub**]({GithubLink}) +- [{ProductName} **フォーラム (英語)**]({ForumsLink}) +- [{ProductName} **GitHub (英語)**]({GithubLink}) diff --git a/docs/xplat/src/content/jp/components/grids/list.mdx b/docs/xplat/src/content/jp/components/grids/list.mdx index 1356767b1b..b84d415b24 100644 --- a/docs/xplat/src/content/jp/components/grids/list.mdx +++ b/docs/xplat/src/content/jp/components/grids/list.mdx @@ -510,6 +510,60 @@ public onRadioChange(e: any) { +### スロット用の推奨要素 + +`title` と `subtitle` スロットにコンテンツを割り当てる場合、見出し要素 (`

`〜`

`) ではなく `` 要素を使用することをお勧めします。見出し要素にはフォント サイズ、行の高さ、マージンなどの組み込みスタイルが含まれており、コンポーネントが意図したタイポグラフィやレイアウトに干渉する可能性があります。`` を使用することで、コンポーネントのスタイルをそのまま継承できるニュートラルなコンテナーになります。 + +最良の結果を得るに、メディア コンテンツを対象とした `start` スロットには [``](../layouts/avatar.mdx) コンポーネントを使用することをお勧めします。アクションを対象とした `end` スロットには、表示するコンテンツの種類に応じて [``](../inputs/button.mdx)、[``](../inputs/switch.mdx)、[``](../inputs/checkbox.mdx) などのコンポーネントを使用することをお勧めします。ただし、これら 2 つのスロットには、表示するコンテンツに適していれば、`start` スロットに ``、`end` スロットに `