From 8ed47377f700a2472ce7ec915a51010b333f4e8a Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Tue, 12 May 2026 14:07:35 +0300 Subject: [PATCH 1/2] chore: add linting and spellcheck scripts to package.json - Added markdownlint for linting markdown files with commands for linting and fixing. - Introduced cspell for spellchecking markdown files. - Created a verify script to run both spellcheck and markdown linting. - Updated dependencies to include markdownlint-cli and cspell. --- .github/workflows/lint.yml | 91 +++ .markdownlint.json | 50 ++ .markdownlintignore | 4 + cspell.json | 285 +++++++ package-lock.json | 1587 +++++++++++++++++++++++++++++++++--- package.json | 8 +- 6 files changed, 1923 insertions(+), 102 deletions(-) create mode 100644 .github/workflows/lint.yml create mode 100644 .markdownlint.json create mode 100644 .markdownlintignore create mode 100644 cspell.json diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000000..41ecffdcc6 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,91 @@ +name: Lint + +permissions: + contents: read + +on: + pull_request: + branches: [master, vnext] + paths: + - 'docs/**/*.mdx' + - 'docs/**/*.md' + - '.markdownlint.json' + - 'cspell.json' + +jobs: + markdown-lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + + - run: npm ci + + - name: Get changed markdown files + id: changed + run: | + FILES=$(git diff --name-only --diff-filter=ACMR origin/${{ github.base_ref }}...HEAD -- 'docs/**/*.mdx' 'docs/**/*.md' | tr '\n' ' ') + echo "files=$FILES" >> "$GITHUB_OUTPUT" + echo "Found changed files: $FILES" + + - name: Markdownlint (changed files) + if: steps.changed.outputs.files != '' + run: npx markdownlint ${{ steps.changed.outputs.files }} + + - name: Summary + if: always() && steps.changed.outputs.files != '' + run: | + echo "## Markdownlint Results" >> "$GITHUB_STEP_SUMMARY" + RESULT=$(npx markdownlint ${{ steps.changed.outputs.files }} 2>&1 || true) + ERRORS=$(echo "$RESULT" | grep -c "MD[0-9]" || echo "0") + FILES_WITH_ERRORS=$(echo "$RESULT" | grep "MD[0-9]" | cut -d: -f1 | sort -u | wc -l || echo "0") + echo "**$ERRORS errors** in **$FILES_WITH_ERRORS files**" >> "$GITHUB_STEP_SUMMARY" + if [ "$ERRORS" -gt 0 ]; then + echo '```' >> "$GITHUB_STEP_SUMMARY" + echo "$RESULT" >> "$GITHUB_STEP_SUMMARY" + echo '```' >> "$GITHUB_STEP_SUMMARY" + fi + + spellcheck: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + + - run: npm ci + + - name: Get changed markdown files + id: changed + run: | + FILES=$(git diff --name-only --diff-filter=ACMR origin/${{ github.base_ref }}...HEAD -- 'docs/**/*.mdx' 'docs/**/*.md' | tr '\n' ' ') + echo "files=$FILES" >> "$GITHUB_OUTPUT" + + - name: CSpell (changed files) + if: steps.changed.outputs.files != '' + run: npx cspell --no-progress ${{ steps.changed.outputs.files }} + + - name: Summary + if: always() && steps.changed.outputs.files != '' + run: | + echo "## CSpell Results" >> "$GITHUB_STEP_SUMMARY" + RESULT=$(npx cspell --no-progress ${{ steps.changed.outputs.files }} 2>&1 || true) + ERRORS=$(echo "$RESULT" | grep -c "Unknown word" || echo "0") + FILES_WITH_ERRORS=$(echo "$RESULT" | grep "Unknown word" | cut -d: -f1 | sort -u | wc -l || echo "0") + echo "**$ERRORS errors** in **$FILES_WITH_ERRORS files**" >> "$GITHUB_STEP_SUMMARY" + if [ "$ERRORS" -gt 0 ]; then + echo '```' >> "$GITHUB_STEP_SUMMARY" + echo "$RESULT" >> "$GITHUB_STEP_SUMMARY" + echo '```' >> "$GITHUB_STEP_SUMMARY" + fi diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000000..eac9654d6b --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,50 @@ +{ + "default": true, + "MD001": false, + "MD003": false, + "MD004": { "style": "dash" }, + "MD007": { "indent": 2 }, + "MD009": { "br_spaces": 2 }, + "MD010": true, + "MD012": { "maximum": 4 }, + "MD013": false, + "MD014": true, + "MD018": true, + "MD019": true, + "MD022": false, + "MD023": true, + "MD024": false, + "MD025": false, + "MD026": { "punctuation": ".,;:" }, + "MD027": true, + "MD028": false, + "MD029": { "style": "ordered" }, + "MD030": true, + "MD031": true, + "MD032": false, + "MD033": false, + "MD034": false, + "MD035": { "style": "---" }, + "MD036": false, + "MD037": true, + "MD038": true, + "MD039": true, + "MD040": false, + "MD041": false, + "MD042": true, + "MD043": false, + "MD044": false, + "MD045": false, + "MD046": false, + "MD047": false, + "MD048": { "style": "backtick" }, + "MD049": false, + "MD050": { "style": "asterisk" }, + "MD051": false, + "MD052": false, + "MD055": false, + "MD056": false, + "MD058": true, + "MD059": false, + "MD060": false +} diff --git a/.markdownlintignore b/.markdownlintignore new file mode 100644 index 0000000000..86afcc0625 --- /dev/null +++ b/.markdownlintignore @@ -0,0 +1,4 @@ +node_modules/ +dist/ +.astro/ +generated/ diff --git a/cspell.json b/cspell.json new file mode 100644 index 0000000000..2ff9936a6e --- /dev/null +++ b/cspell.json @@ -0,0 +1,285 @@ +{ + "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json", + "version": "0.2", + "language": "en", + "useGitignore": true, + "ignorePaths": [ + "**/bin/**", + "**/obj/**", + "**/node_modules/**", + "**/dist/**", + "**/.git/**", + "**/.astro/**", + "**/generated/**", + "**/*.svg", + "**/*.png", + "**/*.jpg", + "**/*.min.js" + ], + "dictionaries": ["softwareTerms", "typescript", "node", "en_US"], + "enableFiletypes": ["markdown"], + "overrides": [ + { + "filename": "**/*.{md,mdx}", + "caseSensitive": false, + "language": "en", + "ignoreRegExpList": [ + "/https?:\\/\\/[^\\s)]+/", + "/`[^`]*`/", + "/```[\\s\\S]*?```/", + "/~~~[\\s\\S]*?~~~/" + ] + } + ], + "words": [ + "Figma", + "IgniteUI", + "Ignite", + "DocFX", + "Infragistics", + "infragistics", + "StackBlitz", + "Stackblitz", + "NuGet", + "Igx", + "Igr", + "Igc", + "Igb", + "IgxAccordion", + "IgxAction", + "IgxAutocomplete", + "IgxAvatar", + "IgxBadge", + "IgxBanner", + "IgxButton", + "IgxCalendar", + "IgxCard", + "IgxCarousel", + "IgxCheckbox", + "IgxChip", + "IgxCombo", + "IgxDate", + "IgxDialog", + "IgxDivider", + "IgxDock", + "IgxDrop", + "IgxExcel", + "IgxExpansion", + "IgxForOf", + "IgxGrid", + "IgxHierarchicalGrid", + "IgxIcon", + "IgxInput", + "IgxLabel", + "IgxLayout", + "IgxLinear", + "IgxList", + "IgxMask", + "IgxNavbar", + "IgxNavDrawer", + "IgxOverlay", + "IgxPaginator", + "IgxPie", + "IgxQueryBuilder", + "IgxRadio", + "IgxRating", + "IgxRipple", + "IgxSelect", + "IgxSimple", + "IgxSlider", + "IgxSnackbar", + "IgxSparkline", + "IgxSplitter", + "IgxSpreadsheet", + "IgxStepper", + "IgxSwitch", + "IgxTab", + "IgxTabs", + "IgxText", + "IgxTheme", + "IgxTile", + "IgxTime", + "IgxToast", + "IgxToggle", + "IgxTooltip", + "IgxTransaction", + "IgxTree", + "IgxTreeGrid", + "GeoMap", + "OpenStreetMap", + "OSM", + "BingMaps", + "ESRI", + "ArcGIS", + "arcgisonline", + "bingmapsportal", + "basemap", + "Polyline", + "Polylines", + "Polygons", + "PolylineShape", + "PolylineSeries", + "PolylineFragment", + "PolylineStyle", + "PolylineObjects", + "PolylinePaths", + "shapefile", + "shapefiles", + "Shapefile", + "Shapefiles", + "workbooks", + "workbook", + "workbook's", + "workheets", + "workitems", + "workitem", + "workgroup", + "ColorScale", + "Shiki", + "Schwartzian", + "GroupArea", + "anchorjs", + "autosized", + "autosize", + "adduser", + "bfor", + "xdate", + "undecorate", + "DockManager", + "deprioritized", + "togglable", + "behaviour", + "viewbox", + "myproduct", + "chatbots", + "toolkits", + "rendermode", + "steptypes", + "XLXS", + "NavDrawer", + "datepicker", + "datepicker's", + "autocomplete", + "materialicons", + "webfont", + "transpiled", + "async", + "readonly", + "Treemap", + "Treemaps", + "treemaps", + "backcolor", + "gridlines", + "trendlines", + "trendline", + "crosshairs", + "tickmarks", + "flexbox", + "Blazor", + "WCAG", + "ZHHANS", + "ZHHANT", + "Consolas", + "codesandbox", + "treeshaken", + "Configurator", + "configurator", + "Autosizing", + "groupable", + "groupby", + "hgrid", + "childdatakey", + "primaryforeignkey", + "noscroll", + "zoomable", + "lazyload", + "fontset", + "Tabbar", + "tabbar", + "monthpicker", + "timepicker", + "zoomslider", + "sparkline", + "sparklines", + "Sparkline", + "Northwind", + "changei18n", + "Titillium", + "finjs", + "OHLC", + "toggleable", + "templatable", + "fintech", + "daterangepicker", + "DateRangePicker", + "ungroup", + "ungroups", + "ungrouping", + "lastname", + "firstname", + "interactable", + "gifs", + "Gantt", + "gantt", + "virtualizes", + "retemplate", + "retemplated", + "Geospatial", + "COUNTIF", + "SUMIF", + "AVERAGEIF", + "Contentful", + "wrappanel", + "stackpanel", + "Squarified", + "squarified", + "ngswitch", + "ngSwitch", + "navigations", + "Grayscale", + "appbuilder", + "AppBuilder", + "Zoombar", + "webcomponents", + "unfocusable", + "unclickable", + "toolsets", + "SignalR", + "signalr", + "retheming", + "multiview", + "gridline", + "choropleth", + "Bollinger", + "artboard", + "antumbra", + "NOAA", + "Noto", + "coalescences", + "Lambo", + "valuekey", + "CSISS", + "NORTAD", + "Cruzin", + "INPC", + "batchediting", + "updateparameters", + "alldata", + "subtag", + "junie", + "xplat", + "agentic", + "astro", + "mdx", + "frontmatter", + "docfx", + "docConfig", + "docComponents", + "pagefind", + "theming", + "treegrid", + "hierarchicalgrid", + "pivotgrid", + "canonicalLink" + ] +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d7fa55e900..52e7906d01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,9 @@ "@types/jsdom": "^28.0.1", "astro": "^6.1.6", "cross-env": "^10.1.0", + "cspell": "^9.2.2", "igniteui-theming": "^25.0.2", + "markdownlint-cli": "^0.48.0", "pagefind": "^1.5.2", "sass-embedded": "^1.98.0", "typescript": "^5.4.0" @@ -428,6 +430,635 @@ "node": ">= 20.12.0" } }, + "node_modules/@cspell/cspell-bundled-dicts": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-9.8.0.tgz", + "integrity": "sha512-MpXFpVyBPfJQ1YuVotljqUaGf6lWuf+fuWBBgs0PHFYTSjRPWuIxviAaCDnup/CJLLH60xQL4IlcQe4TOjzljw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/dict-ada": "^4.1.1", + "@cspell/dict-al": "^1.1.1", + "@cspell/dict-aws": "^4.0.17", + "@cspell/dict-bash": "^4.2.2", + "@cspell/dict-companies": "^3.2.11", + "@cspell/dict-cpp": "^7.0.2", + "@cspell/dict-cryptocurrencies": "^5.0.5", + "@cspell/dict-csharp": "^4.0.8", + "@cspell/dict-css": "^4.1.1", + "@cspell/dict-dart": "^2.3.2", + "@cspell/dict-data-science": "^2.0.13", + "@cspell/dict-django": "^4.1.6", + "@cspell/dict-docker": "^1.1.17", + "@cspell/dict-dotnet": "^5.0.13", + "@cspell/dict-elixir": "^4.0.8", + "@cspell/dict-en_us": "^4.4.33", + "@cspell/dict-en-common-misspellings": "^2.1.12", + "@cspell/dict-en-gb-mit": "^3.1.22", + "@cspell/dict-filetypes": "^3.0.18", + "@cspell/dict-flutter": "^1.1.1", + "@cspell/dict-fonts": "^4.0.6", + "@cspell/dict-fsharp": "^1.1.1", + "@cspell/dict-fullstack": "^3.2.9", + "@cspell/dict-gaming-terms": "^1.1.2", + "@cspell/dict-git": "^3.1.0", + "@cspell/dict-golang": "^6.0.26", + "@cspell/dict-google": "^1.0.9", + "@cspell/dict-haskell": "^4.0.6", + "@cspell/dict-html": "^4.0.15", + "@cspell/dict-html-symbol-entities": "^4.0.5", + "@cspell/dict-java": "^5.0.12", + "@cspell/dict-julia": "^1.1.1", + "@cspell/dict-k8s": "^1.0.12", + "@cspell/dict-kotlin": "^1.1.1", + "@cspell/dict-latex": "^5.1.0", + "@cspell/dict-lorem-ipsum": "^4.0.5", + "@cspell/dict-lua": "^4.0.8", + "@cspell/dict-makefile": "^1.0.5", + "@cspell/dict-markdown": "^2.0.16", + "@cspell/dict-monkeyc": "^1.0.12", + "@cspell/dict-node": "^5.0.9", + "@cspell/dict-npm": "^5.2.38", + "@cspell/dict-php": "^4.1.1", + "@cspell/dict-powershell": "^5.0.15", + "@cspell/dict-public-licenses": "^2.0.16", + "@cspell/dict-python": "^4.2.26", + "@cspell/dict-r": "^2.1.1", + "@cspell/dict-ruby": "^5.1.1", + "@cspell/dict-rust": "^4.1.2", + "@cspell/dict-scala": "^5.0.9", + "@cspell/dict-shell": "^1.1.2", + "@cspell/dict-software-terms": "^5.2.2", + "@cspell/dict-sql": "^2.2.1", + "@cspell/dict-svelte": "^1.0.7", + "@cspell/dict-swift": "^2.0.6", + "@cspell/dict-terraform": "^1.1.3", + "@cspell/dict-typescript": "^3.2.3", + "@cspell/dict-vue": "^3.0.5", + "@cspell/dict-zig": "^1.0.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-json-reporter": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-json-reporter/-/cspell-json-reporter-9.8.0.tgz", + "integrity": "sha512-nqUaSo9T7l8KrE22gc7ZIs+zvP7ak1i7JqGdRs8sGvh2Ijqj43qYQLePgb1b/vm8a1bavnc51m+vf05hpd3g3Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-types": "9.8.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-performance-monitor": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-performance-monitor/-/cspell-performance-monitor-9.8.0.tgz", + "integrity": "sha512-IsrXYzn23yJICIQ915ACdf+2lNEcFNTu5BIQt3khHOsGVvZ9/AZYpu9Dk825vUyZG7RHg2Oi6dYNiJtULG4ouQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20.18" + } + }, + "node_modules/@cspell/cspell-pipe": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-pipe/-/cspell-pipe-9.8.0.tgz", + "integrity": "sha512-ISEUD8PHYkd2Ktafc6hFfIXdGKYUvthA09NbwwZsWmOqYyk4wWKHZKqyyxD+BcrFwOyMOJcD8OEvIjkRQp2SJw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-resolver": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-resolver/-/cspell-resolver-9.8.0.tgz", + "integrity": "sha512-PZJj56BZpKfMxOzWkyt7b+aIXObe+8Ku/zLI4xDXPSuQPENbHBFHfPIZx68CyGEkanKxZ1ewKVx/FT1FUy+wDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "global-directory": "^5.0.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-service-bus": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-service-bus/-/cspell-service-bus-9.8.0.tgz", + "integrity": "sha512-P45sd2nqwcqhulBBbQnZB/JNcobecTrP4Ky3vmEq0cprsvavc+ZoHF9U2Ql5ghMSUzjrF2n1aNzZ8cH4IlsnKg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-types": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-types/-/cspell-types-9.8.0.tgz", + "integrity": "sha512-7Ge4UD6SCA49Tcc3+GTlz3Xn4cqVUAXtDO0u9IeHvJgkN3Me2Rw2GB/CtGmhKST3YeEeZMX7ww09TdHMUJlehw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-worker": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/cspell-worker/-/cspell-worker-9.8.0.tgz", + "integrity": "sha512-W8FLdE3MXPLbWtAXciILQhk9CHd6Mt+HRjZHM8m+dwE1Bc2TAjUai8kIxsdhHUq58p7gYY2ekr5sg1uYOUgTAA==", + "dev": true, + "license": "MIT", + "dependencies": { + "cspell-lib": "9.8.0" + }, + "engines": { + "node": ">=20.18" + } + }, + "node_modules/@cspell/dict-ada": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-ada/-/dict-ada-4.1.1.tgz", + "integrity": "sha512-E+0YW9RhZod/9Qy2gxfNZiHJjCYFlCdI69br1eviQQWB8yOTJX0JHXLs79kOYhSW0kINPVUdvddEBe6Lu6CjGQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-al": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-al/-/dict-al-1.1.1.tgz", + "integrity": "sha512-sD8GCaZetgQL4+MaJLXqbzWcRjfKVp8x+px3HuCaaiATAAtvjwUQ5/Iubiqwfd1boIh2Y1/3EgM3TLQ7Q8e0wQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-aws": { + "version": "4.0.17", + "resolved": "https://registry.npmjs.org/@cspell/dict-aws/-/dict-aws-4.0.17.tgz", + "integrity": "sha512-ORcblTWcdlGjIbWrgKF+8CNEBQiLVKdUOFoTn0KPNkAYnFcdPP0muT4892h7H4Xafh3j72wqB4/loQ6Nti9E/w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-bash": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-bash/-/dict-bash-4.2.2.tgz", + "integrity": "sha512-kyWbwtX3TsCf5l49gGQIZkRLaB/P8g73GDRm41Zu8Mv51kjl2H7Au0TsEvHv7jzcsRLS6aUYaZv6Zsvk1fOz+Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/dict-shell": "1.1.2" + } + }, + "node_modules/@cspell/dict-companies": { + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/@cspell/dict-companies/-/dict-companies-3.2.11.tgz", + "integrity": "sha512-0cmafbcz2pTHXLd59eLR1gvDvN6aWAOM0+cIL4LLF9GX9yB2iKDNrKsvs4tJRqutoaTdwNFBbV0FYv+6iCtebQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-cpp": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-cpp/-/dict-cpp-7.0.2.tgz", + "integrity": "sha512-dfbeERiVNeqmo/npivdR6rDiBCqZi3QtjH2Z0HFcXwpdj6i97dX1xaKyK2GUsO/p4u1TOv63Dmj5Vm48haDpuA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-cryptocurrencies": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-cryptocurrencies/-/dict-cryptocurrencies-5.0.5.tgz", + "integrity": "sha512-R68hYYF/rtlE6T/dsObStzN5QZw+0aQBinAXuWCVqwdS7YZo0X33vGMfChkHaiCo3Z2+bkegqHlqxZF4TD3rUA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-csharp": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-csharp/-/dict-csharp-4.0.8.tgz", + "integrity": "sha512-qmk45pKFHSxckl5mSlbHxmDitSsGMlk/XzFgt7emeTJWLNSTUK//MbYAkBNRtfzB4uD7pAFiKgpKgtJrTMRnrQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-css/-/dict-css-4.1.1.tgz", + "integrity": "sha512-y/Vgo6qY08e1t9OqR56qjoFLBCpi4QfWMf2qzD1l9omRZwvSMQGRPz4x0bxkkkU4oocMAeztjzCsmLew//c/8w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-dart": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-dart/-/dict-dart-2.3.2.tgz", + "integrity": "sha512-sUiLW56t9gfZcu8iR/5EUg+KYyRD83Cjl3yjDEA2ApVuJvK1HhX+vn4e4k4YfjpUQMag8XO2AaRhARE09+/rqw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-data-science": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/@cspell/dict-data-science/-/dict-data-science-2.0.13.tgz", + "integrity": "sha512-l1HMEhBJkPmw4I2YGVu2eBSKM89K9pVF+N6qIr5Uo5H3O979jVodtuwP8I7LyPrJnC6nz28oxeGRCLh9xC5CVA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-django": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-django/-/dict-django-4.1.6.tgz", + "integrity": "sha512-SdbSFDGy9ulETqNz15oWv2+kpWLlk8DJYd573xhIkeRdcXOjskRuxjSZPKfW7O3NxN/KEf3gm3IevVOiNuFS+w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-docker": { + "version": "1.1.17", + "resolved": "https://registry.npmjs.org/@cspell/dict-docker/-/dict-docker-1.1.17.tgz", + "integrity": "sha512-OcnVTIpHIYYKhztNTyK8ShAnXTfnqs43hVH6p0py0wlcwRIXe5uj4f12n7zPf2CeBI7JAlPjEsV0Rlf4hbz/xQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-dotnet": { + "version": "5.0.13", + "resolved": "https://registry.npmjs.org/@cspell/dict-dotnet/-/dict-dotnet-5.0.13.tgz", + "integrity": "sha512-xPp7jMnFpOri7tzmqmm/dXMolXz1t2bhNqxYkOyMqXhvs08oc7BFs+EsbDY0X7hqiISgeFZGNqn0dOCr+ncPYw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-elixir": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-elixir/-/dict-elixir-4.0.8.tgz", + "integrity": "sha512-CyfphrbMyl4Ms55Vzuj+mNmd693HjBFr9hvU+B2YbFEZprE5AG+EXLYTMRWrXbpds4AuZcvN3deM2XVB80BN/Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-en_us": { + "version": "4.4.33", + "resolved": "https://registry.npmjs.org/@cspell/dict-en_us/-/dict-en_us-4.4.33.tgz", + "integrity": "sha512-zWftVqfUStDA37wO1ZNDN1qMJOfcxELa8ucHW8W8wBAZY3TK5Nb6deLogCK/IJi/Qljf30dwwuqqv84Qqle9Tw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-en-common-misspellings": { + "version": "2.1.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-en-common-misspellings/-/dict-en-common-misspellings-2.1.12.tgz", + "integrity": "sha512-14Eu6QGqyksqOd4fYPuRb58lK1Va7FQK9XxFsRKnZU8LhL3N+kj7YKDW+7aIaAN/0WGEqslGP6lGbQzNti8Akw==", + "dev": true, + "license": "CC BY-SA 4.0" + }, + "node_modules/@cspell/dict-en-gb-mit": { + "version": "3.1.22", + "resolved": "https://registry.npmjs.org/@cspell/dict-en-gb-mit/-/dict-en-gb-mit-3.1.22.tgz", + "integrity": "sha512-xE5Vg6gGdMkZ1Ep6z9SJMMioGkkT1GbxS5Mm0U3Ey1/H68P0G7cJcyiVr1CARxFbLqKE4QUpoV1o6jz1Z5Yl9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-filetypes": { + "version": "3.0.18", + "resolved": "https://registry.npmjs.org/@cspell/dict-filetypes/-/dict-filetypes-3.0.18.tgz", + "integrity": "sha512-yU7RKD/x1IWmDLzWeiItMwgV+6bUcU/af23uS0+uGiFUbsY1qWV/D4rxlAAO6Z7no3J2z8aZOkYIOvUrJq0Rcw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-flutter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-flutter/-/dict-flutter-1.1.1.tgz", + "integrity": "sha512-UlOzRcH2tNbFhZmHJN48Za/2/MEdRHl2BMkCWZBYs+30b91mWvBfzaN4IJQU7dUZtowKayVIF9FzvLZtZokc5A==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-fonts": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-fonts/-/dict-fonts-4.0.6.tgz", + "integrity": "sha512-aR/0csY01dNb0A1tw/UmN9rKgHruUxsYsvXu6YlSBJFu60s26SKr/k1o4LavpHTQ+lznlYMqAvuxGkE4Flliqw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-fsharp": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-fsharp/-/dict-fsharp-1.1.1.tgz", + "integrity": "sha512-imhs0u87wEA4/cYjgzS0tAyaJpwG7vwtC8UyMFbwpmtw+/bgss+osNfyqhYRyS/ehVCWL17Ewx2UPkexjKyaBA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-fullstack": { + "version": "3.2.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-fullstack/-/dict-fullstack-3.2.9.tgz", + "integrity": "sha512-diZX+usW5aZ4/b2T0QM/H/Wl9aNMbdODa1Jq0ReBr/jazmNeWjd+PyqeVgzd1joEaHY+SAnjrf/i9CwKd2ZtWQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-gaming-terms": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-gaming-terms/-/dict-gaming-terms-1.1.2.tgz", + "integrity": "sha512-9XnOvaoTBscq0xuD6KTEIkk9hhdfBkkvJAIsvw3JMcnp1214OCGW8+kako5RqQ2vTZR3Tnf3pc57o7VgkM0q1Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-git": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@cspell/dict-git/-/dict-git-3.1.0.tgz", + "integrity": "sha512-KEt9zGkxqGy2q1nwH4CbyqTSv5nadpn8BAlDnzlRcnL0Xb3LX9xTgSGShKvzb0bw35lHoYyLWN2ZKAqbC4pgGQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-golang": { + "version": "6.0.26", + "resolved": "https://registry.npmjs.org/@cspell/dict-golang/-/dict-golang-6.0.26.tgz", + "integrity": "sha512-YKA7Xm5KeOd14v5SQ4ll6afe9VSy3a2DWM7L9uBq4u3lXToRBQ1W5PRa+/Q9udd+DTURyVVnQ+7b9cnOlNxaRg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-google": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-google/-/dict-google-1.0.9.tgz", + "integrity": "sha512-biL65POqialY0i4g6crj7pR6JnBkbsPovB2WDYkj3H4TuC/QXv7Pu5pdPxeUJA6TSCHI7T5twsO4VSVyRxD9CA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-haskell": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-haskell/-/dict-haskell-4.0.6.tgz", + "integrity": "sha512-ib8SA5qgftExpYNjWhpYIgvDsZ/0wvKKxSP+kuSkkak520iPvTJumEpIE+qPcmJQo4NzdKMN8nEfaeci4OcFAQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-html": { + "version": "4.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-html/-/dict-html-4.0.15.tgz", + "integrity": "sha512-GJYnYKoD9fmo2OI0aySEGZOjThnx3upSUvV7mmqUu8oG+mGgzqm82P/f7OqsuvTaInZZwZbo+PwJQd/yHcyFIw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-html-symbol-entities": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-html-symbol-entities/-/dict-html-symbol-entities-4.0.5.tgz", + "integrity": "sha512-429alTD4cE0FIwpMucvSN35Ld87HCyuM8mF731KU5Rm4Je2SG6hmVx7nkBsLyrmH3sQukTcr1GaiZsiEg8svPA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-java": { + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-java/-/dict-java-5.0.12.tgz", + "integrity": "sha512-qPSNhTcl7LGJ5Qp6VN71H8zqvRQK04S08T67knMq9hTA8U7G1sTKzLmBaDOFhq17vNX/+rT+rbRYp+B5Nwza1A==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-julia": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-julia/-/dict-julia-1.1.1.tgz", + "integrity": "sha512-WylJR9TQ2cgwd5BWEOfdO3zvDB+L7kYFm0I9u0s9jKHWQ6yKmfKeMjU9oXxTBxIufhCXm92SKwwVNAC7gjv+yA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-k8s": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-k8s/-/dict-k8s-1.0.12.tgz", + "integrity": "sha512-2LcllTWgaTfYC7DmkMPOn9GsBWsA4DZdlun4po8s2ysTP7CPEnZc1ZfK6pZ2eI4TsZemlUQQ+NZxMe9/QutQxg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-kotlin": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-kotlin/-/dict-kotlin-1.1.1.tgz", + "integrity": "sha512-J3NzzfgmxRvEeOe3qUXnSJQCd38i/dpF9/t3quuWh6gXM+krsAXP75dY1CzDmS8mrJAlBdVBeAW5eAZTD8g86Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-latex": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@cspell/dict-latex/-/dict-latex-5.1.0.tgz", + "integrity": "sha512-qxT4guhysyBt0gzoliXYEBYinkAdEtR2M7goRaUH0a7ltCsoqqAeEV8aXYRIdZGcV77gYSobvu3jJL038tlPAw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-lorem-ipsum": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-lorem-ipsum/-/dict-lorem-ipsum-4.0.5.tgz", + "integrity": "sha512-9a4TJYRcPWPBKkQAJ/whCu4uCAEgv/O2xAaZEI0n4y1/l18Yyx8pBKoIX5QuVXjjmKEkK7hi5SxyIsH7pFEK9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-lua": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-lua/-/dict-lua-4.0.8.tgz", + "integrity": "sha512-N4PkgNDMu9JVsRu7JBS/3E/dvfItRgk9w5ga2dKq+JupP2Y3lojNaAVFhXISh4Y0a6qXDn2clA6nvnavQ/jjLA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-makefile": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-makefile/-/dict-makefile-1.0.5.tgz", + "integrity": "sha512-4vrVt7bGiK8Rx98tfRbYo42Xo2IstJkAF4tLLDMNQLkQ86msDlYSKG1ZCk8Abg+EdNcFAjNhXIiNO+w4KflGAQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-markdown": { + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/@cspell/dict-markdown/-/dict-markdown-2.0.16.tgz", + "integrity": "sha512-976RRqKv6cwhrxdFCQP2DdnBVB86BF57oQtPHy4Zbf4jF/i2Oy29MCrxirnOBalS1W6KQeto7NdfDXRAwkK4PQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@cspell/dict-css": "^4.1.1", + "@cspell/dict-html": "^4.0.15", + "@cspell/dict-html-symbol-entities": "^4.0.5", + "@cspell/dict-typescript": "^3.2.3" + } + }, + "node_modules/@cspell/dict-monkeyc": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-monkeyc/-/dict-monkeyc-1.0.12.tgz", + "integrity": "sha512-MN7Vs11TdP5mbdNFQP5x2Ac8zOBm97ARg6zM5Sb53YQt/eMvXOMvrep7+/+8NJXs0jkp70bBzjqU4APcqBFNAw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-node": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-node/-/dict-node-5.0.9.tgz", + "integrity": "sha512-hO+ga+uYZ/WA4OtiMEyKt5rDUlUyu3nXMf8KVEeqq2msYvAPdldKBGH7lGONg6R/rPhv53Rb+0Y1SLdoK1+7wQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-npm": { + "version": "5.2.38", + "resolved": "https://registry.npmjs.org/@cspell/dict-npm/-/dict-npm-5.2.38.tgz", + "integrity": "sha512-21ucGRPYYhr91C2cDBoMPTrcIOStQv33xOqJB0JLoC5LAs2Sfj9EoPGhGb+gIFVHz6Ia7JQWE2SJsOVFJD1wmg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-php": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-php/-/dict-php-4.1.1.tgz", + "integrity": "sha512-EXelI+4AftmdIGtA8HL8kr4WlUE11OqCSVlnIgZekmTkEGSZdYnkFdiJ5IANSALtlQ1mghKjz+OFqVs6yowgWA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-powershell": { + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-powershell/-/dict-powershell-5.0.15.tgz", + "integrity": "sha512-l4S5PAcvCFcVDMJShrYD0X6Huv9dcsQPlsVsBGbH38wvuN7gS7+GxZFAjTNxDmTY1wrNi1cCatSg6Pu2BW4rgg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-public-licenses": { + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/@cspell/dict-public-licenses/-/dict-public-licenses-2.0.16.tgz", + "integrity": "sha512-EQRrPvEOmwhwWezV+W7LjXbIBjiy6y/shrET6Qcpnk3XANTzfvWflf9PnJ5kId/oKWvihFy0za0AV1JHd03pSQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-python": { + "version": "4.2.26", + "resolved": "https://registry.npmjs.org/@cspell/dict-python/-/dict-python-4.2.26.tgz", + "integrity": "sha512-hbjN6BjlSgZOG2dA2DtvYNGBM5Aq0i0dHaZjMOI9K/9vRicVvKbcCiBSSrR3b+jwjhQL5ff7HwG5xFaaci0GQA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/dict-data-science": "^2.0.13" + } + }, + "node_modules/@cspell/dict-r": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-r/-/dict-r-2.1.1.tgz", + "integrity": "sha512-71Ka+yKfG4ZHEMEmDxc6+blFkeTTvgKbKAbwiwQAuKl3zpqs1Y0vUtwW2N4b3LgmSPhV3ODVY0y4m5ofqDuKMw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-ruby": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-ruby/-/dict-ruby-5.1.1.tgz", + "integrity": "sha512-LHrp84oEV6q1ZxPPyj4z+FdKyq1XAKYPtmGptrd+uwHbrF/Ns5+fy6gtSi7pS+uc0zk3JdO9w/tPK+8N1/7WUA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-rust": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-rust/-/dict-rust-4.1.2.tgz", + "integrity": "sha512-O1FHrumYcO+HZti3dHfBPUdnDFkI+nbYK3pxYmiM1sr+G0ebOd6qchmswS0Wsc6ZdEVNiPYJY/gZQR6jfW3uOg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-scala": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-scala/-/dict-scala-5.0.9.tgz", + "integrity": "sha512-AjVcVAELgllybr1zk93CJ5wSUNu/Zb5kIubymR/GAYkMyBdYFCZ3Zbwn4Zz8GJlFFAbazABGOu0JPVbeY59vGg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-shell": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-shell/-/dict-shell-1.1.2.tgz", + "integrity": "sha512-WqOUvnwcHK1X61wAfwyXq04cn7KYyskg90j4lLg3sGGKMW9Sq13hs91pqrjC44Q+lQLgCobrTkMDw9Wyl9nRFA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-software-terms": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-5.2.2.tgz", + "integrity": "sha512-0CaYd6TAsKtEoA7tNswm1iptEblTzEe3UG8beG2cpSTHk7afWIVMtJLgXDv0f/Li67Lf3Z1Jf3JeXR7GsJ2TRw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-sql": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-sql/-/dict-sql-2.2.1.tgz", + "integrity": "sha512-qDHF8MpAYCf4pWU8NKbnVGzkoxMNrFqBHyG/dgrlic5EQiKANCLELYtGlX5auIMDLmTf1inA0eNtv74tyRJ/vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-svelte": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-svelte/-/dict-svelte-1.0.7.tgz", + "integrity": "sha512-hGZsGqP0WdzKkdpeVLBivRuSNzOTvN036EBmpOwxH+FTY2DuUH7ecW+cSaMwOgmq5JFSdTcbTNFlNC8HN8lhaQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-swift": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-swift/-/dict-swift-2.0.6.tgz", + "integrity": "sha512-PnpNbrIbex2aqU1kMgwEKvCzgbkHtj3dlFLPMqW1vSniop7YxaDTtvTUO4zA++ugYAEL+UK8vYrBwDPTjjvSnA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-terraform": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@cspell/dict-terraform/-/dict-terraform-1.1.3.tgz", + "integrity": "sha512-gr6wxCydwSFyyBKhBA2xkENXtVFToheqYYGFvlMZXWjviynXmh+NK/JTvTCk/VHk3+lzbO9EEQKee6VjrAUSbA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-typescript": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@cspell/dict-typescript/-/dict-typescript-3.2.3.tgz", + "integrity": "sha512-zXh1wYsNljQZfWWdSPYwQhpwiuW0KPW1dSd8idjMRvSD0aSvWWHoWlrMsmZeRl4qM4QCEAjua8+cjflm41cQBg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-vue": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-vue/-/dict-vue-3.0.5.tgz", + "integrity": "sha512-Mqutb8jbM+kIcywuPQCCaK5qQHTdaByoEO2J9LKFy3sqAdiBogNkrplqUK0HyyRFgCfbJUgjz3N85iCMcWH0JA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-zig": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@cspell/dict-zig/-/dict-zig-1.0.0.tgz", + "integrity": "sha512-XibBIxBlVosU06+M6uHWkFeT0/pW5WajDRYdXG2CgHnq85b0TI/Ks0FuBJykmsgi2CAD3Qtx8UHFEtl/DSFnAQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dynamic-import": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/dynamic-import/-/dynamic-import-9.8.0.tgz", + "integrity": "sha512-wMgb32lqG9g6lCipUQsY9Bk5idXPDz7wvzOqEsU1M2HmNYmdE1wfPoRpfQfsVL965iG3+6h8QLr2+8FKpweFEQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/url": "9.8.0", + "import-meta-resolve": "^4.2.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/filetypes": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/filetypes/-/filetypes-9.8.0.tgz", + "integrity": "sha512-yHvtYn9qt6zykua77sNzTcf7HrG/dpo/+2pCMGSrfSrQypSNT6FUFvMS04W7kwhP86U1GkCjppNykXuoH3cqug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/rpc": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/rpc/-/rpc-9.8.0.tgz", + "integrity": "sha512-t4lHEa254W+PePXNQ1noW7QhQxz/mhsJ9X8LEt0ILzBbPWCJzN+JuaM7EiolIPiwxtfxpMwKx9482kt4eTja7A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20.18" + } + }, + "node_modules/@cspell/strong-weak-map": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/strong-weak-map/-/strong-weak-map-9.8.0.tgz", + "integrity": "sha512-HocksAqZ0JcWA5oWO7TIlOCftXVGkPGzbeFlCRRrjJpZmYQH+4NdeEXyQC6T89NGocp45td/CgyBcAaFMy1N9w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/url": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/@cspell/url/-/url-9.8.0.tgz", + "integrity": "sha512-LY1lFiZLTQF/ma1ilfKmRmFmEOw0RfYhyl0UMhY7/d93b+kiDMhxP/9Qir4+5LyiRncaE3++ZcWno9Hya+ssRg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, "node_modules/@csstools/color-helpers": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz", @@ -2692,6 +3323,13 @@ "undici-types": "^7.21.0" } }, + "node_modules/@types/katex": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz", + "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/mdast": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", @@ -3021,6 +3659,13 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/array-timsort": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz", + "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==", + "dev": true, + "license": "MIT" + }, "node_modules/astring": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz", @@ -3133,6 +3778,16 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/balanced-match": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", + "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "18 || 20 || >=22" + } + }, "node_modules/bidi-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz", @@ -3173,6 +3828,19 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "license": "ISC" }, + "node_modules/brace-expansion": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz", + "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^4.0.2" + }, + "engines": { + "node": "18 || 20 || >=22" + } + }, "node_modules/buffer-builder": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", @@ -3221,6 +3889,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/ccount": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", @@ -3231,6 +3909,35 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chalk": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz", + "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/chalk-template": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-1.1.2.tgz", + "integrity": "sha512-2bxTP2yUH7AJj/VAXfcA+4IcWGdQ87HwBANLt5XxGTeomo8yG0y95N1um9i5StvhT/Bl0/2cARA5v1PpPXUxUA==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "^5.2.0" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/chalk/chalk-template?sponsor=1" + } + }, "node_modules/character-entities": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", @@ -3301,6 +4008,23 @@ "node": ">=8" } }, + "node_modules/clear-module": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/clear-module/-/clear-module-4.1.2.tgz", + "integrity": "sha512-LWAxzHqdHsAZlPlEyJ2Poz6AIs384mPeqLVCru2p0BrP9G/kVGuhNyZYClLO6cXlnuJjzC8xtsJIuMjKqLXoAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^2.0.0", + "resolve-from": "^5.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -3378,6 +4102,20 @@ "node": ">=16" } }, + "node_modules/comment-json": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.6.2.tgz", + "integrity": "sha512-R2rze/hDX30uul4NZoIZ76ImSJLFxn/1/ZxtKC1L77y2X1k+yYu1joKbAtMA2Fg3hZrTOiw0I5mwVMo0cf250w==", + "dev": true, + "license": "MIT", + "dependencies": { + "array-timsort": "^1.0.3", + "esprima": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/common-ancestor-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-2.0.0.tgz", @@ -3500,6 +4238,214 @@ "uncrypto": "^0.1.3" } }, + "node_modules/cspell": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell/-/cspell-9.8.0.tgz", + "integrity": "sha512-qL0VErMSn8BDxaPxcV+9uenffgjPS+5Jfz+m4rCsvYjzLwr7AaaJBWWSV2UiAe/4cturae8n8qzxiGnbbazkRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-json-reporter": "9.8.0", + "@cspell/cspell-performance-monitor": "9.8.0", + "@cspell/cspell-pipe": "9.8.0", + "@cspell/cspell-types": "9.8.0", + "@cspell/cspell-worker": "9.8.0", + "@cspell/dynamic-import": "9.8.0", + "@cspell/url": "9.8.0", + "ansi-regex": "^6.2.2", + "chalk": "^5.6.2", + "chalk-template": "^1.1.2", + "commander": "^14.0.3", + "cspell-config-lib": "9.8.0", + "cspell-dictionary": "9.8.0", + "cspell-gitignore": "9.8.0", + "cspell-glob": "9.8.0", + "cspell-io": "9.8.0", + "cspell-lib": "9.8.0", + "fast-json-stable-stringify": "^2.1.0", + "flatted": "^3.4.2", + "semver": "^7.7.4", + "tinyglobby": "^0.2.15" + }, + "bin": { + "cspell": "bin.mjs", + "cspell-esm": "bin.mjs" + }, + "engines": { + "node": ">=20.18" + }, + "funding": { + "url": "https://github.com/streetsidesoftware/cspell?sponsor=1" + } + }, + "node_modules/cspell-config-lib": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-config-lib/-/cspell-config-lib-9.8.0.tgz", + "integrity": "sha512-gMJBAgYPvvO+uDFLUcGWaTu6/e+r8mm4GD4rQfWa/yV4F9fj+yOYLIMZqLWRvT1moHZX1FxyVvUbJcmZ1gfebg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-types": "9.8.0", + "comment-json": "^4.6.2", + "smol-toml": "^1.6.1", + "yaml": "^2.8.3" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-dictionary": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-dictionary/-/cspell-dictionary-9.8.0.tgz", + "integrity": "sha512-QW4hdkWcrxZA1QNqi26U0S/U3/V+tKCm7JaaesEJW2F6Ao+23AbHVwidyAVtXaEhGkn6PxB+epKrrAa6nE69qA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-performance-monitor": "9.8.0", + "@cspell/cspell-pipe": "9.8.0", + "@cspell/cspell-types": "9.8.0", + "cspell-trie-lib": "9.8.0", + "fast-equals": "^6.0.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-gitignore": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-gitignore/-/cspell-gitignore-9.8.0.tgz", + "integrity": "sha512-SDUa1DmSfT20+JH7XtyzcEL9KfurneoR/XbmlrtPQZP/LUHXh3yz4x/0vFIkEFXNWdSckY0QdWTz8DaxClCf4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/url": "9.8.0", + "cspell-glob": "9.8.0", + "cspell-io": "9.8.0" + }, + "bin": { + "cspell-gitignore": "bin.mjs" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-glob": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-glob/-/cspell-glob-9.8.0.tgz", + "integrity": "sha512-Uvj/iHXs+jpsJyIEnhEoJTWXb1GVyZ9T05L5JFtZfsQNXrh8SRDQPscjxbg4okKr63N7WevfioQum/snHNYvmw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/url": "9.8.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-grammar": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-grammar/-/cspell-grammar-9.8.0.tgz", + "integrity": "sha512-01XMq2vhPS0Gvxnfed9uvOwH+3cXddHYxW0PwCE+SZdcC6TN8yM6glByuLt1qFustAmQVE5GSr7uAY9o4pZQRg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-pipe": "9.8.0", + "@cspell/cspell-types": "9.8.0" + }, + "bin": { + "cspell-grammar": "bin.mjs" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-io": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-io/-/cspell-io-9.8.0.tgz", + "integrity": "sha512-JINaEWQEzR4f2upwdZOFcft+nBvQgizJfrOLszxG3p+BIzljnGklqE/nUtLFZpBu0oMJvuM/Fd+GsWor0yP7Xw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-service-bus": "9.8.0", + "@cspell/url": "9.8.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-lib": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-lib/-/cspell-lib-9.8.0.tgz", + "integrity": "sha512-G2TtPcye5QE5ev3YgWq42UOJLpTZ6naO/47oIm+jmeSYbgnbcOSThnEE7uMycx+TTNOz/vJVFpZmQyt0bWCftw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-bundled-dicts": "9.8.0", + "@cspell/cspell-performance-monitor": "9.8.0", + "@cspell/cspell-pipe": "9.8.0", + "@cspell/cspell-resolver": "9.8.0", + "@cspell/cspell-types": "9.8.0", + "@cspell/dynamic-import": "9.8.0", + "@cspell/filetypes": "9.8.0", + "@cspell/rpc": "9.8.0", + "@cspell/strong-weak-map": "9.8.0", + "@cspell/url": "9.8.0", + "clear-module": "^4.1.2", + "cspell-config-lib": "9.8.0", + "cspell-dictionary": "9.8.0", + "cspell-glob": "9.8.0", + "cspell-grammar": "9.8.0", + "cspell-io": "9.8.0", + "cspell-trie-lib": "9.8.0", + "env-paths": "^4.0.0", + "gensequence": "^8.0.8", + "import-fresh": "^3.3.1", + "resolve-from": "^5.0.0", + "vscode-languageserver-textdocument": "^1.0.12", + "vscode-uri": "^3.1.0", + "xdg-basedir": "^5.1.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-trie-lib": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/cspell-trie-lib/-/cspell-trie-lib-9.8.0.tgz", + "integrity": "sha512-GXIyqxya8QLp6SjKsAN9w3apvt1Ww7GKcZvTBaP76OfLoyb1QC6unwmObY2cZs1manCntGwHrgU6vFNuXnTzpw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "@cspell/cspell-types": "9.8.0" + } + }, + "node_modules/cspell/node_modules/ansi-regex": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/cspell/node_modules/commander": { + "version": "14.0.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz", + "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, "node_modules/css-select": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz", @@ -3623,6 +4569,16 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/deep-extend": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/defu": { "version": "6.1.7", "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz", @@ -3837,6 +4793,22 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/env-paths": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-4.0.0.tgz", + "integrity": "sha512-pxP8eL2SwwaTRi/KHYwLYXinDs7gL3jxFcBYmEdYfZmZXbaVDvdppd0XBU8qVz03rDfKZMXg1omHCbsJjZrMsw==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-safe-filename": "^0.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/es-define-property": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", @@ -4217,6 +5189,23 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "license": "MIT" }, + "node_modules/fast-equals": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-6.0.0.tgz", + "integrity": "sha512-PFhhIGgdM79r5Uztdj9Zb6Tt1zKafqVfdMGwVca1z5z6fbX7DmsySSuJd8HiP6I1j505DCS83cLxo5rmSNeVEA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true, + "license": "MIT" + }, "node_modules/fast-string-truncated-width": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz", @@ -4296,6 +5285,13 @@ "url": "https://opencollective.com/express" } }, + "node_modules/flatted": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz", + "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==", + "dev": true, + "license": "ISC" + }, "node_modules/flattie": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/flattie/-/flattie-1.1.1.tgz", @@ -4370,6 +5366,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gensequence": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/gensequence/-/gensequence-8.0.8.tgz", + "integrity": "sha512-omMVniXEXpdx/vKxGnPRoO2394Otlze28TyxECbFVyoSpZ9H3EO7lemjcB12OpQJzRW4e5tt/dL1rOxry6aMHg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, "node_modules/get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -4379,6 +5385,19 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/get-east-asian-width": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz", + "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/get-intrinsic": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", @@ -4439,6 +5458,22 @@ "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==", "license": "ISC" }, + "node_modules/global-directory": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-5.0.0.tgz", + "integrity": "sha512-1pgFdhK3J2LeM+dVf2Pd424yHx2ou338lC0ErNP2hPx4j8eW1Sp0XqSjNxtk6Tc4Kr5wlWtSvz8cn2yb7/SG/w==", + "dev": true, + "license": "MIT", + "dependencies": { + "ini": "6.0.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", @@ -4882,73 +5917,6 @@ } } }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/core": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.23.0.tgz", - "integrity": "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4", - "hast-util-to-html": "^9.0.5" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/engine-javascript": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.23.0.tgz", - "integrity": "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2", - "oniguruma-to-es": "^4.3.4" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/engine-oniguruma": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.23.0.tgz", - "integrity": "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/langs": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.23.0.tgz", - "integrity": "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "@shikijs/types": "3.23.0" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/themes": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.23.0.tgz", - "integrity": "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "@shikijs/types": "3.23.0" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/types": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.23.0.tgz", - "integrity": "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, "node_modules/igniteui-astro-components/node_modules/igniteui-webcomponents": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz", @@ -4989,23 +5957,6 @@ } } }, - "node_modules/igniteui-astro-components/node_modules/shiki": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz", - "integrity": "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==", - "extraneous": true, - "license": "MIT", - "dependencies": { - "@shikijs/core": "3.23.0", - "@shikijs/engine-javascript": "3.23.0", - "@shikijs/engine-oniguruma": "3.23.0", - "@shikijs/langs": "3.23.0", - "@shikijs/themes": "3.23.0", - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, "node_modules/igniteui-i18n-core": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz", @@ -5406,31 +6357,82 @@ ], "dev": true, "license": "MIT", - "optional": true, - "os": [ - "win32" - ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/igniteui-theming/node_modules/zod": { + "version": "3.25.76", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", + "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/immutable": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz", + "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==", + "devOptional": true, + "license": "MIT" + }, + "node_modules/import-fresh": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", + "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/import-fresh/node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/import-fresh/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "license": "MIT", "engines": { - "node": ">=14.0.0" + "node": ">=4" } }, - "node_modules/igniteui-theming/node_modules/zod": { - "version": "3.25.76", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", - "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", + "node_modules/import-meta-resolve": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz", + "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==", "dev": true, "license": "MIT", "funding": { - "url": "https://github.com/sponsors/colinhacks" + "type": "github", + "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/immutable": { - "version": "5.1.5", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz", - "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==", - "devOptional": true, - "license": "MIT" - }, "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", @@ -5438,6 +6440,16 @@ "dev": true, "license": "ISC" }, + "node_modules/ini": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz", + "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, "node_modules/inline-style-parser": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz", @@ -5631,6 +6643,19 @@ "dev": true, "license": "MIT" }, + "node_modules/is-safe-filename": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-safe-filename/-/is-safe-filename-0.1.1.tgz", + "integrity": "sha512-4SrR7AdnY11LHfDKTZY1u6Ga3RuxZdl3YKWWShO5iyuG5h8QS4GD2tOb04peBJ5I7pXbR+CGBNEhTcwK+FzN3g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-wsl": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz", @@ -5758,6 +6783,43 @@ "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==", "license": "MIT" }, + "node_modules/jsonpointer": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz", + "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/katex": { + "version": "0.16.45", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.45.tgz", + "integrity": "sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA==", + "dev": true, + "funding": [ + "https://opencollective.com/katex", + "https://github.com/sponsors/katex" + ], + "license": "MIT", + "dependencies": { + "commander": "^8.3.0" + }, + "bin": { + "katex": "cli.js" + } + }, + "node_modules/katex/node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 12" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -5776,6 +6838,16 @@ "node": ">=6" } }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, "node_modules/lit": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz", @@ -5868,6 +6940,174 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/markdownlint-cli": { + "version": "0.48.0", + "resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.48.0.tgz", + "integrity": "sha512-NkZQNu2E0Q5qLEEHwWj674eYISTLD4jMHkBzDobujXd1kv+yCxi8jOaD/rZoQNW1FBBMMGQpuW5So8B51N/e0A==", + "dev": true, + "license": "MIT", + "dependencies": { + "commander": "~14.0.3", + "deep-extend": "~0.6.0", + "ignore": "~7.0.5", + "js-yaml": "~4.1.1", + "jsonc-parser": "~3.3.1", + "jsonpointer": "~5.0.1", + "markdown-it": "~14.1.1", + "markdownlint": "~0.40.0", + "minimatch": "~10.2.4", + "run-con": "~1.3.2", + "smol-toml": "~1.6.0", + "tinyglobby": "~0.2.15" + }, + "bin": { + "markdownlint": "markdownlint.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/markdownlint-cli/node_modules/ansi-regex": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/markdownlint-cli/node_modules/commander": { + "version": "14.0.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz", + "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/markdownlint-cli/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/markdownlint-cli/node_modules/ignore": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/markdownlint-cli/node_modules/markdown-it": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz", + "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, + "node_modules/markdownlint-cli/node_modules/markdownlint": { + "version": "0.40.0", + "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.40.0.tgz", + "integrity": "sha512-UKybllYNheWac61Ia7T6fzuQNDZimFIpCg2w6hHjgV1Qu0w1TV0LlSgryUGzM0bkKQCBhy2FDhEELB73Kb0kAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "micromark": "4.0.2", + "micromark-core-commonmark": "2.0.3", + "micromark-extension-directive": "4.0.0", + "micromark-extension-gfm-autolink-literal": "2.1.0", + "micromark-extension-gfm-footnote": "2.1.0", + "micromark-extension-gfm-table": "2.1.1", + "micromark-extension-math": "3.1.0", + "micromark-util-types": "2.0.2", + "string-width": "8.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/DavidAnson" + } + }, + "node_modules/markdownlint-cli/node_modules/micromark-extension-directive": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-4.0.0.tgz", + "integrity": "sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==", + "dev": true, + "license": "MIT", + "dependencies": { + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "parse-entities": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/markdownlint-cli/node_modules/string-width": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz", + "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==", + "dev": true, + "license": "MIT", + "dependencies": { + "get-east-asian-width": "^1.3.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/markdownlint-cli/node_modules/strip-ansi": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz", + "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.2.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -6186,6 +7426,13 @@ "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==", "license": "CC0-1.0" }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", + "dev": true, + "license": "MIT" + }, "node_modules/media-typer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz", @@ -6399,6 +7646,26 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/micromark-extension-math": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz", + "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/katex": "^0.16.0", + "devlop": "^1.0.0", + "katex": "^0.16.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/micromark-extension-mdx-expression": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.1.tgz", @@ -6953,6 +8220,32 @@ "url": "https://opencollective.com/express" } }, + "node_modules/minimatch": { + "version": "10.2.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz", + "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "brace-expansion": "^5.0.5" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/mrmime": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", @@ -7222,6 +8515,19 @@ "@pagefind/windows-x64": "1.5.2" } }, + "node_modules/parent-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz", + "integrity": "sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.1.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/parse-entities": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz", @@ -7433,6 +8739,16 @@ "node": ">=6" } }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/qs": { "version": "6.15.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz", @@ -7780,6 +9096,16 @@ "node": ">=0.10.0" } }, + "node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/resolve-pkg-maps": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz", @@ -7917,6 +9243,32 @@ "node": ">= 18" } }, + "node_modules/run-con": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/run-con/-/run-con-1.3.2.tgz", + "integrity": "sha512-CcfE+mYiTcKEzg0IqS08+efdnH0oJ3zV0wSUFBNrMHMuxCtXvBCLzCJHatwuXDcu/RlhjTziTo/a1ruQik6/Yg==", + "dev": true, + "license": "(BSD-2-Clause OR MIT OR Apache-2.0)", + "dependencies": { + "deep-extend": "^0.6.0", + "ini": "~4.1.0", + "minimist": "^1.2.8", + "strip-json-comments": "~3.1.1" + }, + "bin": { + "run-con": "cli.js" + } + }, + "node_modules/run-con/node_modules/ini": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz", + "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/rxjs": { "version": "7.8.2", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", @@ -8666,6 +10018,19 @@ "node": ">=0.10.0" } }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/style-to-js": { "version": "1.1.21", "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz", @@ -8915,6 +10280,13 @@ "semver": "^7.3.8" } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", + "dev": true, + "license": "MIT" + }, "node_modules/ufo": { "version": "1.6.4", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz", @@ -9735,6 +11107,19 @@ "dev": true, "license": "ISC" }, + "node_modules/xdg-basedir": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-5.1.0.tgz", + "integrity": "sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/xml-name-validator": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz", diff --git a/package.json b/package.json index a0d48ea973..724d696389 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,11 @@ "xplat:build-production:angular:jp": "npm run build-production:angular:jp --prefix docs/xplat", "xplat:build-production:react:jp": "npm run build-production:react:jp --prefix docs/xplat", "xplat:build-production:webcomponents:jp": "npm run build-production:webcomponents:jp --prefix docs/xplat", - "xplat:build-production:blazor:jp": "npm run build-production:blazor:jp --prefix docs/xplat" + "xplat:build-production:blazor:jp": "npm run build-production:blazor:jp --prefix docs/xplat", + "lint:md": "markdownlint \"docs/**/*.mdx\" \"docs/**/*.md\"", + "lint:md:fix": "markdownlint --fix \"docs/**/*.mdx\" \"docs/**/*.md\"", + "spellcheck": "cspell \"docs/**/*.mdx\" \"docs/**/*.md\" --no-progress", + "verify": "npm run spellcheck && npm run lint:md" }, "dependencies": { "@astrojs/check": "^0.9.8", @@ -110,7 +114,9 @@ "@types/jsdom": "^28.0.1", "astro": "^6.1.6", "cross-env": "^10.1.0", + "cspell": "^9.2.2", "igniteui-theming": "^25.0.2", + "markdownlint-cli": "^0.48.0", "pagefind": "^1.5.2", "sass-embedded": "^1.98.0", "typescript": "^5.4.0" From 1e25ccfc76405dae81b22e798e50ae2edea8f7b7 Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Tue, 12 May 2026 14:14:00 +0300 Subject: [PATCH 2/2] Resolve lint issues in mdx files --- cspell.json | 117 +++++++++++++- .../content/en/components/bullet-graph.mdx | 57 ------- .../content/en/components/button-group.mdx | 8 +- .../src/content/en/components/calendar.mdx | 4 +- .../charts/features/chart-annotations.mdx | 13 -- .../charts/features/chart-axis-layouts.mdx | 7 +- .../features/chart-data-aggregations.mdx | 4 - .../features/chart-highlight-filter.mdx | 6 +- .../charts/features/chart-legends.mdx | 12 +- .../charts/features/chart-overlays.mdx | 1 - .../charts/features/chart-performance.mdx | 22 --- .../charts/features/chart-titiles.mdx | 4 +- .../charts/types/composite-chart.mdx | 2 +- .../components/charts/types/donut-chart.mdx | 2 +- .../content/en/components/dashboard-tile.mdx | 11 +- .../src/content/en/components/date-picker.mdx | 2 +- .../src/content/en/components/drop-down.mdx | 2 +- .../components/excel-library-using-cells.mdx | 1 - .../excel-library-using-worksheets.mdx | 2 - .../content/en/components/excel-library.mdx | 10 -- .../content/en/components/excel-utility.mdx | 9 -- .../general-breaking-changes-dv.mdx | 4 +- .../en/components/general/getting-started.mdx | 4 +- .../components/geo-map-binding-data-csv.mdx | 9 -- .../geo-map-binding-data-json-points.mdx | 9 -- .../components/geo-map-binding-data-model.mdx | 10 -- .../geo-map-binding-multiple-shapes.mdx | 30 ---- .../geo-map-binding-multiple-sources.mdx | 14 -- .../components/geo-map-binding-shp-file.mdx | 14 +- .../geo-map-display-azure-imagery.mdx | 14 -- .../geo-map-display-bing-imagery.mdx | 4 +- .../geo-map-display-esri-imagery.mdx | 12 -- .../geo-map-display-heat-imagery.mdx | 30 ---- .../geo-map-display-imagery-types.mdx | 4 +- .../geo-map-display-osm-imagery.mdx | 9 -- .../en/components/geo-map-navigation.mdx | 2 - ...eo-map-resources-shape-styling-utility.mdx | 3 - .../en/components/geo-map-shape-styling.mdx | 16 -- .../geo-map-type-scatter-area-series.mdx | 16 -- .../geo-map-type-scatter-bubble-series.mdx | 17 --- .../geo-map-type-scatter-contour-series.mdx | 15 -- .../geo-map-type-scatter-density-series.mdx | 16 -- .../geo-map-type-scatter-symbol-series.mdx | 16 -- .../geo-map-type-shape-polygon-series.mdx | 16 -- .../geo-map-type-shape-polyline-series.mdx | 16 -- .../src/content/en/components/geo-map.mdx | 15 +- .../en/components/grid-lite/binding.mdx | 4 +- .../en/components/grid-lite/cell-template.mdx | 8 +- .../grid-lite/column-configuration.mdx | 4 +- .../en/components/grid-lite/filtering.mdx | 4 +- .../components/grid-lite/header-template.mdx | 4 +- .../en/components/grid-lite/sorting.mdx | 4 +- .../en/components/grid-lite/theming.mdx | 4 +- .../content/en/components/grids-and-lists.mdx | 30 ++-- .../src/content/en/components/icon-button.mdx | 2 +- .../src/content/en/components/input-group.mdx | 2 +- .../en/components/inputs/color-editor.mdx | 24 --- .../accessibility-compliance.mdx | 8 +- .../content/en/components/linear-gauge.mdx | 57 ------- .../src/content/en/components/list.mdx | 12 +- .../content/en/components/menus/toolbar.mdx | 32 +--- .../en/components/multi-column-combobox.mdx | 4 +- .../src/content/en/components/pie-chart.mdx | 4 +- .../content/en/components/radial-gauge.mdx | 67 -------- .../content/en/components/radio-button.mdx | 2 +- .../src/content/en/components/sparkline.mdx | 4 +- .../components/spreadsheet-chart-adapter.mdx | 3 - .../en/components/spreadsheet-clipboard.mdx | 3 - .../en/components/spreadsheet-commands.mdx | 7 - .../spreadsheet-conditional-formatting.mdx | 4 - .../en/components/spreadsheet-configuring.mdx | 29 ---- .../spreadsheet-data-validation.mdx | 4 - .../en/components/spreadsheet-hyperlinks.mdx | 4 - .../en/components/spreadsheet-overview.mdx | 10 -- .../src/content/en/components/switch.mdx | 2 +- .../themes/misc/tailwind-classes.mdx | 1 + .../src/content/en/components/tree.mdx | 2 +- .../en/components/zoomslider-overview.mdx | 10 -- .../en/grids_templates/cell-editing.mdx | 2 +- .../clipboard-interactions.mdx | 2 +- .../en/grids_templates/column-hiding.mdx | 2 +- .../en/grids_templates/column-moving.mdx | 2 +- .../en/grids_templates/column-selection.mdx | 2 +- .../conditional-cell-styling.mdx | 4 +- .../en/grids_templates/display-density.mdx | 2 +- .../content/en/grids_templates/editing.mdx | 2 +- .../grids_templates/excel-style-filtering.mdx | 6 +- .../content/en/grids_templates/filtering.mdx | 2 +- .../grids_templates/keyboard-navigation.mdx | 18 +-- .../grids_templates/multi-column-headers.mdx | 2 +- .../remote-data-operations.mdx | 4 +- .../en/grids_templates/row-selection.mdx | 2 +- .../src/content/en/grids_templates/search.mdx | 6 +- .../content/en/grids_templates/selection.mdx | 4 +- .../content/en/grids_templates/summaries.mdx | 2 +- .../src/content/jp/components/accordion.mdx | 4 +- .../content/jp/components/bullet-graph.mdx | 57 ------- .../src/content/jp/components/calendar.mdx | 6 +- .../src/content/jp/components/carousel.mdx | 2 +- .../jp/components/charts/chart-overview.mdx | 1 - .../charts/features/chart-annotations.mdx | 13 -- .../charts/features/chart-axis-layouts.mdx | 1 - .../features/chart-data-aggregations.mdx | 4 - .../charts/features/chart-legends.mdx | 4 - .../charts/features/chart-overlays.mdx | 1 - .../charts/features/chart-performance.mdx | 22 --- .../jp/components/charts/types/area-chart.mdx | 2 +- .../jp/components/charts/types/bar-chart.mdx | 4 +- .../components/charts/types/column-chart.mdx | 6 +- .../components/charts/types/donut-chart.mdx | 4 +- .../jp/components/charts/types/line-chart.mdx | 4 +- .../charts/types/sparkline-chart.mdx | 2 +- .../components/charts/types/treemap-chart.mdx | 4 +- .../content/jp/components/dashboard-tile.mdx | 9 -- .../src/content/jp/components/date-picker.mdx | 2 +- .../src/content/jp/components/drop-down.mdx | 2 +- .../components/excel-library-using-cells.mdx | 1 - .../excel-library-using-worksheets.mdx | 2 - .../content/jp/components/excel-library.mdx | 7 - .../content/jp/components/excel-utility.mdx | 9 -- .../general-breaking-changes-dv.mdx | 4 +- .../general/cli/component-templates.mdx | 4 +- .../jp/components/general/data-analysis.mdx | 4 +- .../jp/components/general/update-guide.mdx | 38 ++--- .../components/geo-map-binding-data-csv.mdx | 9 -- .../geo-map-binding-data-json-points.mdx | 9 -- .../components/geo-map-binding-data-model.mdx | 10 -- .../geo-map-binding-multiple-shapes.mdx | 30 ---- .../geo-map-binding-multiple-sources.mdx | 14 -- .../components/geo-map-binding-shp-file.mdx | 9 -- .../geo-map-display-azure-imagery.mdx | 14 -- .../geo-map-display-bing-imagery.mdx | 4 +- .../geo-map-display-esri-imagery.mdx | 12 -- .../geo-map-display-heat-imagery.mdx | 30 ---- .../geo-map-display-osm-imagery.mdx | 9 -- .../jp/components/geo-map-navigation.mdx | 2 - ...eo-map-resources-shape-styling-utility.mdx | 3 - .../geo-map-shape-files-reference.mdx | 4 +- .../jp/components/geo-map-shape-styling.mdx | 16 -- .../geo-map-type-scatter-area-series.mdx | 16 -- .../geo-map-type-scatter-bubble-series.mdx | 17 --- .../geo-map-type-scatter-contour-series.mdx | 15 -- .../geo-map-type-scatter-density-series.mdx | 16 -- .../geo-map-type-scatter-symbol-series.mdx | 16 -- .../geo-map-type-shape-polygon-series.mdx | 16 -- .../geo-map-type-shape-polyline-series.mdx | 16 -- .../src/content/jp/components/geo-map.mdx | 12 -- .../content/jp/components/icon-service.mdx | 2 +- .../src/content/jp/components/input-group.mdx | 2 +- .../jp/components/inputs/color-editor.mdx | 24 --- .../accessibility-compliance.mdx | 8 +- .../content/jp/components/linear-gauge.mdx | 57 ------- .../content/jp/components/menus/toolbar.mdx | 48 ++---- .../content/jp/components/overlay-scroll.mdx | 8 +- .../content/jp/components/radial-gauge.mdx | 67 -------- .../content/jp/components/radio-button.mdx | 2 +- .../components/spreadsheet-chart-adapter.mdx | 3 - .../jp/components/spreadsheet-clipboard.mdx | 3 - .../jp/components/spreadsheet-commands.mdx | 7 - .../spreadsheet-conditional-formatting.mdx | 4 - .../jp/components/spreadsheet-configuring.mdx | 29 ---- .../spreadsheet-data-validation.mdx | 4 - .../jp/components/spreadsheet-hyperlinks.mdx | 4 - .../jp/components/spreadsheet-overview.mdx | 10 -- .../src/content/jp/components/switch.mdx | 2 +- .../themes/misc/tailwind-classes.mdx | 1 + .../jp/components/themes/sass/animations.mdx | 2 +- .../jp/components/themes/typography.mdx | 2 +- .../jp/components/zoomslider-overview.mdx | 10 -- .../jp/grids_templates/batch-editing.mdx | 2 + .../jp/grids_templates/cell-merging.mdx | 1 + .../clipboard-interactions.mdx | 2 +- .../jp/grids_templates/column-hiding.mdx | 2 +- .../jp/grids_templates/column-selection.mdx | 2 +- .../remote-data-operations.mdx | 2 +- .../content/jp/grids_templates/row-drag.mdx | 2 +- .../src/content/kr/components/action-strip.md | 40 ++--- .../src/content/kr/components/autocomplete.md | 50 +++--- .../src/content/kr/components/avatar.md | 27 ++-- .../src/content/kr/components/badge.md | 41 ++--- .../src/content/kr/components/banner.md | 29 ++-- .../src/content/kr/components/button-group.md | 33 ++-- .../src/content/kr/components/button.md | 24 +-- .../src/content/kr/components/calendar.md | 58 +++---- .../angular/src/content/kr/components/card.md | 39 ++--- .../src/content/kr/components/carousel.md | 43 +++--- .../components/category-chart-axis-options.md | 4 +- .../category-chart-config-options.md | 8 +- .../category-chart-high-frequency.md | 8 +- .../components/category-chart-high-volume.md | 8 +- .../components/category-chart-highlighting.md | 6 +- .../category-chart-tooltip-types.md | 8 +- .../content/kr/components/category-chart.md | 22 +-- .../src/content/kr/components/checkbox.md | 17 ++- .../angular/src/content/kr/components/chip.md | 49 +++--- .../kr/components/circular-progress.md | 21 +-- .../content/kr/components/combo-features.md | 19 +-- .../src/content/kr/components/combo-remote.md | 15 +- .../content/kr/components/combo-templates.md | 27 ++-- .../src/content/kr/components/combo.md | 27 ++-- .../components/data-chart-axis-annotations.md | 10 +- .../components/data-chart-axis-locations.md | 6 +- .../kr/components/data-chart-axis-sharing.md | 4 +- .../kr/components/data-chart-axis-types.md | 12 +- .../kr/components/data-chart-data-sources.md | 22 +-- .../kr/components/data-chart-navigation.md | 32 ++-- .../components/data-chart-series-markers.md | 22 +-- .../data-chart-series-trendlines.md | 28 ++-- .../kr/components/data-chart-series-types.md | 128 ++++++++-------- .../data-chart-type-category-series.md | 26 ++-- .../data-chart-type-financial-series.md | 98 ++++++------ .../data-chart-type-polar-series.md | 16 +- .../data-chart-type-radial-series.md | 18 +-- .../data-chart-type-range-series.md | 26 ++-- .../data-chart-type-scatter-area-series.md | 20 +-- .../data-chart-type-scatter-bubble-series.md | 24 +-- .../data-chart-type-scatter-contour-series.md | 18 +-- .../data-chart-type-scatter-point-series.md | 20 +-- .../data-chart-type-shape-series.md | 16 +- .../data-chart-type-stacked-series.md | 8 +- .../src/content/kr/components/data-chart.md | 16 +- .../src/content/kr/components/date-picker.md | 48 +++--- .../src/content/kr/components/dialog.md | 39 ++--- .../content/kr/components/display-density.md | 18 +-- .../src/content/kr/components/divider.md | 26 ++-- .../content/kr/components/doughnut-chart.md | 4 +- .../src/content/kr/components/drag-drop.md | 12 +- .../kr/components/drop-down-virtual.md | 49 +++--- .../src/content/kr/components/drop-down.md | 44 +++--- .../content/kr/components/excel_library.md | 30 ++-- .../components/excel_library_using_cells.md | 70 ++++----- .../components/excel_library_using_tables.md | 26 ++-- .../excel_library_using_workbooks.md | 22 +-- .../excel_library_using_worksheets.md | 20 +-- .../excel_library_working_with_sparklines.md | 6 +- .../content/kr/components/expansion-panel.md | 63 +++++--- .../src/content/kr/components/exporter-csv.md | 28 ++-- .../content/kr/components/exporter-excel.md | 22 +-- .../components/financial-chart-axis-types.md | 12 +- .../financial-chart-high-frequency.md | 6 +- .../components/financial-chart-high-volume.md | 6 +- .../financial-chart-multiple-data.md | 26 ++-- .../kr/components/financial-chart-panes.md | 10 +- .../components/financial-chart-performance.md | 64 ++++---- .../financial-chart-tooltip-types.md | 8 +- .../components/financial-chart-trendlines.md | 8 +- .../content/kr/components/financial-chart.md | 54 +++---- .../src/content/kr/components/for-of.md | 22 ++- .../kr/components/general-licensing.md | 6 +- .../kr/components/general/cli-overview.md | 9 +- .../kr/components/general/getting-started.md | 16 +- .../kr/components/general/localization.md | 13 +- .../kr/components/general/update-guide.md | 88 ++++++----- .../geo-map-binding-data-overview.md | 10 +- .../src/content/kr/components/grid/grid.md | 101 +++++++------ .../src/content/kr/components/grid/groupby.md | 88 ++++++----- .../content/kr/components/grid/paste-excel.md | 13 +- .../grid/selection-based-aggregates.md | 50 +++--- .../hierarchicalgrid/hierarchical-grid.md | 142 +++++++++-------- .../hierarchicalgrid/load-on-demand.md | 20 +-- .../angular/src/content/kr/components/icon.md | 67 ++++---- .../components/input-group-reactive-forms.md | 15 +- .../src/content/kr/components/input-group.md | 22 +-- .../src/content/kr/components/label-input.md | 14 +- .../src/content/kr/components/layout.md | 12 +- .../content/kr/components/linear-progress.md | 31 ++-- .../angular/src/content/kr/components/list.md | 20 +-- .../angular/src/content/kr/components/mask.md | 39 ++--- .../kr/components/material-icons-extended.md | 4 +- .../src/content/kr/components/month-picker.md | 52 +++---- .../src/content/kr/components/navbar.md | 29 ++-- .../src/content/kr/components/navdrawer.md | 42 +++-- .../content/kr/components/overlay-position.md | 36 +++-- .../content/kr/components/overlay-scroll.md | 27 ++-- .../src/content/kr/components/overlay.md | 50 +++--- .../src/content/kr/components/pie-chart.md | 18 +-- .../components/pivotgrid/pivot-grid-custom.md | 14 +- .../pivotgrid/pivot-grid-features.md | 12 +- .../kr/components/pivotgrid/pivot-grid.md | 21 +-- .../content/kr/components/query-builder.md | 25 +-- .../src/content/kr/components/radio-button.md | 22 +-- .../src/content/kr/components/ripple.md | 53 ++++--- .../src/content/kr/components/roundness.md | 14 +- .../src/content/kr/components/select.md | 83 ++++++---- .../src/content/kr/components/shadows.md | 10 +- .../src/content/kr/components/simple-combo.md | 34 +++-- .../kr/components/slider/slider-ticks.md | 69 +++++---- .../content/kr/components/slider/slider.md | 59 ++++---- .../src/content/kr/components/snackbar.md | 21 +-- .../src/content/kr/components/sparkline.md | 58 +++---- .../src/content/kr/components/splitter.md | 36 +++-- .../kr/components/spreadsheet-configuring.md | 2 +- .../kr/components/spreadsheet_activation.md | 6 +- .../components/spreadsheet_chart_adapter.md | 92 +++++------ .../spreadsheet_conditonal_formatting.md | 30 ++-- .../kr/components/spreadsheet_configuring.md | 6 +- .../kr/components/spreadsheet_overview.md | 6 +- .../src/content/kr/components/switch.md | 18 ++- .../src/content/kr/components/tabbar.md | 33 ++-- .../angular/src/content/kr/components/tabs.md | 53 ++++--- .../content/kr/components/texthighlight.md | 27 ++-- .../kr/components/themes/component-themes.md | 27 ++-- .../content/kr/components/themes/examples.md | 63 ++++---- .../kr/components/themes/global-theme.md | 17 ++- .../src/content/kr/components/themes/index.md | 12 +- .../content/kr/components/themes/palette.md | 13 +- .../content/kr/components/themes/schemas.md | 24 +-- .../kr/components/themes/theming-demo.md | 63 ++++---- .../kr/components/themes/typography.md | 17 ++- .../src/content/kr/components/time-picker.md | 86 ++++++----- .../src/content/kr/components/toast.md | 21 +-- .../src/content/kr/components/toggle.md | 48 +++--- .../src/content/kr/components/tooltip.md | 47 +++--- .../kr/components/treegrid/aggregations.md | 18 +-- .../kr/components/treegrid/load-on-demand.md | 20 +-- .../kr/components/treegrid/tree-grid.md | 82 +++++----- .../content/kr/components/treemap-overview.md | 30 ++-- .../kr/grids_templates/batch-editing.md | 56 ++++--- .../collapsible-column-groups.md | 60 ++++---- .../kr/grids_templates/column-hiding.md | 77 ++++++---- .../kr/grids_templates/column-moving.md | 60 +++++--- .../kr/grids_templates/column-pinning.md | 143 +++++++++++------- .../kr/grids_templates/column-resizing.md | 79 +++++++--- .../conditional-cell-styling.md | 70 +++++---- .../kr/grids_templates/display-density.md | 62 ++++---- .../src/content/kr/grids_templates/editing.md | 119 +++++++++------ .../grids_templates/excel-style-filtering.md | 84 +++++----- .../kr/grids_templates/export-excel.md | 22 +-- .../content/kr/grids_templates/filtering.md | 121 ++++++++------- .../kr/grids_templates/keyboard-navigation.md | 99 ++++++------ .../grids_templates/multi-column-headers.md | 56 ++++--- .../kr/grids_templates/multi-row-layout.md | 132 ++++++++-------- .../src/content/kr/grids_templates/paging.md | 64 +++++--- .../content/kr/grids_templates/row-drag.md | 79 ++++++---- .../content/kr/grids_templates/row-editing.md | 74 +++++---- .../content/kr/grids_templates/row-pinning.md | 134 +++++++++------- .../src/content/kr/grids_templates/search.md | 84 +++++----- .../content/kr/grids_templates/selection.md | 108 ++++++++----- .../src/content/kr/grids_templates/sizing.md | 90 +++++------ .../src/content/kr/grids_templates/sorting.md | 40 ++--- .../kr/grids_templates/state-persistence.md | 23 +-- .../content/kr/grids_templates/summaries.md | 133 +++++++++------- .../src/content/kr/grids_templates/toolbar.md | 87 ++++++----- .../kr/grids_templates/virtualization.md | 70 ++++----- docs/xplat/AI-AGENT-API-LINKS.md | 9 +- docs/xplat/AI-AGENT-PLATFORM-BLOCK.md | 10 ++ docs/xplat/API-LINKS-README.md | 7 +- docs/xplat/API-REFERENCES.md | 7 +- .../src/content/en/components/ai/skills.mdx | 4 +- .../charts/features/chart-axis-layouts.mdx | 6 +- .../features/chart-highlight-filter.mdx | 6 +- .../charts/features/chart-performance.mdx | 2 + .../charts/types/composite-chart.mdx | 2 +- .../components/charts/types/donut-chart.mdx | 2 +- .../components/charts/types/gantt-chart.mdx | 2 +- .../components/charts/types/pyramid-chart.mdx | 2 +- .../content/en/components/dashboard-tile.mdx | 2 +- .../en/components/editors/xdate-picker.mdx | 3 +- .../content/en/components/excel-library.mdx | 1 + .../content/en/components/excel-utility.mdx | 1 + .../general-changelog-dv-blazor.mdx | 27 ++-- .../en/components/general-changelog-dv-wc.mdx | 2 + .../general-getting-started-oss.mdx | 2 +- .../en/components/general-getting-started.mdx | 6 +- .../en/components/general-licensing.mdx | 2 +- .../general-open-source-vs-premium.mdx | 8 +- .../components/geo-map-binding-shp-file.mdx | 4 +- .../geo-map-display-bing-imagery.mdx | 2 +- .../geo-map-display-heat-imagery.mdx | 2 + .../geo-map-display-imagery-types.mdx | 4 +- .../src/content/en/components/geo-map.mdx | 2 +- .../en/components/grid-lite/binding.mdx | 2 +- .../en/components/grid-lite/cell-template.mdx | 11 +- .../grid-lite/column-configuration.mdx | 2 +- .../en/components/grid-lite/filtering.mdx | 6 +- .../components/grid-lite/header-template.mdx | 2 +- .../en/components/grid-lite/overview.mdx | 6 + .../en/components/grid-lite/sorting.mdx | 6 +- .../en/components/grid-lite/theming.mdx | 4 +- .../grids/_shared/advanced-filtering.mdx | 3 + .../grids/_shared/batch-editing.mdx | 7 + .../grids/_shared/cascading-combos.mdx | 6 + .../components/grids/_shared/cell-editing.mdx | 25 ++- .../components/grids/_shared/cell-merging.mdx | 10 ++ .../grids/_shared/cell-selection.mdx | 3 + .../_shared/collapsible-column-groups.mdx | 3 + .../grids/_shared/column-hiding.mdx | 5 + .../grids/_shared/column-moving.mdx | 7 + .../grids/_shared/column-pinning.mdx | 19 ++- .../grids/_shared/column-resizing.mdx | 17 ++- .../components/grids/_shared/column-types.mdx | 35 ++++- .../_shared/conditional-cell-styling.mdx | 28 ++++ .../en/components/grids/_shared/editing.mdx | 3 + .../grids/_shared/excel-style-filtering.mdx | 10 ++ .../components/grids/_shared/export-excel.mdx | 5 + .../en/components/grids/_shared/filtering.mdx | 18 ++- .../grids/_shared/keyboard-navigation.mdx | 6 +- .../en/components/grids/_shared/live-data.mdx | 4 + .../grids/_shared/multi-column-headers.mdx | 5 + .../en/components/grids/_shared/paging.mdx | 3 + .../grids/_shared/remote-data-operations.mdx | 24 ++- .../components/grids/_shared/row-actions.mdx | 3 + .../components/grids/_shared/row-adding.mdx | 12 ++ .../en/components/grids/_shared/row-drag.mdx | 42 ++++- .../components/grids/_shared/row-editing.mdx | 8 + .../components/grids/_shared/row-pinning.mdx | 14 ++ .../grids/_shared/row-selection.mdx | 22 +++ .../en/components/grids/_shared/search.mdx | 42 +++++ .../en/components/grids/_shared/selection.mdx | 4 + .../en/components/grids/_shared/size.mdx | 8 + .../en/components/grids/_shared/sorting.mdx | 34 +++++ .../grids/_shared/state-persistence.mdx | 34 ++++- .../en/components/grids/_shared/summaries.mdx | 30 +++- .../en/components/grids/_shared/toolbar.mdx | 21 +++ .../components/grids/_shared/validation.mdx | 7 + .../content/en/components/grids/data-grid.mdx | 16 +- .../grids/data-grid/column-options.mdx | 1 + .../grids/data-grid/column-pinning.mdx | 2 + .../components/grids/data-grid/local-data.mdx | 2 +- .../components/grids/data-grid/overview.mdx | 4 +- .../grids/data-grid/performance.mdx | 4 +- .../grids/data-grid/row-grouping.mdx | 1 + .../en/components/grids/grid/groupby.mdx | 2 +- .../en/components/grids/grid/paste-excel.mdx | 8 +- .../grids/grid/selection-based-aggregates.mdx | 2 +- .../en/components/grids/grid/theming-grid.mdx | 2 +- .../en/components/grids/grids-header.mdx | 6 +- .../grids/hierarchical-grid/overview.mdx | 10 +- .../grids/hierarchical-grid/theming-grid.mdx | 2 +- .../components/grids/pivot-grid/features.mdx | 3 +- .../components/grids/pivot-grid/overview.mdx | 1 + .../grids/pivot-grid/remote-operations.mdx | 2 +- .../components/grids/tree-grid/overview.mdx | 4 +- .../grids/tree-grid/theming-grid.mdx | 2 +- .../content/en/components/inputs/button.mdx | 2 +- .../en/components/inputs/color-editor.mdx | 4 + .../en/components/inputs/query-builder.mdx | 4 +- .../accessibility-compliance.mdx | 8 +- .../en/components/interactivity/chat.mdx | 6 +- .../layouts/dock-manager-electron.mdx | 2 +- .../en/components/layouts/dock-manager.mdx | 9 +- .../content/en/components/layouts/icon.mdx | 2 + .../content/en/components/menus/toolbar.mdx | 2 +- .../en/components/notifications/snackbar.mdx | 2 +- .../en/components/scheduling/calendar.mdx | 7 +- .../en/components/scheduling/date-picker.mdx | 3 +- .../jp/components/charts/chart-overview.mdx | 1 - .../charts/features/chart-axis-layouts.mdx | 1 - .../charts/features/chart-performance.mdx | 2 + .../jp/components/charts/types/area-chart.mdx | 2 +- .../jp/components/charts/types/bar-chart.mdx | 4 +- .../components/charts/types/column-chart.mdx | 6 +- .../components/charts/types/donut-chart.mdx | 4 +- .../jp/components/charts/types/line-chart.mdx | 4 +- .../charts/types/sparkline-chart.mdx | 2 +- .../components/charts/types/treemap-chart.mdx | 4 +- .../content/jp/components/excel-library.mdx | 1 + .../content/jp/components/excel-utility.mdx | 1 + .../general-changelog-dv-blazor.mdx | 12 +- .../jp/components/general-changelog-dv-wc.mdx | 2 + .../general-getting-started-oss.mdx | 2 +- .../jp/components/general-nuget-feed.mdx | 4 +- .../geo-map-display-bing-imagery.mdx | 2 +- .../geo-map-display-heat-imagery.mdx | 2 + .../geo-map-shape-files-reference.mdx | 4 +- .../jp/components/grid-lite/binding.mdx | 2 +- .../jp/components/grid-lite/cell-template.mdx | 7 +- .../grid-lite/column-configuration.mdx | 2 +- .../jp/components/grid-lite/filtering.mdx | 6 +- .../components/grid-lite/header-template.mdx | 2 +- .../jp/components/grid-lite/overview.mdx | 6 + .../jp/components/grid-lite/sorting.mdx | 6 +- .../jp/components/grid-lite/theming.mdx | 2 +- .../grids/_shared/advanced-filtering.mdx | 1 + .../grids/_shared/batch-editing.mdx | 7 + .../grids/_shared/cascading-combos.mdx | 6 + .../components/grids/_shared/cell-editing.mdx | 25 ++- .../components/grids/_shared/cell-merging.mdx | 10 ++ .../grids/_shared/cell-selection.mdx | 3 + .../_shared/collapsible-column-groups.mdx | 3 + .../grids/_shared/column-hiding.mdx | 5 + .../grids/_shared/column-moving.mdx | 7 + .../grids/_shared/column-pinning.mdx | 20 ++- .../grids/_shared/column-resizing.mdx | 17 ++- .../components/grids/_shared/column-types.mdx | 41 +++-- .../_shared/conditional-cell-styling.mdx | 28 ++++ .../jp/components/grids/_shared/editing.mdx | 9 +- .../grids/_shared/excel-style-filtering.mdx | 10 ++ .../components/grids/_shared/export-excel.mdx | 8 + .../jp/components/grids/_shared/filtering.mdx | 30 +++- .../grids/_shared/keyboard-navigation.mdx | 38 ++--- .../jp/components/grids/_shared/live-data.mdx | 6 +- .../grids/_shared/multi-column-headers.mdx | 5 + .../jp/components/grids/_shared/paging.mdx | 3 + .../grids/_shared/remote-data-operations.mdx | 24 ++- .../components/grids/_shared/row-actions.mdx | 3 + .../components/grids/_shared/row-adding.mdx | 12 ++ .../jp/components/grids/_shared/row-drag.mdx | 43 +++++- .../components/grids/_shared/row-editing.mdx | 6 + .../components/grids/_shared/row-pinning.mdx | 13 ++ .../grids/_shared/row-selection.mdx | 24 ++- .../jp/components/grids/_shared/search.mdx | 43 ++++++ .../jp/components/grids/_shared/selection.mdx | 4 + .../jp/components/grids/_shared/size.mdx | 8 +- .../jp/components/grids/_shared/sorting.mdx | 46 +++++- .../grids/_shared/state-persistence.mdx | 36 ++++- .../jp/components/grids/_shared/summaries.mdx | 32 +++- .../jp/components/grids/_shared/toolbar.mdx | 21 +++ .../components/grids/_shared/validation.mdx | 7 + .../grids/_shared/virtualization.mdx | 6 +- .../content/jp/components/grids/data-grid.mdx | 7 +- .../grids/data-grid/column-options.mdx | 1 + .../grids/data-grid/column-pinning.mdx | 2 + .../grids/data-grid/row-grouping.mdx | 1 + .../jp/components/grids/grid/paste-excel.mdx | 8 +- .../jp/components/grids/grids-header.mdx | 12 +- .../grids/hierarchical-grid/overview.mdx | 9 ++ .../components/grids/pivot-grid/features.mdx | 3 +- .../components/grids/pivot-grid/overview.mdx | 1 + .../components/grids/tree-grid/overview.mdx | 2 + .../src/content/jp/components/grids/tree.mdx | 2 +- .../jp/components/inputs/color-editor.mdx | 4 + .../jp/components/inputs/combo/overview.mdx | 4 +- .../inputs/combo/single-selection.mdx | 4 +- .../accessibility-compliance.mdx | 8 +- .../jp/components/layouts/carousel.mdx | 8 +- .../jp/components/layouts/dock-manager.mdx | 9 +- .../jp/components/layouts/expansion-panel.mdx | 2 +- .../content/jp/components/layouts/icon.mdx | 3 + .../content/jp/components/menus/toolbar.mdx | 18 +-- .../jp/components/notifications/snackbar.mdx | 2 +- .../jp/components/scheduling/calendar.mdx | 7 +- .../jp/components/scheduling/date-picker.mdx | 1 + .../jp/components/themes/typography.mdx | 2 +- 534 files changed, 5318 insertions(+), 4779 deletions(-) diff --git a/cspell.json b/cspell.json index 2ff9936a6e..6c061dd34f 100644 --- a/cspell.json +++ b/cspell.json @@ -280,6 +280,119 @@ "treegrid", "hierarchicalgrid", "pivotgrid", - "canonicalLink" + "canonicalLink", + "actionbuttonicon", + "activecssclass", + "adipiscing", + "allowfiltering", + "amet", + "autocompletesettings", + "autopositionstrategy", + "autoscrolling", + "azuremapsimagery", + "bazork", + "bingmapsimagery", + "bottomtotop", + "buttongroup", + "canundo", + "cascadeondelete", + "celleditdone", + "cellstyles", + "Chaikin", + "chartdefaults", + "clearsort", + "clipboardoptions", + "closetemplate", + "columnexporting", + "columngap", + "columnselection", + "connectedpositioningstrategy", + "Contenttop", + "cssclass", + "Detrended", + "disablehiding", + "dragndrop", + "dropposition", + "dvcommonwidget", + "elasticpositionstrategy", + "elit", + "endpending", + "errorbars", + "exportdata", + "filtercolumnsprompt", + "filterglobal", + "filteringexpressionstree", + "filteringexpressionstreechange", + "filteringlogic", + "formatoptions", + "getnextcell", + "globalpositionstrategy", + "gradienttemplate", + "gridselectionmode", + "Gridwidth", + "hasarrow", + "haschildrenkey", + "headertemplate", + "hidedelay", + "hidetriggers", + "horizontalalignment", + "horizontaldirection", + "ignoremulticolumnheaders", + "igxforcontainersize", + "igxoverlayservice", + "igxtoggledirective", + "infocard", + "inputformat", + "ipositionstrategy", + "iscrollstrategy", + "isheader", + "isloading", + "itemalign", + "itemsdelta", + "keyboardnav", + "LASP", + "logn", + "lowerbound", + "MACD", + "obround", + "overlaysettings", + "popin", + "positionsettings", + "positionstrategy", + "previouspage", + "primarykey", + "rowexporting", + "rowheight", + "rowselection", + "screenreaders", + "selectedindexchange", + "selecteditem", + "selecticon", + "Settingsopenclose", + "showdelay", + "showtriggers", + "SMATP", + "sortstrategy", + "SRSI", + "startindex", + "startpending", + "Stoch", + "tgrid", + "thecolor", + "theelevation", + "theelevations", + "themingwidget", + "TRIX", + "Unmarshalled", + "unser", + "unsub", + "upperbound", + "validationfailed", + "valuedelimiter", + "verticalalignment", + "verticaldirection", + "whatismaterial", + "WPRI", + "xlsb" ] -} \ No newline at end of file +} diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx index e340ad5167..4ce0d2bd3f 100644 --- a/docs/angular/src/content/en/components/bullet-graph.mdx +++ b/docs/angular/src/content/en/components/bullet-graph.mdx @@ -33,7 +33,6 @@ The features of the bullet graph include configurable orientation and direction, - ## Dependencies When installing the gauge package, the core package must also be installed. @@ -52,7 +51,6 @@ The requires the following modules: - ```ts // app.module.ts import { IgxBulletGraphModule } from 'igniteui-angular-gauges'; @@ -70,10 +68,6 @@ export class AppModule {} - - - -
## Usage @@ -108,11 +102,6 @@ The following code walks through creating a bullet graph component, and configur - - - - -
## Comparative Measures @@ -145,12 +134,6 @@ Performance value is the primary measure displayed by the component and it is vi - - - - - - @@ -182,11 +165,6 @@ The bullet graph's performance value can be further modified to show progress re - - - - - @@ -223,12 +201,6 @@ The ranges are visual elements that highlight a specified range of values on a s - - - - - - @@ -263,12 +235,6 @@ The tick marks serve as a visual division of the scale into intervals in order t - - - - - - @@ -295,12 +261,6 @@ The labels indicate the measures on the scale. - - - - - - @@ -326,12 +286,6 @@ The backing element represents background and border of the bullet graph compone - - - - - - @@ -358,11 +312,6 @@ The scale is visual element that highlights the full range of values in the gaug - - - - - @@ -447,12 +396,6 @@ For your convenience, all above code snippets are combined into one code block b - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/button-group.mdx b/docs/angular/src/content/en/components/button-group.mdx index dcfb56649b..93f2cc4cd9 100644 --- a/docs/angular/src/content/en/components/button-group.mdx +++ b/docs/angular/src/content/en/components/button-group.mdx @@ -254,7 +254,7 @@ When you set a value for the `$item-background` property, all related dependent - {/* group for item-background */} + {/*group for item-background*/} @@ -295,7 +295,7 @@ When you set a value for the `$item-background` property, all related dependent - {/* group for item-hover-background */} + {/*group for item-hover-background*/} @@ -321,7 +321,7 @@ When you set a value for the `$item-background` property, all related dependent - {/* group for item-selected-background */} + {/*group for item-selected-background*/} @@ -357,7 +357,7 @@ When you set a value for the `$item-background` property, all related dependent - {/* group for item-border-color */} + {/*group for item-border-color*/} diff --git a/docs/angular/src/content/en/components/calendar.mdx b/docs/angular/src/content/en/components/calendar.mdx index 38bfcc9007..a0d032918c 100644 --- a/docs/angular/src/content/en/components/calendar.mdx +++ b/docs/angular/src/content/en/components/calendar.mdx @@ -432,7 +432,7 @@ When you modify the `$header-background` and `$content-background` properties, a
-{/* Theme Switcher Radios and Labels */} +{/*Theme Switcher Radios and Labels*/} @@ -736,7 +736,7 @@ When you modify the `$header-background` and `$content-background` properties, a
- + {/* .theme-switcher-wrapper */} diff --git a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx index 764a7fc173..1bc96b066d 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx @@ -84,10 +84,6 @@ The following example demonstrates how to style the final value layer annotation - - - - ## Angular Callout Layer The displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source. @@ -131,15 +127,6 @@ The following example demonstrates how to style the callout layer annotations by - - - - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx index 685f96cc7d..2b44297b03 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx @@ -67,7 +67,6 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline - ## Additional Resources You can find more information about related chart features in these topics: @@ -95,12 +94,12 @@ d in the above sections: | `Axes` -> `NumericYAxis` -> `LabelVisibility` | `YAxisLabelVisibility` | | `Axes` -> `NumericXAxis` -> `LabelVisibility` | `XAxisLabelVisibility` | -{/* TODO correct links in Transformer */} -{/* +{/*TODO correct links in Transformer _/} +{/_ | `Axes` -> `NumericYAxis` -> `labelSettings.location` | `YAxisLabelLocation` | | `Axes` -> `NumericXAxis` -> `labelSettings.location` | `XAxisLabelLocation` | | `Axes` -> `NumericYAxis` -> `labelSettings.horizontalAlignment` | `YAxisLabelHorizontalAlignment` | | `Axes` -> `NumericXAxis` -> `labelSettings.verticalAlignment` | `XAxisLabelVerticalAlignment` | | `Axes` -> `NumericYAxis` -> `labelSettings.visibility` | `YAxisLabelVisibility` | -| `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` | */} +| `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` |*/} diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx index a48a4789ce..704556b30e 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx @@ -38,10 +38,6 @@ Note, the abbreviated functions found within the dropdowns for diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx index 45508b55c5..ddd18c0a19 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx @@ -49,8 +49,8 @@ The following example demonstrates the usage of the data highlighting overlay fe The `CategoryChart` highlight filter happens on the chart by setting the `InitialHighlightFilter` property. Since the `CategoryChart` takes all of the properties on your underlying data item into account by default, you will need to define the `InitialGroups` on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the `InitialGroups` to a value path in your underlying data item to group by a path that has duplicate values. -{/* Unsure of this part. Need to review */} -{/* ????? The `InitialHighlightFilter` is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/} +{/*Unsure of this part. Need to review _/} +{/_ ????? The `InitialHighlightFilter` is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/} Similar to the `DataChart`, the `HighlightedValuesDisplayMode` property is also exposed on the `CategoryChart`. In the case that you do not want to see the overlay, you can set this property to `Hidden`. @@ -59,7 +59,7 @@ The following example demonstrates the usage of the data highlighting overlay fe -{/* TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to: +{/*TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to: HighlightedHighMemberPath and HighlightedLowMemberPath in Range Series HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, HighlightedCloseMemberPath in Financial Series*/} diff --git a/docs/angular/src/content/en/components/charts/features/chart-legends.mdx b/docs/angular/src/content/en/components/charts/features/chart-legends.mdx index c3ec0bcdcf..a56fd222c8 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-legends.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-legends.mdx @@ -9,18 +9,18 @@ namespace: Infragistics.Controls.Charts ## Angular Legend Types -{/* TODO info/example of regular Legend with options to change orientation */} +{/*TODO info/example of regular Legend with options to change orientation*/} -{/* TODO info/example of ItemLegend with options to change orientation */} +{/*TODO info/example of ItemLegend with options to change orientation*/} -{/* TODO info/example of ScaleLegend with BubbleSeries */} +{/*TODO info/example of ScaleLegend with BubbleSeries*/} ## Angular Legend Layouts -{/* TODO info/example of multiple Legends */} +{/*TODO info/example of multiple Legends*/} -{/* TODO info/example of Legend layouts: outside of plot area, inside of plot area*/} +{/*TODO info/example of Legend layouts: outside of plot area, inside of plot area*/} ## Angular Legend Customization -{/* TODO info/example of customizing Legend items */} +{/*TODO info/example of customizing Legend items*/} diff --git a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx index 0616587d68..c873d653b0 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx @@ -85,7 +85,6 @@ the `DataAnnotationSliceLayer`, , an - ## Additional Resources You can find more information about related chart types in these topics: diff --git a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx index 43be1c0f77..0bf1e62984 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx @@ -58,7 +58,6 @@ Although Angular charts support rendering of multiple data sources by binding ar - ```ts this.CategoryChart.dataSource = FlattenDataSource.create(); this.FinancialChart.dataSource = FlattenDataSource.create(); @@ -95,7 +94,6 @@ Angular `CategoryChart` and the `FinancialChart` controls have built-in data ada - ```ts this.Chart.includedProperties = [ "Year", "USA", "RUS" ]; this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ]; @@ -204,7 +202,6 @@ This code snippet shows how to ordinal/category x-axis in the `FinancialChart` a - ```html @@ -216,9 +213,6 @@ This code snippet shows how to ordinal/category x-axis in the `FinancialChart` a - - - ### Axis Intervals By default, Angular charts will automatically calculate `YAxisInterval` based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing `YAxisInterval` property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. @@ -232,7 +226,6 @@ This code snippet shows how to set axis major interval in the Angular charts. - ```html @@ -247,9 +240,6 @@ This code snippet shows how to set axis major interval in the Angular charts. - - - ### Axis Scale Setting the `YAxisIsLogarithmic` property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale. @@ -263,7 +253,6 @@ This code snippet shows how to hide axis labels in the Angular charts. - ```html @@ -280,9 +269,6 @@ This code snippet shows how to hide axis labels in the Angular charts. - - - ### Axis Labels Abbreviation Although, the Angular charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when `YAxisAbbreviateLargeNumbers` is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting `YAxisTitle` to a string that represents factor used used to abbreviate your data values. @@ -292,7 +278,6 @@ This code snippet shows how to set axis title in the Angular charts. - ```html @@ -306,9 +291,6 @@ This code snippet shows how to set axis title in the Angular charts. - - - ### Axis Labels Extent At runtime, the Angular charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance. @@ -318,7 +300,6 @@ The following code snippet shows how to set a fixed extent for labels on y-axis - ```html @@ -333,9 +314,6 @@ The following code snippet shows how to set a fixed extent for labels on y-axis - - - ### Axis Other Visuals Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Angular charts. diff --git a/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx b/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx index fa00ac82c4..79264e12f7 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx @@ -7,6 +7,6 @@ namespace: Infragistics.Controls.Charts # Angular Chart Titles -{/* TODO info/example of chart's titles and subtitle */} +{/*TODO info/example of chart's titles and subtitle*/} -{/* TODO info/example of axis's titles */} +{/*TODO info/example of axis's titles*/} diff --git a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx index 6061f8634a..73789614fa 100644 --- a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx @@ -29,7 +29,7 @@ The following example demonstrates how to create Composite Chart using `ColumnSe - [Bar Chart](bar-chart.md) - [Column Chart](column-chart.md) -{/* - [Gantt Chart](gantt-chart.md) */} +{/*- [Gantt Chart](gantt-chart.md)*/} - [Line Chart](line-chart.md) - [Stacked Chart](stacked-chart.md) diff --git a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx index 44bb74b98c..3302c265d6 100644 --- a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx @@ -30,7 +30,7 @@ You can create Donut Chart using the diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx index 1c880023e7..64730a8b5b 100644 --- a/docs/angular/src/content/en/components/date-picker.mdx +++ b/docs/angular/src/content/en/components/date-picker.mdx @@ -19,7 +19,7 @@ The Ignite UI for Angular Date Picker Component lets users pick a single date th Below you can see a sample that demonstrates how the Angular Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it. -{/* TODO: date picker sample with several options enabled */} +{/*TODO: date picker sample with several options enabled*/}
diff --git a/docs/angular/src/content/en/components/drop-down.mdx b/docs/angular/src/content/en/components/drop-down.mdx index 4cb6f6f092..12a0197c0d 100644 --- a/docs/angular/src/content/en/components/drop-down.mdx +++ b/docs/angular/src/content/en/components/drop-down.mdx @@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Drop Down Component Overview
-The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization. +The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
## Angular Drop Down Example diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx index b28016f3de..e9a61cf080 100644 --- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-cells.mdx @@ -26,7 +26,6 @@ The objects in an - ## References The following code shows the imports needed to use the code-snippets below: diff --git a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx index 8188ecec25..910a336ab1 100644 --- a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx @@ -26,8 +26,6 @@ The Infragistics Angular Excel Engine's . - In order to load and save objects, you can utilize the save method of the actual object, as well as its static `Load` method. ```ts @@ -141,7 +132,6 @@ ExcelUtility.save(workbook, "fileName"); - ## Managing Heap Due to the size of the Excel Library, it's recommended to disable the source map generation. diff --git a/docs/angular/src/content/en/components/excel-utility.mdx b/docs/angular/src/content/en/components/excel-utility.mdx index 45d110d951..1cc2c7fb4c 100644 --- a/docs/angular/src/content/en/components/excel-utility.mdx +++ b/docs/angular/src/content/en/components/excel-utility.mdx @@ -116,15 +116,6 @@ export class ExcelUtility { - - - - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx index f5d79cd88e..105e20e8ff 100644 --- a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx +++ b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx @@ -61,7 +61,7 @@ These breaking changes were introduce in version **11.2.0** of these packages an
-{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## Changed Import Statements @@ -134,4 +134,4 @@ import { IgxGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igx-g import { IgxGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-module"; ``` -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} diff --git a/docs/angular/src/content/en/components/general/getting-started.mdx b/docs/angular/src/content/en/components/general/getting-started.mdx index 5abd2ce9be..a352de159b 100644 --- a/docs/angular/src/content/en/components/general/getting-started.mdx +++ b/docs/angular/src/content/en/components/general/getting-started.mdx @@ -30,7 +30,7 @@ Ignite UI for Angular is offered under a dual-license model, which allows for bo style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;"> DOWNLOAD NODE - +
Visual Studio Code @@ -38,7 +38,7 @@ Ignite UI for Angular is offered under a dual-license model, which allows for bo style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;"> DOWNLOAD VS CODE - +
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx index bddfb20ed8..1495d8fca7 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx @@ -67,9 +67,6 @@ The following code loads and binds diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx index 7576647657..187e1504f9 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx @@ -61,9 +61,6 @@ The following code loads and binds diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx index 831e0caf7f..e5fabd05ed 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx @@ -74,9 +74,6 @@ The following code shows how to bind the diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx index 681ae1f921..a905be7c6e 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx @@ -39,9 +39,6 @@ First, let's import required components and modules: - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; @@ -53,7 +50,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - ## Creating Series Next, we need to create a map with a few Geographic Series that will later load different type of shapefile. @@ -118,11 +114,6 @@ Next, we need to create a map with a few Geographic Series that will later load - - - - - ## Loading Shapefiles Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. @@ -130,7 +121,6 @@ Next, in constructor of your page, add a with of countries of the world and assign it to object. @@ -416,7 +397,6 @@ public onPointsLoaded(sds: IgcShapeDataSource, e: any) { - ## Map Background Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application. @@ -424,7 +404,6 @@ Also, you might want to hide geographic imagery from the map background content - ```ts public geoMap: IgxGeographicMapComponent; // ... @@ -435,9 +414,6 @@ this.geoMap.backgroundContent = {}; - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. @@ -575,12 +551,6 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit { - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx index 8218d77dfd..52248f2762 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx @@ -88,9 +88,6 @@ Create data sources for all geographic series that you want to display in the Ig - - - ## Overlaying Flights Create first object with flight connections between major airports and add it to the Series collection of the Ignite UI for Angular map. @@ -110,9 +107,6 @@ Create first object with - - - ## Overlaying Gridlines Create second object with geographic gridlines and add it to the Series collection of the Ignite UI for Angular map. @@ -133,9 +127,6 @@ Create second object with - - - ## Overlaying Airports Create object with airport points and add it to the Series collection of the geographic Ignite UI for Angular map. @@ -156,9 +147,6 @@ Create object with airport - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. @@ -243,8 +231,6 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit { - - ## API References diff --git a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx index 954d89080f..420bbd31fd 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx @@ -32,8 +32,8 @@ The following table explains properties of the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. @@ -43,7 +43,6 @@ The following code creates an instance of the is an example such array because it contains a list of objects. @@ -87,9 +86,6 @@ The following code binds - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -152,12 +148,6 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx index 12567544a0..f2ee27cbb8 100644 --- a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx @@ -44,7 +44,6 @@ The following code snippet shows how to display geographic imagery tiles from Az - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxAzureMapsImagery } from 'igniteui-angular-maps'; @@ -61,11 +60,6 @@ this.map.backgroundContent = tileSource; - - - - - ## Angular Overlaying Imagery from Azure Maps - Overview When working with the , you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain. @@ -97,7 +91,6 @@ The following code snippet shows how to display geographic imagery tiles on top - ```ts export class AppComponent implements AfterViewInit { @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent; @@ -125,13 +118,6 @@ export class AppComponent implements AfterViewInit { - - - - - - - ## Properties The following table summarizes properties of the class: diff --git a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx index 33ce046d49..5a023a00c7 100644 --- a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx @@ -25,7 +25,7 @@ The Angular is geographic image ## Angular Displaying Imagery from Bing Maps Example -{/* */} +{/**/} Angular Bing Maps Imagery @@ -47,7 +47,6 @@ The following code snippet shows how to display geographic imagery tiles from Bi - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxBingMapsMapImagery } from 'igniteui-angular-maps'; @@ -74,7 +73,6 @@ this.map.backgroundContent = tileSource; - ## Properties The following table summarized properties of the class: diff --git a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx index 60ea8958db..7ba283fdd6 100644 --- a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx @@ -39,7 +39,6 @@ The following code snippet shows how to display Angular geographic imagery tiles - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; @@ -55,11 +54,6 @@ this.geoMap.backgroundContent = tileSource; - - - - - ## Esri Utility Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which defines all styles provided by Esri imagery servers. @@ -81,12 +75,6 @@ this.geoMap.backgroundContent = tileSource; - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx index 2222ff025b..2b2821df40 100644 --- a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx @@ -55,20 +55,6 @@ export default {} as typeof Worker & (new () => Worker); - - - - - - - - - - - - - - ```ts import { IgxHeatTileGenerator } from 'igniteui-angular-core'; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -79,9 +65,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - - - ## Creating Heatmap The following code snippet shows how to display a population based heat-map in the Ignite UI for Angular map component: @@ -89,9 +72,6 @@ The following code snippet shows how to display a population based heat-map in t - - - ```html @@ -101,7 +81,6 @@ The following code snippet shows how to display a population based heat-map in t - ```ts @ViewChild("map", { static: true }) public map: IgxGeographicMapComponent; @@ -169,15 +148,6 @@ constructor() { - - - - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx index 1c1c87d20e..99bc3cded5 100644 --- a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx @@ -22,7 +22,7 @@ The following table summarizes supported and custom geographic imagery sources f | Open Street Maps | Provides geographic imagery from Open Street Maps service with an option to display a road map style only in one coloring theme. | | Bing Maps |Provides geographic imagery from Bing Maps service with configurable options to display the following map styles:
  • Satellite Map Style
  • Satellite Map with Labels Style
  • Road Map Style
| -{/* | Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
  • Satellite Map Style
  • Road Map Style
*/} +{/*| Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
  • Satellite Map Style
  • Road Map Style
*/} ## Map Background Content The map component's property is used to display all supported types of geographic imagery sources. For each imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles. @@ -34,7 +34,7 @@ The following table summarizes imagery classes provided by the map component. ||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| ||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| -{/* |`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.| */} +{/*|`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.|*/} By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. diff --git a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx index 0d961c4fad..fb312f008e 100644 --- a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx @@ -40,7 +40,6 @@ This code example explicitly sets diff --git a/docs/angular/src/content/en/components/geo-map-navigation.mdx b/docs/angular/src/content/en/components/geo-map-navigation.mdx index f0164b5002..2ce870e30c 100644 --- a/docs/angular/src/content/en/components/geo-map-navigation.mdx +++ b/docs/angular/src/content/en/components/geo-map-navigation.mdx @@ -34,7 +34,6 @@ This code snippet shows how navigate the map using geographic coordinates: - ## Window Coordinates Also, you can navigate map content within window rectangle bound by these relative coordinates: @@ -46,7 +45,6 @@ This code snippet shows how navigate the map using relative window coordinates: - ## Properties The following table summarizes properties that can be used in navigation of the control: diff --git a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx index 917c890f1b..45a24fa595 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx @@ -24,9 +24,6 @@ import { Style } from 'igniteui-angular-core'; - - - ## Utility Implementation ```ts diff --git a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx index 3b61440afe..36875592b8 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx @@ -39,9 +39,6 @@ import { IgxShapefileRecord } from 'igniteui-angular-core'; - - - Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes: - [Shape Comparison Styling](#shape-comparison-styling) - [Shape Random Styling](#shape-random-styling) @@ -78,9 +75,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - ## Shape Scale Styling This code snippet creates instances of **ShapeScaleStyling** that will assign fill colors to shape of countries based on population scaled on logarithmic scale. @@ -115,9 +109,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - ## Shape Range Styling This code snippet creates instances of **ShapeRangeStyling** that will assign colors to shape of countries based on ranges of population. @@ -153,9 +144,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - ## Shape Comparison Styling This code snippet creates instances of **ShapeComparisonStyling** that will assign colors to countries based on their region name in the world. @@ -206,10 +194,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - - ## API References diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx index 40c8b05f35..3bf0f1f642 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx @@ -62,15 +62,6 @@ The following code shows how to bind the diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx index 1cbab4bd2d..629c7ec6e4 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx @@ -45,16 +45,6 @@ The following table summarizes the GeographicHighDensityScatterSeries series pro - - - - - - - - - - ```html
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx index 7349c4c370..003d75130e 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx @@ -61,14 +61,6 @@ The following code shows how to bind the diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx index 67e02d9c40..7e1499440d 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx @@ -56,15 +56,6 @@ The following code demonstrates how set the `HeatMinimumColor` and `HeatMaximumC - - - - - - - - - ```html
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx index f2806f07fa..e5608e03b5 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx @@ -34,15 +34,6 @@ The following code demonstrates how to bind the diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx index 50ac2036e3..85867f8971 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx @@ -34,15 +34,6 @@ The following code shows how to bind the @@ -69,7 +60,6 @@ The following code shows how to bind the diff --git a/docs/angular/src/content/en/components/geo-map.mdx b/docs/angular/src/content/en/components/geo-map.mdx index 711af24380..47570292ba 100644 --- a/docs/angular/src/content/en/components/geo-map.mdx +++ b/docs/angular/src/content/en/components/geo-map.mdx @@ -38,7 +38,6 @@ For more details please visit: - ## Dependencies The Angular geographic map component, you need to first install these packages: @@ -59,7 +58,6 @@ The requires the following modules, - ```ts // app.module.ts import { IgxGeographicMapModule } from 'igniteui-angular-maps'; @@ -79,7 +77,6 @@ export class AppModule {} - ```ts import { AfterViewInit, Component, ViewChild } from "@angular/core"; import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; @@ -106,11 +103,6 @@ export class MapOverviewComponent implements AfterViewInit { - - - - -
## Usage @@ -132,11 +124,6 @@ Now that the map module is imported, next step is to create geographic map. The - - - - -
## Additional Resources @@ -144,7 +131,7 @@ Now that the map module is imported, next step is to create geographic map. The You can find more information about related Angular map features in these topics: - [Geographic Map Navigation](geo-map-navigation.md) -{/* - [Geographic Map Imagery](geo-map-display-imagery-types.md) */} +{/*- [Geographic Map Imagery](geo-map-display-imagery-types.md)*/} - [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md) - [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md) - [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md) diff --git a/docs/angular/src/content/en/components/grid-lite/binding.mdx b/docs/angular/src/content/en/components/grid-lite/binding.mdx index d70cbb9006..9f51b13e02 100644 --- a/docs/angular/src/content/en/components/grid-lite/binding.mdx +++ b/docs/angular/src/content/en/components/grid-lite/binding.mdx @@ -65,8 +65,8 @@ the column collection is reset, and a new data source is bound to the grid. {/* TODO ## API References -* `{ComponentName}` -* `Column` +- `{ComponentName}` +- `Column` */} diff --git a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx index 89e520f92e..67238847f8 100644 --- a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx @@ -55,8 +55,8 @@ protected formatCurrency = (value: number) => { ``` You can combine values different fields from the data source as well. -{/* TODO: -Refer to the API documentation for **`GridLiteCellContext`** for more information. */} +{/*TODO: +Refer to the API documentation for **`GridLiteCellContext`** for more information.*/} ```typescript public formatter = new Intl.NumberFormat('en-150', { @@ -150,8 +150,8 @@ export interface IgxGridLiteCellTemplateContext { {/* TODO ## API References -* `{ComponentName}` -* `Column` +- `{ComponentName}` +- `Column` */} diff --git a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx index 99a1983804..70d670f329 100644 --- a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx +++ b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx @@ -103,8 +103,8 @@ In the sample below you can try out the different column properties and how they {/* TODO ## API References -* `{ComponentName}` -* `Column` +- `{ComponentName}` +- `Column` */} diff --git a/docs/angular/src/content/en/components/grid-lite/filtering.mdx b/docs/angular/src/content/en/components/grid-lite/filtering.mdx index ac6d9c497b..dfd50607ff 100644 --- a/docs/angular/src/content/en/components/grid-lite/filtering.mdx +++ b/docs/angular/src/content/en/components/grid-lite/filtering.mdx @@ -187,8 +187,8 @@ The following example mocks remote filter operation, reflecting the REST endpoin {/* TODO ## API References ## API References -* `{ComponentName}` -* `Column` +- `{ComponentName}` +- `Column` */} ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/header-template.mdx b/docs/angular/src/content/en/components/grid-lite/header-template.mdx index 4a8a855c6f..5ce2a237ea 100644 --- a/docs/angular/src/content/en/components/grid-lite/header-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/header-template.mdx @@ -64,8 +64,8 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla {/* TODO ## API References -* `{ComponentName}` -* `Column` +- `{ComponentName}` +- `Column` */} diff --git a/docs/angular/src/content/en/components/grid-lite/sorting.mdx b/docs/angular/src/content/en/components/grid-lite/sorting.mdx index dc69508dde..513221c365 100644 --- a/docs/angular/src/content/en/components/grid-lite/sorting.mdx +++ b/docs/angular/src/content/en/components/grid-lite/sorting.mdx @@ -215,8 +215,8 @@ The following example mocks remote sorting operation, reflecting the REST endpoi {/* TODO ## API References -* `{ComponentName}` -* `Column` +- `{ComponentName}` +- `Column` */} diff --git a/docs/angular/src/content/en/components/grid-lite/theming.mdx b/docs/angular/src/content/en/components/grid-lite/theming.mdx index 3d8768cf2c..3375bfb9a5 100644 --- a/docs/angular/src/content/en/components/grid-lite/theming.mdx +++ b/docs/angular/src/content/en/components/grid-lite/theming.mdx @@ -89,8 +89,8 @@ Here is an example showcasing the custom theming from above. {/* TODO ## API References -* `{ComponentName}` -* `Column` +- `{ComponentName}` +- `Column` */} ## Additional Resources diff --git a/docs/angular/src/content/en/components/grids-and-lists.mdx b/docs/angular/src/content/en/components/grids-and-lists.mdx index 72130cf2bf..9bc32e7c32 100644 --- a/docs/angular/src/content/en/components/grids-and-lists.mdx +++ b/docs/angular/src/content/en/components/grids-and-lists.mdx @@ -268,11 +268,11 @@ Seamlessly scroll through unlimited rows and columns in your Angular grid, with
- +
- +
@@ -392,7 +392,7 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo

Ignite UI for Angular Supported Browsers

- +
The Angular Data Grid is supported on all modern web browsers, including: @@ -404,12 +404,12 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
  • Safari
  • Internet Explorer 11 with polyfills
    • - +

    Ignite UI for Angular Support Options

    - +
    There are multiple options to get access to our award-winning support at Infragistics for the Angular product. @@ -421,7 +421,7 @@ There are multiple options to get access to our award-winning support at Infragi
  • Submit a Support Case
  • Learn from the Angular Reference Applications
    • - +
    @@ -455,9 +455,9 @@ Why should I choose the Infragistics Ignite UI for Angular Data Grid?
  • Size to adjust the height and sizing of the rows
  • Column templates like Sparkline Column and Image Column
    • - + - +
    @@ -471,9 +471,9 @@ What is the Pricing for the Infragistics Ignite UI for Angular Data Grid?
    If you are developing applications on multiple platforms, consider our complete app development package, Infragistics Ultimate, which include desktop platforms like WPF and Windows Forms, plus all modern web toolsets for Angular, Web Components, ASP.NET MVC and ASP.NET Core.
    - +
    - +
    @@ -485,9 +485,9 @@ Can I purchase the Infragistics Ignite UI for Angular Data Grid control separate No, you cannot purchase the Angular Data Grid separately. It is part of a the Ignite UI for Angular product, which includes dozens of UI controls and components, plus over 60 charts, including Angular Financial Charting. If you are interested in other modern web platforms like Angular, ASP.NET MVC, Web Components or ASP.NET Blazor, check out our Ignite UI product bundle, which gives you every web platform for only $100 more on your subscription. That is hundreds of controls, components, and data visualizations for a very low price.
    - +
    - +
    @@ -499,8 +499,8 @@ How do I Install Angular and the Infragistics Ignite UI for Angular Data Grid co To get started with the Angular Data Grid, follow the steps in the [getting started guide](/general/getting-started). We also maintain a library of sample applications, which are designed to not only inspire but are best practices guides for Angular development.
    - +
    - + diff --git a/docs/angular/src/content/en/components/icon-button.mdx b/docs/angular/src/content/en/components/icon-button.mdx index c66ffa0acb..e332d2990f 100644 --- a/docs/angular/src/content/en/components/icon-button.mdx +++ b/docs/angular/src/content/en/components/icon-button.mdx @@ -389,7 +389,7 @@ When you modify a primary property, all related dependent properties are updated - + diff --git a/docs/angular/src/content/en/components/input-group.mdx b/docs/angular/src/content/en/components/input-group.mdx index 9de9d3f770..d2e21eed64 100644 --- a/docs/angular/src/content/en/components/input-group.mdx +++ b/docs/angular/src/content/en/components/input-group.mdx @@ -441,7 +441,7 @@ When you modify a primary property, all related dependent properties are updated
    - {/* Theme Switcher Radios and Labels */} + {/*Theme Switcher Radios and Labels*/} diff --git a/docs/angular/src/content/en/components/inputs/color-editor.mdx b/docs/angular/src/content/en/components/inputs/color-editor.mdx index a9d388e38e..761a18d914 100644 --- a/docs/angular/src/content/en/components/inputs/color-editor.mdx +++ b/docs/angular/src/content/en/components/inputs/color-editor.mdx @@ -36,15 +36,6 @@ Before using the , you need to register the follow - - - - - - - - - ## Usage The simplest way to start using the is as follows: @@ -52,7 +43,6 @@ The simplest way to start using the is as follows - ```html is as follows - - - - - - - - - ## Binding to events The Color Editor component raises the following events: @@ -97,11 +78,6 @@ public onValueChanged = (e: any) => { - - - - -
    diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx index 25005af2bc..188a1760fd 100644 --- a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx +++ b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx @@ -35,11 +35,11 @@ The matrix below provides a high-level outline of the accessibility support prov |**Component/Principle**| (a)
    |(b)
    |(c)
    |(d)
    |(e)
    |(f)
    |(g)
    |(h)
    |(i)
    |(j)
    |(k)
    |(l)
    |(m)
    |(n)
    |(o)
    |(p)
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__||||||||||||||||| +|**Grids**||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|__Other__||||||||||*||||||| +|**Other**||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -114,11 +114,11 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul |**Component/Guideline**|1.1
    |1.2
    |1.3
    |1.4
    |2.1
    |2.2
    |2.3
    |2.4
    |2.5
    |3.1
    |3.2
    |3.3
    |4.1
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__|||||||||||||| +|**Grids**|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|__Other__|||||||*||||||| +|**Other**|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| diff --git a/docs/angular/src/content/en/components/linear-gauge.mdx b/docs/angular/src/content/en/components/linear-gauge.mdx index 48a85c18fa..a5fe5a9135 100644 --- a/docs/angular/src/content/en/components/linear-gauge.mdx +++ b/docs/angular/src/content/en/components/linear-gauge.mdx @@ -28,7 +28,6 @@ The following sample demonstrates how setting multiple properties on the same requires the following modules: - - ```ts // app.module.ts import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; @@ -67,10 +64,6 @@ export class AppModule {} - - - -
    ## Usage @@ -103,11 +96,6 @@ The following code demonstrates how create a linear gauge containing a needle an - - - - -
    ## Needle @@ -142,12 +130,6 @@ This is the primary measure displayed by the linear gauge component and is visua - - - - - - @@ -180,11 +162,6 @@ The linear gauge can be modified to show a second needle. This will make the mai - - - - - @@ -217,12 +194,6 @@ The ranges are visual elements that highlight a specified range of values on a s - - - - - - @@ -260,11 +231,6 @@ Minor tick marks – The minor tick marks represent helper tick marks, which mig - - - - - @@ -292,12 +258,6 @@ The labels indicate the measures on the scale. - - - - - - @@ -324,12 +284,6 @@ The backing element represents background and border of the linear gauge compone - - - - - - @@ -359,12 +313,6 @@ The scale is a visual element that highlights the full range of values in the li - - - - - - @@ -451,11 +399,6 @@ For your convenience, all above code snippets are combined into one code block b - - - - -
    diff --git a/docs/angular/src/content/en/components/list.mdx b/docs/angular/src/content/en/components/list.mdx index 5e431f0520..4ff4b0e206 100644 --- a/docs/angular/src/content/en/components/list.mdx +++ b/docs/angular/src/content/en/components/list.mdx @@ -608,7 +608,7 @@ When you modify a primary property, all related dependent properties are automat - {/* group for background */} + {/*group for background*/} @@ -624,7 +624,7 @@ When you modify a primary property, all related dependent properties are automat - {/* group for header-background */} + {/*group for header-background*/} @@ -635,7 +635,7 @@ When you modify a primary property, all related dependent properties are automat - {/* group for item-background */} + {/*group for item-background*/} @@ -686,7 +686,7 @@ When you modify a primary property, all related dependent properties are automat - {/* group for item-background-hover */} + {/*group for item-background-hover*/} @@ -722,7 +722,7 @@ When you modify a primary property, all related dependent properties are automat - {/* group for item-background-active */} + {/*group for item-background-active*/} @@ -758,7 +758,7 @@ When you modify a primary property, all related dependent properties are automat - {/* group for item-background-selected */} + {/*group for item-background-selected*/} diff --git a/docs/angular/src/content/en/components/menus/toolbar.mdx b/docs/angular/src/content/en/components/menus/toolbar.mdx index 1281093ab6..b2d1eedf2f 100644 --- a/docs/angular/src/content/en/components/menus/toolbar.mdx +++ b/docs/angular/src/content/en/components/menus/toolbar.mdx @@ -58,7 +58,6 @@ export class AppModule {} - ```ts import { IgxToolbarModule } from 'igniteui-react-layouts'; import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule } from 'igniteui-react-charts'; @@ -75,13 +74,6 @@ IgrDataChartCategoryTrendLineModule.register(); - - - - - - - ## Usage ### Tool Actions @@ -113,7 +105,6 @@ The Angular Toolbar contains a items and menus become available when the is linked with the Toolbar. Here is a list of the built-in Angular `DataChart` Tool Actions and their associated `OverlayId`: Zooming Actions @@ -233,7 +219,6 @@ public toolbarCustomIconOnViewInit(): void { - ### Vertical Orientation By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. @@ -247,11 +232,6 @@ By default the Angular Toolbar is shown horizontally, but it also has the abilit - - - - - The following example demonstrates the vertical orientation of the Angular Toolbar. @@ -278,11 +258,6 @@ You can add a custom color editor tool to the the Angular Toolbar, which will al - - - - - The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool. @@ -301,12 +276,7 @@ The icon component can be styled by using it's `BaseTheme` property directly to - - - - - -{/* The following example demonstrates the various theme options that can be applied. +{/*The following example demonstrates the various theme options that can be applied. */} diff --git a/docs/angular/src/content/en/components/multi-column-combobox.mdx b/docs/angular/src/content/en/components/multi-column-combobox.mdx index 4beb19719f..c60f4b1db9 100644 --- a/docs/angular/src/content/en/components/multi-column-combobox.mdx +++ b/docs/angular/src/content/en/components/multi-column-combobox.mdx @@ -22,7 +22,7 @@ The Multi-Column Combo Box automatically generates columns for properties on the
    -{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## Dependencies @@ -33,7 +33,7 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-inputs -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} ## Required Modules diff --git a/docs/angular/src/content/en/components/pie-chart.mdx b/docs/angular/src/content/en/components/pie-chart.mdx index fedc6789e2..1fb640a5a5 100644 --- a/docs/angular/src/content/en/components/pie-chart.mdx +++ b/docs/angular/src/content/en/components/pie-chart.mdx @@ -21,7 +21,7 @@ This control is used for representing categorical data. It is most effective whe
    -{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## Dependencies @@ -32,7 +32,7 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-charts -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} ## Required Modules diff --git a/docs/angular/src/content/en/components/radial-gauge.mdx b/docs/angular/src/content/en/components/radial-gauge.mdx index eaa0abb374..1d1968ec05 100644 --- a/docs/angular/src/content/en/components/radial-gauge.mdx +++ b/docs/angular/src/content/en/components/radial-gauge.mdx @@ -29,7 +29,6 @@ The following sample demonstrates how setting multiple properties on the same     requires the following modules: @@ -53,8 +48,6 @@ The requires the following modules: - - ```ts // app.module.ts import { IgxRadialGaugeModule } from 'igniteui-angular-gauges'; @@ -72,10 +65,6 @@ export class AppModule {} - - - -
    @@ -109,11 +98,6 @@ The following code demonstrates how create a radial gauge containing a needle an - - - - -
    ## Backing @@ -146,12 +130,6 @@ The backing can be circular or fitted. A circular shape creates a 360 degree cir - - - - - - @@ -181,12 +159,6 @@ The scale is visual element that highlights full range of values in the gauge wh - - - - - - @@ -214,12 +186,6 @@ Each of these labels for the needle have various styling attributes you can appl - - - - - - @@ -241,11 +207,6 @@ If the highlight needle is shown, as explained below, then custom text can be sh - - - - - ## Optical Scaling The radial gauge's labels and titles can change it's scaling. To enable this, first set `OpticalScalingEnabled` to true. Then you can set `OpticalScalingSize` which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000. @@ -279,12 +240,6 @@ Tick marks are thin lines radiating from the center of the radial gauge. There a - - - - - - @@ -317,12 +272,6 @@ A range highlights a set of continuous values bound by a specified `MinimumValue - - - - - - @@ -361,11 +310,6 @@ You can enable an interactive mode of the gauge (using `IsNeedleDraggingEnabled` - - - - - @@ -393,11 +337,6 @@ The radial gauge can be modified to show a second needle. This will make the mai - - - - - @@ -478,12 +417,6 @@ For your convenience, all above code snippets are combined into one code block b - - - - - - ## API References diff --git a/docs/angular/src/content/en/components/radio-button.mdx b/docs/angular/src/content/en/components/radio-button.mdx index d660fb2d43..cf44ca1301 100644 --- a/docs/angular/src/content/en/components/radio-button.mdx +++ b/docs/angular/src/content/en/components/radio-button.mdx @@ -270,7 +270,7 @@ At the end your radio button should look like this: ## Radio Group
    -The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms. +The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
    ### Demo diff --git a/docs/angular/src/content/en/components/sparkline.mdx b/docs/angular/src/content/en/components/sparkline.mdx index f332826de2..0cb702531d 100644 --- a/docs/angular/src/content/en/components/sparkline.mdx +++ b/docs/angular/src/content/en/components/sparkline.mdx @@ -24,7 +24,7 @@ The sparkline control has several visual elements and corresponding features tha
    -{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## Dependencies @@ -35,7 +35,7 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-charts -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} The Angular sparkline component requires the import of the following modules: diff --git a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx index 50d438d1bc..7ac0067f14 100644 --- a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -105,9 +105,6 @@ import { WorksheetCell } from 'igniteui-angular-excel'; - - - ## Code Snippet The following code snippet demonstrates how to add charts to the currently viewed worksheet in the control: diff --git a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx index 9b9ebb0393..c878ac43bb 100644 --- a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx @@ -37,9 +37,6 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; - - -
    diff --git a/docs/angular/src/content/en/components/spreadsheet-commands.mdx b/docs/angular/src/content/en/components/spreadsheet-commands.mdx index 176a967634..54608b3cfe 100644 --- a/docs/angular/src/content/en/components/spreadsheet-commands.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-commands.mdx @@ -37,9 +37,6 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; - - -
    @@ -67,10 +64,6 @@ public zoomOut(): void { - - - - ## API References diff --git a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx index 8ede4f25d1..11b6bcaea0 100644 --- a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx @@ -73,7 +73,3 @@ import { WorkbookColorInfo } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx index 751c2c2e36..2e63767d44 100644 --- a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx @@ -43,13 +43,6 @@ The following code snippets demonstrate the above: - - - - - - - ```ts this.spreadsheet.isEnterKeyNavigationEnabled = true; this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left; @@ -70,9 +63,6 @@ The following code snippets demonstrate the above: - - - ```ts this.spreadsheet.isFormulaBarVisible = true; ``` @@ -92,9 +82,6 @@ The following code snippets demonstrate the above: - - - ```ts this.spreadsheet.areGridlinesVisible = true; ``` @@ -114,9 +101,6 @@ The following code snippets demonstrate the above: - - - ```ts this.spreadsheet.areHeadersVisible = false; ``` @@ -140,9 +124,6 @@ The following code snippets demonstrate the above, in that the `Spreadsheet` wil - - - ```ts this.spreadsheet.isInEndMode = true; ``` @@ -179,13 +160,6 @@ The following code snippets demonstrate configuration of the selection mode: - - - - - - - ```ts this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection; ``` @@ -231,9 +205,6 @@ The following code snippets show how to configure the spreadsheet's zoom level: - - - ```ts this.spreadsheet.zoomLevel = 200; ``` diff --git a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx index b34d1c9d2b..cf922841b7 100644 --- a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx @@ -40,7 +40,3 @@ import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx index 463fdcbca8..714dd3ad3c 100644 --- a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx @@ -37,7 +37,3 @@ import { WorksheetHyperlink } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/en/components/spreadsheet-overview.mdx b/docs/angular/src/content/en/components/spreadsheet-overview.mdx index 4dbc378e91..a808294c7c 100644 --- a/docs/angular/src/content/en/components/spreadsheet-overview.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-overview.mdx @@ -72,8 +72,6 @@ The `Spreadsheet` requires the following modules: - - ```ts import { IgxExcelModule } from 'igniteui-angular-excel'; import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; @@ -92,9 +90,6 @@ export class AppModule {} - - -
    ## Usage @@ -111,7 +106,6 @@ Now that the Angular spreadsheet module is imported, next is the basic configura - In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a `Workbook`. @@ -141,10 +135,6 @@ ngOnInit() { - - - - ## API References diff --git a/docs/angular/src/content/en/components/switch.mdx b/docs/angular/src/content/en/components/switch.mdx index af29a00d21..48e7e13f2d 100644 --- a/docs/angular/src/content/en/components/switch.mdx +++ b/docs/angular/src/content/en/components/switch.mdx @@ -138,7 +138,7 @@ When you modify a primary property, all related dependent properties are automat
    - {/* Theme Switcher Radios and Labels */} + {/*Theme Switcher Radios and Labels*/} diff --git a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx index 068cfd2be8..ffecc120aa 100644 --- a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx +++ b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx @@ -23,6 +23,7 @@ This guide assumes you already have **Ignite UI for Angular** installed. If not, ```cmd ng add igniteui-angular ``` + ### 1. Install Tailwind diff --git a/docs/angular/src/content/en/components/tree.mdx b/docs/angular/src/content/en/components/tree.mdx index 29d28ba1fb..58ec4d6a0c 100644 --- a/docs/angular/src/content/en/components/tree.mdx +++ b/docs/angular/src/content/en/components/tree.mdx @@ -273,7 +273,7 @@ To create a reusable template for your nodes, declare `` **within `
    {{ data.CompanyName }}
    - +
    diff --git a/docs/angular/src/content/en/components/zoomslider-overview.mdx b/docs/angular/src/content/en/components/zoomslider-overview.mdx index 8ec99d96ff..e9bff836d3 100644 --- a/docs/angular/src/content/en/components/zoomslider-overview.mdx +++ b/docs/angular/src/content/en/components/zoomslider-overview.mdx @@ -37,8 +37,6 @@ The following sample demonstrates how to use `ZoomSlider` to navigate content in - - ## Dependencies When installing the Angular chart component, the core package must also be installed. @@ -58,7 +56,6 @@ The `ZoomSlider` requires the following modules: - ```ts import { IgxZoomSliderModule } from 'igniteui-angular-charts'; import { IgxZoomSliderComponent } from 'igniteui-angular-charts'; @@ -76,9 +73,6 @@ export class AppModule {} - - - ## Code Snippet The following code demonstrates how to setup the ZoomSlider. @@ -95,10 +89,6 @@ The following code demonstrates how to setup the ZoomSlider. - - - -
    ## Additional Resources diff --git a/docs/angular/src/content/en/grids_templates/cell-editing.mdx b/docs/angular/src/content/en/grids_templates/cell-editing.mdx index d2cafaadf0..f6f5a0d210 100644 --- a/docs/angular/src/content/en/grids_templates/cell-editing.mdx +++ b/docs/angular/src/content/en/grids_templates/cell-editing.mdx @@ -660,5 +660,5 @@ _ - [Column Resizing](/{igPath}/column-resizing) - [Selection](/{igPath}/selection) -* [Searching](search) +- [Searching](search) diff --git a/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx b/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx index 3778980867..4e3ff0de06 100644 --- a/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx +++ b/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx @@ -86,7 +86,7 @@ We expose Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the +- Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the ## Additional Resources diff --git a/docs/angular/src/content/en/grids_templates/column-hiding.mdx b/docs/angular/src/content/en/grids_templates/column-hiding.mdx index e8005a67de..7968acf632 100644 --- a/docs/angular/src/content/en/grids_templates/column-hiding.mdx +++ b/docs/angular/src/content/en/grids_templates/column-hiding.mdx @@ -635,7 +635,7 @@ Styles: - [Column Resizing](/{igPath}/column-resizing) - [Selection](/{igPath}/selection) -* [Searching](/{igPath}/search) +- [Searching](/{igPath}/search)
    diff --git a/docs/angular/src/content/en/grids_templates/column-moving.mdx b/docs/angular/src/content/en/grids_templates/column-moving.mdx index b826921aaa..b8546f0a77 100644 --- a/docs/angular/src/content/en/grids_templates/column-moving.mdx +++ b/docs/angular/src/content/en/grids_templates/column-moving.mdx @@ -273,7 +273,7 @@ The sample will not be affected by the selected global theme from `Change Theme` - [Column Resizing](/{igPath}/column-resizing) - [Selection](/{igPath}/selection) -* [Searching](/{igPath}/search) +- [Searching](/{igPath}/search)
    diff --git a/docs/angular/src/content/en/grids_templates/column-selection.mdx b/docs/angular/src/content/en/grids_templates/column-selection.mdx index 323c884a59..a1998a319b 100644 --- a/docs/angular/src/content/en/grids_templates/column-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/column-selection.mdx @@ -211,7 +211,7 @@ The column selection UI has a few more APIs to explore, which are listed below. - - - properties: + properties: - - diff --git a/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx b/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx index b2673d7b8d..1fd53bd2e6 100644 --- a/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx +++ b/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx @@ -454,7 +454,7 @@ Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles d -{/* TODO */} +{/*TODO*/}
    @@ -668,7 +668,7 @@ Define a `popin` animation -{/* TODO */} +{/*TODO*/}
    diff --git a/docs/angular/src/content/en/grids_templates/display-density.mdx b/docs/angular/src/content/en/grids_templates/display-density.mdx index 0a13321284..8841452600 100644 --- a/docs/angular/src/content/en/grids_templates/display-density.mdx +++ b/docs/angular/src/content/en/grids_templates/display-density.mdx @@ -325,7 +325,7 @@ And now we can extend our sample and add -* [Searching](/{igPath}/search) +- [Searching](/{igPath}/search) diff --git a/docs/angular/src/content/en/grids_templates/editing.mdx b/docs/angular/src/content/en/grids_templates/editing.mdx index c73693b191..4c6ee98798 100644 --- a/docs/angular/src/content/en/grids_templates/editing.mdx +++ b/docs/angular/src/content/en/grids_templates/editing.mdx @@ -199,5 +199,5 @@ _ - [Column Resizing](column-resizing) - [Selection](selection) -* [Searching](search) +- [Searching](search) diff --git a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx index a37ac3bb2e..d25354a1fd 100644 --- a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx @@ -364,13 +364,13 @@ The list items inside the Excel Style Filtering dialog represent the unique valu ## Formatted Values Filtering Strategy -By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. +By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. In order to do that you can use the . - In order to do that you can use the . - + In order to do that you can use the . + The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values: diff --git a/docs/angular/src/content/en/grids_templates/filtering.mdx b/docs/angular/src/content/en/grids_templates/filtering.mdx index 90395e4d3a..4262920a16 100644 --- a/docs/angular/src/content/en/grids_templates/filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/filtering.mdx @@ -42,7 +42,7 @@ IgniteUI for [Angular {ComponentTitle} component](https://www.infragistics.com/p ## Angular {ComponentTitle} Filtering Example -The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. +The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. API method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. diff --git a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx index 2419467e10..3b25ec36a7 100644 --- a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx +++ b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx @@ -79,7 +79,7 @@ When the **{ComponentName}** header container is focused, the following key comb - Ctrl + Arrow Down sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared - Space selects the column; If the column is already selected, selection is cleared - - Shift + Alt + Arrow Left groups the column, if the column is marked as groupable +- Shift + Alt + Arrow Left groups the column, if the column is marked as groupable - Shift + Alt + Arrow Right ungroups the column, if the column is marked as groupable - Alt + Arrow Left or Alt + Arrow Up collapses the column group header, if the header is not already collapsed - Alt + Arrow Right or Alt + Arrow Down expands the column group header, if the header is not already expanded @@ -90,12 +90,12 @@ When the **{ComponentName}** body is focused, the following key combinations are ### Key Combination -- Arrow Up- navigates one cell up +- Arrow Up- navigates one cell up , or one level up the grid hierarchy if necessary (no wrapping) -- Arrow Down navigates one cell down +- Arrow Down navigates one cell down , or one level down the grid hierarchy if necessary @@ -118,24 +118,24 @@ When the **{ComponentName}** body is focused, the following key combinations are - Tab available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row - Shift + Tab - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row - Space - selects the row, if Row Selection is enabled -- Alt + Arrow Left or Alt + Arrow Up - +- Alt + Arrow Left or Alt + Arrow Up - over Group Row - collapses the group collapses the row island - + collapses the current node -- Alt + Arrow Right or Alt + Arrow Down - +- Alt + Arrow Right or Alt + Arrow Down - over Group Row - expands the group -expands the row island - +expands the row island + expands the current node @@ -213,7 +213,7 @@ Overriding the default behavior for a certain key or keys combination is one of Both and are -availabe for the current level and cannot access cells from upper or lower level. +available for the current level and cannot access cells from upper or lower level. diff --git a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx index ef056251af..24fb18f3bf 100644 --- a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx +++ b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx @@ -356,7 +356,7 @@ The sample will not be affected by the selected global theme from `Change Theme` - [Column Resizing](/{igPath}/column-resizing) - [Selection](/{igPath}/selection) -* [Group by](/{igPath}/groupby) +- [Group by](/{igPath}/groupby) diff --git a/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx index caac0f7839..ae7e589fd0 100644 --- a/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx +++ b/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx @@ -57,7 +57,7 @@ The Ignite UI for Angular {ComponentTitle} supports remote data operations such -{/* TODO */} +{/*TODO*/} By default, the {ComponentTitle} uses its own logic for performing data operations. @@ -290,7 +290,7 @@ You can see the result of the code from above at the beginning of this article i -{/* TODO */} +{/*TODO*/} ## Unique Column Values Strategy diff --git a/docs/angular/src/content/en/grids_templates/row-selection.mdx b/docs/angular/src/content/en/grids_templates/row-selection.mdx index b0d0e995fe..3801c201f7 100644 --- a/docs/angular/src/content/en/grids_templates/row-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/row-selection.mdx @@ -82,7 +82,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { ## Setup -In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following +In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following three modes: **none**, **single** and **multiple** diff --git a/docs/angular/src/content/en/grids_templates/search.mdx b/docs/angular/src/content/en/grids_templates/search.mdx index 7c28479b86..1def73021a 100644 --- a/docs/angular/src/content/en/grids_templates/search.mdx +++ b/docs/angular/src/content/en/grids_templates/search.mdx @@ -56,7 +56,7 @@ The following example represents {ComponentTitle} with search input box that all -{/* TODO */} +{/*TODO*/} ## Angular Search Usage @@ -98,7 +98,7 @@ Let's start by creating our grid and binding it to our data. We will also add so -{/* TODO */} +{/*TODO*/} @@ -130,7 +130,7 @@ Let's start by creating our grid and binding it to our data. We will also add so -{/* TODO */} +{/*TODO*/} Great, and now let's prepare for the search API of our {ComponentTitle}! We can create a few properties, which can be used for storing the currently searched text and whether the search is case sensitive and/or by an exact match. diff --git a/docs/angular/src/content/en/grids_templates/selection.mdx b/docs/angular/src/content/en/grids_templates/selection.mdx index 06b2d1271b..467179bcd4 100644 --- a/docs/angular/src/content/en/grids_templates/selection.mdx +++ b/docs/angular/src/content/en/grids_templates/selection.mdx @@ -73,7 +73,7 @@ Property enab - none - Row selection would be disabled for the {ComponentTitle} - single - Selection of only one row within the {ComponentTitle} would be available -- multiple - Multi-row selection would be available by using the `Row selectors`, with a key combination like ctrl + click, or by pressing the space key once a cell is focused +- multiple - Multi-row selection would be available by using the `Row selectors`, with a key combination like ctrl + click, or by pressing the space key once a cell is focused - multipleCascade - This is a mode for cascading selection, resulting in the selection of all children in the tree below the record that the user selects with user interaction. In this mode a parent's selection state entirely depends on the selection state of its children. @@ -246,7 +246,7 @@ _ - [Column Moving](/{igPath}/column-moving) - [Virtualization and Performance](/{igPath}/virtualization) -* [Selection-based Aggregates](selection-based-aggregates) +- [Selection-based Aggregates](selection-based-aggregates)
    diff --git a/docs/angular/src/content/en/grids_templates/summaries.mdx b/docs/angular/src/content/en/grids_templates/summaries.mdx index b92e2f293c..a2954964fa 100644 --- a/docs/angular/src/content/en/grids_templates/summaries.mdx +++ b/docs/angular/src/content/en/grids_templates/summaries.mdx @@ -813,7 +813,7 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc - [Column Resizing](/{igPath}/column-resizing) - [Selection](/{igPath}/selection) -* [Selection-based Aggregates](selection-based-aggregates) +- [Selection-based Aggregates](selection-based-aggregates)
    diff --git a/docs/angular/src/content/jp/components/accordion.mdx b/docs/angular/src/content/jp/components/accordion.mdx index aad3af4275..544f22a58c 100644 --- a/docs/angular/src/content/jp/components/accordion.mdx +++ b/docs/angular/src/content/jp/components/accordion.mdx @@ -209,11 +209,11 @@ export class AccordionComponent { Angular を使用すると、ヘッダーとコンテンツ パネルの外観をカスタマイズできます。 以下のサンプルは、 の組み込みテンプレート機能を使用して詳細なフィルタリング オプションを実装する方法を示しています。 - +
    -### ネストされた Angular Accoridon のシナリオ +### ネストされた Angular Accordion のシナリオ 以下の Angular Accordion 例では、この一般的なアプリケーション シナリオを説明するために、複雑な FAQ セクションを作成します。サンプルでネストされた は、の本体内に を追加することによって実現されます。 diff --git a/docs/angular/src/content/jp/components/bullet-graph.mdx b/docs/angular/src/content/jp/components/bullet-graph.mdx index 5cbc038171..c07170fd55 100644 --- a/docs/angular/src/content/jp/components/bullet-graph.mdx +++ b/docs/angular/src/content/jp/components/bullet-graph.mdx @@ -35,7 +35,6 @@ Angular Bullet Graph コンポーネントは、目盛り上でメジャーの - ## 依存関係 gauge パッケージのインストール時に core パッケージもインストールする必要があります。 @@ -54,7 +53,6 @@ npm install --save igniteui-angular-gauges - ```ts // app.module.ts import { IgxBulletGraphModule } from 'igniteui-angular-gauges'; @@ -72,10 +70,6 @@ export class AppModule {} - - - -
    ## 使用方法 @@ -110,11 +104,6 @@ export class AppModule {} - - - - -
    ## 比較メジャー @@ -147,12 +136,6 @@ export class AppModule {} - - - - - - @@ -184,11 +167,6 @@ export class AppModule {} - - - - - @@ -225,12 +203,6 @@ export class AppModule {} - - - - - - @@ -265,12 +237,6 @@ export class AppModule {} - - - - - - @@ -297,12 +263,6 @@ export class AppModule {} - - - - - - @@ -328,12 +288,6 @@ export class AppModule {} - - - - - - @@ -360,11 +314,6 @@ export class AppModule {} - - - - - @@ -449,12 +398,6 @@ export class AppModule {} - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/calendar.mdx b/docs/angular/src/content/jp/components/calendar.mdx index 56ca716e04..35b84fb1d1 100644 --- a/docs/angular/src/content/jp/components/calendar.mdx +++ b/docs/angular/src/content/jp/components/calendar.mdx @@ -149,7 +149,7 @@ Ignite UI for Angular Calendar モジュールまたはディレクティブを ``` -すべてのプロパティ値が AppCоmponent ファイルに設定されます。 +すべてのプロパティ値が AppComponent ファイルに設定されます。 ```typescript // app.component.ts @@ -463,7 +463,7 @@ export class CalendarSample9Component {
    - +
    @@ -614,7 +614,7 @@ export class CalendarSample9Component {
    - +
    diff --git a/docs/angular/src/content/jp/components/carousel.mdx b/docs/angular/src/content/jp/components/carousel.mdx index 3157d837fb..24e9c02e27 100644 --- a/docs/angular/src/content/jp/components/carousel.mdx +++ b/docs/angular/src/content/jp/components/carousel.mdx @@ -409,7 +409,7 @@ These configurations will have the following result:
    - +
    diff --git a/docs/angular/src/content/jp/components/charts/chart-overview.mdx b/docs/angular/src/content/jp/components/charts/chart-overview.mdx index 3d0aaa8842..071e24623c 100644 --- a/docs/angular/src/content/jp/components/charts/chart-overview.mdx +++ b/docs/angular/src/content/jp/components/charts/chart-overview.mdx @@ -141,7 +141,6 @@ Angular 複合チャートまたはコンボ チャートは、同じプロッ - ### Angular 極座標チャート Angular 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。[極座標チャート](types/polar-chart.md)の詳細をご覧ください。 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx index 28d44dd861..1d85469b30 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx @@ -90,10 +90,6 @@ Angular チャートのホバー操作と注釈は、シリーズ コレクシ - - - - ## Angular コールアウト レイヤー はチャート コントロール既存または新しいデータの注釈を表示します。注釈は、データ ソース内の指定されたデータ値の横に表示されます。 @@ -137,15 +133,6 @@ Angular チャートのホバー操作と注釈は、シリーズ コレクシ - - - - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx index 06ae7e8015..c9b8e33368 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx @@ -79,4 +79,3 @@ Angular `DataChart` の同じプロット領域に複数の軸を共有して追 - diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx index 3122535b02..eac259293b 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx @@ -44,10 +44,6 @@ Ignite UI for Angular コントロ - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx b/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx index a455682219..14b0d340bd 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx @@ -15,15 +15,11 @@ _language: ja - - - ## Angular 凡例レイアウト - ## Angular 凡例のカスタマイズ diff --git a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx index af1aa1ca06..c84c0984a4 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx @@ -90,7 +90,6 @@ Angular 、 @@ -218,9 +215,6 @@ this.LineSeries.Resolution = 10; - - - ### 軸の間隔 デフォルトでは、Angular チャートは、データの範囲に基づいて `YAxisInterval` を自動的に計算します。したがって、軸のグリッド線と軸のラベルが多すぎないように、軸の間隔を特に小さい値に設定することは避けてください。また、多くの軸グリッド線または軸ラベルが必要ない場合は、`YAxisInterval` プロパティを自動的に計算された軸間隔よりも大きい値に増やすことを検討することをお勧めします。 @@ -234,7 +228,6 @@ this.LineSeries.Resolution = 10; - ```html @@ -249,9 +242,6 @@ this.LineSeries.Resolution = 10; - - - ### 軸スケール `YAxisIsLogarithmic` プロパティを false に設定すると、パフォーマンスを向上させるために推奨されます。対数目盛で軸範囲と軸ラベルの値を計算するよりも操作が少なくて済むためです。 @@ -265,7 +255,6 @@ this.LineSeries.Resolution = 10; - ```html @@ -282,9 +271,6 @@ this.LineSeries.Resolution = 10; - - - ### 軸ラベルの省略形 ただし、Angular チャートは、`YAxisAbbreviateLargeNumbers` が true に設定されている場合に、軸ラベルに表示される大きな数値 (10,000 以上など) の省略形をサポートします。代わりに、データ 項目の大きな値を公約数で除算して前処理し、`YAxisTitle` をデータ値の省略形に使用される約数を表す文字列に設定することをお勧めします。 @@ -294,7 +280,6 @@ this.LineSeries.Resolution = 10; - ```html @@ -308,9 +293,6 @@ this.LineSeries.Resolution = 10; - - - ### 軸ラベルの範囲 実行時に、Angular チャートは、最も長い値を持つラベルに基づいて、y 軸上のラベルの範囲を調整します。これにより、データの範囲やラベルを頻繁に更新する必要がある場合に、チャートのパフォーマンスが低下する可能性があります。そのため、チャート パフォーマンスを向上させるためにデザイン時にラベル範囲を設定することをお勧めします。 @@ -320,7 +302,6 @@ this.LineSeries.Resolution = 10; - ```html @@ -335,9 +316,6 @@ this.LineSeries.Resolution = 10; - - - ### 軸その他のビジュアル 追加の軸ビジュアル (軸タイトルなど) を有効にしたり、デフォルト値を変更したりすると、Angular チャートのパフォーマンスが低下する可能性があります。 diff --git a/docs/angular/src/content/jp/components/charts/types/area-chart.mdx b/docs/angular/src/content/jp/components/charts/types/area-chart.mdx index 7e7a45c902..e093d34022 100644 --- a/docs/angular/src/content/jp/components/charts/types/area-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/area-chart.mdx @@ -46,7 +46,7 @@ Ignite UI for Angular エリア チャートは、線の下の領域が塗りつ - 時系列データを左から右へ並べ替える。 - 透明色を使用して、別の系列の背後にプロットされているデータがブロックされないようにする。 -### 以下の場合にエリア チャートを使用しないでください: +### 以下の場合にエリア チャートを使用しないでください - 多くの (7 または 10 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。 - 時系列データの値は類似している場合 (同じ期間のデータ)。これにより、重なり合った網掛け領域を区別できなくなります。 diff --git a/docs/angular/src/content/jp/components/charts/types/bar-chart.mdx b/docs/angular/src/content/jp/components/charts/types/bar-chart.mdx index 8084ffd1df..110f5c2459 100644 --- a/docs/angular/src/content/jp/components/charts/types/bar-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/bar-chart.mdx @@ -63,12 +63,12 @@ Angular 棒チャートには、データまたはデータを使用して正し - ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。 - 読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。 -### 以下の場合に棒チャートを使用しないでください: +### 以下の場合に棒チャートを使用しないでください - データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。 - 詳細な時系列分析が必要なときは、時系列を含む[折れ線チャート](line-chart.md)を検討してください。 -### 棒チャートのデータ構造: +### 棒チャートのデータ構造 - データ ソースはデータ項目の配列またはリストである必要があります。 - データ ソースに少なくとも 1 つのデータ項目を含む必要があります。 diff --git a/docs/angular/src/content/jp/components/charts/types/column-chart.mdx b/docs/angular/src/content/jp/components/charts/types/column-chart.mdx index 78bd359eea..47e1bfb1f2 100644 --- a/docs/angular/src/content/jp/components/charts/types/column-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/column-chart.mdx @@ -38,16 +38,16 @@ Ignite UI for Angular 縦棒チャート、縦棒グラフ、または垂直棒 - 同じデータ セットに正の値だけでなく負の値も表示する必要がある場合。 - パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合。 -### 縦棒チャートのベスト プラクティス: +### 縦棒チャートのベスト プラクティス - データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。 - 時系列データを左から右へ並べ替える。 -### 以下の場合に縦棒チャートを使用しないでください: +### 以下の場合に縦棒チャートを使用しないでください - 多くの (10 または 12 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。 -### 縦棒チャートのデータ構造: +### 縦棒チャートのデータ構造 - データ モデルには少なくとも 1 つの数値プロパティを含む必要があります。 - データ モデルにはラベルのためのオプションの文字列または日時プロパティを含むことができます。 diff --git a/docs/angular/src/content/jp/components/charts/types/donut-chart.mdx b/docs/angular/src/content/jp/components/charts/types/donut-chart.mdx index 2bc447707f..141a134522 100644 --- a/docs/angular/src/content/jp/components/charts/types/donut-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/donut-chart.mdx @@ -45,7 +45,7 @@ Angular ドーナツ チャートには、次のようなデータを分析す - スライスの選択 - チャート アニメーション -### ドーナツ チャートのベスト プラクティス: +### ドーナツ チャートのベスト プラクティス - 複数のデータ セットを使用して、データを輪に表示します。 - データをすばやく説明するために、ドーナツの穴の中に値やラベルなどの情報を配置します。 @@ -54,7 +54,7 @@ Angular ドーナツ チャートには、次のようなデータを分析す - データ セグメントの合計が 100% になるようにします。 - パーツのセグメント/スライスでカラー パレットを区別できるようにします。 -### 以下の場合にドーナツ チャートを使用しないでください: +### 以下の場合にドーナツ チャートを使用しないでください - 時間の経過に伴う変化の比較の場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。 - 正確なデータ比較が必要である場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。 diff --git a/docs/angular/src/content/jp/components/charts/types/line-chart.mdx b/docs/angular/src/content/jp/components/charts/types/line-chart.mdx index f42cd2fe07..f653c4b036 100644 --- a/docs/angular/src/content/jp/components/charts/types/line-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/line-chart.mdx @@ -53,7 +53,7 @@ Ignite UI for Angular 折れ線チャート (または折れ線グラフ) は、 - 比較解析のために 1 つ以上のカテゴリのデータ トレンドを表示する必要がある場合 - 詳細な時系列データを可視化する必要がある場合 -### 折れ線チャートのベスト プラクティス: +### 折れ線チャートのベスト プラクティス - データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する - 時系列データを左から右へ並べ替える @@ -64,7 +64,7 @@ Ignite UI for Angular 折れ線チャート (または折れ線グラフ) は、 - 多くの (7 または 10 以上) シリーズのデータがある場合チャートを読みやすくすることが目標である場合 - 時系列データの値は同じ (同じ期間のデータ) である場合; 重複した行を区別できなくなります。 -### 折れ線チャートのデータ構造: +### 折れ線チャートのデータ構造 - データ ソースはデータ項目の配列またはリスト (単一シリーズの場合) である必要があります。 - データ ソースは、配列の配列またはリストのリスト (複数シリーズの場合) である必要があります。 diff --git a/docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx b/docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx index 36eb9a2d66..92885f7ccc 100644 --- a/docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx @@ -49,7 +49,7 @@ Angular スパークライン コンポーネントには、最高、最低、 - 時系列データを左から右へ並べ替える。 - 実線などの視覚属性を使用して一連のデータを表示する。 -### 次の場合にスパークラインを使用しないでください: +### 次の場合にスパークラインを使用しないでください - データを詳細に分析する必要がある場合。 - データ ポイントのすべてのラベルを表示する必要がある場合。Y 軸上には最大値と最小値のみを表示でき、X 軸には最初の値と最後の値のみを表示できます。 diff --git a/docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx b/docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx index b97e5214dd..7f94221eec 100644 --- a/docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx @@ -49,7 +49,7 @@ Ignite UI for Angular ツリーマップ チャートは、ネストされた一 - 正確な値を使用せずに、一目で迅速なデータ分析を提供したい場合長方形の相対的なサイズは、パターンや外れ値を非常に迅速に識別するのに役立ちます。 - スペースを有効に使用したい場合ツリーマップは、数千の項目を同時に画面に表示することが可能となります。 -### 以下の場合にツリーマップを使用しないでください: +### 以下の場合にツリーマップを使用しないでください - 正確な値を必要とするデータ ストーリーを説明している場合。 - 負のデータ値がある場合。 @@ -88,7 +88,7 @@ Ignite UI for Angular ツリーマップ チャートは、ネストされた一 - 項目を同じ値で色付けするグループ ベースのメカニズム。 - 階級区分図に似たスケール ベースのメカニズムで、ノードの色をその値に基づいてマップします。 -### レイアウト方向: +### レイアウト方向 `LayoutOrientation` プロパティによってユーザーは階層のノードが展開される方向を設定できます。 diff --git a/docs/angular/src/content/jp/components/dashboard-tile.mdx b/docs/angular/src/content/jp/components/dashboard-tile.mdx index fe4dc1f25e..f3f012e8d5 100644 --- a/docs/angular/src/content/jp/components/dashboard-tile.mdx +++ b/docs/angular/src/content/jp/components/dashboard-tile.mdx @@ -69,15 +69,6 @@ export class AppModule {} - - - - - - - - - ## 使用方法 コントロールはバインドしたデータを評価し、Ignite UI for Angular ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の `DataSource` プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。 diff --git a/docs/angular/src/content/jp/components/date-picker.mdx b/docs/angular/src/content/jp/components/date-picker.mdx index fc42bdb8e7..6609b777ab 100644 --- a/docs/angular/src/content/jp/components/date-picker.mdx +++ b/docs/angular/src/content/jp/components/date-picker.mdx @@ -20,7 +20,7 @@ Ignite UI for Angular Date Picker コンポーネントを使用すると、ユ 以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Angular Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。 -{/* TODO: date picker sample with several options enabled */} +{/*TODO: date picker sample with several options enabled*/}
    diff --git a/docs/angular/src/content/jp/components/drop-down.mdx b/docs/angular/src/content/jp/components/drop-down.mdx index b762e646c0..e2394144c0 100644 --- a/docs/angular/src/content/jp/components/drop-down.mdx +++ b/docs/angular/src/content/jp/components/drop-down.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Drop Down (ドロップダウン) コンポーネントの概要
    -The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization. +The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
    ## Angular Drop Down の例 diff --git a/docs/angular/src/content/jp/components/excel-library-using-cells.mdx b/docs/angular/src/content/jp/components/excel-library-using-cells.mdx index fdf5a690d9..3b83f0a58a 100644 --- a/docs/angular/src/content/jp/components/excel-library-using-cells.mdx +++ b/docs/angular/src/content/jp/components/excel-library-using-cells.mdx @@ -28,7 +28,6 @@ Excel ワークシートの diff --git a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx index 3c97dd3336..8fda5660ef 100644 --- a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx +++ b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx @@ -58,7 +58,7 @@ Import ステートメントは、API クラスと列挙型へのフル パス
    -{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## 変更後のコード @@ -129,4 +129,4 @@ import { IgxGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igx-g import { IgxGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-module"; ``` -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} diff --git a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx index f7c893f8e2..89da048f94 100644 --- a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx +++ b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx @@ -40,8 +40,8 @@ _language: ja |select (v4.1.0) |Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c select-in-form newFormSelect
    Ignite UI CLI:
    ig add select-in-form newFormSelect
    フォームの IgxSelect。
    | フォームで使用する [IgxSelect](../../select.md) コンポーネント。 | |input group |Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c input-group newInputGroup
    Ignite UI CLI:
    ig add input-group newInputGroup
    基本 IgxInputGroup フォーム ビュー。
    | [IgxInputGroup](../../input-group.md) で作成したフォーム。| |インタラクション| -|dialog |gnite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dialog newDialog
    Ignite UI CLI:
    ig add dialog newDialog
    基本 IgxDialog。
    | 標準の確認ダイアログとして使用される [IgxDialog](../../dialog.md)。 | -|tooltip |gnite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tooltip newTooltip
    Ignite UI CLI:
    ig add tooltip newTooltip
    フルカスタマイズ可能なツールチップ。
    | [IgxTooltip](../../tooltip.md) で作成される基本 ツールチップ。 | +|dialog |Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dialog newDialog
    Ignite UI CLI:
    ig add dialog newDialog
    基本 IgxDialog。
    | 標準の確認ダイアログとして使用される [IgxDialog](../../dialog.md)。 | +|tooltip |Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tooltip newTooltip
    Ignite UI CLI:
    ig add tooltip newTooltip
    フルカスタマイズ可能なツールチップ。
    | [IgxTooltip](../../tooltip.md) で作成される基本 ツールチップ。 | |スケジュール | | |date-picker |Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c date-picker newDatePicker
    Ignite UI CLI:
    ig add date-picker newDatePicker
    基本 IgxDatePicker。
    | 一方向データ バインディングを含む基本 [IgxDatePicker](../../date-picker.md)。 | |time-picker |Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c time-picker newTimePicker
    Ignite UI CLI:
    ig add time-picker newTimePicker
    基本 IgxTimePicker。
    | 初期値設定と一方向データ バインディングを含む基本 [IgxTimePicker](../../time-picker.md)。 | diff --git a/docs/angular/src/content/jp/components/general/data-analysis.mdx b/docs/angular/src/content/jp/components/general/data-analysis.mdx index 2b48942096..d4b9016693 100644 --- a/docs/angular/src/content/jp/components/general/data-analysis.mdx +++ b/docs/angular/src/content/jp/components/general/data-analysis.mdx @@ -177,8 +177,8 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula | `formatter`: **string** | 現在の書式タイプを設定/取得する**入力**プロパティ | | `formatColors` | 現在の書式色を設定/取得する**入力**プロパティ | `val`: _IFormatColors_ | | `onFormattersReady`| 選択されたデータに適用可能な`書式タイプ`が決定されたときにそれらを発生する**イベント**。 | -| `formatCells` | 選択したセルに条件付き書式を適用します。使用方法:
    **this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [ ],
    `reset`: boolean (**true** by default) | -| `clearFormatting` | 選択されたセルの条件付き書式を削除します。使用方法:
    **this.conditonalFormatting.clearFormatting()** | +| `formatCells` | 選択したセルに条件付き書式を適用します。使用方法:
    **this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [ ],
    `reset`: boolean (**true** by default) | +| `clearFormatting` | 選択されたセルの条件付き書式を削除します。使用方法:
    **this.conditionalFormatting.clearFormatting()** | ### IgxChartIntegrationDirective diff --git a/docs/angular/src/content/jp/components/general/update-guide.mdx b/docs/angular/src/content/jp/components/general/update-guide.mdx index 990a8d9c3b..7d924808bb 100644 --- a/docs/angular/src/content/jp/components/general/update-guide.mdx +++ b/docs/angular/src/content/jp/components/general/update-guide.mdx @@ -456,15 +456,15 @@ public onButtonClick(event) { - `IgxGridCell` - (たとえば、`igxCell` テンプレートの cell パラメーター) - Ignite UI for Angular に [igniteui-theming](https://github.com/IgniteUI/igniteui-theming) の依存関係があります。次のプリプロセッサ設定を `angular.json` ファイルに追加します。 - ```json - "build": { - "options": { - "stylePreprocessorOptions": { - "includePaths": ["node_modules"] - } - } - } - ``` +```json +"build": { + "options": { + "stylePreprocessorOptions": { + "includePaths": ["node_modules"] + } + } +} +``` - **重大な変更** - テーマの構成、カラー、エレベーション、およびタイポグラフィのすべてのグローバル CSS 変数のプレフィックスが `--igx` から `--ig` に変更されました。この変更はグローバル コンポーネント変数には影響しません。 @@ -727,7 +727,7 @@ public onButtonClick(event) { functions ``` - - **重大な変更** - グリッドにカスタム ディレクティブを適用する場合、ホスティング グリッドへの参照を取得するために、コンストラクターに `IGX_GRID_BASE` トークンを注入します。 +- **重大な変更** - グリッドにカスタム ディレクティブを適用する場合、ホスティング グリッドへの参照を取得するために、コンストラクターに `IGX_GRID_BASE` トークンを注入します。 ```scss // free version @@ -1029,15 +1029,15 @@ const selectedCells = grid.selectedCells; // returns IgxGridCell[] const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[] ``` - - ページング コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーション レベルで処理する必要があります。 - - 次のプロパティはグリッドから非推奨になりました: - - paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone - - 次のメソッドも非推奨です: - - nextPage() - - previousPage() - - 次のプロパティが削除されました: - - paginationTemplate - カスタム テンプレートを定義するには、`igx-paginator-content` を使用します。 - - HierarchicalGrid の詳細 - RowIslands でページングを有効にする場合は、次の `*igxPaginator` ディレクティブの使用法が必要です。 +- ページング コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーション レベルで処理する必要があります。 +- 次のプロパティはグリッドから非推奨になりました: + - paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone +- 次のメソッドも非推奨です: + - nextPage() + - previousPage() +- 次のプロパティが削除されました: + - paginationTemplate - カスタム テンプレートを定義するには、`igx-paginator-content` を使用します。 +- HierarchicalGrid の詳細 - RowIslands でページングを有効にする場合は、次の `*igxPaginator` ディレクティブの使用法が必要です。 ```html diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx index 97c403389f..97e5886971 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx @@ -69,9 +69,6 @@ Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650 - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps"; @@ -145,12 +142,6 @@ export class MapBindingDataCsvComponent implements AfterViewInit { - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx index 5e494ce5a7..3894792dba 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx @@ -63,9 +63,6 @@ JSON ファイルからのデータの例: - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -133,12 +130,6 @@ export class MapBindingDataJsonPointsComponent implements AfterViewInit { - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx index 0a95303a30..ff8b647133 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx @@ -76,9 +76,6 @@ Ignite UI for Angular マップ コンポーネントは、シェイプ ファ - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -179,13 +176,6 @@ export class MapBindingDataModelComponent implements AfterViewInit { - - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx index 5b7a328094..2c9ffc9d6e 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx @@ -41,9 +41,6 @@ Ignite UI for Angular マップでは、複数の地理的シリーズオブジ - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; @@ -55,7 +52,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - ## シリーズの作成 次に、後で異なるタイプのシェープ ファイルをロードする地理的シリーズでマップを作成します。 @@ -120,11 +116,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - - - - - ## シェープファイルの読み込み 次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの を追加します。 @@ -132,7 +123,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - ```ts const sdsPolygons = new IgxShapeDataSource(); sdsPolygons.importCompleted = this.onPolygonsLoaded; @@ -154,15 +144,6 @@ sdsLocations.dataBind(); - - - - - - - - - ## ポリゴンの処理 世界の国々の に読み込まれた形状データを処理し、 オブジェクトに割り当てます。 @@ -418,7 +399,6 @@ public onPointsLoaded(sds: IgcShapeDataSource, e: any) { - ## マップ背景 また形状ファイルがアプリケーションのために十分な地理的文脈 (国の形状など) を提供した際に、地図背景コンテンツで地理的画像を非表示にしたい場合があります。 @@ -426,7 +406,6 @@ public onPointsLoaded(sds: IgcShapeDataSource, e: any) { - ```ts public geoMap: IgxGeographicMapComponent; // ... @@ -437,9 +416,6 @@ this.geoMap.backgroundContent = {}; - - - ## 概要 上記すべてのコード スニペットを以下のコード ブロックにまとめて、プロジェクトに簡単にコピーできます。 @@ -577,12 +553,6 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit { - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx index 16ddd7e69f..9242a0c72b 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx @@ -90,9 +90,6 @@ Ignite UI for Angular マップに表示するすべての地理的シリーズ - - - ## フライトのオーバーレイ 主要空港間のフライト接続を持つ最初の オブジェクトを作成し、Ignite UI for Angular マップの Series コレクションに追加します。 @@ -112,9 +109,6 @@ Ignite UI for Angular マップに表示するすべての地理的シリーズ - - - ## グリッド線のオーバーレイ 地理グリッド線を使用して2番目の オブジェクトを作成し、それを GeographicMap の Series コレクションに追加します。 @@ -135,9 +129,6 @@ Ignite UI for Angular マップに表示するすべての地理的シリーズ - - - ## 空港のオーバーレイ 空港ポイントを使用して オブジェクトを作成し、それを Ignite UI for Angular 地理マップの Series コレクションに追加します。 @@ -158,9 +149,6 @@ Ignite UI for Angular マップに表示するすべての地理的シリーズ - - - ## まとめ 上記すべてのコード スニペットを以下のコード ブロックにまとめて、プロジェクトに簡単にコピーできます。 @@ -245,8 +233,6 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit { - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx index 68f8fa7d70..ac48c49373 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx @@ -38,7 +38,6 @@ Ignite UI for Angular Map コンポーネントの は オブジェクトのリストを含むため、このような配列の例です。 @@ -82,9 +81,6 @@ Map コンポーネントでは、Geographic Series は、シェイプ ファイ - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -147,11 +143,6 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx index 081a714acc..0de84c26b9 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx @@ -43,7 +43,6 @@ Angular は、Microsoft® が提 - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxAzureMapsImagery } from 'igniteui-angular-maps'; @@ -60,11 +59,6 @@ this.map.backgroundContent = tileSource; - - - - - ## Azure Maps からの画像オーバーレイ - 概要 を使用する際には、**ベース マップ スタイル** (例: **Satellite**, **Road**, **DarkGrey**) の上に**オーバーレイ** (交通情報、天気、ラベル) を重ね合わせることができます。例えば **Satellite** と **TerraOverlay** を組み合わせることで、地形を視覚化できます。 @@ -96,7 +90,6 @@ this.map.backgroundContent = tileSource; - ```ts export class AppComponent implements AfterViewInit { @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent; @@ -124,13 +117,6 @@ export class AppComponent implements AfterViewInit { - - - - - - - ## プロパティ 以下の表で、 クラスのプロパティを説明します。 diff --git a/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx index 1ddce14084..1f780308b2 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx @@ -27,7 +27,7 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png'; ## Angular Bing Maps 画像の表示の例 -{/* */} +{/**/} @@ -49,7 +49,6 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png'; - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxBingMapsMapImagery } from 'igniteui-angular-maps'; @@ -76,7 +75,6 @@ this.map.backgroundContent = tileSource; - ## プロパティ 以下の表で、 クラスのプロパティを説明します。 diff --git a/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx index 0d2a4c6650..fe131927c2 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx @@ -41,7 +41,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; @@ -57,11 +56,6 @@ this.geoMap.backgroundContent = tileSource; - - - - - ## Esri ユーティリティ また、Esri 画像サーバーのすべてのスタイルを定義する [EsriUtility](geo-map-resources-esri.md) を使用することもできます。 @@ -83,12 +77,6 @@ this.geoMap.backgroundContent = tileSource; - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx index 6e876d4671..1def6888f0 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx @@ -57,20 +57,6 @@ export default {} as typeof Worker & (new () => Worker); - - - - - - - - - - - - - - ```ts import { IgxHeatTileGenerator } from 'igniteui-angular-core'; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -81,9 +67,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - - - ## ヒートマップの作成 以下のコード スニペットは、人口ベースのヒートマップを Ignite UI for Angular マップ コンポーネントに表示する方法を示しています。 @@ -91,9 +74,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - - - ```html @@ -103,7 +83,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - ```ts @ViewChild("map", { static: true }) public map: IgxGeographicMapComponent; @@ -171,15 +150,6 @@ constructor() { - - - - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx index a8342b25f5..094da3e84b 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx @@ -42,7 +42,6 @@ Angular は、世界中の Op - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxOpenStreetMapImagery } from 'igniteui-angular-maps'; @@ -56,14 +55,6 @@ this.map.backgroundContent = tileSource; - - - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-navigation.mdx b/docs/angular/src/content/jp/components/geo-map-navigation.mdx index b339ad2ef4..c9fbee6a23 100644 --- a/docs/angular/src/content/jp/components/geo-map-navigation.mdx +++ b/docs/angular/src/content/jp/components/geo-map-navigation.mdx @@ -40,7 +40,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ## ウィンドウ座標 また、これらの相対座標で区切られたウィンドウ長方形内でマップ コンテンツをナビゲーションできます。 @@ -52,7 +51,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ## プロパティ 以下の表は `GeographicMap` コントロールのナビゲーションで使用できるプロパティをまとめたものです。 diff --git a/docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx index f0c476ce88..5acec66dd0 100644 --- a/docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx +++ b/docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx @@ -26,9 +26,6 @@ import { Style } from 'igniteui-angular-core'; - - - ## ユーティリティ実装 ```ts diff --git a/docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx b/docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx index a34ab8949b..1ff4f0ecb4 100644 --- a/docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx +++ b/docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx @@ -39,7 +39,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## シェイプ ファイルのフォーマット -Angular コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、*.shp*、*.shx*、および *.dbf* の拡張子が付いています。 +Angular コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、_.shp_、_.shx_、および _.dbf_ の拡張子が付いています。 以下の表は、シェープ ファイルの各タイプの基本情報および目的を提供しています。 @@ -83,7 +83,7 @@ Angular コントロールは、地 このトピックに関連する追加情報については、以下のトピックを参照してください。 - - [シェープファイルのバインディング](geo-map-binding-shp-file.md) +- [シェープファイルのバインディング](geo-map-binding-shp-file.md) ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-shape-styling.mdx b/docs/angular/src/content/jp/components/geo-map-shape-styling.mdx index 775e6fa7db..7bd55bfd7e 100644 --- a/docs/angular/src/content/jp/components/geo-map-shape-styling.mdx +++ b/docs/angular/src/content/jp/components/geo-map-shape-styling.mdx @@ -41,9 +41,6 @@ import { IgxShapefileRecord } from 'igniteui-angular-core'; - - - 次のコード例は、シェイプ スタイリングを設定する 4 つの異なる方法を提供する[シェイプ スタイリング ユーティリティ](geo-map-resources-shape-styling-utility.md) ファイルを使用していることに注意してください。 - [シェイプ比較スタイリング](#シェイプ比較スタイリング) - [シェイプ ランダム スタイリング](#シェイプ-ランダム-スタイリング) @@ -80,9 +77,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - ## シェイプ スケール スタイリング このコード スニペットは、**ShapeScaleStyling** のインスタンスを作成して、対数スケールでスケーリングされた母集団に基づいて塗りつぶし色を国に割り当てます。 @@ -117,9 +111,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - ## シェイプ範囲スタイリング このコード スニペットは、**ShapeRangeStyling** のインスタンスを作成して、人口の範囲に基づいて国に色を割り当てます。 @@ -155,9 +146,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - ## シェイプ比較スタイリング このコード スニペットは、**ShapeComparisonStyling** のインスタンスを作成して、世界の地域名に基づいて国に色を割り当てます。 @@ -208,10 +196,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx index fe89fe5c9f..e9df4c7205 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx @@ -64,15 +64,6 @@ Angular マップ コンポーネントでは、 diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx index e7a7c2a3da..9c7427551b 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx @@ -47,16 +47,6 @@ Angular マップ コンポーネントでは、 diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx index 0eb3379458..154af0c041 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx @@ -63,14 +63,6 @@ ValueBrushScale クラスは、ユーザーの色分けのニーズもほとん - - - - - - - - ```html
    diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx index b46a9da5af..7385eb7ba8 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx @@ -58,15 +58,6 @@ Angular マップ コンポーネントでは、 diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx index b53b97f099..6f69455b6b 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx @@ -36,15 +36,6 @@ Angular マップ コンポーネントでは、 diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx index 2639b5d847..bd8eae3097 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx @@ -36,15 +36,6 @@ Angular マップ コンポーネントでは、 @@ -71,7 +62,6 @@ Angular マップ コンポーネントでは、 diff --git a/docs/angular/src/content/jp/components/geo-map.mdx b/docs/angular/src/content/jp/components/geo-map.mdx index ac83071998..e870e82eca 100644 --- a/docs/angular/src/content/jp/components/geo-map.mdx +++ b/docs/angular/src/content/jp/components/geo-map.mdx @@ -55,7 +55,6 @@ npm install --save igniteui-angular-maps - ```ts // app.module.ts import { IgxGeographicMapModule } from 'igniteui-angular-maps'; @@ -75,7 +74,6 @@ export class AppModule {} - ```ts import { AfterViewInit, Component, ViewChild } from "@angular/core"; import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; @@ -102,11 +100,6 @@ export class MapOverviewComponent implements AfterViewInit { - - - - -
    ## 使用方法 @@ -128,11 +121,6 @@ export class MapOverviewComponent implements AfterViewInit { - - - - -
    ## その他のリソース diff --git a/docs/angular/src/content/jp/components/icon-service.mdx b/docs/angular/src/content/jp/components/icon-service.mdx index 1a93a3780e..8b99474d5a 100644 --- a/docs/angular/src/content/jp/components/icon-service.mdx +++ b/docs/angular/src/content/jp/components/icon-service.mdx @@ -308,7 +308,7 @@ iconService.setIconRef('input_collapse', 'default', { | **drag_indicator** | 項目をドラッグできることを示すハンドルを表示するために使用されます。 | | **error** | 編集可能なセルで、誤ったデータ入力を示すために使用されます。 | | **expand_more** | Excel フィルタリング メニューで使用され、フィルターの追加を示します。 | -| **file_dowload** | Excel フィルター エクスポーターによって使用されます。 | +| **file_download** | Excel フィルター エクスポーターによって使用されます。 | | **filter_*** | さまざまなフィルタリング オペランドに使用されます。 | | **group_work** | グループ化ドロップ領域で使用されます。 | | **hide** | さまざまな UI 要素によって列を非表示にするために使用されます。 | diff --git a/docs/angular/src/content/jp/components/input-group.mdx b/docs/angular/src/content/jp/components/input-group.mdx index 4c741bad6a..88ee8752d9 100644 --- a/docs/angular/src/content/jp/components/input-group.mdx +++ b/docs/angular/src/content/jp/components/input-group.mdx @@ -453,7 +453,7 @@ constructor(fb: FormBuilder) {
    - +
    diff --git a/docs/angular/src/content/jp/components/inputs/color-editor.mdx b/docs/angular/src/content/jp/components/inputs/color-editor.mdx index 25723c4773..b598bd90f9 100644 --- a/docs/angular/src/content/jp/components/inputs/color-editor.mdx +++ b/docs/angular/src/content/jp/components/inputs/color-editor.mdx @@ -38,15 +38,6 @@ npm install igniteui-angular-inputs - - - - - - - - - ## 使用方法 の使用を開始する最も簡単な方法は次のとおりです: @@ -54,7 +45,6 @@ npm install igniteui-angular-inputs - ```html { - - - - -
    diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx index 3a3df16252..be406c5543 100644 --- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -36,11 +36,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/原則**| (a)
    |(b)
    |(c)
    |(d)
    |(e)
    |(f)
    |(g)
    |(h)
    |(i)
    |(j)
    |(k)
    |(l)
    |(m)
    |(n)
    |(o)
    |(p)
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*||||||||||||||||| +|_グリッド_||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|*その他*||||||||||*||||||| +|_その他_||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -115,11 +115,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/ガイドライン**|1.1
    |1.2
    |1.3
    |1.4
    |2.1
    |2.2
    |2.3
    |2.4
    |2.5
    |3.1
    |3.2
    |3.3
    |4.1
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*|||||||||||||| +|_グリッド_|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|*その他*|||||||*||||||| +|_その他_|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| diff --git a/docs/angular/src/content/jp/components/linear-gauge.mdx b/docs/angular/src/content/jp/components/linear-gauge.mdx index 1e46b10f6c..c175df3c50 100644 --- a/docs/angular/src/content/jp/components/linear-gauge.mdx +++ b/docs/angular/src/content/jp/components/linear-gauge.mdx @@ -30,7 +30,6 @@ Ignite UI for Angular リニア ゲージ コンポーネントを使用する - ## 依存関係 Angular gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -50,8 +49,6 @@ npm install --save igniteui-angular-gauges - - ```ts // app.module.ts import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; @@ -69,10 +66,6 @@ export class AppModule {} - - - -
    ## 使用方法 @@ -105,11 +98,6 @@ export class AppModule {} - - - - -
    ## 針 @@ -144,12 +132,6 @@ export class AppModule {} - - - - - - @@ -182,11 +164,6 @@ export class AppModule {} - - - - - @@ -219,12 +196,6 @@ export class AppModule {} - - - - - - @@ -262,11 +233,6 @@ export class AppModule {} - - - - - @@ -294,12 +260,6 @@ export class AppModule {} - - - - - - @@ -326,12 +286,6 @@ export class AppModule {} - - - - - - @@ -361,12 +315,6 @@ export class AppModule {} - - - - - - @@ -453,11 +401,6 @@ export class AppModule {} - - - - -
    diff --git a/docs/angular/src/content/jp/components/menus/toolbar.mdx b/docs/angular/src/content/jp/components/menus/toolbar.mdx index 47b45f99d7..f159969335 100644 --- a/docs/angular/src/content/jp/components/menus/toolbar.mdx +++ b/docs/angular/src/content/jp/components/menus/toolbar.mdx @@ -60,7 +60,6 @@ export class AppModule {} - ```ts import { IgxToolbarModule } from 'igniteui-react-layouts'; import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule } from 'igniteui-react-charts'; @@ -77,13 +76,6 @@ IgrDataChartCategoryTrendLineModule.register(); - - - - - - - ## 使用方法 ### ツール操作 @@ -115,7 +107,6 @@ Angular ツールバーには、 項目とメニューが使用可能になります。以下は、組み込みの Angular `DataChart` ツール操作とそれに関連付けられた `OverlayId` のリストです。 ズーム操作 @@ -151,20 +137,20 @@ Angular ツールバーには、 property. @@ -249,11 +234,6 @@ By default the Angular Toolbar is shown horizontally, but it also has the abilit - - - - - The following example demonstrates the vertical orientation of the Angular Toolbar. @@ -280,11 +260,6 @@ You can add a custom color editor tool to the the Angular Toolbar, which will al - - - - - The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool. @@ -303,12 +278,7 @@ The icon component can be styled by using it's `BaseTheme` property directly to - - - - - -{/* The following example demonstrates the various theme options that can be applied. +{/*The following example demonstrates the various theme options that can be applied. */} diff --git a/docs/angular/src/content/jp/components/overlay-scroll.mdx b/docs/angular/src/content/jp/components/overlay-scroll.mdx index ca0db5ceb3..a8bed49fcb 100644 --- a/docs/angular/src/content/jp/components/overlay-scroll.mdx +++ b/docs/angular/src/content/jp/components/overlay-scroll.mdx @@ -16,10 +16,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 3. **Close** - 許容値を使用して許容範囲を超えた場合にスクロールで展開したコンポーネントを閉じます。 4. **Absolute** - すべてをスクロールします。 -1. **NoOperation** - does nothing. -2. **Block** - the event is canceled and the component does not scroll with the window. -3. **Close** - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded. -4. **Absolute** - scrolls everything. +5. **NoOperation** - does nothing. +6. **Block** - the event is canceled and the component does not scroll with the window. +7. **Close** - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded. +8. **Absolute** - scrolls everything. ## 使用方法 diff --git a/docs/angular/src/content/jp/components/radial-gauge.mdx b/docs/angular/src/content/jp/components/radial-gauge.mdx index 39d7449a12..81ab9159b3 100644 --- a/docs/angular/src/content/jp/components/radial-gauge.mdx +++ b/docs/angular/src/content/jp/components/radial-gauge.mdx @@ -31,7 +31,6 @@ Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラ - ## 依存関係 gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -44,10 +43,6 @@ npm install --save igniteui-angular-gauges - - - - ## モジュールの要件 `RadialGauge` を作成するには、以下のモジュールが必要です。 @@ -55,8 +50,6 @@ npm install --save igniteui-angular-gauges - - ```ts // app.module.ts import { IgxRadialGaugeModule } from 'igniteui-angular-gauges'; @@ -74,10 +67,6 @@ export class AppModule {} - - - -
    @@ -111,11 +100,6 @@ export class AppModule {} - - - - -
    ## バッキング @@ -148,12 +132,6 @@ export class AppModule {} - - - - - - @@ -183,12 +161,6 @@ export class AppModule {} - - - - - - @@ -216,12 +188,6 @@ export class AppModule {} - - - - - - @@ -243,11 +209,6 @@ export class AppModule {} - - - - - ## オプティカル スケーリング ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず `OpticalScalingEnabled` を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する `OpticalScalingSize` を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。 @@ -281,12 +242,6 @@ export class AppModule {} - - - - - - @@ -319,12 +274,6 @@ export class AppModule {} - - - - - - @@ -363,11 +312,6 @@ export class AppModule {} - - - - - @@ -395,11 +339,6 @@ export class AppModule {} - - - - - @@ -480,12 +419,6 @@ export class AppModule {} - - - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx index f1ce3e36a4..de701eaec5 100644 --- a/docs/angular/src/content/jp/components/radio-button.mdx +++ b/docs/angular/src/content/jp/components/radio-button.mdx @@ -270,7 +270,7 @@ class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" ## Radio Group
    -The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms. +The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
    ### デモ diff --git a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx index 2c748ac16f..04a1b2f626 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx @@ -107,9 +107,6 @@ import { WorksheetCell } from 'igniteui-angular-excel'; - - - ## コード スニペット 以下のコード スニペットは、 コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。 diff --git a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx index c354900552..5914ddcef9 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx @@ -39,9 +39,6 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; - - -
    diff --git a/docs/angular/src/content/jp/components/spreadsheet-commands.mdx b/docs/angular/src/content/jp/components/spreadsheet-commands.mdx index 8d05577c14..207dda49ea 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-commands.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-commands.mdx @@ -39,9 +39,6 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; - - -
    @@ -69,10 +66,6 @@ public zoomOut(): void { - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx index 9113eddb7f..58f50daca3 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx @@ -75,7 +75,3 @@ import { WorkbookColorInfo } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx index 5caadda568..59c76978d1 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx @@ -45,13 +45,6 @@ Enter キーを押したときに移動する隣接セルの方向は、`EnterKe - - - - - - - ```ts this.spreadsheet.isEnterKeyNavigationEnabled = true; this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left; @@ -72,9 +65,6 @@ Angular `Spreadsheet` は、コントロールの `IsFormulaBarVisible` プロ - - - ```ts this.spreadsheet.isFormulaBarVisible = true; ``` @@ -94,9 +84,6 @@ this.spreadsheet.isFormulaBarVisible = true; - - - ```ts this.spreadsheet.areGridlinesVisible = true; ``` @@ -116,9 +103,6 @@ this.spreadsheet.areGridlinesVisible = true; - - - ```ts this.spreadsheet.areHeadersVisible = false; ``` @@ -142,9 +126,6 @@ this.spreadsheet.areHeadersVisible = false; - - - ```ts this.spreadsheet.isInEndMode = true; ``` @@ -181,13 +162,6 @@ this.spreadsheet.activeWorksheet.unprotect(); - - - - - - - ```ts this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection; ``` @@ -233,9 +207,6 @@ Angular Spreadsheet コンポーネントは、`ZoomLevel` プロパティを設 - - - ```ts this.spreadsheet.zoomLevel = 200; ``` diff --git a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx index e9411b9109..87033d69ba 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx @@ -42,7 +42,3 @@ import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx index 03dd94837c..1d33d7b0ad 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx @@ -39,7 +39,3 @@ import { WorksheetHyperlink } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx index 68a9431d25..860690fa82 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx @@ -74,8 +74,6 @@ npm install --save igniteui-angular-spreadsheet - - ```ts import { IgxExcelModule } from 'igniteui-angular-excel'; import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; @@ -94,9 +92,6 @@ export class AppModule {} - - -
    ## 使用方法 @@ -113,7 +108,6 @@ Angular スプレッドシート モジュールがインポートされたの - 次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して `Workbook` を保存およびロードしています。 @@ -143,10 +137,6 @@ ngOnInit() { - - - - ## API リファレンス diff --git a/docs/angular/src/content/jp/components/switch.mdx b/docs/angular/src/content/jp/components/switch.mdx index beb491fe2f..7ad2478a62 100644 --- a/docs/angular/src/content/jp/components/switch.mdx +++ b/docs/angular/src/content/jp/components/switch.mdx @@ -151,7 +151,7 @@ igx-switch {
    - +
    diff --git a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx index d47cf98655..3132443fb4 100644 --- a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx +++ b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx @@ -25,6 +25,7 @@ Ignite UI for Angular offers full theming customization through CSS variables an ```cmd ng add igniteui-angular ``` + ### 1. Tailwind のインストール diff --git a/docs/angular/src/content/jp/components/themes/sass/animations.mdx b/docs/angular/src/content/jp/components/themes/sass/animations.mdx index 5d4e07c208..99f5b2ea1e 100644 --- a/docs/angular/src/content/jp/components/themes/sass/animations.mdx +++ b/docs/angular/src/content/jp/components/themes/sass/animations.mdx @@ -59,7 +59,7 @@ Ignite UI for Angular [keyframes]({environment:sassApiUrl}/animations#mixin-keyf ### アニメーション ミックスイン -[аnimation]({environment:sassApiUrl}/animations#mixin-animation) ミックスインは、パラメーターとして渡されたアニメーション プロパティのリストを使用して要素をアニメーション化するための機能を果たします。ユーザーは、`name`、`duration`、`delay`、`direction`、`iteration count` などのアニメーション プロパティを指定できます。複数のキーフレーム アニメーションを `animation` ミックスインに渡すことができます。 +[animation]({environment:sassApiUrl}/animations#mixin-animation) ミックスインは、パラメーターとして渡されたアニメーション プロパティのリストを使用して要素をアニメーション化するための機能を果たします。ユーザーは、`name`、`duration`、`delay`、`direction`、`iteration count` などのアニメーション プロパティを指定できます。複数のキーフレーム アニメーションを `animation` ミックスインに渡すことができます。 ```scss //include the 'fade-in-top' keyframes animation mixin diff --git a/docs/angular/src/content/jp/components/themes/typography.mdx b/docs/angular/src/content/jp/components/themes/typography.mdx index 1452b0be67..50e8ca0908 100644 --- a/docs/angular/src/content/jp/components/themes/typography.mdx +++ b/docs/angular/src/content/jp/components/themes/typography.mdx @@ -39,7 +39,7 @@ Ignite UI for Angular のタイポグラフィは、[マテリアル タイプ
    -各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Boostrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。 +各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Bootstrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。 ## 使用方法 diff --git a/docs/angular/src/content/jp/components/zoomslider-overview.mdx b/docs/angular/src/content/jp/components/zoomslider-overview.mdx index 727d1dc3e9..3e79732ea2 100644 --- a/docs/angular/src/content/jp/components/zoomslider-overview.mdx +++ b/docs/angular/src/content/jp/components/zoomslider-overview.mdx @@ -39,8 +39,6 @@ Angular ZoomSlider コントロールは、範囲対応コントロールにズ - - ## 依存関係 Angular chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -60,7 +58,6 @@ npm install --save igniteui-angular-charts - ```ts import { IgxZoomSliderModule } from 'igniteui-angular-charts'; import { IgxZoomSliderComponent } from 'igniteui-angular-charts'; @@ -78,9 +75,6 @@ export class AppModule {} - - - ## コード スニペット 以下のコードは、ZoomSlider を設定する方法を示します。 @@ -97,10 +91,6 @@ export class AppModule {} - - - -
    ## その他のリソース diff --git a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx index 097a9766d9..453295875a 100644 --- a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx +++ b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx @@ -105,6 +105,7 @@ export class AppModule {} ... ``` + @@ -122,6 +123,7 @@ export class AppModule {} (click)="openCommitDialog()">Commit ... ``` + トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、`{ComponentTitle}` は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで を呼び出すことです。 diff --git a/docs/angular/src/content/jp/grids_templates/cell-merging.mdx b/docs/angular/src/content/jp/grids_templates/cell-merging.mdx index 713d49f8fc..4969fec9e5 100644 --- a/docs/angular/src/content/jp/grids_templates/cell-merging.mdx +++ b/docs/angular/src/content/jp/grids_templates/cell-merging.mdx @@ -213,6 +213,7 @@ If a merged cell is clicked, the closest cell from the merge sequence will becom |既知の制限| 説明| | --- | --- | | セルの結合は、複数行レイアウトとの組み合わせではサポートされません。 | 両方とも複雑なレイアウトを使用するため、同時に使用することはできません。このような無効な構成が検出された場合は警告が表示されます。 | + ## API リファレンス diff --git a/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx b/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx index bd784a62c4..0be42de897 100644 --- a/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx +++ b/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx @@ -77,7 +77,7 @@ IE 11のセルを`コピー`するためには、キーボード選択を使用 Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。 -- コピー操作が実行されたときに発生します。 を使用してコピー動作が有効になっている場合のみ発生します。 +- コピー操作が実行されたときに発生します。 を使用してコピー動作が有効になっている場合のみ発生します。 ## その他のリソース diff --git a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx index e315616a4d..6415a64702 100644 --- a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx @@ -630,7 +630,7 @@ $custom-button: flat-button-theme( - [列のサイズ変更](/{igPath}/column-resizing) - [選択](/{igPath}/selection) -* [検索](/{igPath}/search) +- [検索](/{igPath}/search)
    コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx index 4f47f22291..0d126a815f 100644 --- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx @@ -201,7 +201,7 @@ $custom-grid-theme: grid-theme( - - - プロパティ: + プロパティ: - - diff --git a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx index 429b231bba..c44f954a31 100644 --- a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx +++ b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx @@ -279,7 +279,7 @@ public processData() { このトピックのはじめにあるコードの結果は、[デモ](#angular-tree-grid-リモート-データ操作の例)で確認できます。 - {/* TODO */} + {/*TODO*/} ## 一意の列値ストラテジ diff --git a/docs/angular/src/content/jp/grids_templates/row-drag.mdx b/docs/angular/src/content/jp/grids_templates/row-drag.mdx index c386e14339..a8fdbe5aa8 100644 --- a/docs/angular/src/content/jp/grids_templates/row-drag.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-drag.mdx @@ -224,7 +224,7 @@ export class {ComponentName}RowDragComponent { } ``` -次のように `ViewChild` デコレータを使用して各グリッドに refenrece を定義し、ドロップを処理します。 +次のように `ViewChild` デコレータを使用して各グリッドに reference を定義し、ドロップを処理します。 - 削除される行のデータを含む行を `targetGrid` に追加します。 - `sourceGrid` からドラッグした行を削除します。 diff --git a/docs/angular/src/content/kr/components/action-strip.md b/docs/angular/src/content/kr/components/action-strip.md index 97a8dd31d8..ed896f1372 100644 --- a/docs/angular/src/content/kr/components/action-strip.md +++ b/docs/angular/src/content/kr/components/action-strip.md @@ -14,8 +14,8 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai #### Demo - @@ -57,8 +57,8 @@ For scenarios where more than three action items will be shown, it is best to us ``` - @@ -90,11 +90,12 @@ This can be utilized via grid action components and we are providing two default ``` + >Note: These components inherit [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. - @@ -102,10 +103,13 @@ This can be utilized via grid action components and we are providing two default ### Styling To customize the Action Strip, you first need to import the `index` file, where all styling functions and mixins are located. + ```scss @import '~igniteui-angular/lib/core/styles/themes/index' ``` + Next, we have to create a new theme that extends the `action-strip-theme` and pass the parameters which we'd like to change: + ```scss $custom-strip: action-strip-theme( $background: rgba(150, 133, 143, 0.4), @@ -119,19 +123,21 @@ $custom-strip: action-strip-theme( The last step is to include the newly created component theme in our application. When `$legacy-support` is set to `false`(default), include the component css variables like this: + ```scss @include css-vars($custom-strip); ``` When `$legacy-support` is set to `true`, include the component theme like this: + ```scss @include action-strip($custom-strip); ``` - @@ -140,26 +146,26 @@ When `$legacy-support` is set to `true`, include the component theme like this: ### API and Style References For more detailed information regarding the Action Strip API, refer to the following links: -* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) +- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) The following built-in CSS styles helped us achieve this Action Strip layout: -* [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme) +- [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme) Additional components and/or directives that can be used within the Action Strip: -* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) -* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) -* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) -* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html) +- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) +- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) +- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) +- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
    -###Additional Resources +### Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/autocomplete.md b/docs/angular/src/content/kr/components/autocomplete.md index c6f27257b3..73f61d66a4 100644 --- a/docs/angular/src/content/kr/components/autocomplete.md +++ b/docs/angular/src/content/kr/components/autocomplete.md @@ -88,30 +88,30 @@ export class AutocompleteSampleComponent { ### Keyboard Navigation - - `Arrow Down`, `Arrow Up`, `Alt` + `Arrow Down`, `Alt` + `Arrow Up` will open the `drop-down`, if closed. - - Typing in the input will open the drop-down, if it is closed. - - `Arrow Down` - will move to the next drop-down item, if it is opened. - - `Arrow Up` - will move to the previous drop-down item, if it is opened. - - `Enter` will confirm the already selected item and will close the drop-down. - - `Esc` will close the drop-down. +- `Arrow Down`, `Arrow Up`, `Alt` + `Arrow Down`, `Alt` + `Arrow Up` will open the `drop-down`, if closed. +- Typing in the input will open the drop-down, if it is closed. +- `Arrow Down` - will move to the next drop-down item, if it is opened. +- `Arrow Up` - will move to the previous drop-down item, if it is opened. +- `Enter` will confirm the already selected item and will close the drop-down. +- `Esc` will close the drop-down. > Note: When the autocomplete is opened, then the first item, in the list, is automatically selected. The same is valid when the list is filtered. ### Compatibility support Applying the `igxAutocomplete` directive will decorate the element with the following ARIA attributes: - - role="combobox" - role of the element, where the directive is applied. - - aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list - - aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values. - - aria-expanded="true"/"false" - value depending on the collapsed state of the drop-down. - - aria-owns="dropDownID" - id of the drop-down used for displaying suggestions. - - aria-activedescendant="listItemId" - value is set to the id of the current active list element. +- role="combobox" - role of the element, where the directive is applied. +- aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list +- aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values. +- aria-expanded="true"/"false" - value depending on the collapsed state of the drop-down. +- aria-owns="dropDownID" - id of the drop-down used for displaying suggestions. +- aria-activedescendant="listItemId" - value is set to the id of the current active list element. The `drop-down` component, used as provider for suggestions, will expose the following ARIA attributes: - - role="listbox" - applied on the `igx-drop-down` component container - - role="group" - applied on the `igx-drop-down-item-group` component container - - role="option" - applied on the `igx-drop-down-item` component container - - aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled. +- role="listbox" - applied on the `igx-drop-down` component container +- role="group" - applied on the `igx-drop-down-item-group` component container +- role="option" - applied on the `igx-drop-down-item` component container +- aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled. ### Enabling/Disabling autocomplete drop-down @@ -240,19 +240,19 @@ For the purpose of the sample there is a delay in the data loading, in order to ## API References
    -* [IgxAutocompleteDirective]({environment:angularApiUrl}/classes/igxautocompletedirective.html) -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxAutocompleteDirective]({environment:angularApiUrl}/classes/igxautocompletedirective.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Additional Resources
    -* [IgxDropDownComponent](drop-down.md) -* [IgxInputGroup](input-group.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) +- [IgxDropDownComponent](drop-down.md) +- [IgxInputGroup](input-group.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/avatar.md b/docs/angular/src/content/kr/components/avatar.md index f0e9d4090c..6c5e4ff5f6 100644 --- a/docs/angular/src/content/kr/components/avatar.md +++ b/docs/angular/src/content/kr/components/avatar.md @@ -5,7 +5,7 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Avatar +## Avatar

    The Ignite UI for Angular Avatar component helps adding images, material icons, or initials to your application.

    @@ -13,8 +13,8 @@ _language: kr ### Avatar Demo - @@ -37,15 +37,17 @@ import { IgxAvatarModule } from 'igniteui-angular'; }) export class AppModule {} ``` + The Avatar can be either square or circular, with three size options (small, medium and large). It can be used for displaying initials, images or icons. -####Avatar displaying initials +#### Avatar displaying initials To get a simple avatar with [`initials`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#initials) (i.e. JS for 'Jack Sock'), add the following code inside the component template: ```html ``` + Let's enhance our avatar by making it circular and bigger in size. We can also change the background through the [`bgColor`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#bgcolor) property or set a color on the initials through the [`color`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#color) property. All of these are input properties and can be bound to some component properties. ```html @@ -56,6 +58,7 @@ Let's enhance our avatar by making it circular and bigger in size. We can also c [color]="color"> ``` + ```typescript // avatar.component.ts ... @@ -64,14 +67,15 @@ Let's enhance our avatar by making it circular and bigger in size. We can also c public isCircular = true; ``` + If all went well, you should see something like the following in the browser:
    -####Avatar displaying image -To get an avatar that dispalays an image, all you have to do is setting the image source via the [`src`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#src) property. +#### Avatar displaying image +To get an avatar that displays an image, all you have to do is setting the image source via the [`src`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#src) property. ```html -####Avatar displaying icon +#### Avatar displaying icon Analogically, the avatar can display an icon via the [`icon`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#icon) property. Currently all icons from the material icon set are supported. ```html @@ -105,12 +110,12 @@ Analogically, the avatar can display an icon via the [`icon`]({environment:angul ## API References
    -* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/badge.md b/docs/angular/src/content/kr/components/badge.md index eaf0e9f37b..8480bc4126 100644 --- a/docs/angular/src/content/kr/components/badge.md +++ b/docs/angular/src/content/kr/components/badge.md @@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Badge +## Badge

    The Ignite UI for Angular Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when visual notification is needed. Badges usually are designed as icons with a predefined style to communicate information, success, warnings, or errors.

    ### Badge Demo - @@ -21,7 +21,7 @@ _language: kr > [!NOTE] > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic. -###Usage +### Usage To get started with the Ignite UI for Angular Badge, let's first import the `IgxBadgeModule` in the **app.module.ts** file: ```typescript @@ -121,11 +121,12 @@ class Member { } } ``` + If the sample is configured properly, a list with members' name and status should be displayed. - @@ -156,8 +157,8 @@ Let's add an avatar in front of every chat member. To do this, put another div e ``` - @@ -168,9 +169,9 @@ Having just a list with names doesn't provide much useful visual information. Th Notice that the [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied. -In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named *icon* and *type*. +In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named _icon_ and _type_. -In order to position the badge in its parent container, create a custom css class *badge-style* and define the top and right positions. +In order to position the badge in its parent container, create a custom css class _badge-style_ and define the top and right positions. ```html @@ -207,8 +208,8 @@ In order to position the badge in its parent container, create a custom css clas If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge showing its current state. - @@ -216,19 +217,19 @@ If the sample is configured properly, a list of members should be displayed and ## API References
    -* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html) -* [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme) -* [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) -* [Type]({environment:angularApiUrl}/enums/type.html) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html) +- [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme) +- [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) +- [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) +- [Type]({environment:angularApiUrl}/enums/type.html) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/banner.md b/docs/angular/src/content/kr/components/banner.md index 558a3be92b..c50e5267ce 100644 --- a/docs/angular/src/content/kr/components/banner.md +++ b/docs/angular/src/content/kr/components/banner.md @@ -13,8 +13,8 @@ The Ignite UI for Angular Banner Component provides a way to easily display a pr ### Banner Demo - @@ -40,6 +40,7 @@ import { IgxBannerModule } from 'igniteui-angular'; }) export class AppModule {} ``` + ### Basic banner In order to display the Banner component, use its [`open()`]({environment:angularApiUrl}/classes/igxbannercomponent.html#open) method and call it on a button click. To configure the banner message, simply pass some text inside of the banner content. The text will show up in the specified banner area and the banner will use its default template when displaying it @@ -59,8 +60,8 @@ The banner appears relative to where the element was inserted in the page templa #### Basic Banner Demo - @@ -102,7 +103,7 @@ To pass an `igx-icon` to you banner, simply insert it in the `igx-banner`s conte #### Adding custom banner buttons -The `IgxBannerModule` also exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html). Using this directive allows you to override the default banner button (`Dismiss`) and add user defined custom actions. As most (but not all) of the button interactions are suposed to close the banner, make sure to call the banner's `close()` method in their `click` handlers. +The `IgxBannerModule` also exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html). Using this directive allows you to override the default banner button (`Dismiss`) and add user defined custom actions. As most (but not all) of the button interactions are supposed to close the banner, make sure to call the banner's `close()` method in their `click` handlers. > [!NOTE] > Per Google's [`Material Design` guidelines](https://material.io/design/components/banners.html#anatomy), a banner should have a maximum of 2 buttons present. The `IgxBannerComponent` **does not** explicitly limit developers from passing more than 2 elements under the `igx-banner-actions` tag, but it is strongly advised if you choose to adhere to the material design guidelines. @@ -121,6 +122,7 @@ To further template the 'Connection' banner, we can pass custom action handles u ... ``` + The dismiss option (`'Continue Offline'`) does not require any further logic, so it can just call `connectionBanner.close()`. The confirm action (`'Turn On Wifi'`) requires some additional logic, so we define it in the component. We create and subscribe to the `onNetworkStateChange` `Observable` and on each change we call the `refreshBanner` method, which toggles the banner depending on `wifiState`. ```typescript @@ -161,6 +163,7 @@ export class MyBannerComponent implements OnInit, OnDestroy { } } ``` + As the subscription fires on any change to `wifiState`, the banner can now also be toggled using the WiFi icon in the demo navbar. The results of the templated banner can be seen in the below demo: @@ -168,8 +171,8 @@ The results of the templated banner can be seen in the below demo: #### Templating Demo - @@ -205,14 +208,14 @@ export class MyBannerComponent { #### Animation Demo - ### Binding to events -The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The *ing* events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown. +The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The _ing_ events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown. To cancel an event bind it to the emitted object and set its `cancel` property to `true`. @@ -222,6 +225,7 @@ To cancel an event bind it to the emitted object and set its `cancel` property t ... ``` + ```typescript // banner.component.ts ... @@ -232,10 +236,11 @@ export class MyBannerComponent { } } ``` + > [!NOTE] > If the changes above are applied, the banner will never open, as the opening event is always cancelled. ## API Reference -* [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html) -* [IgxBannerComponent Theme]({environment:sassApiUrl}/themes#function-banner-theme) +- [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html) +- [IgxBannerComponent Theme]({environment:sassApiUrl}/themes#function-banner-theme) diff --git a/docs/angular/src/content/kr/components/button-group.md b/docs/angular/src/content/kr/components/button-group.md index 9875bf76e1..9ae66606f2 100644 --- a/docs/angular/src/content/kr/components/button-group.md +++ b/docs/angular/src/content/kr/components/button-group.md @@ -10,8 +10,8 @@ The [**igx-buttongroup**]({environment:angularApiUrl}/classes/igxbuttongroupcomp ### Button Group Demo - @@ -34,6 +34,7 @@ import { IgxButtonGroupModule } from 'igniteui-angular'; }) export class AppModule {} ``` + ### Usage Use [`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) to organize buttons into an Angular styled button group. @@ -69,8 +70,8 @@ igx-buttongroup{ } ``` - @@ -95,8 +96,8 @@ Use the the [`multiSelection`]({environment:angularApiUrl}/classes/igxbuttongrou ``` - @@ -104,7 +105,7 @@ Use the the [`multiSelection`]({environment:angularApiUrl}/classes/igxbuttongrou #### Display Density Use the [`displayDensity`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#displaydensity) input to set the display density for the button group. This will set the style for the buttons in the group to cosy, compact or comfortable (default value) accordingly. -> [!NOTE] +> [!NOTE] > The display density of a button within a button group is not changed if it is explicitly specified. ```typescript @@ -138,8 +139,8 @@ public selectDensity(event) { ``` - @@ -212,8 +213,8 @@ public ngOnInit() { ``` - @@ -221,15 +222,15 @@ public ngOnInit() { ## API References
    -* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) -* [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme) +- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) +- [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/button.md b/docs/angular/src/content/kr/components/button.md index 305f1af271..f5313390e3 100644 --- a/docs/angular/src/content/kr/components/button.md +++ b/docs/angular/src/content/kr/components/button.md @@ -12,8 +12,8 @@ The Button directive within Ignite UI for Angular is intended to be used on any ### Button Demo - @@ -102,6 +102,7 @@ A floating action button and use an icon to display: edit ``` +
    @@ -113,11 +114,13 @@ Or use icons as buttons: search ``` + ```html ``` + Icon results:
    -###API References +### API References
    -* [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html) -* [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme) -* [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html) -* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) -* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) -* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html) +- [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme) +- [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html) +- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) +- [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) +- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) diff --git a/docs/angular/src/content/kr/components/category-chart-axis-options.md b/docs/angular/src/content/kr/components/category-chart-axis-options.md index f31dafee63..a53d07dc5d 100644 --- a/docs/angular/src/content/kr/components/category-chart-axis-options.md +++ b/docs/angular/src/content/kr/components/category-chart-axis-options.md @@ -154,8 +154,8 @@ Ignite UI for Angular 카테고리 차트 컴포넌트에서는 축은 축 기 이 속성은 -1과 1 사이의 수치 소수값을 허용합니다. 이 값은 각 시리즈에 사용 가능한 픽셀 수에서 상대하는 중복을 나타냅니다. -- 음수 값(-1까지): 카테고리가 서로 생성하는 갭에 의해 떨어집니다. -- 양수 값(1까지): 카테고리가 서로 중복됩니다. 값1은 서로 차트 위에 카테고리를 렌더링합니다. +- 음수 값(-1까지): 카테고리가 서로 생성하는 갭에 의해 떨어집니다. +- 양수 값(1까지): 카테고리가 서로 중복됩니다. 값1은 서로 차트 위에 카테고리를 렌더링합니다. 다음의 코드 예제는 `XAxisOverlap`을 0으로 설정합니다. diff --git a/docs/angular/src/content/kr/components/category-chart-config-options.md b/docs/angular/src/content/kr/components/category-chart-config-options.md index 81f1154fd2..0ea726ab95 100644 --- a/docs/angular/src/content/kr/components/category-chart-config-options.md +++ b/docs/angular/src/content/kr/components/category-chart-config-options.md @@ -28,10 +28,10 @@ _language: kr width="700px" height="500px" chartType="waterfall" - brushes="blue, green" - negativeBrushes="red, yellow" - outlines="black" - thickness="5"> + brushes="blue, green" + negativeBrushes="red, yellow" + outlines="black" + thickness="5"> ``` diff --git a/docs/angular/src/content/kr/components/category-chart-high-frequency.md b/docs/angular/src/content/kr/components/category-chart-high-frequency.md index adb06467c2..4018793cc0 100644 --- a/docs/angular/src/content/kr/components/category-chart-high-frequency.md +++ b/docs/angular/src/content/kr/components/category-chart-high-frequency.md @@ -26,9 +26,9 @@ Ignite UI for Angular 카테고리 차트 컴포넌트는 다음 데모에서 컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다. -- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다. - - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다. - - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오. -- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다 +- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다. + - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다. + - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오. +- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다 > 참고: 애플리케이션에 성능 문제가 있는 경우, 디버그 빌드가 아닌 프로덕션 빌드에서 실행하면 차트 성능이 개선됩니다. 이러한 경우에는 프로덕션 빌드를 실행하십시오. diff --git a/docs/angular/src/content/kr/components/category-chart-high-volume.md b/docs/angular/src/content/kr/components/category-chart-high-volume.md index 907cf340f6..14cb7080cb 100644 --- a/docs/angular/src/content/kr/components/category-chart-high-volume.md +++ b/docs/angular/src/content/kr/components/category-chart-high-volume.md @@ -26,9 +26,9 @@ Ignite UI for Angular 카테고리 차트 컴포넌트는 다음의 데모에서 컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다. -- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다. - - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다. - - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오. -- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다 +- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다. + - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다. + - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오. +- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다 > 참고: 애플리케이션에 성능 문제가 있는 경우, 디버그 빌드가 아닌 프로덕션 빌드에서 실행하면 차트 성능이 개선됩니다. 이러한 경우에는 프로덕션 빌드를 실행하십시오. diff --git a/docs/angular/src/content/kr/components/category-chart-highlighting.md b/docs/angular/src/content/kr/components/category-chart-highlighting.md index 6cc7d2a60a..6d0d509a64 100644 --- a/docs/angular/src/content/kr/components/category-chart-highlighting.md +++ b/docs/angular/src/content/kr/components/category-chart-highlighting.md @@ -24,11 +24,11 @@ _language: kr 카테고리 차트 컴포넌트는 항목 위로 마우스를 가져간 경우, 3가지 유형의 강조 표시를 활성화할 수 있습니다. -1. 시리즈 강조 표시는 포인터가 데이터 점 위에 있을 때 단일 데이터 점을 강조 표시합니다. +1. 시리즈 강조 표시는 포인터가 데이터 점 위에 있을 때 단일 데이터 점을 강조 표시합니다. -2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다. +2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다. -3. 카테고리 강조 표시는 차트의 모든 카테고리 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축의 영역을 밝게 하는 모양을 그립니다. +3. 카테고리 강조 표시는 차트의 모든 카테고리 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축의 영역을 밝게 하는 모양을 그립니다. ```html The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox.

    ### Checkbox Demo - @@ -71,6 +71,7 @@ statusChanged() // event handler logic } ``` + Enhance the component template by adding a checkbox for each task and then setting the corresponding property bindings: ```html @@ -90,14 +91,14 @@ The final result would be something like that: ## API References
    -* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) -* [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) -* [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html) +- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) +- [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) +- [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/chip.md b/docs/angular/src/content/kr/components/chip.md index 9ad888a19e..35f7536be1 100644 --- a/docs/angular/src/content/kr/components/chip.md +++ b/docs/angular/src/content/kr/components/chip.md @@ -12,15 +12,15 @@ _language: kr #### Demo - #### Initializing Chips -The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is the main class for a chip elemenent and the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is the main class for a chip area. The chip area is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation etc.). The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) has an [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) input so that the different chips can be easily distinguished. If [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) is not provided it will be automatically generated. +The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is the main class for a chip element and the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is the main class for a chip area. The chip area is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation etc.). The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) has an [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) input so that the different chips can be easily distinguished. If [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) is not provided it will be automatically generated. Example of using [`igxChip`]({environment:angularApiUrl}/classes/igxchipcomponent.html) with [`igxChipArea`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html): @@ -194,17 +194,18 @@ The chip can be focused using the `Tab` key or by clicking on it. When in chip a - SPACE or ENTER Fires the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) output so the chip deletion can be handled manually. ### Styling -The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/themes#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip. +The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/themes#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip. - #### Importing global theme +#### Importing global theme To begin styling of the predefined chip layout, you need to import the `index` file, where all styling functions and mixins are located. + ```scss @import '~igniteui-angular/lib/core/styles/themes/index' -``` +``` #### Defining custom theme Next, create a new theme, that extends the [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) and accepts the parameters, required to customize the chip as desired. - + ```scss $custom-theme: chip-theme( @@ -219,10 +220,10 @@ $custom-theme: chip-theme( $focus-selected-background: #ffcd0f, $border-radius: 5px ); -``` +``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -233,9 +234,9 @@ $custom-palette: palette( $primary: $black-color, $secondary: $yellow-color ); -``` +``` -After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. +After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. ```scss $custom-theme: chip-theme( @@ -253,8 +254,8 @@ $custom-theme: chip-theme( ``` #### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_chip`. +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_chip`. ```scss $custom-chip-schema: extend($_light-chip, ( @@ -269,8 +270,9 @@ $custom-chip-schema: extend($_light-chip, ( focus-selected-background: (igx-color("secondary", 500)), border-radius: 5px )); -``` -In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. +``` + +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. ```scss $my-custom-schema: extend($light-schema, ( @@ -284,7 +286,8 @@ $custom-theme: chip-theme( ``` #### Applying the custom theme -The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: +The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + ```scss @include chip($custom-theme); ``` @@ -298,7 +301,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. >[!NOTE] - >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component: ```scss :host { @@ -306,22 +309,22 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo @include chip($custom-theme); } } -``` +``` #### Demo - ### API -* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) -* [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) -* [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) +- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) +- [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) +- [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) ### References diff --git a/docs/angular/src/content/kr/components/circular-progress.md b/docs/angular/src/content/kr/components/circular-progress.md index f51c01d840..098e717bc7 100644 --- a/docs/angular/src/content/kr/components/circular-progress.md +++ b/docs/angular/src/content/kr/components/circular-progress.md @@ -5,7 +5,7 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Circular Progress +## Circular Progress

    The Ignite UI for Angular Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.

    @@ -19,8 +19,8 @@ The following example specifies the animation duration set to 5 seconds. ### Circular Progress Demo - @@ -29,6 +29,7 @@ The following example specifies the animation duration set to 5 seconds. ### Usage Circular Progress Indicator can be used to show a user that he is in a process. To get started with the Ignite UI for Angular Circular Progress, we should first import import the **IgxProgressBarModule** in the **app.module.ts** file: + ```typescript // app.module.ts @@ -42,6 +43,7 @@ import { IgxProgressBarModule } from 'igniteui-angular'; }) export class AppModule {} ``` + And now to have a better understanding how everything works, let's create a simple example, in which we will simulate a real process progress, that is triggered on button click. In order to make our example better we will need to import some additional modules in the **app.module.ts** file. @@ -57,6 +59,7 @@ import { }) export class AppModule {} ``` + Notice that the **igx-circular-bar** emits [`onProgressChanged`]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html#onprogresschanged) event that outputs an object that gives us `{currentValue: 65, previousValue: 64}` on each step. ```html @@ -112,10 +115,10 @@ Notice that the **igx-circular-bar** emits [`onProgressChanged`]({environment:an } ``` -And now if we set up everything correctly we should have the folllowing displayed in our browser: +And now if we set up everything correctly we should have the following displayed in our browser: - @@ -124,11 +127,11 @@ And now if we set up everything correctly we should have the folllowing displaye > [!NOTE] > The default progress update is **1% of the [`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) value**, this occurs when the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value is not defined. For faster progress, the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value should be defined greater than (**[`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) * 1%**), for slower, it should be less than the default progress update. -> When providing a value for the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) input, define this value greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, otherwise there will be only one update, which gets **the value that is passed for progress update**. +> When providing a value for the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) input, define this value greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, otherwise there will be only one update, which gets **the value that is passed for progress update**.
    ### API
    -* [IgxCircularProgressBarComponent]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html) -* [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-circular-theme) +- [IgxCircularProgressBarComponent]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html) +- [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-circular-theme) diff --git a/docs/angular/src/content/kr/components/combo-features.md b/docs/angular/src/content/kr/components/combo-features.md index 9e5aaf6bdc..b501edf815 100644 --- a/docs/angular/src/content/kr/components/combo-features.md +++ b/docs/angular/src/content/kr/components/combo-features.md @@ -41,6 +41,7 @@ export class AppModule {} ``` The demo uses [igx-switch]({environment:angularApiUrl}/classes/igxswitchcomponent.html) component to toggle [igx-combo]({environment:angularApiUrl}/classes/igxcombocomponent.html) properties' values. Note that grouping is enabled/disabled by setting [groupKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#groupkey) to corresponding data source entity or setting it to empty string. + ```html
    -* IgxComboComponent [**API Reference**]({environment:angularApiUrl}/classes/igxcombocomponent.html) and +- IgxComboComponent [**API Reference**]({environment:angularApiUrl}/classes/igxcombocomponent.html) and [**Themes Reference**]({environment:sassApiUrl}/themes#function-combo-theme). ## Additional Resources
    -* [Combo Remote Binding](combo-remote.md) -* [Combo Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) -* [IgxSwitch](switch.md) +- [Combo Remote Binding](combo-remote.md) +- [Combo Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) +- [IgxSwitch](switch.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/combo-remote.md b/docs/angular/src/content/kr/components/combo-remote.md index 3a76561b4c..4a9f236298 100644 --- a/docs/angular/src/content/kr/components/combo-remote.md +++ b/docs/angular/src/content/kr/components/combo-remote.md @@ -70,6 +70,7 @@ When the data is returned from the service as an observable, then we can set it ``` + Let's define the cases, when the [igx-combo]({environment:angularApiUrl}/classes/igxcombocomponent.html) will need to request new data: - when combo is initialized - when we scroll combo's list. Then combo will emit [dataPreLoad]({environment:angularApiUrl}/classes/igxcombocomponent.html#datapreload) along with the new combo `virtualizationState`, which allows to make a new request to the remote service. @@ -135,13 +136,13 @@ export class ComboRemoteComponent implements OnInit { ## Additional Resources
    -* [Combo Features](combo-features.md) -* [Combo Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) +- [Combo Features](combo-features.md) +- [Combo Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/combo-templates.md b/docs/angular/src/content/kr/components/combo-templates.md index b678bbe336..ddfd712249 100644 --- a/docs/angular/src/content/kr/components/combo-templates.md +++ b/docs/angular/src/content/kr/components/combo-templates.md @@ -74,12 +74,12 @@ Use selector `[igxComboItem]`: ```html - -
    - State: {{ display[key] }} - Region: {{ display.region }} -
    -     + +
    + State: {{ display[key] }} + Region: {{ display.region }} +
    +     ``` @@ -156,6 +156,7 @@ Use selector `[igxComboClearIcon]`: ### Templating combo input The above-mentioned selectors, `[igxComboClearIcon]` and `[igxComboToggleIcon]`, used with templates will change how the respective buttons appear in the combo input. Passing content inside of the `igx-combo` also allows templating of the combo input similar to the way an `igx-input-group` can be templated (using `igx-prefix`, `igx-suffix` and `[igxLabel]`). The code snippet below illustrates how to add an appropriate label and `igx-prefix` to the combo input, as well as changing the `clear` button icon: + ```html ... @@ -171,13 +172,13 @@ Passing content inside of the `igx-combo` also allows templating of the combo in ## Additional Resources
    -* [Combo Features](combo-features.md) -* [Combo Remote Binding](combo-remote.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) +- [Combo Features](combo-features.md) +- [Combo Remote Binding](combo-remote.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/combo.md b/docs/angular/src/content/kr/components/combo.md index 1464feefe5..40db9b6876 100644 --- a/docs/angular/src/content/kr/components/combo.md +++ b/docs/angular/src/content/kr/components/combo.md @@ -63,6 +63,7 @@ export class ComboDemo implements OnInit { } } ``` + > Note: If [displayKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#displaykey) is omitted then [valueKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#valuekey) entity will instead be used as item text. ## Features @@ -110,9 +111,9 @@ When igxCombo is opened, allow custom values are enabled and add item button is ## API
    -* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Known Issues @@ -126,16 +127,16 @@ When igxCombo is opened, allow custom values are enabled and add item button is ## Additional Resources
    -* [Combo Features](combo-features.md) -* [Combo Remote Binding](combo-remote.md) -* [Combo Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [Combo Features](combo-features.md) +- [Combo Remote Binding](combo-remote.md) +- [Combo Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/data-chart-axis-annotations.md b/docs/angular/src/content/kr/components/data-chart-axis-annotations.md index 13101407ac..08559ad8a8 100644 --- a/docs/angular/src/content/kr/components/data-chart-axis-annotations.md +++ b/docs/angular/src/content/kr/components/data-chart-axis-annotations.md @@ -21,9 +21,9 @@ In the Ignite UI for Angular data chart component, you are able to add annotatio In the Ignite UI for Angular data chart, the following are the series and layers that support axis annotations: -- [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html) -- [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinalvaluelayercomponent.html) -- [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html) +- [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html) +- [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinalvaluelayercomponent.html) +- [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html) You can enable the axis annotations by setting the [`isAxisAnnotationEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html#isaxisannotationenabled) property of the corresponding layer or overlay to `true`. In doing so, this will place a box on the corresponding owning axis or axes with the value that that particular overlay or layer represents at the point that it is currently at. For example, with the [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html), these annotations can appear on both the X and Y axes and will move around and change as you scroll around the plot area. @@ -54,5 +54,5 @@ This code demonstrates how to create a Ignite UI for Angular data chart with eac ## Additional Resources -- [Data Chart Series Annotations](data-chart-series-annotations.md) -- [Value Overlay](data-chart-value-overlay.md) +- [Data Chart Series Annotations](data-chart-series-annotations.md) +- [Value Overlay](data-chart-value-overlay.md) diff --git a/docs/angular/src/content/kr/components/data-chart-axis-locations.md b/docs/angular/src/content/kr/components/data-chart-axis-locations.md index b88cd12a81..19b1beba49 100644 --- a/docs/angular/src/content/kr/components/data-chart-axis-locations.md +++ b/docs/angular/src/content/kr/components/data-chart-axis-locations.md @@ -63,6 +63,6 @@ _language: kr ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-axis-sharing.md b/docs/angular/src/content/kr/components/data-chart-axis-sharing.md index fcea0396e3..51ff58f008 100644 --- a/docs/angular/src/content/kr/components/data-chart-axis-sharing.md +++ b/docs/angular/src/content/kr/components/data-chart-axis-sharing.md @@ -63,5 +63,5 @@ _language: kr ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-axis-types.md b/docs/angular/src/content/kr/components/data-chart-axis-types.md index 5ab8b1e85d..284180651f 100644 --- a/docs/angular/src/content/kr/components/data-chart-axis-types.md +++ b/docs/angular/src/content/kr/components/data-chart-axis-types.md @@ -157,9 +157,9 @@ _language: kr ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [축 설정](data-chart-axis-settings.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [축 설정](data-chart-axis-settings.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-data-sources.md b/docs/angular/src/content/kr/components/data-chart-data-sources.md index 49d58022a7..9ca59e03bd 100644 --- a/docs/angular/src/content/kr/components/data-chart-data-sources.md +++ b/docs/angular/src/content/kr/components/data-chart-data-sources.md @@ -10,14 +10,14 @@ _language: kr [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어에서 모든 시리즈를 올바르게 렌더링하려면 특정 수치와 데이터 열 유형이 필요합니다. 이 항목에서는 각 시리즈 그룹에 데이터 소스를 구현하는 방법에 대한 예제를 표시합니다. -- [카테고리 시리즈](data-chart-type-category-series.md)의 [SampleCategoryData](data-chart-data-sources-category.md) -- [금융 시리즈](data-chart-type-financial-series.md)의 [SampleFinancialData](data-chart-data-sources-financial.md) -- [폴라 시리즈](data-chart-type-polar-series.md)의 [SamplePolarData](data-chart-data-sources-polar.md) -- [레이디얼 시리즈](data-chart-type-radial-series.md)의 [SampleRadialData](data-chart-data-sources-radial.md) -- [범위 시리즈](data-chart-type-range-series.md)의 [SampleRangeData](data-chart-data-sources-range.md) -- [분산 HD 시리즈](data-chart-type-scatter-hd-series.md)의 [SampleDensityData](data-chart-data-sources-density.md) -- [분산 영역 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md) -- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md) -- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md) -- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md) -- [분산 모양 시리즈](data-chart-type-shape-series.md)의 [SampleShapeData](data-chart-data-sources-shape.md) +- [카테고리 시리즈](data-chart-type-category-series.md)의 [SampleCategoryData](data-chart-data-sources-category.md) +- [금융 시리즈](data-chart-type-financial-series.md)의 [SampleFinancialData](data-chart-data-sources-financial.md) +- [폴라 시리즈](data-chart-type-polar-series.md)의 [SamplePolarData](data-chart-data-sources-polar.md) +- [레이디얼 시리즈](data-chart-type-radial-series.md)의 [SampleRadialData](data-chart-data-sources-radial.md) +- [범위 시리즈](data-chart-type-range-series.md)의 [SampleRangeData](data-chart-data-sources-range.md) +- [분산 HD 시리즈](data-chart-type-scatter-hd-series.md)의 [SampleDensityData](data-chart-data-sources-density.md) +- [분산 영역 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md) +- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md) +- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md) +- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md) +- [분산 모양 시리즈](data-chart-type-shape-series.md)의 [SampleShapeData](data-chart-data-sources-shape.md) diff --git a/docs/angular/src/content/kr/components/data-chart-navigation.md b/docs/angular/src/content/kr/components/data-chart-navigation.md index cd03d4b241..e6a40e060f 100644 --- a/docs/angular/src/content/kr/components/data-chart-navigation.md +++ b/docs/angular/src/content/kr/components/data-chart-navigation.md @@ -52,20 +52,20 @@ UI에서 탐색을 허용하려면 확대/축소를 허용하려는 방향에 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 탐색은 마우스나 키보드가 활성화된 상태에서 실행됩니다. 다음 조작은 기본적으로 다음의 마우스 또는 키보드 조작을 사용하여 호출할 수 있습니다: -- **Panning**: 키보드의 화살표 키를 사용하거나 Shift 키를 누른 상태에서 마우스로 클릭하고 드래그합니다. -- **Zoom In**: 키보드의 PageUp 키를 사용하거나 마우스 휠을 위로 회전시킵니다. -- **Zoom Out**: 키보드의 PageDown 키를 사용하거나 마우스 휠을 아래로 회전시킵니다. -- **차트 플롯 영역에 맞춤**: 키보드의 Home 키입니다. 이것에 대한 마우스 조작은 없습니다. -- **영역 줌**: `DefaultInteraction` 속성을 기본값인 `DragZoom`으로 설정하고 플롯 영역 내에서 마우스를 클릭하고 드래그합니다. +- **Panning**: 키보드의 화살표 키를 사용하거나 Shift 키를 누른 상태에서 마우스로 클릭하고 드래그합니다. +- **Zoom In**: 키보드의 PageUp 키를 사용하거나 마우스 휠을 위로 회전시킵니다. +- **Zoom Out**: 키보드의 PageDown 키를 사용하거나 마우스 휠을 아래로 회전시킵니다. +- **차트 플롯 영역에 맞춤**: 키보드의 Home 키입니다. 이것에 대한 마우스 조작은 없습니다. +- **영역 줌**: `DefaultInteraction` 속성을 기본값인 `DragZoom`으로 설정하고 플롯 영역 내에서 마우스를 클릭하고 드래그합니다. 확대/축소 및 이동 조작은 `DragModifier` 및 `PanModifier` 속성을 각각 설정하고 보조 키를 사용하여 활성화할 수도 있습니다. 이러한 속성은 다음의 보조 키로 설정할 수 있으며 누르면 해당 조작이 활성화됩니다: -- Shift -- Alt -- Control -- Windows 키 -- Apple 키 -- None +- Shift +- Alt +- Control +- Windows 키 +- Apple 키 +- None 다음 코드 조각은 차트에서 UI 탐색을 활성화하는 방법을 보여줍니다: 다음은 **Shift** 키를 누른 상태에서 확대/축소, **Alt** 키를 누른 상태에서 이동만 가능합니다: @@ -113,11 +113,11 @@ The following code snippet demonstrates how to enable the overview plus detail p [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어는 차트에서 확대/축소 또는 이동 조작이 발생할 때마다 업데이트되는 여러 탐색 속성을 제공합니다. 이러한 각 속성을 설정하여 차트를 프로그래밍 방식으로 확대/축소 또는 이동할 수도 있습니다. 다음은 이러한 속성 목록입니다: -- `WindowPositionHorizontal`: 차트에 표시되는 콘텐츠 뷰 직사각형의 X부분을 나타내는 수치 값입니다. -- `WindowPositionVertical`: 차트에 표시되는 콘텐츠 뷰 직사각형의 Y부분을 나타내는 수치 값입니다. -- `WindowRect`: 현재 뷰에 있는 차트 부분을 표시하는 직사각형을 나타내는 `IgRect` 객체입니다. 예를 들면, "0, 0, 1, 1"의 `WindowRect`는 전체 차트입니다. -- [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalehorizontal): 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 나타내는 수치 값입니다. -- [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalevertical): 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 나타내는 수치 값입니다. +- `WindowPositionHorizontal`: 차트에 표시되는 콘텐츠 뷰 직사각형의 X부분을 나타내는 수치 값입니다. +- `WindowPositionVertical`: 차트에 표시되는 콘텐츠 뷰 직사각형의 Y부분을 나타내는 수치 값입니다. +- `WindowRect`: 현재 뷰에 있는 차트 부분을 표시하는 직사각형을 나타내는 `IgRect` 객체입니다. 예를 들면, "0, 0, 1, 1"의 `WindowRect`는 전체 차트입니다. +- [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalehorizontal): 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 나타내는 수치 값입니다. +- [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalevertical): 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 나타내는 수치 값입니다. 다음의 코드 조각은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 뷰를 프로그래밍 방식으로 변경하는 방법을 보여줍니다. 다음은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어를 나타내는 "chart"라는 변수가 있다고 가정한 경우입니다: diff --git a/docs/angular/src/content/kr/components/data-chart-series-markers.md b/docs/angular/src/content/kr/components/data-chart-series-markers.md index 25b8c65786..244b3edb23 100644 --- a/docs/angular/src/content/kr/components/data-chart-series-markers.md +++ b/docs/angular/src/content/kr/components/data-chart-series-markers.md @@ -24,14 +24,14 @@ _language: kr 대부분의 차트 시리즈는 다음과 같은 마커를 지원합니다: -- 모든 [카테고리 시리즈](data-chart-type-category-series.md) -- 모든 [폴라 시리즈](data-chart-type-polar-series.md) -- 모든 [레이디얼 시리즈](data-chart-type-radial-series.md) -- 분산 시리즈: - - [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md) - - [분산점 시리즈](data-chart-type-scatter-point-series.md) - - [분산 라인 시리즈](data-chart-type-scatter-point-series.md) - - [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md) +- 모든 [카테고리 시리즈](data-chart-type-category-series.md) +- 모든 [폴라 시리즈](data-chart-type-polar-series.md) +- 모든 [레이디얼 시리즈](data-chart-type-radial-series.md) +- 분산 시리즈: + - [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md) + - [분산점 시리즈](data-chart-type-scatter-point-series.md) + - [분산 라인 시리즈](data-chart-type-scatter-point-series.md) + - [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md) ## 마커 속성 @@ -74,6 +74,6 @@ This code snippet below demonstrate how to create custom marker with values of ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [시리즈 유형](data-chart-series-types.md) -- [시리즈 도구 설명](data-chart-series-tooltips.md) +- [축 유형](data-chart-axis-types.md) +- [시리즈 유형](data-chart-series-types.md) +- [시리즈 도구 설명](data-chart-series-tooltips.md) diff --git a/docs/angular/src/content/kr/components/data-chart-series-trendlines.md b/docs/angular/src/content/kr/components/data-chart-series-trendlines.md index fb2126d08d..3bcbc189e3 100644 --- a/docs/angular/src/content/kr/components/data-chart-series-trendlines.md +++ b/docs/angular/src/content/kr/components/data-chart-series-trendlines.md @@ -24,20 +24,20 @@ _language: kr 추세선은 스택 시리즈 및 범위 시리즈를 제외한 모든 시리즈에서 지원됩니다. 다음은 차트 시리즈에서 사용할 수 있는 추세선 목록입니다: -- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none) -- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit) -- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage) -- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage) -- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit) -- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit) -- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit) -- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage) -- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit) -- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit) -- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit) -- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit) -- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage) -- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage) +- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none) +- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit) +- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage) +- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage) +- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit) +- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit) +- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit) +- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage) +- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit) +- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit) +- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit) +- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit) +- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage) +- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage) 다음 코드 조각은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 시리즈에 추세선을 추가하는 방법을 보여 줍니다: diff --git a/docs/angular/src/content/kr/components/data-chart-series-types.md b/docs/angular/src/content/kr/components/data-chart-series-types.md index 80278d0501..59b4e726f2 100644 --- a/docs/angular/src/content/kr/components/data-chart-series-types.md +++ b/docs/angular/src/content/kr/components/data-chart-series-types.md @@ -16,88 +16,88 @@ _language: kr ### 카테고리 시리즈 -- [AreaSeries](data-chart-type-category-series.md) -- [BarSeries](data-chart-type-category-series.md) -- [ColumnSeries](data-chart-type-category-series.md) -- [LineSeries](data-chart-type-category-series.md) -- [PointSeries](data-chart-type-category-series.md) -- [SplineSeries](data-chart-type-category-series.md) -- [SplineAreaSeries](data-chart-type-category-series.md) -- [StepAreaSeries](data-chart-type-category-series.md) -- [StepLineSeries](data-chart-type-category-series.md) -- [WaterfallSeries](data-chart-type-category-series.md) +- [AreaSeries](data-chart-type-category-series.md) +- [BarSeries](data-chart-type-category-series.md) +- [ColumnSeries](data-chart-type-category-series.md) +- [LineSeries](data-chart-type-category-series.md) +- [PointSeries](data-chart-type-category-series.md) +- [SplineSeries](data-chart-type-category-series.md) +- [SplineAreaSeries](data-chart-type-category-series.md) +- [StepAreaSeries](data-chart-type-category-series.md) +- [StepLineSeries](data-chart-type-category-series.md) +- [WaterfallSeries](data-chart-type-category-series.md) ### 폴라 시리즈 -- [PolarAreaSeries](data-chart-type-polar-series.md) -- [PolarLineSeries](data-chart-type-polar-series.md) -- [PolarScatterSeries](data-chart-type-polar-series.md) -- [PolarSplineSeries](data-chart-type-polar-series.md) -- [PolarSplineAreaSeries](data-chart-type-polar-series.md) +- [PolarAreaSeries](data-chart-type-polar-series.md) +- [PolarLineSeries](data-chart-type-polar-series.md) +- [PolarScatterSeries](data-chart-type-polar-series.md) +- [PolarSplineSeries](data-chart-type-polar-series.md) +- [PolarSplineAreaSeries](data-chart-type-polar-series.md) ### Radial Series -- [RadialAreaSeries](data-chart-type-radial-series.md) -- [RadialLineSeries](data-chart-type-radial-series.md) -- [RadialColumnSeries](data-chart-type-radial-series.md) -- [RadialPieSeries](data-chart-type-radial-series.md) +- [RadialAreaSeries](data-chart-type-radial-series.md) +- [RadialLineSeries](data-chart-type-radial-series.md) +- [RadialColumnSeries](data-chart-type-radial-series.md) +- [RadialPieSeries](data-chart-type-radial-series.md) ### 범위 시리즈 -- [RangeAreaSeries](data-chart-type-range-series.md) -- [RangeColumnSeries](data-chart-type-range-series.md) +- [RangeAreaSeries](data-chart-type-range-series.md) +- [RangeColumnSeries](data-chart-type-range-series.md) ### 분산 시리즈 -- [분산 영역 시리즈](data-chart-type-scatter-area-series.md) -- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md) -- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md) -- [분산 마커 시리즈](data-chart-type-scatter-point-series.md) -- [분산 라인 시리즈](data-chart-type-scatter-point-series.md) -- [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md) -- [분산 폴리곤 시리즈](data-chart-type-shape-series.md) -- [분산 폴리라인 시리즈](data-chart-type-shape-series.md) +- [분산 영역 시리즈](data-chart-type-scatter-area-series.md) +- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md) +- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md) +- [분산 마커 시리즈](data-chart-type-scatter-point-series.md) +- [분산 라인 시리즈](data-chart-type-scatter-point-series.md) +- [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md) +- [분산 폴리곤 시리즈](data-chart-type-shape-series.md) +- [분산 폴리라인 시리즈](data-chart-type-shape-series.md) ### 금융 시리즈 -- [FinancialPriceSeries(OHLC)](data-chart-type-financial-series.md) -- [FinancialPriceSeries(Candlestick)](data-chart-type-financial-series.md) +- [FinancialPriceSeries(OHLC)](data-chart-type-financial-series.md) +- [FinancialPriceSeries(Candlestick)](data-chart-type-financial-series.md) ### 금융 오버레이 -- [BollingerBandsOverlay](data-chart-type-financial-series.md) -- [PriceChannelOverlay](data-chart-type-financial-series.md) +- [BollingerBandsOverlay](data-chart-type-financial-series.md) +- [PriceChannelOverlay](data-chart-type-financial-series.md) ### 금융지표 -- [AbsoluteVolumeOscillatorIndicator](data-chart-type-financial-series.md) -- [AccumulationDistributionIndicator](data-chart-type-financial-series.md) -- [BollingerBandWidthIndicator](data-chart-type-financial-series.md) -- [ChaikinVolatilityIndicator](data-chart-type-financial-series.md) -- [ChaikinOscillatorIndicator](data-chart-type-financial-series.md) -- [DetrendedPriceOscillatorIndicator](data-chart-type-financial-series.md) -- [CommodityChannelIndexIndicator](data-chart-type-financial-series.md) -- [EaseOfMovementIndicator](data-chart-type-financial-series.md) -- [FastStochasticOscillatorIndicator](data-chart-type-financial-series.md) -- [ForceIndexIndicator](data-chart-type-financial-series.md) -- [FullStochasticOscillatorIndicator](data-chart-type-financial-series.md) -- [MarketFacilitationIndexIndicator](data-chart-type-financial-series.md) -- [MassIndexIndicator](data-chart-type-financial-series.md) -- [MedianPriceIndicator](data-chart-type-financial-series.md) -- [MoneyFlowIndexIndicator](data-chart-type-financial-series.md) -- [MovingAverageConvergenceDivergenceIndicator](data-chart-type-financial-series.md) -- [NegativeVolumeIndexIndicator](data-chart-type-financial-series.md) -- [OnBalanceVolumeIndicator](data-chart-type-financial-series.md) -- [PercentageVolumeOscillatorIndicator](data-chart-type-financial-series.md) -- [PercentagePriceOscillatorIndicator](data-chart-type-financial-series.md) -- [PositiveVolumeIndexIndicator](data-chart-type-financial-series.md) -- [RateOfChangeAndMomentumIndicator](data-chart-type-financial-series.md) -- [RelativeStrengthIndexIndicator](data-chart-type-financial-series.md) -- [SlowStochasticOscillatorIndicator](data-chart-type-financial-series.md) -- [StandardDeviationIndicator](data-chart-type-financial-series.md) -- [StochRSIIndicator](data-chart-type-financial-series.md) -- [TRIXIndicator](data-chart-type-financial-series.md) -- [TypicalPriceIndicator](data-chart-type-financial-series.md) -- [UltimateOscillatorIndicator](data-chart-type-financial-series.md) -- [WeightedCloseIndicator](data-chart-type-financial-series.md) -- [WilliamsPercentRIndicator](data-chart-type-financial-series.md) +- [AbsoluteVolumeOscillatorIndicator](data-chart-type-financial-series.md) +- [AccumulationDistributionIndicator](data-chart-type-financial-series.md) +- [BollingerBandWidthIndicator](data-chart-type-financial-series.md) +- [ChaikinVolatilityIndicator](data-chart-type-financial-series.md) +- [ChaikinOscillatorIndicator](data-chart-type-financial-series.md) +- [DetrendedPriceOscillatorIndicator](data-chart-type-financial-series.md) +- [CommodityChannelIndexIndicator](data-chart-type-financial-series.md) +- [EaseOfMovementIndicator](data-chart-type-financial-series.md) +- [FastStochasticOscillatorIndicator](data-chart-type-financial-series.md) +- [ForceIndexIndicator](data-chart-type-financial-series.md) +- [FullStochasticOscillatorIndicator](data-chart-type-financial-series.md) +- [MarketFacilitationIndexIndicator](data-chart-type-financial-series.md) +- [MassIndexIndicator](data-chart-type-financial-series.md) +- [MedianPriceIndicator](data-chart-type-financial-series.md) +- [MoneyFlowIndexIndicator](data-chart-type-financial-series.md) +- [MovingAverageConvergenceDivergenceIndicator](data-chart-type-financial-series.md) +- [NegativeVolumeIndexIndicator](data-chart-type-financial-series.md) +- [OnBalanceVolumeIndicator](data-chart-type-financial-series.md) +- [PercentageVolumeOscillatorIndicator](data-chart-type-financial-series.md) +- [PercentagePriceOscillatorIndicator](data-chart-type-financial-series.md) +- [PositiveVolumeIndexIndicator](data-chart-type-financial-series.md) +- [RateOfChangeAndMomentumIndicator](data-chart-type-financial-series.md) +- [RelativeStrengthIndexIndicator](data-chart-type-financial-series.md) +- [SlowStochasticOscillatorIndicator](data-chart-type-financial-series.md) +- [StandardDeviationIndicator](data-chart-type-financial-series.md) +- [StochRSIIndicator](data-chart-type-financial-series.md) +- [TRIXIndicator](data-chart-type-financial-series.md) +- [TypicalPriceIndicator](data-chart-type-financial-series.md) +- [UltimateOscillatorIndicator](data-chart-type-financial-series.md) +- [WeightedCloseIndicator](data-chart-type-financial-series.md) +- [WilliamsPercentRIndicator](data-chart-type-financial-series.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-category-series.md b/docs/angular/src/content/kr/components/data-chart-type-category-series.md index 9c6bfbf8c0..f8044184a9 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-category-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-category-series.md @@ -57,10 +57,10 @@ _language: kr 카테고리 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 카테고리 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 -- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlineseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다 +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 카테고리 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 +- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlineseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다 [SampleCategoryData](data-chart-data-sources-category.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -146,12 +146,12 @@ import { IgxDataChartCategoryModule } from 'igniteui-angular-charts'; ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 주석](data-chart-series-annotations.md) -- [시리즈 강조 표시](data-chart-series-highlighting.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 도구 설명](data-chart-series-tooltips.md) -- [시리즈 추세선](data-chart-series-trendlines.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 주석](data-chart-series-annotations.md) +- [시리즈 강조 표시](data-chart-series-highlighting.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 도구 설명](data-chart-series-tooltips.md) +- [시리즈 추세선](data-chart-series-trendlines.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-financial-series.md b/docs/angular/src/content/kr/components/data-chart-type-financial-series.md index d4940776fd..a6da816c36 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-financial-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-financial-series.md @@ -29,47 +29,47 @@ _language: kr 금융 오버레이는 일반적으로 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html) 뒤에 표시되며 주가의 동향을 보여줍니다. 이러한 오버레이는 Y축에서 동일한 비율의 값을 사용하기 때문에 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)를 표시하는 동일한 데이터 차트에 표시할 수 있습니다. 다음 목록은 모든 금융 오버레이 유형을 보여줍니다: -- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)(BBO)는 가격의 표준 편차를 기반으로 하므로 가격 변동폭을 반영합니다. 밴드는 표준 편차가 증가할 때 더 넓어지고 표준 편차가 감소할 때 더 좁아지며 이동 평균에 의해 평탄해집니다. 사용자가 조정할 수 있는 표준 편차 및 평탄한 기간을 제외하고 BollingerBandsOverlay 너비의 비율에 영향을 주는 사용자가 조정 가능한 승수가 있으며, -- [`IgxPriceChannelOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricechanneloverlaycomponent.html)(PCO)는 가격 변동성 또는 2개의 평행선 간의 시간에 따른 가격 변화입니다. 아래 줄은 추세선으로 저가에 그려지고, 위쪽 줄은 채널선으로 고가에 기초합니다. 채널은 모든 시간대의 추세 방향을 보여줍니다. 가격 채널 또는 추세, 위, 아래 또는 옆으로 가능 +- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)(BBO)는 가격의 표준 편차를 기반으로 하므로 가격 변동폭을 반영합니다. 밴드는 표준 편차가 증가할 때 더 넓어지고 표준 편차가 감소할 때 더 좁아지며 이동 평균에 의해 평탄해집니다. 사용자가 조정할 수 있는 표준 편차 및 평탄한 기간을 제외하고 BollingerBandsOverlay 너비의 비율에 영향을 주는 사용자가 조정 가능한 승수가 있으며, +- [`IgxPriceChannelOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricechanneloverlaycomponent.html)(PCO)는 가격 변동성 또는 2개의 평행선 간의 시간에 따른 가격 변화입니다. 아래 줄은 추세선으로 저가에 그려지고, 위쪽 줄은 채널선으로 고가에 기초합니다. 채널은 모든 시간대의 추세 방향을 보여줍니다. 가격 채널 또는 추세, 위, 아래 또는 옆으로 가능 ## 금융지표 금융지표는 종종 거래자들이 변화를 측정하고 주가의 추세를 보여 주기 위해 사용됩니다. 이러한 지표는 일반적으로 동일한 Y축 비율을 공유하지 않기 때문에 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)의 차트 위 또는 아래에 별도의 차트로 표시됩니다. 단, 차트 제어는 원하는 경우, 여러 축을 사용하고 축을 공유하여 동일한 플롯 영역에 가격 시리즈와 지표를 나타내도록 지원합니다. 이에 대한 자세한 것은 [Axis Sharing and Multiple Axes](data-chart-axis-sharing.md) 항목을 참조하십시오. 또한, 모든 금융지표에는 인디케이터가 선, 열 또는 영역을 사용하여 렌더링되는지 여부를 결정하는 [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html#displaytype) 속성이 있습니다. 다음 목록은 모든 금융지표 유형을 보여줍니다: -- [`IgxAbsoluteVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxabsolutevolumeoscillatorindicatorcomponent.html)(AVO)는 2개의 평균 볼륨 측정값의 차이를 계산합니다. 백분율 볼륨 오실레이터와 유사하지만 점수 범위는 -100%~+100%입니다. 인디케이터는 볼륨 추세가 증가하는지 또는 감소하는지 식별하는 데 사용됩니다. 사용자는 분석 기간을 선택할 수 있으며 -- [`IgxAccumulationDistributionIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaccumulationdistributionindicatorcomponent.html)(ADI)는 매우 인기 있는 볼륨 관련 인디케이터입니다. 투자자가 매도 또는 매수에 대한 차이를 살펴봄으로써 주식, 증권 또는 지수의 공급 및 수요를 시간 경과에 따라 평가하며 -- [`IgxAverageDirectionalIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragedirectionalindexindicatorcomponent.html) | (ADX)는 추세 방향에 상관없이 추세 강도를 측정합니다. 이 인디케이터는 일반적으로 주식 동향의 강도와 방향을 결정하는 데 사용되며 -- [`IgxAverageTrueRangeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragetruerangeindicatorcomponent.html) | (ATR)는 주어진 기간 내에 증권의 가격 이동이나 변동성을 측정합니다. 이 인디케이터는 가격 방향이나 지속 기간의 측정이 아니라 가격 이동 또는 변동성의 양입니다. 평균 참 범위(ATR)은 종종 매일, 매주 또는 매월을 포함한 여러 기준을 사용하여 14일 기간을 주기로 계산됩니다. 평균 참 범위는 지난 14일 기간의 TR 값의 지수 이동 평균입니다. 실제 사용된 기간은 사용자 선호에 따라 다를 수 있으며 -- [`IgxBollingerBandWidthIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandwidthindicatorcomponent.html) | (BBW)는 [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 함께 사용됩니다. 이 인디케이터는 주어진 점에서 볼링거 밴드 폭을 나타냅니다. 편차가 클수록 밴드가 넓어집니다. 대역폭(하한값)을 줄이면 표준 편차가 줄어들고 대역폭(상한값)을 넓히면 가격의 표준 편차가 증가함을 나타냅니다. [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 같은 계수 인자를 지원하여 값을 일치시킬 수 있으며 -- [`IgxChaikinVolatilityIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinvolatilityindicatorcomponent.html)(CHV)는 특정 기간 동안의 고가 및 저가 가격 차이의 지수 이동 평균의 변화율을 보여줌으로써 증권의 변동성을 반영합니다. -- [`IgxChaikinOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinoscillatorindicatorcomponent.html)(COI)는 누적/분포 인디케이터의 추세를 식별하는 데 사용됩니다. 체킨 오실레이터는 누적/분포 인디케이터의 3일 지수 이동 평균(EMA)에서 뺀 누적/분포 인디케이터의 10일 EMA입니다. -- [`IgxCommodityChannelIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcommoditychannelindexindicatorcomponent.html)(CCI)는 증권의 주기적 추세를 파악하는 데 사용됩니다. 이 인디케이터는 증권 가격이 식별할 수 있는 주기에 따라 변한다는 가정에 기초한 것입니다. 특정 기간 동안의 표준 가격(SMATP)의 단순 이동 평균(SMA)과 이전 기간의 표준 가격(TP)의 차이를 상수와 절대 평균 편차의 곱으로 나눠 계산한 것입니다. -- [`IgxDetrendedPriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdetrendedpriceoscillatorindicatorcomponent.html) (DPO)는 단기 추세를 파악하기 위해 장기 가격 동향을 제어하도록 설계되었습니다. 이것은 이동 평균의 변화에 의한 것이며 모멘텀 오실레이터가 아닙니다. -- [`IgxEaseOfMovementIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxeaseofmovementindicatorcomponent.html)(EOM)는 증권 가격 변동에 필요한 볼륨을 파악하는 데 사용됩니다. 일반적으로 이동 평균으로 부드럽게 처리됩니다. -- [`IgxFastStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfaststochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 스탁캐스틱 오실레이터의 3가지 유형: 패스트, 슬로우, 풀. 이 인디케이터는 0~100 비율을 사용하여 특정 기간 동안 고/저 범위에 비례한 현재 마감가의 관계를 나타내는 모멘텀 인디케이터입니다. 상승하는 시장에서는 가격이 100에 가깝고, 하락하는 시장에서는 가격이 0에 가깝다는 전제에 기반하고 있습니다. 이 인디케이터는 매수 또는 매도 차이를 식별하는 데 사용됩니다. -- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxforceindexindicatorcomponent.html)(FII)는 금융 분석가들이 주식 추세가 긍정적인지 부정적인지를 판단하기 위해 사용하는 가격 및 볼륨 오실레이터입니다. 강도 지수는 오늘 종가에서 어제 종가를 뺀 다음 그 차액을 현재 날짜의 볼륨과 곱하여 계산합니다. 오늘 종가가 어제보다 높은 경우에는 강도는 긍정적입니다. 종가가 어제보다 낮은 경우에는 강도는 부정적입니다. -- [`IgxFullStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfullstochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)와 유사하지만 시간대 사용자 지정이 가능합니다. -- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 효율성 측정을 위해 분석에 가격과 볼륨을 결합합니다. 낮은 가격과 높은 가격의 차이를 볼륨으로 나누어 계산됩니다. -- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmassindexindicatorcomponent.html)(MII)는 추세 역전을 찾는 데 사용됩니다. 가격 범위가 넓어지면 반전이 일어날 수 있다는 전제에 기반하고 있습니다. 이 계산은 이전 거래 범위(하이 마이너스 로우)를 비교합니다. EMA는 이러한 용도로 사용됩니다. 이 인디케이터는 상당한 움직임이 있으면 증가하고 작은 움직임이 있으면 감소하며 -- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmedianpriceindicatorcomponent.html)(MPI)는 고가와 저가 사이의 중간점을 나타냅니다. 중간값은 중심 경향의 척도입니다. 이 인디케이터는 중간값의 차트를 표시합니다. -- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 모멘텀 지표로 상대 강도 지수(RSI)와 유사하며, MFI는 증권에 들어오고 나가는 자금 흐름의 척도로 사용되며 추세 역전을 예측하는 데 사용할 수 있습니다. MFI 범위는 0~100까지이며 RSI처럼 해석됩니다. -- [`IgxMovingAverageConvergenceDivergenceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmovingaverageconvergencedivergenceindicatorcomponent.html)(MACD)는 금융 서비스에서 가장 대표적인 인디케이터 중 하나입니다. 주가 추세의 강도, 방향, 모멘텀 또는 길이 변화를 파악하는 데 사용됩니다. MACD는 종가의 두 지수 이동 평균(EMA)의 차이로 계산됩니다. 그 차이는 시간 경과에 따라 차이의 이동 평균으로 차트화됩니다. -- [`IgxNegativeVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnegativevolumeindexindicatorcomponent.html)(NVI)는 [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)와 함께 자주 사용됩니다. 이 인디케이터는 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다. -- [`IgxOnBalanceVolumeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxonbalancevolumeindicatorcomponent.html)(OBV)는 주식의 총 판매량의 누계를 계산하고 해당 주식의 유입(구매) 또는 유출(판매) 여부를 표시합니다. 하루 동안의 총 판매량은 전날보다 가격이 높았는지 낮았는지에 따라 양수 또는 음수 값이 부여됩니다. 높은 종가는 양수 값을 산출하고, 낮은 종가는 음수 값을 발생합니다. 이 값은 누계에 누적됩니다. -- [`IgxPercentagePriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagepriceoscillatorindicatorcomponent.html)(PPO)는 두 이동 평균 사이의 차이를 보여줍니다. 이 차이는 큰 이동 평균의 백분율로 표시됩니다. 최종 사용자는 분석 기간을 선택합니다. -- [`IgxPercentageVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagevolumeoscillatorindicatorcomponent.html)(PVO)는 장기 및 단기 기간을 사용하여 완만해진 볼륨 사이의 백분율 차이입니다. 이 인디케이터는 0을 중심으로 맴돕니다. 사용자는 분석할 다양한 기간 값을 선택할 수 있습니다. 이 인디케이터는 그래픽으로 표시하면 볼륨 패턴을 감지하는 데 유용할 수 있습니다. PVO가 증가하면 볼륨 수준이 증가하고, PVO가 감소하면 볼륨 수준이 감소함을 나타냅니다. -- [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)(PVI)는 네거티브 볼륨 인덱스와 함께 사용되며 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다. -- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다. -- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다. -- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html)(RSI)는 일반적으로 특정 기간 동안 종가에 따라 산출된 시장 강세/약세의 측정에 사용됩니다. 가격은 시장이 강세 기간일 때 높고, 약세 기간일 때 낮다는 전제에 기반하고 있습니다. RSI는 최고치 대 최저치의 비율입니다. 범위는 0~100입니다. -- [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)(SSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 구매 또는 판매 차이를 파악하는 데 사용되며, 이동 평균(SMA)에 3일 기간을 사용합니다. -- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstandarddeviationindicatorcomponent.html)(SDI)는 주가나 변동성의 통계적 변이성을 측정합니다. 개인 증권의 종가와 평균 증권의 종가 차이를 분산이라고 합니다. 분산이 클수록 표준 편차는 더 커지며 따라서 변동성이 커집니다. 분산이 작을수록(개인 종가와 평균 가격의 차이) 표준 편차가 작아지고 가격 변동성이 낮아집니다. -- [`IgxStochRSIIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstochrsiindicatorcomponent.html)(SRSI)는 특정 기간 내에 증권을 과도하게 구매하거나 초과 판매할 경우에 측정합니다. 값 범위는 0~1입니다. 이 인디케이터는 [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html) (RSI) 데이터에 스탁캐스틱 오실레이터 수식을 적용하여 계산합니다. -- [`IgxTRIXIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtrixindicatorcomponent.html)(TRIX)는 과다 매입 또는 과다 매도된 증권을 식별하는 데 사용되는 모멘텀 측정입니다. 다른 오실레이터와 마찬가지로 TRIX 점수도 0을 중심으로 맴돕니다. 양수 값은 과다 매입된 증권을 나타내며, 음수 값은 과다 매도된 증권을 나타냅니다. TRIX는 특정 기간 동안 가격의 3배 지수 이동 평균을 사용하여 계산합니다. 신호 라인은 증권 가격이 향후 어디에 위치 할지를 나타내는 데 자주 사용됩니다. -- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)(TPI)는 특정 기간 동안 증권의 고가, 저가 및 종가의 산술 평균을 나타내는 일반적인 금융 피벗 포인트입니다. -- [`IgxUltimateOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxultimateoscillatorindicatorcomponent.html)(UOI)는 단일 기간을 기준으로 하는 다른 인디케이터와 관련된 변동성과 노이즈를 줄이기 위해 3가지 다른 기간의 가중 평균을 사용합니다. 이것은 범위 제한 인디케이터이므로 지수는 0~100입니다. -- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxweightedcloseindicatorcomponent.html)(WCI)는 하루 동안의 고가, 저가 및 종가 평균을 나타내는 점에서 [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)와 유사합니다. 단, 이 인디케이터는 종가에 더 중점을 두며 산술 평균을 계산할 때 2번 포함됩니다. -- [`IgxWilliamsPercentRIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxwilliamspercentrindicatorcomponent.html)(WPRI)는 스탁캐스틱 오실레이터와 유사합니다. 단, 비율 범위는 0~-100입니다. 과다 매입 및 과다 매도 증권을 식별하는 데 유용합니다. 이 인디케이터는 해당 기간의 가장 높은 최고치와 해당 기간의 가장 높은 최고치에서 가장 낮은 최저치를 뺀 값의 현재 종가 사이의 차이로 나누어 계산합니다. +- [`IgxAbsoluteVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxabsolutevolumeoscillatorindicatorcomponent.html)(AVO)는 2개의 평균 볼륨 측정값의 차이를 계산합니다. 백분율 볼륨 오실레이터와 유사하지만 점수 범위는 -100%~+100%입니다. 인디케이터는 볼륨 추세가 증가하는지 또는 감소하는지 식별하는 데 사용됩니다. 사용자는 분석 기간을 선택할 수 있으며 +- [`IgxAccumulationDistributionIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaccumulationdistributionindicatorcomponent.html)(ADI)는 매우 인기 있는 볼륨 관련 인디케이터입니다. 투자자가 매도 또는 매수에 대한 차이를 살펴봄으로써 주식, 증권 또는 지수의 공급 및 수요를 시간 경과에 따라 평가하며 +- [`IgxAverageDirectionalIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragedirectionalindexindicatorcomponent.html) | (ADX)는 추세 방향에 상관없이 추세 강도를 측정합니다. 이 인디케이터는 일반적으로 주식 동향의 강도와 방향을 결정하는 데 사용되며 +- [`IgxAverageTrueRangeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragetruerangeindicatorcomponent.html) | (ATR)는 주어진 기간 내에 증권의 가격 이동이나 변동성을 측정합니다. 이 인디케이터는 가격 방향이나 지속 기간의 측정이 아니라 가격 이동 또는 변동성의 양입니다. 평균 참 범위(ATR)은 종종 매일, 매주 또는 매월을 포함한 여러 기준을 사용하여 14일 기간을 주기로 계산됩니다. 평균 참 범위는 지난 14일 기간의 TR 값의 지수 이동 평균입니다. 실제 사용된 기간은 사용자 선호에 따라 다를 수 있으며 +- [`IgxBollingerBandWidthIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandwidthindicatorcomponent.html) | (BBW)는 [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 함께 사용됩니다. 이 인디케이터는 주어진 점에서 볼링거 밴드 폭을 나타냅니다. 편차가 클수록 밴드가 넓어집니다. 대역폭(하한값)을 줄이면 표준 편차가 줄어들고 대역폭(상한값)을 넓히면 가격의 표준 편차가 증가함을 나타냅니다. [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 같은 계수 인자를 지원하여 값을 일치시킬 수 있으며 +- [`IgxChaikinVolatilityIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinvolatilityindicatorcomponent.html)(CHV)는 특정 기간 동안의 고가 및 저가 가격 차이의 지수 이동 평균의 변화율을 보여줌으로써 증권의 변동성을 반영합니다. +- [`IgxChaikinOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinoscillatorindicatorcomponent.html)(COI)는 누적/분포 인디케이터의 추세를 식별하는 데 사용됩니다. 체킨 오실레이터는 누적/분포 인디케이터의 3일 지수 이동 평균(EMA)에서 뺀 누적/분포 인디케이터의 10일 EMA입니다. +- [`IgxCommodityChannelIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcommoditychannelindexindicatorcomponent.html)(CCI)는 증권의 주기적 추세를 파악하는 데 사용됩니다. 이 인디케이터는 증권 가격이 식별할 수 있는 주기에 따라 변한다는 가정에 기초한 것입니다. 특정 기간 동안의 표준 가격(SMATP)의 단순 이동 평균(SMA)과 이전 기간의 표준 가격(TP)의 차이를 상수와 절대 평균 편차의 곱으로 나눠 계산한 것입니다. +- [`IgxDetrendedPriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdetrendedpriceoscillatorindicatorcomponent.html) (DPO)는 단기 추세를 파악하기 위해 장기 가격 동향을 제어하도록 설계되었습니다. 이것은 이동 평균의 변화에 의한 것이며 모멘텀 오실레이터가 아닙니다. +- [`IgxEaseOfMovementIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxeaseofmovementindicatorcomponent.html)(EOM)는 증권 가격 변동에 필요한 볼륨을 파악하는 데 사용됩니다. 일반적으로 이동 평균으로 부드럽게 처리됩니다. +- [`IgxFastStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfaststochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 스탁캐스틱 오실레이터의 3가지 유형: 패스트, 슬로우, 풀. 이 인디케이터는 0~100 비율을 사용하여 특정 기간 동안 고/저 범위에 비례한 현재 마감가의 관계를 나타내는 모멘텀 인디케이터입니다. 상승하는 시장에서는 가격이 100에 가깝고, 하락하는 시장에서는 가격이 0에 가깝다는 전제에 기반하고 있습니다. 이 인디케이터는 매수 또는 매도 차이를 식별하는 데 사용됩니다. +- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxforceindexindicatorcomponent.html)(FII)는 금융 분석가들이 주식 추세가 긍정적인지 부정적인지를 판단하기 위해 사용하는 가격 및 볼륨 오실레이터입니다. 강도 지수는 오늘 종가에서 어제 종가를 뺀 다음 그 차액을 현재 날짜의 볼륨과 곱하여 계산합니다. 오늘 종가가 어제보다 높은 경우에는 강도는 긍정적입니다. 종가가 어제보다 낮은 경우에는 강도는 부정적입니다. +- [`IgxFullStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfullstochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)와 유사하지만 시간대 사용자 지정이 가능합니다. +- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 효율성 측정을 위해 분석에 가격과 볼륨을 결합합니다. 낮은 가격과 높은 가격의 차이를 볼륨으로 나누어 계산됩니다. +- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmassindexindicatorcomponent.html)(MII)는 추세 역전을 찾는 데 사용됩니다. 가격 범위가 넓어지면 반전이 일어날 수 있다는 전제에 기반하고 있습니다. 이 계산은 이전 거래 범위(하이 마이너스 로우)를 비교합니다. EMA는 이러한 용도로 사용됩니다. 이 인디케이터는 상당한 움직임이 있으면 증가하고 작은 움직임이 있으면 감소하며 +- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmedianpriceindicatorcomponent.html)(MPI)는 고가와 저가 사이의 중간점을 나타냅니다. 중간값은 중심 경향의 척도입니다. 이 인디케이터는 중간값의 차트를 표시합니다. +- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 모멘텀 지표로 상대 강도 지수(RSI)와 유사하며, MFI는 증권에 들어오고 나가는 자금 흐름의 척도로 사용되며 추세 역전을 예측하는 데 사용할 수 있습니다. MFI 범위는 0~100까지이며 RSI처럼 해석됩니다. +- [`IgxMovingAverageConvergenceDivergenceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmovingaverageconvergencedivergenceindicatorcomponent.html)(MACD)는 금융 서비스에서 가장 대표적인 인디케이터 중 하나입니다. 주가 추세의 강도, 방향, 모멘텀 또는 길이 변화를 파악하는 데 사용됩니다. MACD는 종가의 두 지수 이동 평균(EMA)의 차이로 계산됩니다. 그 차이는 시간 경과에 따라 차이의 이동 평균으로 차트화됩니다. +- [`IgxNegativeVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnegativevolumeindexindicatorcomponent.html)(NVI)는 [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)와 함께 자주 사용됩니다. 이 인디케이터는 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다. +- [`IgxOnBalanceVolumeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxonbalancevolumeindicatorcomponent.html)(OBV)는 주식의 총 판매량의 누계를 계산하고 해당 주식의 유입(구매) 또는 유출(판매) 여부를 표시합니다. 하루 동안의 총 판매량은 전날보다 가격이 높았는지 낮았는지에 따라 양수 또는 음수 값이 부여됩니다. 높은 종가는 양수 값을 산출하고, 낮은 종가는 음수 값을 발생합니다. 이 값은 누계에 누적됩니다. +- [`IgxPercentagePriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagepriceoscillatorindicatorcomponent.html)(PPO)는 두 이동 평균 사이의 차이를 보여줍니다. 이 차이는 큰 이동 평균의 백분율로 표시됩니다. 최종 사용자는 분석 기간을 선택합니다. +- [`IgxPercentageVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagevolumeoscillatorindicatorcomponent.html)(PVO)는 장기 및 단기 기간을 사용하여 완만해진 볼륨 사이의 백분율 차이입니다. 이 인디케이터는 0을 중심으로 맴돕니다. 사용자는 분석할 다양한 기간 값을 선택할 수 있습니다. 이 인디케이터는 그래픽으로 표시하면 볼륨 패턴을 감지하는 데 유용할 수 있습니다. PVO가 증가하면 볼륨 수준이 증가하고, PVO가 감소하면 볼륨 수준이 감소함을 나타냅니다. +- [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)(PVI)는 네거티브 볼륨 인덱스와 함께 사용되며 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다. +- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다. +- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다. +- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html)(RSI)는 일반적으로 특정 기간 동안 종가에 따라 산출된 시장 강세/약세의 측정에 사용됩니다. 가격은 시장이 강세 기간일 때 높고, 약세 기간일 때 낮다는 전제에 기반하고 있습니다. RSI는 최고치 대 최저치의 비율입니다. 범위는 0~100입니다. +- [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)(SSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 구매 또는 판매 차이를 파악하는 데 사용되며, 이동 평균(SMA)에 3일 기간을 사용합니다. +- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstandarddeviationindicatorcomponent.html)(SDI)는 주가나 변동성의 통계적 변이성을 측정합니다. 개인 증권의 종가와 평균 증권의 종가 차이를 분산이라고 합니다. 분산이 클수록 표준 편차는 더 커지며 따라서 변동성이 커집니다. 분산이 작을수록(개인 종가와 평균 가격의 차이) 표준 편차가 작아지고 가격 변동성이 낮아집니다. +- [`IgxStochRSIIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstochrsiindicatorcomponent.html)(SRSI)는 특정 기간 내에 증권을 과도하게 구매하거나 초과 판매할 경우에 측정합니다. 값 범위는 0~1입니다. 이 인디케이터는 [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html) (RSI) 데이터에 스탁캐스틱 오실레이터 수식을 적용하여 계산합니다. +- [`IgxTRIXIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtrixindicatorcomponent.html)(TRIX)는 과다 매입 또는 과다 매도된 증권을 식별하는 데 사용되는 모멘텀 측정입니다. 다른 오실레이터와 마찬가지로 TRIX 점수도 0을 중심으로 맴돕니다. 양수 값은 과다 매입된 증권을 나타내며, 음수 값은 과다 매도된 증권을 나타냅니다. TRIX는 특정 기간 동안 가격의 3배 지수 이동 평균을 사용하여 계산합니다. 신호 라인은 증권 가격이 향후 어디에 위치 할지를 나타내는 데 자주 사용됩니다. +- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)(TPI)는 특정 기간 동안 증권의 고가, 저가 및 종가의 산술 평균을 나타내는 일반적인 금융 피벗 포인트입니다. +- [`IgxUltimateOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxultimateoscillatorindicatorcomponent.html)(UOI)는 단일 기간을 기준으로 하는 다른 인디케이터와 관련된 변동성과 노이즈를 줄이기 위해 3가지 다른 기간의 가중 평균을 사용합니다. 이것은 범위 제한 인디케이터이므로 지수는 0~100입니다. +- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxweightedcloseindicatorcomponent.html)(WCI)는 하루 동안의 고가, 저가 및 종가 평균을 나타내는 점에서 [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)와 유사합니다. 단, 이 인디케이터는 종가에 더 중점을 두며 산술 평균을 계산할 때 2번 포함됩니다. +- [`IgxWilliamsPercentRIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxwilliamspercentrindicatorcomponent.html)(WPRI)는 스탁캐스틱 오실레이터와 유사합니다. 단, 비율 범위는 0~-100입니다. 과다 매입 및 과다 매도 증권을 식별하는 데 유용합니다. 이 인디케이터는 해당 기간의 가장 높은 최고치와 해당 기간의 가장 높은 최고치에서 가장 낮은 최저치를 뺀 값의 현재 종가 사이의 차이로 나누어 계산합니다. ## 필요한 축 @@ -79,10 +79,10 @@ _language: kr 금융 시리즈, 인디케이터 및 오버레이의 데이터 요구 사항은 다음과 같습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 금융 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 금융 축의 `라벨` 속성(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 -- 모든 데이터 항목에는 금융 시리즈의 속성을 사용하여 매핑해야 하는 5개의 숫자 데이터 열을 이 포함되어 있어야 함: `OpenMemberPath`, `HighMemberPath`, `LowMemberPath`, `CloseMemberPath`, `VolumeMemberPath` +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 금융 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 금융 축의 `라벨` 속성(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 +- 모든 데이터 항목에는 금융 시리즈의 속성을 사용하여 매핑해야 하는 5개의 숫자 데이터 열을 이 포함되어 있어야 함: `OpenMemberPath`, `HighMemberPath`, `LowMemberPath`, `CloseMemberPath`, `VolumeMemberPath` [SampleFinancialData](data-chart-data-sources-financial.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -166,12 +166,12 @@ import { IgxDataChartCoreModule } from 'igniteui-angular-charts'; ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 주석](data-chart-series-annotations.md) -- [시리즈 강조 표시](data-chart-series-highlighting.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 도구 설명](data-chart-series-tooltips.md) -- [시리즈 추세선](data-chart-series-trendlines.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 주석](data-chart-series-annotations.md) +- [시리즈 강조 표시](data-chart-series-highlighting.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 도구 설명](data-chart-series-tooltips.md) +- [시리즈 추세선](data-chart-series-trendlines.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-polar-series.md b/docs/angular/src/content/kr/components/data-chart-type-polar-series.md index ca762f7a11..068a0b6d72 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-polar-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-polar-series.md @@ -50,9 +50,9 @@ _language: kr 폴라 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 폴라 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 폴라 시리즈의 `AngleMemberPath` 및 `RadiusMemberPath` 속성(예: [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpolarareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다 +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 폴라 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 폴라 시리즈의 `AngleMemberPath` 및 `RadiusMemberPath` 속성(예: [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpolarareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다 폴라 좌표계의 데이터 점의 위치는 "극"이라고 하는 고정 방향에서의 각도(각도 좌표)와 고정점(데카르트 좌표의 원점과 유사)에서의 거리(반경 좌표)로 결정됩니다. 극에서 시작하여 바깥 쪽을 향하는 선은 각도 축의 격자선([`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnumericangleaxiscomponent.html))이며, 극을 둘러싸는 동심원은 반경 축의 격자선([`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnumericradiusaxiscomponent.html))입니다 @@ -119,8 +119,8 @@ import { IgxDataChartPolarModule } from 'igniteui-angular-charts'; ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-radial-series.md b/docs/angular/src/content/kr/components/data-chart-type-radial-series.md index a23690f6cb..1ab189e2a9 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-radial-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-radial-series.md @@ -47,10 +47,10 @@ _language: kr 레이디얼 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 레이디얼 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryangleaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 -- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxradialareaseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다 +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 레이디얼 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryangleaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 +- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxradialareaseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다 [SampleRadialData](data-chart-data-sources-radial.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -114,8 +114,8 @@ import { IgxDataChartRadialModule } from 'igniteui-angular-charts'; ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-range-series.md b/docs/angular/src/content/kr/components/data-chart-type-range-series.md index 123535effe..f62214d397 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-range-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-range-series.md @@ -42,10 +42,10 @@ _language: kr 범위 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 범위 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 -- 모든 데이터 항목에는 범위 시리즈의 `HighMemberPath` 및 `LowMemberPath` 속성(예: [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrangeareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다 +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 범위 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 +- 모든 데이터 항목에는 범위 시리즈의 `HighMemberPath` 및 `LowMemberPath` 속성(예: [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrangeareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다 [SampleRangeData](data-chart-data-sources-range.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -106,12 +106,12 @@ import { IgxDataChartCategoryModule } from 'igniteui-angular-charts'; ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 주석](data-chart-series-annotations.md) -- [시리즈 강조 표시](data-chart-series-highlighting.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 도구 설명](data-chart-series-tooltips.md) -- [시리즈 추세선](data-chart-series-trendlines.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 주석](data-chart-series-annotations.md) +- [시리즈 강조 표시](data-chart-series-highlighting.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 도구 설명](data-chart-series-tooltips.md) +- [시리즈 추세선](data-chart-series-trendlines.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md index dcea9d26d7..640aa48028 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md @@ -28,9 +28,9 @@ _language: kr [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html#colormemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다. +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html#colormemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다. [SampleScatterData](data-chart-data-sources-scatter.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -97,13 +97,13 @@ export class AppModule { /* ... */ } 다음 표에는 [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html)의 면 채색에 영향을 주는 [`IgxCustomPaletteColorScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html)의 속성이 열거되어 있습니다 . -- [`palette`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#palette)는 선택하거나 보간하는 컬러의 컬렉션을 설정합니다. -- [`interpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#interpolationmode)는 팔레트에서 컬러를 가져오는 메소드를 설정합니다. -- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#maximumvalue)는 컬러를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다. -- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#minimumvalue)는 컬러를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다. +- [`palette`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#palette)는 선택하거나 보간하는 컬러의 컬렉션을 설정합니다. +- [`interpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#interpolationmode)는 팔레트에서 컬러를 가져오는 메소드를 설정합니다. +- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#maximumvalue)는 컬러를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다. +- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#minimumvalue)는 컬러를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다. ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md index 749dae3ca7..3f8c73ab0e 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md @@ -29,9 +29,9 @@ _language: kr [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html#radiusmemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다 +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html#radiusmemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다 [SampleScatterStats](data-chart-data-sources-stats.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -115,15 +115,15 @@ export class AppModule { /* ... */ } `FillScale`은 단일 [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html) 내의 컬러 패턴을 결정하는 옵션 기능입니다. 이 시리즈는 다음과 같은 채우기 비율을 지원합니다: -- [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)은 `FillMemberPath` 속성에 매핑된 데이터 열의 값 집합을 사용하여 버블의 보간 브러시를 결정합니다. 또한, 사용자가 지정한 [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue) 및 [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)를 가질 수 있습니다. 이 비율로 범위를 설정하면 범위 밖에 있는 값을 가진 버블은 `Brushes` 컬렉션으로부터 브러시를 얻지 못하고 컬러도 없습니다. -- [`IgxCustomPaletteBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html)은 버블 마커의 인덱스를 사용하여 `Brushes` 컬렉션으로부터 브러시를 선택합니다. [`brushSelectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html#brushselectionmode) 속성을 `Select` enumerable 값으로 설정하면 버블이 순차적으로 색칠되어 `Interpolate`로 설정되고, 브러시는 버블의 인덱스와 컬렉션의 브러시 수에 따라 보간됩니다. +- [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)은 `FillMemberPath` 속성에 매핑된 데이터 열의 값 집합을 사용하여 버블의 보간 브러시를 결정합니다. 또한, 사용자가 지정한 [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue) 및 [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)를 가질 수 있습니다. 이 비율로 범위를 설정하면 범위 밖에 있는 값을 가진 버블은 `Brushes` 컬렉션으로부터 브러시를 얻지 못하고 컬러도 없습니다. +- [`IgxCustomPaletteBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html)은 버블 마커의 인덱스를 사용하여 `Brushes` 컬렉션으로부터 브러시를 선택합니다. [`brushSelectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html#brushselectionmode) 속성을 `Select` enumerable 값으로 설정하면 버블이 순차적으로 색칠되어 `Interpolate`로 설정되고, 브러시는 버블의 인덱스와 컬렉션의 브러시 수에 따라 보간됩니다. ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 도구 설명](data-chart-series-tooltips.md) -- [시리즈 추세선](data-chart-series-trendlines.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 도구 설명](data-chart-series-tooltips.md) +- [시리즈 추세선](data-chart-series-trendlines.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md index 42ac702496..9c1e21604f 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md @@ -29,9 +29,9 @@ _language: kr [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html#valuememberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다. +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html#valuememberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다. [SampleScatterData](data-chart-data-sources-scatter.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -96,9 +96,9 @@ export class AppModule { /* ... */ } 제공된 [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html) 클래스는 대부분의 착색 요구 사항을 만족시킬 수 있지만 이 클래스에서 상속하고 독자적인 착색 논리를 제공할 수 있습니다. 다음 표에는 [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html)의 면 채색에 영향을 주는 [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)의 속성이 열거되어 있습니다: -- `Brushes`는 등고선을 채우기 위한 브러시 컬렉션을 설정합니다. -- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)는 브러시를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다. -- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue)는 브러시를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다. +- `Brushes`는 등고선을 채우기 위한 브러시 컬렉션을 설정합니다. +- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)는 브러시를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다. +- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue)는 브러시를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다. ## 등고선 값 리졸버 @@ -108,6 +108,6 @@ export class AppModule { /* ... */ } ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md index 11c12572e5..67714c6830 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md @@ -44,9 +44,9 @@ _language: kr 분산 마커 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 `XMemberPath` 및 `YMemberPath` 속성에 매핑되는 2개의 숫자 데이터 열이 있어야 합니다 +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 `XMemberPath` 및 `YMemberPath` 속성에 매핑되는 2개의 숫자 데이터 열이 있어야 합니다 [SampleScatterStats](data-chart-data-sources-stats.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -124,10 +124,10 @@ export class AppModule { /* ... */ } ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 도구 설명](data-chart-series-tooltips.md) -- [시리즈 추세선](data-chart-series-trendlines.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 도구 설명](data-chart-series-tooltips.md) +- [시리즈 추세선](data-chart-series-trendlines.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-shape-series.md b/docs/angular/src/content/kr/components/data-chart-type-shape-series.md index 0c21f7154e..eaa9f1b2c9 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-shape-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-shape-series.md @@ -44,9 +44,9 @@ _language: kr 분산 모양 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 분산 모양 시리즈의 `ShapeMemberPath` 속성(예: [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterpolygonseriescomponent.html))에 매핑되어야 하는 하나의 모양 데이터 열(배열 또는 X/Y 좌표 배열)이 있어야 합니다 +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 분산 모양 시리즈의 `ShapeMemberPath` 속성(예: [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterpolygonseriescomponent.html))에 매핑되어야 하는 하나의 모양 데이터 열(배열 또는 X/Y 좌표 배열)이 있어야 합니다 [SampleShapeData](data-chart-data-sources-shape.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다. @@ -107,8 +107,8 @@ export class AppModule { /* ... */ } ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md b/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md index be98335eb0..e55bcaec81 100644 --- a/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md +++ b/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md @@ -66,10 +66,10 @@ namespace: Infragistics.Controls.Charts 스택 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다: -- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 -- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 스택 시리즈를 렌더링하지 않습니다. -- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaxiscomponent.html#label) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 -- 모든 데이터 항목에는스택 시리즈의 `시리즈` 컬렉션에 추가할 [`IgxStackedFragmentSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html)의　[`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html#valuememberpath) 속성을 사용하여 매핑해야 하는 숫자 데이터 열이 적어도 하나 이상 포함되어야 합니다. +- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함 +- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 스택 시리즈를 렌더링하지 않습니다. +- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaxiscomponent.html#label) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함 +- 모든 데이터 항목에는스택 시리즈의 `시리즈` 컬렉션에 추가할 [`IgxStackedFragmentSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html)의　[`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html#valuememberpath) 속성을 사용하여 매핑해야 하는 숫자 데이터 열이 적어도 하나 이상 포함되어야 합니다. ## 필요한 모듈 diff --git a/docs/angular/src/content/kr/components/data-chart.md b/docs/angular/src/content/kr/components/data-chart.md index 67da2199bf..a50a4d65ca 100644 --- a/docs/angular/src/content/kr/components/data-chart.md +++ b/docs/angular/src/content/kr/components/data-chart.md @@ -25,8 +25,8 @@ _language: kr 차트 패키지를 설치할 때 코어 패키지도 설치해야 합니다. -- **npm install --save igniteui-angular-core** -- **npm install --save igniteui-angular-charts** +- **npm install --save igniteui-angular-core** +- **npm install --save igniteui-angular-charts** ## 필요한 모듈 @@ -107,9 +107,9 @@ export class AppModule { /* ... */ } ## 추가 리소스 -- [축 유형](data-chart-axis-types.md) -- [축 공유](data-chart-axis-sharing.md) -- [축 설정](data-chart-axis-settings.md) -- [차트 범례](data-chart-legends.md) -- [시리즈 마커](data-chart-series-markers.md) -- [시리즈 유형](data-chart-series-types.md) +- [축 유형](data-chart-axis-types.md) +- [축 공유](data-chart-axis-sharing.md) +- [축 설정](data-chart-axis-settings.md) +- [차트 범례](data-chart-legends.md) +- [시리즈 마커](data-chart-series-markers.md) +- [시리즈 유형](data-chart-series-types.md) diff --git a/docs/angular/src/content/kr/components/date-picker.md b/docs/angular/src/content/kr/components/date-picker.md index 91291f2906..b1c6842ae7 100644 --- a/docs/angular/src/content/kr/components/date-picker.md +++ b/docs/angular/src/content/kr/components/date-picker.md @@ -57,22 +57,27 @@ public date = new Date(2000, 0, 1); ``` If a string is bound to the picker, it needs to be a date-only string in the `ISO 8601` format: + ```html ``` + More information about this can be found in [DateTime Editor's ISO section](date-time-editor.md#iso). Two-way binding is possible through `ngModel`: + ```html ``` As well as through the `value` input: + ```html ``` Additionally, `formControlName` can be set on the picker, to use it in a reactive form: + ```html
    @@ -102,6 +107,7 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker keyboard_arrow_down ``` + The above sample will add an additional toggle icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other. #### Customizing the toggle and clear icons @@ -122,12 +128,14 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker #### Custom action buttons The picker's action buttons can be modified in two ways: - the button's text can be changed using the [`todayButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#todaybuttonlabel)) and the [`cancelButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#cancelbuttonlabel) input properties: + ```html ``` - the whole buttons can be templated using the [`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) directive: With it you gain access to the date picker's [`calendar`](calendar.md) and all of its members: + ```html @@ -154,9 +162,11 @@ Since the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdate ### Dialog Mode The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) also supports a `dialog` mode: + ```html ``` + @@ -193,6 +203,7 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker ``` It also has as a [`spinDelta`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#spindelta) input property which can be used to increment or decrement a specific date part of the currently set date. + ```html ``` @@ -230,6 +241,7 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker The localization of the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) can be controlled through its [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) input. Additionally, using the `igxCalendarHeader` and the `igxCalendarSubheader` templates, provided by the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), you can specify the look of your header and subheader. More information on how to use these templates can be found in the [**IgxCalendarComponent**](calendar.md) topic. Here is how a date picker with Japanese locale definition would look like: + ```html @@ -304,30 +316,30 @@ If the component is using the [`Emulated`](themes/sass/component-themes.md#view- ## API References
    -* [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) -* [IgxDateTimeEditorDirective]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) -* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-igx-calendar-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-igx-overlay-theme) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) +- [IgxDateTimeEditorDirective]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) +- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-igx-calendar-theme) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-igx-overlay-theme) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies
    -* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-igx-calendar-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-igx-overlay-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-igx-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-igx-button-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-igx-input-group-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-igx-drop-down-theme) +- [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-igx-calendar-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-igx-overlay-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-igx-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-igx-button-theme) +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-igx-input-group-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-igx-drop-down-theme) ## Additional Resources -* [Time Picker](time-picker.md) -* [Date Time Editor](date-time-editor.md) -* [Date Range Picker](date-range-picker.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Time Picker](time-picker.md) +- [Date Time Editor](date-time-editor.md) +- [Date Range Picker](date-range-picker.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/dialog.md b/docs/angular/src/content/kr/components/dialog.md index 641f5b908f..e9c025f210 100644 --- a/docs/angular/src/content/kr/components/dialog.md +++ b/docs/angular/src/content/kr/components/dialog.md @@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Dialog Window +## Dialog Window

    Use the Ignite UI for Angular Dialog Window component to display messages or present forms for users to fill out. The component opens a dialog window centered on top of app content. You can also provide a standard alert message that users can cancel.

    ### Dialog Demo - @@ -35,11 +35,12 @@ import { IgxDialogModule } from 'igniteui-angular'; }) export class AppModule {} ``` +
    #### Alert -To add alert, in the template of our email component we can add the following code to get the notification dialog. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), +To add alert, in the template of our email component we can add the following code to get the notification dialog. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), [`leftButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftbuttonlabel) and handle [`leftButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftbuttonselect) event: ```html @@ -54,16 +55,16 @@ To add alert, in the template of our email component we can add the following co ``` -
    -####Standard Dialog +#### Standard Dialog -To add standard dialog, in the template of our file manager component we can add the following code to get the standard dialog. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), +To add standard dialog, in the template of our file manager component we can add the following code to get the standard dialog. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), [`leftButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftbuttonlabel), [`rightButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#rightbuttonlabel), and handle [`leftButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftbuttonselect) and [`rightButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#rightbuttonselect) events: ```html @@ -79,14 +80,14 @@ To add standard dialog, in the template of our file manager component we can add ``` -
    -####Custom Dialog +#### Custom Dialog To add custom dialog, in the template of our sign in component we can add the following code to get the custom dialog. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title),[`leftButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftbuttonlabel), [`rightButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#rightbuttonlabel), [`closeOnOutsideSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#closeonoutsideselect) and handle [`leftButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftbuttonselect) and [`rightButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#rightbuttonselect) event. Also we can add two groups of label and input decorated with the [**igxLabel**](input-group.md) and [**igxInput**](input-group.md) directives. @@ -120,8 +121,8 @@ Also we can add two groups of label and input decorated with the [**igxLabel**]( ``` - @@ -149,8 +150,8 @@ Dialog title area can be customized using `igxDialogTitle` directive or `igx-dia ``` - @@ -159,10 +160,10 @@ Dialog title area can be customized using `igxDialogTitle` directive or `igx-dia ## API References
    -* [IgxDialogComponent]({environment:angularApiUrl}/classes/igxdialogcomponent.html) -* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) -* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxDialogComponent]({environment:angularApiUrl}/classes/igxdialogcomponent.html) +- [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) +- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources diff --git a/docs/angular/src/content/kr/components/display-density.md b/docs/angular/src/content/kr/components/display-density.md index d2e09e0647..15f05dbee0 100644 --- a/docs/angular/src/content/kr/components/display-density.md +++ b/docs/angular/src/content/kr/components/display-density.md @@ -9,12 +9,12 @@ _language: kr Display density configuration can significantly improve the visual representation of large amount of data. In Ignite UI for Angular, we provide a pre-defined set of options – comfortable, compact and cosy. -Using the [DisplayDensityToken]({environment:angularApiUrl}/index.html#displaydensitytoken) injection token, you can configure the display density on an application and/or on a component level. +Using the [DisplayDensityToken]({environment:angularApiUrl}/index.html#displaydensitytoken) injection token, you can configure the display density on an application and/or on a component level. ### Display Density Demo - @@ -48,15 +48,15 @@ To set the display density explicitly for a control, use the [`displayDensity`]( ## API References
    -* [DisplayDensity]({environment:angularApiUrl}/enums/displaydensity.html) -* [DisplayDensityBase]({environment:angularApiUrl}/classes/displaydensitybase.html) -* [IDisplayDensityOptions]({environment:angularApiUrl}/interfaces/idisplaydensityoptions.html) -* [DisplayDensityToken]({environment:angularApiUrl}/index.html#displaydensitytoken) +- [DisplayDensity]({environment:angularApiUrl}/enums/displaydensity.html) +- [DisplayDensityBase]({environment:angularApiUrl}/classes/displaydensitybase.html) +- [IDisplayDensityOptions]({environment:angularApiUrl}/interfaces/idisplaydensityoptions.html) +- [DisplayDensityToken]({environment:angularApiUrl}/index.html#displaydensitytoken) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/divider.md b/docs/angular/src/content/kr/components/divider.md index 04f7a5d641..f490fd3cb1 100644 --- a/docs/angular/src/content/kr/components/divider.md +++ b/docs/angular/src/content/kr/components/divider.md @@ -15,8 +15,8 @@ _language: kr By default the divider is a solid horizontal line. - @@ -34,8 +34,8 @@ By adding the `vertical` attribute and setting its value to `true`, you can chan ``` - @@ -48,8 +48,8 @@ To change the default look simply use the `type` attribute of the divider and se ``` - @@ -69,24 +69,24 @@ To inset the divider, set the `middle` attribute of the divider to `true` and pr ``` - -If the value of the `middle` attribute is set to a falsy value, or if the attribute is omitted altoghether, the divider will set in only on the left. +If the value of the `middle` attribute is set to a falsy value, or if the attribute is omitted altogether, the divider will set in only on the left. ## API References
    -* [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html) -* [IgxDividerDirective Styles]({environment:sassApiUrl}/themes#function-divider-theme) +- [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html) +- [IgxDividerDirective Styles]({environment:sassApiUrl}/themes#function-divider-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/doughnut-chart.md b/docs/angular/src/content/kr/components/doughnut-chart.md index 5ab65833a7..36eed04d96 100644 --- a/docs/angular/src/content/kr/components/doughnut-chart.md +++ b/docs/angular/src/content/kr/components/doughnut-chart.md @@ -24,8 +24,8 @@ Ignite UI for Angular 도넛형 차트 컴포넌트는 파이형 차트 컴포 차트 패키지를 설치할 때 코어 패키지도 설치해야 합니다. -- **npm install --save igniteui-angular-core** -- **npm install --save igniteui-angular-charts** +- **npm install --save igniteui-angular-core** +- **npm install --save igniteui-angular-charts** ## 필요한 모듈 diff --git a/docs/angular/src/content/kr/components/drag-drop.md b/docs/angular/src/content/kr/components/drag-drop.md index f9af84f046..fb207a07f9 100644 --- a/docs/angular/src/content/kr/components/drag-drop.md +++ b/docs/angular/src/content/kr/components/drag-drop.md @@ -13,8 +13,8 @@ _language: kr Drag and drop icon to reposition it. - @@ -43,6 +43,7 @@ The dragging can be canceled by setting the [`cancel`]({environment:angularApiUr After the user releases the mouse/touch the drag ghost element is removed from the DOM and if the [`hideBaseOnDrag`]({environment:angularApiUrl}/classes/igxdragdirective.html#hidebaseondrag) is enabled it will make the original element visible again and the [`dragEnd`]({environment:angularApiUrl}/classes/igxdragdirective.html#dragend) event will be emitted. If the [`animateOnRelease`]({environment:angularApiUrl}/classes/igxdragdirective.html#animateonrelease) input is set to `true` all this will execute after the default animation of the drag ghost is finished which consist of returning it from the last dragged position to the position of the original element. Then the drag ghost will be removed and the [`returnMoveEnd`]({environment:angularApiUrl}/classes/igxdragdirective.html#returnmoveend) event will be emitted. #### Usage + ```html
    {{elem.label}} @@ -54,7 +55,7 @@ After the user releases the mouse/touch the drag ghost element is removed from t When an element that is being dragged using the [`igxDrag`]({environment:angularApiUrl}/classes/igxdragdirective.html) directive needs to be placed in an area, the [`igxDrop`]({environment:angularApiUrl}/classes/igxdropdirective.html) can be used to achieve this behavior. It provides events that the user can use to determine if element is entering the drop area and if it is being released inside it. #### Basic Configuration -The [`igxDrop`]({environment:angularApiUrl}/classes/igxdropdirective.html) directive can be applied to any DOM element just like the [`igxDrag`]({environment:angularApiUrl}/classes/igxdragdirective.html) directive. +The [`igxDrop`]({environment:angularApiUrl}/classes/igxdropdirective.html) directive can be applied to any DOM element just like the [`igxDrag`]({environment:angularApiUrl}/classes/igxdragdirective.html) directive. ````html
    Drop here
    @@ -87,6 +88,7 @@ public onElemDrop(event: IgxDropEventArgs) { One element can have both [`igxDrag`]({environment:angularApiUrl}/classes/igxdragdirective.html) and [`igxDrop`]({environment:angularApiUrl}/classes/igxdropdirective.html) directives applied, but then it is recommended to use custom logic when another element is being dropped on to it by canceling the [`onDrop`]({environment:angularApiUrl}/classes/igxdropdirective.html#ondrop) event of the [`igxDrop`]({environment:angularApiUrl}/classes/igxdropdirective.html) directive. #### Usage + ````html
    Drag here. @@ -109,8 +111,8 @@ public onAreaLeave() { ### API -* [IgxDragDirective]({environment:angularApiUrl}/classes/igxdragdirective.html) -* [IgxDropDirective]({environment:angularApiUrl}/classes/igxdropdirective.html) +- [IgxDragDirective]({environment:angularApiUrl}/classes/igxdragdirective.html) +- [IgxDropDirective]({environment:angularApiUrl}/classes/igxdropdirective.html) ### References diff --git a/docs/angular/src/content/kr/components/drop-down-virtual.md b/docs/angular/src/content/kr/components/drop-down-virtual.md index b2c6a1359a..c6efdf08b8 100644 --- a/docs/angular/src/content/kr/components/drop-down-virtual.md +++ b/docs/angular/src/content/kr/components/drop-down-virtual.md @@ -13,8 +13,8 @@ _language: kr

    - @@ -45,6 +45,7 @@ export class AppModule {} ### Template Configuration Next, we need to create the drop down component's template, looping through the data using [`*igxFor`]({environment:angularApiUrl}/classes/igxforofdirective.html) instead of `*ngFor`. The `*igxFor` needs some additional configuration in order to properly display all of the items: + ```html @@ -60,18 +61,19 @@ Next, we need to create the drop down component's template, looping through the
    Selected Model: {{ dropdown.selectedItem?.value.name }}
    ``` + The additional parameters passed to the `*igxFor` directive are: - - `index` - captures the index of the current item in the data set - - `scrollOrientation` - should always be `'vertical'` - - `containerSize` - the size of the virtualized container (in `px`). This needs to be enforced on the wrapping `
    ` as well - - `itemSize` - the size of the items that will be displayed (in `px`) +- `index` - captures the index of the current item in the data set +- `scrollOrientation` - should always be `'vertical'` +- `containerSize` - the size of the virtualized container (in `px`). This needs to be enforced on the wrapping `
    ` as well +- `itemSize` - the size of the items that will be displayed (in `px`) In order to assure uniqueness of the items, pass `item` inside of the [`value`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#value) input and `index` inside of the [`index`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#index) input of the `igx-drop-down-item`. To preserve selection while scrolling, the drop down item needs to have a reference to the data items it is bound to. > [!NOTE] > For the drop down to work with a virtualized list of items, [`value`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#value) and [`index`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#index) inputs **must** be passed to all items. > [!NOTE] -> It is strongly advised for each item to have an unique value passed to the `[value]` input. Otherwise, it might lead to unexpected results (incorrect selection). +> It is strongly advised for each item to have an unique value passed to the `[value]` input. Otherwise, it might lead to unexpected results (incorrect selection). > [!NOTE] > When the drop down uses virtualized items, the type of [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecteditem) becomes `{ value: any, index: number }`, where `value` is a reference to the data item passed inside of the `[value]` input and `index` is the item's index in the data set @@ -130,8 +132,8 @@ Here, we can also pass the style for `height` (but we already did so in the temp You can view the configured example below: - @@ -159,6 +161,7 @@ The drop-down template does not need to change much compared to the [previous ex As you can see, the template is almost identical to the one in the previous example. In this remote data scenario, the code behind will do most of the heavy lifting. First, we need to define a remote service for fetching data: + ```typescript // remote.service.ts @@ -243,14 +246,15 @@ export class DropDownRemoteComponent implements OnInit, OnDestroy { } } ``` -Inside of the `ngAfterViewInit` hook, we call to get data for the initial state and subscribe to the `igxForOf` directive's [`chunkPreload`]({environment:angularApiUrl}/classes/igxforofdirective.html#chunkPreload) emitter. This subscription will be responsible for fetching data everytime the loaded chunk changes. We use `pipe(takeUntil(this.destroy$))` so we can easily unsubscribe from the emitter on component destroy. + +Inside of the `ngAfterViewInit` hook, we call to get data for the initial state and subscribe to the `igxForOf` directive's [`chunkPreload`]({environment:angularApiUrl}/classes/igxforofdirective.html#chunkPreload) emitter. This subscription will be responsible for fetching data every time the loaded chunk changes. We use `pipe(takeUntil(this.destroy$))` so we can easily unsubscribe from the emitter on component destroy. ### Remote Virtualization - Demo The result of the above configuration is a drop-down that dynamically loads the data in should display, depending on the scrollbar's state. You can view the demo and play around with the configuration below: - @@ -259,11 +263,12 @@ The result of the above configuration is a drop-down that dynamically loads the ## Notes and Limitations Using the drop down with a virtualized list of items enforce some limitations. Please be aware of the following when trying to set up a drop-down list using `*igxFor`: - - The ``s that are being looped need to be passed in a wrapping element (e.g. `
    `) which has the following css: `overflow: hidden` and `height` equal to `containerSize` in `px` - - ``s cannot be used for grouping items when the list is virtualized. Use the `isHeader` propery instead - - The `items` accessor will return only the list of non-header `igx-drop-down-item`s that are currently in the virtualized view. - - [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecteditem) is of type `{ value: any, index: number }` - - The object emitted by [`selecting`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecting) changes to +- The ``s that are being looped need to be passed in a wrapping element (e.g. `
    `) which has the following css: `overflow: hidden` and `height` equal to `containerSize` in `px` +- ``s cannot be used for grouping items when the list is virtualized. Use the `isHeader` property instead +- The `items` accessor will return only the list of non-header `igx-drop-down-item`s that are currently in the virtualized view. +- [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecteditem) is of type `{ value: any, index: number }` +- The object emitted by [`selecting`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecting) changes to + ```typescript const emittedEvent: { newSelection: { value: any, index: number }, @@ -271,14 +276,14 @@ Using the drop down with a virtualized list of items enforce some limitations. P cancel: boolean, } ``` - - `dropdown.setSelectedItem` should be called with the **item's index in the data set** - - setting the drop-down item's `[selected]` input will **not** mark the item in the drop-down selection -## API References +- `dropdown.setSelectedItem` should be called with the **item's index in the data set** +- setting the drop-down item's `[selected]` input will **not** mark the item in the drop-down selection -* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +## API References +- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) diff --git a/docs/angular/src/content/kr/components/drop-down.md b/docs/angular/src/content/kr/components/drop-down.md index 30ec0b2bd8..35d1d7a1c3 100644 --- a/docs/angular/src/content/kr/components/drop-down.md +++ b/docs/angular/src/content/kr/components/drop-down.md @@ -11,8 +11,8 @@ _language: kr ### Drop Down Demo - @@ -72,8 +72,8 @@ export class MyDropDownComponent { If the sample is configured properly, a dropdown with several options should be displayed. - @@ -109,8 +109,8 @@ export class MyDropDownComponent { ``` - @@ -155,8 +155,8 @@ export class MyDropDownComponent { If the sample is configured properly, a list of countries should be displayed as a group under EU header, UK as a non-interactive item, and Bulgaria as selected item. - @@ -165,6 +165,7 @@ If the sample is configured properly, a list of countries should be displayed a Items in the `igx-drop-down` can also be grouped using the [`igx-drop-down-item-group`]({environment:angularApiUrl}/classes/igxdropdowngroupcomponent.html). The `igx-drop-down-item-group` accepts `igx-drop-down-item`s as its content and renders them in a grouped fashion. In the code snippets below, you can see how you can use the `igx-drop-down-item-group` to display the example `foods` array in a grouped fashion. + ```typescript // dropdown.component.ts export class MyCustomDropDownComponent { @@ -207,6 +208,7 @@ export class MyCustomDropDownComponent { } ... ``` + ```html @@ -227,20 +229,20 @@ The `igx-drop-down-item-group` displays all of the `igx-drop-down-item`s under i -``` +``` This disables the `Meats` group, as well as all of the child items inside! You can see the results in the sample below: - #### Drop Down as menu -You can configure the [`igxDropDown`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) to behave as a menu. To do this, set the [`ISelectionEventArgs`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html) [`cancel`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html#cancel) member to *true* in the [`selecting`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecting) event handler. Thus, the selected item is not preserved on menu opening and selection is invalidated. Still, you can get the clicked item through the [`ISelectionEventArgs`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html) [`newSelection`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html#newselection) member value. +You can configure the [`igxDropDown`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) to behave as a menu. To do this, set the [`ISelectionEventArgs`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html) [`cancel`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html#cancel) member to _true_ in the [`selecting`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecting) event handler. Thus, the selected item is not preserved on menu opening and selection is invalidated. Still, you can get the clicked item through the [`ISelectionEventArgs`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html) [`newSelection`]({environment:angularApiUrl}/interfaces/iselectioneventargs.html#newselection) member value. ```html @@ -292,8 +294,8 @@ export class MyMenuComponent { ``` - @@ -356,8 +358,8 @@ export class InputDropDownComponent { ``` - @@ -393,11 +395,11 @@ When [allowItemsFocus]({environment:angularApiUrl}/classes/igxdropdowncomponent.
    ## API References -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxDropDownComponent Styles]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html). -* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxDropDownComponent Styles]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html). +- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources diff --git a/docs/angular/src/content/kr/components/excel_library.md b/docs/angular/src/content/kr/components/excel_library.md index 9361c3b301..ce07a2b385 100644 --- a/docs/angular/src/content/kr/components/excel_library.md +++ b/docs/angular/src/content/kr/components/excel_library.md @@ -22,8 +22,8 @@ The Infragistics Excel Library allows you to work with spreadsheet data using fa When installing the excel package, the core package must also be installed. -- **npm install --save igniteui-angular-core** -- **npm install --save igniteui-angular-excel** +- **npm install --save igniteui-angular-core** +- **npm install --save igniteui-angular-excel** The Excel Library is exported as an `NgModule`, you need to import the [`IgxExcelModule`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxexcelmodule.html) inside your `AppModule`: @@ -43,31 +43,31 @@ export class AppModule {} ## The Excel Library Contains 5 Modules -- **IgxExcelCoreModule** – This contains the object model and much of the excel infrastructure -- **IgxExcelFunctionsModule** – This contains the majority of the functions for formula evaluations, such as Sum, Average, Min, Max, etc. The absence of this module won’t cause any issues with formula parsing if the formula is to be calculated. For example, if you apply a formula like “=SUM(A1:A5)” and ask for the Value of the cell, then you would get a #NAME! error returned. This is not an exception throw – it’s an object that represents a particular error since formulas can result in errors. -- **IgxExcelXlsModule** – This contains the load and save logic for xls (and related) type files – namely the Excel97to2003 related WorkbookFormats. -- **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. -- **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. +- **IgxExcelCoreModule** – This contains the object model and much of the excel infrastructure +- **IgxExcelFunctionsModule** – This contains the majority of the functions for formula evaluations, such as Sum, Average, Min, Max, etc. The absence of this module won’t cause any issues with formula parsing if the formula is to be calculated. For example, if you apply a formula like “=SUM(A1:A5)” and ask for the Value of the cell, then you would get a #NAME! error returned. This is not an exception throw – it’s an object that represents a particular error since formulas can result in errors. +- **IgxExcelXlsModule** – This contains the load and save logic for xls (and related) type files – namely the Excel97to2003 related WorkbookFormats. +- **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. +- **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. ## Supported Versions of Microsoft Excel The following is a list of the supported versions of Excel.\*\* -- Microsoft Excel 97 +- Microsoft Excel 97 -- Microsoft Excel 2000 +- Microsoft Excel 2000 -- Microsoft Excel 2002 +- Microsoft Excel 2002 -- Microsoft Excel 2003 +- Microsoft Excel 2003 -- Microsoft Excel 2007 +- Microsoft Excel 2007 -- Microsoft Excel 2010 +- Microsoft Excel 2010 -- Microsoft Excel 2013 +- Microsoft Excel 2013 -- Microsoft Excel 2016 +- Microsoft Excel 2016 > [!NOTE] > The Excel Library does not support the Excel Binary Workbook (.xlsb) format at this time. diff --git a/docs/angular/src/content/kr/components/excel_library_using_cells.md b/docs/angular/src/content/kr/components/excel_library_using_cells.md index 9bb63cd3e4..ba383b6ab1 100644 --- a/docs/angular/src/content/kr/components/excel_library_using_cells.md +++ b/docs/angular/src/content/kr/components/excel_library_using_cells.md @@ -145,23 +145,23 @@ The color palette is analogous to the color dialog in Microsoft Excel 2007 UI. Y You can create all possible fill types using static properties and methods on the [`CellFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfill.html) class. They are as follows: -- **noColor** - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through. +- **noColor** - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through. -- **createSolidFill** - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfillpattern.html) instance which has a pattern style of `Solid` and a background color set to the `Color` or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/workbookcolorinfo.html) specified in the method. +- **createSolidFill** - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfillpattern.html) instance which has a pattern style of `Solid` and a background color set to the `Color` or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/workbookcolorinfo.html) specified in the method. -- **createPatternFill** - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfillpattern.html) instance which has the specified pattern style and the `Color` or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/workbookcolorinfo.html) values, specified for the background and pattern colors. +- **createPatternFill** - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfillpattern.html) instance which has the specified pattern style and the `Color` or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/workbookcolorinfo.html) values, specified for the background and pattern colors. -- **createLinearGradientFill** - Returns a [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfilllineargradient.html) instance with the specified angle and gradient stops. +- **createLinearGradientFill** - Returns a [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfilllineargradient.html) instance with the specified angle and gradient stops. -- **createRectangularGradientFill** - Returns a [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfillrectangulargradient.html) instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle. +- **createRectangularGradientFill** - Returns a [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/cellfillrectangulargradient.html) instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle. The derived types, representing the various fills which can be created, are as follows: -- **CellFillPattern** - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel. +- **CellFillPattern** - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel. -- **CellFillLinearGradient** - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient. +- **CellFillLinearGradient** - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient. -- **CellFillRectangularGradient** - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges. +- **CellFillRectangularGradient** - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges. The following code snippet demonstrates how to create a solid fill in a [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/worksheetcell.html): @@ -177,41 +177,41 @@ You can specify a color (the color of Excel cells background, border, etc) using These are the ways a color can be defined, as follows: -- The automatic color (which is the WindowText system color) +- The automatic color (which is the WindowText system color) -- Any user defined RGB color +- Any user defined RGB color -- A theme color +- A theme color If an RGB or a theme color is used, an optional tint can be applied to lighten or darken the color. This tint cannot be set directly in Microsoft Excel 2007 UI, but various colors in the color palette displayed to the user are actually theme colors with tints applied. Each workbook has 12 associated theme colors. They are the following: -- Light 1 +- Light 1 -- Light 2 +- Light 2 -- Dark 1 +- Dark 1 -- Dark 2 +- Dark 2 -- Accent1 +- Accent1 -- Accent2 +- Accent2 -- Accent3 +- Accent3 -- Accent4 +- Accent4 -- Accent5 +- Accent5 -- Accent6 +- Accent6 -- Hyperlink +- Hyperlink -- Followed Hyperlink +- Followed Hyperlink -- There are default values when a workbook is created, which can be customized via Excel. +- There are default values when a workbook is created, which can be customized via Excel. Colors are defined by the [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/workbookcolorinfo.html) class, which is a sealed immutable class. The class has a static `automatic` property, which returns the automatic color, and there are various constructors which allow you to create a [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/workbookcolorinfo.html) instance with a color or a theme value and an optional tint. @@ -289,27 +289,27 @@ Displayed text can be different depending on varying column widths. When displaying numbers and using format string containing “General” or “@”, there are various formats which are tried to find a formatting which fits the cell width. A list of example formats are shown below: -- **Normal Value** - Number is displayed as it would be if there is unlimited amount of space. +- **Normal Value** - Number is displayed as it would be if there is unlimited amount of space. -- **Remove decimal digits** - Decimal digits will be removed one at a time until a format is found which fits. For example, a value of 12345.6789 will be reduced to the following formats until one fits: 12345.679, 12345.68, 12345.7, and 12346. This will stop when the first significant digit is the only one left, so for example value like 0.0001234567890 can only be reduced to 0.0001. +- **Remove decimal digits** - Decimal digits will be removed one at a time until a format is found which fits. For example, a value of 12345.6789 will be reduced to the following formats until one fits: 12345.679, 12345.68, 12345.7, and 12346. This will stop when the first significant digit is the only one left, so for example value like 0.0001234567890 can only be reduced to 0.0001. -- **Scientific, 5 decimal digits** - Number is displayed in the form of 0.00000E+00, such as 1.23457E+09, or 1.23457E-04 +- **Scientific, 5 decimal digits** - Number is displayed in the form of 0.00000E+00, such as 1.23457E+09, or 1.23457E-04 -- **Scientific, 4 decimal digits** - Number is displayed in the form of 0.0000E+00, such as 1.2346E+09, or 1.23456E-04 +- **Scientific, 4 decimal digits** - Number is displayed in the form of 0.0000E+00, such as 1.2346E+09, or 1.23456E-04 -- **Scientific, 3 decimal digits** - Number is displayed in the form of 0.000E+00, such as 1.235E+09, or 1.235E-0 +- **Scientific, 3 decimal digits** - Number is displayed in the form of 0.000E+00, such as 1.235E+09, or 1.235E-0 -- **Scientific, 2 decimal digits** - Number is displayed in the form of 0.00E+00, such as 1.23E+09, or 1.23E-04 +- **Scientific, 2 decimal digits** - Number is displayed in the form of 0.00E+00, such as 1.23E+09, or 1.23E-04 -- **Scientific, 1 decimal digits** - Number is displayed in the form of 0.0E+00, such as 1.2E+09, or 1.2E-04 +- **Scientific, 1 decimal digits** - Number is displayed in the form of 0.0E+00, such as 1.2E+09, or 1.2E-04 -- **Scientific, 0 decimal digits** - Number is displayed in the form of 0E+00, such as 1E+09, or 1E-04 +- **Scientific, 0 decimal digits** - Number is displayed in the form of 0E+00, such as 1E+09, or 1E-04 -- **Rounded value** - If the first significant digit is in the decimal potion of the number, the value will be rounded to the nearest integer value. For example, for a value 0.0001234567890, it will be rounded to 0, and the displayed text in cell will be 0. +- **Rounded value** - If the first significant digit is in the decimal potion of the number, the value will be rounded to the nearest integer value. For example, for a value 0.0001234567890, it will be rounded to 0, and the displayed text in cell will be 0. -- **Hash marks** - If no condensed version of the number can be displayed, hashes (#) will be repeated through the width of the cell. +- **Hash marks** - If no condensed version of the number can be displayed, hashes (#) will be repeated through the width of the cell. -- **Empty string** - If no hash marks can fit in the cell, an empty string will be returned as displayed cell text. +- **Empty string** - If no hash marks can fit in the cell, an empty string will be returned as displayed cell text. If the format string for numeric value does not contain General or @, there are only the following stages of resizing: Normal value, Hash marks, Empty string diff --git a/docs/angular/src/content/kr/components/excel_library_using_tables.md b/docs/angular/src/content/kr/components/excel_library_using_tables.md index ec6fcc3c1f..ddb917f06b 100644 --- a/docs/angular/src/content/kr/components/excel_library_using_tables.md +++ b/docs/angular/src/content/kr/components/excel_library_using_tables.md @@ -66,15 +66,15 @@ If the data in the table is subsequently changed or you change the `hidden` prop The following are the filter types available to the columns of your [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/worksheettable.html): -- [`AverageFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/averagefilter.html) - Cells can be filtered based on whether they are above or below the average value of all cells in the column. -- [`CustomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/customfilter.html) - Cells can be filtered based on one or more custom conditions. -- [`DatePeriodFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/dateperiodfilter.html) - Only cells with dates in a specific month or quarter of any year will be displayed. -- [`FillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fillfilter.html) - Only cells with a specific fill will be displayed. -- [`FixedValuesFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fixedvaluesfilter.html) - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed. -- [`FontColorFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fontcolorfilter.html) - Only cells with a specific font color will be displayed. -- [`RelativeDateRangeFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/relativedaterangefilter.html) - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter. -- [`TopOrBottomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/toporbottomfilter.html) - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values. -- [`YearToDateFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/yeartodatefilter.html) - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied. +- [`AverageFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/averagefilter.html) - Cells can be filtered based on whether they are above or below the average value of all cells in the column. +- [`CustomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/customfilter.html) - Cells can be filtered based on one or more custom conditions. +- [`DatePeriodFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/dateperiodfilter.html) - Only cells with dates in a specific month or quarter of any year will be displayed. +- [`FillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fillfilter.html) - Only cells with a specific fill will be displayed. +- [`FixedValuesFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fixedvaluesfilter.html) - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed. +- [`FontColorFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fontcolorfilter.html) - Only cells with a specific font color will be displayed. +- [`RelativeDateRangeFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/relativedaterangefilter.html) - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter. +- [`TopOrBottomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/toporbottomfilter.html) - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values. +- [`YearToDateFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/yeartodatefilter.html) - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied. The following code snippet demonstrates how to apply an "above average" filter to a [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/worksheettable.html)'s first column: @@ -96,10 +96,10 @@ In addition to accessing sort conditions from the table columns, they are also e The following sort condition types are available to set on columns: -- [`OrderedSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/orderedsortcondition.html) - Sort cells in an ascending or descending order based on their value. -- [`CustomListSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/customlistsortcondition.html) - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically. -- [`FillSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fillsortcondition.html) - Sort cells based on whether their fill is a specific pattern or gradient. -- [`FontColorSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fontcolorsortcondition.html) - Sort cells based on whether their font is a specific color. +- [`OrderedSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/orderedsortcondition.html) - Sort cells in an ascending or descending order based on their value. +- [`CustomListSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/customlistsortcondition.html) - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically. +- [`FillSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fillsortcondition.html) - Sort cells based on whether their fill is a specific pattern or gradient. +- [`FontColorSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/fontcolorsortcondition.html) - Sort cells based on whether their font is a specific color. There is also a `caseSensitive` property on the `sortSettings` of the [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/worksheettable.html) to determine whether strings should be sorted case sensitively or not. diff --git a/docs/angular/src/content/kr/components/excel_library_using_workbooks.md b/docs/angular/src/content/kr/components/excel_library_using_workbooks.md index 6be8cfb686..3cb38fb31f 100644 --- a/docs/angular/src/content/kr/components/excel_library_using_workbooks.md +++ b/docs/angular/src/content/kr/components/excel_library_using_workbooks.md @@ -34,23 +34,23 @@ font.height = 16 * 20; Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics Excel Library to set these properties using the [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/workbook.html) object’s `documentProperties` property. The available properties are: -- `author` +- `author` -- `title` +- `title` -- `subject` +- `subject` -- `keywords` +- `keywords` -- `category` +- `category` -- `status` +- `status` -- `comments` +- `comments` -- `company` +- `company` -- `manager` +- `manager` The following code demonstrates how to create a workbook and set its `title` and `status` document properties. @@ -79,7 +79,7 @@ var workbook = new Workbook(); workbook.protect(false, false); ``` -- isProtected +- isProtected Check if a workbook has protection. This read-only property returns true if the workbook has any protection set using the overloads of the Protect method. @@ -88,7 +88,7 @@ var workbook = new Workbook(); var protect = workbook.isProtected; ``` -- protection +- protection This read-only property returns an object of type WorkbookProtection which contains properties for obtaining each protection setting individually. diff --git a/docs/angular/src/content/kr/components/excel_library_using_worksheets.md b/docs/angular/src/content/kr/components/excel_library_using_worksheets.md index 0e59d997cc..cbce7ccbfd 100644 --- a/docs/angular/src/content/kr/components/excel_library_using_worksheets.md +++ b/docs/angular/src/content/kr/components/excel_library_using_worksheets.md @@ -185,16 +185,16 @@ worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new Ordere You can protect a worksheet by calling the `protect` method on the [`Worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/worksheet.html) object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations: -- Editing of cells. -- Editing of objects such as shapes, comments, charts, or other controls. -- Editing of scenarios. -- Filtering of data. -- Formatting of cells. -- Inserting, deleting, and formatting of columns. -- Inserting, deleting, and formatting of rows. -- Inserting of hyperlinks. -- Sorting of data. -- Usage of pivot tables. +- Editing of cells. +- Editing of objects such as shapes, comments, charts, or other controls. +- Editing of scenarios. +- Filtering of data. +- Formatting of cells. +- Inserting, deleting, and formatting of columns. +- Inserting, deleting, and formatting of rows. +- Inserting of hyperlinks. +- Sorting of data. +- Usage of pivot tables. You can remove worksheet protection by calling the `unprotect` method on the [`Worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/worksheet.html) object. diff --git a/docs/angular/src/content/kr/components/excel_library_working_with_sparklines.md b/docs/angular/src/content/kr/components/excel_library_working_with_sparklines.md index ece3afe848..8790717208 100644 --- a/docs/angular/src/content/kr/components/excel_library_working_with_sparklines.md +++ b/docs/angular/src/content/kr/components/excel_library_working_with_sparklines.md @@ -22,9 +22,9 @@ The Infragistics Excel Library has support for adding sparklines to an Excel Wor The following is a list of the supported predefined sparkline types. -- Line -- Column -- Stacked (Win/Loss) +- Line +- Column +- Stacked (Win/Loss) The following code demonstrates how to programmatically add Sparklines to a Worksheet via the sparklineGroups collection: diff --git a/docs/angular/src/content/kr/components/expansion-panel.md b/docs/angular/src/content/kr/components/expansion-panel.md index 6f607fbfd2..1ad53c34de 100644 --- a/docs/angular/src/content/kr/components/expansion-panel.md +++ b/docs/angular/src/content/kr/components/expansion-panel.md @@ -14,8 +14,8 @@ The [`IgxExpansionPanel`]({environment:angularApiUrl}/classes/igxexpansionpanelc ### Expansion Panel Demo - @@ -24,6 +24,7 @@ The [`IgxExpansionPanel`]({environment:angularApiUrl}/classes/igxexpansionpanelc ## Usage ### Getting Started To use the [`IgxExpansionPanelComponent`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) we need to import the **IgxExpansionPanelModule** in our **app.module**: + ```typescript // app.module.ts @@ -40,12 +41,13 @@ export class AppModule {} We can now start using `igx-expansion-panel` in the markup. The expansion panel has a simple structure, as you can see below: - `igx-expansion-panel` - the component host - stores header and body - - `igx-expansion-panel-header` - stores the component header. This is always visible. Stores title and description as well as any additional content - - `igx-expansion-panel-title` - stores the component title. Has default styling. The title will always appear first in the header content (after icon if `iconPosition === 'left'`). Used in aria labels. - - `igx-expansion-panel-description` - stores the component description. Can be used to provide a short summary. The description will always appear after the title (if title is set). - - `igx-expansion-panel-body` - stores the component body. This part of the component is only visible when the panel is expanded. + - `igx-expansion-panel-header` - stores the component header. This is always visible. Stores title and description as well as any additional content + - `igx-expansion-panel-title` - stores the component title. Has default styling. The title will always appear first in the header content (after icon if `iconPosition === 'left'`). Used in aria labels. + - `igx-expansion-panel-description` - stores the component description. Can be used to provide a short summary. The description will always appear after the title (if title is set). + - `igx-expansion-panel-body` - stores the component body. This part of the component is only visible when the panel is expanded. In the below example, we can create a small collapsible component that hold a bit of information about the hummingbird: + ```html @@ -69,6 +71,7 @@ In the below example, we can create a small collapsible component that hold a bi ``` + The [`IgxExpansionPanelComponent`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) exposes the [`.igx-expansion-panel`]({environment:sassApiUrl}/themes#function-expansion-panel-theme) class which we can use to style the component: ```css @@ -94,8 +97,8 @@ The css classes `.igx-expansion-panel__header` and `.igx-expansion-panel__body` You can see the results below: - @@ -116,6 +119,7 @@ export class ExpansionPanelComponent { public readMore: string = 'https://en.wikipedia.org/wiki/Hummingbird'; } ``` + The following code sample will show the description only when the component is in collapsed state. ```html @@ -130,6 +134,7 @@ The following code sample will show the description only when the component is i ``` If we want to add more complex functionality depending on the component's state, we could also bind to the event emitters. + ```typescript // in expansion-panel.component.ts @@ -140,6 +145,7 @@ export class ExpansionPanelComponent { } } ``` + ```html @@ -149,8 +155,8 @@ export class ExpansionPanelComponent { Below we have the results: - @@ -159,7 +165,7 @@ Below we have the results: The [`IgxExpansionPanelComponent`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) allows for easy customization of [the header]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html). The default icon for the toggle state of the control can be templated. The position of this icon is also configurable - either the start or end of the header. It can also be hidden. -Configuring the position of the header icon can be done through the [`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconposition) input on the `igx-expansion-panel-header`. The posible options for the icon position are **left**, **right** and **none**. The next code sample demonstrates how to configure the component's button to go on the *right* side. +Configuring the position of the header icon can be done through the [`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconposition) input on the `igx-expansion-panel-header`. The possible options for the icon position are **left**, **right** and **none**. The next code sample demonstrates how to configure the component's button to go on the _right_ side. ```html @@ -169,9 +175,11 @@ Configuring the position of the header icon can be done through the [`iconPositi ``` + > Note: The [`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconposition) property works with `RTL` - e.g. an icon set to show up in **right** will show in the leftmost part of the header when RTL is on. We can also override the default icon that is used in the control by passing content in an `igx-expansion-panel-icon` tag: + ```html @@ -185,6 +193,7 @@ We can also override the default icon that is used in the control by passing con ``` + ```css .example-icon { @@ -192,11 +201,13 @@ We can also override the default icon that is used in the control by passing con font-weight: 600px; } ``` + Our component will now render "Show More" when the panel is collapsed and "Collapse" once it's fully expanded. ### Adding content The [`igx-expansion-panel-body`]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) tag of the component accepts all kinds of markup and renders everything with the `ng-content` projection. We can use an [`IgxAvatar`](avatar.md) to freshen up our expansion panel's inner content: First, we need to import the `IgxAvatarModule` in our **app.module.ts** + ```typescript // in app.module.ts import { IgxExpansionPanelModule, IgxAvatarModule } from 'igniteui-angular'; @@ -210,6 +221,7 @@ NgModule({ ... }) ``` + Once imported, we can use the avatar in the markup: ```html @@ -231,7 +243,9 @@ Once imported, we can use the avatar in the markup: ... ``` + We just need to add the image source to the component definition, so it can be easily changed + ```typescript // in expansion-panel.component.html export class ExpansionPanelComponent { @@ -239,11 +253,12 @@ export class ExpansionPanelComponent { public imgSource = 'https://upload.wikimedia.org/wikipedia/commons/4/46/Purple-throated_carib_hummingbird_feeding.jpg'; } ``` + ### Summary After applying all of the changes to our initial component, here is the final result: - @@ -293,6 +308,7 @@ export class ExpansionPanelComponent { } } ``` + As you can see, we are going to use [`slideInLeft`]({environment:sassApiUrl}/animations#mixin-slide-in-left) and [`slideOutRight`]({environment:sassApiUrl}/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**]({environment:sassApiUrl}/animations) to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use. The sample shows some user information and the key point here is passing the animation settings to the component like: @@ -339,8 +355,8 @@ The sample shows some user information and the key point here is passing the ani You can see the results below: - @@ -514,10 +530,11 @@ export class ExpansionPanelComponent { ... ``` + You can see the results below: - @@ -618,14 +635,14 @@ export const data = { You can see the results below: - ## API Reference -* [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) -* [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html) -* [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) -* [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#function-expansion-panel-theme) +- [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) +- [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html) +- [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) +- [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#function-expansion-panel-theme) diff --git a/docs/angular/src/content/kr/components/exporter-csv.md b/docs/angular/src/content/kr/components/exporter-csv.md index cc18a17706..3b251c8879 100644 --- a/docs/angular/src/content/kr/components/exporter-csv.md +++ b/docs/angular/src/content/kr/components/exporter-csv.md @@ -17,8 +17,8 @@ The exporting functionality is encapsulated in the [`IgxCsvExporterService`]({en ### CSV Exporter Demo - @@ -73,12 +73,12 @@ public exportButtonHandler() { ``` -If all went well, you should see an export button. When pressed, it will trigger the export process and the browser will download a file named "ExportedDataFile.csv" which contains the data from the `localData` array in CSV format. +If all went well, you should see an export button. When pressed, it will trigger the export process and the browser will download a file named "ExportedDataFile.csv" which contains the data from the `localData` array in CSV format. ### Exporting IgxGrid's Data -The CSV Exporter service can also export data in CSV format from an [**IgxGrid**](grid/grid.md). The only difference is that you need to invoke the +The CSV Exporter service can also export data in CSV format from an [**IgxGrid**](grid/grid.md). The only difference is that you need to invoke the [`IgxCsvExporterService`]({environment:angularApiUrl}/classes/igxcsvexporterservice.html)'s [`export`]({environment:angularApiUrl}/classes/igxcsvexporterservice.html#export) method and pass the [**IgxGrid**](grid/grid.md) as first argument. Here is an example: @@ -113,8 +113,8 @@ public exportButtonHandler() { ``` - @@ -123,8 +123,8 @@ public exportButtonHandler() { ### Customizing the Exported Format The CSV Exporter supports several types of exporting formats. The export format may be specified: -* as a second argument of the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) objects's constructor -* using the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) object's [`fileType`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html#filetype) property +- as a second argument of the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) objects's constructor +- using the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) object's [`fileType`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html#filetype) property Different export formats have different file extensions and value delimiters. The following table maps the export formats and their respective file extensions and delimiters: @@ -161,13 +161,13 @@ When you are exporting data from [**IgxGrid**](grid/grid.md) the export process The CSV Exporter service has a few more APIs to explore, which are listed below. -* [IgxCsvExporterService API]({environment:angularApiUrl}/classes/igxcsvexporterservice.html) -* [IgxCsvExporterOptions API]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) +- [IgxCsvExporterService API]({environment:angularApiUrl}/classes/igxcsvexporterservice.html) +- [IgxCsvExporterOptions API]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) Additional components that were used: -* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
    @@ -176,5 +176,5 @@ Additional components that were used:
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/exporter-excel.md b/docs/angular/src/content/kr/components/exporter-excel.md index 6c4cc65eb3..7a95aec971 100644 --- a/docs/angular/src/content/kr/components/exporter-excel.md +++ b/docs/angular/src/content/kr/components/exporter-excel.md @@ -16,8 +16,8 @@ Ignite UI for Angular의 Excel 내보내기 서비스는 원시 데이터(배열 ### Excel 내보내기 데모 - @@ -74,7 +74,7 @@ public exportButtonHandler() { ``` -모두 정상으로 진행되면 내보내기 버튼이 표시됩니다. 버튼을 누르면 내보내기 처리가 트리거되고 브라우저는 파일을 MS Excel 형식의 `localData` 배열 데이터가 포함된 “ExportedDataFile.xlsx” 파일을 다운로드합니다. +모두 정상으로 진행되면 내보내기 버튼이 표시됩니다. 버튼을 누르면 내보내기 처리가 트리거되고 브라우저는 파일을 MS Excel 형식의 `localData` 배열 데이터가 포함된 “ExportedDataFile.xlsx” 파일을 다운로드합니다. ### IgxGrid's 데이터 내보내기 @@ -113,8 +113,8 @@ public exportButtonHandler() { ``` - @@ -144,13 +144,13 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions("Expor Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함되어 있습니다. -* [`IgxExcelExporterService API`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) -* [`IgxExcelExporterOptions API`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) +- [`IgxExcelExporterService API`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) +- [`IgxExcelExporterOptions API`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) 사용된 추가 컴포넌트: -* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
    @@ -159,5 +159,5 @@ Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/financial-chart-axis-types.md b/docs/angular/src/content/kr/components/financial-chart-axis-types.md index 29abab9833..e527859ecf 100644 --- a/docs/angular/src/content/kr/components/financial-chart-axis-types.md +++ b/docs/angular/src/content/kr/components/financial-chart-axis-types.md @@ -70,13 +70,13 @@ _language: kr [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialchartcomponent.html) 제어를 사용하면 X축 및 Y축에 다른 모드를 설정할 수 있습니다. X축의 경우 다음 모드 중에서 선택할 수 있습니다: -- Time - 이 모드는 데이터의 갭을 X축에 스페이스를 사용해 렌더링하는데 예를 들면, 주간이나 공휴일에 주식 거래가 없음을 나타냅니다. -- Ordinal - 이 모드는 데이터가 없는 날짜 영역을 축소합니다. 이것이 기본값입니다. +- Time - 이 모드는 데이터의 갭을 X축에 스페이스를 사용해 렌더링하는데 예를 들면, 주간이나 공휴일에 주식 거래가 없음을 나타냅니다. +- Ordinal - 이 모드는 데이터가 없는 날짜 영역을 축소합니다. 이것이 기본값입니다. Y축의 경우 다음 모드 중에서 선택할 수 있습니다: -- Numeric - 이 모드는 데이터의 정확한 값을 차트화합니다. 이것이 기본값입니다. -- PercentChange - 이 모드는 제공된 최초의 데이터 포인트에 상대되는 백분율 변화로 데이터를 표시합니다. +- Numeric - 이 모드는 데이터의 정확한 값을 차트화합니다. 이것이 기본값입니다. +- PercentChange - 이 모드는 제공된 최초의 데이터 포인트에 상대되는 백분율 변화로 데이터를 표시합니다. 다음의 코드 예제는 축의 모드를 설정하는 방법을 보여줍니다: @@ -114,8 +114,8 @@ Y축의 경우 다음 모드 중에서 선택할 수 있습니다: 금융 차트 컨트롤에서 차트의 데이터가 Y축에 대해 대수적으로 매핑되는지 여부를 제어할 수 있는데 이 작업은 다음의 속성을 설정하여 실행합니다: -- [`yAxisIsLogarithmic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialchartcomponent.html#yaxisislogarithmic) - Y축이 선형 축적 대신에 대수 축적을 사용하는지 여부를 지정합니다. 기본적으로 이 속성은 false로 설정됩니다. -- [`yAxisLogarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialchartcomponent.html#yaxislogarithmbase) - Y축에 데이터 항목의 위치를 매핑할 때 로그 함수에 사용하는 기준값입니다. +- [`yAxisIsLogarithmic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialchartcomponent.html#yaxisislogarithmic) - Y축이 선형 축적 대신에 대수 축적을 사용하는지 여부를 지정합니다. 기본적으로 이 속성은 false로 설정됩니다. +- [`yAxisLogarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialchartcomponent.html#yaxislogarithmbase) - Y축에 데이터 항목의 위치를 매핑할 때 로그 함수에 사용하는 기준값입니다. yAxisIsLogarithmic이 true인 경우에만 유효합니다. 다음의 코드 조각은 X축에서 눈금 표시의 색상, 길이, 두께를 설정하는 방법을 보여줍니다. diff --git a/docs/angular/src/content/kr/components/financial-chart-high-frequency.md b/docs/angular/src/content/kr/components/financial-chart-high-frequency.md index f367159346..889ea9a3fe 100644 --- a/docs/angular/src/content/kr/components/financial-chart-high-frequency.md +++ b/docs/angular/src/content/kr/components/financial-chart-high-frequency.md @@ -45,6 +45,6 @@ private tick(): void {
    -- [차트 퍼포먼스](financial-chart-performance.md) -- [대량의 데이터 바인딩](financial-chart-high-volume.md) -- [복수 데이터 소스 바인딩](financial-chart-multiple-data.md) +- [차트 퍼포먼스](financial-chart-performance.md) +- [대량의 데이터 바인딩](financial-chart-high-volume.md) +- [복수 데이터 소스 바인딩](financial-chart-multiple-data.md) diff --git a/docs/angular/src/content/kr/components/financial-chart-high-volume.md b/docs/angular/src/content/kr/components/financial-chart-high-volume.md index f90c0a1015..d6c12ff8d7 100644 --- a/docs/angular/src/content/kr/components/financial-chart-high-volume.md +++ b/docs/angular/src/content/kr/components/financial-chart-high-volume.md @@ -54,6 +54,6 @@ export class AppComponent {
    -- [차트 퍼포먼스](financial-chart-performance.md) -- [실시간 데이터 바인딩](financial-chart-high-frequency.md) -- [복수 데이터 소스 바인딩](financial-chart-multiple-data.md) +- [차트 퍼포먼스](financial-chart-performance.md) +- [실시간 데이터 바인딩](financial-chart-high-frequency.md) +- [복수 데이터 소스 바인딩](financial-chart-multiple-data.md) diff --git a/docs/angular/src/content/kr/components/financial-chart-multiple-data.md b/docs/angular/src/content/kr/components/financial-chart-multiple-data.md index 8faa4d6a3a..6230386d9f 100644 --- a/docs/angular/src/content/kr/components/financial-chart-multiple-data.md +++ b/docs/angular/src/content/kr/components/financial-chart-multiple-data.md @@ -24,18 +24,18 @@ _language: kr ```ts let dataSource1: any = [ - { time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 }, - { time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 }, - { time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 }, - { time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 }, - { time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 }, + { time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 }, + { time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 }, + { time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 }, + { time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 }, + { time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 }, ]; let dataSource2: any = [ - { time: new Date(2013, 1, 1), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 }, - { time: new Date(2013, 1, 4), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 }, - { time: new Date(2013, 1, 5), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 }, - { time: new Date(2013, 1, 6), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 }, - { time: new Date(2013, 1, 7), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 } + { time: new Date(2013, 1, 1), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 }, + { time: new Date(2013, 1, 4), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 }, + { time: new Date(2013, 1, 5), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 }, + { time: new Date(2013, 1, 6), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 }, + { time: new Date(2013, 1, 7), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 } ]; dataSource1.title = "Stock1 Name (Symbol)"; dataSource2.title = "Stock2 Name (Symbol)"; @@ -57,6 +57,6 @@ let data: any = [ dataSource1, dataSource2 ]
    -- [차트 퍼포먼스](financial-chart-performance.md) -- [실시간 데이터 바인딩](financial-chart-high-frequency.md) -- [대량의 데이터 바인딩](financial-chart-high-volume.md) +- [차트 퍼포먼스](financial-chart-performance.md) +- [실시간 데이터 바인딩](financial-chart-high-frequency.md) +- [대량의 데이터 바인딩](financial-chart-high-volume.md) diff --git a/docs/angular/src/content/kr/components/financial-chart-panes.md b/docs/angular/src/content/kr/components/financial-chart-panes.md index 460a5e8a2d..ba83fb04fd 100644 --- a/docs/angular/src/content/kr/components/financial-chart-panes.md +++ b/docs/angular/src/content/kr/components/financial-chart-panes.md @@ -22,10 +22,10 @@ _language: kr 다음 창은 금융 차트 컨트롤에서 사용할 수 있습니다: -- 가격 창 - 선, 캔들 스틱, 바(OHLC), 추세선, 금융 오버레이를 사용하여 가격을 렌더링합니다. -- Indicator Pane - 별도의 차트에 모든 금융지표를 렌더링하고 `BollingerBands` 및 `PriceChannel` 오버레이가 Y축과 동일한 값 범위를 공유하기 위해서 가격 창에 렌더링됩니다. -- 볼륨 창 - 기둥, 선 및 영역 차트 유형을 사용하여 재고 볼륨을 상기의 모든 창 아래에 렌더링합니다. -- 줌 창 - 모든 창의 줌을 제어하며 항상 차트 하단에 렌더링됩니다. +- 가격 창 - 선, 캔들 스틱, 바(OHLC), 추세선, 금융 오버레이를 사용하여 가격을 렌더링합니다. +- Indicator Pane - 별도의 차트에 모든 금융지표를 렌더링하고 `BollingerBands` 및 `PriceChannel` 오버레이가 Y축과 동일한 값 범위를 공유하기 위해서 가격 창에 렌더링됩니다. +- 볼륨 창 - 기둥, 선 및 영역 차트 유형을 사용하여 재고 볼륨을 상기의 모든 창 아래에 렌더링합니다. +- 줌 창 - 모든 창의 줌을 제어하며 항상 차트 하단에 렌더링됩니다. ## 인디케이터 창 @@ -102,4 +102,4 @@ _language: kr
    -- [차트 퍼포먼스](financial-chart-performance.md) +- [차트 퍼포먼스](financial-chart-performance.md) diff --git a/docs/angular/src/content/kr/components/financial-chart-performance.md b/docs/angular/src/content/kr/components/financial-chart-performance.md index 26ad835f0a..5fb9b61616 100644 --- a/docs/angular/src/content/kr/components/financial-chart-performance.md +++ b/docs/angular/src/content/kr/components/financial-chart-performance.md @@ -46,16 +46,16 @@ export class AppComponent { 차트의 퍼포먼스에 영향을 주는 여러 Angular 고유 기능이 있으므로 애플리케이션에서 퍼포먼스를 최적화할 때 이를 고려해야 합니다. -- 컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다. -- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다. 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다. 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오. -- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod` 버전을 사용하여 서비스하거나 빌드해야 합니다. +- 컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다. +- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다. 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다. 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오. +- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod` 버전을 사용하여 서비스하거나 빌드해야 합니다. > [!NOTE] > 반응: > -> - Angular가 개발 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 생산 빌드를 사용해야 합니다. +> - Angular가 개발 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 생산 빌드를 사용해야 합니다. 또한, 애플리케이션에서 퍼포먼스를 최적화할 때 금융 차트의 다음 기능을 고려해야 합니다. @@ -63,18 +63,18 @@ export class AppComponent { [`ChartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/charttype.html) 옵션을 설정하면 차트 퍼포먼스에 다음과 같은 영향을 미칠 수 있습니다: -- [`line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/charttype.html#line) - 간단히 렌더링할 차트 유형이며 대량의 데이터 점을 렌더링하거나 대량의 데이터 소스를 플로팅할 때 권장됩니다. -- [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) - `Line` 차트 유형보다 렌더링이 복잡하며 단일 수치 값을 가진 데이터 항목을 렌더링할 경우에 권장됩니다. -- `Bar` - [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) 차트 유형보다 렌더링이 복잡하며 OHLC 수치 값을 가진 데이터 항목을 렌더링할 경우에 권장됩니다. -- `Candle` - `Bar` 차트 유형보다 렌더링이 복잡하며 OHLC 수치 값을 가진 데이터 항목을 렌더링할 경우에도 권장됩니다. +- [`line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/charttype.html#line) - 간단히 렌더링할 차트 유형이며 대량의 데이터 점을 렌더링하거나 대량의 데이터 소스를 플로팅할 때 권장됩니다. +- [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) - `Line` 차트 유형보다 렌더링이 복잡하며 단일 수치 값을 가진 데이터 항목을 렌더링할 경우에 권장됩니다. +- `Bar` - [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) 차트 유형보다 렌더링이 복잡하며 OHLC 수치 값을 가진 데이터 항목을 렌더링할 경우에 권장됩니다. +- `Candle` - `Bar` 차트 유형보다 렌더링이 복잡하며 OHLC 수치 값을 가진 데이터 항목을 렌더링할 경우에도 권장됩니다. ## 볼륨 유형 `VolumeType` 옵션을 설정하면 차트 퍼포먼스에 다음과 같은 영향을 미칠 수 있습니다: -- `Line` - 간단히 렌더링할 볼륨 유형이며 대량의 데이터 점을 렌더링하거나 대량의 데이터 소스를 플로팅할 때 권장됩니다. -- `area` - `Line` 볼륨 유형보다 렌더링이 복잡합니다. -- [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) - `area` 볼륨 유형보다 렌더링이 복잡하며 1-3 재고의 볼륨 데이터를 렌더링할 경우에 권장됩니다. +- `Line` - 간단히 렌더링할 볼륨 유형이며 대량의 데이터 점을 렌더링하거나 대량의 데이터 소스를 플로팅할 때 권장됩니다. +- `area` - `Line` 볼륨 유형보다 렌더링이 복잡합니다. +- [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) - `area` 볼륨 유형보다 렌더링이 복잡하며 1-3 재고의 볼륨 데이터를 렌더링할 경우에 권장됩니다. ## 마커 유형 @@ -96,8 +96,8 @@ export class AppComponent { `XAxisMode` 옵션을 설정하면 차트 퍼포먼스에 다음과 같은 영향을 미칠 수 있습니다: -- `Ordinal` - 금융 차트에서 사용할 수 있는 가장 간단한 X축 모드이며 데이터 범위(예: 주말 또는 공휴일) 내에서 브레이크 렌더링이 필요하지 않은 경우에 권장됩니다. -- `Time` - 금융 차트에서 `Ordinal` 보다 복잡합니다. 데이터 범위(예: 주말 또는 공휴일) 내에서 브레이크 렌더링이 필요할 경우에 권장됩니다. +- `Ordinal` - 금융 차트에서 사용할 수 있는 가장 간단한 X축 모드이며 데이터 범위(예: 주말 또는 공휴일) 내에서 브레이크 렌더링이 필요하지 않은 경우에 권장됩니다. +- `Time` - 금융 차트에서 `Ordinal` 보다 복잡합니다. 데이터 범위(예: 주말 또는 공휴일) 내에서 브레이크 렌더링이 필요할 경우에 권장됩니다. ## Y축 모드 @@ -111,22 +111,22 @@ Callout 주석(`calloutsVisible`) 또는 Final Value 주석(`finalValueAnnotatio 기본적으로 금융 차트는 최상의 퍼포먼스를 발휘하도록 최적화되어 있지만, 추가 차트 비주얼을 사용하면 퍼포먼스가 저하될 수 있는데 예를 들면 다음과 같습니다: -- `XAxisInterval` -- `YAxisInterval` -- `XAxisTitle` -- `YAxisTitle` -- `XAxisTick` -- `YAxisTick` -- `XAxisMajor` -- `YAxisMajor` -- `XAxisMinor` -- `YAxisMinor` -- `XAxisLabel` -- `YAxisLabel` -- `XAxisStroke` -- `YAxisStroke` -- `XAxisStrip` -- `YAxisStrip` +- `XAxisInterval` +- `YAxisInterval` +- `XAxisTitle` +- `YAxisTitle` +- `XAxisTick` +- `YAxisTick` +- `XAxisMajor` +- `YAxisMajor` +- `XAxisMinor` +- `YAxisMinor` +- `XAxisLabel` +- `YAxisLabel` +- `XAxisStroke` +- `YAxisStroke` +- `XAxisStrip` +- `YAxisStrip`
    @@ -134,6 +134,6 @@ Callout 주석(`calloutsVisible`) 또는 Final Value 주석(`finalValueAnnotatio
    -- [대량의 데이터 바인딩](financial-chart-high-volume.md) -- [실시간 데이터 바인딩](financial-chart-high-frequency.md) -- [복수 데이터 소스 바인딩](financial-chart-multiple-data.md) +- [대량의 데이터 바인딩](financial-chart-high-volume.md) +- [실시간 데이터 바인딩](financial-chart-high-frequency.md) +- [복수 데이터 소스 바인딩](financial-chart-multiple-data.md) diff --git a/docs/angular/src/content/kr/components/financial-chart-tooltip-types.md b/docs/angular/src/content/kr/components/financial-chart-tooltip-types.md index 9a60316f98..98aa0f0eb2 100644 --- a/docs/angular/src/content/kr/components/financial-chart-tooltip-types.md +++ b/docs/angular/src/content/kr/components/financial-chart-tooltip-types.md @@ -24,10 +24,10 @@ _language: kr IgxFinancialChart는 다음과 같은 방법으로 도구 설명을 표시하도록 설정할 수 있습니다: -1. `Default` 도구 설명은 포인터가 항목 위에 있을 때 단일 항목에 대한 도구 설명을 표시합니다. -2. `Item` 도구 설명은 포인터가 항목 위에 있을 때 카테고리의 각 데이터 항목에 대한 도구 설명을 표시합니다. -3. `Category` 도구 설명은 포인터가 항목 위에 있을 때 카테고리의 모든 데이터 점에 대한 그룹화된 도구 설명을 표시합니다. -4. `None` 도구 설명이 표시되지 않도록 합니다. +1. `Default` 도구 설명은 포인터가 항목 위에 있을 때 단일 항목에 대한 도구 설명을 표시합니다. +2. `Item` 도구 설명은 포인터가 항목 위에 있을 때 카테고리의 각 데이터 항목에 대한 도구 설명을 표시합니다. +3. `Category` 도구 설명은 포인터가 항목 위에 있을 때 카테고리의 모든 데이터 점에 대한 그룹화된 도구 설명을 표시합니다. +4. `None` 도구 설명이 표시되지 않도록 합니다. ```html diff --git a/docs/angular/src/content/kr/components/for-of.md b/docs/angular/src/content/kr/components/for-of.md index 103c399287..d57487c6d3 100644 --- a/docs/angular/src/content/kr/components/for-of.md +++ b/docs/angular/src/content/kr/components/for-of.md @@ -12,8 +12,8 @@ In Ignite UI for Angular, [`igxForOf`]({environment:angularApiUrl}/classes/igxfo ### Demo - @@ -85,7 +85,7 @@ The directive can be used to virtualize the data in vertical, horizontal or both
    ``` -***Note:*** It is strongly advised that the parent container of the [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof) template for has the related dimension set (`height` for vertical and `width` for horizontal), `overflow: hidden` and `position: relative` CSS rules applied. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible. +_**Note:**_ It is strongly advised that the parent container of the [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof) template for has the related dimension set (`height` for vertical and `width` for horizontal), `overflow: hidden` and `position: relative` CSS rules applied. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible. ### Horizontal and vertical virtualization @@ -106,6 +106,7 @@ The directive can be used to virtualize the data in vertical, horizontal or both ``` + ### igxFor bound to remote service The [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof) directive can be bound to remote service. You need to use `Observable` property - `remoteData`(in the following case). Also the `chunkLoading` event should be utilized to trigger the requests to the data. @@ -124,16 +125,20 @@ The [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxf ``` Also there is a requirement to set the [`totalItemCount`]({environment:angularApiUrl}/classes/igxforofdirective.html#totalitemcount) property in the instance of [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof). + ```typescript this.virtDirRemote.totalItemCount = data["@odata.count"]; ``` In order access the directive instance from the component it should be marked as `ViewChild`: + ```typescript @ViewChild("virtDirRemote", { read: IgxForOfDirective }) public virtDirRemote: IgxForOfDirective; ``` + And after the request to load the first chunk, the [`totalItemCount`]({environment:angularApiUrl}/classes/igxforofdirective.html#totalitemcount) can be set: + ```typescript public ngAfterViewInit() { this.remoteService.getData(this.virtDirRemote.state, (data) => { @@ -141,7 +146,9 @@ public ngAfterViewInit() { }); } ``` -When requesting data you can take advantage of [`IgxForOfState`]({environment:angularApiUrl}/classes/igxforofdirective.html#state) interface, which provides the [`startIndex`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.startindex) and [`chunkSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.chunksize). But note, that initialy the chunkSize will be 0, so you have to specify the size of the first loaded chunk(the best value is [`igxForContainerSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforcontainersize) initially divided by [`igxForItemSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforitemsize)). + +When requesting data you can take advantage of [`IgxForOfState`]({environment:angularApiUrl}/classes/igxforofdirective.html#state) interface, which provides the [`startIndex`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.startindex) and [`chunkSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.chunksize). But note, that initially the chunkSize will be 0, so you have to specify the size of the first loaded chunk(the best value is [`igxForContainerSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforcontainersize) initially divided by [`igxForItemSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforitemsize)). + ```typescript public getData(data?: IForOfState, cb?: (any) => void): any { var dataState = data; @@ -172,7 +179,9 @@ private buildUrl(dataState: any): string { return `${this.url}${qS}`; } ``` + And every time the [`chunkPreload`]({environment:angularApiUrl}/classes/igxforofdirective.html#chunkPreload) event is thrown the new chunk of data should be requested: + ```typescript chunkLoading(evt) { if(this.prevRequest){ @@ -199,6 +208,7 @@ The following code snippet demonstrates how to use the `even` property in an `ng
    ``` + In the example above, an `even` class is assigned to every even div element. ## Known Limitations @@ -209,5 +219,5 @@ In the example above, an `even` class is assigned to every even div element. ## API References -* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) diff --git a/docs/angular/src/content/kr/components/general-licensing.md b/docs/angular/src/content/kr/components/general-licensing.md index 2adb967a98..e08755bf79 100644 --- a/docs/angular/src/content/kr/components/general-licensing.md +++ b/docs/angular/src/content/kr/components/general-licensing.md @@ -30,20 +30,20 @@ Infragistics Ignite UI for Angular is available as npm packages and you can add ## How to setup your environment to use the private npm feed -### First you need to setup the private registry and to associate this registry with the Infragistics scope. +### First you need to setup the private registry and to associate this registry with the Infragistics scope This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. > \[!Note] > **npm** is disallowing the use of the **"@"** symbol inside your username as it is considered as being "not safe for the net". Because your username is actually the email that you use for your Infragistics account it always contains the symbol **"@"**. That's why you must escape this limitation by replacing the **"@"** symbol with **"!!"** (two exclamation marks). For example, if your username is **"username@example.com"** when asked about your username you should provide the following input: **"username!!example.com"**. -### Now, to log in to our private feed using npm, run the adduser command and specify a user account and password: +### Now, to log in to our private feed using npm, run the adduser command and specify a user account and password ```cmd npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scope=@infragistics --always-auth ``` -### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project: +### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project ```cmd npm uninstall igniteui-dockmanager diff --git a/docs/angular/src/content/kr/components/general/cli-overview.md b/docs/angular/src/content/kr/components/general/cli-overview.md index 01ccc33109..ea8bf8794c 100644 --- a/docs/angular/src/content/kr/components/general/cli-overview.md +++ b/docs/angular/src/content/kr/components/general/cli-overview.md @@ -12,13 +12,16 @@ _language: kr ### Getting Started Let's start by opening a preferred terminal and installing the [`Ignite UI CLI`](https://github.com/IgniteUI/igniteui-cli): + ```cmd npm install -g igniteui-cli ``` + Once the [`Ignite UI CLI`](https://github.com/IgniteUI/igniteui-cli) is installed, there are two possible options/modes to start the tool - guided experience and using specific commands. #### Using guided experience -The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI guided [`step by step mode`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which creates a configured app that can be up and running with the ease of a single command. +The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI guided [`step by step mode`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which creates a configured app that can be up and running with the ease of a single command. + ```cmd ig ``` @@ -33,12 +36,14 @@ ig #### Using commands We can always use the Ignite UI CLI [commands](#available-commands) for generating an Ignite UI project, adding a new component or building and serving the project by ourselves. For that purpose, we can use the following commands: + ```cmd ig new --framework=angular --type=igx-ts cd ig add ig start ``` + - The full list of available **component/template** values is [here](https://github.com/IgniteUI/igniteui-cli/wiki/add#ignite-ui-for-angular-templates), you can run [`ig list`](#available-commands) command in your project directory to list all the available templates. - Both the **project name** and the **component_name** are custom values, provided by the developer. Here is an example of creating a new Ignite UI for Angular project with an igxGrid control: @@ -58,7 +63,7 @@ A full list of the available Ignite UI CLI commands as well as details on the us | Command | Alias | Description | | --- | --- | --- | -| [ig new](https://github.com/IgniteUI/igniteui-cli/wiki/new) | | Create a new Angular, jQuery or React application. The application will be configured to use either Ignite UI for Angular, or Ignite UI for JavaScript controls. +| [ig new](https://github.com/IgniteUI/igniteui-cli/wiki/new) | | Create a new Angular, jQuery or React application. The application will be configured to use either Ignite UI for Angular, or Ignite UI for JavaScript controls. | [ig add](https://github.com/IgniteUI/igniteui-cli/wiki/add) | | Adds a template by its ID and providing a name to an existing project | [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. | [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory diff --git a/docs/angular/src/content/kr/components/general/getting-started.md b/docs/angular/src/content/kr/components/general/getting-started.md index 82eab8e113..7f5999ca43 100644 --- a/docs/angular/src/content/kr/components/general/getting-started.md +++ b/docs/angular/src/content/kr/components/general/getting-started.md @@ -47,7 +47,7 @@ npm install -g igniteui-cli #### Using guided experience -The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI [`guided experience`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which builds a configured app that the developer can get up and running with the ease of a single command. +The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI [`guided experience`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which builds a configured app that the developer can get up and running with the ease of a single command. ```cmd ig @@ -223,18 +223,18 @@ The final result should look something like this: In this article we learned how to create our own Ignite UI for Angular application from scratch by taking advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI. We also learned and how to add Ignite UI for Angular to an existing application by using the Angular CLI. We designed our own page by including the [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) to it, which itself offers some awesome features, which you can take a look at by referring to the navigation menu. -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
    -* [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) -* [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) -* [Grid overview](../grid/grid.md) +- [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) +- [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) +- [Grid overview](../grid/grid.md)
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/general/localization.md b/docs/angular/src/content/kr/components/general/localization.md index 821bdadf7f..d41c018527 100644 --- a/docs/angular/src/content/kr/components/general/localization.md +++ b/docs/angular/src/content/kr/components/general/localization.md @@ -10,8 +10,8 @@ _language: kr With only a few lines of code, users can easily localize the strings in Ignite UI for Angular components. - @@ -38,6 +38,7 @@ public ngOnInit(): void { ... } ``` +
    @@ -106,6 +107,6 @@ public ngOnInit(): void { Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) -* [Ignite UI for Angular **ResourceStrings**](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **ResourceStrings**](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) diff --git a/docs/angular/src/content/kr/components/general/update-guide.md b/docs/angular/src/content/kr/components/general/update-guide.md index 092ffd6f64..225595dd39 100644 --- a/docs/angular/src/content/kr/components/general/update-guide.md +++ b/docs/angular/src/content/kr/components/general/update-guide.md @@ -13,27 +13,35 @@ A comprehensive list of changes for each release of **Ignite UI for Angular** ca The Ignite UI for Angular package also supports automatic version migration through `ng update` schematics. Those will attempt to migrate all possible breaking changes (renamed selectors, classes and @Input/Output properties), however there might be still changes that cannot be migrated. Those are usually related to typescript application logic and will be described [additionally below](#additional-manual-changes). First run the [**`ng update`**](https://angular.io/cli/update) command which will analyze your application and available updates for its packages. + ```cmd ng update ``` > [!NOTE] -> We recommend commit all your changes before proceeding with the update. +> We recommend commit all your changes before proceeding with the update. To update the **Ignite UI for Angular** package run the following command: + ```cmd ng update igniteui-angular ``` -When you update `igniteui-angular` - it's recommended to update `@angular/core`, `@angular/cli` and `igniteui-cli` packages to their matching versions. + +When you update `igniteui-angular` - it's recommended to update `@angular/core`, `@angular/cli` and `igniteui-cli` packages to their matching versions. To update the **Ignite UI CLI** package run the following command: + ```cmd ng update igniteui-cli ``` + To update the **Angular Core** package run the following command: + ```cmd ng update @angular/core ``` + To update the **Angular CLI** package use the following command: + ```cmd ng update @angular/cli ``` @@ -47,8 +55,8 @@ For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from th ### From 8.1.x to 8.2.x -* IgxDrag - * Since `hideBaseOnDrag` and `visible` inputs are being deprecated, in order to achieve the same functionality in your application, you can use any way of hiding the base element that Angular provides. One example is setting the `visibility` style to `hidden`, since it will only make in invisible and keep its space that it takes in the DOM: +- IgxDrag + - Since `hideBaseOnDrag` and `visible` inputs are being deprecated, in order to achieve the same functionality in your application, you can use any way of hiding the base element that Angular provides. One example is setting the `visibility` style to `hidden`, since it will only make in invisible and keep its space that it takes in the DOM: ```html
    ``` + ```typescript import { IgxAppendDropStrategy } from 'igniteui-angular'; public appendStrategy = IgxAppendDropStrategy; ``` - * Any use of interfaces `IgxDropEnterEventArgs` and `IgxDropLeaveEventArgs` should be replaced with `IDragBaseEventArgs`. - * Also any use of the `IgxDropEventArgs` interface should be replaced with `IDropDroppedEventArgs`. + + - Any use of interfaces `IgxDropEnterEventArgs` and `IgxDropLeaveEventArgs` should be replaced with `IDragBaseEventArgs`. + - Also any use of the `IgxDropEventArgs` interface should be replaced with `IDropDroppedEventArgs`. ### From 8.0.x to 8.1.x -* The `igx-paginator` component is introduced as a standalone component and is also used in the Grid components. +- The `igx-paginator` component is introduced as a standalone component and is also used in the Grid components. Keep in mind that if you have set the `paginationTemplate`, you may have to modify your CSS to display the pagination correctly. This is due to the fact that the template is no longer applied under a paging-specific container with CSS rules to center content, so you might need to add them manually. The style should be something similar to: @@ -101,53 +111,55 @@ The style should be something similar to: ```css .pagination-container { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } ``` ### From 7.3.x to 8.0.x -* While updating, if you face the following error `Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5").`, you should update `@angular/core` package first. This is related to this known [Angular CLI issue](https://github.com/angular/angular-cli/issues/13095) -* While updating the `igniteui-angular` package, if you see the following error `Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208")`, you should update using `ng update igniteui-angular --force`. This could happen if you update `@angular/core` and `@angular/cli` before updating `igniteui-angular`. +- While updating, if you face the following error `Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5").`, you should update `@angular/core` package first. This is related to this known [Angular CLI issue](https://github.com/angular/angular-cli/issues/13095) +- While updating the `igniteui-angular` package, if you see the following error `Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208")`, you should update using `ng update igniteui-angular --force`. This could happen if you update `@angular/core` and `@angular/cli` before updating `igniteui-angular`. ### From 7.2.x or 7.3.x to 7.3.4 -* If you use the `filterGlobal` method of `IgxGrid`, `IgxTreeGrid` or `IgxHierarchicalGrid`, you should know that the `condition` parameter is no longer optional. When the `filterGlobal` method is called with an invalid condition, it will not clear the existing filters for all columns. +- If you use the `filterGlobal` method of `IgxGrid`, `IgxTreeGrid` or `IgxHierarchicalGrid`, you should know that the `condition` parameter is no longer optional. When the `filterGlobal` method is called with an invalid condition, it will not clear the existing filters for all columns. ### From 7.1.x to 7.2.x -* If you use an IgxCombo with `combo.value`, you should know that now `combo.value` is only a getter. -* If you use `IgxTextHighlightDirective`, you should know that the `page` input property is deprecated. `rowIndex`, `columnIndex` and `page` properties of the `IActiveHighlightInfo` interface are also deprecated. Instead, `row` and `column` optional properties are added. -* If you use the `button-theme`, you should know that the `$button-roundness` has been replaced for each button type with: `$flat-border-radius`, `$raised-border-radius`, `$outline-border-radius`, `$fab-border-radius`, `$icon-border-radius`. +- If you use an IgxCombo with `combo.value`, you should know that now `combo.value` is only a getter. +- If you use `IgxTextHighlightDirective`, you should know that the `page` input property is deprecated. `rowIndex`, `columnIndex` and `page` properties of the `IActiveHighlightInfo` interface are also deprecated. Instead, `row` and `column` optional properties are added. +- If you use the `button-theme`, you should know that the `$button-roundness` has been replaced for each button type with: `$flat-border-radius`, `$raised-border-radius`, `$outline-border-radius`, `$fab-border-radius`, `$icon-border-radius`. ### From 7.0.x to 7.1.x - * If you use an IgxGrid with summaries in your application, you should know that now the `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of IgxSummaryResult with proper length. +- If you use an IgxGrid with summaries in your application, you should know that now the `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of IgxSummaryResult with proper length. - Before version 7.1: -```typescript + Before version 7.1: + +```typescript export class CustomSummary extends IgxNumberSummaryOperand { - public operate(data?: any[]): IgxSummaryResult[] { - return [{ - key: 'average', - label: 'average', - summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2) - }]; - } + public operate(data?: any[]): IgxSummaryResult[] { + return [{ + key: 'average', + label: 'average', + summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2) + }]; + } } ``` - Since version 7.1: + Since version 7.1: + ```typescript export class CustomSummary extends IgxNumberSummaryOperand { - public operate(data?: any[]): IgxSummaryResult[] { - return [{ - key: 'average', - label: 'average', - summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null - }]; - } + public operate(data?: any[]): IgxSummaryResult[] { + return [{ + key: 'average', + label: 'average', + summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null + }]; + } } ``` ### From 6.0.x to 6.1.x -* If you use an IgxCombo control in your application and you have set the `itemsMaxWidth` option, you should change this option to `itemsWidth` +- If you use an IgxCombo control in your application and you have set the `itemsMaxWidth` option, you should change this option to `itemsWidth` diff --git a/docs/angular/src/content/kr/components/geo-map-binding-data-overview.md b/docs/angular/src/content/kr/components/geo-map-binding-data-overview.md index e1cbc76471..dcc031b4fe 100644 --- a/docs/angular/src/content/kr/components/geo-map-binding-data-overview.md +++ b/docs/angular/src/content/kr/components/geo-map-binding-data-overview.md @@ -12,8 +12,8 @@ The Ignite UI for Angular map component is designed to display geo-spatial data The following section list some of data source that you can bind in the geographic map component -- [Binding Shape Files](geo-map-binding-shp-file.md) -- [Binding JSON Files](geo-map-binding-data-json-points.md) -- [Binding CSV Files](geo-map-binding-data-csv.md) -- [Binding Data Models](geo-map-binding-data-model.md) -- [Binding Multiple Sources](geo-map-binding-multiple-sources.md) +- [Binding Shape Files](geo-map-binding-shp-file.md) +- [Binding JSON Files](geo-map-binding-data-json-points.md) +- [Binding CSV Files](geo-map-binding-data-csv.md) +- [Binding Data Models](geo-map-binding-data-model.md) +- [Binding Multiple Sources](geo-map-binding-multiple-sources.md) diff --git a/docs/angular/src/content/kr/components/grid/grid.md b/docs/angular/src/content/kr/components/grid/grid.md index 3d948ba8a2..bc9793312a 100644 --- a/docs/angular/src/content/kr/components/grid/grid.md +++ b/docs/angular/src/content/kr/components/grid/grid.md @@ -12,8 +12,8 @@ _language: kr ### 데모 - @@ -64,7 +64,7 @@ public grid: IgxGridComponent; > [!NOTE] > [**IgxGridComponent**]({environment:angularApiUrl}/classes/igxgridcomponent.html)는 **프리픽스 없이는 IE에서 지원되지 않는** **css 그리드 레이아웃**을 사용하므로 결과적으로 제대로 렌더링되지 않습니다. -[**Angular**](https://angular.io/)의 대부분의 스타일은 [Autoprefixer](https://www.npmjs.com/package/autoprefixer) 플러그인으로 인해 암시적으로 프리픽스가 됩니다. +[**Angular**](https://angular.io/)의 대부분의 스타일은 [Autoprefixer](https://www.npmjs.com/package/autoprefixer) 플러그인으로 인해 암시적으로 프리픽스가 됩니다. 단, **그리드 레이아웃**의 프리픽스의 경우, [Autoprefixer](https://www.npmjs.com/package/autoprefixer) **그리드 속성**을 주석 `/* autoprefixer grid:on */`에서 활성화해야 합니다. @@ -78,7 +78,7 @@ public grid: IgxGridComponent; /* autoprefixer grid:on */ ... - ``` + ``` ### 열 구성 @@ -210,7 +210,7 @@ public initColumns(column: IgxGridColumn) { ### 데이터 구조 -[IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)는 **플랫 데이터**만 가져옵니다. 렌더링에 특정 데이터 구조는 다음 형식으로 됩니다: +[IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)는 **플랫 데이터**만 가져옵니다. 렌더링에 특정 데이터 구조는 다음 형식으로 됩니다: ```typescript const OBJECT_ARRAY = [{ @@ -242,10 +242,11 @@ const OBJECT_ARRAY = [{ }]; ``` + >[!경고] >**키 값에는 배열이나 다른 객체가 없어야 합니다**. ->[autoGenerate]({environment:angularApiUrl}/classes/igxgridcomponent.html#autogenerate) 열을 사용하는 경우에는 **데이터 키가 동일해야 합니다.** +>[autoGenerate]({environment:angularApiUrl}/classes/igxgridcomponent.html#autogenerate) 열을 사용하는 경우에는 **데이터 키가 동일해야 합니다.** ### 데이터 바인딩 @@ -382,37 +383,37 @@ Achieving a state persistence framework is easier than ever by using the new bui ### 키보드 탐색 키보드 탐색은 모든 그리드에서 기본적으로 사용할 수 있으며 최종 사용자를 위해 가능한 많은 기능과 시나리오를 포함하도록 하고 있습니다. 특정 셀에 초점을 맞추고 다음 키 조합 중 하나를 누른 경우 설명된 동작이 실행됩니다: - - `위 화살표` - 한 셀 위로 이동(줄 바꿈 없음); - - `아래 화살표` - 한 셀 아래로 이동(줄 바꿈 없음); - - `왼쪽 화살표` - 한 셀 왼쪽으로 이동(라인 간에 줄 바꿈 없음); - - `오른쪽 화살표` - 한 셀 오른쪽으로 이동(라인 간에 줄 바꿈 없음); - - `Ctrl + 위 화살표` - 현재 열의 첫 번째 셀로 이동; - - `Ctrl + 아래 화살표` - 현재 열의 마지막 셀로 이동; - - `Ctrl + 왼쪽 화살표` - 행의 가장 왼쪽 셀로 이동; - - `Home` - 행의 가장 왼쪽 셀로 이동; - - `Ctrl + Home` - 그리드의 왼쪽 상단 셀로 이동; - - `Ctrl + 오른쪽 화살표` - 행의 가장 오른쪽 셀로 이동; - - `End` - 행의 가장 오른쪽 셀로 이동; - - `Ctrl + End` - 그리드의 오른쪽 하단 셀로 이동; - - `Page Up` - 한 페이지(뷰 포트) 위로 스크롤; - - `Page Down` - 한 페이지(뷰 포트) 아래로 스크롤; - - `Enter` - 편집 모드로 들어감; - - `F2` - 편집 모드로 들어감; - - `Esc` - 편집 모드를 종료함; - - `Tab` - 순차적으로 포커스를 행의 다음 셀 위로 이동하고, 마지막 셀에 도달하면 다음 행으로 이동합니다; 다음 행이 그룹 행인 경우에는 전체 행이 포커스되고, 데이터 행인 경우에는 첫 번째 셀 위로 포커스를 이동합니다; 셀이 편집 모드인 경우에는 행의 다음 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다; - - `Shift + Tab` - 순차적으로 행의 이전 셀로 포커스를 이동하고, 첫 번째 셀에 도달하면 포커스를 이전 행으로 이동합니다. 이전 행이 그룹 행인 경우에는 전체 행이 포커스되고, 데이터 행인 경우에는 행의 마지막 셀에 포커스됩니다; 셀이 편집 모드인 경우에는 행의 다음 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다; - - `Space` - 행을 선택할 수 있는 경우에는 스페이스 키를 누르면 행 선택을 트리거합니다; - - GroupRow 위에서 `Alt + 왼쪽 화살표` - 행이 아직 축소되지 않은 경우에는 그룹 행 콘텐츠를 축소합니다; - - GroupRow 위에서 `Alt + 오른쪽 화살표` - 행이 아직 확장되지 않은 경우에는 그룹 행 콘텐츠를 확장합니다; - - 마우스 `휠` - 포커스 요소를 흐리게 합니다; +- `위 화살표` - 한 셀 위로 이동(줄 바꿈 없음); +- `아래 화살표` - 한 셀 아래로 이동(줄 바꿈 없음); +- `왼쪽 화살표` - 한 셀 왼쪽으로 이동(라인 간에 줄 바꿈 없음); +- `오른쪽 화살표` - 한 셀 오른쪽으로 이동(라인 간에 줄 바꿈 없음); +- `Ctrl + 위 화살표` - 현재 열의 첫 번째 셀로 이동; +- `Ctrl + 아래 화살표` - 현재 열의 마지막 셀로 이동; +- `Ctrl + 왼쪽 화살표` - 행의 가장 왼쪽 셀로 이동; +- `Home` - 행의 가장 왼쪽 셀로 이동; +- `Ctrl + Home` - 그리드의 왼쪽 상단 셀로 이동; +- `Ctrl + 오른쪽 화살표` - 행의 가장 오른쪽 셀로 이동; +- `End` - 행의 가장 오른쪽 셀로 이동; +- `Ctrl + End` - 그리드의 오른쪽 하단 셀로 이동; +- `Page Up` - 한 페이지(뷰 포트) 위로 스크롤; +- `Page Down` - 한 페이지(뷰 포트) 아래로 스크롤; +- `Enter` - 편집 모드로 들어감; +- `F2` - 편집 모드로 들어감; +- `Esc` - 편집 모드를 종료함; +- `Tab` - 순차적으로 포커스를 행의 다음 셀 위로 이동하고, 마지막 셀에 도달하면 다음 행으로 이동합니다; 다음 행이 그룹 행인 경우에는 전체 행이 포커스되고, 데이터 행인 경우에는 첫 번째 셀 위로 포커스를 이동합니다; 셀이 편집 모드인 경우에는 행의 다음 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다; +- `Shift + Tab` - 순차적으로 행의 이전 셀로 포커스를 이동하고, 첫 번째 셀에 도달하면 포커스를 이전 행으로 이동합니다. 이전 행이 그룹 행인 경우에는 전체 행이 포커스되고, 데이터 행인 경우에는 행의 마지막 셀에 포커스됩니다; 셀이 편집 모드인 경우에는 행의 다음 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다; +- `Space` - 행을 선택할 수 있는 경우에는 스페이스 키를 누르면 행 선택을 트리거합니다; +- GroupRow 위에서 `Alt + 왼쪽 화살표` - 행이 아직 축소되지 않은 경우에는 그룹 행 콘텐츠를 축소합니다; +- GroupRow 위에서 `Alt + 오른쪽 화살표` - 행이 아직 확장되지 않은 경우에는 그룹 행 콘텐츠를 확장합니다; +- 마우스 `휠` - 포커스 요소를 흐리게 합니다; ### 실시간 업데이트 데모 -이 샘플은 실시간 데이터에 바인딩된 `igxGrid`를 보여줍니다. +이 샘플은 실시간 데이터에 바인딩된 `igxGrid`를 보여줍니다. - @@ -438,11 +439,11 @@ See the [Grid Sizing](sizing.md) topic.
    ## API 참조 -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) ## Tutorial video Learn more about creating an Angular data grid in our short tutorial video: @@ -452,20 +453,20 @@ Learn more about creating an Angular data grid in our short tutorial video: ## 추가 리소스
    -* [Grid Sizing](sizing.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) -* [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) +- [Grid Sizing](sizing.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md) +- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/grid/groupby.md b/docs/angular/src/content/kr/components/grid/groupby.md index fd6bcebdb4..d709b4fe3e 100644 --- a/docs/angular/src/content/kr/components/grid/groupby.md +++ b/docs/angular/src/content/kr/components/grid/groupby.md @@ -13,8 +13,8 @@ _language: kr #### 데모 - @@ -82,7 +82,7 @@ export interface IGroupByExpandState { grid.toggleGroup(groupRow); ``` -그룹은 전개(***기본값***) 또는 축소된 상태로 작성할 수 있으며, 전개 상태에는 일반적으로 기본 동작과 반대되는 상태만 포함됩니다. [`groupsExpanded`]({environment:angularApiUrl}/classes/igxgridcomponent.html#groupsexpanded) 속성을 통해 그룹을 전개할지 여부를 제어할 수 있습니다. +그룹은 전개(_**기본값**_) 또는 축소된 상태로 작성할 수 있으며, 전개 상태에는 일반적으로 기본 동작과 반대되는 상태만 포함됩니다. [`groupsExpanded`]({environment:angularApiUrl}/classes/igxgridcomponent.html#groupsexpanded) 속성을 통해 그룹을 전개할지 여부를 제어할 수 있습니다. #### 그룹 행 템플릿 @@ -115,8 +115,8 @@ Groups that span multiple pages are split between them. The group row is visible #### Demo - @@ -130,19 +130,19 @@ Integration between Group By and Summaries is described in the [Summaries](summa 그룹화 UI는 다음과 같은 키보드 상호 작용을 지원합니다: - 그룹 행(행 또는 전개/축소 셀에 포커스) - - ALT + RIGHT - 그룹을 전개 - - ALT + LEFT - 그룹을 축소 + - ALT + RIGHT - 그룹을 전개 + - ALT + LEFT - 그룹을 축소 - 그룹 영역의 [`igxChip`]({environment:angularApiUrl}/classes/igxchipcomponent.html) 컴포넌트의 그룹화(칩에 포커스) - - SHIFT + LEFT - 포커스를 맞춘 칩의 왼쪽으로 이동하고 가능한 경우 그룹화 순서를 변경 - - SHIFT + RIGHT - 포커스를 맞춘 칩의 오른쪽으로 이동하고 가능한 경우 그룹화 순서를 변경 - - SPACE - 정렬 방향을 변경 - - DELETE - 필드의 그룹을 해제 - - 칩의 개별 요소를 포커스할 수 있으며 ENTER 키를 사용하여 상호 작용할 수 있습니다. + - SHIFT + LEFT - 포커스를 맞춘 칩의 왼쪽으로 이동하고 가능한 경우 그룹화 순서를 변경 + - SHIFT + RIGHT - 포커스를 맞춘 칩의 오른쪽으로 이동하고 가능한 경우 그룹화 순서를 변경 + - SPACE - 정렬 방향을 변경 + - DELETE - 필드의 그룹을 해제 + - 칩의 개별 요소를 포커스할 수 있으며 ENTER 키를 사용하여 상호 작용할 수 있습니다. ### Styling -The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Group By styling. @@ -188,7 +188,7 @@ $custom-chips-theme: chip-theme( #### Defining a custom color palette -In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -200,7 +200,8 @@ $custom-palette: palette( $secondary: $yellow-color ); ``` -After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. + +After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. ```scss $custom-theme: grid-theme( @@ -222,9 +223,11 @@ $custom-chips-theme: chip-theme( $hover-text-color:contrast-color($custom-palette, "primary", 600) ); ``` + #### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`. +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`. + ```scss $custom-grid-schema: extend($_light-grid,( group-row-background: (igx-color:('secondary', 100)), @@ -238,7 +241,9 @@ $custom-grid-schema: extend($_light-grid,( expand-icon-hover-color: (igx-color:('primary', 400)) )); ``` -In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. + +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. + ```scss $my-custom-schema: extend($light-schema, ( igx-grid: $custom-grid-schema @@ -253,6 +258,7 @@ $custom-theme: grid-theme( #### Applying the custom theme The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + ```scss @include grid($custom-theme); @include chip($custom-chips-theme); @@ -267,7 +273,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. >[!NOTE] - >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component: ```scss :host { @@ -278,12 +284,12 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo } ``` -#### Demo +#### Demo - @@ -296,30 +302,30 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo ### API 참조 -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGroupByRow](({environment:angularApiUrl}/classes/igxgroupbyrow.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IGroupByExpandState]({environment:angularApiUrl}/interfaces/igroupbyexpandstate.html) -* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) -* [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGroupByRow](({environment:angularApiUrl}/classes/igxgroupbyrow.html) +- [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IGroupByExpandState]({environment:angularApiUrl}/interfaces/igroupbyexpandstate.html) +- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) +- [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme) ### 추가 리소스
    -* [그리드 개요](grid.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [열 이동](column-moving.md) -* [요약](summaries.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [그리드 개요](grid.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [열 이동](column-moving.md) +- [요약](summaries.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/grid/paste-excel.md b/docs/angular/src/content/kr/components/grid/paste-excel.md index eab8ce440e..5a35de3c93 100644 --- a/docs/angular/src/content/kr/components/grid/paste-excel.md +++ b/docs/angular/src/content/kr/components/grid/paste-excel.md @@ -23,8 +23,8 @@ Ignite UI for Angular [`IgxGrid`]({environment:angularApiUrl}/classes/igxgridcom 붙여넣기 후 새로운 데이터는 기울임꼴로 됩니다. - @@ -133,6 +133,7 @@ Ignite UI for Angular [`IgxGrid`]({environment:angularApiUrl}/classes/igxgridcom } } ``` +
    #### 붙여넣기 핸들러 지시문 @@ -219,15 +220,15 @@ export class PasteHandler { ``` ### API 참조 -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) ### 추가 리소스
    -* [Excel 내보내기](export-excel.md) +- [Excel 내보내기](export-excel.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/grid/selection-based-aggregates.md b/docs/angular/src/content/kr/components/grid/selection-based-aggregates.md index 0abe27082e..fe018f6340 100644 --- a/docs/angular/src/content/kr/components/grid/selection-based-aggregates.md +++ b/docs/angular/src/content/kr/components/grid/selection-based-aggregates.md @@ -11,63 +11,63 @@ With the sample, illustrated beyond, you may see how multiple selection is being #### Overview -To achieve the selection-based aggregates functionality, you can use our [`Grid Selection`]({environment:angularApiUrl}/components/grid/selection.html) feature, together with the [`Grid Summaries`]({environment:angularApiUrl}/components/grid/summaries.html). -The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classess, [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html), depending on the column data type and your needs. +To achieve the selection-based aggregates functionality, you can use our [`Grid Selection`]({environment:angularApiUrl}/components/grid/selection.html) feature, together with the [`Grid Summaries`]({environment:angularApiUrl}/components/grid/summaries.html). +The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html), depending on the column data type and your needs. #### Selection -To start working with the data in the selected grid range, you will have to subscribe to events that are notifying of changes in the grid selection. That can be done by subscribing to the [`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) event and to the [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) event. You need to bind to both of them because the Selection feature differentiates between selecting a single cell and selecting a range of cells. +To start working with the data in the selected grid range, you will have to subscribe to events that are notifying of changes in the grid selection. That can be done by subscribing to the [`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) event and to the [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) event. You need to bind to both of them because the Selection feature differentiates between selecting a single cell and selecting a range of cells. In the events subscription logic, you can extract the selected data using the grid's [`getSelectedData`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getselecteddata) function and pass the selected data to the custom summary operand. #### Summary -Within the custom summary class, you'd have to be differentiating the types of data in the grid. For instance, in the scenario below, there are four different columns, whose type of data is suitable for custom summaries. These are the Unit Price, the Units in Stock, Discontinued status and the Order Date. +Within the custom summary class, you'd have to be differentiating the types of data in the grid. For instance, in the scenario below, there are four different columns, whose type of data is suitable for custom summaries. These are the Unit Price, the Units in Stock, Discontinued status and the Order Date. The `operate` method of the derived class of the `IgxSummaryOperand`, is where you will process the data, starting by casing it in different categories based on the data types: ```typescript const numberData = data.filter(rec => typeof rec === "number"); const boolData = data.filter(rec => typeof rec === "boolean"); const dates = data.filter(rec => isDate(rec)); -``` +``` > [!NOTE] -> Bear in mind, that `isDate` is a custom function. +> Bear in mind, that `isDate` is a custom function. -After having the data types grouped accordingly, you can proceed to the aggregation itself. For that reason, you could use the already exposed methods of the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`. +After having the data types grouped accordingly, you can proceed to the aggregation itself. For that reason, you could use the already exposed methods of the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`. After that, you'd have to put the aggregated data in the same array, which would be returned to the template. For the visualization of the data, you might want to use the ``, which in a combination with the `custom-summaries` class will give the natural look of the Summary. #### Demo -Change the selection to see summaries of the currently selected range. +Change the selection to see summaries of the currently selected range. - ## API References -* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources -
    +
    -* [Grid overview](grid.md) -* [Selection Service]({environment:angularApiUrl}/classes/igxgridselectionservice.html) -* [Row Selection](row-selection.md) -* [Cell Selection](cell-selection.md) -* [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) -* [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) -* [Summaries](summaries.md) -* [Paging](paging.md) +- [Grid overview](grid.md) +- [Selection Service]({environment:angularApiUrl}/classes/igxgridselectionservice.html) +- [Row Selection](row-selection.md) +- [Cell Selection](cell-selection.md) +- [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) +- [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) +- [Summaries](summaries.md) +- [Paging](paging.md)
    -Our community is active and always welcoming to new ideas. +Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/hierarchicalgrid/hierarchical-grid.md b/docs/angular/src/content/kr/components/hierarchicalgrid/hierarchical-grid.md index dba1d18c49..7cb2743af1 100644 --- a/docs/angular/src/content/kr/components/hierarchicalgrid/hierarchical-grid.md +++ b/docs/angular/src/content/kr/components/hierarchicalgrid/hierarchical-grid.md @@ -10,8 +10,8 @@ _language: kr ### 데모 - @@ -45,7 +45,7 @@ public hgrid1: IgxHierarchicalGridComponent; ### 데이터 바인딩 **igx-hierarchical-grid**는 **igx-grid**에서 파생되며 대부분의 기능을 공유합니다. 주된 차이점은 여러 수준의 계층을 정의할 수 있다는 것입니다. **igx-row-island**라고 하는 **igx-hierarchical-grid**의 정의 내에서 별도의 태그를 통해 구성됩니다. **igx-row-island** 컴포넌트는 특정 수준의 각 하위 그리드에 대한 구성을 정의합니다. 수준별로 여러 행 아일랜드도 지원합니다. -계층 그리드는 2가지 방법으로 데이터에 바인딩할 수 있습니다. +계층 그리드는 2가지 방법으로 데이터에 바인딩할 수 있습니다. #### 1. 계층 데이터 사용 @@ -81,6 +81,7 @@ export const singers = [{ }] }]; ``` + 각 **igx-row-island**는 하위 데이터를 보유하는 속성의 키를 지정해야 합니다. ```html @@ -93,6 +94,7 @@ export const singers = [{ ``` + > [!NOTE] > `Data` 대신에 사용자는 데이터를 자동으로 설정하기 위해 **igx-hierarchical-grid**가 로딩해야 하는 `key`만 구성합니다. @@ -180,9 +182,10 @@ export class RemoteLoDService { } } ``` + ### 기능 -그리드 기능은 **igx-row-island** 마크업을 통해 활성화 및 구성할 수 있으며 이 마크업은 생성된 모든 그리드에 적용됩니다. 행 아일랜드 인스턴스를 통해 런타임에 옵션을 변경하면 생성된 각 그리드의 옵션이 변경됩니다. +그리드 기능은 **igx-row-island** 마크업을 통해 활성화 및 구성할 수 있으며 이 마크업은 생성된 모든 그리드에 적용됩니다. 행 아일랜드 인스턴스를 통해 런타임에 옵션을 변경하면 생성된 각 그리드의 옵션이 변경됩니다. ```html @@ -284,12 +287,12 @@ Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how- > `igxHierarchicalGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxHierarchicalGrid`. For more details see [igxForOf Known Issues](../for-of.html#known-limitations) section. ### Styling -The igxHierarchicalGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxHierarchicalGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. -In the below steps, we are going through the steps of customizing the igxHierarchicalGrid styling. +In the below steps, we are going through the steps of customizing the igxHierarchicalGrid styling. -#### Importing global theme -To begin the customization of the hierarchical grid, you need to import the `index` file, where all styling functions and mixins are located. +#### Importing global theme +To begin the customization of the hierarchical grid, you need to import the `index` file, where all styling functions and mixins are located. ```scss @import '~igniteui-angular/lib/core/styles/themes/index' @@ -315,10 +318,10 @@ $custom-theme: grid-theme( $resize-line-color: #ffcd0f, $row-highlight: #ffcd0f ); -``` +``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -330,7 +333,9 @@ $custom-palette: palette( $secondary: $yellow-color ); ``` -After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. + +After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. + ```scss $custom-theme: grid-theme( $cell-active-border-color: (igx-color($custom-palette, "secondary", 500)), @@ -344,11 +349,12 @@ $custom-theme: grid-theme( $resize-line-color: (igx-color($custom-palette, "secondary", 500)), $row-highlight: (igx-color($custom-palette, "secondary", 500)) ); -``` +``` #### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. Extend one of the two predefined schemas, that are provided for every component. In our case, we will use `$_light_grid`. + ```scss $custom-grid-schema: extend($_light-grid,( cell-active-border-color: (igx-color:('secondary', 500)), @@ -363,7 +369,9 @@ $custom-grid-schema: extend($_light-grid,( row-highlight: (igx-color:('secondary', 500)) )); ``` -In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. + +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. + ```scss $my-custom-schema: extend($light-schema, ( igx-grid: $custom-grid-schema @@ -373,10 +381,10 @@ $custom-theme: grid-theme( $palette: $custom-palette, $schema: $my-custom-schema ); -``` +``` #### Applying the custom theme -The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: +The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss @include grid($custom-theme); @@ -391,7 +399,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. >[!NOTE] - >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component: ```scss :host { @@ -399,43 +407,43 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo @include grid($custom-theme); } } -``` +``` #### Demo - ## API 참조 -* [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) -* [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) +- [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) ### 추가 리소스
    -* [Grid Sizing](sizing.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [Grid Sizing](sizing.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/hierarchicalgrid/load-on-demand.md b/docs/angular/src/content/kr/components/hierarchicalgrid/load-on-demand.md index 5b8008e35a..3b94630d30 100644 --- a/docs/angular/src/content/kr/components/hierarchicalgrid/load-on-demand.md +++ b/docs/angular/src/content/kr/components/hierarchicalgrid/load-on-demand.md @@ -16,8 +16,8 @@ Ignite UI for Angular [`IgxHierarchicalGrid`]({environment:angularApiUrl}/classe #### 데모 - @@ -161,9 +161,9 @@ export class RemoteLoDService { 처음으로 행이 확장되면 새로운 하위 `IgxHierarchicalGrid`가 렌더링되며 새롭게 생성된 그리드에 대한 참조를 가져와 데이터를 설정해야 합니다. 그래서 각 [`IgxRowIsland`]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) 컴포넌트는 특정 행 아일랜드에 대해 새로운 하위 그리드가 생성될 때 발생하는 [`gridCreated`]({environment:angularApiUrl}/classes/igxrowislandcomponent.html#gridCreated) 이벤트를 제공합니다. 이를 사용하여 새로운 그리드에 필요한 참조를 얻고 서비스에서 데이터를 요청하고 적용할 수 있습니다. -루트 수준, 행 아일랜드의 키, 상위 행의 기본 키 및 고유 식별자인 경우에만 정보가 필요하도록 서비스를 구축했기 때문에 모든 행 아일랜드에 대해 하나의 메소드를 사용할 수 있습니다. 이 모든 정보는 이벤트 인수에서 직접 액세스하거나 이벤트를 트리거하는 행 아일랜드에서 액세스할 수 있습니다. +루트 수준, 행 아일랜드의 키, 상위 행의 기본 키 및 고유 식별자인 경우에만 정보가 필요하도록 서비스를 구축했기 때문에 모든 행 아일랜드에 대해 하나의 메소드를 사용할 수 있습니다. 이 모든 정보는 이벤트 인수에서 직접 액세스하거나 이벤트를 트리거하는 행 아일랜드에서 액세스할 수 있습니다. -`gridCreated`를 사용하는 메소드의 이름을 지정합니다. [`gridCreated`]({environment:angularApiUrl}/classes/igxrowislandcomponent.html#gridCreated) 이벤트는 [`owner`]({environment:angularApiUrl}/interfaces/igridcreatedeventargs.html#owner) 및 새로운 하위 [`grid`]({environment:angularApiUrl}/interfaces/igridcreatedeventargs.html#grid)성으로 행 아일랜드에 대해 참조하는 [`parentID`]({environment:angularApiUrl}/interfaces/igridcreatedeventargs.html#parentid) 속성을 제공하므로 첫 번째 인수로 전달됩니다. 상위 행의 `primaryKey`에 대한 정보는 없지만 바인딩한 행 아일랜드에 따라 두 번째 인수로 간단하게 전달할 수 있습니다. +`gridCreated`를 사용하는 메소드의 이름을 지정합니다. [`gridCreated`]({environment:angularApiUrl}/classes/igxrowislandcomponent.html#gridCreated) 이벤트는 [`owner`]({environment:angularApiUrl}/interfaces/igridcreatedeventargs.html#owner) 및 새로운 하위 [`grid`]({environment:angularApiUrl}/interfaces/igridcreatedeventargs.html#grid)성으로 행 아일랜드에 대해 참조하는 [`parentID`]({environment:angularApiUrl}/interfaces/igridcreatedeventargs.html#parentid) 속성을 제공하므로 첫 번째 인수로 전달됩니다. 상위 행의 `primaryKey`에 대한 정보는 없지만 바인딩한 행 아일랜드에 따라 두 번째 인수로 간단하게 전달할 수 있습니다. `hierarchical-grid-lod.component.html`템플릿 파일은 다음과 같이 변경됩니다: @@ -240,7 +240,7 @@ public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { } ```` -이것으로 어플리케이션의 설정이 거의 완료되었습니다. 마지막 단계는 사용자가 빈 그리드를 표시하는 대신에 사용자에게 데이터가 아직 로드 중임을 알려 사용자 환경을 개선하는 것을 목표로 합니다. [`IgxHierarchicalGrid`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)는 그리드가 비어 있는 동안 표시할 수 있는 로딩 인디케이터를 지원합니다. 새로운 데이터를 가져오면 로딩 인디케이터가 비표시되고 데이터가 렌더링됩니다. +이것으로 어플리케이션의 설정이 거의 완료되었습니다. 마지막 단계는 사용자가 빈 그리드를 표시하는 대신에 사용자에게 데이터가 아직 로드 중임을 알려 사용자 환경을 개선하는 것을 목표로 합니다. [`IgxHierarchicalGrid`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)는 그리드가 비어 있는 동안 표시할 수 있는 로딩 인디케이터를 지원합니다. 새로운 데이터를 가져오면 로딩 인디케이터가 비표시되고 데이터가 렌더링됩니다. #### 로딩 인디케이터 설정 @@ -299,17 +299,17 @@ export class HierarchicalGridLoDSampleComponent implements AfterViewInit { ### API 참조 -* [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) -* [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) +- [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) +- [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) ### 추가 리소스
    -* [계층 그리드 컴포넌트](hierarchical-grid.md) +- [계층 그리드 컴포넌트](hierarchical-grid.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/icon.md b/docs/angular/src/content/kr/components/icon.md index 9c3521b46f..ecde2ef78d 100644 --- a/docs/angular/src/content/kr/components/icon.md +++ b/docs/angular/src/content/kr/components/icon.md @@ -5,15 +5,15 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Icon +## Icon

    The Ignite UI for Angular Icon component unifies icon/font sets so developers can use them interchangeably and add material icons to markup. The component supports custom colors. Icons can be set as inactive.

    ### Icon Demo - @@ -38,6 +38,7 @@ import { IgxIconModule } from 'igniteui-angular'; }) export class AppModule {} ``` + ### Usage Using [`igx-icon`]({environment:angularApiUrl}/classes/igxiconcomponent.html) to set an [`active`]({environment:angularApiUrl}/classes/igxiconcomponent.html#active) home icon with magenta `style.color`. @@ -47,6 +48,7 @@ Using [`igx-icon`]({environment:angularApiUrl}/classes/igxiconcomponent.html) to ``` Setting an inactive icon. + ```html volume_off ``` @@ -57,7 +59,8 @@ Setting icon with content projection. bluetooth ``` -You can set the icon's size through CSS. Create a custom CSS class and name it *custom-size*. The icon's size is changed by the **font-size** property. Additionally to center it, set the **width** and the **height** to the same value. +You can set the icon's size through CSS. Create a custom CSS class and name it _custom-size_. The icon's size is changed by the **font-size** property. Additionally to center it, set the **width** and the **height** to the same value. + ```html phone_iphone ``` @@ -71,19 +74,20 @@ You can set the icon's size through CSS. Create a custom CSS class and name it * height: 56px; } ``` +
    ### SVG Icons -You can also use a SVG image as an icon. First, inject [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency. In this example [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency is injected in a component's constructor but you can use it wherever it is needed in your code. +You can also use a SVG image as an icon. First, inject [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency. In this example [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency is injected in a component's constructor but you can use it wherever it is needed in your code. Use the [`addSvgIcon`]({environment:angularApiUrl}/classes/igxiconservice.html#addsvgicon) method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. Icon name and file URL path are method's mandatory parameters; you can specify font-set as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the `addSvgIconFromText` method to import the SVG file providing the SVG text content instead of the file URL. -* Have in mind that if there are two icons with the same name and the same font-set - SVG icon will be displayed with priority. -* It is better not to provide image width and height in the SVG file. -* You may need additional polyfill scripts ("polyfills") for Internet Explorer. +- Have in mind that if there are two icons with the same name and the same font-set - SVG icon will be displayed with priority. +- It is better not to provide image width and height in the SVG file. +- You may need additional polyfill scripts ("polyfills") for Internet Explorer. ```typescript // svg-icon-sample.ts @@ -102,8 +106,8 @@ public ngOnInit() { ``` - @@ -112,23 +116,24 @@ The igxIcon allows styling through the [Ignite UI for Angular Theme Library](../ #### Importing global theme To begin styling of the predefined icon layout, you need to import the `index` file, where all styling functions and mixins are located. + ```scss @import '~igniteui-angular/lib/core/styles/themes/index' -``` +``` #### Defining custom theme -You can easily create a new theme, that extends the [`icon-theme`]({environment:sassApiUrl}/themes#function-icon-theme) and accepts the parameters, required to customize the icon as desired. - +You can easily create a new theme, that extends the [`icon-theme`]({environment:sassApiUrl}/themes#function-icon-theme) and accepts the parameters, required to customize the icon as desired. + ```scss $custom-theme: icon-theme( $color: #ffcd0f, $disabled-color: #494949 ); -``` +``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -139,9 +144,9 @@ $custom-palette: palette( $primary: $black-color, $secondary: $yellow-color ); -``` +``` -After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. +After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. ```scss $custom-theme:icon-theme( @@ -151,16 +156,17 @@ $custom-theme:icon-theme( ``` #### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_dark_icon`. +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_dark_icon`. ```scss $custom-icon-schema: extend($_dark-icon, ( color: (igx-color("secondary", 500)), disabled-color: (igx-color("primary", 500)) )); -``` -In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. +``` + +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. ```scss $my-custom-schema: extend($dark-schema, ( @@ -175,6 +181,7 @@ $custom-theme: icon-theme( #### Applying the custom theme The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + ```scss @include icon($custom-theme); ``` @@ -188,7 +195,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. >[!NOTE] - >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component: ```scss :host { @@ -196,31 +203,31 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo @include icon($custom-theme); } } -``` +``` #### Demo - ### Breaking Changes in 6.2.0 -* The [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html) `iconName` property is deprecated. To set the icon name for 'material' icons, place the name of the icon between the opening and closing tags. For 'Font Awesome' and SVG icons, use the `name` property. +- The [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html) `iconName` property is deprecated. To set the icon name for 'material' icons, place the name of the icon between the opening and closing tags. For 'Font Awesome' and SVG icons, use the `name` property. ## API References
    -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/input-group-reactive-forms.md b/docs/angular/src/content/kr/components/input-group-reactive-forms.md index e9a9f15d06..d828714f84 100644 --- a/docs/angular/src/content/kr/components/input-group-reactive-forms.md +++ b/docs/angular/src/content/kr/components/input-group-reactive-forms.md @@ -15,8 +15,8 @@ Ignite UI for Angular controls can be easily integrated in Reactive Forms. The following demo demonstrates [`igx-input-group`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html), [`igx-select`]({environment:angularApiUrl}/classes/igxselectcomponent.html) and [`igx-combo`]({environment:angularApiUrl}/classes/igxcombocomponent.html) controls being part of the Reactive Form. - @@ -72,6 +72,7 @@ What you need to have Reactive form is to set model of the form, using the `form ... ``` + The object set to the form's `formGroup` property is the form model and it needs to be of type `FormGroup`. Then, following Angular tutorial for Reactive Forms, in the demo's constructor we need the `FormBuilder` to define and configure different form's fields: ```typescript @@ -97,11 +98,11 @@ In that case the movie, full name, email and genres form's fields are required a ## Additional Resources
    -* [Combo](combo.md) -* [Select](select.md) -* [Template Driven Forms Integration](input-group.md) +- [Combo](combo.md) +- [Select](select.md) +- [Template Driven Forms Integration](input-group.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/docs/angular/src/content/kr/components/input-group.md b/docs/angular/src/content/kr/components/input-group.md index c9998a93a4..c919e130d5 100644 --- a/docs/angular/src/content/kr/components/input-group.md +++ b/docs/angular/src/content/kr/components/input-group.md @@ -98,21 +98,21 @@ Our inputs could be styled differently by using the [`type`]({environment:angula ## API References -* [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) ## Additional Resources Related topics: -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Label & Input](label-input.md) -* [Combo](combo.md) -* [Select](select.md) -* [Display Density](display-density.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Label & Input](label-input.md) +- [Combo](combo.md) +- [Select](select.md) +- [Display Density](display-density.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/label-input.md b/docs/angular/src/content/kr/components/label-input.md index 961d13dd19..c542923a95 100644 --- a/docs/angular/src/content/kr/components/label-input.md +++ b/docs/angular/src/content/kr/components/label-input.md @@ -13,8 +13,8 @@ The Ignite UI for Angular Input and Label directives are used to create single-l ### Label & Input Demo - @@ -101,15 +101,15 @@ and in our markup: You can read about the Input Group component in a separate topic [here](input-group.md). ## API References -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Additional Resources Related topics: -* [Input Group](input-group.md) +- [Input Group](input-group.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/docs/angular/src/content/kr/components/layout.md b/docs/angular/src/content/kr/components/layout.md index ea6a1c7799..2d716acdce 100644 --- a/docs/angular/src/content/kr/components/layout.md +++ b/docs/angular/src/content/kr/components/layout.md @@ -5,20 +5,20 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Layout Manager +## Layout Manager

    The Ignite UI for Angular Layout Directive allows developers to specify a layout direction for any children of the container it is applied to. Layout can flow vertically or horizontally, with controls for wrapping, justification, and alignment.

    ### Layout Demo -
    -###Usage +### Usage Use the [**igxLayout**]({environment:angularApiUrl}/classes/igxlayoutdirective.html) directive on a container element to specify the layout direction for its children: horizontally with [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#dir)`="row"` or vertically with [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#dir)`="column"`. @@ -35,5 +35,5 @@ Use the [`igxFlex`]({environment:angularApiUrl}/classes/igxflexdirective.html) d ## API References
    -* [IgxLayoutDirective]({environment:angularApiUrl}/classes/igxlayoutdirective.html) -* [IgxFlexDirective]({environment:angularApiUrl}/classes/igxflexdirective.html) \ No newline at end of file +- [IgxLayoutDirective]({environment:angularApiUrl}/classes/igxlayoutdirective.html) +- [IgxFlexDirective]({environment:angularApiUrl}/classes/igxflexdirective.html) \ No newline at end of file diff --git a/docs/angular/src/content/kr/components/linear-progress.md b/docs/angular/src/content/kr/components/linear-progress.md index 284ac446ee..16f63ea7a2 100644 --- a/docs/angular/src/content/kr/components/linear-progress.md +++ b/docs/angular/src/content/kr/components/linear-progress.md @@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Linear Progress +## Linear Progress

    The Ignite UI for Angular Linear Progress Bar Indicator component provides a visual indicator of an application’s process as it changes. The indicator updates its appearance as its state changes. The indicator can be styled with a choice of colors in stripes or solids.

    ### Linear Progress Demo - @@ -20,6 +20,7 @@ _language: kr ### Usage To get started with the Ignite UI for Angular Linear Progress, we should first import the **IgxProgressBarModule** in the **app.module.ts** file: + ```typescript // app.module.ts @@ -59,6 +60,7 @@ that the speed of loading depends on the [`max`]({environment:angularApiUrl}/cla
    ... ``` + ```typescript @ViewChildren(IgxLinearProgressBarComponent, { read: IgxLinearProgressBarComponent }) public linearBars: QueryList; @@ -85,10 +87,11 @@ that the speed of loading depends on the [`max`]({environment:angularApiUrl}/cla return Math.floor(Math.random() * (max - min + 1) + min); } ``` + If all went well, you should see something like the following in your browser: - @@ -155,10 +158,11 @@ And now let's enhance our example and create different types of loading bars, th return Math.floor(Math.random() * (max - min + 1) + min); } ``` + So if we set up everything correctly, let's see what happened in the browser: - @@ -166,6 +170,7 @@ So if we set up everything correctly, let's see what happened in the browser: Finally let's make our sample even more exciting and good as we set the following attributes: [`textAlign`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#textalign), [`textVisibility`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#textvisibility), [`textTop`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#texttop) and [`text`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#text). And now let's see how our code looks: + ```html ...
    @@ -251,8 +256,8 @@ export class LinearProgressbarSample2Component implements OnInit { And now let's see it in the browser: - @@ -261,12 +266,12 @@ And now let's see it in the browser: > [!NOTE] > If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) input value is not defined, the progress update is **1% of the [`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) value**. In case you want the progress to be faster, the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value should be greater than (**[`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) * 1%**), respectfully for slower progress the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) should be less than the default progress update. -> If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value is defined greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, there is only one update, which gets **the value that is passed for progress update**. +> If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value is defined greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, there is only one update, which gets **the value that is passed for progress update**.
    ### API
    -* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) -* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) -* [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html) +- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) +- [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) +- [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html) diff --git a/docs/angular/src/content/kr/components/list.md b/docs/angular/src/content/kr/components/list.md index 510b391608..d3d28e1cb3 100644 --- a/docs/angular/src/content/kr/components/list.md +++ b/docs/angular/src/content/kr/components/list.md @@ -85,6 +85,7 @@ Sometimes there may be a delay in your data loading. In this case you can set th ``` + ```css /* contacts.component.css */ @@ -479,6 +480,7 @@ igx-icon { align-items: center; } ``` + And finally here is the typescript code handling the panning events: ```typescript @@ -630,16 +632,16 @@ public selectItem(item) { In this article we covered a lot of ground with the list component. We created a list of contact items. Used some additional Ignite UI for Angular components inside our list items, like avatars and icons. Created some custom item layout and styled it. Finally, we added list filtering. The list component has a few more APIs to explore, which are listed below. -* [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) -* [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) +- [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html) +- [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) +- [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) Additional components that were used: -* [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) -* [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) +- [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
    @@ -648,5 +650,5 @@ Additional components that were used:
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/mask.md b/docs/angular/src/content/kr/components/mask.md index 2e74bd4ec3..a55051335f 100644 --- a/docs/angular/src/content/kr/components/mask.md +++ b/docs/angular/src/content/kr/components/mask.md @@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Mask +## Mask By applying [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) directive on a **text input field**, the developer can control user input and format the visible value, based on configurable mask rules. It provides different input options and ease in use and configuration. ### Mask Demo - @@ -74,14 +74,14 @@ In the following example, we apply a phone number with an extension mask to an i If the sample is configured properly, an input with the applied formatting mask appears. - #### Bind to Formatted/Raw Value -Use the [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) input to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) is set to *false* and the raw value is used. +Use the [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) input to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) is set to _false_ and the raw value is used. ```html @@ -116,8 +116,8 @@ public clear() { ``` - @@ -215,6 +215,7 @@ export class Person { In addition to the default mask behavior, the user can implement his own custom pipes and take advantage of the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) input properties, to transform the value to a desired output when the input gets or loses focus. This will not affect the underlying model value. Let's demonstrate how this can be achieved! Implement two pipes that will append/remove a '%' sign at the end of the displayed value: + ```typescript @Pipe({ name: 'displayFormat' }) export class DisplayFormatPipe implements PipeTransform { @@ -246,6 +247,7 @@ value = 1230; displayFormat = new DisplayFormatPipe(); inputFormat = new InputFormatPipe(); ``` + ```html @@ -259,8 +261,8 @@ inputFormat = new InputFormatPipe(); As a result, a '%' sign should be appended to the value on blur (i.e. when the user clicks outside the input) and will be removed once the input gets focus! - @@ -271,6 +273,7 @@ The user can also take advantage of the [`placeholder`]({environment:angularApiU ```typescript value = null; ``` + ```html @@ -281,8 +284,8 @@ value = null; ``` - @@ -290,14 +293,14 @@ value = null; ## API References
    -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html) -* [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html) +- [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/material-icons-extended.md b/docs/angular/src/content/kr/components/material-icons-extended.md index 5dd90e353d..9add988f95 100644 --- a/docs/angular/src/content/kr/components/material-icons-extended.md +++ b/docs/angular/src/content/kr/components/material-icons-extended.md @@ -78,5 +78,5 @@ For more info and other types of usages, goo to our * [GitHub repo](https://gith Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/month-picker.md b/docs/angular/src/content/kr/components/month-picker.md index b768b6eeac..7f952b044d 100644 --- a/docs/angular/src/content/kr/components/month-picker.md +++ b/docs/angular/src/content/kr/components/month-picker.md @@ -12,8 +12,8 @@ In general, the Angular Month Picker offers two basic ways for choosing a date - ### Angular Month Picker Example What you see here is a basic Angular Month Picker example with a the component's default view, enabling users to select the year and the month. - @@ -102,8 +102,8 @@ public numericFormatOptions = { Here is an example of modifying the default format options of the month picker: - @@ -130,40 +130,40 @@ public formatOptions = { Here is an example of localizing the month picker component: - ### Keyboard navigation - When the **igxMonthPicker** component is focused, use - - PageUp key to move to the previous year, - - PageDown key to move to the next year, - - Home key to focus the first month of the current year, - - End key to focus the last month of the current year, - - Tab key to navigate through the sub-header buttons. + - PageUp key to move to the previous year, + - PageDown key to move to the next year, + - Home key to focus the first month of the current year, + - End key to focus the last month of the current year, + - Tab key to navigate through the sub-header buttons. - When `<` (previous) or `>` (next) year button (in the sub-header) is focused, use - - Space or Enter key to scroll into view the next or previous year. + - Space or Enter key to scroll into view the next or previous year. -- When years button (in the sub-header) is focused, use - - Space or Enter key to open the years view, - - Right or Left arrow key to scroll the previous/next year into view. +- When years button (in the sub-header) is focused, use + - Space or Enter key to open the years view, + - Right or Left arrow key to scroll the previous/next year into view. -- When a month inside the months view is focused, use - - Arrow keys to navigate through the months, - - Home key to focus the first month inside the months view, - - End key to focus the last month inside the months view, - - Enter key to select the currently focused month and close the view, - - Tab key to navigate through the months. +- When a month inside the months view is focused, use + - Arrow keys to navigate through the months, + - Home key to focus the first month inside the months view, + - End key to focus the last month inside the months view, + - Enter key to select the currently focused month and close the view, + - Tab key to navigate through the months. ## API References
    -* [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) -* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) +- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme)
    @@ -171,5 +171,5 @@ Here is an example of localizing the month picker component:
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/navbar.md b/docs/angular/src/content/kr/components/navbar.md index 22fa459f0b..6e5ebd552b 100644 --- a/docs/angular/src/content/kr/components/navbar.md +++ b/docs/angular/src/content/kr/components/navbar.md @@ -14,8 +14,8 @@ The Ignite UI for Angular [`IgxNavbarComponent`]({environment:angularApiUrl}/cla ### Navbar Demo - @@ -63,6 +63,7 @@ Good, we know which application we have opened. Now, let's see what capabilities #### Adding Icons Now that our app has its menu in place, we can make it a little more functional by adding options for searching, favorites and more. To do that let's grab the [**IgxIcon**](icon.md) module and import it in our **app.module.ts** file. + ```typescript // app.module.ts @@ -93,8 +94,8 @@ Next, we need to update our template with an icon for each of the options we wan If all went well, you should see the following in your browser: - @@ -134,36 +135,36 @@ We can easily achieve this by using the [`igx-action-icon`]({environment:angular Finally, this is how our navbar should look like with its custom action icon: -
    > [!NOTE] -> If [`igx-action-icon`]({environment:angularApiUrl}/classes/igxactionicondirective.html) is provided, the default [`actionButtonIcon`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#actionbuttonicon) will not be used. +> If [`igx-action-icon`]({environment:angularApiUrl}/classes/igxactionicondirective.html) is provided, the default [`actionButtonIcon`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#actionbuttonicon) will not be used. ## API References In this article we show a few scenarios where the navbar component may come in handy. The APIs, we used to achieve them, are listed in the links below. -* [`IgxNavbarComponent`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) -* [`IgxActionIconDirective`]({environment:angularApiUrl}/classes/igxactionicondirective.html) +- [`IgxNavbarComponent`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) +- [`IgxActionIconDirective`]({environment:angularApiUrl}/classes/igxactionicondirective.html) Additional components and/or directives with relative APIs that were used: -* [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html) Styles: -* [`IgxNavbarComponent Styles`]({environment:sassApiUrl}/themes#function-navbar-theme) -* [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme) +- [`IgxNavbarComponent Styles`]({environment:sassApiUrl}/themes#function-navbar-theme) +- [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/navdrawer.md b/docs/angular/src/content/kr/components/navdrawer.md index 0c9755bb93..3d4a1fc852 100644 --- a/docs/angular/src/content/kr/components/navdrawer.md +++ b/docs/angular/src/content/kr/components/navdrawer.md @@ -11,8 +11,8 @@ _language: kr ### Navigation Drawer Demo - @@ -20,6 +20,7 @@ _language: kr ### Dependencies To started with all needed dependencies you can use the `IgxNavigationDrawerModule` and import it in your application IgxNavigationDrawerModule } from 'igniteui { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer'; + ``` @NgModule({ imports: [ @@ -44,8 +45,10 @@ With the dependencies imported, the Navigation Drawer can be defined in the app ``` + The content for the drawer should be provided via `` decorated with `igxDrawer` directive. While any content can be provided in the template, the [`igxDrawerItem`]({environment:angularApiUrl}/classes/igxnavdraweritemdirective.html) directive (see [Item styling](#item-styling)) is available to apply out-of-the-box styling to items. The [`igxRipple`](ripple.md) directive completes the look and feel: + ```html
    @@ -67,12 +70,14 @@ While any content can be provided in the template, the [`igxDrawerItem`]({enviro
    ``` + > An additional template decorated with `igxDrawerMini` directive can be provided for the alternative [Mini variant](#mini-variant) as closed state. > [!NOTE] > The Navigation Drawer can either sit above content or be pinned alongside it and by default will switch between those depending the view size. See [Modes](#modes) for more. To accommodate for the drawer switching modes, a simple flexible wrapper around the two content sections can be styled like so: + ```css /* app.component.css */ .content-wrap @@ -82,13 +87,17 @@ To accommodate for the drawer switching modes, a simple flexible wrapper around display: flex; } ``` -There are various ways to open and close the drawer. Input properties can be bound to app state, programatic access to the API in the component using a [`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) reference or even in this case using the `#drawer` [template reference variable](https://angular.io/guide/template-syntax#ref-vars): + +There are various ways to open and close the drawer. Input properties can be bound to app state, programmatic access to the API in the component using a [`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) reference or even in this case using the `#drawer` [template reference variable](https://angular.io/guide/template-syntax#ref-vars): + ```html ``` + The Navigation Drawer also integrates with [`igxNavigationService`]({environment:angularApiUrl}/classes/igxnavigationservice.html) and can be targeted by id with an [`igxToggleAction`](toggle.md#automatic-toggle-actions) directive. Let's replace the `
    ` in **app.component.html** with the following, adding [`igxButton`](button.md) and [Icon component](icon.md) to style our toggle: + ```html
    @@ -99,8 +108,8 @@ Let's replace the `
    ` in **app.component.html** with the following, adding And the final result should look like this: - @@ -109,7 +118,7 @@ And the final result should look like this: ### Modes -Unpinned (elevated above content) mode is the normal behavior where the drawer sits above and applies a darkened overlay over all content. Generally used to provide a temporary navigation suitable for mobile devices. +Unpinned (elevated above content) mode is the normal behavior where the drawer sits above and applies a darkened overlay over all content. Generally used to provide a temporary navigation suitable for mobile devices. The drawer can be pinned to take advantage of larger screens, placing it within normal content flow with relative position. Depending on whether the app provides a way to toggle the drawer, the pinned mode can be used to achieve either [permanent or persistent behavior](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior). @@ -120,7 +129,8 @@ The drawer can be pinned to take advantage of larger screens, placing it within #### Pinned (persistent) setup Pin changes the position of the drawer from `fixed` to `relative` to put it on the same flow as content. Therefore, the app styling should account for such layout, especially if the drawer needs to be toggled in this mode. While there's more than one way to achieve such fluid layout (including programmatically), the easiest way is using [`igxLayout`]({environment:angularApiUrl}/classes/igxlayoutdirective.html) and [`igxFlex`]({environment:angularApiUrl}/classes/igxflexdirective.html) directives. -Here's how that would would look applied to the previous example: +Here's how that would would look applied to the previous example: + ```html
    @@ -131,6 +141,7 @@ Here's how that would would look applied to the previous example:
    ``` + ```css .content-wrap { width: 100%; @@ -138,14 +149,15 @@ Here's how that would would look applied to the previous example: ``` - The drawer applies `flex-basis` on its host element, allowing the rest of the content to take up the remaining width. Alternatively, skipping using directives, manual styling can be applied similar to: + ```css .main { position: absolute; @@ -169,6 +181,7 @@ Most commonly used to maintain quick selection available on the side at all time This variant is enabled simply by the presence of an alternative mini template decorated with `igxDrawerMini` directive. The mini variant is commonly used in a persistent setup, so we've set `pin` and disabled the responsive threshold: + ```html @@ -187,8 +200,8 @@ The mini variant is commonly used in a persistent setup, so we've set `pin` and ``` - @@ -210,6 +223,7 @@ The directive has two `@Input` properties: Selected Item ``` + The directive is exported both from the main `IgxNavigationDrawerModule` and separately as `IgxNavDrawerItemDirective`.
    @@ -217,6 +231,7 @@ The directive is exported both from the main `IgxNavigationDrawerModule` and sep #### Example: Use default item styles with Angular Router To make use of the [`igxDrawerItem`]({environment:angularApiUrl}/classes/igxnavdraweritemdirective.html) directive to style items normally the `active` input should be set, however with routing that state is controlled externally. Take the following items defined in `app`: + ```typescript export class AppComponent { public componentLinks = [ @@ -232,6 +247,7 @@ export class AppComponent { ]; } ``` + One way to tie in the active state is to directly use the [`routerLinkActive`](https://angular.io/api/router/RouterLinkActive) default functionality and pass the drawer items active class `igx-nav-drawer__item--active`, so the `` template would look like: ```html @@ -247,7 +263,9 @@ One way to tie in the active state is to directly use the [`routerLinkActive`](h     ``` + This approach, of course, does not affect the actual directive active state and could be affected by styling changes. An alternative would be the more advanced use of `routerLinkActive` where it's assigned to a template variable and the `isActive` can be used for binding: + ```html @@ -265,4 +283,4 @@ This approach, of course, does not affect the actual directive active state and
    ### API Reference -* [IgxNavigationDrawerComponent]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html) +- [IgxNavigationDrawerComponent]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html) diff --git a/docs/angular/src/content/kr/components/overlay-position.md b/docs/angular/src/content/kr/components/overlay-position.md index 754d718b4a..a03910513c 100644 --- a/docs/angular/src/content/kr/components/overlay-position.md +++ b/docs/angular/src/content/kr/components/overlay-position.md @@ -13,34 +13,41 @@ Position strategies determine where to display the component in the provided Igx | horizontalDirection | verticalDirection | |:---------------------------|:-------------------------| | HorizontalAlignment.Center | VerticalAlignment.Middle | +
    -2. **Connected** - Positions the element based on the directions and start point passed in through [`positionSettings`] ({environment:angularApiUrl}/interfaces/positionsettings.html). It is possible to either pass a start point (type [`Point`] ({environment:angularApiUrl}/classes/point.html)) or an `HTMLElement` as a positioning base. Defaults to: +1. **Connected** - Positions the element based on the directions and start point passed in through [`positionSettings`] ({environment:angularApiUrl}/interfaces/positionsettings.html). It is possible to either pass a start point (type [`Point`] ({environment:angularApiUrl}/classes/point.html)) or an `HTMLElement` as a positioning base. Defaults to: | target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | |:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------| | new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom | +
    -3. **Auto** - **Auto** - Positions the element the same way as the **Connected** positioning strategy. It also calculates a different starting point in case the element goes partially out of the view port. The **Auto** strategy will initially try to show the element as the **Connected** strategy does. If the element goes out of the view port **Auto** will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. After the flipping, if the element is still out of the view port, **Auto** will use the initial directions and the starting point to push the element into the view port. For example - if the element goes out of the right side of the view port by 50px, **Auto** will push it with 50px to the left. Afterwards if the element is partially out of the view port, then its height or width were greater than the view port's, **Auto** will align the element's left/top edge with the view port's left/top edge. Defaults to: +1. **Auto** - **Auto** - Positions the element the same way as the **Connected** positioning strategy. It also calculates a different starting point in case the element goes partially out of the view port. The **Auto** strategy will initially try to show the element as the **Connected** strategy does. If the element goes out of the view port **Auto** will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. After the flipping, if the element is still out of the view port, **Auto** will use the initial directions and the starting point to push the element into the view port. For example - if the element goes out of the right side of the view port by 50px, **Auto** will push it with 50px to the left. Afterwards if the element is partially out of the view port, then its height or width were greater than the view port's, **Auto** will align the element's left/top edge with the view port's left/top edge. Defaults to: + | target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | |:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------| | new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom | +
    -4. **Elastic** - Positions the element as in **Connected** positioning strategy and re-sizes the element to fit inside of the view port (re-calculating width and/or height) in case the element is partially out of view. `minSize :{ width: number, height: number}` can be passed in `positionSettings` to prevent resizing if it would put the element dimensions below a certain threshold. Defaults to: +1. **Elastic** - Positions the element as in **Connected** positioning strategy and re-sizes the element to fit inside of the view port (re-calculating width and/or height) in case the element is partially out of view. `minSize :{ width: number, height: number}` can be passed in `positionSettings` to prevent resizing if it would put the element dimensions below a certain threshold. Defaults to: + | target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | minSize | |:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------|-----------------------| | new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom |{ width: 0, height: 0 }| +
    > [!NOTE] > Will not try to reposition the element if the strategy is using HorizontalDirection = Center / VerticalDirection = Middle. > [!NOTE] -> The overlay element **will be** resized, but the positioning strategy **does not** handle `overflow`. For example, if the element needs to have `overflow-y` when resized, incorporate the appropriate style to provide that. +> The overlay element **will be** resized, but the positioning strategy **does not** handle `overflow`. For example, if the element needs to have `overflow-y` when resized, incorporate the appropriate style to provide that. ## Usage Position an element based on an existing button as a target, so it's start point is the button's Bottom/Left corner. + ```typescript const positionSettings: PositionSettings = { target: buttonElement.nativeElement, @@ -56,6 +63,7 @@ strategy.position(contentWrapper, size); ### Getting Started The position strategy is passed as a property in the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter when the [`overlay.show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method is called: + ```typescript // Initializing and using overlay settings const overlaySettings: OverlaySettings = { @@ -65,19 +73,23 @@ The position strategy is passed as a property in the [`overlaySettings`] ({envir closeOnOutsideClick: true } overlay.show(dummyElement, overlaySettings); -``` +``` +
    To change the position strategy used by the overlay, override the [`positionStrategy`] ({environment:angularApiUrl}/interfaces/ipositionstrategy.html) property of the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object passed to the overlay: + ```typescript // overlaySettings is an existing object of type OverlaySettings // to override the position strategy const positionStrategy = new AutoPositionStrategy(); overlay.show(dummyElement, { positionStrategy }); ``` +
    To change the position settings an already existing strategy is using, override any of the settings of that strategy: + ```typescript // overlaySettings is an existing object of type OverlaySettings // overlaySettings.positionStrategy is an existing PositionStrategy with settings of type PositionSettings @@ -91,6 +103,7 @@ To change the position settings an already existing strategy is using, override // the element will now start to the left of the target (dimmyHTMLElement) // and will align itself to the left ``` +
    ### Dependencies @@ -100,14 +113,15 @@ Import the desired position strategy if needed like: ```typescript import {AutoPositionStrategy, GlobalPositionStrategy, ConnectedPositioningStrategy, ElasticPositionStrategy } from 'igniteui-angular'; ``` -## Demos + +## Demos ### Horizontal and Vertical Direction Changing the horizontal and/or vertical direction of the positioning settings determined where the content will align itself. Depending on the positioning strategy chosen, the content will either align relative to the target's container ([`AutoPositionStrategy`] ({environment:angularApiUrl}/classes/autopositionstrategy.html), [`ElasticPositionStrategy`] ({environment:angularApiUrl}/classes/elasticpositionstrategy.html) and [`ConnectedPositioningStrategy`] ({environment:angularApiUrl}/classes/connectedpositioningstrategy.html)) or the body of the document ([`GlobalPositioningStrategy`] ({environment:angularApiUrl}/classes/globalpositionstrategy.html)) - @@ -140,8 +154,8 @@ Changing the horizontal and/or vertical start point of the positioning settings In the demo below, the overlay element will position itself starting from the target element depending on the start point chosen. Directions are always [`HorizontalAlignment.Right`] ({environment:angularApiUrl}/enums/horizontalalignment.html#right) and [`VerticalAlignment.Bottom`] ({environment:angularApiUrl}/enums/verticalalignment.html#bottom): - @@ -150,4 +164,4 @@ In the demo below, the overlay element will position itself starting from the ta ## API References -* [IPositionStrategy] ({environment:angularApiUrl}/interfaces/ipositionstrategy.html) +- [IPositionStrategy] ({environment:angularApiUrl}/interfaces/ipositionstrategy.html) diff --git a/docs/angular/src/content/kr/components/overlay-scroll.md b/docs/angular/src/content/kr/components/overlay-scroll.md index 48185cab1b..98a1d20016 100644 --- a/docs/angular/src/content/kr/components/overlay-scroll.md +++ b/docs/angular/src/content/kr/components/overlay-scroll.md @@ -7,7 +7,7 @@ _language: kr ## Scroll strategies Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService. There are four scroll strategies: -1. **NoOperation** - does nothing. +1. **NoOperation** - does nothing. 2. **Block** - the component do not scroll with the window. The event is canceled. No scrolling happens. 3. **Close** - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded. 4. **Absolute** - scrolls everything. @@ -15,19 +15,21 @@ Scroll strategies determines how the scrolling will be handled in the provided I ## Usage Every scroll strategy has the following method used to : - - [`initialize`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#initialize) - initializes the scroll strategy. It needs a reference to the document, overlay service and the id of the component rendered - - [`attach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#attach) - attaches the scroll strategy to the specified element or to the document - - [`detach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#detach) - detaches the scroll strategy +- [`initialize`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#initialize) - initializes the scroll strategy. It needs a reference to the document, overlay service and the id of the component rendered +- [`attach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#attach) - attaches the scroll strategy to the specified element or to the document +- [`detach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#detach) - detaches the scroll strategy ```typescript this.scrollStrategy.initialize(document, overlayService, id); this.scrollStrategy.attach(); this.scrollStrategy.detach(); ``` +
    ### Getting Started The position strategy is passed as a property in the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter when the [`overlay.show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method is called: + ```typescript // Initializing and using overlay settings const overlaySettings: OverlaySettings = { @@ -37,10 +39,12 @@ The position strategy is passed as a property in the [`overlaySettings`] ({envir closeOnOutsideClick: true } overlay.show(dummyElement, overlaySettings); -``` +``` +
    To change the scroll strategy used by the overlay, override the [`scrollStrategy`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html) property of the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object passed to the overlay: + ```typescript // overlaySettings is an existing object of type OverlaySettings // to override the scroll strategy @@ -50,6 +54,7 @@ To change the scroll strategy used by the overlay, override the [`scrollStrategy }) overlay.show(dummyElement, newOverlaySettings); ``` +
    ### Dependencies @@ -61,13 +66,13 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy"; ``` -## Demos +## Demos #### Scroll Strategies The scroll strategies can be passed through the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object in order to determine how the overlay should handle scrolling. The demo below illustrates the difference between the separate [`scrollStrategies`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html): - @@ -79,8 +84,8 @@ If the [`modal`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#mo If the [`modal`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#modal) property is `true`, the element will be attached to the DOM foreground and an overlay blocked will wrap behind it, stopping propagation of all events: - @@ -88,4 +93,4 @@ If the [`modal`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#mo ## API References -* [IScrollStrategy] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html) +- [IScrollStrategy] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html) diff --git a/docs/angular/src/content/kr/components/overlay.md b/docs/angular/src/content/kr/components/overlay.md index 755a92441c..80b0f139fa 100644 --- a/docs/angular/src/content/kr/components/overlay.md +++ b/docs/angular/src/content/kr/components/overlay.md @@ -7,7 +7,7 @@ _language: kr ## Overlay

    -The overlay service provides an easy and quick way to dynamically render content in the foreground of an app. The content to be rendered as well as the way it renders (e.g. placement, animations, scroll and click behaviors) are highly configurable and able to match all of the possible scenarios. +The overlay service provides an easy and quick way to dynamically render content in the foreground of an app. The content to be rendered as well as the way it renders (e.g. placement, animations, scroll and click behaviors) are highly configurable and able to match all of the possible scenarios. The overlay service is fully integrated in the toggle directive.

    @@ -15,6 +15,7 @@ The overlay service is fully integrated in the toggle directive. ## Getting Started To use the [`IgxOverlayService`] ({environment:angularApiUrl}/classes/igxoverlayservice.html) it needs to be imported in the component. `Inject` a reference to it in the component's constructor: + ```typescript import { Inject } from '@angular/core' @@ -87,15 +88,16 @@ export class MyOverlayComponent { } } ``` +
    The overlay service [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method accepts 2 arguments, the first one being the content that should be rendered in the overlay. There are a couple of different scenarios how the content can be passed: - - A component definition (illustrated in the sample above) - When passing a component in as the first argument, the overlay service creates a new instance of that component and dynamically attaches it to the `overlay` DOM. - - An `ElementRef` to an existing DOM element - Any view that is already rendered on the page can be passed through the overlay service and be rendered in the overlay DOM. Using this approach will: - - Get the reference to the passed view from Angular - - Detach the view from the DOM and leave an anchor in its place - - Re-attach the view to the overlay, using the [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method settings or falling back to the default overlay settings - - On close, will re-attach the view back to the original location in the DOM +- A component definition (illustrated in the sample above) - When passing a component in as the first argument, the overlay service creates a new instance of that component and dynamically attaches it to the `overlay` DOM. +- An `ElementRef` to an existing DOM element - Any view that is already rendered on the page can be passed through the overlay service and be rendered in the overlay DOM. Using this approach will: + - Get the reference to the passed view from Angular + - Detach the view from the DOM and leave an anchor in its place + - Re-attach the view to the overlay, using the [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method settings or falling back to the default overlay settings + - On close, will re-attach the view back to the original location in the DOM
    ### Demo - Dynamic attach - Component @@ -103,8 +105,8 @@ In the below demo, we can pass the [IgxCard](card.md#card-demo) through the over - @@ -112,9 +114,10 @@ In the below demo, we can pass the [IgxCard](card.md#card-demo) through the over ### Configuring overlay settings -The overlay service [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method also accepts an object of the [`OverlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) type which configures the way the conent is shown. If no such object is provided, the Overlay service will use its default settings to render the passed content. +The overlay service [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method also accepts an object of the [`OverlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) type which configures the way the content is shown. If no such object is provided, the Overlay service will use its default settings to render the passed content. For example, if we want the content to be positioned relative to an element, we can pass a different [`positioningStrategy`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#positionstrategy) for the overlay's [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method, e.g. [`ConnectedPositioningStrategy`] ({environment:angularApiUrl}/classes/connectedpositioningstrategy.html) . In order to configure how the component is shown, we need to first create an [`OverlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object: + ```typescript // in my-overlay-component.component.ts // add an import for the definion of ConnectedPositioningStategy class @@ -132,6 +135,7 @@ export class MyOverlayComponent { } } ``` + ```HTML
    @@ -140,16 +144,18 @@ export class MyOverlayComponent {
    ``` + Clicking on the button will now show `MyDynamicComponent` positioned relative to the button.
    ### Hiding the overlay -The [`IgxOverlayService.hide()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) method removes the content from the overlay and, if applicable, re-attaches it to the original location in the DOM. +The [`IgxOverlayService.hide()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) method removes the content from the overlay and, if applicable, re-attaches it to the original location in the DOM. All of the elements rendered by the overlay service have a unique ID assigned to them by the service. The [`IgxOverlayService.show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method returns the identifier of the rendered content. In order to remove content from the overlay, that ID needs to be passed to the overlay's [`hide()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) method. We can modify the previously defined overlay method to not only show but also hide the overlay element + ```typescript // in my-overlay-component.component.ts // add an import for the definion of ConnectedPositioningStategy class @@ -176,6 +182,7 @@ export class MyOverlayComponent { } } ``` + ```HTML
    @@ -183,20 +190,22 @@ export class MyOverlayComponent {
    ``` + ### Demo - Dynamic attach - Settings Using the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter of the [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method, we can change how the content is shown - e.g. where the content is positioned, how the scroll should behave, is the container modal or not -
    -If *no* [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) are configured, the toggled element falls back to *default display settings*: +If _no_ [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) are configured, the toggled element falls back to _default display settings_: + ```typescript defaultOverlaySettings = { positionStrategy: new GlobalPositionStrategy(), @@ -206,12 +215,14 @@ defaultOverlaySettings = { closeOnEscape: false }; ``` +
    -### Integration with igxToggle +### Integration with igxToggle The [`IgxToggleDirective`] ({environment:angularApiUrl}/classes/igxtoggledirective.html) is fully integrated with the [`IgxOverlayService`] ({environment:angularApiUrl}/classes/igxoverlayservice.html). As such, the toggle's [`toggle()`] ({environment:angularApiUrl}/classes/igxtoggledirective.html#toggle) method allows for custom overlay settings to be passed when toggling content. An example of how to pass configuration settings to the toggle's method is shown below: + ```html
    @@ -247,17 +258,18 @@ export class ExampleComponent { } } ``` +
    ## API -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Assumptions and Limitations If you show the overlay in an outlet, and if the outlet is child of element with transform, perspective or filter css set you will be not able to show modal overlay. The reason for this is when one of above mentioned css properties is set the browser creates a new containing block and the overlay is limited to this containing block, as described [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed). ## Additional Resources -* [Position strategies](overlay-position.md) -* [Scroll strategies](overlay-scroll.md) +- [Position strategies](overlay-position.md) +- [Scroll strategies](overlay-scroll.md) diff --git a/docs/angular/src/content/kr/components/pie-chart.md b/docs/angular/src/content/kr/components/pie-chart.md index 31eb470e37..6e9b83b969 100644 --- a/docs/angular/src/content/kr/components/pie-chart.md +++ b/docs/angular/src/content/kr/components/pie-chart.md @@ -26,8 +26,8 @@ Ignite UI for Angular 파이형 차트 컴포넌트는 원형 영역을 섹션 차트 패키지를 설치할 때 코어 패키지도 설치해야 합니다. -- **npm install --save igniteui-angular-core** -- **npm install --save igniteui-angular-charts** +- **npm install --save igniteui-angular-core** +- **npm install --save igniteui-angular-charts** ## 필요한 모듈 @@ -159,16 +159,16 @@ var data = [ 파이형 차트 컴포넌트는 3가지 다른 선택 모드를 지원합니다. -- Single - 모드가 Single 모드로 설정된 경우, 한 번에 하나의 조각만 선택할 수 있습니다. 새로운 조각을 선택하면 이전에 선택한 조각은 선택 해제되고 새로운 조각이 선택됩니다. -- Multiple - 모드가 Multiple모드로 설정된 경우, 한 번에 여러 조각을 선택할 수 있습니다. 조각을 클릭하면 해당 조각이 선택되고 다른 조각을 클릭하면 이전 조각을 선택한 상태로 해당 조각이 선택됩니다. -- Manual - 모드가 Manual 모드로 설정된 경우, 선택이 해제됩니다. +- Single - 모드가 Single 모드로 설정된 경우, 한 번에 하나의 조각만 선택할 수 있습니다. 새로운 조각을 선택하면 이전에 선택한 조각은 선택 해제되고 새로운 조각이 선택됩니다. +- Multiple - 모드가 Multiple모드로 설정된 경우, 한 번에 여러 조각을 선택할 수 있습니다. 조각을 클릭하면 해당 조각이 선택되고 다른 조각을 클릭하면 이전 조각을 선택한 상태로 해당 조각이 선택됩니다. +- Manual - 모드가 Manual 모드로 설정된 경우, 선택이 해제됩니다. 파이형 차트 컴포넌트에는 선택과 관련된 4개의 이벤트가 있습니다: -- SelectedItemChanging -- SelectedItemChanged -- SelectedItemsChanging -- SelectedItemsChanged +- SelectedItemChanging +- SelectedItemChanged +- SelectedItemsChanging +- SelectedItemsChanged “Changing”으로 끝나는 이벤트는 취소 가능한 이벤트이며, 이벤트 인수 속성 `Cancel`을 true로 설정하여 조각 선택을 중지할 수 있습니다. true로 설정하면 연결된 속성이 업데이트되지 않고 조각이 선택되지 않습니다. 이 설정은 사용자가 내부 데이터를 기반으로 특정 조각을 선택할 수 없도록 하려는 경우에 유용합니다. diff --git a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md index 6fc3240344..6c2aac94c6 100644 --- a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md +++ b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md @@ -17,8 +17,8 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` The following example show how to handle scenarios, where the data is already aggregated and how its structure should look like: - @@ -58,7 +58,7 @@ The Pivot grid provides the object keys fields it uses to do its pivot calculati - `children` - Field that stores children for hierarchy building. It represents a map from grouped values and all the pivotGridRecords that are based on that value. It can be utilized in very specific scenarios, where there is a need to do something while creating the hierarchies. No need to change this for common usage. - `records` - Field that stores reference to the original data records. Can be seen in the example from above - `AllProducts_records`. Avoid setting fields in the data with the same name as this property. If your data records has `records` property, you can specify different and unique value for it using the `pivotKeys`. - `aggregations` - Field that stores aggregation values. It's applied while creating the hierarchies and also it should not be changed for common scenarios. -- `level` - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has `level` property, you can specify different and unique value for it using the `pivotKeys`. +- `level` - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has `level` property, you can specify different and unique value for it using the `pivotKeys`. - `columnDimensionSeparator` - Separator used when generating the unique column field values. It is the dash(`-`) from the example from above - `All-Bulgaria`. - `rowDimensionSeparator` - Separator used when generating the unique row field values. It is the underscore(`_`) from the example from above - `AllProducts_records`. It's used when creating the `records` and `level` field. @@ -126,8 +126,8 @@ public noopSortStrategy = NoopSortingStrategy.instance(); ``` ## API References -* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) -* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) +- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) +- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) ## Additional Resources @@ -138,5 +138,5 @@ public noopSortStrategy = NoopSortingStrategy.instance();
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md index 51b7752d38..08a9bd3da7 100644 --- a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md +++ b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md @@ -18,8 +18,8 @@ The pivot and flat grid component classes inherit from a common base and thus sh The Pivot Grid component has additional features and functionalities related to its dimensions as described below. - @@ -140,8 +140,8 @@ Chips from these areas can not be moved to the `values` area and chips from the >The chips from the Pivot Grid can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the Pivot Grid. ## API References -* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) -* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) +- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) +- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) ## Additional Resources @@ -152,6 +152,6 @@ Chips from these areas can not be moved to the `values` area and chips from the
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md index 552142cdd5..de2f9946dd 100644 --- a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md +++ b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md @@ -41,6 +41,7 @@ Multiple sibling dimensions can be defined, which creates a more complex nested The dimensions can be reordered or moved from one area to another via their corresponding chips using drag & drop. A dimension can also describe an expandable hierarchy via the `childLevel` property, for example: + ```typescript { memberFunction: () => 'All', @@ -54,6 +55,7 @@ A dimension can also describe an expandable hierarchy via the `childLevel` prope } ``` + In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the `defaultExpandState` `@Input` of the pivot grid. ## Predefined dimensions @@ -61,11 +63,11 @@ In this case the dimension renders an expander in the related section of the gri As part of the pivot grid some additional predefined dimensions are exposed for easier configuration: - `IgxPivotDateDimension` Can be used for date fields. Describes the following hierarchy by default: - - All Periods - - Years - - Quarters - - Months - - Full Date + - All Periods + - Years + - Quarters + - Months + - Full Date It can be set for rows or columns, for example: @@ -144,6 +146,7 @@ public static totalMax: PivotAggregation = (members, data: any) => { return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b)); }; ``` + The pivot value also provides a `displayName` property. It can be used to display a custom name for this value in the column header. ## Enable property @@ -231,8 +234,8 @@ Resulting in the following view, which groups the Product Categories unique colu | Merging the dimension members is case sensitive| The pivot grid creates groups and merges the same (case sensitive) values. But the dimensions provide `memberFunction` and this can be changed there, the result of the `memberFunction` are compared and used as display value.| ## API References -* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) -* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) +- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) +- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) ## Additional Resources @@ -243,5 +246,5 @@ Resulting in the following view, which groups the Product Categories unique colu
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/docs/angular/src/content/kr/components/query-builder.md b/docs/angular/src/content/kr/components/query-builder.md index dd8f43daaa..54b3963d70 100644 --- a/docs/angular/src/content/kr/components/query-builder.md +++ b/docs/angular/src/content/kr/components/query-builder.md @@ -9,13 +9,13 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w

    -The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) component provides a way to build complex queries through the UI. By specifying AND/OR operators, conditions and values the user creates an expression tree which describes the query. +The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) component provides a way to build complex queries through the UI. By specifying AND/OR operators, conditions and values the user creates an expression tree which describes the query.

    ## Angular Query Builder Example - @@ -23,7 +23,7 @@ The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybui ## Interaction -If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). After that, conditions or sub-groups can be added. +If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). After that, conditions or sub-groups can be added. In order to add a condition, a field, an operand based on the field dataType and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it. @@ -73,7 +73,7 @@ To get started with styling the Query Builder, we need to import the `index` fil // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` The Query Builder takes its background color from the its theme, using the `background` parameter. In order to change the background we need to create a custom theme: @@ -211,7 +211,8 @@ $yellow-color: #FFCD0F; $black-color: #292826; $dark-palette: palette($primary: $yellow-color, $secondary: $black-color); ``` -And then with [`color`]({environment:sassApiUrl}/palettes#function-color) we can easily retrieve color from the palette. + +And then with [`color`]({environment:sassApiUrl}/palettes#function-color) we can easily retrieve color from the palette. ```scss $custom-query-builder: query-builder-theme( @@ -357,9 +358,9 @@ Don't forget to include the themes in the same way as it was demonstrated above. ### Demo - @@ -370,13 +371,13 @@ Don't forget to include the themes in the same way as it was demonstrated above. ## API References
    -* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) -* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) +- [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) +- [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/radio-button.md b/docs/angular/src/content/kr/components/radio-button.md index f811430ecb..3690023264 100644 --- a/docs/angular/src/content/kr/components/radio-button.md +++ b/docs/angular/src/content/kr/components/radio-button.md @@ -13,8 +13,8 @@ _language: kr #### Radio Button Demo - @@ -40,6 +40,7 @@ export class AppModule { public selected: any; } ``` + To get a started with some radio buttons, add the following code inside the component template: ```html @@ -108,8 +109,8 @@ The Ignite UI for Angular Radio Group directive provides a grouping container th #### Radio Group Demo - @@ -130,7 +131,8 @@ import { IgxRadioModule } from 'igniteui-angular'; ... }) ``` -To get a started, create an [**igxRadioGroup**]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) and add several [**igxRadio**]({environment:angularApiUrl}/classes/igxradiocomponent.html) components. + +To get a started, create an [**igxRadioGroup**]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) and add several [**igxRadio**]({environment:angularApiUrl}/classes/igxradiocomponent.html) components. Note that, setting the [`igx-radio-group`]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) [`name`]({environment:angularApiUrl}/classes/igxradiogroupdirective.html#name) property is **mandatory**. @@ -151,14 +153,14 @@ public fruits = ["Apple", "Mango", "Banana", "Orange"]; ## API References
    -* [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) -* [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) -* [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) +- [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) +- [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) +- [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/ripple.md b/docs/angular/src/content/kr/components/ripple.md index 1cc0f53e71..24b6768753 100644 --- a/docs/angular/src/content/kr/components/ripple.md +++ b/docs/angular/src/content/kr/components/ripple.md @@ -11,8 +11,8 @@ _language: kr ### Ripple Demo - @@ -36,6 +36,7 @@ import { IgxRippleModule } from 'igniteui-angular'; }) export class AppModule {} ``` + ### Usage #### Adding Ripple Effect @@ -44,6 +45,7 @@ Use [`igxRipple`]({environment:angularApiUrl}/classes/igxrippledirective.html) t ```html ``` +
    @@ -55,16 +57,18 @@ You can set the ripple color using [`igxRipple`]({environment:angularApiUrl}/cla ```html ``` +
    -#### Centered Ripple Effect +#### Centered Ripple Effect The ripple effect starts from the position of the click event. You can change this behavior using [`igxRippleCentered`]({environment:angularApiUrl}/classes/igxrippledirective.html#centered) and setting the center of the element as origin. ```html ``` +
    @@ -80,19 +84,21 @@ Use [`igxRippleTarget`]({environment:angularApiUrl}/classes/igxrippledirective.h
    ``` + Notice that if you click on the parent or the child divs the ripple effect will only appear inside the child div. The child div position has to be set to **relative**.
    #### Ripple Duration -Use [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) to change the duration of the ripple animation. The default is 600 miliseconds. In this sample the [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) is set to 2000 miliseconds. +Use [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) to change the duration of the ripple animation. The default is 600 milliseconds. In this sample the [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) is set to 2000 milliseconds. ```html

    Long Ripple Animation

    ``` +
    @@ -106,13 +112,14 @@ for other browsers. > Use a relatively positioned element for the ripple animation. You can also use [`igxRippleTarget`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippletarget) to target a child element. ### Styling -The igxRipple allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The ripple's [theme]({environment:sassApiUrl}/themes#function-ripple-theme) exposes a property that allows customization of the color of the effect. +The igxRipple allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The ripple's [theme]({environment:sassApiUrl}/themes#function-ripple-theme) exposes a property that allows customization of the color of the effect. #### Importing global theme To begin styling of the predefined ripple color, you need to import the `index` file, where all styling functions and mixins are located. + ```scss @import '~igniteui-angular/lib/core/styles/themes/index' -``` +``` #### Defining custom theme You can easily create a new theme, that extends the [`ripple-theme`]({environment:sassApiUrl}/themes#function-ripple-theme) and accepts the parameters, required to customize the ripple as desired. @@ -121,10 +128,10 @@ You can easily create a new theme, that extends the [`ripple-theme`]({environmen $custom-theme: ripple-theme( $color: #FFCD0F ); -``` +``` #### Defining a custom color palette -In the approach, that was described above, the color value was hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach, that was described above, the color value was hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -135,9 +142,9 @@ $custom-palette: palette( $primary: $black-color, $secondary: $yellow-color ); -``` +``` -After the custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors. +After the custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors. ```scss $custom-theme: ripple-theme( @@ -146,15 +153,16 @@ $custom-theme: ripple-theme( ``` #### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_dark_ripple`. +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_dark_ripple`. ```scss $custom-ripple-schema: extend($_dark-ripple, ( color: (igx-color("secondary", 500)) )); -``` -In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. +``` + +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. ```scss $my-custom-schema: extend($dark-schema, ( @@ -169,6 +177,7 @@ $custom-theme: ripple-theme( #### Applying the custom theme The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + ```scss @include ripple($custom-theme); ``` @@ -182,7 +191,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. >[!NOTE] - >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component: ```scss :host { @@ -190,16 +199,16 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo @include ripple($custom-theme); } } -``` +``` >[!NOTE] > A color that is set using the `igxRiple` directive, would take precedence from the one, set within a custom theme. #### Demo - @@ -207,13 +216,13 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo ## API References
    -* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) -* [IgxRipple Styles]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) +- [IgxRipple Styles]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/roundness.md b/docs/angular/src/content/kr/components/roundness.md index fede9e0451..9240fa4a1d 100644 --- a/docs/angular/src/content/kr/components/roundness.md +++ b/docs/angular/src/content/kr/components/roundness.md @@ -5,7 +5,7 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -## Components roundness +## Components roundness

    In Ignite UI for Angular we allows you to change the shape of components by changing their border-radius

    @@ -24,8 +24,8 @@ $_light-button: ( As you can see from the example above, the component schema for [Button theme]({environment:sassApiUrl}/themes#function-button-theme) defines the default border-radius for all types of buttons. -Let's look at how things work. -The default value for "flat-border-radius" is set to 0.2 which in the end will be resolved to 4px, it is actually a fraction between 0 and 20px where 0 is the minimum border-radius and 20px is the maximum. +Let's look at how things work. +The default value for "flat-border-radius" is set to 0.2 which in the end will be resolved to 4px, it is actually a fraction between 0 and 20px where 0 is the minimum border-radius and 20px is the maximum. We decided to not limit you to fractions only. You can use whatever unit you want - pixels, relative units like em or rem, etc., allowing you to overwrite the implicit border radius limits. @@ -51,8 +51,8 @@ $myButtons-theme: ( The result from the above code snippets is: - @@ -89,5 +89,5 @@ The table shows the default border-radius for each component and its min and max
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/select.md b/docs/angular/src/content/kr/components/select.md index 393f0bfcfb..32dd51ea24 100644 --- a/docs/angular/src/content/kr/components/select.md +++ b/docs/angular/src/content/kr/components/select.md @@ -16,11 +16,12 @@ The `IgxSelectComponent` allows you to select a single item from a drop-down lis >[!WARNING] ->To start using Ignite UI for Angular components, in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [*getting started*](general/getting-started.md) topic. +>To start using Ignite UI for Angular components, in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [_getting started_](general/getting-started.md) topic. ## Usage To get started with `igx-select` you first need to import the `IgxSelectModule`: + ```ts // app.module.ts @@ -36,11 +37,13 @@ export class AppModule {} ``` In your class you need to have a collection of the items that you want to display when the drop-down opens: + ```ts public items: string[] = ["Orange", "Apple", "Banana", "Mango"]; ``` Then in your template you need to bind it with said items like so: + ```html @@ -48,7 +51,8 @@ Then in your template you need to bind it with said items like so: ``` -Notice that we use an `IgxSelectItemComponent` to display the items that `igx-select` operates on. The `IgxSelectItemComponent` extends the [*IgxDropDownItemComponent*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxdropdownitemcomponent.html) with additional functionality that is specific to the `igx-select-item`. + +Notice that we use an `IgxSelectItemComponent` to display the items that `igx-select` operates on. The `IgxSelectItemComponent` extends the [_IgxDropDownItemComponent_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxdropdownitemcomponent.html) with additional functionality that is specific to the `igx-select-item`. ## Features ### IgxSelect Actions @@ -68,14 +72,14 @@ When the `igx-drop-down` is opened, you can close it by doing one of the followi `igx-select` has intuitive keyboard navigation that makes it easy to select items without having to touch the mouse. - When the drop-down list is opened you can navigate through the items using the `Up/Down Arrow` keys, as long as there are items left in the direction you are trying to navigate to. Furthermore, pressing `Home` or `End` will navigate to the first and last items in the list. -- When the drop-down list is opened you can iteratively navigate through all items that begin with a certain character, by pressing the corresponding key, this is *case insensitive* and will cause the focus to spin between all matches. -- When the drop-down list is opened you can navigate to a *specific* item by rapidly typing in the first few characters of the item you wish to go to. - - *Note that the speed at which you type in matters.* +- When the drop-down list is opened you can iteratively navigate through all items that begin with a certain character, by pressing the corresponding key, this is _case insensitive_ and will cause the focus to spin between all matches. +- When the drop-down list is opened you can navigate to a _specific_ item by rapidly typing in the first few characters of the item you wish to go to. + - _Note that the speed at which you type in matters._ - When the drop-down list is opened, you can navigate through the items using the `Home` and `End` keys. - When the drop-down list is opened, navigation with `Up/Down Arrow` keys starts from the selected item, if any. Otherwise, it starts from the first item in the list. - When the drop-down list is closed you can cycle between its items using the `Up/Down Arrow` keys. - When the drop-down list is closed you can also navigate through all items that begin with a specific character, it works the same as if it was opened. -- When the drop-down list is closed you can also navigate to a *specific* item by rapidly typing in its first few characters. The behaviour is the same as when the drop-down is opened. +- When the drop-down list is closed you can also navigate to a _specific_ item by rapidly typing in its first few characters. The behaviour is the same as when the drop-down is opened. - When the drop-down is closed character key navigation is also case insensitive. - When the drop-down is closed character key navigation does not change selection when pressing characters that have no matching item(s). @@ -86,7 +90,7 @@ An item from the drop-down list can be selected by: - `Space` key when the respective item is focused. - Setting the value property in the code. - Setting the item's `selected` property. -- The *first* enabled item in the drop-down list is focused if there is no selected item. +- The _first_ enabled item in the drop-down list is focused if there is no selected item. - The input box is populated with the selected item's value. - The input box's text is updated when the selected item changes. - The input box is not populated with the text of an item that is focused but not selected. @@ -97,7 +101,7 @@ An item from the drop-down list can be selected by: - When there are items with duplicated values, the first one gets selected. >[!NOTE] -> `igx-select` supports *single* selection of items only. +> `igx-select` supports _single_ selection of items only. ### Event emitting Since `igx-select` extends `igx-drop-down`, it also makes good use of its events which include: @@ -106,6 +110,7 @@ Since `igx-select` extends `igx-drop-down`, it also makes good use of its events - Emitted when the drop-down is fully opened. You can make use of the `opened` event like so: + ```html Apple @@ -114,11 +119,11 @@ You can make use of the `opened` event like so: #### Opening/Closing events - Emitted on: - - input click - - select expand/collapse button click (app scenario) + - input click + - select expand/collapse button click (app scenario) - Triggered on key interaction - The `opening` and `closing` events are fired *before* the animation finishes playing, i.e. before the drop-down is fully **opened** or **closed**. They can also be canceled by setting the `cancel` property to `true` in the event handler function. + The `opening` and `closing` events are fired _before_ the animation finishes playing, i.e. before the drop-down is fully **opened** or **closed**. They can also be canceled by setting the `cancel` property to `true` in the event handler function. ```html @@ -127,7 +132,7 @@ You can make use of the `opened` event like so: ``` #### Selection event -- Emitted when the item selection is changing (when you attempt to select a new item). It is emitted *before* the selection completes, i.e. before the new item is selected. +- Emitted when the item selection is changing (when you attempt to select a new item). It is emitted _before_ the selection completes, i.e. before the new item is selected. - Emitted when an item is selected by a mouse click. - Emitted when an item is selected by `Enter`, `Space` keys. - Emitted when setting the value property. @@ -144,13 +149,15 @@ You can make use of the `opened` event like so: - Emitted on clicking outside of the component, when the drop-down is fully closed. You can make use of the `closed` event like so: + ```html Apple ``` -You put all your *handler* functions inside of your *class*: +You put all your _handler_ functions inside of your _class_: + ```ts export class MyClass { /* --- */ @@ -174,20 +181,23 @@ export class MyClass { /* --- */ } ``` + - Please note that the above examples are for demonstration purposes only and are not meant to abide by any code standards. ### Positioning Strategy `igx-select` has its own positioning strategy called the `SelectPositioningStrategy`. -It extends the [*ConnectedPositioningStrategy*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/connectedpositioningstrategy.html) and allows `igx-select` to position its drop-down list in different ways, relative to the input field. This means that the drop-down will always position itself so that the text in the input is matched by the selected item's text. +It extends the [_ConnectedPositioningStrategy_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/connectedpositioningstrategy.html) and allows `igx-select` to position its drop-down list in different ways, relative to the input field. This means that the drop-down will always position itself so that the text in the input is matched by the selected item's text. + +In the following example we are defining custom overlay settings using the `SelectPositioningStrategy` so you first have to import it alongside the [_OverlaySettings_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html): -In the following example we are defining custom overlay settings using the `SelectPositioningStrategy` so you first have to import it alongside the [*OverlaySettings*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html): ```ts import { SelectPositioningStrategy, OverlaySettings } from 'igniteui-angular'; ``` -From there you have to initialize an [*OverlaySettings*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html) object and pass in the `SelectPositioningStrategy`. And finally in the positioning strategy's constructor you pass in a [*ViewChild*](https://angular.io/api/core/ViewChild) that references the `IgxSelectComponent` from your template. +From there you have to initialize an [_OverlaySettings_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html) object and pass in the `SelectPositioningStrategy`. And finally in the positioning strategy's constructor you pass in a [_ViewChild_](https://angular.io/api/core/ViewChild) that references the `IgxSelectComponent` from your template. All of it looks like this: + ```ts @ViewChild(IgxSelectComponent) public igxSelect: IgxSelectComponent; @@ -199,10 +209,11 @@ public customOverlaySettings: OverlaySettings = { scrollStrategy: new AbsoluteScrollStrategy() }; ``` + As you can see there is also a `scrollStrategy` property that is present in the `customOverlaySettings` object. This ensures that the scrolling functionality of the drop-down works as expected. The scroll will appear every time the total height of all items in the list exceeds the drop-down's height. Another thing worth mentioning is that `igx-select` uses the `SelectPositioningStrategy` by default. -> You can pass a variety of positioning strategies to the *positionStrategy* property, you can find them [*here*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipositionstrategy.html). +> You can pass a variety of positioning strategies to the _positionStrategy_ property, you can find them [_here_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipositionstrategy.html). ### Select With Groups
    @@ -211,9 +222,10 @@ Another thing worth mentioning is that `igx-select` uses the `SelectPositioningS -Thanks to the fact that `igx-select` extends `igx-drop-down` it also has a built-in support for *groups*. +Thanks to the fact that `igx-select` extends `igx-drop-down` it also has a built-in support for _groups_. In order to make use of this functionality you need to change the data that will be passed to `igx-select`, which in this case should look something like this: + ```ts public items: any[] = [ { type: "Fruits", fruits: [ "Apple", "Orange", "Banana" ] }, @@ -221,9 +233,10 @@ public items: any[] = [ ]; ``` -You would notice that now we pass in objects that have certain properties, such as `type` and `fruits`. This is because the `IgxSelectItemComponent` has functionality that allows it to receive specific styling inside the drop-down list. This functionality comes inherited from the [*IgxDropDownItemComponent*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxdropdownitemcomponent.html). +You would notice that now we pass in objects that have certain properties, such as `type` and `fruits`. This is because the `IgxSelectItemComponent` has functionality that allows it to receive specific styling inside the drop-down list. This functionality comes inherited from the [_IgxDropDownItemComponent_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxdropdownitemcomponent.html). Then in your template file you can iterate over these objects and access their properties accordingly: + ```html @@ -257,7 +270,8 @@ Then in your template file you can iterate over these objects and access their p ``` -Another way to do it would be to simply pass in a collection of the items that we want to display to the [*ngForOf*](https://angular.io/api/common/NgForOf) directive: +Another way to do it would be to simply pass in a collection of the items that we want to display to the [_ngForOf_](https://angular.io/api/common/NgForOf) directive: + ```html @@ -267,18 +281,19 @@ Another way to do it would be to simply pass in a collection of the items that w ``` Since we are using two-way binding, your class should look something like this: + ```ts export class MyClass { public selected: string = "Apple"; } ``` -You may also notice that in the above sample we have a *prefix* on the input field, this is because `igx-select` supports both prefixes and suffixes. You can read more about them [*here*](input-group.md). -- The items' list default exapansion panel arrow uses `IgxSuffix` and it can be changed by the user. +You may also notice that in the above sample we have a _prefix_ on the input field, this is because `igx-select` supports both prefixes and suffixes. You can read more about them [_here_](input-group.md). +- The items' list default expansion panel arrow uses `IgxSuffix` and it can be changed by the user. - If more than one `IgxSuffix` is used, the expansion arrow will be displayed always last. ### Select With Custom Overlay Settings -With `igx-select` you are not bound to use any of the [*OverlaySettings*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html) that we provide, instead you may create settings of your own and pass them to it. +With `igx-select` you are not bound to use any of the [_OverlaySettings_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html) that we provide, instead you may create settings of your own and pass them to it.
    @@ -287,6 +302,7 @@ With `igx-select` you are not bound to use any of the [*OverlaySettings*](https: To do this you first define your template like so: + ```html @@ -294,9 +310,11 @@ To do this you first define your template like so: ``` + - Where the `overlaySettings` property is bound to your custom settings. Inside of your class you would have something along the lines of: + ```ts export class MyClass implements OnInit { @ViewChild(IgxSelectComponent) @@ -323,13 +341,15 @@ export class MyClass implements OnInit { } } ``` -You can see that we create a [*PositionSettings*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/positionsettings.html) object that is directly passed to our [*ConnectedPositioningStrategy*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/connectedpositioningstrategy.html), it is not required to do it, but since we want to define a custom positioning, we use them to override the strategy's default settings. -- You can set all settings inside of the [*ngOnInit*](https://angular.io/api/core/OnInit) hook and this will automatically affect your template upon the component's generation. +You can see that we create a [_PositionSettings_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/positionsettings.html) object that is directly passed to our [_ConnectedPositioningStrategy_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/connectedpositioningstrategy.html), it is not required to do it, but since we want to define a custom positioning, we use them to override the strategy's default settings. + +- You can set all settings inside of the [_ngOnInit_](https://angular.io/api/core/OnInit) hook and this will automatically affect your template upon the component's generation. > Note that you can also pass in a customized [OverlaySettings](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html) object to the `igx-select`'s open function. -With your tempalte looking like this: +With your template looking like this: + ```html @@ -339,7 +359,9 @@ With your tempalte looking like this: ``` + Your class should look something like this: + ```ts export class MyClass implements OnInit { /* -- */ @@ -353,9 +375,10 @@ export class MyClass implements OnInit { /* -- */ } ``` -- We should mention that if you pass the custom settings both as an argument in the `open` function as well as into the template, `igx-select` will use the ones provided *in the `open` function*. However, if you bind the settings to an internal event, such as `opening` or `opened` then `igx-select` will use the settings that are provided in the template. -## API Reference +- We should mention that if you pass the custom settings both as an argument in the `open` function as well as into the template, `igx-select` will use the ones provided _in the `open` function_. However, if you bind the settings to an internal event, such as `opening` or `opened` then `igx-select` will use the settings that are provided in the template. + +## API Reference [**IgxSelectComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxselectcomponent.html) [**IgxSelectItemComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxselectitemcomponent.html) [**IgxDropDownComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxdropdowncomponent.html) @@ -373,5 +396,5 @@ export class MyClass implements OnInit { Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/shadows.md b/docs/angular/src/content/kr/components/shadows.md index 4a121a2e89..8b4271b801 100644 --- a/docs/angular/src/content/kr/components/shadows.md +++ b/docs/angular/src/content/kr/components/shadows.md @@ -174,6 +174,7 @@ $myCard: card-theme( As you can see the shadow is produced according to the material guidelines. To change the shadows colors use theelevations function to override the defaults: + ```scss ... // Define the 3 elevation colors @@ -209,6 +210,7 @@ $mySpecialCard: card-theme( ``` You can also set box-shadow without taking advantage of theelevation function: + ```scss $myboringCard: card-theme( $resting-shadow: 0 10px 10px 10px #666 @@ -229,8 +231,8 @@ $myboringCard: card-theme( Here is The result from the above code snippets: - @@ -242,7 +244,7 @@ Here is The result from the above code snippets: ### API 참조 -* [ELEVATION]({environment:sassApiUrl}/elevations#function-elevation) -* [ELEVATIONS]({environment:sassApiUrl}/elevations#mixin-elevations) +- [ELEVATION]({environment:sassApiUrl}/elevations#function-elevation) +- [ELEVATIONS]({environment:sassApiUrl}/elevations#mixin-elevations) diff --git a/docs/angular/src/content/kr/components/simple-combo.md b/docs/angular/src/content/kr/components/simple-combo.md index e55deb4346..b2cce484d8 100644 --- a/docs/angular/src/content/kr/components/simple-combo.md +++ b/docs/angular/src/content/kr/components/simple-combo.md @@ -71,8 +71,8 @@ Our simple combobox is now bound to the array of cities. Since the simple combobox is bound to an array of complex data (i.e. objects), we need to specify a property that the control will use to handle the selected items. The control exposes two `@Input` properties - [valueKey]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html#valuekey) and [displayKey]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html#displaykey): - - `valueKey` - *Optional, recommended for object arrays* - Specifies which property of the data entries will be stored for the simple combobox's selection. If `valueKey` is omitted, the simple combobox value will use references to the data entries (i.e. the selection will be an array of entries from `igxSimpleCombo.data`). - - `displayKey` - *Required for object arrays* - Specifies which property will be used for the items' text. If no value is specified for `displayKey`, the simple combobox will use the specified `valueKey` (if any). +- `valueKey` - _Optional, recommended for object arrays_ - Specifies which property of the data entries will be stored for the simple combobox's selection. If `valueKey` is omitted, the simple combobox value will use references to the data entries (i.e. the selection will be an array of entries from `igxSimpleCombo.data`). +- `displayKey` - _Required for object arrays_ - Specifies which property will be used for the items' text. If no value is specified for `displayKey`, the simple combobox will use the specified `valueKey` (if any). In our case, we want the simple combobox to display the `name` of each city and the simple combobox value to store the `id` of each city. Therefore, we are providing these properties to the simple combobox's `displayKey` and `valueKey`, respectively: @@ -233,6 +233,7 @@ The API of simle combobox is used to get the selected item from one component an ``` ### Component Definition + ```typescript export class SimpleComboCascadingComponent implements core.OnInit { public selectedCountry: Country; @@ -275,6 +276,7 @@ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter ``` Following the simplest approach, we create a new theme that extends the [combo-theme]({environment:sassApiUrl}/themes#function-combo-theme) and accepts the `$search-separator-border-color` parameter: + ```scss $custom-simple-combo-theme: combo-theme( $empty-list-background: #1a5214 @@ -339,29 +341,29 @@ The last step is to include the component's theme. ## API References
    -* [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) Additional components and/or directives with relative APIs that were used: -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources
    -* [ComboBox Features](combo-features.md) -* [ComboBox Remote Binding](combo-remote.md) -* [ComboBox Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) +- [ComboBox Features](combo-features.md) +- [ComboBox Remote Binding](combo-remote.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/slider/slider-ticks.md b/docs/angular/src/content/kr/components/slider/slider-ticks.md index de19c0c39c..0f4d41b1a0 100644 --- a/docs/angular/src/content/kr/components/slider/slider-ticks.md +++ b/docs/angular/src/content/kr/components/slider/slider-ticks.md @@ -25,6 +25,7 @@ import { IgxSliderModule } from 'igniteui-angular'; }) export class AppModule {} ``` + #### Bottom Ticks Let’s start with something simple and enable slider **ticks** below the slider and show every **even** number within a particular sequence. @@ -42,8 +43,8 @@ public type = SliderType.RANGE; ``` - @@ -52,8 +53,8 @@ Let’s look at the ticks below the slider. Firstly the whole feature is enabled -#### Disable secondary ticks and rotate primary ones. -In the next sample all **secondary labels** are disabled and all **primary labels** rotated. +#### Disable secondary ticks and rotate primary ones +In the next sample all **secondary labels** are disabled and all **primary labels** rotated. ```html @@ -82,6 +84,7 @@ Just to make it more interesting the **value** has been two-way data-bound to tw
    ``` + ```typescript ... { public type = SliderType.RANGE: @@ -97,8 +100,8 @@ export class PriceRange { ``` - @@ -125,20 +128,21 @@ Let’s move on and see how the orientation of the **ticks** is changed as well ``` -The two buttons above are used just to control/update slider's **value**, but let's focus on the **ticks** manipulation. + +The two buttons above are used just to control/update slider's **value**, but let's focus on the **ticks** manipulation. ```typescript public ticksOrientation = TicksOrientation.Mirror; ``` - -The change of the orientation has come from [`ticksOrientation`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksorientation) input, which was changed from **Bottom**(default) to **Mirror**. This mirrors the visualization of the **ticks** and duplicates them at the top as well. +The change of the orientation has come from [`ticksOrientation`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksorientation) input, which was changed from **Bottom**(default) to **Mirror**. This mirrors the visualization of the **ticks** and duplicates them at the top as well. #### Top ticks with visible labels There is an edge case where **thumb label** is hidden intentionally, and it is when [`ticksOrientaion`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksorientation) is set to **Top** or **Mirror** and there are any visible **tick labels**. This prevents a bad user experience and overlap between the two labels. To gain a better view over that scenario let’s see the example below. @@ -151,13 +155,14 @@ There is an edge case where **thumb label** is hidden intentionally, and it is w [ticksOrientation]="ticksOreintation" > ``` + ```typescript public ticksOrientation = TicksOrientation.Top; ``` - @@ -174,14 +179,15 @@ The feature has been aligned with the **labels view** feature as well. Let's see [secondaryTicks]="3" > ``` + ```typescript public type: SliderType = SliderType.RANGE; public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"]; ``` - @@ -201,16 +207,17 @@ Lastly, we will see how we can provide a custom template for the **tick labels** ``` -Applying [`IgxTickLabelTemplateDirective`]({environment:angularApiUrl}/classes/igxticklabeltemplatedirective.html) to the `ng-template` gives as control over all **tick labels**. + +Applying [`IgxTickLabelTemplateDirective`]({environment:angularApiUrl}/classes/igxticklabeltemplatedirective.html) to the `ng-template` gives as control over all **tick labels**. > [!NOTE] > The [`context`]({environment:angularApiUrl}/classes/igxtickscomponent.html#context) executes per each tick. -Which means that it provides a reference to: - * each corresponding tick **value** - * If that tick is **primary**. - * **tick** index. - * And the [`labels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labels) collection if we have such one. +Which means that it provides a reference to: +- each corresponding tick **value** +- If that tick is **primary**. +- **tick** index. +- And the [`labels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labels) collection if we have such one. ```typescript public tickLabel(value, primary, index) { @@ -222,11 +229,11 @@ Which means that it provides a reference to: } ``` -From the **tackLabel** callback above, we can see that every **primary** tick **value** has been rounded. +From the **tackLabel** callback above, we can see that every **primary** tick **value** has been rounded. - @@ -234,16 +241,16 @@ From the **tackLabel** callback above, we can see that every **primary** tick ** ## API References
    -* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) -* [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) -* [SliderType]({environment:angularApiUrl}/enums/slidertype.html) -* [TicksOrientation]({environment:angularApiUrl}/enums/ticksorientation.html) -* [TickLabelsOrientation]({environment:angularApiUrl}/enums/ticklablesorientation.html) +- [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) +- [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) +- [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) +- [SliderType]({environment:angularApiUrl}/enums/slidertype.html) +- [TicksOrientation]({environment:angularApiUrl}/enums/ticksorientation.html) +- [TickLabelsOrientation]({environment:angularApiUrl}/enums/ticklablesorientation.html) -###Additional Resources +### Additional Resources -* [Slider overview](slider.md) +- [Slider overview](slider.md)
    Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/kr/components/slider/slider.md b/docs/angular/src/content/kr/components/slider/slider.md index b43654b4c1..0e752f9124 100644 --- a/docs/angular/src/content/kr/components/slider/slider.md +++ b/docs/angular/src/content/kr/components/slider/slider.md @@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Slider +## Slider

    The Ignite UI for Angular Slider component allows selection in a given range by moving the thumb along the track. The track can be defined as continuous or stepped and you can choose between single and range slider types.

    ### Slider Demo - @@ -21,7 +21,7 @@ _language: kr > [!NOTE] > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic. -###Usage +### Usage To get started with the Ignite UI for Angular Slider, let's first import the **IgxSliderModule** in our **app.module.ts** file: ```typescript @@ -38,7 +38,7 @@ import { IgxSliderModule } from 'igniteui-angular'; export class AppModule {} ``` -####Continuous Slider +#### Continuous Slider > [!WARNING] > `isContinuous` property has been deprecated, [`continuous`]({environment:angularApiUrl}/classes/igxslidercomponent.html#continuous) should be used instead. @@ -64,13 +64,13 @@ public volume = 20; If the sample is configured properly, dragging the slider thumb should update the label below and the slider value should be limited between the specified minimum and maximum values: - -####Discrete Slider +#### Discrete Slider By default, the Ignite UI for Angular Slider is discrete. Discrete slider provides visualization of the current value with a numeric label (bubble). You can use a discrete slider with predefined steps to track only meaningful values for the user. For example, the discrete slider can visualize rating from 0 to 5 or completion percentage from 0% to 100%. @@ -113,13 +113,13 @@ class Task { If the sample is configured properly, dragging the slider thumb should update the input value and modifying the input value should update the slider value. - -####Range Slider +#### Range Slider To visualize a range filter for example, use a range slider. To achieve this, set the slider [`type`]({environment:angularApiUrl}/classes/igxslidercomponent.html#type) to [`RANGE`]({environment:angularApiUrl}/enums/slidertype.html#range). Next, we bind the slider value to an object of type PriceRange. That object has two properties for lower and upper range values. ```html @@ -147,8 +147,8 @@ class PriceRange { ``` - @@ -162,8 +162,8 @@ In some cases, values near to the minimum and maximum are not appropriate. You c ``` - @@ -207,11 +207,12 @@ public updatePriceRange(event) { } ``` + If the sample is configured properly, the final result should look like that: - @@ -219,17 +220,17 @@ If the sample is configured properly, the final result should look like that:
    #### Labels mode -We've seen only numbers in the thumbs so far, although there is another approach that you could use in order to present information - by using an array of primitive values. +We've seen only numbers in the thumbs so far, although there is another approach that you could use in order to present information - by using an array of primitive values. >[!NOTE] > Your array of primitive values should contains at least two values, otherwise `labelsView` won't be enabled. Once we have the definition that corresponds to the preceding rule, we are ready to give it to the `labels` **input** property, which would handle our data by spreading it equally over the `track`. Now, label values represent every primitive value we've defined in our collection. They could be accessed at any time through the API by requesting either [lowerLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerLabel) or [upperLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperLabel). >[!NOTE] -> Please take into account the fact that when [`labelsView`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labelsviewenabled) is enabled, your control over the [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxvalue), [`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minvalue) and [`step`]({environment:angularApiUrl}/classes/igxslidercomponent.html#step) inputs will be taken. +> Please take into account the fact that when [`labelsView`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labelsviewenabled) is enabled, your control over the [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxvalue), [`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minvalue) and [`step`]({environment:angularApiUrl}/classes/igxslidercomponent.html#step) inputs will be taken. Another important factor is the way that the `slider` handles the update process when `labelsView` is enabled. -It simply operates with the `index(es)` of the colleciton, which respectively means that the `value`, `lowerBound` and `upperBound` **properties** control the `track` by following/setting them (`index(es)`). +It simply operates with the `index(es)` of the collection, which respectively means that the `value`, `lowerBound` and `upperBound` **properties** control the `track` by following/setting them (`index(es)`). ```html @@ -250,15 +251,15 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd ``` - As we see from the sample above, setting `boundaries` is still a valid operation. Addressing [`lowerBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerbound) and [`upperBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperbound), limits the range you can slide through. -#### lables templating +#### labels templating During the showcase above, we've intentionally shown how we can provide our custom `label` template, by using both [igxSliderThumbFrom]({environment:angularApiUrl}/interfaces/igxSliderThumbFrom.html) and [igxSliderThumbTo]({environment:angularApiUrl}/interfaces/igxSliderThumbTo.html) directives. Intuitively we can assume that [igxSliderThumbFrom]({environment:angularApiUrl}/interfaces/igxSliderThumbFrom.html) corresponds to the [lowerLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerLabel) and [igxSliderThumbTo]({environment:angularApiUrl}/interfaces/igxSliderThumbTo.html) to the [upperLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperLabel).
    The [context]({environment:angularApiUrl}/classes/igxslidercomponent.html#context) here gives us implicitly a reference to the `value` **input** property and explicitly a reference to the `labels` **input** if `labelsView` is enabled. @@ -274,14 +275,14 @@ The [context]({environment:angularApiUrl}/classes/igxslidercomponent.html#contex ## API References
    -* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) -* [SliderType]({environment:angularApiUrl}/enums/slidertype.html) -* [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) +- [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) +- [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) +- [SliderType]({environment:angularApiUrl}/enums/slidertype.html) +- [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) -###Additional Resources +### Additional Resources -* [Slider ticks](slider-ticks.md) +- [Slider ticks](slider-ticks.md)
    diff --git a/docs/angular/src/content/kr/components/snackbar.md b/docs/angular/src/content/kr/components/snackbar.md index 1eca5882b0..37136cc9af 100644 --- a/docs/angular/src/content/kr/components/snackbar.md +++ b/docs/angular/src/content/kr/components/snackbar.md @@ -4,14 +4,14 @@ description: Easily integrate a brief, single-line message within your mobile an keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Snackbar component, Angular Snackbar control _language: kr --- -##Snackbar +## Snackbar

    The Ignite UI for Angular Snack Bar component provides feedback about an operation with a single-line message, which can include a link to an action such as Undo. The Snack Bar message appears above all other screen elements, located at the bottom of a mobile device screen or at the lower left of larger device screens.

    ### Snackbar Demo - @@ -36,6 +36,7 @@ import { IgxSnackbarModule } from 'igniteui-angular'; }) export class AppModule {} ``` + #### Show Snackbar In order to display the snackbar component, use its [`show()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#show) method and call it on a button click. @@ -148,8 +149,8 @@ We can also customize the content of the Snackbar to display more complex elemen As a result, a message and three loading dots appear in the snackbar. - @@ -230,8 +231,8 @@ public restore() { ``` - @@ -241,13 +242,13 @@ public restore() { ## API References In this article we learned how to use and configure the [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html). For more details in regards its API, take a look at the links below: -* [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) +- [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) Styles: -* [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/themes#function-snackbar-theme) +- [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/themes#function-snackbar-theme) -###Additional Resources +### Additional Resources
    Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/kr/components/sparkline.md b/docs/angular/src/content/kr/components/sparkline.md index e3ed9ee7a0..67a4c865d3 100644 --- a/docs/angular/src/content/kr/components/sparkline.md +++ b/docs/angular/src/content/kr/components/sparkline.md @@ -26,8 +26,8 @@ The sparkline control has several visual elements and corresponding features tha In order to use the Ignite UI for Angular sparkline component, the following packages need to be installed: -- **npm install --save igniteui-angular-core** -- **npm install --save igniteui-angular-charts** +- **npm install --save igniteui-angular-core** +- **npm install --save igniteui-angular-charts** The sparkline component requires the import of the following modules: @@ -53,10 +53,10 @@ export class AppModule {} The Ignite UI for Angular sparkline component supports the following types of sparklines: -- `Area` -- [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) -- `Line` -- `WinLoss` +- `Area` +- [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcolumncomponent.html) +- `Line` +- `WinLoss` The type is defined by setting the `DisplayType` property. If the `DisplayType` property is not specified, then by default, the `Line` type is displayed. @@ -79,12 +79,12 @@ The Ignite UI for Angular sparkline component allows you to show markers as circ Markers in the sparkline can be placed in any combination of the following locations: -- `All`: Display markers for all data points in the sparkline. -- `Low`: Display markers on the data point of the lowest value. If there are multiple points at the lowest value, it will show on each point with that value. -- `High`: Display markers on the data point of the highest value. If there are multiple points at the highest value, it will show on each point with that value. -- `First`: Display a marker on the first data point in the sparkline. -- `Last`: Display a marker on the last data point in the sparkline. -- `Negative`: Display markers on the negative data points plotted in the sparkline. +- `All`: Display markers for all data points in the sparkline. +- `Low`: Display markers on the data point of the lowest value. If there are multiple points at the lowest value, it will show on each point with that value. +- `High`: Display markers on the data point of the highest value. If there are multiple points at the highest value, it will show on each point with that value. +- `First`: Display a marker on the first data point in the sparkline. +- `Last`: Display a marker on the last data point in the sparkline. +- `Negative`: Display markers on the negative data points plotted in the sparkline. All of the markers mentioned above can be customized using the related marker types' property in aspects of color, visibility, and size. For example, the `Low` markers above will have properties `LowMarkerBrush`, `LowMarkerVisibility`, and `LowMarkerSize`. @@ -118,9 +118,9 @@ The normal range feature of the Ignite UI for Angular sparkline component is a h The normal range can be wider than the maximum data point or beyond, and it can also be as thin as the sparkline's `Line` display type, to serve as a threshold indicator, for instance. The width of the normal range is determined by the following three properties, which serve as the minimum settings required for displaying the normal range: -- `NormalRangeVisibility`: Whether or not the normal range is visible. -- `NormalRangeMaximum`: The bottom border of the range. -- `NormalRangeMinimum`: The top border of the range. +- `NormalRangeVisibility`: Whether or not the normal range is visible. +- `NormalRangeMaximum`: The bottom border of the range. +- `NormalRangeMinimum`: The top border of the range. By default, the normal range is not displayed. When enabled, the normal range shows up with a light gray color appearance, which can also be configured using the `NormalRangeFill` property. @@ -153,20 +153,20 @@ Trendlines can only be displayed one at a time and by default, the trendline is A list of supported trendlines can be found below: -- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none) -- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit) -- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage) -- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage) -- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit) -- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit) -- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit) -- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage) -- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit) -- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit) -- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit) -- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit) -- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage) -- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage) +- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none) +- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit) +- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage) +- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage) +- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit) +- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit) +- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit) +- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage) +- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit) +- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit) +- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit) +- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit) +- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage) +- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage) The following code example shows how to enable a trendline in the Ignite UI for Angular sparkline component: diff --git a/docs/angular/src/content/kr/components/splitter.md b/docs/angular/src/content/kr/components/splitter.md index 4bc62c93f7..c7b47e5271 100644 --- a/docs/angular/src/content/kr/components/splitter.md +++ b/docs/angular/src/content/kr/components/splitter.md @@ -10,8 +10,8 @@ The Ignite UI for Angular Splitter component provides the ability to create layo ### Demo - @@ -21,6 +21,7 @@ The Ignite UI for Angular Splitter component provides the ability to create layo ### Usage To start using the **igxSplitter** component, you first need to import the **IgxSplitterModule** in your **app.module**: + ```typescript // app.module.ts ... @@ -35,6 +36,7 @@ export class AppModule {} ``` After that you can add the markup for your component: + ```html @@ -49,15 +51,18 @@ After that you can add the markup for your component: ``` + **igxSplitter** is initialized with the **igx-splitter** tag. Multiple splitter panes can be defined under a single **igx-splitter** component. The content of the pane is templatable and will be rendered in its own resizable container. #### Orientation The splitter can be vertical or horizontal, which is defined by the [`type`]({environment:angularApiUrl}/classes/igxsplittercomponent.html#type) input. The default value is Vertical. + ```typescript public type = SplitterType.Horizontal; ``` + ```html @@ -72,6 +77,7 @@ public type = SplitterType.Horizontal; #### Configuring panes The **igxSplitterPane** component contains several input properties. You can set the initial pane size by using the [`size`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#size) input property. The [`minSize`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#minSize) and [`maxSize`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#maxSize) input properties can be used to set the minimum or maximum allowed size of the pane. Resizing beyond `minSize` and `maxSize` is not allowed. + ```html @@ -82,7 +88,9 @@ The **igxSplitterPane** component contains several input properties. You can set ``` + You can also forbid the resizing of a pane by setting its [`resizable`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#resizable) input property to **false**. + ```html @@ -97,10 +105,12 @@ You can also forbid the resizing of a pane by setting its [`resizable`]({environ #### Nested panes You can nest splitter components to create a more complex layout inside a splitter pane. + ```typescript public typeHorizontal = SplitterType.Horizontal; public typeVertical = SplitterType.Vertical; ``` + ```html @@ -128,8 +138,8 @@ public typeVertical = SplitterType.Vertical; #### Demo - @@ -153,7 +163,7 @@ To get started with styling the **igxSplitter** component, you need to import th ```scss @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` You can change the default styles of the splitter by creating a new theme that extends the [`splitter-theme`]({environment:sassApiUrl}/themes#function-splitter-theme). @@ -170,7 +180,7 @@ $splitter-theme: splitter-theme( ); ``` -#### Using CSS Variables +#### Using CSS Variables The next step is to pass the custom splitter theme: @@ -180,7 +190,7 @@ The next step is to pass the custom splitter theme: #### Using Theme Overrides -In order to style components for Internet Explorer 11, we have to use different approach, since it doesn't support CSS variables. +In order to style components for Internet Explorer 11, we have to use different approach, since it doesn't support CSS variables. If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. On the other side, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`: @@ -197,8 +207,8 @@ If the component is using an [`Emulated`](themes/sass/component-themes.md#view-e This is the final result from applying your new theme. - @@ -206,10 +216,10 @@ This is the final result from applying your new theme. ## API References
    -* [IgxSplitterComponent]({environment:angularApiUrl}/classes/igxsplittercomponent.html) -* [IgxSplitterPaneComponent]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html) -* [SplitterType]({environment:angularApiUrl}/enums/splittertype.html) -* [IgxSplitterComponent Styles]({environment:sassApiUrl}/themes#function-splitter-theme) +- [IgxSplitterComponent]({environment:angularApiUrl}/classes/igxsplittercomponent.html) +- [IgxSplitterPaneComponent]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html) +- [SplitterType]({environment:angularApiUrl}/enums/splittertype.html) +- [IgxSplitterComponent Styles]({environment:sassApiUrl}/themes#function-splitter-theme)
    Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/kr/components/spreadsheet-configuring.md b/docs/angular/src/content/kr/components/spreadsheet-configuring.md index 21a8d542a0..543d5729a7 100644 --- a/docs/angular/src/content/kr/components/spreadsheet-configuring.md +++ b/docs/angular/src/content/kr/components/spreadsheet-configuring.md @@ -123,7 +123,7 @@ this.spreadsheet.activeWorksheet.unprotect(); ## Configuring Selection -The [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) control allows you to configure the type of selection allowed in the control then modifier keys (*SHIFT* or CTRL) are pressed by the user. This is done by setting the [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#selectionMode) property of the spreadsheet to one of the following values: +The [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) control allows you to configure the type of selection allowed in the control then modifier keys (_SHIFT_ or CTRL) are pressed by the user. This is done by setting the [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#selectionMode) property of the spreadsheet to one of the following values: - `AddToSelection`: New cell ranges are added to the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) collection without needing to hold down the CTRL key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing SHIFT + F8. - `ExtendSelection`: The selection range in the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. diff --git a/docs/angular/src/content/kr/components/spreadsheet_activation.md b/docs/angular/src/content/kr/components/spreadsheet_activation.md index 67857c4d6b..8c04411f4a 100644 --- a/docs/angular/src/content/kr/components/spreadsheet_activation.md +++ b/docs/angular/src/content/kr/components/spreadsheet_activation.md @@ -23,9 +23,9 @@ The [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-an The activation of the [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html) control is split up between the cells, panes, and worksheets of the current [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#workbook) of the spreadsheet. The three "active" properties are described below: -- [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#activecell): Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of [`SpreadsheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetcell.html) and pass in information about that cell, such as the column and row or the string address of the cell. -- [`activePane`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#activepane): Returns the active pane in the currently active worksheet of the spreadsheet control. -- [`activeWorksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#activeworksheet): Returns or sets the active worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#workbook) of the spreadsheet control. This can be set by setting it to an existing worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#workbook) attached to the spreadsheet. +- [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#activecell): Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of [`SpreadsheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetcell.html) and pass in information about that cell, such as the column and row or the string address of the cell. +- [`activePane`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#activepane): Returns the active pane in the currently active worksheet of the spreadsheet control. +- [`activeWorksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#activeworksheet): Returns or sets the active worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#workbook) of the spreadsheet control. This can be set by setting it to an existing worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#workbook) attached to the spreadsheet. The following code snippet shows setting activation of the cell and worksheet in the [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html) control: diff --git a/docs/angular/src/content/kr/components/spreadsheet_chart_adapter.md b/docs/angular/src/content/kr/components/spreadsheet_chart_adapter.md index af64efa728..cbe164dc27 100644 --- a/docs/angular/src/content/kr/components/spreadsheet_chart_adapter.md +++ b/docs/angular/src/content/kr/components/spreadsheet_chart_adapter.md @@ -26,57 +26,57 @@ In order to add a WorksheetChart to a worksheet, you must use the `addChart` met Here are the steps by step description : -1. Add the SpreadsheetChartAdapterModule reference to your project -2. Create an instance of a SpreadsheetChartAdapter class assigning it to the Spreadsheet -3. Run your app and load a worksheet containing a chart. +1. Add the SpreadsheetChartAdapterModule reference to your project +2. Create an instance of a SpreadsheetChartAdapter class assigning it to the Spreadsheet +3. Run your app and load a worksheet containing a chart. ## Supported Charts Types There are over 35 chart types supported by the Spreadsheet ChartAdapters including, Line, Area, Column, and Doughnut. See the full list here: -- Column Charts - - Clustered column - - Stacked column - - 100% stacked column -- Line Charts - - Line - - Line with Markers - - Stacked line - - Stacked line with markers - - 100% stacked line - - 100% stacked line with markers -- Pie Charts -- Donut Charts -- Bar Charts - - Clustered bar - - Stacked bar - - 100% stacked bar - - Area Charts - - Area - - Stacked area - - 100% stacked area -- XY (Scatter) and Bubble Charts - - Scatter (with Marker only) - - Scatter with smooth lines - - Scatter with smooth lines and markers - - Scatter with straight lines - - Scatter with straight lines and markers - - Bubble (without effects) - - Bubble (without effects) -- Stock Charts - - High-low-close - - Open-high-low-close - - Volume-high-low-close - - Volume-open-high-low-close -- Radar Charts - - Radar without markers - - Radar with markers - - Filled Radar -- Combo Charts - - Column and line chart sharing xAxis - - Column and line chart and 2nd xAxis - - Staked Area and Column - - Custom Combination +- Column Charts + - Clustered column + - Stacked column + - 100% stacked column +- Line Charts + - Line + - Line with Markers + - Stacked line + - Stacked line with markers + - 100% stacked line + - 100% stacked line with markers +- Pie Charts +- Donut Charts +- Bar Charts + - Clustered bar + - Stacked bar + - 100% stacked bar + - Area Charts + - Area + - Stacked area + - 100% stacked area +- XY (Scatter) and Bubble Charts + - Scatter (with Marker only) + - Scatter with smooth lines + - Scatter with smooth lines and markers + - Scatter with straight lines + - Scatter with straight lines and markers + - Bubble (without effects) + - Bubble (without effects) +- Stock Charts + - High-low-close + - Open-high-low-close + - Volume-high-low-close + - Volume-open-high-low-close +- Radar Charts + - Radar without markers + - Radar with markers + - Filled Radar +- Combo Charts + - Column and line chart sharing xAxis + - Column and line chart and 2nd xAxis + - Staked Area and Column + - Custom Combination ## Dependencies diff --git a/docs/angular/src/content/kr/components/spreadsheet_conditonal_formatting.md b/docs/angular/src/content/kr/components/spreadsheet_conditonal_formatting.md index 1d6471d0cf..a445fd85d8 100644 --- a/docs/angular/src/content/kr/components/spreadsheet_conditonal_formatting.md +++ b/docs/angular/src/content/kr/components/spreadsheet_conditonal_formatting.md @@ -23,21 +23,21 @@ When loading a pre-existing workbook from Excel, the formats will be preserved w The following lists the supported conditional formats in the [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html) control: -- [`AverageConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/averageconditionalformat.html): Added using the `AddAverageCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is above or below the average or standard deviation for the associated range. -- [`BlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/blanksconditionalformat.html): Added using the `AddBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is not set. -- [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/colorscaleconditionalformat.html): Added using the `AddColorScaleCondition` method, this conditional format exposes properties which control the coloring of a worksheet cell based on the cell’s value as relative to minimum, midpoint, and maximum threshold values. -- [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/databarconditionalformat.html): Added using the `AddDataBarCondition` method, this conditional format exposes properties which display data bars in a worksheet cell based on the cell’s value as relative to the associated range of values. -- [`DateTimeConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/datetimeconditionalformat.html): Added using the `AddDateTimeCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s date value falls within a given range of time. -- [`DuplicateConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/duplicateconditionalformat.html): Added using the `AddDuplicateCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique or duplicated across the associated range. -- [`ErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/errorsconditionalformat.html): Added using the `AddErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. -- [`FormulaConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/formulaconditionalformat.html): Added using the `AddFormulaCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a formula. -- [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/iconsetconditionalformat.html): Added using the `AddIconSetCondition` method, this conditional format exposes properties which display icons in a worksheet cell based on the cell’s value as relative to threshold values. -- [`NoBlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/noblanksconditionalformat.html): Added using the `AddNoBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is set. -- [`NoErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/noerrorsconditionalformat.html): Added using the `AddNoErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. -- [`OperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/operatorconditionalformat.html): Added using the `AddOperatorCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a logical operator. -- [`RankConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/rankconditionalformat.html): Added using the `AddRankCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is within the top of bottom rank of values across the associated range. -- [`TextOperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/textoperatorconditionalformat.html): Added using the `AddTextCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s text value meets the criteria defined by a string and a [`FormatConditionTextOperator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/formatconditiontextoperator.html) value as placed in the `AddTextCondition` method’s parameters. -- [`UniqueConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/uniqueconditionalformat.html): Added using the `AddUniqueCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique across the associated range. +- [`AverageConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/averageconditionalformat.html): Added using the `AddAverageCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is above or below the average or standard deviation for the associated range. +- [`BlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/blanksconditionalformat.html): Added using the `AddBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is not set. +- [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/colorscaleconditionalformat.html): Added using the `AddColorScaleCondition` method, this conditional format exposes properties which control the coloring of a worksheet cell based on the cell’s value as relative to minimum, midpoint, and maximum threshold values. +- [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/databarconditionalformat.html): Added using the `AddDataBarCondition` method, this conditional format exposes properties which display data bars in a worksheet cell based on the cell’s value as relative to the associated range of values. +- [`DateTimeConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/datetimeconditionalformat.html): Added using the `AddDateTimeCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s date value falls within a given range of time. +- [`DuplicateConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/duplicateconditionalformat.html): Added using the `AddDuplicateCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique or duplicated across the associated range. +- [`ErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/errorsconditionalformat.html): Added using the `AddErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. +- [`FormulaConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/formulaconditionalformat.html): Added using the `AddFormulaCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a formula. +- [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/iconsetconditionalformat.html): Added using the `AddIconSetCondition` method, this conditional format exposes properties which display icons in a worksheet cell based on the cell’s value as relative to threshold values. +- [`NoBlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/noblanksconditionalformat.html): Added using the `AddNoBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is set. +- [`NoErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/noerrorsconditionalformat.html): Added using the `AddNoErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. +- [`OperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/operatorconditionalformat.html): Added using the `AddOperatorCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a logical operator. +- [`RankConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/rankconditionalformat.html): Added using the `AddRankCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is within the top of bottom rank of values across the associated range. +- [`TextOperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/textoperatorconditionalformat.html): Added using the `AddTextCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s text value meets the criteria defined by a string and a [`FormatConditionTextOperator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/formatconditiontextoperator.html) value as placed in the `AddTextCondition` method’s parameters. +- [`UniqueConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/uniqueconditionalformat.html): Added using the `AddUniqueCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique across the associated range. ## Dependencies diff --git a/docs/angular/src/content/kr/components/spreadsheet_configuring.md b/docs/angular/src/content/kr/components/spreadsheet_configuring.md index 83157458ec..6d003d19d6 100644 --- a/docs/angular/src/content/kr/components/spreadsheet_configuring.md +++ b/docs/angular/src/content/kr/components/spreadsheet_configuring.md @@ -123,9 +123,9 @@ this.spreadsheet.activeWorksheet.unprotect(); The [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html) control allows you to configure the type of selection allowed in the control then modifier keys (**Shift** or **Ctrl**) are pressed by the user. This is done by setting the [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#selectionmode) property of the spreadsheet to one of the following values: -- `AddToSelection`: New cell ranges are added to the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html#cellranges) collection without needing to hold down the ctrl key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing Shift+F8. -- `ExtendSelection`: The selection range in the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html#cellranges) collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. -- `Normal`: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the Ctrl key and using the mouse and one may alter the selection range containing the active cell by holding the Shift key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys. +- `AddToSelection`: New cell ranges are added to the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html#cellranges) collection without needing to hold down the ctrl key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing Shift+F8. +- `ExtendSelection`: The selection range in the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html#cellranges) collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. +- `Normal`: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the Ctrl key and using the mouse and one may alter the selection range containing the active cell by holding the Shift key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys. The [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/spreadsheetselection.html) object mentioned in the descriptions above can be obtained by using the [`activeSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html#activeselection) property of the [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxspreadsheetcomponent.html) control. diff --git a/docs/angular/src/content/kr/components/spreadsheet_overview.md b/docs/angular/src/content/kr/components/spreadsheet_overview.md index f16e7f3014..d34c5d4914 100644 --- a/docs/angular/src/content/kr/components/spreadsheet_overview.md +++ b/docs/angular/src/content/kr/components/spreadsheet_overview.md @@ -23,9 +23,9 @@ The Angular Spreadsheet is a Angular component that allows visualizing and editi When installing the spreadsheet package, the core and excel package must also be installed. -- **npm install --save igniteui-angular-core** -- **npm install --save igniteui-angular-excel** -- **npm install --save igniteui-angular-spreadsheet** +- **npm install --save igniteui-angular-core** +- **npm install --save igniteui-angular-excel** +- **npm install --save igniteui-angular-spreadsheet** ## Required Modules diff --git a/docs/angular/src/content/kr/components/switch.md b/docs/angular/src/content/kr/components/switch.md index 19455d50b1..be6ee60f51 100644 --- a/docs/angular/src/content/kr/components/switch.md +++ b/docs/angular/src/content/kr/components/switch.md @@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Switch +## Switch

    The Ignite UI for Angular Switch component is a binary choice selection component that behaves similarly to the switch component in iOS.

    ### Switch Demo - @@ -65,6 +65,7 @@ Let's enhance the code above by binding the switch properties to some data. Say, ]; ``` + Enhance the component template by adding a switch for each setting and then binding the corresponding property: ```html @@ -74,6 +75,7 @@ Enhance the component template by adding a switch for each setting and then bind {{ setting.name }} ``` + The final result would be something like that:
    @@ -83,13 +85,13 @@ The final result would be something like that: ## API References
    -* [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) -* [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme) +- [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) +- [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme) -###Additional Resources +### Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/tabbar.md b/docs/angular/src/content/kr/components/tabbar.md index d4d1858f17..a22d0e9d2d 100644 --- a/docs/angular/src/content/kr/components/tabbar.md +++ b/docs/angular/src/content/kr/components/tabbar.md @@ -16,8 +16,8 @@ _language: kr ### Bottom Navigation Demo - @@ -51,11 +51,12 @@ Then, modify the component's template to include the Bottom Navigation and add t This is Tab 3 content. ``` + If all went well, you should see the following in your browser: - @@ -155,8 +156,8 @@ Finally add the CSS classes used by the DIV and SPAN elements of the template to After these modifications our Bottom Navigation should look similar to this: - @@ -342,19 +343,19 @@ You can see the result of the code above at the beginning of this article in the ## API References
    -* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxBottomNavComponent]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) -* [IgxBottomNavComponent Styles]({environment:sassApiUrl}/themes#function-bottom-nav-theme) -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) -* [IgxTabComponent]({environment:angularApiUrl}/classes/igxtabcomponent.html) -* [IgxTabPanelComponent]({environment:angularApiUrl}/classes/igxtabpanelcomponent.html) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxBottomNavComponent]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) +- [IgxBottomNavComponent Styles]({environment:sassApiUrl}/themes#function-bottom-nav-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) +- [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) +- [IgxTabComponent]({environment:angularApiUrl}/classes/igxtabcomponent.html) +- [IgxTabPanelComponent]({environment:angularApiUrl}/classes/igxtabpanelcomponent.html) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/tabs.md b/docs/angular/src/content/kr/components/tabs.md index 4c086f59af..69728c9b74 100644 --- a/docs/angular/src/content/kr/components/tabs.md +++ b/docs/angular/src/content/kr/components/tabs.md @@ -11,8 +11,8 @@ The [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabscomponent.html) comp ### Tabs Demo - @@ -54,8 +54,8 @@ Then, specify several tabs groups with [`label`]({environment:angularApiUrl}/cla If the sample is configured properly, the final result should look like that: - @@ -65,7 +65,7 @@ If the sample is configured properly, the final result should look like that: ### Tabs Types There are two types of tabs. Set the [`tabsType`]({environment:angularApiUrl}/classes/igxtabscomponent.html#tabstype) input to choose between [`fixed`]({environment:angularApiUrl}/enums/tabstype.html#fixed) and [`contentfit`]({environment:angularApiUrl}/enums/tabstype.html#contentfit) tabs. - **Content-fit tabs** (default): the width of the tab header depends on the content (label, icon, both) and all tabs have equal padding. -Nevertheless what type of tabs you have chosen, the tab header width is limited by the specified min and max width. +Nevertheless what type of tabs you have chosen, the tab header width is limited by the specified min and max width. - **Fixed tabs**: all tab headers are with equal width and fit in the tabs container. If the provided space is not enough for all items, scroll buttons are displayed. ```html @@ -97,8 +97,8 @@ Nevertheless what type of tabs you have chosen, the tab header width is limited ``` - @@ -156,8 +156,8 @@ First add the Material+Icons import in your 'styles.css' file in the main applic If the sample is configured properly, the tabs should look like the following example: - @@ -181,11 +181,11 @@ If changing the tabs' labels and icons is not enough, you can also create your o ### Using Tabs and Routing -The following examples demonstrate sample usage of the tabs component and basic routing scenarios. You can learn more about Angular Routing & Navigation here. +The following examples demonstrate sample usage of the tabs component and basic routing scenarios. You can learn more about Angular Routing & Navigation here. #### Using igxTab, routerLink Directives and Single router-outlet -In order to implement basic routing with [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabscomponent.html), you can re-template the igx-tabs item header using the [`igxTab`]({environment:angularApiUrl}/classes/igxtabitemtemplatedirective.html) directive and provide links via `routerLink` in `ng-template`. Views are switched and displayed after a single `router-outlet` placed outside the tabs component. Note that `ng-template` content overides the default tabs headers style. +In order to implement basic routing with [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabscomponent.html), you can re-template the igx-tabs item header using the [`igxTab`]({environment:angularApiUrl}/classes/igxtabitemtemplatedirective.html) directive and provide links via `routerLink` in `ng-template`. Views are switched and displayed after a single `router-outlet` placed outside the tabs component. Note that `ng-template` content overrides the default tabs headers style. ```html @@ -223,6 +223,7 @@ this.routerLinks = [ }, ]; ``` + Declare all needed route definitions that map URL path to a specific component. All available child components with their URL paths are listed in a separate routing module named tabs.routing.module.ts which is imported in the main routing module named app.routing.module.ts. Configure the router via the RouterModule.forChild method. ```typescript @@ -245,6 +246,7 @@ const routes: Routes = [ }) export class TabsRoutingModule { } ``` + Configure the main router using RouterModule.forRoot method. ```typescript @@ -287,8 +289,8 @@ public ngOnInit() { ``` - @@ -353,6 +355,7 @@ public navigate(eventArgs) { } } ``` + Declare all needed route definitions that map URL path to a specific component: ```typescript @@ -378,8 +381,8 @@ const routes: Routes = [ ``` - @@ -387,19 +390,19 @@ const routes: Routes = [ ## API References
    -* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxCardComponent]({environment:angularApiUrl}/classes/igxcardcomponent.html) -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) -* [IgxTabsComponent]({environment:angularApiUrl}/classes/igxtabscomponent.html) -* [IgxTabsComponent Styles]({environment:sassApiUrl}/themes#function-tabs-theme) -* [IgxTabsGroupComponent]({environment:angularApiUrl}/classes/igxtabsgroupcomponent.html) -* [IgxTabItemComponent]({environment:angularApiUrl}/classes/igxtabitemcomponent.html) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxCardComponent]({environment:angularApiUrl}/classes/igxcardcomponent.html) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) +- [IgxTabsComponent]({environment:angularApiUrl}/classes/igxtabscomponent.html) +- [IgxTabsComponent Styles]({environment:sassApiUrl}/themes#function-tabs-theme) +- [IgxTabsGroupComponent]({environment:angularApiUrl}/classes/igxtabsgroupcomponent.html) +- [IgxTabItemComponent]({environment:angularApiUrl}/classes/igxtabitemcomponent.html) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/texthighlight.md b/docs/angular/src/content/kr/components/texthighlight.md index 96cb2cc40b..4ffe414b90 100644 --- a/docs/angular/src/content/kr/components/texthighlight.md +++ b/docs/angular/src/content/kr/components/texthighlight.md @@ -11,8 +11,8 @@ The [`IgxTextHighlight`]({environment:angularApiUrl}/classes/igxtexthighlightdir ### TextHighlight Demo - @@ -83,6 +83,7 @@ Then, lets create a search box which we can use to highlight different parts of
    ``` + Then, we will add a paragraph with text and the IgxTextHighlight directive. Note that, since we need to bind the value input to the text in the paragraph, we will also use interpolation for the paragraph's text. The column, row and page inputs are useful when you have multiple containers and can be left at 0 for our example. Another noteworthy thing is that the search container (in our case the paragraph element) needs to be the only child in its parent container and because of this we need the surrounding div element. ```html @@ -177,8 +178,8 @@ Then we need to add the following methods which will allow the user to apply the If the sample is configured properly, the final result should look like that: - @@ -206,6 +207,7 @@ The [`igxTextHighlight`]({environment:angularApiUrl}/classes/igxtexthighlightdir {{secondParagraph}}
    ``` + Then in the .ts file we have the firstParagraph and secondParagraph fields, which are bound to the respective value inputs of the text highlight directives. Also we will now use ViewChildren instead of ViewChild to get all the highlights in our template. ```typescript @@ -216,6 +218,7 @@ Then in the .ts file we have the firstParagraph and secondParagraph fields, whic @ViewChildren(IgxTextHighlightDirective) public highlights; ``` + All the rest of the code in the .ts file is identical to the single container example with the exception of the find method. Changes to this method are necessary since we now have multiple containers, but the code there can be used regardless of the number of TextHighlight directives you have on your page. ```typescript @@ -262,8 +265,8 @@ All the rest of the code in the .ts file is identical to the single container ex ``` - @@ -273,19 +276,19 @@ All the rest of the code in the .ts file is identical to the single container ex ### API and Style References For more detailed information regarding the TextHighlight directive's API, refer to the following link: -* [`IgxTextHighlight API`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) +- [`IgxTextHighlight API`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) Additional components that were used: -* [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/themes#function-input-group-theme) +- [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/themes#function-input-group-theme)
    ## Additional Resources -* [Grid Search](grid/search.md) +- [Grid Search](grid/search.md)
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/themes/component-themes.md b/docs/angular/src/content/kr/components/themes/component-themes.md index 558af9fbf7..48119a594f 100644 --- a/docs/angular/src/content/kr/components/themes/component-themes.md +++ b/docs/angular/src/content/kr/components/themes/component-themes.md @@ -12,7 +12,7 @@ _language: kr ### Overview
    -Before we dig deep into how you can create component-level themes, let's take a few moments to talk about how Ignite UI for Angular approaches component theming. Because we want to be able to support older browsers, like IE11, we have two completely different approaches for theming components. +Before we dig deep into how you can create component-level themes, let's take a few moments to talk about how Ignite UI for Angular approaches component theming. Because we want to be able to support older browsers, like IE11, we have two completely different approaches for theming components. - The first approach is to create a new set of CSS rules that overwrite any previously declared CSS rules for a specific component. This approach is pretty straight-forward, and it is the only way we can provide support for older browser, albeit it is not ideal as it adds a lot of additional CSS rules to the generated CSS theme. - The second approach is to style component instances using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). By using CSS variables we gain the ability to create component themes without replicating their styles over and over again. Also, this approach allows us to modify the value of the CSS variables at runtime. @@ -25,10 +25,10 @@ We'll take a look at how these approaches work in practice, and how to use one i There are several parts to a component theme: - **The component theme function** - A Sass function that normalizes the passed arguments and produces a theme to be consumed by a component mixin. -- **The component mixin** - A Sass mixin that consumes a component theme and produces *CSS rules* used to style a particular component. -- **The CSS variable mixin** - A Sass mixin that consumes a component theme and produces *CSS variables* used to style a particular component. +- **The component mixin** - A Sass mixin that consumes a component theme and produces _CSS rules_ used to style a particular component. +- **The CSS variable mixin** - A Sass mixin that consumes a component theme and produces _CSS variables_ used to style a particular component. -Say you want to create a new global avatar theme that has a different background color to the one we set in the avatar's default theme. As mentioned in the [**overview section**](#overview) there are 2 general approaches to creating a component theme. +Say you want to create a new global avatar theme that has a different background color to the one we set in the avatar's default theme. As mentioned in the [**overview section**](#overview) there are 2 general approaches to creating a component theme. There are even more ways you can organize and scope your component themes. The most straightforward way to do that is in the same file you defined your [**global theme**](./global-theme.md). Defining an avatar theme: @@ -50,7 +50,7 @@ $new-avatar-theme: avatar-theme( The above code generates new CSS rules for the `igx-avatar` component. These new CSS rules overwrite the default avatar rules. Similarly, if you were to include `igx-avatar` mixin later down in the global `scss` file, the mixin will again overwrite any previously defined themes. -For instance: +For instance: ```scss // ... @@ -64,6 +64,7 @@ $another-avatar-theme: avatar-theme( @include avatar($another-avatar-theme); ``` + In the above code, the defacto global theme is now the `$another-avatar-theme` as it overwrites any previously included `igx-avatar` mixins. This brings me to my next point. @@ -97,6 +98,7 @@ In a component template: ``` +
    ### View Encapsulation @@ -171,9 +173,10 @@ $badge-theme: badge-theme($background-color: white); @include css-vars($avatar-theme); @include css-vars($badge-theme); ``` +
    -#### Usage in encapsulated views +#### Usage in encapsulated views The below sample uses the sample from the [View Encapsulation](#view-encapsulation) section as a starting point: @@ -193,6 +196,7 @@ $avatar-theme: avatar-theme($initials-background: royalblue); @include css-vars($avatar-theme); } ``` + As a bonus, any Ignite UI for Angular theme built with the `$igx-legacy-support` set to `false` will allow styling of components without the need to use Sass in your project. For instance the above could be achieved by setting the value of `--igx-avatar-initials-background` CSS variable to the desired color: ```css @@ -202,11 +206,12 @@ As a bonus, any Ignite UI for Angular theme built with the `$igx-legacy-support` --igx-avatar-initials-background: royalblue; } ``` +
    ### API Overview -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) -* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme)
    @@ -215,9 +220,9 @@ As a bonus, any Ignite UI for Angular theme built with the `$igx-legacy-support` Learn how to configure a global theme: -* [Global Themes](./global-theme.md) +- [Global Themes](./global-theme.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/themes/examples.md b/docs/angular/src/content/kr/components/themes/examples.md index 3b04f01dd5..a4854c36d4 100644 --- a/docs/angular/src/content/kr/components/themes/examples.md +++ b/docs/angular/src/content/kr/components/themes/examples.md @@ -10,8 +10,8 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them ### Demos - @@ -20,7 +20,7 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them ### Default Theme -There is a *_Default theme_* that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file: +There is a **Default theme** that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file: ```scss // import first the IgniteUI themes library @@ -36,18 +36,18 @@ There is a *_Default theme_* that styles all the components in the **Ignite UI f The result from the above code snippet looks like this: -
    -In case you have other preferences for the appearance of the components or the *_Default theme_* doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing a huge amount of CSS. +In case you have other preferences for the appearance of the components or the **Default theme** doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing a huge amount of CSS. ### Get Started -To get started, you have to import the *theme utilities*, where the **SASS functions and mixins** are nested. +To get started, you have to import the _theme utilities_, where the **SASS functions and mixins** are nested. For good code structure it will be helpful to place the **theme logic** in a separate directory: ```scss @@ -56,6 +56,7 @@ For good code structure it will be helpful to place the **theme logic** in a sep @import '~igniteui-angular/lib/core/styles/themes/utilities'; ``` +
    The next step is to import all the components, that you want to customize, and their corresponding themes. @@ -73,6 +74,7 @@ Our app will have: @import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme'; ``` + - [**Igx-Dialog**](../dialog.md) with embedded [**Igx-Input-Group**](../input-group.md): ```scss @@ -169,6 +171,7 @@ Bind the host element `class` with the **themes class**. @HostBinding("class") public themesClass = "dark-theme"; ``` +
    After that, in a new SCSS file nest the **themes class**, that includes the components with their themes, in the host element. @@ -197,17 +200,18 @@ After that, in a new SCSS file nest the **themes class**, that includes the comp } } ``` + And the result is: -
    -Import the *utilities*, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**. +Import the _utilities_, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**. ### Theme Chooser In the above sample we set only one theme per component. @@ -300,13 +304,14 @@ export class ThemeChooserSampleComponent implements OnInit { ... ``` +
    Now we can easily change our defined themes with only a `click` event: - @@ -314,24 +319,24 @@ Now we can easily change our defined themes with only a `click` event: ### API -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme) -* [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme) -* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme) +- [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme) +- [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) +- [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources
    -* [Global Theme](global-theme.md) -* [Component Themes](component-themes.md) -* [Color Palette](palette.md) -* [Grid](../grid/grid.md) -* [Grid Paging](../grid/paging.md) -* [Grid Filtering](../grid/filtering.md) -* [Dialog](../dialog.md) -* [Input Group](../input-group.md) -* [Snackbar](../snackbar.md) -* [Button](../button.md) -* [Button Group](../button-group.md) +- [Global Theme](global-theme.md) +- [Component Themes](component-themes.md) +- [Color Palette](palette.md) +- [Grid](../grid/grid.md) +- [Grid Paging](../grid/paging.md) +- [Grid Filtering](../grid/filtering.md) +- [Dialog](../dialog.md) +- [Input Group](../input-group.md) +- [Snackbar](../snackbar.md) +- [Button](../button.md) +- [Button Group](../button-group.md) diff --git a/docs/angular/src/content/kr/components/themes/global-theme.md b/docs/angular/src/content/kr/components/themes/global-theme.md index 60a2e2f9fa..e421d1ac17 100644 --- a/docs/angular/src/content/kr/components/themes/global-theme.md +++ b/docs/angular/src/content/kr/components/themes/global-theme.md @@ -13,7 +13,7 @@ _language: kr If you've included the _`igniteui-angular.css`_ file in your application project, now is a good time to remove it. We are going to use our own _`my-app-theme.scss`_ file to generate a global theme for all components in our application. **Ignite UI for Angular** uses a global theme by default to theme the entire suite of components. You can, however, create themes scoped to components you have in your app, depending on your use case. For now, we will be including all of our themes in a single file. -To generate a global theme we're going to be including two mixins `core` and `theme`; `core` doesn't accept any arguments, `theme` accepts a few: +To generate a global theme we're going to be including two mixins `core` and `theme`; `core` doesn't accept any arguments, `theme` accepts a few: | Name | Type | Default | Description | | :---------------: | :-----: | :---------------: | :-----------------------------------------------------------------------------------: | @@ -46,7 +46,7 @@ $my-color-palette: palette( @include theme($my-color-palette); ``` -Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of loading all essential parts like global elevations, global typography, etc. The `theme` will set the global variable `$default-palette` to the palette map you pass; it will also set the global variable `$igx-legacy-support` to the value of `$legacy-support`. The `theme` mixin also includes each individual component style that is not listed in the `$exclude` list of components. +Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of loading all essential parts like global elevations, global typography, etc. The `theme` will set the global variable `$default-palette` to the palette map you pass; it will also set the global variable `$igx-legacy-support` to the value of `$legacy-support`. The `theme` mixin also includes each individual component style that is not listed in the `$exclude` list of components. > [!IMPORTANT] > Including `core` before `theme` is essential. The `core` mixin provides all base definitions needed for `theme` to work. @@ -67,7 +67,7 @@ Additionally, if you know your app will not be using some of our components, you ### Light and Dark Themes -In addition to the more powerful `theme` mixin, we include two additional global theme mixins for fast bootstrapping of *__light__* and *__dark__* themes. Those mixins are `igx-light-theme` and `dark-theme`. +In addition to the more powerful `theme` mixin, we include two additional global theme mixins for fast bootstrapping of _**light**_ and _**dark**_ themes. Those mixins are `igx-light-theme` and `dark-theme`. Here's a quick showcase of how you can create a light and dark theme for your application @@ -83,6 +83,7 @@ Here's a quick showcase of how you can create a light and dark theme for your ap @include dark-theme($default-palette); } ``` + Ideally you would be applying `.light-theme` and `.dark-theme` CSS classes somewhere high in your application DOM tree. Your `app-root` element is a good candidate for that. ### Browser Support @@ -93,8 +94,8 @@ The value of `$igx-legacy-support` is quite important as it determines how compo The general rule of thumb regarding what the value of `$legacy-support` should be is dictated by whether you will be including support for Internet Explorer 11 or not. If you want to include support for IE11 set the `$legacy-support` value to `true` (default), otherwise setting its value to `false` will force CSS variables for theming. ### API Overview -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) -* [Palette]({environment:sassApiUrl}/palettes#function-palette) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Palette]({environment:sassApiUrl}/palettes#function-palette)
    @@ -103,9 +104,9 @@ The general rule of thumb regarding what the value of `$legacy-support` should b Learn how to create individual component themes: -* [Component Themes](./component-themes.md) +- [Component Themes](./component-themes.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/themes/index.md b/docs/angular/src/content/kr/components/themes/index.md index 162380bf9d..8ee931c32d 100644 --- a/docs/angular/src/content/kr/components/themes/index.md +++ b/docs/angular/src/content/kr/components/themes/index.md @@ -47,16 +47,16 @@ Typography is a separate module in our Sass theming framework, which is decouple Learn how to create themes: -* [Global Themes](./global-theme.md) -* [Component Themes](./component-themes.md) +- [Global Themes](./global-theme.md) +- [Component Themes](./component-themes.md) Learn how to create a component schema: -* [Schemas](./schemas.md) +- [Schemas](./schemas.md) Learn how to build color palettes: -* [Palettes](./palette.md) +- [Palettes](./palette.md) Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/docs/angular/src/content/kr/components/themes/palette.md b/docs/angular/src/content/kr/components/themes/palette.md index 8470fd8719..d9bad870e4 100644 --- a/docs/angular/src/content/kr/components/themes/palette.md +++ b/docs/angular/src/content/kr/components/themes/palette.md @@ -115,19 +115,20 @@ For instance, if you want to generate CSS classes that apply background color to $suffix: 'bg' ); ``` + The above code will generate CSS classes for each color variant in the palette. For instance, the `500` color variant of the `primary` palette will be given the following class `.igx-primary-500-bg`;
    ### API Reference -* [Palettes]({environment:sassApiUrl}/palettes#function-palette) -* [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color) -* [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color) -* [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes) +- [Palettes]({environment:sassApiUrl}/palettes#function-palette) +- [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color) +- [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color) +- [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/themes/schemas.md b/docs/angular/src/content/kr/components/themes/schemas.md index 131242eb53..d1e07ab1d1 100644 --- a/docs/angular/src/content/kr/components/themes/schemas.md +++ b/docs/angular/src/content/kr/components/themes/schemas.md @@ -39,11 +39,11 @@ $_light-avatar: ( As you can see from the example above, the component schema defines the properties the [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) consumes. It just prescribes the colors the avatar should use, without having to resolve them beforehand. -Let's take the `icon-background` property for example. It tells the avatar theme what the default background should be for each new __igx-avatar__ of type __icon__. +Let's take the `icon-background` property for example. It tells the avatar theme what the default background should be for each new **igx-avatar** of type **icon**. -*The `icon-background` can be assigned any value, that is, a value that can be assigned to the CSS `background-color` property.* You can also assign a map to `icon-background`, like in the sample above. When you assign a map to the `icon-background` property, for instance, the map should contain functions as the key names, and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known. +_The `icon-background` can be assigned any value, that is, a value that can be assigned to the CSS `background-color` property._ You can also assign a map to `icon-background`, like in the sample above. When you assign a map to the `icon-background` property, for instance, the map should contain functions as the key names, and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known. -We can also add other functions and arguments to the `icon-background` map as key value pairs. For instance we may want to run the resolved result from `igx-color: ('grays', 400)` through the `hexrgba` function we have, to resolve the hex value for the `400` color variant of the `grays` palette, which is usually represented in rgba. +We can also add other functions and arguments to the `icon-background` map as key value pairs. For instance we may want to run the resolved result from `igx-color: ('grays', 400)` through the `hexrgba` function we have, to resolve the hex value for the `400` color variant of the `grays` palette, which is usually represented in rgba. Let's see how the schema will change when we make this addition: @@ -56,6 +56,7 @@ $_light-avatar: ( ... ); ``` + The result of thecolor function call will be automatically passed as the first argument to the `hexrgba` function. Since the `hexrgba` accepts a second argument for the background color, we provide it as the value of the `hexrgba` key in the example above.
    @@ -72,7 +73,7 @@ $my-avatar-schema: extend($_light-avatar, ( Now the value of `$my-avatar-schema` will contain all properties of `$_light-avatar`, except the value of `icon-background` will be set to `limegreen`. ### Consuming Schemas -Until now we have shown what a component schema is and how you can modify it, but we have not talked about how you can use a schema in your Sass project. +Until now we have shown what a component schema is and how you can modify it, but we have not talked about how you can use a schema in your Sass project. Individual component schemas are bundled up in a global schema map for all components we might have. So the `$_light-avatar` schema is part of the global `$light-schema` map. The `$light-schema` maps component schemas to component names. The `$light-schema` looks something like this: @@ -112,23 +113,24 @@ $my-avatar-theme: avatar-theme( $schema: $my-light-schema ); ``` + ### Conclusions -Although schemas require more advanced knowledge of our theming engine compared to theme functions and mixins, they present a powerful way for declaring component themes in your application. +Although schemas require more advanced knowledge of our theming engine compared to theme functions and mixins, they present a powerful way for declaring component themes in your application. The good thing about schemas is they allow you to modify the global theme before it was built, thus reducing the amount of produced CSS. Another great feature of theme schemas is that you can have as many as you want and swap them as you wish. **For instance, we use schemas internally to provide both light and dark themes by default. This allows you to switch the entire look of your application.** ### API Overview -* [Light Components Schema]({environment:sassApiUrl}/palettes#variable-light-material-schema) -* [Dark Components Schema]({environment:sassApiUrl}/palettes#variable-dark-material-schema) -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) -* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) +- [Light Components Schema]({environment:sassApiUrl}/palettes#variable-light-material-schema) +- [Dark Components Schema]({environment:sassApiUrl}/palettes#variable-dark-material-schema) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/themes/theming-demo.md b/docs/angular/src/content/kr/components/themes/theming-demo.md index 9958b081c0..22ecdf2837 100644 --- a/docs/angular/src/content/kr/components/themes/theming-demo.md +++ b/docs/angular/src/content/kr/components/themes/theming-demo.md @@ -10,8 +10,8 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them ### Demo - @@ -20,7 +20,7 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them ### Default Theme -There is a *_Default theme_* that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file: +There is a **Default theme** that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file: ```scss // import first the IgniteUI themes library @@ -36,18 +36,18 @@ There is a *_Default theme_* that styles all the components in the **Ignite UI f The result from the above code snippet looks like this: -
    -In case you have other preferences for the appearance of the components or the *_Default theme_* doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing huge amount of CSS files. +In case you have other preferences for the appearance of the components or the **Default theme** doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing huge amount of CSS files. ### Get Started -To get started, you have to import the *theme utilities*, where the **SASS functions and mixins** are nested. +To get started, you have to import the _theme utilities_, where the **SASS functions and mixins** are nested. For good code structure it will be helpful to place the **theme logic** in a separate directory: ```scss @@ -56,6 +56,7 @@ For good code structure it will be helpful to place the **theme logic** in a sep @import '~igniteui-angular/lib/core/styles/themes/utilities'; ``` +
    The next step is to import all the components, that you want to customize, and their corresponding themes. @@ -73,6 +74,7 @@ Our app will have: @import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme'; ``` + - [**Igx-Dialog**](../dialog.md) with embedded [**Igx-Input-Group**](../input-group.md): ```scss @@ -169,6 +171,7 @@ Bind the host element `class` with the **themes class**. @HostBinding("class") public themesClass = "dark-theme"; ``` +
    After that, in a new SCSS file nest the **themes class**, that includes the components with their themes, in the host element. @@ -197,17 +200,18 @@ After that, in a new SCSS file nest the **themes class**, that includes the comp } } ``` + And the result is: -
    -Import the *utilities*, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**. +Import the _utilities_, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**. ### Theme Chooser In the above sample we set only one theme per component. @@ -300,13 +304,14 @@ export class ThemeChooserSampleComponent implements OnInit { ... ``` +
    Now we can easily change our defined themes with only a `click` event: - @@ -314,24 +319,24 @@ Now we can easily change our defined themes with only a `click` event: ### API -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme) -* [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme) -* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme) +- [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme) +- [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) +- [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources
    -* [Global Theme](global-theme.md) -* [Component Themes](component-themes.md) -* [Color Palette](palette.md) -* [Grid](../grid/grid.md) -* [Grid Paging](../grid/paging.md) -* [Grid Filtering](../grid/filtering.md) -* [Dialog](../dialog.md) -* [Input Group](../input-group.md) -* [Snackbar](../snackbar.md) -* [Button](../button.md) -* [Button Group](../button-group.md) +- [Global Theme](global-theme.md) +- [Component Themes](component-themes.md) +- [Color Palette](palette.md) +- [Grid](../grid/grid.md) +- [Grid Paging](../grid/paging.md) +- [Grid Filtering](../grid/filtering.md) +- [Dialog](../dialog.md) +- [Input Group](../input-group.md) +- [Snackbar](../snackbar.md) +- [Button](../button.md) +- [Button Group](../button-group.md) diff --git a/docs/angular/src/content/kr/components/themes/typography.md b/docs/angular/src/content/kr/components/themes/typography.md index f3e227516d..aa9b566f3c 100644 --- a/docs/angular/src/content/kr/components/themes/typography.md +++ b/docs/angular/src/content/kr/components/themes/typography.md @@ -10,9 +10,10 @@ _language: kr

    The Ignite UI for Angular Typography Sass module allows you to modify the typography for the entire application, specific typographic scale, or specific components.

    -Ignite UI for Angular follows [The Type System](https://material.io/design/typography/the-type-system.html#) as described in the Material Design specification. The type system is a ***type scale*** consisting of ***13 different category type styles*** used across most components. All of the scale categories are completely reusable and adjustable by the end user. +Ignite UI for Angular follows [The Type System](https://material.io/design/typography/the-type-system.html#) as described in the Material Design specification. The type system is a _**type scale**_ consisting of _**13 different category type styles**_ used across most components. All of the scale categories are completely reusable and adjustable by the end user. Here's a list of all 13 category styles as defined in Ignite UI for Angular: + | **Scale Category** | **Font Family** | **Font Weight** | **Font Size** | **Text Transform** | **Letter Spacing** | **Line Height** | |----------------|-----------------|-----------------|---------------|--------------------|--------------------|-----------------| | **h1** | Titillium Web | 300 | 6 rem | none | -.09375 rem | 7 rem | @@ -87,10 +88,10 @@ We can use the `$h1-style` we defined in our previous example to produce a sligh $my-type-scale:type-scale($h1: $h1-style); ``` -Now `$my-type-scale` will store a modified type scale containing the modifications we specified for the `h1` category scale. +Now `$my-type-scale` will store a modified type scale containing the modifications we specified for the `h1` category scale. > [!NOTE] -> You can modify as many of the 13 category scales as you want by passing type styles for each one of them. +> You can modify as many of the 13 category scales as you want by passing type styles for each one of them. #### The Typography Mixin @@ -131,7 +132,7 @@ Most of the components in Ignite UI for Angular use scale categories for styling - `subtitle-2` - used for styling card subtitle and small title. - `body-2` - used for styling card text content. -There are two ways to change the text styles of a card. The first is by modifying the `h5`, `subtitle-2`, and/or `body-2` scales in the ***default type scale*** that we pass to the typography mixin. So if we wanted to make the title in a card smaller, all we have to do is change the font-size for the `h5` scale category. +There are two ways to change the text styles of a card. The first is by modifying the `h5`, `subtitle-2`, and/or `body-2` scales in the _**default type scale**_ that we pass to the typography mixin. So if we wanted to make the title in a card smaller, all we have to do is change the font-size for the `h5` scale category. ```scss // Create a custom h5 scale category style @@ -159,7 +160,7 @@ $my-type-scale:type-scale($h5: $my-h5); We no longer include the `typography` mixin by passing it the `$my-type-scale` scale with our modification to the `h5` category. Now all we do is pass the custom scale we created to the `card-typography` mixin. The only component that uses our `$my-type-scale` scale is the card now. -Typography style mixins can be scoped to specific selectors. Say we wanted our custom card typography styles to be applied for all `igx-card` components with class name of `my-cool-card`. +Typography style mixins can be scoped to specific selectors. Say we wanted our custom card typography styles to be applied for all `igx-card` components with class name of `my-cool-card`. ```scss //... @@ -207,10 +208,10 @@ Here's a list of all CSS classes we provide by default:
    -###Additional Resources +### Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/time-picker.md b/docs/angular/src/content/kr/components/time-picker.md index b419241844..22092c9447 100644 --- a/docs/angular/src/content/kr/components/time-picker.md +++ b/docs/angular/src/content/kr/components/time-picker.md @@ -12,10 +12,10 @@ _language: kr

    As one of the most commonly used UI components for today’s web applications, the Angular Time Picker, also known as Angular Time Picker, provides developers with a variety of features that provide with the ability to customize the component to create the best UX and UI experience for the users to interact with the component. There are different built-in templates for displaying a clock button, as well as features like validation, custom time formatting, and more.

    ### Time Picker Example -In general, users can enter a preferred time either through text input or by choosing a time value from an Angular Time Picker dropdown. The basic Angular Time Picker example below shows how users can easily enter the value with the help of the dropdown or by using the keyboard. +In general, users can enter a preferred time either through text input or by choosing a time value from an Angular Time Picker dropdown. The basic Angular Time Picker example below shows how users can easily enter the value with the help of the dropdown or by using the keyboard. - @@ -39,6 +39,7 @@ import { IgxTimePickerModule } from 'igniteui-angular'; }) export class AppModule {} ``` +
    #### Default @@ -52,8 +53,8 @@ To add the time picker, use the following code: And here's our templated Ignite UI for Angular Time Picker: - @@ -75,8 +76,8 @@ Then use the [`value`]({environment:angularApiUrl}/classes/igxtimepickercomponen And there we have it: - @@ -95,10 +96,10 @@ The table below lists valid time display formats: | Format | Description | |:-------:|:-----------| -| `h` | Formats the hours field in 12-hours format without leading zero (1..12). | -| `hh` | Formats the hours field in 12-hours format with leading zero (01..12). | -| `H` | Formats the hours field in 24-hours format without leading zero (0..23). | -| `HH` | Formats the hours field in 24-hours format with leading zero (00..23). | +| `h` | Formats the hours field in 12-hours format without leading zero (1..12). | +| `hh` | Formats the hours field in 12-hours format with leading zero (01..12). | +| `H` | Formats the hours field in 24-hours format without leading zero (0..23). | +| `HH` | Formats the hours field in 24-hours format with leading zero (00..23). | | `m` | Formats the minutes field without leading zero (0..59). | | `mm` | Formats the minutes field with leading zero (00..59). | | `tt` | Represents the AM/PM field. | @@ -106,8 +107,8 @@ The table below lists valid time display formats: The result is as follows: - @@ -123,8 +124,8 @@ To change the delta of the items, set the [`itemsDelta`]({environment:angularApi And there we have it: - @@ -132,7 +133,7 @@ And there we have it: #### Validation -Set [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minvalue) and [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxvalue) to limit the user input. You can handle the [`onValidationFailed`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#onvalidationfailed) in order to notify the user if an invalid time is selected. +Set [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minvalue) and [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxvalue) to limit the user input. You can handle the [`onValidationFailed`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#onvalidationfailed) in order to notify the user if an invalid time is selected. >Note that the min/max values should follow the [`format`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#format): @@ -174,8 +175,8 @@ public onValidationFailed(timepicker){ And there we have it: - @@ -197,25 +198,26 @@ public mode = InteractionMode.DropDown; ``` -The user now will be able to type, edit or delete the time value in the input in both 12- and 24-hour formats. + +The user now will be able to type, edit or delete the time value in the input in both 12- and 24-hour formats. **Dropdown Mode Keyboard Navigation** -When the mouse caret is positioned at the hours, minutes or AM/PM placeholders and pressing the Up arrow key or using `Mouse Wheel Up`, the hours/minutes are increased. Pressing the Down arrow key or `Mouse Wheel Down` is used for the reversed operation. +When the mouse caret is positioned at the hours, minutes or AM/PM placeholders and pressing the Up arrow key or using `Mouse Wheel Up`, the hours/minutes are increased. Pressing the Down arrow key or `Mouse Wheel Down` is used for the reversed operation. Note that if the time picker's [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minvalue) or [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxvalue) are set and [`isSpinLoop`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#isspinloop) is false, the time scrolling will stop at the specified min/max hour/minute value. **Keyboard Operations:** -* To `Open`the dropdown, there are the following options - click on the clock icon, press Space or combination of Alt + Down keys. -* To `Accept` and `Close` the dropdown press Escape or Enter key. -* Clicking with the mouse outside of the time picker will also `Accept` the value entered and `Close` the dropdown. -* If the dropdown is not opened and a new value is typed, to `Accept` it - click outside of the time picker or press Tab to move the focus. +- To `Open`the dropdown, there are the following options - click on the clock icon, press Space or combination of Alt + Down keys. +- To `Accept` and `Close` the dropdown press Escape or Enter key. +- Clicking with the mouse outside of the time picker will also `Accept` the value entered and `Close` the dropdown. +- If the dropdown is not opened and a new value is typed, to `Accept` it - click outside of the time picker or press Tab to move the focus. And there we have it: - @@ -246,14 +248,15 @@ In the following example we modify the default label "Time" and add a second ico     ``` + ```typescript public date: Date = new Date(Date.now()); ``` And there we have it: - @@ -274,6 +277,7 @@ All the information mentioned in the Templatin ``` + ```typescript public today: Date = new Date(Date.now()); ``` @@ -299,8 +303,8 @@ public onBlur(inputValue: string, value: Date, picker: IgxTimePickerComponent) { And there we have it, a re-templated Ignite UI for Angular Time Picker with dropdown and two-way binding support: - @@ -336,8 +340,8 @@ public selectNow(timePicker: IgxTimePickerComponent) { The result is as follows: - @@ -346,17 +350,17 @@ The result is as follows: ## API References
    -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxTimePickerComponent]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) -* [IgxTimePickerComponent Styles]({environment:sassApiUrl}/themes#function-time-picker-theme) -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxTimePickerComponent]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) +- [IgxTimePickerComponent Styles]({environment:sassApiUrl}/themes#function-time-picker-theme) +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/toast.md b/docs/angular/src/content/kr/components/toast.md index 6faf4f9f75..d200e3e2b2 100644 --- a/docs/angular/src/content/kr/components/toast.md +++ b/docs/angular/src/content/kr/components/toast.md @@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Toast +## Toast

    The Ignite UI for Angular Toast component provides information and warning messages that are non-interactive and cannot be dismissed by the user. Notifications can be displayed at the bottom, the middle, or the top of the page.

    ### Toast Demo - @@ -21,7 +21,7 @@ _language: kr > [!NOTE] > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic. -###Usage +### Usage To get started with the Ignite UI for Angular Toast, let's first import the `IgxToastModule` in our **app.module.ts** file: @@ -38,6 +38,7 @@ import { IgxToastModule } from 'igniteui-angular'; }) export class AppModule {} ``` + #### Show Toast In order to display the toast component, use its [`open()`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#open) method and call it on a button click. Use the [`message`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#message) input to set a notification. @@ -72,7 +73,7 @@ If the sample is configured properly, the toast appears when the 'SHOW' button i #### Display Time -Use [`displayTime`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#displaytime) and set it to an interval in milliseconds to configure how long the toast component is visible. +Use [`displayTime`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#displaytime) and set it to an interval in milliseconds to configure how long the toast component is visible. ```html @@ -116,8 +117,8 @@ public open(toast) { ``` - @@ -127,13 +128,13 @@ public open(toast) { ## API References In this article we learned how to use and configure the [`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html). For more details in regards its API, take a look at the links below: -* [`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) +- [`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) Styles: -* [`IgxToastComponent Styles`]({environment:sassApiUrl}/themes#function-toast-theme) +- [`IgxToastComponent Styles`]({environment:sassApiUrl}/themes#function-toast-theme) -###Additional Resources +### Additional Resources
    Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/kr/components/toggle.md b/docs/angular/src/content/kr/components/toggle.md index ca1ce2a91a..2d6a1f40dc 100644 --- a/docs/angular/src/content/kr/components/toggle.md +++ b/docs/angular/src/content/kr/components/toggle.md @@ -5,20 +5,20 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w _language: kr --- -##Toggle +## Toggle The [`igxToggle`]({environment:angularApiUrl}/classes/igxtoggledirective.html) directive allows the users to open, to interact with, to apply animations, and to close a toggle container. All toggle components implement the [`igxToggle`]({environment:angularApiUrl}/classes/igxtoggledirective.html) or [`igxToggleAction`]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) internally, and users can implement toggle-based components and views, like dropdowns, while the [`igxToggleAction`]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) directive controls other components until the toggle umbrella. -###Toggle Demo +### Toggle Demo - -##Usage +## Usage The toggle allows you easily to wrap some content into a box which easily can be opened and closed. To get started with the IgniteUI for Angular Toggle, let's first import the **IgxToggleModule** in our **app.module.ts**. We are also planning to take advantage of [**igxButton**]({environment:angularApiUrl}/classes/igxbuttondirective.html) directive so we will have to import **IgxButtonModule** into the **app.module.ts** too. @@ -35,6 +35,7 @@ import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular' }) export class AppModule {} ``` + Then in the template of our component we can apply the directive on the element we want to be togglable. ```html @@ -77,13 +78,13 @@ export class Class { If all went well, you should see the following in your browser: - -In the next sample we'll use different positioning strategy so the content is displayed below the button. +In the next sample we'll use different positioning strategy so the content is displayed below the button. ```typescript // app.module.ts @@ -139,15 +140,15 @@ The [`igxToggle`]({environment:angularApiUrl}/classes/igxtoggledirective.html) u - ### Automatic toggle actions -In order to prevent the invocation of these methods there is a directive which has `onClick` handler and changes the state to the toggle we are referred to. So let's dive in. If we would like to take advantage of this functionality we will have to use [**IgxToggleActionDirective**]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) which is comming from the same [**IgxToggleModule**]({environment:angularApiUrl}/classes/igxtogglemodule.html). +In order to prevent the invocation of these methods there is a directive which has `onClick` handler and changes the state to the toggle we are referred to. So let's dive in. If we would like to take advantage of this functionality we will have to use [**IgxToggleActionDirective**]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) which is coming from the same [**IgxToggleModule**]({environment:angularApiUrl}/classes/igxtogglemodule.html). ```typescript // app.module.ts @@ -178,8 +179,8 @@ Then in the template we need to declare [**IgxToggleActionDirective**]({environm After these changes the toggle should work exactly in the same way. - @@ -216,8 +217,8 @@ export class AppModule {} If all went well, it will look like this: - @@ -232,6 +233,7 @@ Directive instance is exported as `overlay-outlet`, so it can be assigned within ``` This allows to provide the `outlet` templates variable as a setting to the toggle action: + ```html @@ -242,20 +244,20 @@ This allows to provide the `outlet` templates variable as a setting to the toggl In this article we covered the details of how to use Toggle directive. We created a content which would possible to be hidden or shown by invoking programmatically methods which determine this behaviour. Furthermore we added another helping directive which controls automatically this same behaviour by giving it the appropriate toggle reference. In the end we have registered our [**igxToggle**]({environment:angularApiUrl}/classes/igxtoggledirective.html) directive in the **igxNavigationService** provider by giving it an ID, which we then provided to our helping **igxToggleAction** directive. -###API References +### API References
    -* [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) -* [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) -* [IgxOverlayOutletDirective]({environment:angularApiUrl}/classes/igxoverlayoutletdirective.html) -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) +- [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) +- [IgxOverlayOutletDirective]({environment:angularApiUrl}/classes/igxoverlayoutletdirective.html) +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html)
    -###Additional Resources +### Additional Resources
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/tooltip.md b/docs/angular/src/content/kr/components/tooltip.md index 9570c747d8..f16ac8945d 100644 --- a/docs/angular/src/content/kr/components/tooltip.md +++ b/docs/angular/src/content/kr/components/tooltip.md @@ -13,8 +13,8 @@ While most tooltips have a limited number of available positions, with the [`igx ### Angular Tooltip Example - @@ -128,6 +128,7 @@ What if we want to control the amount of time that should pass before showing an Now let's add a couple of [`IgxSlider`](slider.md) elements to control the [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showdelay) and the [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hidedelay). In addition, we will also use the [`IgxSwitch`](switch.md) to enable/disable the user interaction over the tooltip target by using the [`tooltipDisabled`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#tooltipdisabled) property of the target. We will go ahead and get the `IgxSliderModule` and the `IgxSwitchModule`. + ```typescript // app.module.ts @@ -308,8 +309,8 @@ As a finishing touch, we will add a couple of button icons as card actions at th If all went well, this is how our location and tooltip should look like: - @@ -337,29 +338,29 @@ Extra care should be taken in the following scenarios: In this article we learned how to create, configure and style awesome tooltips for the elements on our page! We also used some additional Ignite UI for Angular components like icons, avatars and cards to improve on the design of our application! The respective APIs are listed below: -* [IgxTooltipDirective]({environment:angularApiUrl}/classes/igxtooltipdirective.html) -* [IgxTooltipTargetDirective]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) +- [IgxTooltipDirective]({environment:angularApiUrl}/classes/igxtooltipdirective.html) +- [IgxTooltipTargetDirective]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) Additional components and/or directives that were used: -* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxCardComponent]({environment:angularApiUrl}/classes/igxcardcomponent.html) -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) -* [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) -* [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [IgxCardComponent]({environment:angularApiUrl}/classes/igxcardcomponent.html) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) +- [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) +- [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) +- [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) Styles: -* [IgxTooltipDirective Styles]({environment:sassApiUrl}/themes#function-tooltip-theme) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) -* [IgxButtonDirective Styles]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxCardComponent Styles]({environment:sassApiUrl}/themes#function-card-theme) -* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) -* [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme) +- [IgxTooltipDirective Styles]({environment:sassApiUrl}/themes#function-tooltip-theme) +- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) +- [IgxButtonDirective Styles]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxCardComponent Styles]({environment:sassApiUrl}/themes#function-card-theme) +- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) +- [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme)
    @@ -368,5 +369,5 @@ Styles:
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/treegrid/aggregations.md b/docs/angular/src/content/kr/components/treegrid/aggregations.md index 6133349594..61f0e4bf91 100644 --- a/docs/angular/src/content/kr/components/treegrid/aggregations.md +++ b/docs/angular/src/content/kr/components/treegrid/aggregations.md @@ -11,8 +11,8 @@ _language: kr #### 데모 - @@ -72,22 +72,22 @@ public groupColumnKey = "Categories";
    -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [TreeGrid 개요](tree-grid.md) -* [TreeGrid 요약](summaries.md) -* [그리드 요약](../grid/summaries.md) +- [TreeGrid 개요](tree-grid.md) +- [TreeGrid 요약](summaries.md) +- [그리드 요약](../grid/summaries.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/treegrid/load-on-demand.md b/docs/angular/src/content/kr/components/treegrid/load-on-demand.md index a847c0f512..306ec99028 100644 --- a/docs/angular/src/content/kr/components/treegrid/load-on-demand.md +++ b/docs/angular/src/content/kr/components/treegrid/load-on-demand.md @@ -12,8 +12,8 @@ Ignite UI for Angular [`IgxTreeGrid`]({environment:angularApiUrl}/classes/igxtre #### 데모 - @@ -33,7 +33,7 @@ Ignite UI for Angular [`IgxTreeGrid`]({environment:angularApiUrl}/classes/igxtre [`loadChildrenOnDemand`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#loadchildrenondemand) loadChildrenOnDemand 콜백은 두 개의 매개 변수를 제공합니다: - parentID - 확장 중인 상위 행의 ID입니다. -- done - 서버에서 검색될 경우, 하위와 함께 호출해야 콜백입니다. +- done - 서버에서 검색될 경우, 하위와 함께 호출해야 콜백입니다. ```typescript public loadChildren = (parentID: any, done: (children: any[]) => void) => { @@ -41,7 +41,7 @@ public loadChildren = (parentID: any, done: (children: any[]) => void) => { } ``` -사용자가 확장 아이콘을 클릭하면 로딩 인디케이터로 바뀝니다. `done` 콜백이 호출되면 로딩 인디케이터가 사라지고 하위가 로딩됩니다. 트리 그리드는 기본 데이터 소스에 하위를 추가하고 필요한 키를 자동으로 채웁니다. +사용자가 확장 아이콘을 클릭하면 로딩 인디케이터로 바뀝니다. `done` 콜백이 호출되면 로딩 인디케이터가 사라지고 하위가 로딩됩니다. 트리 그리드는 기본 데이터 소스에 하위를 추가하고 필요한 키를 자동으로 채웁니다. 확장되기 전에 행에 하위가 있는지 정보를 제공하는 방법이 있는 경우, [`hasChildrenKey`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#haschildrenkey) 입력 속성을 사용할 수 있습니다. 이렇게 하면 확장 인디케이터를 표시할지를 나타내는 데이터 객체에서 불 속성을 제공할 수 있습니다. @@ -71,18 +71,18 @@ public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [트리 그리드 개요](tree-grid.md) -* [트리 그리드 가상화 및 성능](virtualization.md) +- [트리 그리드 개요](tree-grid.md) +- [트리 그리드 가상화 및 성능](virtualization.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/treegrid/tree-grid.md b/docs/angular/src/content/kr/components/treegrid/tree-grid.md index b7f8c4f162..02f6ff68db 100644 --- a/docs/angular/src/content/kr/components/treegrid/tree-grid.md +++ b/docs/angular/src/content/kr/components/treegrid/tree-grid.md @@ -12,8 +12,8 @@ _language: kr ### 데모 - @@ -218,8 +218,8 @@ export class MyComponent implements OnInit { 다음은 최종 결과입니다: - @@ -241,31 +241,31 @@ export class MyComponent implements OnInit { 키보드 탐색은 트리 그리드에서 기본적으로 사용할 수 있으며 최종 사용자를 위해 가능한 많은 기능과 시나리오를 포함하도록 하고 있습니다. 특정 셀에 초점을 맞추고 다음 키 조합 중 하나를 누른 경우 설명된 동작이 실행됩니다: - - `위 화살표` - 한 셀 위로 이동(줄 바꿈 없음); - - `아래 화살표` - 한 셀 아래로 이동(줄 바꿈 없음); - - `왼쪽 화살표` - 한 셀 왼쪽으로 이동(라인 간에 줄 바꿈 없음); - - `오른쪽 화살표` - 한 셀 오른쪽으로 이동(라인 간에 줄 바꿈 없음); - - `Ctrl + 위 화살표` - 현재 열의 첫 번째 셀로 이동; - - `Ctrl + 아래 화살표` - 현재 열의 마지막 셀로 이동; - - `Ctrl + 왼쪽 화살표` - 행의 가장 왼쪽 셀로 이동; - - `Home` - 행의 가장 왼쪽 셀로 이동; - - `Ctrl + Home` - 그리드의 왼쪽 상단 셀로 이동; - - `Ctrl + 오른쪽 화살표` - 행의 가장 오른쪽 셀로 이동; - - `End` - 행의 가장 오른쪽 셀로 이동; - - `Ctrl + End` - 그리드의 오른쪽 하단 셀로 이동; - - `Page Up` - 한 페이지(뷰 포트) 위로 스크롤; - - `Page Down` - 한 페이지(뷰 포트) 아래로 스크롤; - - `Enter` - 편집 모드로 들어감; - - `F2` - 편집 모드로 들어감; - - `Esc` - 편집 모드를 종료함; - - `Tab` - 순차적으로 포커스를 행의 다음 셀 위로 이동하고, 마지막 셀에 도달하면 다음 행으로 이동합니다; 셀이 편집 모드인 경우에는 행의 다음 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다. 다음 셀을 편집할 수 없으면 선택해야 합니다; - - `Shift + Tab` - 순차적으로 행의 이전 셀로 포커스를 이동하고, 첫 번째 셀에 도달하면 포커스를 이전 행으로 이동합니다. 셀이 편집 모드인 경우에는 행의 이전 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다. 셀을 편집할 수 없으면 선택해야 합니다; - - `Space` - 행을 선택할 수 있는 경우에는 스페이스 키를 누르면 행 선택을 트리거합니다; - - `Alt + 왼쪽 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 접혀집니다; - - `Alt + 위 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 접혀집니다; - - `Alt + 오른쪽 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 전개됩니다; - - `Alt + 아래 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 전개됩니다; - - 마우스 `휠` - 포커스 요소를 흐리게 합니다; +- `위 화살표` - 한 셀 위로 이동(줄 바꿈 없음); +- `아래 화살표` - 한 셀 아래로 이동(줄 바꿈 없음); +- `왼쪽 화살표` - 한 셀 왼쪽으로 이동(라인 간에 줄 바꿈 없음); +- `오른쪽 화살표` - 한 셀 오른쪽으로 이동(라인 간에 줄 바꿈 없음); +- `Ctrl + 위 화살표` - 현재 열의 첫 번째 셀로 이동; +- `Ctrl + 아래 화살표` - 현재 열의 마지막 셀로 이동; +- `Ctrl + 왼쪽 화살표` - 행의 가장 왼쪽 셀로 이동; +- `Home` - 행의 가장 왼쪽 셀로 이동; +- `Ctrl + Home` - 그리드의 왼쪽 상단 셀로 이동; +- `Ctrl + 오른쪽 화살표` - 행의 가장 오른쪽 셀로 이동; +- `End` - 행의 가장 오른쪽 셀로 이동; +- `Ctrl + End` - 그리드의 오른쪽 하단 셀로 이동; +- `Page Up` - 한 페이지(뷰 포트) 위로 스크롤; +- `Page Down` - 한 페이지(뷰 포트) 아래로 스크롤; +- `Enter` - 편집 모드로 들어감; +- `F2` - 편집 모드로 들어감; +- `Esc` - 편집 모드를 종료함; +- `Tab` - 순차적으로 포커스를 행의 다음 셀 위로 이동하고, 마지막 셀에 도달하면 다음 행으로 이동합니다; 셀이 편집 모드인 경우에는 행의 다음 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다. 다음 셀을 편집할 수 없으면 선택해야 합니다; +- `Shift + Tab` - 순차적으로 행의 이전 셀로 포커스를 이동하고, 첫 번째 셀에 도달하면 포커스를 이전 행으로 이동합니다. 셀이 편집 모드인 경우에는 행의 이전 편집 가능한 셀로 이동하고, 편집 가능한 가장 오른쪽 셀에서 `CANCEL` 및 `DONE` 버튼으로 이동하고, `DONE` 버튼으로 현재 편집된 행 안의 편집 가능한 가장 왼쪽 셀로 이동합니다. 셀을 편집할 수 없으면 선택해야 합니다; +- `Space` - 행을 선택할 수 있는 경우에는 스페이스 키를 누르면 행 선택을 트리거합니다; +- `Alt + 왼쪽 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 접혀집니다; +- `Alt + 위 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 접혀집니다; +- `Alt + 오른쪽 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 전개됩니다; +- `Alt + 아래 화살표` 트리 그리드 행의 위 - 셀은 선택되고 포커스되어지며 선택된 셀 행에 하위가 있으면 행은 전개됩니다; +- 마우스 `휠` - 포커스 요소를 흐리게 합니다;
    @@ -289,25 +289,25 @@ See the [Grid Sizing](sizing.md) topic.
    -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) ## 추가 리소스
    -* [Grid Sizing](sizing.md) -* [데이터 그리드](../grid/grid.md) -* [행 편집](row-editing.md) +- [Grid Sizing](sizing.md) +- [데이터 그리드](../grid/grid.md) +- [행 편집](row-editing.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/components/treemap-overview.md b/docs/angular/src/content/kr/components/treemap-overview.md index c35b0b89d0..8fb2dc97bc 100644 --- a/docs/angular/src/content/kr/components/treemap-overview.md +++ b/docs/angular/src/content/kr/components/treemap-overview.md @@ -26,27 +26,27 @@ Treemaps are not designed to convey numerical quantities; the intent is to show Binding to the [`IgxTreemapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html) contains the following data requirements: -- The data source must be an array or a list of data items -- The data source must contain at least one data item otherwise the map will not render any nodes. -- All data items must contain at least one data column (e.g. string) which should be mapped to the [`labelMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#labelmemberpath) property. -- All data items must contain at least one numeric data column which should be mapped using the [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#valuememberpath) property. -- To categorize data into organized tiles you can optionally use [`parentIdMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#parentidmemberpath) and [`idMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#idmemberpath). +- The data source must be an array or a list of data items +- The data source must contain at least one data item otherwise the map will not render any nodes. +- All data items must contain at least one data column (e.g. string) which should be mapped to the [`labelMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#labelmemberpath) property. +- All data items must contain at least one numeric data column which should be mapped using the [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#valuememberpath) property. +- To categorize data into organized tiles you can optionally use [`parentIdMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#parentidmemberpath) and [`idMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#idmemberpath). ## Layout Types The Ignite UI for Angular treemap component supports the following types algorithms: -- `SliceAndDice` -- `Squarified` -- `Strip` +- `SliceAndDice` +- `Squarified` +- `Strip` The type is defined by setting the [`layoutType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#layouttype) property. If the [`layoutType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtreemapcomponent.html#layouttype) property is not specified, then by default, the `Stripped` type is displayed. There are different tiling algorithms when it comes to displaying the data. All algorithms have their advantages depending on the user’s needs. Some aim to obtain the best aspect ratio – the nodes are as close to rectangles as possible. Other algorithms aim to preserve the initial order of the elements – object which are close to each other in the data source are arranged near each other on the treemap. -- `Stripped` layout type algorithm obtains the best aspect ratio but the objects are arranged by size. +- `Stripped` layout type algorithm obtains the best aspect ratio but the objects are arranged by size. -- `SliceAndDice` layout algorithm aims to preserve the initial order at the expense of the aspect ratio. +- `SliceAndDice` layout algorithm aims to preserve the initial order at the expense of the aspect ratio. -- `Strip` layout tiling algorithm has a better aspect ratio than the SliceAndDice and keeps a better order than Squarified. +- `Strip` layout tiling algorithm has a better aspect ratio than the SliceAndDice and keeps a better order than Squarified. ## Layout Orientation @@ -54,9 +54,9 @@ LayoutOrientation property enables the user to set the direction in which the no Note that the LayoutOrientation property works with the layout types SliceAndDice and Strip. -- `Horizontal` – the child nodes are going to be stacked horizontally(SliceAndDice). +- `Horizontal` – the child nodes are going to be stacked horizontally(SliceAndDice). -- `Vertical` – the child nodes are going to be stacked vertically (SliceAndDice). +- `Vertical` – the child nodes are going to be stacked vertically (SliceAndDice). @@ -64,8 +64,8 @@ Note that the LayoutOrientation property works with the layout types SliceAndDic When installing the chart package, the core package must also be installed. -- **npm install --save igniteui-angular-core** -- **npm install --save igniteui-angular-charts** +- **npm install --save igniteui-angular-core** +- **npm install --save igniteui-angular-charts** ## Required Modules diff --git a/docs/angular/src/content/kr/grids_templates/batch-editing.md b/docs/angular/src/content/kr/grids_templates/batch-editing.md index f5c37bb432..f9ab9c49d5 100644 --- a/docs/angular/src/content/kr/grids_templates/batch-editing.md +++ b/docs/angular/src/content/kr/grids_templates/batch-editing.md @@ -46,8 +46,8 @@ keywords: angular crud, ignite ui for angular, infragistics 다음 샘플은 그리드에 트랜잭션이 공급자로 있고 행 편집이 활성화된 경우를 보여줍니다. 후자는 전체 행 편집이 확인된 후 트랜잭션이 추가됩니다. - @@ -57,8 +57,8 @@ keywords: angular crud, ignite ui for angular, infragistics 다음 샘플은 트랜잭션을 통해 일괄 편집을 공급자로 설정하고 사용하는 방법을 보여주며 행 편집을 활성화합니다. 후자는 전체 행 편집이 확인된 후 트랜잭션이 추가됩니다. 이 샘플은 플랫 데이터 소스를 사용합니다. - @@ -66,8 +66,8 @@ keywords: angular crud, ignite ui for angular, infragistics } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -98,6 +98,7 @@ export class AppModule {} 그런 다음 igxTransactionService를 @@igComponent 또는 상위 컴포넌트의 일부 공급자로 정의해야 합니다. @@if (igxName === 'IgxGrid') { + ```typescript import { Component } from "@angular/core"; import { IgxGridTransaction, IgxTransactionService } from "igniteui-angular"; @@ -110,8 +111,10 @@ import { IgxGridTransaction, IgxTransactionService } from "igniteui-angular"; export class GridWithTransactionsComponent { } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript import { Component, ViewChild } from "@angular/core"; import { IgxGridComponent, IgxGridTransaction, IgxToggleDirective, @@ -126,8 +129,10 @@ import { IgxGridComponent, IgxGridTransaction, IgxToggleDirective, export class TreeGridBatchEditingSampleComponent { } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript import { Component } from "@angular/core"; import { IgxHierarchicalTransactionServiceFactory } from "igniteui-angular"; @@ -138,6 +143,7 @@ import { IgxHierarchicalTransactionServiceFactory } from "igniteui-angular"; }) export class HierarchicalGridWithTransactionsComponent { } ``` + } > [!NOTE] > `IgxGridTransaction` 은 그리드에 의해 정의된 주입 토큰입니다. @@ -145,6 +151,7 @@ export class HierarchicalGridWithTransactionsComponent { } 그런 다음 바인딩된 데이터 소스 및 [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable)이 true로 설정되고 바인딩된 @@igComponent를 정의합니다: @@if (igxName === 'IgxGrid') { + ```html ... @@ -174,8 +183,10 @@ export class HierarchicalGridWithTransactionsComponent { } ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html [!NOTE] @@ -362,29 +378,29 @@ export class HierarchicalGridBatchEditingSampleComponent { ### API 참조 @@if (igxName === 'IgxGrid') { -* [transactions]({environment:angularApiUrl}/classes/@@igTypeDoc.html#transactions) -* [igxTransactionService]({environment:angularApiUrl}/classes/igxtransactionservice.html) +- [transactions]({environment:angularApiUrl}/classes/@@igTypeDoc.html#transactions) +- [igxTransactionService]({environment:angularApiUrl}/classes/igxtransactionservice.html) } @@if (igxName === 'IgxTreeGrid') { -* [HierarchicalTransactionService]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) -* [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable) -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [HierarchicalTransactionService]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) +- [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) } @@if (igxName === 'IgxHierarchicalGrid') { -* [igxHierarchicalTransactionServiceFactory]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory) +- [igxHierarchicalTransactionServiceFactory]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory) } ### 추가 리소스 -* [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) -* [@@igComponent 개요](@@igMainTopic.md) -* [@@igComponent 편집](editing.md) -* [@@igComponent 행 편집](row-editing.md) -* [@@igComponent Row Adding](row-adding.md) +- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [@@igComponent 편집](editing.md) +- [@@igComponent 행 편집](row-editing.md) +- [@@igComponent Row Adding](row-adding.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/collapsible-column-groups.md b/docs/angular/src/content/kr/grids_templates/collapsible-column-groups.md index 71e2f75e70..ed41be2232 100644 --- a/docs/angular/src/content/kr/grids_templates/collapsible-column-groups.md +++ b/docs/angular/src/content/kr/grids_templates/collapsible-column-groups.md @@ -1,8 +1,8 @@ --- title: Angular Collapsible Column Groups | Ignite UI for Angular | Infragistics -description: Collapsible multi-column headers make it possible to collapse some subset of the nested columns under the current one and to show some nested headers, which will give you a shorten informtion for example. -keywords: collpasible column headers, ignite ui for angular, infragistics +description: Collapsible multi-column headers make it possible to collapse some subset of the nested columns under the current one and to show some nested headers, which will give you a shorten information for example. +keywords: collapsible column headers, ignite ui for angular, infragistics --- ### Grid Collapsible Column Groups Overview @@ -13,8 +13,8 @@ Multi-column headers allow you to have multiple levels of nested columns and col @@if (igxName === 'IgxGrid') { - @@ -23,8 +23,8 @@ Multi-column headers allow you to have multiple levels of nested columns and col @@if (igxName === 'IgxTreeGrid') { - @@ -32,8 +32,8 @@ Multi-column headers allow you to have multiple levels of nested columns and col } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -47,13 +47,14 @@ To get started with the IgxGrid and the **Collapsible multi-column headers** , f ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the @@if (igxName === 'IgxGrid') {`IgxGridModule`} @@if (igxName === 'IgxTreeGrid') {`IgxTreeGridModule`} @@if (igxName === 'IgxHierarchicalGrid') {`IgxHierarchicalGridModule`} in the app.module.ts file. Also we strongly suggest you to take a brief look at [*multi-column groups*](./multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the @@if (igxName === 'IgxGrid') {`IgxGridModule`} @@if (igxName === 'IgxTreeGrid') {`IgxTreeGridModule`} @@if (igxName === 'IgxHierarchicalGrid') {`IgxHierarchicalGridModule`} in the app.module.ts file. Also we strongly suggest you to take a brief look at [_multi-column groups_](./multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid. ### Usage -*Collapsible Column Groups* is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. +_Collapsible Column Groups_ is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. In order to define a column group as `collapsible`, you need to set the property to `[collapsible]="true"` and also keep in mind that you need to define the property `visibleWhenCollapse` to at least two child columns: at least one column must be visible when the group is collapsed (`[visibleWhenCollapse]="true"`) and at least one column must be hidden when the group is expanded (`[visibleWhenCollapse]="false"`), otherwise the **collapsible functionality will be disabled**. If `visibleWhenCollapse` is not specified for some of the child columns, then this column will be always visible no matter whether the parent state is expanded or collapsed. @@ -79,11 +80,11 @@ So let's see the markup below: ``` And now let's sum up: every child column has tree states: -- Can be always visible, no matter expand state of its parent; -- Can be visible, when its parent is expanded; -- Can be visible, when its parent is collapsed; +- Can be always visible, no matter expand state of its parent; +- Can be visible, when its parent is expanded; +- Can be visible, when its parent is collapsed; -The initial state of the column group which is specified as collapsible is `[expanded]="true"`. But you can easily change this behavour by setting the property `[expand]="false"`. +The initial state of the column group which is specified as collapsible is `[expanded]="true"`. But you can easily change this behavior by setting the property `[expand]="false"`. ### Expand/Collapse indicator template @@ -113,6 +114,7 @@ You can define custom expand/collapse template and provide it to each of the col ``` + ##### Using igxCollapsibleIndicator directive Another way to achieve this behavior is to use the igxCollapsibleIndicator directive as shown in the example below: @@ -140,25 +142,25 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc ## API References
    -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
    -* [Grid overview](grid.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column_pinning.md) -* [Selection](selection.md) +- [Grid overview](grid.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column_pinning.md) +- [Selection](selection.md)
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/column-hiding.md b/docs/angular/src/content/kr/grids_templates/column-hiding.md index d7484718a0..adb1356229 100644 --- a/docs/angular/src/content/kr/grids_templates/column-hiding.md +++ b/docs/angular/src/content/kr/grids_templates/column-hiding.md @@ -28,8 +28,8 @@ The Material UI Grid has a built-in column hiding UI, which can be used through @@if (igxName === 'IgxGrid') { - @@ -37,8 +37,8 @@ The Material UI Grid has a built-in column hiding UI, which can be used through } @@if (igxName === 'IgxTreeGrid') { - @@ -46,8 +46,8 @@ The Material UI Grid has a built-in column hiding UI, which can be used through } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -59,6 +59,7 @@ The Material UI Grid has a built-in column hiding UI, which can be used through @@igComponent를 작성하고 데이터를 바인딩하는 것으로 시작합니다. 또한, 열에서 필터링 및 정렬을 사용할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html @@ -75,8 +76,10 @@ The Material UI Grid has a built-in column hiding UI, which can be used through     ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -95,8 +98,10 @@ The Material UI Grid has a built-in column hiding UI, which can be used through ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -134,6 +139,7 @@ The Material UI Grid has a built-in column hiding UI, which can be used through ``` + } ### 도구 모음의 열 숨기기 UI @@ -142,6 +148,7 @@ The built-in Column Hiding UI is placed inside an [`IgxDropDownComponent`]({envi For this purpose all we have to do is set both the [`IgxGridToolbarActionsComponent`]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html) and the [`IgxGridToolbarHidingComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html) inside of the @@igComponent. We will also add a title to our toolbar by using the [`IgxGridToolbarTitleComponent`]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html) and a custom style for our @@igComponent's wrapper. @@if (igxName === 'IgxHierarchicalGrid') { + ```html
    @@ -156,6 +163,7 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon
    ``` + ```css /* columnHiding.component.css */ .photo { @@ -166,9 +174,11 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon margin: 1px } ``` + } @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { + ```html @@ -192,6 +202,7 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon margin: 10px; } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { @@ -235,6 +246,7 @@ export class AppModule {} [`IgxColumnHidingComponent`]({environment:angularApiUrl}/classes/igxcolumnhidingcomponent.html)를 작성합니다! 이 애플리케이션에서는 그리드 옆에 배치합니다(도구 모음의 열 숨기기 UI와 다르며, 컴포넌트는 디자인에 의해 드롭 다운 안에 있음). 또한, 컴포넌트의 [`columns`]({environment:angularApiUrl}/classes/igxcolumnhidingcomponent.html#columns) 속성을 @@igComponent의 열에 설정하고 일부 사용자 스타일을 추가하여 애플리케이션을 더욱 유용하게 합니다! @@if (igxName === 'IgxGrid') { + ```html @@ -248,8 +260,10 @@ export class AppModule {} ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -263,9 +277,11 @@ export class AppModule {} ``` + } @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { + ```css /* columnHiding.component.css */ @@ -303,6 +319,7 @@ export class AppModule {} margin-left: 30px; } ``` + } #### 제목 및 필터 프롬프트 추가 @@ -368,6 +385,7 @@ export class AppModule {} 단지 [`disableHiding`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding) 속성을 true로 설정하면 사용자가 열 숨기기 UI를 통해 열을 숨길 수 없도록 방지할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html @@ -380,8 +398,10 @@ export class AppModule {} ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -394,14 +414,15 @@ export class AppModule {} ``` + } 모든 것이 잘 진행되었다면 다음과 같이 열 숨기기 UI 컴포넌트가 표시됩니다: @@if (igxName === 'IgxGrid') { - @@ -409,8 +430,8 @@ export class AppModule {} } @@if (igxName === 'IgxTreeGrid') { - @@ -428,45 +449,45 @@ export class AppModule {} 열 숨기기 UI에는 아래에 나열된 몇 가지 API가 추가로 포함되어 있습니다. -* [IgxColumnHidingComponent]({environment:angularApiUrl}/classes/igxcolumnhidingcomponent.html) -* [IgxColumnHidingComponent 스타일]({environment:sassApiUrl}/themes#function-igx-column-hiding-theme) +- [IgxColumnHidingComponent]({environment:angularApiUrl}/classes/igxcolumnhidingcomponent.html) +- [IgxColumnHidingComponent 스타일]({environment:sassApiUrl}/themes#function-igx-column-hiding-theme) 사용된 상대 API가 있는 추가 컴포넌트 및/또는 지시문: [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) 속성: -* [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding) +- [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding) [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) 속성: -* [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress) +- [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress) [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) 메소드: [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 이벤트: -* [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged) +- [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged) [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) 스타일: -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxRadioComponent 스타일]({environment:sassApiUrl}/themes#function-radio-theme) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxRadioComponent 스타일]({environment:sassApiUrl}/themes#function-radio-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [필터링](filtering.md) -* [페이징](paging.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [필터링](filtering.md) +- [페이징](paging.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [검색](search.md)}
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/column-moving.md b/docs/angular/src/content/kr/grids_templates/column-moving.md index 153851dacc..3d9ad0a1fd 100644 --- a/docs/angular/src/content/kr/grids_templates/column-moving.md +++ b/docs/angular/src/content/kr/grids_templates/column-moving.md @@ -46,8 +46,8 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin @@if (igxName === 'IgxGrid') { - @@ -55,8 +55,8 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin } @@if (igxName === 'IgxTreeGrid') { - @@ -64,8 +64,8 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -78,26 +78,32 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ... ``` + } #### API -In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically: +In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically: [`moveColumn`]({environment:angularApiUrl}/classes/igxgridcomponent.html#movecolumn) - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `position` (representing a `DropPosition`({environment:angularApiUrl}/enums/dropposition.html) value), which determines whether to place the column before or after the target column. @@ -117,15 +123,16 @@ const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` -Note that when using the API, only the [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true. +Note that when using the API, only the [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true. #### 이벤트 -열의 드래그 앤드 드롭 조작을 설정하기 위해 열 이동과 관련된 복수의 이벤트가 제공됩니다. [`columnMovingStart`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingStart), [`columnMoving`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMoving) 및 [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd)가 있습니다. +열의 드래그 앤드 드롭 조작을 설정하기 위해 열 이동과 관련된 복수의 이벤트가 제공됩니다. [`columnMovingStart`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingStart), [`columnMoving`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMoving) 및 [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd)가 있습니다. [`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) 이벤트를 처리하고 열을 새로운 위치로 드롭할 때 일부 사용자 논리를 구현할 수 있습니다. 예를 들면, Change On Year(%) 열 뒤에 카테고리 드롭을 취소할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html @@ -140,8 +147,10 @@ public onColumnMovingEnd(event) { } } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -156,8 +165,10 @@ public onColumnMovingEnd(event) { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -172,31 +183,32 @@ public onColumnMovingEnd(event) { } } ``` + } ### API 참조
    - -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) + +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [검색](search.md)}
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/column-pinning.md b/docs/angular/src/content/kr/grids_templates/column-pinning.md index ff07be26ba..d5c92792d6 100644 --- a/docs/angular/src/content/kr/grids_templates/column-pinning.md +++ b/docs/angular/src/content/kr/grids_templates/column-pinning.md @@ -2,49 +2,49 @@ --- title: Angular Grid Column Pinning | Lock Column | Ignite UI for Angular | Infragistics description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock column or change column order with rich and easy to use API -keywords: lock column, ignite ui for angular, infragistics  +keywords: lock column, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxTreeGrid') { --- title: Angular Tree Grid Column Pinning | Lock Column | Ignite UI for Angular | Infragistics description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock column or change column order with rich and easy to use API -keywords: lock column, ignite ui for angular, infragistics  +keywords: lock column, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxHierarchicalGrid') { --- title: Angular Hierarchical Grid Column Pinning | Lock Column | Ignite UI for Angular | Infragistics description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock column or change column order with rich and easy to use API -keywords: lock column, ignite ui for angular, infragistics  +keywords: lock column, ignite ui for angular, infragistics --- } -### @@igComponent Column Pinning +### @@igComponent Column Pinning A column or multiple columns can be pinned to the left-hand side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the @@igComponent. The Material UI Grid has a built-in column pinning UI, which can be used through the @@igComponent's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. #### 데모 @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -56,6 +56,7 @@ A column or multiple columns can be pinned to the left-hand side of the Angular @@if (igxName === 'IgxGrid') { + ```html @@ -66,8 +67,10 @@ A column or multiple columns can be pinned to the left-hand side of the Angular ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -75,8 +78,10 @@ A column or multiple columns can be pinned to the left-hand side of the Angular ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -84,32 +89,40 @@ A column or multiple columns can be pinned to the left-hand side of the Angular ``` + } @@igComponent의 [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 [`pinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pincolumn) 또는 [`unpinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#unpincolumn) 메소드를 사용하여 열을 필드 이름별로 핀 고정하거나 핀 고정 해제할 수도 있습니다: @@if (igxName === 'IgxGrid') { + ```typescript this.grid.pinColumn("AthleteNumber"); this.grid.unpinColumn("Name"); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript this.treeGrid.pinColumn("Title"); this.treeGrid.unpinColumn("Name"); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript this.hierarchicalGrid.pinColumn("Artist"); this.hierarchicalGrid.unpinColumn("Debut"); ``` + } 두 메소드는 각각 조작이 성공했는지 여부를 나타내는 불 값을 반환합니다. 일반적인 실패 원인으로 열이 이미 원하는 상태인 경우가 있습니다. [`pinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pincolumn)은 결과가 핀 고정 영역이 @@igComponent 자체보다 크거나 같을 경우에도 실패합니다. 다음의 예제를 참조하십시오: @@if (igxName === 'IgxGrid') { + ```html @@ -124,6 +137,7 @@ var succeed = this.grid.pinColumn("AthleteNumber"); // pinning fails and succeed `AthleteNumber` 열을 핀 고정하는 것이 허용되면 핀 고정된 영역은 @@igComponent의 너비보다 커집니다. } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -138,6 +152,7 @@ var succeed = this.treeGrid.pinColumn("Title"); // pinning fails and succeed wil `Title` 열을 핀 고정하는 것이 허용되면 핀 고정된 영역은 @@igComponent의 너비보다 커집니다. } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -156,6 +171,7 @@ var succeed = this.hierarchicalGrid.pinColumn("Artist"); // pinning fails and su 열은 가장 오른쪽에 배치된 핀 고정된 열의 오른쪽에 핀 고정됩니다. [`columnPin`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnPin) 이벤트에서 이벤트 인수인 [`insertAtIndex`]({environment:angularApiUrl}/interfaces/ipincolumneventargs.html#insertatindex) 속성을 원하는 위치 인덱스로 변경하면 핀 고정 열의 순서를 변경할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html ``` @@ -167,8 +183,10 @@ public columnPinning(event) { } } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` @@ -180,8 +198,10 @@ public columnPinning(event) { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } ```typescript public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` + #### Demo @@if (igxName === 'IgxGrid') { - @@ -237,8 +265,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; @@if (igxName === 'IgxHierarchicalGrid') { - @@ -246,8 +274,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; @@if (igxName === 'IgxTreeGrid') { - @@ -336,6 +364,7 @@ This can be done by creating a header template for the column with a custom icon     ``` + } On click of the custom icon the pin state of the related column can be changed using the column's API methods. @@ -350,24 +379,24 @@ public toggleColumn(col: IgxColumnComponent) { @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -375,7 +404,7 @@ public toggleColumn(col: IgxColumnComponent) { ### 핀 고정 제한 -* 열 너비를 백분율(%)로 명시적으로 설정한 경우, 핀 고정 열이 있으면 @@igComponent 자체 및 헤드 내용이 바르게 정렬되지 않습니다. 열 핀 고정 기능이 제대로 작동하려면 열 너비가 픽셀(px)로 설정하거나 @@igComponent에 의해 자동 할당되어야 합니다. +- 열 너비를 백분율(%)로 명시적으로 설정한 경우, 핀 고정 열이 있으면 @@igComponent 자체 및 헤드 내용이 바르게 정렬되지 않습니다. 열 핀 고정 기능이 제대로 작동하려면 열 너비가 픽셀(px)로 설정하거나 @@igComponent에 의해 자동 할당되어야 합니다.
    @@ -385,25 +414,26 @@ public toggleColumn(col: IgxColumnComponent) { #### 경고 -* `@@igxName - 핀 고정 영역이 최대 핀 고정 폭을 초과합니다. 다음 열은 다른 문제를 방지하기 위해 핀 고정 해제되었습니다:... .` - 사용자가 처음에 너무 많은 핀 고정 열을 정의한 경우에 이 경고가 표시됩니다. 처음에 핀 고정된 열의 합계 너비는 @@igComponent 너비의 80%를 넘지 않아야 합니다. 그렇지 않으면 기본적으로 @@igComponent의 제한을 초과하지 않는 최초의 열(정의된 순서)을 취하고 나머지(경고에 나열된 열)는 핀 고정 해제됩니다. @@igComponent에서 핀 고정을 초기화하기 전에 [`columnInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnInit) 이벤트를 사용하여 초기화할 때 일부 열을 수동으로 핀 고정 해제할지 결정하기 위해 자체 논리를 실행할 수 있습니다. 각 열에 트리거됩니다. +- `@@igxName - 핀 고정 영역이 최대 핀 고정 폭을 초과합니다. 다음 열은 다른 문제를 방지하기 위해 핀 고정 해제되었습니다:... .` - 사용자가 처음에 너무 많은 핀 고정 열을 정의한 경우에 이 경고가 표시됩니다. 처음에 핀 고정된 열의 합계 너비는 @@igComponent 너비의 80%를 넘지 않아야 합니다. 그렇지 않으면 기본적으로 @@igComponent의 제한을 초과하지 않는 최초의 열(정의된 순서)을 취하고 나머지(경고에 나열된 열)는 핀 고정 해제됩니다. @@igComponent에서 핀 고정을 초기화하기 전에 [`columnInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnInit) 이벤트를 사용하여 초기화할 때 일부 열을 수동으로 핀 고정 해제할지 결정하기 위해 자체 논리를 실행할 수 있습니다. 각 열에 트리거됩니다.
    @@if (igxName === 'IgxGrid') { -### Styling +### Styling -The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Pinning styling. #### Importing global theme To begin the customization of the Pinning feature, you need to import the `index` file, where all styling functions and mixins are located. + ```scss @import '~igniteui-angular/lib/core/styles/themes/index' ``` #### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired. ```scss $custom-theme: grid-theme( @@ -414,10 +444,10 @@ $custom-theme: grid-theme( $cell-active-border-color: #FFCD0F /* add other features properties here... */ ); -``` +``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -428,9 +458,9 @@ $custom-palette: palette( $primary: $primary-color, $secondary: $secondary-color ); -``` +``` -After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. +After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. ```scss @@ -440,13 +470,14 @@ $custom-theme: grid-theme( $pinned-border-color: color($custom-palette, "secondary", 500), $cell-active-border-color: color($custom-palette, "secondary", 500) ); -``` +``` -The `$custom-theme` contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom `igx-palette` was used and the colors were obtained through its primary and secondary colors, with a given color variant. +The `$custom-theme` contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom `igx-palette` was used and the colors were obtained through its primary and secondary colors, with a given color variant. #### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`. +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`. + ```scss $custom-grid-schema: extend($_light-grid,( pinned-border-width: 5px, @@ -454,8 +485,10 @@ $custom-grid-schema: extend($_light-grid,( pinned-border-color: color:("secondary", 500), cell-active-border-color: color:("secondary", 500) )); -``` -In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. +``` + +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. + ```scss $my-custom-schema: extend($light-schema, ( igx-grid: $custom-grid-schema @@ -467,7 +500,8 @@ $custom-theme: grid-theme( ``` #### Applying the custom theme -The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: +The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + ```scss @include grid($custom-theme); ``` @@ -480,7 +514,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. >[!NOTE] - >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component: ```scss :host { @@ -489,36 +523,37 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo } } ``` + #### Demo - } ### API 참조 -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/column-resizing.md b/docs/angular/src/content/kr/grids_templates/column-resizing.md index b1b4ab902e..e437f67d2e 100644 --- a/docs/angular/src/content/kr/grids_templates/column-resizing.md +++ b/docs/angular/src/content/kr/grids_templates/column-resizing.md @@ -2,7 +2,7 @@ --- title: 열 크기 조정 컴포넌트- 네이티브 Angular | Ignite UI for Angular description: With deferred column resizing, see a temporary resize indicator while the drag operation is in effect with using the Ignite UI for Angular Column Resizing Component. -keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Column Resizing, Deferred Column Reszing, Grid Column Resizing, Angular Grid Column Resizing, Angular Data Table Column Resizing +keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Column Resizing, Deferred Column Resizing, Grid Column Resizing, Angular Grid Column Resizing, Angular Data Table Column Resizing _language: kr --- } @@ -10,7 +10,7 @@ _language: kr --- title: 열 크기 조정 컴포넌트- 네이티브 Angular | Ignite UI for Angular description: With deferred column resizing, see a temporary resize indicator while the drag operation is in effect with using the Ignite UI for Angular Column Resizing Component. -keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Tree Grid, Angular Tree Table, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular High Performance Tree Grid, Angular High Performance Tree Table, Column Resizing, Deferred Column Reszing, Tree Grid Column Resizing, Angular Tree Grid Column Resizing, Angular Tree Table Column Resizing +keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Tree Grid, Angular Tree Table, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular High Performance Tree Grid, Angular High Performance Tree Table, Column Resizing, Deferred Column Resizing, Tree Grid Column Resizing, Angular Tree Grid Column Resizing, Angular Tree Table Column Resizing _language: kr --- } @@ -18,7 +18,7 @@ _language: kr --- title: 열 크기 조정 컴포넌트- 네이티브 Angular | Ignite UI for Angular description: With deferred column resizing, see a temporary resize indicator while the drag operation is in effect with using the Ignite UI for Angular Column Resizing Component. -keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Hierarchical Grid, Angular Hierarchical Table, Angular Hierarchical Grid component, Angular Hierarchical Table component, Angular Hierarchical Grid control, Angular Hierarchical Table control, Angular High Performance Hierarchical Grid, Angular High Performance Hierarchical Table, Column Resizing, Deferred Column Reszing, Hierarchical Grid Column Resizing, Angular Hierarchical Grid Column Resizing, Angular Hierarchical Table Column Resizing +keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Hierarchical Grid, Angular Hierarchical Table, Angular Hierarchical Grid component, Angular Hierarchical Table component, Angular Hierarchical Grid control, Angular Hierarchical Table control, Angular High Performance Hierarchical Grid, Angular High Performance Hierarchical Table, Column Resizing, Deferred Column Resizing, Hierarchical Grid Column Resizing, Angular Hierarchical Grid Column Resizing, Angular Hierarchical Table Column Resizing _language: kr --- } @@ -32,8 +32,8 @@ _language: kr @@if (igxName === 'IgxGrid') { - @@ -41,8 +41,8 @@ _language: kr } @@if (igxName === 'IgxTreeGrid') { - @@ -50,8 +50,8 @@ _language: kr } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -61,18 +61,23 @@ _language: kr **열 크기 조정**은 열 단위 수준에서도 사용할 수 있는데 즉, [**@@igSelector**]({environment:angularApiUrl}/classes/@@igTypeDoc.html)에 크기를 조정 가능한 열 및 크기를 조정할 수 없는 열을 혼합하여 사용할 수 있습니다. 이는 [`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)의 [`resizable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#resizable) 입력을 통해 제어할 수 있습니다. @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } [`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 [`columnResized`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnResized) 이벤트를 처리하고 열의 크기를 조정할 때 일부 사용자 논리를 구현할 수 있습니다. [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) 객체뿐 아니라 이전 및 새로운 열 너비는 이벤트 인수를 통해 공개됩니다. @@if (igxName === 'IgxGrid') { + ```html @@ -87,8 +92,10 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -103,8 +110,10 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -112,6 +121,7 @@ public onResize(event) { ... ``` + ```typescript public onResize(event) { this.col = event.column; @@ -119,6 +129,7 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + } #### Resizing columns in pixels/percentages @@ -128,6 +139,7 @@ Depending on the user scenario, the column width may be defined in pixels, perce This means that the following configuration is possible: @@if (igxName === 'IgxGrid') { + ```html @@ -135,8 +147,10 @@ This means that the following configuration is possible: ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -144,8 +158,10 @@ This means that the following configuration is possible: ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -155,6 +171,7 @@ This means that the following configuration is possible: ... ``` + } >[!NOTE] @@ -173,16 +190,20 @@ When resizing columns with width in percentages, the horizontal amount of the mo 최소 및 최대 허용 열 너비를 구성할 수도 있습니다. 이는 [`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)의 [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minwidth) 및 [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxwidth) 입력을 통해 제어할 수 있습니다. 이 경우, 크기 조정 인디케이터의 드래그 조작은 열이 [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minwidth) 및 [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxwidth)에 의해 정의된 범위 이외로 크기를 조정할 수 없음을 사용자에게 알리도록 제한됩니다. @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } > [!NOTE] @@ -193,31 +214,39 @@ Mixing the minimum and maximum column width value types (pixels or percentages) This means the following configurations are possible: @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } or @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } #### 더블 클릭으로 자동 크기 열 조정 @@ -227,44 +256,48 @@ or 또한, [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)의 [`autosize()`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#autosize) 메소드를 사용하여 동적으로 열 크기를 자동 조정할 수 있습니다. @@if (igxName !== 'IgxHierarchicalGrid') { + ```typescript @ViewChild('@@igObjectRef') @@igObjectRef: @@igxNameComponent; let column = this.@@igObjectRef.columnList.filter(c => c.field === 'ID')[0]; column.autosize(); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript @ViewChild('@@igObjectRef') @@igObjectRef: @@igxNameComponent; let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0]; column.autosize(); ``` + } ### API 참조
    -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/conditional-cell-styling.md b/docs/angular/src/content/kr/grids_templates/conditional-cell-styling.md index cc745a8a22..29a4d8058f 100644 --- a/docs/angular/src/content/kr/grids_templates/conditional-cell-styling.md +++ b/docs/angular/src/content/kr/grids_templates/conditional-cell-styling.md @@ -1,20 +1,20 @@ @@if (igxName === 'IgxGrid') { --- -title: Angular Conditional Cell Styling | Ignite UI for Angular | Infragistics  +title: Angular Conditional Cell Styling | Ignite UI for Angular | Infragistics description: Define a variety of styles with the help of the conditional styling feature of the Material UI grid, by using different material styling guidelines with a rich API keywords: conditional styling, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxTreeGrid') { --- -title: Angular Conditional Cell Styling | Ignite UI for Angular | Infragistics  +title: Angular Conditional Cell Styling | Ignite UI for Angular | Infragistics description: Define a variety of styles with the help of the conditional styling feature of the Material UI grid, by using different material styling guidelines with a rich API keywords: conditional styling, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxHierarchicalGrid') { --- -title: Angular Conditional Cell Styling | Ignite UI for Angular | Infragistics  +title: Angular Conditional Cell Styling | Ignite UI for Angular | Infragistics description: Define a variety of styles with the help of the conditional styling feature of the Material UI grid, by using different material styling guidelines with a rich API keywords: conditional styling, ignite ui for angular, infragistics --- @@ -29,24 +29,24 @@ This can be achieved by setting the [`IgxColumnComponent`]({environment:angularA @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { -{/* TODO */} +{/_TODO_/} }
    @@ -54,12 +54,15 @@ This can be achieved by setting the [`IgxColumnComponent`]({environment:angularA [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellclasses) 입력을 설정하고 사용자 규칙을 정의하여 @@igxName 셀의 조건부 스타일을 지정할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid'){ + ```html @@ -69,14 +72,16 @@ This can be achieved by setting the [`IgxColumnComponent`]({environment:angularA ``` + } @@if (igxName === 'IgxHierarchicalGrid') { -{/* TODO */} +{/_TODO_/} } [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellclasses) 입력은 키 값 쌍을 포함하는 객체 리터럴을 허용하며 여기서 키는 CSS 클래스의 이름이고 값은 불 또는 불 값을 반환하는 콜백 함수입니다. @@if (igxName === 'IgxGrid') { + ```typescript // sample.component.ts @@ -107,8 +112,10 @@ public beatsPerMinuteClasses = { } } ``` + } @@if (igxName === 'IgxTreeGrid'){ + ```typescript // sample.component.ts @@ -139,9 +146,10 @@ public priceClasses = { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { -{/* TODO */} +{/_TODO_/} } **::ng-deep** 또는 **`ViewEncapsulation.None`**을 사용하여 사용자 스타일을 현재 컴포넌트와 그 하위 요소를 통해 강제로 적용할 수 있습니다. @@ -149,32 +157,32 @@ public priceClasses = { ### API 참조
    -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [편집](editing.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [열 숨기기](column_hiding.md) -* [선택](selection.md) -* [검색](search.md) -* [도구 모음](toolbar.md) -* [복수 열 헤더](multi-column-headers.md) -* [표시 밀도](display-density.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [편집](editing.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [열 숨기기](column_hiding.md) +- [선택](selection.md) +- [검색](search.md) +- [도구 모음](toolbar.md) +- [복수 열 헤더](multi-column-headers.md) +- [표시 밀도](display-density.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/display-density.md b/docs/angular/src/content/kr/grids_templates/display-density.md index 98425889ce..5fa4ace9d2 100644 --- a/docs/angular/src/content/kr/grids_templates/display-density.md +++ b/docs/angular/src/content/kr/grids_templates/display-density.md @@ -32,8 +32,8 @@ _language: kr @@if (igxName === 'IgxGrid') { - @@ -41,8 +41,8 @@ _language: kr } @@if (igxName === 'IgxTreeGrid') { - @@ -50,8 +50,8 @@ _language: kr } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -66,16 +66,19 @@ _language: kr <@@igSelector #@@igObjectRef [data]="data" [displayDensity]="'cosy'" > ``` + 또는 + ```typescript ... this.@@igObjectRef.displayDensity = "cosy"; ... ``` + 이제 각 옵션을 @@igComponent 컴포넌트에 반영하는 방법을 자세하게 살펴 보겠습니다. 서로 다른 표시 밀도 옵션 사이에서 전환하면 각 @@igComponent 요소의 높이 및 해당 패딩이 변경됩니다. 또한, 사용자 열 [**width**]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)를 적용하는 경우 왼쪽 및 오른쪽 패딩 합계보다 커야 함에 주의하십시오. - - **comfortable** - 이것은 밀도가 가장 낮고 행 높이가 `50px`인 기본 @@igComponent 표시 밀도입니다. 왼쪽 및 오른쪽 패딩은 `24px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `48px`임; - - **cosy** - 이것은 행 높이가 `40px`인 중간 밀도입니다. 왼쪽 및 오른쪽 패딩은 `16px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `32px`임; - - **compact** - 이것은 행 높이가 `32px`인 최고 밀도입니다. 왼쪽 및 오른쪽 패딩은 `12px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `24px`임; +- **comfortable** - 이것은 밀도가 가장 낮고 행 높이가 `50px`인 기본 @@igComponent 표시 밀도입니다. 왼쪽 및 오른쪽 패딩은 `24px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `48px`임; +- **cosy** - 이것은 행 높이가 `40px`인 중간 밀도입니다. 왼쪽 및 오른쪽 패딩은 `16px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `32px`임; +- **compact** - 이것은 행 높이가 `32px`인 최고 밀도입니다. 왼쪽 및 오른쪽 패딩은 `12px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `24px`임; > [!NOTE] > 현재 크기를 재정의 할 수는 **없습니다**. @@ -117,6 +120,7 @@ public ngOnInit() { 이제 마크업을 추가할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html
    @@ -171,8 +175,10 @@ public ngOnInit() { ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html
    @@ -219,8 +225,10 @@ public ngOnInit() { ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html
    @@ -260,6 +268,7 @@ public ngOnInit() { ``` + } 마지막으로 밀도를 실제로 적용하기 위해 필요한 논리를 실행합니다: @@ -276,8 +285,8 @@ public selectDensity(event) { [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 @@igComponent 행 높이를 변경할 수 있도록 제공하는 다른 옵션은 [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) 속성입니다. 이 속성이 [`displayDensity`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#displaydensity) 옵션과 함께 @@igComponent 레이아웃에 어떻게 영향을 미치는지 살펴 보겠습니다. 다음 사항에 유의하십시오: - - **[rowHeight]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight)가 지정된 경우,** [`displayDensity`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#displaydensity) 옵션은 행 높이에 영향을 **주지 않습니다**; - - [`displayDensity`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#displaydensity)는 상기의 설명대로 **그리드의 나머지 요소에 모두 영향을 줍니다**; +- **[rowHeight]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight)가 지정된 경우,** [`displayDensity`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#displaydensity) 옵션은 행 높이에 영향을 **주지 않습니다**; +- [`displayDensity`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#displaydensity)는 상기의 설명대로 **그리드의 나머지 요소에 모두 영향을 줍니다**; 이제 샘플을 확장하고 @@igComponent에 [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) 속성을 추가할 수 있습니다: @@ -287,34 +296,35 @@ public selectDensity(event) { .............. ``` +
    ### API 참조
    -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
    ### 추가 리소스 -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [편집](editing.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [편집](editing.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [검색](search.md)}
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/editing.md b/docs/angular/src/content/kr/grids_templates/editing.md index 625dc0385c..8aa8d1f7b0 100644 --- a/docs/angular/src/content/kr/grids_templates/editing.md +++ b/docs/angular/src/content/kr/grids_templates/editing.md @@ -29,53 +29,53 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - }
    -특정 셀에서 편집 모드에 들어가려면 먼저 열을 [`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)로 설정해야 합니다. 데이터 유형별 *편집 템플릿*을 사용하려면 열 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype) 속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴 보겠습니다. +특정 셀에서 편집 모드에 들어가려면 먼저 열을 [`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)로 설정해야 합니다. 데이터 유형별 _편집 템플릿_을 사용하려면 열 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype) 속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴 보겠습니다. - - `string` 데이터 형식의 경우 기본 템플릿은 [**igxInput**]({environment:angularApiUrl}/classes/igxinputdirective.html)을 사용합니다 - - `number` 데이터 유형의 경우 기본 템플릿은 **[igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) type="number"**를 사용하며, 숫자로 분석할 수 없는 값으로 셀을 업데이트한 경우에는 변경이 취소되고 셀 값은 **0**으로 설정됩니다. - - `date` 데이터 형식의 경우 기본 템플릿은 [**igx-date-picker**]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)를 사용합니다 - - `boolean` 데이터 형식의 경우 기본 템플릿은 [**igx-checkbox**]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)를 사용합니다 +- `string` 데이터 형식의 경우 기본 템플릿은 [**igxInput**]({environment:angularApiUrl}/classes/igxinputdirective.html)을 사용합니다 +- `number` 데이터 유형의 경우 기본 템플릿은 **[igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) type="number"**를 사용하며, 숫자로 분석할 수 없는 값으로 셀을 업데이트한 경우에는 변경이 취소되고 셀 값은 **0**으로 설정됩니다. +- `date` 데이터 형식의 경우 기본 템플릿은 [**igx-date-picker**]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)를 사용합니다 +- `boolean` 데이터 형식의 경우 기본 템플릿은 [**igx-checkbox**]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)를 사용합니다 편집 가능한 셀이 다음 중 하나의 방법으로 포커스되어 있는 경우, 특정 셀에서 편집 모드로 들어갈 수 있습니다: - - 더블 클릭; - - 원클릭 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 원클릭으로 편집 모드에 들어갑니다. 이전에 선택한 셀이 편집 모드에 있지 않은 경우, 원클릭을 하면 편집 모드에 들어가지 않고 셀이 선택됩니다. - - `Enter` 키를 누름; - - `F2` 키를 누름; +- 더블 클릭; +- 원클릭 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 원클릭으로 편집 모드에 들어갑니다. 이전에 선택한 셀이 편집 모드에 있지 않은 경우, 원클릭을 하면 편집 모드에 들어가지 않고 셀이 선택됩니다. +- `Enter` 키를 누름; +- `F2` 키를 누름; 다음 방법 중 하나를 사용하여 **변경을 확정하지 않고** 편집 모드를 종료할 수 있습니다: - - `Escape` 키를 누름; - - *정렬*, *필터링*, *검색*, *숨기기* 조작을 실행할 때; +- `Escape` 키를 누름; +- _정렬_, _필터링_, _검색_, _숨기기_ 조작을 실행할 때; 다음 방법 중 하나를 사용하여 편집 모드를 종료하고 변경을 **확정**할 수 있습니다: - - `Enter` 키를 누름; - - `F2` 키를 누름; - - `Tab` 키를 누름; - - 다른 셀을 원클릭 - @@igComponent의 다른 셀을 클릭하면 변경이 제출됩니다. - - 페이징, 크기 조정, 핀 고정 또는 이동 등의 조작은 편집 모드를 종료하고 변경 사항이 확정됩니다. +- `Enter` 키를 누름; +- `F2` 키를 누름; +- `Tab` 키를 누름; +- 다른 셀을 원클릭 - @@igComponent의 다른 셀을 클릭하면 변경이 제출됩니다. +- 페이징, 크기 조정, 핀 고정 또는 이동 등의 조작은 편집 모드를 종료하고 변경 사항이 확정됩니다. > [!NOTE] > 셀은 수직 또는 수평으로 스크롤하거나 @@igComponent 이외를 클릭해도 편집 모드로 유지됩니다. 이것은 셀 편집과 행 편집 모두에 유효합니다. @@ -83,6 +83,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation 기본 키가 정의되어 있는 경우에만 @@igxName API를 통해 셀 값을 수정할 수도 있습니다. @@if (igxName === 'IgxGrid') { + ```typescript ... public updateCell() { @@ -90,8 +91,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation } ... ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript ... public updateCell() { @@ -99,8 +102,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation } ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript ... public updateCell() { @@ -108,12 +113,14 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation } ... ``` + } 업데이트하려는 셀이 @@igComponent의 표시 컨테이너 외부에 있는 경우 새로운 값이 제출되지 않습니다. 셀을 업데이트하는 또 다른 방법은 [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html)의 [`update`]({environment:angularApiUrl}/classes/igxgridcell.html#update) 메소드를 직접 호출하는 것입니다: @@if (igxName === 'IgxGrid') { + ```typescript ... public updateCell() { @@ -124,8 +131,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation } ... ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript ... public updateCell() { @@ -136,8 +145,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation } ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript ... public updateCell() { @@ -148,6 +159,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation } ... ``` + } @@if (igxName === 'IgxGrid') { @@ -166,14 +178,17 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation @@igComponent 컴포넌트는 제공된 데이터를 데이터 소스 자체에 추가하는 [`addRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#addrow) 메소드를 제공합니다. @@if (igxName === 'IgxGrid') { + ```typescript // Adding a new record // Assuming we have a `getNewRecord` method returning the new row data. const record = this.getNewRecord(); this.grid.addRow(record); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript public addNewChildRow() { // Adding a new record @@ -183,8 +198,10 @@ public addNewChildRow() { this.treeGrid.addRow(record, 1); } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript public addRow() { // Adding a new record @@ -193,6 +210,7 @@ public addRow() { this.hierarchicalGrid.addRow(record, 1); } ``` + } #### @@igComponent에 데이터를 업데이트 @@ -200,6 +218,7 @@ public addRow() { @@igComponent에 데이터를 업데이트하는 것은 [`updateRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updaterow) 및 [`updateCell`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updatecell) 메소드를 통해 이루어지며 **그리드의 기본 키가 정의되어 있는 경우에만 실행됩니다**. 또한, `update` 메소드를 통해 셀 및/또는 행 값을 직접 업데이트할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```typescript // Updating the whole row this.grid.updateRow(newData, this.selectedCell.cellID.rowID); @@ -214,8 +233,10 @@ this.selectedCell.update(newData); const row = this.grid.getRowByKey(rowID); row.update(newData); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript // Updating the whole row this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID); @@ -230,8 +251,10 @@ this.selectedCell.update(newData); const row = this.treeGrid.getRowByKey(rowID); row.update(newData); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript // Updating the whole row this.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID); @@ -246,6 +269,7 @@ this.selectedCell.update(newData); const row = this.hierarchicalGrid.getRowByKey(rowID); row.update(newData); ``` + } #### @@igComponent에서 데이터 삭제 @@ -253,6 +277,7 @@ row.update(newData); [`deleteRow()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deleterow) 메소드는 기본 키가 정의 된 경우에만 지정된 행을 제거합니다. @@if (igxName === 'IgxGrid') { + ```typescript // Delete row through Grid API this.grid.deleteRow(this.selectedCell.cellID.rowID); @@ -260,8 +285,10 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID); const row = this.grid.getRowByIndex(rowIndex); row.delete(); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript // Delete row through Tree Grid API this.treeGrid.deleteRow(this.selectedCell.cellID.rowID); @@ -269,8 +296,10 @@ this.treeGrid.deleteRow(this.selectedCell.cellID.rowID); const row = this.treeGrid.getRowByIndex(rowIndex); row.delete(); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript // Delete row through Grid API this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); @@ -278,8 +307,10 @@ this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); const row = this.hierarchicalGrid.getRowByIndex(rowIndex); row.delete(); ``` + } **@@igSelector**와 관계 없이 예를 들면 버튼 클릭 등의 사용자 상호 작용에 연결할 수 있습니다: + ```html ``` @@ -288,31 +319,31 @@ row.delete(); ### API 참조 -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) -* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) -* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) -* [IgxDatePickerComponent 스타일]({environment:sassApiUrl}/themes#function-igx-date-picker-theme) -* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) -* [IgxCheckboxComponent 스타일]({environment:sassApiUrl}/themes#function-checkbox-theme) -* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay 스타일]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) +- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) +- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) +- [IgxDatePickerComponent 스타일]({environment:sassApiUrl}/themes#function-igx-date-picker-theme) +- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) +- [IgxCheckboxComponent 스타일]({environment:sassApiUrl}/themes#function-checkbox-theme) +- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) +- [IgxOverlay 스타일]({environment:sassApiUrl}/themes#function-overlay-theme) ### 추가 리소스
    -* [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [검색](search.md)} diff --git a/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md b/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md index 00e87680b1..2e7663fb01 100644 --- a/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md +++ b/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md @@ -31,24 +31,24 @@ Ignite UI for Angular의 @@igComponent 컴포넌트는 Excel과 유사한 필터 @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -56,45 +56,52 @@ Ignite UI for Angular의 @@igComponent 컴포넌트는 Excel과 유사한 필터
    -###사용 방법 +### 사용 방법 Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowfiltering)을 `true`로 설정하고 [`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filtermode)를 `excelStyleFilter`로 설정해야 합니다. @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } -###상호 작용 +### 상호 작용 특정 열의 필터 메뉴를 열려면 헤더의 필터 아이콘을 클릭해야 합니다. 필터링 기능과 함께 열에서 정렬, 핀 고정, 이동 또는 숨기기가 설정된 경우, 켜져 있는 기능 버튼이 표시됩니다. -필터가 적용되지 않으면 목록의 모든 항목이 선택됩니다. 목록 위의 입력으로부터 필터링할 수 있습니다. 데이터를 필터링하려면 목록에서 항목을 선택/선택 취소하고 Apply 버튼을 클릭합니다. 목록 항목에 적용된 필터링은 `equals` 연산자로 필터 식을 만들고 각 식간의 논리 연산자는 [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)입니다. 필터를 삭제하려면 Select All 항목을 선택한 다음 Apply 버튼을 누릅니다. +필터가 적용되지 않으면 목록의 모든 항목이 선택됩니다. 목록 위의 입력으로부터 필터링할 수 있습니다. 데이터를 필터링하려면 목록에서 항목을 선택/선택 취소하고 Apply 버튼을 클릭합니다. 목록 항목에 적용된 필터링은 `equals` 연산자로 필터 식을 만들고 각 식간의 논리 연산자는 [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)입니다. 필터를 삭제하려면 Select All 항목을 선택한 다음 Apply 버튼을 누릅니다. 다른 식으로 필터를 적용하려면 **Text 필터**를 클릭하고 특정 열에 사용 가능한 모든 필터 연산자의 하위 메뉴가 열립니다. 이들 중 하나를 선택하면 사용자 필터 대화상자가 열리며 다른 필터 및 논리 연산자를 사용하여 원하는 대로 식을 추가할 수 있습니다. 필터를 삭제할 수 있는 clear 버튼도 있습니다.
    -###메뉴 기능 구성 +### 메뉴 기능 구성 정렬, 이동, 핀 고정 및 숨기기 기능은 필터 메뉴에서 제거할 수 있습니다. 제어하는 입력은 다음과 같습니다: [`sortable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortable), [`movable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#movable), [`disablePinning`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablepinning), [`disableHiding`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding). @@if (igxName === 'IgxGrid') { + ```html @@ -115,6 +122,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. 아래 샘플에서 'Product Name' 및 'Discontinued' 열에서는 4가지 기능이 모두 활성화되어 있으며, 'Quantity Per Unit' 에서는 4 가지 모두 비활성화되어 있으며, 'Unit Price' 에서는 정렬 및 이동만 활성화되어 있으며, 'Order Date' 에서는 고정 및 숨기기만 활성화되어 있습니다. } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -145,6 +153,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. 아래 샘플에서 'Product Name' 및 'Discontinued' 열에서는 4가지 기능이 모두 활성화되어 있으며, 'Unit Price'에서는 모두 비활성화되어 있으며, 'Added Date'에서는 고정 및 숨기기만 활성화되어 있습니다. } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -191,24 +200,24 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -219,6 +228,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. 열의 정렬, 이동, 핀 고정 및 숨기기 기능을 유지하면서 Excel 스타일 필터 메뉴에서 항목을 제거하는 경우, 각 조작에 대해 그리드에 템플릿을 추가할 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html Sorting Template @@ -240,6 +250,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -271,6 +282,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -322,24 +334,24 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -350,25 +362,25 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. ### API 참조
    -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/export-excel.md b/docs/angular/src/content/kr/grids_templates/export-excel.md index 36ff1a32d1..71e4ff9067 100644 --- a/docs/angular/src/content/kr/grids_templates/export-excel.md +++ b/docs/angular/src/content/kr/grids_templates/export-excel.md @@ -33,22 +33,22 @@ The Excel Exporter service can export data to excel from the @@igxName. The data @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - {/* TODO */} + {/_TODO_/} }
    @@ -127,13 +127,13 @@ this.excelExportService.export(this.@@igObjectRef, new IgxExcelExporterOptions(" Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함되어 있습니다. -* [IgxExcelExporterService API]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) -* [IgxExcelExporterOptions API]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) +- [IgxExcelExporterService API]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) +- [IgxExcelExporterOptions API]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) 사용된 추가 컴포넌트: -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
    @@ -142,5 +142,5 @@ Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/filtering.md b/docs/angular/src/content/kr/grids_templates/filtering.md index 624a93d370..28f241348e 100644 --- a/docs/angular/src/content/kr/grids_templates/filtering.md +++ b/docs/angular/src/content/kr/grids_templates/filtering.md @@ -28,24 +28,24 @@ Angular grid filtering enables you to display only the records which meet specif @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -53,19 +53,20 @@ Angular grid filtering enables you to display only the records which meet specif
    -###상호 작용 +### 상호 작용 특정 열에 필터 행을 열려면 헤더 아래에 있는 '필터' 칩을 클릭해야 합니다. 조건을 추가하려면 입력 왼쪽에 있는 드롭다운을 사용하여 필터 오퍼랜드를 선택하고 값을 입력해야 합니다. `number` 및 `date` 열에는 'Equals'이 기본값으로, `string`에는 'Contains', `boolean`에는 'All'이 선택됩니다. 'Enter'를 누르면 조건이 확정되고 다른 조건을 추가할 수 있습니다. '조건' 칩 사이에는 논리 연산자를 결정하는 드롭다운이 있으며 'AND'가 기본값으로 선택됩니다. 조건을 삭제하려면 칩의 'X' 버튼을 클릭하고 편집하려면 칩을 선택해야 하며, 입력은 칩의 데이터로 생성됩니다. 필터 행이 열려 있을 때에 필터 가능한 열의 헤더를 클릭하여 필터 열을 선택하고 필터 조건을 추가할 수 있습니다. 일부 필터링 조건이 열에 적용되어 필터 행이 닫혀 있는 동안 칩의 닫기 버튼을 클릭하여 조건을 삭제하거나 칩 중 하나를 선택하여 필터 행을 열 수 있습니다. 모든 조건을 표시할 공간이 충분하지 않은 경우, 조건 수를 나타내는 배지가 표시된 필터 아이콘이 표시됩니다. 필터 행을 열기 위해 클릭할 수도 있습니다. -###사용 방법 +### 사용 방법 기본적으로 제공되는 기본 필터링 및 표준 필터링 조건이 있으며 개발자가 사용자 구현으로 대체 할 수도 있습니다. 또한, 사용자 필터링 조건을 간단히 플러그인할 수 있습니다. @@igComponent는 현재 간단한 필터링 UI뿐만 아니라 더 복잡한 필터링 옵션을 제공합니다. 열에서 설정된 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype)에 따라 적절한 [**필터링 처리**]({environment:angularApiUrl}/interfaces/ifilteringoperation.html)의 설정이 필터 UI 드롭다운에 로딩됩니다. 또한, [`ignoreCase`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 및 초기 [`condition`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html#condition) 속성을 설정할 수 있습니다. -필터링 기능은 [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowfiltering) 입력을 `true`로 설정하여 @@igComponent 컴포넌트에 활성화할 수 있습니다. 기본값 [`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filtermode)는 `quickFilter`이며 실행 시에는 변경할 수 **없습니다**. 특정 열에 대해 이 기능을 비활성화하려면 [`filterable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable) 입력을 `false`로 설정합니다. +필터링 기능은 [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowfiltering) 입력을 `true`로 설정하여 @@igComponent 컴포넌트에 활성화할 수 있습니다. 기본값 [`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filtermode)는 `quickFilter`이며 실행 시에는 변경할 수 **없습니다**. 특정 열에 대해 이 기능을 비활성화하려면 [`filterable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable) 입력을 `false`로 설정합니다. @@if (igxName !== 'IgxHierarchicalGrid') { + ```html <@@igSelector #grid1 [data]="data" [autoGenerate]="false" [allowFiltering]="true"> @@ -74,8 +75,10 @@ Angular grid filtering enables you to display only the records which meet specif ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -84,6 +87,7 @@ Angular grid filtering enables you to display only the records which meet specif ... ``` + } > [!NOTE] @@ -91,14 +95,14 @@ Angular grid filtering enables you to display only the records which meet specif @@igComponent API를 통해 모든 열 또는 열 조합을 필터링할 수 있습니다. @@igComponent는 이 작업에 복수의 메소드를 공개합니다 - [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter), [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterglobal) 및 [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearfilter). -* [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) - 단일 열 또는 열 조합을 필터링합니다. +- [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) - 단일 열 또는 열 조합을 필터링합니다. 공개된 5개의 필터링 오퍼랜드 클래스가 있습니다: - - [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html): 기본 필터링 오퍼랜드이며 사용자 필터링 조건을 정의할 때 상속될 수 있습니다. - - [`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html) `boolean` 유형의 모든 기본 필터링 조건을 정의합니다. - - [`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html) `numeric` 유형의 모든 기본 필터링 조건을 정의합니다. - - [`IgxStringFilteringOperand`]({environment:angularApiUrl}/classes/igxstringfilteringoperand.html) `string` 유형의 모든 기본 필터링 조건을 정의합니다. - - [`IgxDateFilteringOperand`]({environment:angularApiUrl}/classes/igxdatefilteringoperand.html) `Date` 유형의 모든 기본 필터링 조건을 정의합니다. +- [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html): 기본 필터링 오퍼랜드이며 사용자 필터링 조건을 정의할 때 상속될 수 있습니다. +- [`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html) `boolean` 유형의 모든 기본 필터링 조건을 정의합니다. +- [`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html) `numeric` 유형의 모든 기본 필터링 조건을 정의합니다. +- [`IgxStringFilteringOperand`]({environment:angularApiUrl}/classes/igxstringfilteringoperand.html) `string` 유형의 모든 기본 필터링 조건을 정의합니다. +- [`IgxDateFilteringOperand`]({environment:angularApiUrl}/classes/igxdatefilteringoperand.html) `Date` 유형의 모든 기본 필터링 조건을 정의합니다. ```typescript // Single column filtering @@ -139,7 +143,7 @@ gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTre this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree; ``` -* [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterglobal) - 기존의 필터를 모두 지우고 모든 @@igComponent 열에 새로운 필터링 조건을 적용합니다. +- [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterglobal) - 기존의 필터를 모두 지우고 모든 @@igComponent 열에 새로운 필터링 조건을 적용합니다. ```typescript // Filter all cells for a value which contains `myproduct` @@ -147,7 +151,7 @@ this.@@igObjectRef.filteringLogic = FilteringLogic.Or; this.@@igObjectRef.filterGlobal("myproduct", IgxStringFilteringOperand.instance().condition("contains"), false); ``` -* [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearfilter) - 대상 열에서 적용된 모든 필터링을 삭제합니다. 인수 없이 호출하면 모든 열의 필터링이 지워집니다. +- [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearfilter) - 대상 열에서 적용된 모든 필터링을 삭제합니다. 인수 없이 호출하면 모든 열의 필터링이 지워집니다. ```typescript // Remove the filtering state from the ProductName column @@ -271,7 +275,9 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { } } ``` + @@if (igxName !== 'IgxHierarchicalGrid') { + ```html @@ -286,8 +292,10 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -303,27 +311,28 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { ...     ``` + } @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - - @@ -334,24 +343,24 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - - @@ -359,42 +368,42 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { @@if (igxName !== 'IgxHierarchicalGrid') { #### 6.1.0의 주요 변경 사항 -* @@igxName `filteringExpressions` 속성이 삭제되었습니다. 대신 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 를 사용하십시오. -* `filter_multiple` 메소드가 삭제되었습니다. 대신에 [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드 및 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 속성을 사용하십시오. -* [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드에는 새로운 구문이 있습니다. 다음의 매개 변수를 허용할 수 있습니다: - * `name` - 필터링할 열의 이름. - * `value` - 필터링에 사용할 값. - * `conditionOrExpressionTree`(옵션) - 이 매개 변수는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 또는 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) 유형의 객체를 받아들입니다. 간단한 필터링만 필요한 경우 필터링 처리를 인수로 전달할 수 있습니다. 고급 필터링의 경우, 복잡한 필터링 로직을 포함하는 식 트리를 인수로 전달할 수 있습니다. - * `ignoreCase`(옵션) - 필터링이 대/소문자를 구분하는지 여부. -* [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) 이벤트에는 이제 필터링된 열의 필터링 상태를 포함하는 유형 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html)의 매개 변수가 하나만 있습니다. -* 필터링 오퍼랜드: [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 조건 속성은 필터링 조건 메소드에 직접 참조하지 않고 대신에 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html)을 참조하게 됩니다. -* [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)는 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) 클래스 참조를 사용하는 [`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters) 속성을 공개합니다. -* 사용자 필터는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 유형의 작업으로 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html)의 [`operations`]({environment:angularApiUrl}/classes/igxfilteringoperand.html#operations) 속성을 생성하여 @@igComponent 열에 제공할 수 있습니다. +- @@igxName `filteringExpressions` 속성이 삭제되었습니다. 대신 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 를 사용하십시오. +- `filter_multiple` 메소드가 삭제되었습니다. 대신에 [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드 및 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 속성을 사용하십시오. +- [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드에는 새로운 구문이 있습니다. 다음의 매개 변수를 허용할 수 있습니다: + - `name` - 필터링할 열의 이름. + - `value` - 필터링에 사용할 값. + - `conditionOrExpressionTree`(옵션) - 이 매개 변수는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 또는 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) 유형의 객체를 받아들입니다. 간단한 필터링만 필요한 경우 필터링 처리를 인수로 전달할 수 있습니다. 고급 필터링의 경우, 복잡한 필터링 로직을 포함하는 식 트리를 인수로 전달할 수 있습니다. + - `ignoreCase`(옵션) - 필터링이 대/소문자를 구분하는지 여부. +- [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) 이벤트에는 이제 필터링된 열의 필터링 상태를 포함하는 유형 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html)의 매개 변수가 하나만 있습니다. +- 필터링 오퍼랜드: [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 조건 속성은 필터링 조건 메소드에 직접 참조하지 않고 대신에 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html)을 참조하게 됩니다. +- [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)는 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) 클래스 참조를 사용하는 [`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters) 속성을 공개합니다. +- 사용자 필터는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 유형의 작업으로 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html)의 [`operations`]({environment:angularApiUrl}/classes/igxfilteringoperand.html#operations) 속성을 생성하여 @@igComponent 열에 제공할 수 있습니다. }
    ### API 참조
    -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/keyboard-navigation.md b/docs/angular/src/content/kr/grids_templates/keyboard-navigation.md index 427b910fcb..a89fc9fb50 100644 --- a/docs/angular/src/content/kr/grids_templates/keyboard-navigation.md +++ b/docs/angular/src/content/kr/grids_templates/keyboard-navigation.md @@ -26,31 +26,31 @@ Keyboard navigation is available by default in any grid and aims at covering as ### Key combinations @@if (igxName === 'IgxHierarchicalGrid') { - - `Arrow Up` - navigates one cell up, going up the grid hierarchy if necessary (no wrapping); - - `Arrow Down` - navigates one cell down, going deeper into the grid hierarchy if necessary (no wrapping);}@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { - - `Arrow Up` - navigates one cell up (no wrapping); - - `Arrow Down` - navigates one cell down (no wrapping);} - - `Arrow Left` - navigates one cell left (no wrapping between lines); - - `Arrow Right` - navigates one cell right (no wrapping between lines); - - `Ctrl + Arrow Up` - navigates to the first cell in the current column; - - `Ctrl + Arrow Down` - navigates to the last cell in the current column; - - `Ctrl + Arrow Left` - moves to leftmost cell in row; - - `Home` - moves to leftmost cell in row; - - `Ctrl + Home` - moves to top left cell in the grid; - - `Ctrl + Arrow Right` - moves to rightmost cell in row; - - `End` - moves to rightmost cell in row; - - `Ctrl + End` - moves to bottom right cell in the grid; - - `Page Up` - scrolls one page (view port) up; - - `Page Down` - scrolls one page (view port) down; - - `Enter` - enters edit mode; - - `F2` - enters edit mode; - - `Esc` - exits edit mode; - - `Tab` - sequentially move the focus over the next cell on the row and if the last cell is reached move to next row; If next row is group row the whole row is focused, if it is data row, move focus over the first cell; When cell is in edit mode, will move the focus to next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row; - - `Shift + Tab` - sequentially move focus to the previous cell on the row, if the first cell is reached move the focus to the previous row. If previous row is group row focus the whole row or if it is data row, focus the last cell of the row; when cell is in edit mode, will move the focus to the next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row; - - `Space` - if the row is selectable, on keydown space triggers row selection;@@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { - - `Alt + Arrow Left` over GroupRow - collapses the group row content if the row is not already collapsed; - - `Alt + Arrow Right` over GroupRow - expands the group row content if the row is not already expanded;} - - on mouse `wheel` - blurs the focused element; +- `Arrow Up` - navigates one cell up, going up the grid hierarchy if necessary (no wrapping); +- `Arrow Down` - navigates one cell down, going deeper into the grid hierarchy if necessary (no wrapping);}@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { +- `Arrow Up` - navigates one cell up (no wrapping); +- `Arrow Down` - navigates one cell down (no wrapping);} +- `Arrow Left` - navigates one cell left (no wrapping between lines); +- `Arrow Right` - navigates one cell right (no wrapping between lines); +- `Ctrl + Arrow Up` - navigates to the first cell in the current column; +- `Ctrl + Arrow Down` - navigates to the last cell in the current column; +- `Ctrl + Arrow Left` - moves to leftmost cell in row; +- `Home` - moves to leftmost cell in row; +- `Ctrl + Home` - moves to top left cell in the grid; +- `Ctrl + Arrow Right` - moves to rightmost cell in row; +- `End` - moves to rightmost cell in row; +- `Ctrl + End` - moves to bottom right cell in the grid; +- `Page Up` - scrolls one page (view port) up; +- `Page Down` - scrolls one page (view port) down; +- `Enter` - enters edit mode; +- `F2` - enters edit mode; +- `Esc` - exits edit mode; +- `Tab` - sequentially move the focus over the next cell on the row and if the last cell is reached move to next row; If next row is group row the whole row is focused, if it is data row, move focus over the first cell; When cell is in edit mode, will move the focus to next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row; +- `Shift + Tab` - sequentially move focus to the previous cell on the row, if the first cell is reached move the focus to the previous row. If previous row is group row focus the whole row or if it is data row, focus the last cell of the row; when cell is in edit mode, will move the focus to the next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row; +- `Space` - if the row is selectable, on keydown space triggers row selection;@@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { +- `Alt + Arrow Left` over GroupRow - collapses the group row content if the row is not already collapsed; +- `Alt + Arrow Right` over GroupRow - expands the group row content if the row is not already expanded;} +- on mouse `wheel` - blurs the focused element; ### Custom keyboard navigation Customizing the default behavior, that we described above when a certain key is pressed is one of the great benefits that our keyboard navigation feature provides. Like when `Enter key` or `Tab key` are pressed. Actions like `going to the next cell` or `cell below` could be handled easily with the powerful keyboard navigation API. @@ -61,7 +61,7 @@ Customizing the default behavior, that we described above when a certain key is - [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) - returns [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) which defines the previous cell, according to the current position, that match specific criteria. You can pass callback function as a third parameter of [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) method. @@if (igxName === 'IgxHierarchicalGrid') { -> Note: Both [`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#navigateto) and [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) are availabe on the current level, you cannot access child cells. +> Note: Both [`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#navigateto) and [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) are available on the current level, you cannot access child cells. } The sample below shows how to: @@ -88,6 +88,7 @@ const cell = args.event.shiftKey ? this.grid1.navigateTo(cell.row.index, cell.column.visibleIndex, (obj) => { obj.target.nativeElement.focus(); }); ``` + - perform column based navigation (vertical) on `enter key` press. ```typescript @@ -102,11 +103,11 @@ You can try the `actions below` in order to observe the custom keyboard navigati - Double click on a cell from number column type and after the cell is in edit mode, change the value to `7` and press `tab key`. Prompt message will be shown. - Select a cell and press `Enter key` a couple of times. Column based navigation will be applied. -> Note: Keep in mind that the default `Enter key` action is overriden and in order to enter edit mode you can use `F2 key` instead. +> Note: Keep in mind that the default `Enter key` action is overridden and in order to enter edit mode you can use `F2 key` instead. - @@ -167,11 +168,11 @@ You can try the `actions below` in order to observe the custom keyboard navigati - Double click on a `number type` cell and after the cell is in edit mode, change the value to negative number (e.g. -1) and press `tab key`. Prompt message will be shown. - Select a cell and press `Enter key` a couple of times. Column based navigation will be applied. -> Note: Keep in mind that the default `Enter key` action is overriden and in order to enter edit mode you can use `F2 key` instead. +> Note: Keep in mind that the default `Enter key` action is overridden and in order to enter edit mode you can use `F2 key` instead. - @@ -198,6 +199,7 @@ const cell = args.event.shiftKey ? this.grid1.navigateTo(cell.row.index, cell.column.visibleIndex, (obj) => { obj.target.nativeElement.focus(); }); ``` + - perform column based navigation (vertical) on `enter key` press. ```typescript @@ -212,41 +214,42 @@ You can try the `actions below` in order to observe the custom keyboard navigati - Double click on a cell from `Age` column and after the cell is in edit mode, change the value to `17` and press `tab key`. Prompt message will be shown. - Select a cell and press `Enter key` a couple of times. Column based navigation will be applied. -> Note: Keep in mind that the default `Enter key` action is overriden and in order to enter edit mode you can use `F2 key` instead. +> Note: Keep in mind that the default `Enter key` action is overridden and in order to enter edit mode you can use `F2 key` instead. - } ### Known Limitations + |Limitation|Description| |--- |--- | | Navigating inside grid with scrollable parent container. | If the grid is positioned inside a scrollable parent container and the user navigates inside the grid, it will not scroll the parent container if there are cells out of view.| ## API References -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
    -* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column_pinning.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column_pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md)
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/multi-column-headers.md b/docs/angular/src/content/kr/grids_templates/multi-column-headers.md index e0fefcc16b..5a0e78176a 100644 --- a/docs/angular/src/content/kr/grids_templates/multi-column-headers.md +++ b/docs/angular/src/content/kr/grids_templates/multi-column-headers.md @@ -28,24 +28,24 @@ keywords: column headers, ignite ui for angular, infragistics @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -54,6 +54,7 @@ keywords: column headers, ignite ui for angular, infragistics `Multi-column header`의 선언은 열 집합을 [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) 컴포넌트에 [`header`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#header) 제목을 전달하여 래핑합니다. @@if (igxName === 'IgxGrid') { + ```html @@ -63,8 +64,10 @@ keywords: column headers, ignite ui for angular, infragistics ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -74,8 +77,10 @@ keywords: column headers, ignite ui for angular, infragistics ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -94,11 +99,13 @@ keywords: column headers, ignite ui for angular, infragistics ... ``` + } 중첩 헤더의 `n-th` 수준을 달성하려면 상기의 선언을 따라야 실행합니다. 즉, [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)을 중첩하면 원하는 결과를 얻을 수 있습니다. @@if (igxName === 'IgxGrid') { + ```html @@ -110,8 +117,10 @@ keywords: column headers, ignite ui for angular, infragistics ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -124,8 +133,10 @@ keywords: column headers, ignite ui for angular, infragistics ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -140,6 +151,7 @@ keywords: column headers, ignite ui for angular, infragistics ... ``` + } 모든 [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)은 [`moving`](column-moving.md), [`pinning`](column_pinning.md), [`hiding`](column_hiding.md)을 지원합니다. @@ -149,6 +161,7 @@ keywords: column headers, ignite ui for angular, infragistics > `columns/column-groups`이 현재 `group`으로 래핑되어 있지 않은 즉, **최상위** `columns`인 경우 표시된 전체 열 사이에서 이동이 허용됩니다. @@if (igxName === 'IgxGrid') { + ```html @@ -159,8 +172,10 @@ keywords: column headers, ignite ui for angular, infragistics ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -171,8 +186,10 @@ keywords: column headers, ignite ui for angular, infragistics ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -186,31 +203,32 @@ keywords: column headers, ignite ui for angular, infragistics ... ``` + } ### API 참조
    -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
    ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md) @@if (igxName === 'IgxGrid') {* [Group by](groupby.md)}
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/multi-row-layout.md b/docs/angular/src/content/kr/grids_templates/multi-row-layout.md index f463df17f3..1ef46bfe79 100644 --- a/docs/angular/src/content/kr/grids_templates/multi-row-layout.md +++ b/docs/angular/src/content/kr/grids_templates/multi-row-layout.md @@ -12,8 +12,8 @@ _language: kr #### 데모 - @@ -21,31 +21,31 @@ _language: kr 다중 행 레이아웃 선언은 [`igx-column-layout`]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) 컴포넌트를 통해 이루어집니다. 각 `igx-column-layout` 컴포넌트는 하나 이상의 `igx-column` 컴포넌트를 포함하는 블록으로 간주해야 합니다. 일부 그리드 기능은 블록 수준에서 작동합니다(아래의 "기능 통합" 섹션에서 열거). 예를 들면, 가상화는 블록을 사용하여 가상 청크를 결정하므로 성능을 향상하려면 레이아웃이 허용하는 경우, 열을 더 많은 `igx-column-layout` 블록으로 분할합니다. 다중 행 레이아웃을 구성할 경우, 이러한 블록 이외에 열이 없어야 하며, `IgxColumnGroupComponent`를 사용하지 않아야 합니다. 다중 행 레이아웃은 [grid layout](https://www.w3.org/TR/css-grid-1/) 사양 상에서 구현되며 요구 사항을 준수해야 합니다. `IgxColumnComponent` 네 개의 `@Input` 속성을 노출하여 각 셀의 위치와 범위를 결정합니다. -* [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) - 필드가 시작되는 열 인덱스입니다. 이 속성은 **mandatory**입니다. -* [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) - 필드가 시작되는 행 인덱스입니다. 이 속성은 **mandatory**입니다. -* [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) - 현재 필드가 끝나는 열 인덱스입니다. colStart와 colEnd 사이의 열의 양은 해당 필드에 대한 스패닝 열의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `colStart + 1`입니다. -* [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend) - 현재 필드가 끝나는 행 인덱스입니다. rowStart와 rowEnd 사이의 행의 양은 해당 필드에 대한 스패닝 행의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `rowStart + 1`입니다. +- [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) - 필드가 시작되는 열 인덱스입니다. 이 속성은 **mandatory**입니다. +- [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) - 필드가 시작되는 행 인덱스입니다. 이 속성은 **mandatory**입니다. +- [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) - 현재 필드가 끝나는 열 인덱스입니다. colStart와 colEnd 사이의 열의 양은 해당 필드에 대한 스패닝 열의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `colStart + 1`입니다. +- [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend) - 현재 필드가 끝나는 행 인덱스입니다. rowStart와 rowEnd 사이의 행의 양은 해당 필드에 대한 스패닝 행의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `rowStart + 1`입니다. ```html - + - - - + + + - - - - - + + + + + - - + + ``` @@ -64,7 +64,7 @@ _language: kr - 그룹화 - `hideGroupedColumns` 옵션은 다중 행 레이아웃에 영향을 미치지 않습니다. 그룹화된 열은 항상 표시됩니다. 현재 지원되지 **않는** 기능은 다음과 같습니다: -- 열 이동 +- 열 이동 - 복수 열 헤더 - Excel로 내보내기 - 요약 @@ -74,19 +74,19 @@ _language: kr IgxGridComponent with Multi-Row Layouts provides build-in keyboard navigation. #### TAB navigation -* TAB and Shift + TAB - move to the next/previous cell in a row unaffected by the column layouts that are defined. The navigation is done through all of the cells by focusing each one only once for each row, meaning that it should skip cell if it doesn't have the same `rowStart` as the currently selected cell. When the row is in edit mode, the navigation is restricted to the cells into that row and to the CANCEL and DONE buttons. +- TAB and Shift + TAB - move to the next/previous cell in a row unaffected by the column layouts that are defined. The navigation is done through all of the cells by focusing each one only once for each row, meaning that it should skip cell if it doesn't have the same `rowStart` as the currently selected cell. When the row is in edit mode, the navigation is restricted to the cells into that row and to the CANCEL and DONE buttons. -#### Horizontal nagivation -* Arrow Left or Arrow Right - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, Arrow Left and Arrow Right should navigate to the first cell on the left and right with the same `rowStart`, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same `rowStart` if possible. -* Ctrl + Arrow Left (HOME) or Ctrl + Arrow Right (END) - navigate to the start or end of the row and select the cell with accordance to the starting navigation cell. +#### Horizontal navigation +- Arrow Left or Arrow Right - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, Arrow Left and Arrow Right should navigate to the first cell on the left and right with the same `rowStart`, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same `rowStart` if possible. +- Ctrl + Arrow Left (HOME) or Ctrl + Arrow Right (END) - navigate to the start or end of the row and select the cell with accordance to the starting navigation cell. + + +#### Vertical navigation +- Arrow Up or Arrow Down - move to the cell above/below in relation to a starting position and is unaffected by the rows. If the current cell spans on more than one column the next active cell will be selected with accordance to the starting navigation cell. +- Ctrl + Arrow Up or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row. +- Ctrl + Home or Ctrl + End - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell. -#### Vertical nagivation -* Arrow Up or Arrow Down - move to the cell above/below in relation to a starting position and is unaffected by the rows. If the current cell spans on more than one column the next active cell will be selected with accordance to the starting navigation cell. -* Ctrl + Arrow Up or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row. -* Ctrl + Home or Ctrl + End - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell. - - > [!Note] > Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows. @@ -105,8 +105,8 @@ The demo below adds additional navigation down/up via the Enter and < #### Demo - @@ -116,13 +116,13 @@ The demo below adds additional navigation down/up via the Enter and < Sometimes when configuring a column layout it might be a challenge to calculate and set the proper [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) and [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) or [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) and [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend). Especially when there are a lot of columns in a single layout. That is why we have created a small configurator, so you can easily do that and have a similar preview of how it would look inside the igxGrid when applied. You can do the following interactions with it: -* Set number of rows for the whole configuration. All layouts must have the same amount of rows. -* Add/Remove column layouts by clicking the `Add Layout` chip or reordering them by dragging a layout chip left/right. -* Set specific settings for each layout as number of columns and how wide they will be. The setting refer to the currently selected layout. -* Resize column cells in the layout preview so they can span more columns/rows or clear them using the `Delete` button. -* Set columns in the preview by dragging a column chip in the place your will want it to be. -* Add/Remove new columns by using the `Add Column` chip. -* Get template output of the whole configuration ready to by placed inside an igxGrid or the JSON representation that can also be used and parsed in your template using [`NgForOf`](https://angular.io/api/common/NgForOf) for example. +- Set number of rows for the whole configuration. All layouts must have the same amount of rows. +- Add/Remove column layouts by clicking the `Add Layout` chip or reordering them by dragging a layout chip left/right. +- Set specific settings for each layout as number of columns and how wide they will be. The setting refer to the currently selected layout. +- Resize column cells in the layout preview so they can span more columns/rows or clear them using the `Delete` button. +- Set columns in the preview by dragging a column chip in the place your will want it to be. +- Add/Remove new columns by using the `Add Column` chip. +- Get template output of the whole configuration ready to by placed inside an igxGrid or the JSON representation that can also be used and parsed in your template using [`NgForOf`](https://angular.io/api/common/NgForOf) for example. By default we have set the same columns as our previous sample, but it can be cleared and configured to match your desired configuration. @@ -131,19 +131,19 @@ By default we have set the same columns as our previous sample, but it can be cl
    ### Styling -The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. -In the below steps, we are going through the steps of customizing the grid's Multi Row Layout styling. +In the below steps, we are going through the steps of customizing the grid's Multi Row Layout styling. - #### Importing global theme +#### Importing global theme To begin the customization of the Multi Row Layout feature, you need to import the `index` file, where all styling functions and mixins are located. ```scss @import '~igniteui-angular/lib/core/styles/themes/index' -``` +``` #### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the feature layout as desired. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the feature layout as desired. ```scss $custom-theme: grid-theme( @@ -156,10 +156,10 @@ $custom-theme: grid-theme( $sorted-header-icon-color: #ffcd0f, $sortable-header-icon-hover-color: #e9bd0d ); -``` +``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -170,7 +170,7 @@ $custom-palette: palette( $primary: $black-color, $secondary: $yellow-color ); -``` +``` After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. @@ -188,8 +188,9 @@ $custom-theme: grid-theme( ``` #### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`. +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`. + ```scss $custom-grid-schema: extend($_light-grid,( cell-active-border-color: (igx-color:('secondary', 500)), @@ -201,9 +202,9 @@ $custom-grid-schema: extend($_light-grid,( sorted-header-icon-color: (igx-color:('secondary', 500)), sortable-header-icon-hover-color: (igx-color:('secondary', 600)) )); -``` +``` -In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. ```scss $my-custom-schema: extend($light-schema, ( @@ -217,6 +218,7 @@ $my-custom-schema: extend($light-schema, ( #### Applying the custom theme The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + ```scss @include grid($custom-theme); ``` @@ -230,7 +232,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. >[!NOTE] - >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component: ```scss :host { @@ -240,12 +242,12 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo } ``` -#### Demo +#### Demo - @@ -253,24 +255,24 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo ### API 참조
    -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
    ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [정렬](sorting.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [정렬](sorting.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/paging.md b/docs/angular/src/content/kr/grids_templates/paging.md index 13d6c0e4b5..db36641a42 100644 --- a/docs/angular/src/content/kr/grids_templates/paging.md +++ b/docs/angular/src/content/kr/grids_templates/paging.md @@ -31,24 +31,24 @@ Ignite UI for Angular @@igComponent에서 **Paging**은 루트 `@@igSelector` @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -105,6 +105,7 @@ this.@@igObjectRef.paging = false; 먼저 서비스를 선언하여 데이터 가져오기를 실행합니다. 페이지 수를 계산하기 위해 모든 데이터 항목 수가 필요하며 이 논리를 서비스에 추가할 것입니다. + ```typescript @Injectable() export class RemoteService { @@ -139,8 +140,10 @@ export class RemoteService { } } ``` + 서비스를 선언 한 후에는 @@igComponent 생성 및 데이터 서브스크립션을 위한 컴포넌트를 작성해야 합니다. @@if (igxName === 'IgxGrid') { + ```typescript export class RemotePagingGridSample implements OnInit, AfterViewInit { public data: Observable; @@ -157,8 +160,10 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy { public page = 0; @@ -179,11 +184,13 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, } } ``` + } 요청된 페이지에 대한 데이터만 가져오고 선택된 페이지 및 [`perPage`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#perPage)에 따라 정확한 `skip` 및 `top` 매개 변수를 원격 서비스에 전달하려면 사용자 호출 템플릿을 생성해야 합니다. 또한, 호출 버튼의 비활성화 및 활성화도 관리해야 합니다. @@if (igxName === 'IgxGrid') { + ```html - + + ``` - ## Known Issues and Limitations +## Known Issues and Limitations - When the grid has no `primaryKey` 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 + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning ### API 참조 -* [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable) -* [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditenter) -* [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onrowedit) -* [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditcancel) -* [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endedit) -* [field]({environment:angularApiUrl}/classes/igxcolumncomponent.html#field) -* [editable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable) -* [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable) +- [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditenter) +- [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onrowedit) +- [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditcancel) +- [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endedit) +- [field]({environment:angularApiUrl}/classes/igxcolumncomponent.html#field) +- [editable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable) +- [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [@@igComponent 편집](editing.md) -* [@@igComponent 트랜잭션](batch-editing.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [@@igComponent 편집](editing.md) +- [@@igComponent 트랜잭션](batch-editing.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/row-pinning.md b/docs/angular/src/content/kr/grids_templates/row-pinning.md index 817c39740a..505b40f850 100644 --- a/docs/angular/src/content/kr/grids_templates/row-pinning.md +++ b/docs/angular/src/content/kr/grids_templates/row-pinning.md @@ -2,21 +2,21 @@ --- title: Angular Grid Row Pinning | Lock Row | Ignite UI for Angular | Infragistics description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock rows with rich and easy to use API -keywords: lock row, ignite ui for angular, infragistics  +keywords: lock row, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxTreeGrid') { --- title: Angular Tree Grid Row Pinning | Lock Row | Ignite UI for Angular | Infragistics description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock rows with rich and easy to use API -keywords: lock row, ignite ui for angular, infragistics  +keywords: lock row, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxHierarchicalGrid') { --- title: Angular Hierarchical Grid Row Pinning | Lock Row | Ignite UI for Angular | Infragistics description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock rows with rich and easy to use API -keywords: lock row, ignite ui for angular, infragistics  +keywords: lock row, ignite ui for angular, infragistics --- } @@ -27,24 +27,24 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -67,9 +67,11 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -81,9 +83,11 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -95,6 +99,7 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w ``` + } @@ -103,40 +108,52 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w Row pinning is controlled through the `pinned` input of the [`row`]({environment:angularApiUrl}/interfaces/rowtype.html). Pinned rows are rendered at the top of the @@igComponent by default and stay fixed through vertical scrolling of the unpinned rows in the @@igComponent body. @@if (igxName === 'IgxGrid') { + ```typescript this.grid.getRowByIndex(0).pinned = true; ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript this.treeGrid.getRowByIndex(0).pinned = true; ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript this.hierarchicalGrid.getRowByIndex(0).pinned = true; ``` + } You may also use the @@igComponent's [`pinRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pinrow) or [`unpinRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#unpinrow) methods of the [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to pin or unpin records by their ID: @@if (igxName === 'IgxGrid') { + ```typescript this.grid.pinRow("ALFKI"); this.grid.unpinRow("ALFKI"); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript this.treeGrid.pinRow("ALFKI"); this.treeGrid.unpinRow("ALFKI"); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript this.hierarchicalGrid.pinRow("ALFKI"); this.hierarchicalGrid.unpinRow("ALFKI"); ``` + } Note that the row ID is the primary key value, defined by the [`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state. @@ -144,6 +161,7 @@ Note that the row ID is the primary key value, defined by the [`primaryKey`]({en A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the [`rowPinning`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowPinning) event and changing the [`insertAtIndex`]({environment:angularApiUrl}/interfaces/ipinroweventargs.html#insertatindex) property of the event arguments to the desired position index. @@if (igxName === 'IgxGrid') { + ```html @@ -154,8 +172,10 @@ public rowPinning(event) { event.insertAtIndex = 0; } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -166,8 +186,10 @@ public rowPinning(event) { event.insertAtIndex = 0; } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -178,6 +200,7 @@ public rowPinning(event) { event.insertAtIndex = 0; } ``` + } ### Pinning Position @@ -186,21 +209,27 @@ You can change the row pinning position via the [`pinning`]({environment:angular When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } ```typescript @@ -270,6 +299,7 @@ This can be done by adding an extra column with a cell template containing the c ``` + } On click of the custom icon the pin state of the related row can be changed using the row's API methods. @@ -289,24 +319,24 @@ public togglePinning(row: IgxGridRow, event) { @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -364,8 +394,8 @@ This would allow reordering the rows and moving them between the pinned and unpi #### Demo - @@ -375,16 +405,16 @@ This would allow reordering the rows and moving them between the pinned and unpi ### Row Pinning Limitations -* Only records that exist in the data source can be pinned. -* The row pinning state is not exported to excel. The grid is exported as if no row pinning is applied. -* Because of how pinned rows are stored internally so that they may appear both in the pinned and unpinned areas of the grid, row pinning is not supported when records in the grid are fetched from a remote endpoint on demand (remote virtualization). -* The copies of pinned rows in the scrollable area of the grid are an integral part of how other grid features achieve their functionality in the presence of pinned rows and therefore their creation cannot be disabled nor can they be removed. -* As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vise versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record. -* When the grid has no `primaryKey` 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 +- Only records that exist in the data source can be pinned. +- The row pinning state is not exported to excel. The grid is exported as if no row pinning is applied. +- Because of how pinned rows are stored internally so that they may appear both in the pinned and unpinned areas of the grid, row pinning is not supported when records in the grid are fetched from a remote endpoint on demand (remote virtualization). +- The copies of pinned rows in the scrollable area of the grid are an integral part of how other grid features achieve their functionality in the presence of pinned rows and therefore their creation cannot be disabled nor can they be removed. +- As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vise versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record. +- When the grid has no `primaryKey` 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
    @@ -417,7 +447,7 @@ $custom-grid-theme: grid-theme( ); ``` -#### Using CSS variables +#### Using CSS variables The last step is to pass the custom grid theme: @@ -427,7 +457,7 @@ The last step is to pass the custom grid theme: #### Using mixins -In order to style components for Internet Explorer 11, you have to use different approach, since it doesn't support CSS variables. +In order to style components for Internet Explorer 11, you have to use different approach, since it doesn't support CSS variables. If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. However, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`: @@ -444,55 +474,55 @@ If the component is using an [`Emulated`](themes/sass/component-themes.md#view-e @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - } ## API References -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) -* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) -* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) -* [RowType]({environment:angularApiUrl}/interfaces/RowType.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) +- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) +- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) +- [RowType]({environment:angularApiUrl}/interfaces/RowType.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
    -* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md)
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/search.md b/docs/angular/src/content/kr/grids_templates/search.md index 7a61069e13..13f3abfea3 100644 --- a/docs/angular/src/content/kr/grids_templates/search.md +++ b/docs/angular/src/content/kr/grids_templates/search.md @@ -1,21 +1,21 @@ @@if (igxName === 'IgxGrid') { --- -title: Angular Grid search | search data | Ignite UI for Angular | Infragistics  -description: Learn how to perform grid seach with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid +title: Angular Grid search | search data | Ignite UI for Angular | Infragistics +description: Learn how to perform grid search with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid keywords: Content search, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxTreeGrid') { --- title: Angular Tree Grid search | search data | Ignite UI for Angular | Infragistics -description: Learn how to perform grid seach with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid +description: Learn how to perform grid search with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid keywords: Content search, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxHierarchicalGrid') { --- title: Angular Hierarchical Grid search | search data | Ignite UI for Angular | Infragistics -description: Learn how to perform grid seach with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid +description: Learn how to perform grid search with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid keywords: Content search, ignite ui for angular, infragistics --- } @@ -28,8 +28,8 @@ While browsers natively provide content search functionality, most of the time t @@if (igxName === 'IgxGrid') { - @@ -37,8 +37,8 @@ While browsers natively provide content search functionality, most of the time t } @@if (igxName === 'IgxTreeGrid') { - @@ -54,6 +54,7 @@ While browsers natively provide content search functionality, most of the time t 그리드를 작성하고 데이터를 바인딩하는 것으로 시작합니다. 사용할 컴포넌트에 사용자 스타일도 추가합니다! @@if (igxName === 'IgxGrid') { + ```html @@ -66,8 +67,10 @@ While browsers natively provide content search functionality, most of the time t ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -79,12 +82,14 @@ While browsers natively provide content search functionality, most of the time t ``` + } @@if (igxName === 'IgxHierarchicalGrid') { -{/* TODO */} +{/_TODO_/} } @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { + ```css /* searchgrid.component.css */ @@ -108,9 +113,10 @@ While browsers natively provide content search functionality, most of the time t margin-left: 5px; } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { -{/* TODO */} +{/_TODO_/} } 이제 @@igComponent의 검색 API를 구성합니다! 현재 검색된 텍스트를 저장하고 검색에서 대/소문자를 구분할지 여부에 사용할 수 있는 몇 가지 속성을 작성할 수 있습니다. @@ -304,6 +310,7 @@ public clearSearch() {
    ... ``` + - **caseSensitive** 및 **exactMatch** 속성을 토글하는 두 개의 칩을 표시합니다. 이 속성을 기반으로 색상을 변경하는 두 개의 세련된 칩을 가진 체크 박스로 교체했습니다. 칩을 클릭할 때마다 클릭한 칩에 따라 해당 핸들러인 - **updateSearch** 또는 **updateExactSearch**가 호출됩니다. ```html @@ -322,6 +329,7 @@ public clearSearch() {
    ... ``` + - 검색 탐색 버튼의 경우 재료 아이콘을 사용해 입력을 리플 스타일 버튼으로 변환했습니다. 클릭 이벤트의 핸들러는 그대로 유지되며 [`findNext`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findnext)/[`findPrev`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findprev) 메소드를 호출합니다. ```html @@ -352,51 +360,51 @@ public clearSearch() { 검색 결과의 탐색은 @@igComponent에 사용자 검색 줄 기능을 추가하여 구현했습니다. 또한 아이콘, 칩, 입력 등의 Ignite UI for Angular 컴포넌트를 추가로 사용했습니다. 검색 API는 다음과 같습니다. [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 메소드: -- [findNext]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findnext) -- [findPrev]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findprev) -- [clearSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearsearch) -- [refreshSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#refreshsearch) +- [findNext]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findnext) +- [findPrev]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findprev) +- [clearSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearsearch) +- [refreshSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#refreshsearch) [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) 메소드: [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) 속성: -- [searchable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#searchable) +- [searchable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#searchable) [ISearchInfo]({environment:angularApiUrl}/interfaces/isearchinfo.html) 사용된 상대 API가 있는 추가 컴포넌트 및/또는 지시문: -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) -* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) +- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) 스타일: -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxInputGroupComponent 스타일]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxIconComponent 스타일]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxRippleDirective 스타일]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxButtonDirective 스타일]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxInputGroupComponent 스타일]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxIconComponent 스타일]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxRippleDirective 스타일]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxButtonDirective 스타일]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [필터링](filtering.md) -* [페이징](paging.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [필터링](filtering.md) +- [페이징](paging.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/selection.md b/docs/angular/src/content/kr/grids_templates/selection.md index 792acce24b..80c846051a 100644 --- a/docs/angular/src/content/kr/grids_templates/selection.md +++ b/docs/angular/src/content/kr/grids_templates/selection.md @@ -34,7 +34,7 @@ _language: kr - `Shift 키`를 누른 상태에서 `화살표 키`를 사용하여 키보드로 다중 셀을 선택합니다. 다중 셀 선택 범위는 포커스된 셀을 기반으로 생성됩니다. - `Shift 키`를 누른 상태에서 `Ctrl + 화살표 키`와 `Ctrl + Home/End`를 사용하여 키보드로 다중 셀을 선택합니다. 다중 셀 선택 범위는 포커스된 셀을 기반으로 생성됩니다. - `Ctrl 키`를 누른 상태에서 `왼쪽 마우스 키`를 클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다. -- 마우스로 클릭하고 드래그하면 연속해 다중 셀 선택이 가능합니다. +- 마우스로 클릭하고 드래그하면 연속해 다중 셀 선택이 가능합니다. #### 데모 @@ -42,8 +42,8 @@ _language: kr @@if (igxName === 'IgxGrid') { - @@ -51,8 +51,8 @@ _language: kr } @@if (igxName === 'IgxTreeGrid') { - @@ -76,7 +76,7 @@ _language: kr - Ctrl + Shift + Home - 포커스된 셀에서 그리드의 첫 번째 셀까지의 모든 셀을 선택합니다 - Ctrl + Shift + End - 포커스된 셀에서 그리드의 마지막 셀까지의 모든 셀을 선택합니다. -> [!NOTE] +> [!NOTE] > 그리드 보디에서만 연속 스크롤이 가능합니다. ### API 사용 @@ -84,7 +84,7 @@ _language: kr ##### 선택 범위 -[`selectRange(range)`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selectrange) - API를 사용하여 셀 범위를 선택합니다. `rowStart` 및 `rowEnd`는 행 인덱스를 사용해야 하며, `columnStart` 및 `columnEnd`는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다. +[`selectRange(range)`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selectrange) - API를 사용하여 셀 범위를 선택합니다. `rowStart` 및 `rowEnd`는 행 인덱스를 사용해야 하며, `columnStart` 및 `columnEnd`는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다. ```typescript const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 }; @@ -96,7 +96,7 @@ this.grid1.selectRange(range); ``` -> [!NOTE] +> [!NOTE] > 선택 범위는 부가 연산입니다. 이전 선택을 삭제하지 않습니다. ##### 셀 선택 삭제 @@ -108,6 +108,7 @@ this.grid1.selectRange(range); [`getSelectedData()`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getselecteddata)은 선택한 데이터의 배열을 선택 내용에 따라 형식으로 반환합니다. 이하 예: 1. 3개의 다른 단일 셀을 선택한 경우: + ``` expectedData = [ { CompanyName: "Infragistics" }, @@ -115,8 +116,9 @@ expectedData = [ { ParentID: 147 } ]; ``` - -2. 1열에서 3개 셀을 선택한 경우: + +1. 1열에서 3개 셀을 선택한 경우: + ``` expectedData = [ { Address: "Obere Str. 57"}, @@ -125,14 +127,16 @@ expectedData = [ ]; ``` -3. 1행 3열에서 마우스 드래그로 3개 셀을 선택한 경우: +1. 1행 3열에서 마우스 드래그로 3개 셀을 선택한 경우: + ``` expectedData = [ { Address: "Avda. de la Constitución 2222", City: "México D.F.", ContactTitle: "Owner" } ]; ``` -4. 2행 3열에서 마우스 드래그로 3개 셀을 선택한 경우: +1. 2행 3열에서 마우스 드래그로 3개 셀을 선택한 경우: + ``` expectedData = [ { ContactTitle: "Sales Agent", Address: "Cerrito 333", City: "Buenos Aires"}, @@ -140,7 +144,8 @@ expectedData = [ ]; ``` -5. 2개의 다른 범위를 선택한 경우: +1. 2개의 다른 범위를 선택한 경우: + ``` expectedData = [ { ContactName: "Martín Sommer", ContactTitle: "Owner"}, @@ -150,7 +155,8 @@ expectedData = [ ]; ``` -6. 2개의 중복 범위가 선택되면 형식은 다음과 같이 됩니다: +1. 2개의 중복 범위가 선택되면 형식은 다음과 같이 됩니다: + ``` expectedData = [ { ContactName: "Diego Roel", ContactTitle: "Accounting Manager", Address: "C/ Moralzarzal, 86"}, @@ -160,7 +166,7 @@ expectedData = [ ]; ``` -> [!NOTE] +> [!NOTE] > [`selectedCells()`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selectedcells) will DO return the correct result even if the cell is not visible in grids view port. [`getSelectedData()`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getselecteddata) will also return the selected cell data. > [`getSelectedRanges(): GridSelectionRange[]`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getselectedranges)는 키보드와 포인터 상호 작용으로 그리드에서 현재 선택된 범위를 반환합니다. 유형은 GridSelectionRange[]입니다. @@ -186,8 +192,8 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크 @@if (igxName === 'IgxGrid') { - @@ -195,8 +201,8 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크 } @@if (igxName === 'IgxTreeGrid') { - @@ -204,8 +210,8 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크 } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -215,12 +221,12 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크 @@if (igxName === 'IgxGrid') { ### Selection Based Summaries -This sample demonstrates the usage of multiple selection along with custom summary functions. +This sample demonstrates the usage of multiple selection along with custom summary functions. Change the selection to see summaries of the currently selected range. - @@ -233,6 +239,7 @@ Change the selection to see summaries of the currently selected range. @@igComponent의 단일 선택은 @@igComponent의 [`selected`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selected) 이벤트를 사용하여 간단하게 설정할 수 있습니다. 이 이벤트는 셀 컴포넌트에 대한 참조를 내보냅니다. 셀 컴포넌트에는 포함되는 행 컴포넌트에 대한 참조가 있습니다. 행 컴포넌트 참조의 [`key`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridrow.html#key) 게터를 사용하여 행([`data[primaryKey]`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) 또는 [`data`]({environment:angularApiUrl}/classes/igxgridrow.html#data) 객체 자체를 사용하여)의 고유 식별자를 선택의 적절한 목록에 전달합니다. 단일 행만 항상 선택되도록 하기 위해 선택 행 선택 목록을 미리 비웁니다([`selectRows`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectrows) 메소드 호출의 두 번째 인수): @@if (igxName === 'IgxGrid') { + ```html @@ -241,6 +248,7 @@ Change the selection to see summaries of the currently selected range. ...     ``` + ```typescript /* selectionExample.component.ts */ @@ -251,8 +259,10 @@ public handleRowSelection(args) { } } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -261,6 +271,7 @@ public handleRowSelection(args) { ...     ``` + ```typescript /* selectionExample.component.ts */ @@ -272,8 +283,10 @@ public handleRowSelection(event) { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + ```typescript /* selectionExample.component.ts */ @@ -292,6 +306,7 @@ public handleRowSelection(event) { } } ``` + } #### 복수 선택 @@ -299,6 +314,7 @@ public handleRowSelection(event) { 복수 행 선택을 사용하도록 하기 위해 [`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 [`rowSelectable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowselectable) 속성을 사용합니다. [`rowSelectable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowselectable)을 `true`로 설정하면 각 행 및 @@igComponent 헤더에서 체크 박스 필드를 선택할 수 있게 됩니다. 체크 박스를 사용하여 복수의 행을 선택할 수 있으며 스크롤, 페이징 및 정렬 및 필터링 등의 데이터 조작을 통해 선택이 유지됩니다. @@if (igxName === 'IgxGrid') { + ```html @@ -313,8 +329,10 @@ public handleRowSelection(event) { public selection = true; ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -328,8 +346,10 @@ public selection = true; public selection = true; ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + ```typescript /* selectionExample.component.ts */ public selection = true; ``` + } @@if (igxName !== 'IgxTreeGrid') { **참고:** 적절한 행 선택 및 셀 선택을 위해 @@igComponent가 원격 가상화를 실행하는 동안 [`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey)를 제공해야 합니다. } -**참고:** 필터링이 설정된 경우, [`selectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectallrows) 및 [`deselectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectallrows)는 *필터링된* 모든 행을 선택/선택 취소합니다. +**참고:** 필터링이 설정된 경우, [`selectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectallrows) 및 [`deselectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectallrows)는 _필터링된_ 모든 행을 선택/선택 취소합니다. @@if (igxName !== 'IgxTreeGrid') { **참고:** @@igComponent에 원격 가상화가 설정된 경우, 헤더 체크 박스를 클릭하면 모든 레코드가 선택/선택 취소됩니다. 그러나, 헤더 체크 박스를 통해 모든 레코드가 선택된 후 가시적인 행이 선택 해제된 경우, 필요에 따라 새로운 데이터가 @@igComponent에 로딩되면 새롭게 로드된 행이 선택되지 않는 제한이 있습니다. @@ -363,6 +385,7 @@ public selection = true; 다음의 코드 예제를 사용하여 단일 또는 복수 행을 동시에 선택할 수 있습니다([`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey)를 사용하여): @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { + ```html @@ -372,8 +395,10 @@ public selection = true; ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -383,11 +408,13 @@ public selection = true; ... ``` + } 이렇게 하면 ID 1, 2 및 5가 있는 데이터 항목에 해당하는 행을 @@igComponent 선택에 추가할 수 있습니다. #### 선택 이벤트 취소 + ```html @@ -395,6 +422,7 @@ public selection = true; ... ``` + ```typescript /* selectionExample.component.ts */ @@ -406,26 +434,26 @@ public handleRowSelectionChange(args) { ### API 참조 -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} -* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} +- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [가상화 및 성능](virtualization.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [가상화 및 성능](virtualization.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/sizing.md b/docs/angular/src/content/kr/grids_templates/sizing.md index da4deccbaf..47d914074e 100644 --- a/docs/angular/src/content/kr/grids_templates/sizing.md +++ b/docs/angular/src/content/kr/grids_templates/sizing.md @@ -1,21 +1,21 @@ @@if (igxName === 'IgxGrid') { --- -title: Angular Grid Sizing | Ignite UI for Angular | infragistics  -description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accomodate the different scenarios that users can have. +title: Angular Grid Sizing | Ignite UI for Angular | infragistics +description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have. keywords: angular grid sizing, igniteui for angular, infragistics --- } @@if (igxName === 'IgxTreeGrid') { --- -title: Angular Tree Grid Sizing | Ignite UI for Angular | infragistics  -description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accomodate the different scenarios that users can have. +title: Angular Tree Grid Sizing | Ignite UI for Angular | infragistics +description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have. keywords: angular grid sizing, igniteui for angular, infragistics --- } @@if (igxName === 'IgxHierarchicalGrid') { --- -title: Angular Hierarchical Grid Sizing | Ignite UI for Angular | infragistics  -description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accomodate the different scenarios that users can have. +title: Angular Hierarchical Grid Sizing | Ignite UI for Angular | infragistics +description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have. keywords: angular grid sizing, igniteui for angular, infragistics --- } @@ -40,20 +40,20 @@ If the `width` input does not have value assigned, its default value is `100%` a The grid's `width` can accepts value of `null`, which when set, renders all columns in the DOM. The grid sizes accordingly so there is no grid horizontal scrollbar since column virtualization is not applied. -* If there are 6 columns and none of them has width defined, the grid will have `width` of `816px`, because each column by default have assigned `width` of `136px` in this scenario. Same will happen if the columns have `width` in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. +- If there are 6 columns and none of them has width defined, the grid will have `width` of `816px`, because each column by default have assigned `width` of `136px` in this scenario. Same will happen if the columns have `width` in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. -* If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible: +- If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible: -* If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario: +- If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario: -* If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example. +- If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example. @@ -64,11 +64,11 @@ The grid's `width` can accepts value of `null`, which when set, renders all colu When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: -* When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. +- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. -* For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations: +- For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations: @@ -78,15 +78,15 @@ When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) ` When the `width` of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) will size relative to the browser window. -* For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly. +- For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly. -* If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`. +- If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`. -* If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. +- If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. @@ -102,15 +102,15 @@ By default if no height is defined for the [**@@igxName**]({environment:angularA The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. -* If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. +- If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. -* If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows. +- If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows. -* If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: +- If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: @@ -122,15 +122,15 @@ The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `heigh Setting the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how `width` is set in pixels. -* If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area. +- If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area. -* If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: +- If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: -* If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. +- If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. @@ -145,25 +145,25 @@ When the parent element does not have defined height, the browser does not assig Let's have `width` set to `1200px` and the parent element not having any size applied to it: -* If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid. +- If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid. -* If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14. +- If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14. -* If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`. +- If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`. -* If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. +- If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. -* If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized. +- If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized. @@ -178,23 +178,23 @@ By default when a column doesn't have a specified width it will try to autosize, When the grid is resized in these scenarios, the column width is also updated to reflect the changes, so it fills any new empty space available. -* If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`. +- If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`. -* When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`. +- When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`. -* If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`. +- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`. -* If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest. +- If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest. -* Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`. +- Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`. @@ -205,11 +205,11 @@ When the grid is resized in these scenarios, the column width is also updated to When columns have set specific `width` in pixels, they stick to that size, unless they are resized manually. Since the combined `width` of the columns is static, it can be less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` or exceed it. -* If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width. +- If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width. -* If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. +- If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. @@ -218,19 +218,19 @@ When columns have set specific `width` in pixels, they stick to that size, unles When columns have set `width` in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. -* If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. +- If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. -* If the combined width is exactly `100%`, the columns will fill all available space of the grid. +- If the combined width is exactly `100%`, the columns will fill all available space of the grid. -* If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered. +- If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered. -* If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`: +- If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`: @@ -238,7 +238,7 @@ When columns have set `width` in percentages, their size is calculated relativel --- ### Child Grid Sizing -Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them. +Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them. #### Width @@ -261,18 +261,18 @@ The difference is that for the child grid, when `height` is set to percentages, ## API References -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
    -* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md)
    Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/sorting.md b/docs/angular/src/content/kr/grids_templates/sorting.md index 990c3f2e5c..329b511895 100644 --- a/docs/angular/src/content/kr/grids_templates/sorting.md +++ b/docs/angular/src/content/kr/grids_templates/sorting.md @@ -28,24 +28,24 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -118,25 +118,25 @@ public ngOnInit() { } ### API 참조 -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/state-persistence.md b/docs/angular/src/content/kr/grids_templates/state-persistence.md index a8b705969c..5cc0d33b07 100644 --- a/docs/angular/src/content/kr/grids_templates/state-persistence.md +++ b/docs/angular/src/content/kr/grids_templates/state-persistence.md @@ -26,8 +26,9 @@ Ignite UI for Angular @@igComponent component provides the [`IgxGridState`]({env #### API -[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) - This method returns the grid state in a serialized JSON string, the easisest way to enable developers just take it and save it on any data storage (database, cloud, etc). Once the developer needs to restore this state, just pass it back to the [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setstate) method. The first optional method parameter is `serialize`, which determines whether [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) will return the original objects, or the serialized JSOn string. +[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) - This method returns the grid state in a serialized JSON string, the easiest way to enable developers just take it and save it on any data storage (database, cloud, etc). Once the developer needs to restore this state, just pass it back to the [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setstate) method. The first optional method parameter is `serialize`, which determines whether [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) will return the original objects, or the serialized JSOn string. The developer may choose to get only the state for a certain feature/features, by passing in the feature name, or an array with feature names as a second argument. + ```typescript // get all features` state in a serialized JSON string const gridState = this.state.getState(); @@ -56,6 +57,7 @@ public restoreSortingFiltering(sortingFilteringStates: IGridState) { ```typescript public options = { cellSelection: false; sorting: false; } ``` + ```html ``` @@ -85,14 +87,15 @@ The usefullnes of thеse simple to use single-point API's allows you to achieve this.state.setState(state); } ``` + . Depending on the scenario, the state can be saved to the browser `localStorage` or `sessionStorage` object, or saved in a database, cloud, passed on to a service, etc. #### Demo @@if (igxName === 'IgxGrid') { - @@ -133,15 +136,15 @@ public initColumns(column: IgxColumnComponent) { ## API References -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ## Additional Resources
    -* [@@igComponent overview](@@igMainTopic.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Selection](selection.md) \ No newline at end of file +- [@@igComponent overview](@@igMainTopic.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Selection](selection.md) \ No newline at end of file diff --git a/docs/angular/src/content/kr/grids_templates/summaries.md b/docs/angular/src/content/kr/grids_templates/summaries.md index 2032f86fa5..ba7b6d02c7 100644 --- a/docs/angular/src/content/kr/grids_templates/summaries.md +++ b/docs/angular/src/content/kr/grids_templates/summaries.md @@ -1,21 +1,21 @@ @@if (igxName === 'IgxGrid') { --- title: Angular Grid Summaries| Group Footer | Ignite UI for Angular | Infragistics -description: Configure Аngular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI +description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI keywords: angular grid summaries, igniteui for angular, infragistics --- } @@if (igxName === 'IgxTreeGrid') { --- title: Angular Tree Grid Summaries| Group Footer | Ignite UI for Angular | Infragistics -description: Configure Аngular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI +description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI keywords: angular grid summaries, ignite ui for angular, infragistics --- } @@if (igxName === 'IgxHierarchicalGrid') { --- title: Angular Hierarchical Grid Summaries| Group Footer | Ignite UI for Angular | Infragistics -description: Configure Аngular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI +description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI keywords: angular grid summaries, ignite ui for angular, infragistics --- } @@ -28,24 +28,24 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -60,23 +60,24 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu `string` 및 `boolean` [`data types`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype)의 경우 다음의 함수를 사용할 수 있습니다: - - count +- count `number` 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다: - - count - - min - - max - - average - - sum +- count +- min +- max +- average +- sum `date` 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다: - - count - - earliest - - latest +- count +- earliest +- latest **[`hasSummary`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#hassummary) 속성을 `true`로 설정하면 @@igComponent 요약**이 열 단위로 활성화됩니다. 또한, 각 열의 요약은 열 데이터 형식에 따라 해결되는 것에 유의하십시오. `@@igSelector`에서 기본 열 데이터 유형은 `string`이므로 `number` 또는 `date` 별 요약을 원하는 경우, [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype) 속성을 `number` 또는 `date`로 설정해야 합니다. @@if (igxName !== 'IgxHierarchicalGrid') { + ```html <@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> @@ -87,8 +88,10 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -107,10 +110,12 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu ``` + } 특정 열 또는 열 목록에서 요약을 활성화/비활성화하는 또 다른 방법은 **@@igSelector**의 공개 메소드 [`enableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#enablesummaries)/[`disableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disablesummaries)를 사용하는 것입니다. @@if (igxName !== 'IgxHierarchicalGrid') { + ```html <@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" > @@ -123,6 +128,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu ``` + ```typescript public enableSummary() { this.grid1.enableSummaries([ @@ -134,8 +140,10 @@ public disableSummary() { this.grid1.disableSummaries("ProductName"); } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html <@@igSelector #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" > @@ -153,6 +161,7 @@ public disableSummary() { ``` + ```typescript public enableSummary() { this.hierarchicalGrid.enableSummaries([ @@ -164,10 +173,12 @@ public disableSummary() { this.hierarchicalGrid.disableSummaries("Photo"); } ``` + } 이러한 함수가 요구 사항을 충족시키지 못하면 특정 열에 대한 사용자 요약을 제공할 수 있습니다. 이를 실행하려면 열 데이터 유형 및 필요에 따라 기본 클래스인 [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) 또는 [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) 중에서 하나를 무효화해야 합니다. 이 방법으로 기존 함수를 다시 정의하거나 새로운 함수를 추가할 수 있습니다. [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html) 클래스는 [`count`]({environment:angularApiUrl}/classes/igxsummaryoperand.html#count) 메소드에 대해서만 기본 실행을 제공합니다. [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)는 [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html)를 확장하고 [`min`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#min), [`max`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#max), [`sum`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#sum) 및 [`average`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#average)의 구현을 제공합니다. [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html)는 [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html)를 확장하며 [`earliest`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html#earliest) 및 [`latest`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html#latest)를 제공합니다. @@if (igxName !== 'IgxHierarchicalGrid') { + ```typescript import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular'; @@ -188,8 +199,10 @@ class MySummary extends IgxNumberSummaryOperand { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from "igniteui-angular"; @@ -210,8 +223,10 @@ class MySummary extends IgxNumberSummaryOperand { } } ``` + } 위의 코드에서 메소드 [`operate`]({environment:angularApiUrl}/classes/igxsummaryoperand.html#operate)는 인터페이스인 [`IgxSummaryResult`]({environment:angularApiUrl}/interfaces/igxsummaryresult.html)의 목록을 반환하는 것을 볼 수 있습니다. + ```typescript interface IgxSummaryResult { key: string; @@ -224,6 +239,7 @@ interface IgxSummaryResult { > 요약 행 높이를 올바르게 계산하기 위해 @@igComponent의 [`operate`]({environment:angularApiUrl}/classes/igxsummaryoperand.html#operate) 메소드에서 데이터가 비어있는 경우에도 항상 적절한 길이의 [`IgxSummaryResult`]({environment:angularApiUrl}/interfaces/igxsummaryresult.html) 배열을 반환해야 합니다. @@if (igxName !== 'IgxHierarchicalGrid') { 이제 `UnitsInStock` 열에 사용자 요약을 추가해 보겠습니다. [`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries) 속성을 아래에서 작성하는 클래스로 설정하면 됩니다. + ```html <@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" > @@ -244,10 +260,12 @@ export class GridComponent implements OnInit { .... } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { 이제 `GramyNominations` 열에 사용자 요약을 추가해 보겠습니다. [`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries) 속성을 아래에서 작성하는 클래스로 설정하면 됩니다. + ```html @@ -273,6 +291,7 @@ export class HGridSummarySampleComponent implements OnInit { .... } ``` + } #### Custom summaries, which access all @@igComponent data @@ -297,24 +316,24 @@ class MySummary extends IgxNumberSummaryOperand { @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -326,13 +345,13 @@ class MySummary extends IgxNumberSummaryOperand { 열 단위로 그룹화하면 @@igComponent는 [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 및 [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성을 사용하여 요약 위치 및 계산 모드를 변경할 수 있습니다. [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 속성의 사용 가능한 값은 다음과 같습니다: - - rootLevelOnly - 요약은 루트 수준에 대해서만 계산됩니다. - - childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다. - - rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다. +- rootLevelOnly - 요약은 루트 수준에 대해서만 계산됩니다. +- childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다. +- rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다. [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성의 사용 가능한 값은 다음과 같습니다: - - top - 요약 행은 그룹화 행의 하위 앞에 표시됩니다. - - bottom - 요약 행은 그룹화 행의 하위 뒤에 표시됩니다. 이것이 기본값입니다. +- top - 요약 행은 그룹화 행의 하위 앞에 표시됩니다. +- bottom - 요약 행은 그룹화 행의 하위 뒤에 표시됩니다. 이것이 기본값입니다. > [!NOTE] > [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성은 하위 수준 요약에만 적용됩니다. 루트 수준 요약은 @@igComponent의 아래에 항상 고정되어 표시됩니다. @@ -340,8 +359,8 @@ class MySummary extends IgxNumberSummaryOperand { #### 데모 - @@ -352,20 +371,20 @@ class MySummary extends IgxNumberSummaryOperand { @@igComponent는 루트 노드와 각 중첩된 하위 노드 수준에 대해 별도의 요약을 지원합니다. 표시된 요약은 [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 속성을 사용하여 구성할 수 있습니다. 하위 수준 요약은 [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성을 사용하여 하위 노드 전후에 표시할 수 있습니다. [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 속성의 사용 가능한 값은 다음과 같습니다: - - rootLevelOnly - 요약은 루트 수준 노드에 대해서만 계산됩니다. - - childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다. - - rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다. +- rootLevelOnly - 요약은 루트 수준 노드에 대해서만 계산됩니다. +- childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다. +- rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다. [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성의 사용 가능한 값은 다음과 같습니다: - - top - 요약 행은 하위 행의 목록 앞에 나타납니다. - - bottom - 요약 행은 하위 행의 목록 뒤에 나타납니다. 이것이 기본값입니다. +- top - 요약 행은 하위 행의 목록 앞에 나타납니다. +- bottom - 요약 행은 하위 행의 목록 뒤에 나타납니다. 이것이 기본값입니다. > [!NOTE] > [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성은 하위 수준 요약에만 적용됩니다. 루트 수준 요약은 @@igComponent의 아래에 항상 고정되어 표시됩니다. - @@ -387,30 +406,30 @@ class MySummary extends IgxNumberSummaryOperand { ### API 참조 -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [@@igxNameSummaries 스타일]({environment:sassApiUrl}/themes#function-grid-summary-theme) -* [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html) -* [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) -* [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) -* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameSummaries 스타일]({environment:sassApiUrl}/themes#function-grid-summary-theme) +- [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html) +- [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) +- [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) +- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [가상화 및 성능](virtualization.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [가상화 및 성능](virtualization.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/toolbar.md b/docs/angular/src/content/kr/grids_templates/toolbar.md index af2a850b6f..bb06b8f489 100644 --- a/docs/angular/src/content/kr/grids_templates/toolbar.md +++ b/docs/angular/src/content/kr/grids_templates/toolbar.md @@ -26,10 +26,10 @@ _language: kr The @@igComponent in Ignite UI for Angular provides an [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) which is essentially a container for **UI** operations. The Angular toolbar is located at the top of the Angular component, i.e the @@igComponent and it matches its horizontal size. The toolbar container can host predefined UI controls for the following @@igComponent's features: - - Column Hiding - - Column Pinning - - Excel Exporting - - Advanced Filtering +- Column Hiding +- Column Pinning +- Excel Exporting +- Advanced Filtering or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers. @@ -37,24 +37,24 @@ or just any other custom content. The toolbar and the predefined UI components s @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -63,6 +63,7 @@ or just any other custom content. The toolbar and the predefined UI components s The predefined `actions` and `title` UI components are added inside the `` and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@if (igxName === 'IgxGrid') { + ```html Grid Toolbar @@ -75,8 +76,10 @@ The predefined `actions` and `title` UI components are added inside the `     ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -90,8 +93,10 @@ The predefined `actions` and `title` UI components are added inside the ` ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -105,6 +110,7 @@ The predefined `actions` and `title` UI components are added inside the ` ``` + } > Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the [`` container]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html). This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. @@ -112,28 +118,34 @@ The predefined `actions` and `title` UI components are added inside the ` ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } For a comprehensive look over each of the default UI components, continue reading the **Features** section @@ -158,24 +170,24 @@ Listed below are the main features of the toolbar with example code for each of @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -196,6 +208,7 @@ import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular export class AppModule {} ``` + @@if (igxName !== 'IgxHierarchicalGrid') { #### 내보내기 사용자 정의 @@ -249,8 +262,8 @@ public toolbarExportingHandler(args) { @@if (igxName === 'IgxGrid') { - @@ -258,8 +271,8 @@ public toolbarExportingHandler(args) { } @@if (igxName === 'IgxTreeGrid') { - @@ -293,8 +306,8 @@ public toolbarExportingHandler(args) { @@if (igxName === 'IgxGrid') { - @@ -302,8 +315,8 @@ public toolbarExportingHandler(args) { } @@if (igxName === 'IgxTreeGrid') { - @@ -311,8 +324,8 @@ public toolbarExportingHandler(args) { } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -326,25 +339,25 @@ public toolbarExportingHandler(args) { [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 속성: -* [`toolbar`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbar) -* [`showProgress`]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress) -* [`exportExcel`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexcel) -* [`exportCsv`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsv) -* [`exportText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exporttext) -* [`exportExcelText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexceltext) -* [`exportCsvText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsvtext) +- [`toolbar`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbar) +- [`showProgress`]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress) +- [`exportExcel`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexcel) +- [`exportCsv`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsv) +- [`exportText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exporttext) +- [`exportExcelText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexceltext) +- [`exportCsvText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsvtext) [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 이벤트: -* [`toolbarExporting`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbarExporting) +- [`toolbarExporting`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbarExporting) 스타일: -* [`@@igxNameComponent 스타일`]({environment:sassApiUrl}/themes#function-grid-theme) +- [`@@igxNameComponent 스타일`]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/kr/grids_templates/virtualization.md b/docs/angular/src/content/kr/grids_templates/virtualization.md index 63bfbf6464..55b9302a73 100644 --- a/docs/angular/src/content/kr/grids_templates/virtualization.md +++ b/docs/angular/src/content/kr/grids_templates/virtualization.md @@ -1,22 +1,22 @@ @@if (igxName === 'IgxGrid') { --- -title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular -description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory. +title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular +description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory. keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Angular Virtualization Directive, Angular Data Table Virtualization, Virtualization, Angular Data Table Performance, Data Table Performance _language: kr --- } @@if (igxName === 'IgxTreeGrid') { --- -title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular -description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the tree grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory. +title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular +description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the tree grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory. keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Tree Grid, Angular Tree Table, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular High Performance Tree Grid, Angular High Performance Tree Table, Angular Virtualization Directive, Angular Tree Table Virtualization, Virtualization, Angular Tree Table Performance, Tree Table Performance _language: kr --- } @@if (igxName === 'IgxHierarchicalGrid') { --- -title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular +title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the hierarchical grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory. keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Hierarchical Grid, Angular Hierarchical Table, Angular Hierarchical Grid component, Angular Hierarchical Table component, Angular Hierarchical Grid control, Angular Hierarchical Table control, Angular High Performance Hierarchical Grid, Angular High Performance Hierarchical Table, Angular Virtualization Directive, Angular Hierarchical Table Virtualization, Virtualization, Angular Hierarchical Table Performance, Hierarchical Table Performance _language: kr @@ -30,8 +30,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig #### 데모 - @@ -39,8 +39,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig @@if (igxName === 'IgxHierarchicalGrid') { #### 데모 - @@ -53,8 +53,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig 데이터의 크기는 다음에 따라 결정됩니다: -* 수직(행) 가상화의 행 높이입니다. 이것은 [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) 옵션에 의해 결정되며 기본적으로 50(px)입니다. -* 수평(열) 가상화의 개별 열 너비(픽셀 단위)입니다. 각 열 컴포넌트에 대해 명시적으로 폭을 설정하거나 명시적으로 폭이 설정되지 않은 모든 열에 적용되는 @@igComponent의 [`columnWidth`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnwidth) 옵션을 설정할 수 있습니다. +- 수직(행) 가상화의 행 높이입니다. 이것은 [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) 옵션에 의해 결정되며 기본적으로 50(px)입니다. +- 수평(열) 가상화의 개별 열 너비(픽셀 단위)입니다. 각 열 컴포넌트에 대해 명시적으로 폭을 설정하거나 명시적으로 폭이 설정되지 않은 모든 열에 적용되는 @@igComponent의 [`columnWidth`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnwidth) 옵션을 설정할 수 있습니다. 규격을 설정하지 않은 채로 그리드에 기본 동작을 적용하면 대부분의 경우 원하는 레이아웃이 생성됩니다. 열 너비의 경우에는 열 수, 너비가 설정된 열 및 @@igComponent 컨테이너의 계산된 너비에 따라 결정됩니다. 그리드는 할당하려는 폭이 136(px) 미만인 경우 이외에는 사용 가능한 공간 안에 모든 열을 맞추려고 합니다. 이 경우, 할당되지 않은 너비를 가진 열은 136(px)의 최소 너비로 설정되고 가로 스크롤바가 표시됩니다. 그리드는 가로 방향으로 가상화됩니다. @@ -68,8 +68,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig ### 원격 가상화 데모 - @@ -108,7 +108,7 @@ public processData() { 데이터를 요청할 때는 [`startIndex`]({environment:angularApiUrl}/interfaces/iforofstate.html#startindex) 및 [`chunkSize`]({environment:angularApiUrl}/interfaces/iforofstate.html#chunksize) 속성을 제공하는 [`IForOfState`]({environment:angularApiUrl}/interfaces/iforofstate.html) 인터페이스를 사용해야 합니다. -***참고:*** 첫 번째 [`chunkSize`]({environment:angularApiUrl}/interfaces/iforofstate.html#chunksize)는 항상 0이며 특정 애플리케이션애플리케이션 시나리오에 따라 결정해야 합니다. +_**참고:**_ 첫 번째 [`chunkSize`]({environment:angularApiUrl}/interfaces/iforofstate.html#chunksize)는 항상 0이며 특정 애플리케이션애플리케이션 시나리오에 따라 결정해야 합니다. ### 원격 정렬/필터링 가상화 원격 정렬 및 필터링을 제공하려면 [`dataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#datapreload), [`sortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingDone), [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) 출력에 서브스크라이브해야 하므로 받은 인수를 기반으로 적절한 요청을 하고 공개 [@@igxName]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 속성 [`totalItemCount`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#totalitemcount)를 설정해야 합니다. @@ -116,8 +116,8 @@ public processData() { 원격 데이터를 요청할 때 필터링 작업은 대소문자를 구분합니다. - @@ -161,8 +161,8 @@ public processData() { 원격 필터링은 플랫 컬렉션에서 직접 실행해야 합니다. 상위가 필터링과 일치하는지 여부에 관계없이 필터링 조건과 일치하는 모든 레코드에 대해 모든 상위를 포함시켜야 합니다(계층 구조를 유지하기 위해 이 작업을 실행함). 결과는 다음과 같습니다: - @@ -173,7 +173,7 @@ public processData() { ### 가상화 제한 사항 -* Mac OS에서 "스크롤할 때 스크롤바 만 표시" 옵션이 true(기본값)로 설정되어 있으면 가로 스크롤바가 표시되지 않습니다. 이것은 @@igComponent의 행 컨테이너에 오버플로가 숨기기로 설정되어 있기 때문입니다. 옵션을 "항상"으로 변경하면 스크롤바가 표시됩니다. +- Mac OS에서 "스크롤할 때 스크롤바 만 표시" 옵션이 true(기본값)로 설정되어 있으면 가로 스크롤바가 표시되지 않습니다. 이것은 @@igComponent의 행 컨테이너에 오버플로가 숨기기로 설정되어 있기 때문입니다. 옵션을 "항상"으로 변경하면 스크롤바가 표시됩니다. ### FAQ @@ -184,27 +184,27 @@ public processData() {
    ### API 참조 -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) -* [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) +- [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html) ### 추가 리소스
    -* [@@igComponent 개요](@@igMainTopic.md) -* [페이징](paging.md) -* [필터링](filtering.md) -* [정렬](sorting.md) -* [요약](summaries.md) -* [열 이동](column-moving.md) -* [열 핀 고정](column_pinning.md) -* [열 크기 조정](column-resizing.md) -* [선택](selection.md) +- [@@igComponent 개요](@@igMainTopic.md) +- [페이징](paging.md) +- [필터링](filtering.md) +- [정렬](sorting.md) +- [요약](summaries.md) +- [열 이동](column-moving.md) +- [열 핀 고정](column_pinning.md) +- [열 크기 조정](column-resizing.md) +- [선택](selection.md)
    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다. -* [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **포럼**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/xplat/AI-AGENT-API-LINKS.md b/docs/xplat/AI-AGENT-API-LINKS.md index f26c0d4f74..9368472e8b 100644 --- a/docs/xplat/AI-AGENT-API-LINKS.md +++ b/docs/xplat/AI-AGENT-API-LINKS.md @@ -159,7 +159,7 @@ Check the `kind` field on the top-level symbol in the JSON: | JSON `kind` value | MDX `kind=` | |---|---| -| `128` | `"class"` *(default — can be omitted)* | +| `128` | `"class"` _(default — can be omitted)_ | | `256` | `"interface"` — **must set explicitly** | | `8` | `"enum"` — **must set explicitly** | | `4194304` | `"type"` — **must set explicitly** | @@ -294,6 +294,7 @@ Excel library types (`Workbook`, `Worksheet`, `WorksheetTable`, `WorksheetCell`, The Blazor excel package is **not** the main `IgniteUI.Blazor` package — it is `IgniteUI.Blazor.Documents.Excel`. This is already configured in `platform-context.ts`. Do not change it to `IgniteUI.Blazor`. ### `platform-context.ts` excel entry (Blazor — correct) + ```typescript excel: { docRoot: 'https://staging.infragistics.com/blazor-apis-new/blazor/IgniteUI.Blazor.Documents.Excel/25.1.x', @@ -351,11 +352,13 @@ Fix: replace JSX numeric props with string values inside comments: ### Column-level fix Before: + ```mdx ``` After: + ```mdx ``` @@ -363,11 +366,13 @@ After: ### Interface fix Before: + ```mdx ``` After: + ```mdx ``` @@ -375,11 +380,13 @@ After: ### Wrong class fix Before: + ```mdx ``` After: + ```mdx ``` diff --git a/docs/xplat/AI-AGENT-PLATFORM-BLOCK.md b/docs/xplat/AI-AGENT-PLATFORM-BLOCK.md index d58ea0da2b..93761eee9d 100644 --- a/docs/xplat/AI-AGENT-PLATFORM-BLOCK.md +++ b/docs/xplat/AI-AGENT-PLATFORM-BLOCK.md @@ -62,6 +62,7 @@ Each platform has a different template/markup syntax. Wrap each variant: ``` + @@ -105,6 +106,7 @@ Each platform has a different template/markup syntax. Wrap each variant: ```typescript this.grid.updateCell(newValue, rowID, 'Age'); ``` + @@ -140,6 +142,7 @@ When two or more platforms share the exact same content, use a comma-separated ` ```typescript this.grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc }); ``` + @@ -171,6 +174,7 @@ public updateCell() { this.hierarchicalGrid.updateCell(newValue, rowID, 'Age'); } ``` + @@ -254,6 +258,7 @@ Every `` must have exactly one `` closi ```html ``` + ```ts @@ -270,6 +275,7 @@ var grid = document.getElementById('grid') as IgcGridComponent; ```ts var grid = document.getElementById('grid') as IgcGridComponent; ``` + ``` @@ -300,6 +306,7 @@ Typical full-coverage pattern: ```html ``` + @@ -310,6 +317,7 @@ Typical full-coverage pattern: ```ts // WC-specific TypeScript initialization ``` + @@ -330,9 +338,11 @@ Typical full-coverage pattern: ## Step-by-Step: Adding a PlatformBlock to an Existing File 1. **Check for the import** at the top of the file: + ```mdx import PlatformBlock from 'docs-template/components/mdx/PlatformBlock.astro'; ``` + Add it if missing (after existing imports). 2. **Identify the platform-specific content** — look for platform API tokens (see table above) in unprotected code blocks. diff --git a/docs/xplat/API-LINKS-README.md b/docs/xplat/API-LINKS-README.md index 546d2124ca..b583e67f4d 100644 --- a/docs/xplat/API-LINKS-README.md +++ b/docs/xplat/API-LINKS-README.md @@ -27,11 +27,13 @@ Renders an inline `    …` link to a specific type or member. ### URL Resolution For **classes** (default kind): + ``` {docRoot}/classes/{PrefixType}#{member} ``` For **non-class kinds** (interface, enum, type, etc.): + ``` {docRoot}/{kind}s/{PrefixType}#{member} ``` @@ -130,7 +132,7 @@ This means `` resolves to ## API Documentation Source Data -Gitgub - https://github.com/IgniteUI/api-docs +GitHub - https://github.com/IgniteUI/api-docs The canonical source for determining which class owns a member is the `api-docs` project TypeDoc JSON files. The project lives in a sibling folder to this docs repository. The data files are organized by platform: @@ -176,6 +178,7 @@ The most common error is pointing `type="{ComponentName}"` to a property that be The `prefixed` prop (default `true`) controls whether the platform class prefix (`Igr`/`Igx`/`Igc`/`Igb`) is automatically prepended to `type`. **Keep default (`prefixed={true}`, or just omit it)** for all concrete short type names: + ```mdx @@ -234,7 +237,7 @@ Check the TypeDoc JSON for the symbol's `kind` field: | JSON `kind` value | MDX `kind=` attribute | |---|---| -| `128` | `"class"` *(default, can be omitted)* | +| `128` | `"class"` _(default, can be omitted)_ | | `256` | `"interface"` | | `8` | `"enum"` | | `4194304` | `"type"` | diff --git a/docs/xplat/API-REFERENCES.md b/docs/xplat/API-REFERENCES.md index cb3f53d72a..d804239220 100644 --- a/docs/xplat/API-REFERENCES.md +++ b/docs/xplat/API-REFERENCES.md @@ -155,14 +155,14 @@ export interface ApiPackageConfig { | `pkg=` key | Content area | React package | Angular `classSuffix` | |------------|-------------|---------------|----------------------| -| `"core"` *(default)* | Components, inputs, layouts (Toast, Badge, Accordion…) | `igniteui-react` | — | +| `"core"` _(default)_ | Components, inputs, layouts (Toast, Badge, Accordion…) | `igniteui-react` | — | | `"charts"` | All chart types (CategoryChart, FinancialChart, XamDataChart…) | `igniteui-react-charts` | `Component` | | `"grids"` | Data grids, columns, grid events | `igniteui-react-grids` | — | | `"gauges"` | Radial/linear gauges, bullet graph | `igniteui-react-gauges` | `Component` | | `"maps"` | Geographic map and series | `igniteui-react-maps` | `Component` | | `"inputs"` | Input controls | `igniteui-react-inputs` | — | | `"layouts"` | Layout components | `igniteui-react-layouts` | — | -| `"excel"` | Excel library (Workbook, Worksheet…) | `igniteui-react-excel` | — *(no suffix — utility classes)* | +| `"excel"` | Excel library (Workbook, Worksheet…) | `igniteui-react-excel` | — _(no suffix — utility classes)_ | | `"spreadsheet"` | Spreadsheet component | `igniteui-react-spreadsheet` | `Component` | | `"datasources"` | Data source utilities | `igniteui-react-datasources` | — | @@ -194,7 +194,7 @@ Use anywhere in prose to link a class, interface, enum, type alias, variable, or | `kind=` | TypeDoc URL segment | Casing | |---------|--------------------|----| -| `"class"` *(default)* | `/classes/` | lowercased | +| `"class"` _(default)_ | `/classes/` | lowercased | | `"interface"` | `/interfaces/` | preserved | | `"enum"` | `/enums/` | preserved | | `"type"` | `/types/` | preserved | @@ -485,6 +485,7 @@ The MDX parser tries to evaluate them even inside comments. Fix by converting to When updating any MDX file to use `ApiLink` and `ApiRef`: 1. **Add imports** immediately after the closing `---` of the frontmatter — never inside a code fence: + ```mdx import ApiRef from '@/components/mdx/ApiRef.astro'; import ApiLink from '@/components/mdx/ApiLink.astro'; diff --git a/docs/xplat/src/content/en/components/ai/skills.mdx b/docs/xplat/src/content/en/components/ai/skills.mdx index b305e81272..fe81866233 100644 --- a/docs/xplat/src/content/en/components/ai/skills.mdx +++ b/docs/xplat/src/content/en/components/ai/skills.mdx @@ -44,8 +44,8 @@ This project uses {ProductName}. Follow the guidelines in the skill files below: - Theming & Styling: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md ```` -3. Alternatively, paste the full content of the relevant `SKILL.md` files directly into `copilot-instructions.md` for fully offline, self-contained instructions. -4. Copilot will now apply these instructions automatically on every chat and inline suggestion in VS Code. +1. Alternatively, paste the full content of the relevant `SKILL.md` files directly into `copilot-instructions.md` for fully offline, self-contained instructions. +2. Copilot will now apply these instructions automatically on every chat and inline suggestion in VS Code. ### Cursor diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx index 8ae79dbcbd..aa97e1eaf5 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx @@ -110,12 +110,12 @@ d in the above sections: | `Axes` -> `NumericYAxis` -> `LabelVisibility` | `YAxisLabelVisibility` | | `Axes` -> `NumericXAxis` -> `LabelVisibility` | `XAxisLabelVisibility` | -{/* TODO correct links in Transformer */} -{/* +{/*TODO correct links in Transformer _/} +{/_ | `Axes` -> `NumericYAxis` -> `labelSettings.location` | `YAxisLabelLocation` | | `Axes` -> `NumericXAxis` -> `labelSettings.location` | `XAxisLabelLocation` | | `Axes` -> `NumericYAxis` -> `labelSettings.horizontalAlignment` | `YAxisLabelHorizontalAlignment` | | `Axes` -> `NumericXAxis` -> `labelSettings.verticalAlignment` | `XAxisLabelVerticalAlignment` | | `Axes` -> `NumericYAxis` -> `labelSettings.visibility` | `YAxisLabelVisibility` | -| `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` | */} +| `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` |*/} diff --git a/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx index b0cea8d76a..246bae34ea 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx @@ -49,8 +49,8 @@ The following example demonstrates the usage of the data highlighting overlay fe The `CategoryChart` highlight filter happens on the chart by setting the `InitialHighlightFilter` property. Since the `CategoryChart` takes all of the properties on your underlying data item into account by default, you will need to define the `InitialGroups` on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the `InitialGroups` to a value path in your underlying data item to group by a path that has duplicate values. -{/* Unsure of this part. Need to review */} -{/* ????? The `InitialHighlightFilter` is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/} +{/*Unsure of this part. Need to review _/} +{/_ ????? The `InitialHighlightFilter` is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/} Similar to the `DataChart`, the `HighlightedValuesDisplayMode` property is also exposed on the `CategoryChart`. In the case that you do not want to see the overlay, you can set this property to `Hidden`. @@ -59,7 +59,7 @@ The following example demonstrates the usage of the data highlighting overlay fe -{/* TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to: +{/*TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to: HighlightedHighMemberPath and HighlightedLowMemberPath in Range Series HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, HighlightedCloseMemberPath in Financial Series*/} diff --git a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx index 921a98582b..a55cfc87eb 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx @@ -226,6 +226,7 @@ this.Chart.markerTypes.add(MarkerType.None); // on LineSeries of DataChart this.LineSeries.markerType = MarkerType.None; + ``` @@ -256,6 +257,7 @@ this.Chart.Resolution = 10; // on LineSeries of DataChart: this.LineSeries.Resolution = 10; + ``` diff --git a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx index db711add83..229201bdb3 100644 --- a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx +++ b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx @@ -29,7 +29,7 @@ The following example demonstrates how to create Composite Chart using `ColumnSe - [Bar Chart](bar-chart.md) - [Column Chart](column-chart.md) -{/* - [Gantt Chart](gantt-chart.md) */} +{/*- [Gantt Chart](gantt-chart.md)*/} - [Line Chart](line-chart.md) - [Stacked Chart](stacked-chart.md) diff --git a/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx b/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx index 942e1cf40f..dd980f818d 100644 --- a/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx +++ b/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx @@ -30,7 +30,7 @@ You can create Donut Chart using the diff --git a/docs/xplat/src/content/en/components/editors/xdate-picker.mdx b/docs/xplat/src/content/en/components/editors/xdate-picker.mdx index c53e373462..76b9f04cc0 100644 --- a/docs/xplat/src/content/en/components/editors/xdate-picker.mdx +++ b/docs/xplat/src/content/en/components/editors/xdate-picker.mdx @@ -14,7 +14,7 @@ import ApiRef from 'igniteui-astro-components/components/mdx/ApiRef.astro'; The XDate Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI. -The `XDatePicker` component is deprecated from version +The `XDatePicker` component is deprecated from version @@ -38,7 +38,6 @@ This sample demonstrates how to create `XDatePicker` with option to select a sin - diff --git a/docs/xplat/src/content/en/components/excel-library.mdx b/docs/xplat/src/content/en/components/excel-library.mdx index 5910129f64..5508d9e531 100644 --- a/docs/xplat/src/content/en/components/excel-library.mdx +++ b/docs/xplat/src/content/en/components/excel-library.mdx @@ -235,6 +235,7 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => // ... } ``` + diff --git a/docs/xplat/src/content/en/components/excel-utility.mdx b/docs/xplat/src/content/en/components/excel-utility.mdx index c56c693975..aec1efaccc 100644 --- a/docs/xplat/src/content/en/components/excel-utility.mdx +++ b/docs/xplat/src/content/en/components/excel-utility.mdx @@ -112,6 +112,7 @@ export class ExcelUtility { }); } } + ``` diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx index 4e405f97d3..b026a6371d 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx @@ -31,10 +31,10 @@ All notable changes for each version of {ProductName} are documented on this pag ### {PackageGrids} (Grids) #### IgbGrid, IgbTreeGrid, IgbHierarchicalGrid, IgbPivotGrid - - Improved performance by dynamically adjusting the scroll throttle based on the data displayed in grid. +- Improved performance by dynamically adjusting the scroll throttle based on the data displayed in grid. #### IgbGrid, IgbTreeGrid, IgbHierarchicalGrid - - Added PDF export functionality to grid components. Grids can now be exported to PDF format alongside the existing Excel and CSV export options. +- Added PDF export functionality to grid components. Grids can now be exported to PDF format alongside the existing Excel and CSV export options. #### Breaking Changes @@ -47,23 +47,24 @@ All notable changes for each version of {ProductName} are documented on this pag - Added new component - IgbThemeProvider - allows scoping themes to specific page sections using Lit's context API, enabling multiple themes on a single page. Works in both Shadow and Light DOM. #### Badge - - New dot type, improved outline implementation following WCAG AA accessibility standards and theme based sizing. [#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889) +- New dot type, improved outline implementation following WCAG AA accessibility standards and theme based sizing. [#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889) #### Checkbox - - New --tick-width CSS property. [#1897](https://github.com/IgniteUI/igniteui-webcomponents/pull/1897) +- New --tick-width CSS property. [#1897](https://github.com/IgniteUI/igniteui-webcomponents/pull/1897) #### Combo - - New disableClear property which disables the clear button of the combo component. [#1896](https://github.com/IgniteUI/igniteui-webcomponents/pull/1896) +- New disableClear property which disables the clear button of the combo component. [#1896](https://github.com/IgniteUI/igniteui-webcomponents/pull/1896) #### Mask input - - Transform unicode digit code points to ASCII numbers for numeric patterns. [#1907](https://github.com/IgniteUI/igniteui-webcomponents/pull/1907) +- Transform unicode digit code points to ASCII numbers for numeric patterns. [#1907](https://github.com/IgniteUI/igniteui-webcomponents/pull/1907) #### Enhancements - - Accessibility color adjustments for Button, Button group, Calendar, Checkbox, Date picker, date range picker, Nav drawer, Radio group, Stepper. [#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959) - - Updated and aligned styles with the design kit for Button, Calendar, Carousel, Combo, Date picker, Date range picker, input, Select, Textarea. - - Improved keyboard navigation experience and grouping(now using native Math.groupBy) for Combo. +- Accessibility color adjustments for Button, Button group, Calendar, Checkbox, Date picker, date range picker, Nav drawer, Radio group, Stepper. [#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959) +- Updated and aligned styles with the design kit for Button, Calendar, Carousel, Combo, Date picker, Date range picker, input, Select, Textarea. +- Improved keyboard navigation experience and grouping(now using native Math.groupBy) for Combo. ### Bug Fixes + | Bug Number | Control | Description | |------------|---------|-------------| | 2189 | DataChart | DataChart skips rendering axis when there are no labels | @@ -186,8 +187,8 @@ Ability for axis annotations to automatically detect collisions and truncate to - The merging can be configured on the grid level to apply either: - - `OnSort` - only when the column is sorted. - - `Always` - always, regardless of data operations. + - `OnSort` - only when the column is sorted. + - `Always` - always, regardless of data operations. The default `CellMergeMode` is `OnSort`. @@ -228,7 +229,7 @@ col.Pinned = true; - Refactored grouping algorithm from recursive to iterative. - Optimized grouping operations. -- **Other Improvements** +- **Other Improvements** - A column's `MinWidth` and `MaxWidth` constrain the user-specified width so that it cannot go outside their bounds. - The `PagingMode` property can now be set as simple strings "local" and "remote" and does not require importing the `GridPagingMode` enum. @@ -870,11 +871,13 @@ Data Filtering via the `InitialFilter` property. Apply filter expressions to fil ### Deprecations - The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the avatar component to small: + ```css .avatar { --ig-size: var(--ig-size-small); } ``` + - `DateTimeInput` - `MinValue` and `MaxValue` properties have been deprecated. Please, use `Min` and `Max` instead. - `RangeSlider` diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx index 2b0e637eea..72a4640cd0 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx @@ -1381,9 +1381,11 @@ igc-avatar { - `value` is no longer readonly and can be explicitly set. The value attribute also supports declarative binding, accepting a valid JSON stringified array. - `value` type changed from `string[]` to `ComboValue[]` where + ```ts ComboValue = T | T[keyof T] ``` + - `igcChange` event object properties are also changed to reflect the new `value` type: diff --git a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx index 041c6a0970..de8baa39b7 100644 --- a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx @@ -22,7 +22,7 @@ The open-source libraries include: ## Create a New Blazor Project - - Start Visual Studio and click **Create a new project** on the start page, select a Blazor template such as **Blazor Server App**, **Blazor WebAssembly App**, or **Blazor Web App**, and click **Next**. +- Start Visual Studio and click **Create a new project** on the start page, select a Blazor template such as **Blazor Server App**, **Blazor WebAssembly App**, or **Blazor Web App**, and click **Next**. When using **Blazor Server App**, ensure you add `@rendermode InteractiveServer` in the pages where the components are used. diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx index 0705807cef..07e4201f8e 100644 --- a/docs/xplat/src/content/en/components/general-getting-started.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started.mdx @@ -110,7 +110,7 @@ Then follow the prompts to choose a name for the project, React as the framework ### Adding an Ignite UI React Grid Component -##### Package Installation +##### Package Installation To add the Ignite UI React [**Grid**](grids/data-grid.md) component to the app you need to install the `igniteui-react-grids` package: ```cmd @@ -409,7 +409,7 @@ This command will run the build script we created earlier. The build script will 3 - To run the project, launch a local development server. In this example, we are using Live Server. Right-click within the editor of **index.html** and select **Open with Live Server** -{/* wc-live-server */} +{/*wc-live-server*/} Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). @@ -417,7 +417,7 @@ Live Server is an extension to Visual Studio Code that allows you to launch a lo 4 - Navigate to the **index.html** using a web browser on your local server. The final result should show interactive map of the world: -{/* geo-map */} +{/*geo-map*/} diff --git a/docs/xplat/src/content/en/components/general-licensing.mdx b/docs/xplat/src/content/en/components/general-licensing.mdx index 3d37285f22..300fe5a242 100644 --- a/docs/xplat/src/content/en/components/general-licensing.mdx +++ b/docs/xplat/src/content/en/components/general-licensing.mdx @@ -26,7 +26,7 @@ For components under commercial license, it is important to know all the [legal If your trial has ended or your subscription [has expired](http://www.infragistics.com/renewal), each developer on your team using components under commercial license from Ignite UI will need to [purchase](https://www.infragistics.com/how-to-buy/product-pricing) a subscription. This will enable you to use our private npm feed hosted on [packages.infragistics.com/npm/js-licensed/](https://packages.infragistics.com/npm/js-licensed/) for development. There you will find the latest versions of the {ProductName} packages. If you have a current subscription, you can use this private feed and you will have access to the full version of {ProductName}. -{/* For detailed explanation of the Ignite UI license agreement and terms of use, [click here](https://www.infragistics.com/legal/license/igultimate-la).*/} +{/*For detailed explanation of the Ignite UI license agreement and terms of use, [click here](https://www.infragistics.com/legal/license/igultimate-la).*/} Infragistics offers free, non-commercial, not-for-resale (NFR) licenses for the following: diff --git a/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx b/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx index e42b74a795..4479605035 100644 --- a/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx +++ b/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx @@ -27,8 +27,8 @@ Our Ignite UI Premium components come with advanced enterprise features and are -- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md) -- [Dock Manager](../components/layouts/dock-manager.md) +- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md) +- [Dock Manager](../components/layouts/dock-manager.md) - [Charting library](../components/charts/chart-overview.md) - [Maps library](../components/geo-map.md) - [Excel Library](../components/excel-library.md) @@ -41,8 +41,8 @@ Our Ignite UI Premium components come with advanced enterprise features and are -- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md) -- [Dock Manager](../components/layouts/dock-manager.md) +- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md) +- [Dock Manager](../components/layouts/dock-manager.md) - [Charting library](../components/charts/chart-overview.md) - [Maps library](../components/geo-map.md) - [Spreadsheet](../components/spreadsheet-overview.md) diff --git a/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx index 563fab6aa3..268c8ad4b5 100644 --- a/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx +++ b/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx @@ -33,8 +33,8 @@ The following table explains properties of the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. diff --git a/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx index 5ed199cfe2..4269788d92 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx @@ -26,7 +26,7 @@ The {Platform} is geographic im ## {Platform} Displaying Imagery from Bing Maps Example -{/* */} +{/**/} Angular Bing Maps Imagery diff --git a/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx index 8f7d535fb0..2236f05977 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx @@ -51,6 +51,7 @@ function heatWorkerPostMessage() { } HeatTileGeneratorWebWorker.start(); export default {} as typeof Worker & (new () => Worker); + ``` @@ -87,6 +88,7 @@ function postMessageFunction() { self.postMessage.apply(self, Array.prototype.slice.call(arguments)); } export default {} as typeof Worker & (new () => Worker); + ``` ## Dependencies diff --git a/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx index bdc573cc39..23d37616d1 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx @@ -22,7 +22,7 @@ The following table summarizes supported and custom geographic imagery sources f | Open Street Maps | Provides geographic imagery from Open Street Maps service with an option to display a road map style only in one coloring theme. | | Bing Maps |Provides geographic imagery from Bing Maps service with configurable options to display the following map styles:
    • Satellite Map Style
    • Satellite Map with Labels Style
    • Road Map Style
    | -{/* | Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
    • Satellite Map Style
    • Road Map Style
    */} +{/*| Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
    • Satellite Map Style
    • Road Map Style
    */} ## Map Background Content The map component's property is used to display all supported types of geographic imagery sources. For each imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles. @@ -34,7 +34,7 @@ The following table summarizes imagery classes provided by the map component. ||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| ||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| -{/* |`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.| */} +{/*|`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.|*/} By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. diff --git a/docs/xplat/src/content/en/components/geo-map.mdx b/docs/xplat/src/content/en/components/geo-map.mdx index e43df0c3e3..f818f8ff05 100644 --- a/docs/xplat/src/content/en/components/geo-map.mdx +++ b/docs/xplat/src/content/en/components/geo-map.mdx @@ -214,7 +214,7 @@ Now that the map module is imported, next step is to create geographic map. The You can find more information about related {Platform} map features in these topics: - [Geographic Map Navigation](geo-map-navigation.md) -{/* - [Geographic Map Imagery](geo-map-display-imagery-types.md) */} +{/*- [Geographic Map Imagery](geo-map-display-imagery-types.md)*/} - [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md) - [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md) - [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md) diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx index c6e91c8538..ef8ea6b571 100644 --- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx @@ -200,7 +200,7 @@ the column collection is reset, and a new data source is bound to the grid. -{/* TODO */} +{/*TODO */} ## Additional Resources diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx index 8cd9411bee..5eb5e850d5 100644 --- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx @@ -52,6 +52,7 @@ return ( ); ``` +     @@ -93,6 +94,7 @@ const currencyCellTemplate = (ctx: IgrCellContext) => ( {formatCurrency(ctx.value)} ); ``` + @@ -105,8 +107,8 @@ const currencyCellTemplate = (ctx: IgrCellContext) => ( You can combine values of different fields from the data source as well. -{/* TODO: -Refer to the API documentation for `GridLiteCellContext` for more information. */} +{/*TODO: +Refer to the API documentation for `GridLiteCellContext` for more information.*/} @@ -119,6 +121,7 @@ const column = document.querySelector('igc-grid-lite-column'); // Return the custom currency formatted value column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count); ``` + @@ -133,6 +136,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => ( {asCurrency(ctx.value * ctx.row.data.count)} ); ``` + @@ -141,6 +145,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => ( ``` + ## Custom DOM Templates @@ -244,7 +249,7 @@ export interface GridLiteCellContext< -{/* TODO */} +{/*TODO */} ## Additional Resources diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx index 8354726e9d..c34c4f0256 100644 --- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx @@ -359,7 +359,7 @@ In the sample below you can try out the different column properties and how they -{/* TODO */} +{/*TODO */} ## Additional Resources diff --git a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx index 217cdbf1c6..a0810a2574 100644 --- a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx @@ -410,6 +410,7 @@ For example here is a Lit-based sample: } } ``` +     Here is an example: @@ -425,6 +426,7 @@ return( ); ``` +     @@ -564,6 +566,7 @@ export type DataPipelineParams = { type: 'sort' | 'filter'; }; ``` + ```typescript grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[] | Promise }; @@ -606,6 +609,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration } }; ``` + @@ -620,7 +624,7 @@ The following example mocks remote filter operation, reflecting the REST endpoin     -{/* TODO */} +{/*TODO */} ## Additional Resources diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx index fa1478da09..c3ac5f086d 100644 --- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx @@ -104,7 +104,7 @@ return ( -{/* TODO */} +{/*TODO */} ## Additional Resources 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 f85dbe27db..eecf5363ac 100644 --- a/docs/xplat/src/content/en/components/grid-lite/overview.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/overview.mdx @@ -55,6 +55,7 @@ Or using yarn: ```cmd yarn add igniteui-grid-lite ``` + ### Installation @@ -69,6 +70,7 @@ Or using yarn: ```cmd yarn add igniteui-react ``` + ### Using the Grid Lite in your {Platform} code @@ -79,6 +81,7 @@ In the file where you want to use Grid Lite, first we need to import it: ```tsx import { IgrGridLite } from 'igniteui-react/grid-lite'; ``` + @@ -89,6 +92,7 @@ import { IgcGridLite } from 'igniteui-grid-lite'; IgcGridLite.register(); ``` + @@ -113,6 +117,7 @@ return ( ); ``` + @@ -146,6 +151,7 @@ Or via .NET CLI: ```cmd dotnet add package IgniteUI.Blazor.GridLite ``` + ### Using Grid Lite 1 - Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file: diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx index 76f6cf8ce6..23d7936bb9 100644 --- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx @@ -250,6 +250,7 @@ The {GridLiteTitle} supports tri-state sorting and it is always enabled. End-use ``` ascending -> descending -> none -> ascending ``` + where `none` is the initial state of the data, that is to say with no sorting applied by the grid. @@ -261,6 +262,7 @@ where `none` is the initial state of the data, that is to say with no sorting ap ``` Ascending -> Descending -> None -> Ascending ``` + where `None` is the initial state of the data, that is to say with no sorting applied by the grid. @@ -706,6 +708,7 @@ export type DataPipelineParams = { type: 'sort' | 'filter'; }; ``` + ```typescript grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams) => T[] | Promise }; @@ -748,6 +751,7 @@ grid.DataPipelineConfiguration = new DataPipelineParams } }; ``` + The custom callback can be async as the grid will wait for it until it resolves. @@ -761,7 +765,7 @@ The following example mocks remote sorting operation, reflecting the REST endpoi -{/* TODO */} +{/*TODO */} ## Additional Resources diff --git a/docs/xplat/src/content/en/components/grid-lite/theming.mdx b/docs/xplat/src/content/en/components/grid-lite/theming.mdx index bfb6e98ee6..f011fab897 100644 --- a/docs/xplat/src/content/en/components/grid-lite/theming.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/theming.mdx @@ -45,7 +45,7 @@ In the sample below, you can preview all the default base themes. Aside from the default themes shipped with the {GridLiteTitle} package, you can further customize the look and feel of your data grid by using an alternate set of CSS custom properties. -Refer to the [theming topic](../grids/theming-grid.md) for more details. +Refer to the [theming topic](../grids/theming-grid.md) for more details. ```css .grid-sample { @@ -70,7 +70,7 @@ Here is an example showcasing the custom theming from above. -{/* TODO */} +{/*TODO */} ## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx index 9f91289d29..a677e80c94 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx @@ -197,6 +197,7 @@ ngAfterViewInit(): void { this.@@igObjectRef.advancedFilteringExpressionsTree = tree; } + ``` @@ -228,6 +229,7 @@ connectedCallback(): void { grid.advancedFilteringExpressionsTree = tree; } ``` + @@ -260,6 +262,7 @@ const filteringTree: IgrFilteringExpressionsTree = { + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx index d1038b88f1..491862b39c 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx @@ -83,6 +83,7 @@ After batch editing is enabled, define a Redo + ``` @@ -116,6 +117,7 @@ After batch editing is enabled, define a @@ -127,6 +129,7 @@ After batch editing is enabled, define a Undo + ``` @@ -210,6 +213,7 @@ private OnRedoClick() { this.grid.transactions.redo(); } } + ``` @@ -223,6 +227,7 @@ private OnRedoClick() { ``` + @@ -396,6 +401,7 @@ export class GridBatchEditingSampleComponent { } } ``` + @@ -424,6 +430,7 @@ export class HierarchicalGridBatchEditingSampleComponent { } } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx index f36dfa6220..c6e4b314c1 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx @@ -95,6 +95,7 @@ Then you should define the column template with the combo: ); } + ``` @@ -111,6 +112,7 @@ Then you should define the column template with the combo: } ``` + @@ -183,6 +185,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) { }; }); } + ``` @@ -212,6 +215,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) { } } ``` + @@ -276,6 +280,7 @@ The `id` is necessary to set the value of `id` attribute. type="info" [indeterminate]="true"> ``` + @@ -308,6 +313,7 @@ And lastly, adding the , which is required whil return @
    ; }; ``` +     ## Known Issues and Limitations diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx index 7304160546..abb10c3528 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx @@ -338,6 +338,7 @@ igRegisterScript("WebGridCellEditCellTemplate", (ctx) => { `; }, false); ``` + @@ -430,6 +431,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -472,6 +474,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -530,6 +533,7 @@ public webGridCellEditCellTemplate = (e: IgrCellTemplateContext) => { ); }; ``` + Working sample of the above can be found here for further reference: @@ -589,6 +593,7 @@ public keydownHandler(event) { } } } + ``` @@ -611,6 +616,7 @@ function handleKeyDown(event: KeyBoardEvent) { } } ``` + - ENTER/SHIFT + ENTER navigation @@ -632,6 +638,7 @@ if (key == 13) { this.cdr.detectChanges(); }); } + ``` @@ -649,6 +656,7 @@ if (code === "Enter" || code === "NumpadEnter") { }); } ``` + Key parts of finding the next eligible index would be: @@ -792,6 +800,7 @@ this.selectedCell.update(newData); // Directly using the row `update` method const row = this.grid.getRowByKey(rowID); row.update(newData); + ``` @@ -810,6 +819,7 @@ selectedCell.update(newData); const row = grid1Ref.current.getRowByKey(rowID); row.update(newData); ``` + @@ -829,6 +839,7 @@ row.update(newData); IgbRowType row = this.grid.GetRowByKey(rowID); row.Update(newData); } + ``` @@ -849,6 +860,7 @@ this.selectedCell.update(newData); const row = this.treeGrid.getRowByKey(rowID); row.update(newData); ``` + @@ -867,6 +879,7 @@ row.update(newData); IgbRowType row = this.treeGrid.GetRowByKey(rowID); row.Update(newData); } + ``` @@ -888,6 +901,7 @@ this.selectedCell.update(newData); const row = this.hierarchicalGrid.getRowByKey(rowID); row.update(newData); ``` + @@ -906,6 +920,7 @@ row.update(newData); IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID); row.Update(newData); } + ``` @@ -923,6 +938,7 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID); const row = this.grid.getRowByIndex(rowIndex); row.delete(); ``` + @@ -1146,6 +1162,7 @@ function handleCellEdit(args: IgrGridEditEventArgs): void { } } ``` + @@ -1172,7 +1189,7 @@ If the value entered in a cell under the **Units On Order** column is larger tha ```typescript public webTreeGridCellEdit(event: CustomEvent): void { const column = event.detail.column; - + if (column.field === 'Age') { if (event.detail.newValue < 18) { event.detail.cancel = true; @@ -1208,6 +1225,7 @@ igRegisterScript("HandleCellEdit", (ev) => { } }, false); ``` + @@ -1230,6 +1248,7 @@ public webTreeGridCellEdit(args: IgrGridEditEventArgs): void { } } } + ``` @@ -1267,6 +1286,7 @@ public webHierarchicalGridCellEdit(event: CustomEvent): vo } } ``` + @@ -1350,6 +1370,7 @@ Then set the related CSS properties for that class: --ig-grid-cell-editing-background: #add8e6; } ``` + @@ -1380,6 +1401,7 @@ Then set the related CSS properties for that class: --ig-grid-cell-editing-background: #add8e6; } ``` + @@ -1410,6 +1432,7 @@ Then set the related CSS properties for that class: --ig-grid-cell-editing-background: #add8e6; } ``` + ### Styling Example diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx index 1ee08d8503..1a045af869 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx @@ -78,6 +78,7 @@ const cellMergeMode: GridCellMergeMode = 'always'; @code { private GridCellMergeMode CellMergeMode = GridCellMergeMode.Always; } + ``` @@ -89,6 +90,7 @@ At the column level, merging can be enabled or disabled with the ``` + @@ -124,6 +126,7 @@ In the above example: ```tsx const cellMergeMode: GridCellMergeMode = 'onSort'; ``` + @@ -147,6 +150,7 @@ const cellMergeMode: GridCellMergeMode = 'onSort'; @code { private GridCellMergeMode CellMergeMode = GridCellMergeMode.OnSort; } + ``` @@ -174,6 +178,7 @@ export declare class IgrGridMergeStrategy { comparer: (prevRecord: any, record: any, field: string) => boolean; } ``` + @@ -190,6 +195,7 @@ export declare class IgcGridMergeStrategy { comparer: (prevRecord: any, record: any, field: string) => boolean; } + ``` @@ -214,6 +220,7 @@ export class MyCustomStrategy extends IgrDefaultMergeStrategy { } } ``` + ```ts @@ -271,6 +278,7 @@ export class MyCustomStrategy extends IgcDefaultTreeGridMergeStrategy { ### Applying a Custom Strategy Once defined, assign the strategy to the grid through the property: + ```tsx <{ComponentSelector} data={data} mergeStrategy={customStrategy}> @@ -281,6 +289,7 @@ Once defined, assign the strategy to the grid through the @@ -292,6 +301,7 @@ constructor() { grid.mergeStrategy = new MyCustomStrategy() as IgcGridMergeStrategy; grid.cellMergeMode = 'always'; } + ``` ### Demo diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx index 0c6f8afeb8..58f2beb37f 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx @@ -142,6 +142,7 @@ gridRef.current.selectRange(range) this.grid.SelectRange(new IgbGridSelectionRange[] {}); } } + ``` @@ -155,6 +156,7 @@ gridRef.current.selectRange(range) ```ts this.grid.clearCellSelection(); ``` + @@ -193,6 +195,7 @@ gridRef.current.clearCellSelection(); } } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx index 5a32786873..ecf3ac8510 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx @@ -207,6 +207,7 @@ Also, if you need to change the default expand/collapse indicator, we provide te this.addressColumn.CollapsibleIndicatorTemplate = this.ColumnIndicatorTemplate; } } + ``` @@ -237,6 +238,7 @@ public indTemplate = (ctx: IgcColumnTemplateContext) => { `; } ``` + @@ -256,6 +258,7 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => { ) } + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx index 6c3c68aa51..6e8565c7af 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx @@ -726,6 +726,7 @@ Now all we have to do is bind the `Checked` property of both radio buttons respe ``` + ### Disable hiding of a column @@ -857,6 +858,7 @@ We can easily prevent the user from being able to hide columns through the colum + ``` @@ -1109,6 +1111,7 @@ Then set the related CSS variables for the related components. We will apply the --ig-button-focus-visible-foreground: black; --ig-button-disabled-foreground: #ffcd0f; } + ``` @@ -1144,6 +1147,7 @@ Then set the related CSS variables for the related components. We will apply the --ig-button-disabled-foreground: #ffcd0f; } ``` + @@ -1177,6 +1181,7 @@ Then set the related CSS variables for the related components. We will apply the --ig-button-focus-visible-foreground: black; --ig-button-disabled-foreground: #ffcd0f; } + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx index faa9f8597c..6ff4ad5400 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx @@ -86,9 +86,11 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => { **Column moving** feature is enabled on a per-grid level, meaning that the could have either movable or immovable columns. This is done via the input of the . + ```html <{ComponentSelector} [moving]="true"> ``` + @@ -163,6 +165,7 @@ const idColumn = grid.getColumnByName("ID"); const nameColumn = grid.getColumnByName("Name"); grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); + ``` @@ -175,6 +178,7 @@ grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget); } ``` + @@ -238,6 +242,7 @@ public onColumnMovingEnd(event) { } } ``` + @@ -253,6 +258,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => { + ``` @@ -268,6 +274,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => { ColumnMovingEndScript='onColumnMovingEnd'> ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx index ec2e4aca9c..5052c1b802 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx @@ -275,6 +275,7 @@ function onColumnPin(e) { } igRegisterScript("onColumnPin", onColumnPin, false); + ``` @@ -291,6 +292,7 @@ When set to End the columns are rendered at the end of the grid, after the unpin ```typescript public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` + @@ -302,6 +304,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; var grid = document.getElementById('dataGrid') as {ComponentName}Component; grid.pinning = { columns: ColumnPinningPosition.End }; ``` + @@ -312,6 +315,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End }; ```tsx <{ComponentSelector} data={nwindData} autoGenerate={true} pinning={pinningConfig}> ``` + @@ -323,6 +327,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End }; Columns = ColumnPinningPosition.End }; } + ``` @@ -361,6 +366,7 @@ This can be done by creating a header template for the columns with a custom ico ``` + @@ -419,6 +425,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -440,7 +447,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { igRegisterScript("WebGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; window.toggleColumnPin = function toggleColumnPin(field) { - var grid = document.getElementsByTagName("igc-grid")[0]; + var grid = document.getElementsByTagName["igc-grid"](0); var col = grid.getColumnByName(field); col.pinned = !col.pinned; grid.markForCheck(); @@ -486,6 +493,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { ); } ``` + @@ -574,6 +582,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -604,7 +613,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; window.toggleColumnPin = function toggleColumnPin(field) { - var grid = document.getElementsByTagName("igc-tree-grid")[0]; + var grid = document.getElementsByTagName["igc-tree-grid"](0); var col = grid.getColumnByName(field); col.pinned = !col.pinned; grid.markForCheck(); @@ -630,6 +639,7 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { + ``` ```tsx @@ -649,6 +659,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { ); } ``` + @@ -729,12 +740,13 @@ constructor() { public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { return html` -
    +
    ${ctx.cell.column.header}
    `; } + ``` @@ -771,6 +783,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { ); } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx index f8d6dba305..665e57f9c1 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx @@ -115,6 +115,7 @@ public onResize(event) { } ``` + @@ -132,6 +133,7 @@ public onResize(event) { string nWidth = args.Detail.NewWidth; } } + ``` @@ -148,6 +150,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { ``` + @@ -182,6 +185,7 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + @@ -196,6 +200,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { + ``` @@ -215,6 +220,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { } } ``` + @@ -249,6 +255,7 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + @@ -262,6 +269,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { <{ComponentSelector} id="hierarchicalGrid" autoGenerate={false} onColumnResized={onResize}> + ``` @@ -280,6 +288,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { } } ``` + @@ -630,8 +639,9 @@ You can also auto-size a column dynamically using the exposed @@ -662,6 +673,7 @@ column.autosize(); column.Autosize(false); } } + ``` @@ -674,6 +686,7 @@ column.autosize(); let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0]; column.autosize(); ``` + @@ -703,6 +716,7 @@ column.autosize(); column.Autosize(false); } } + ``` @@ -716,6 +730,7 @@ Each column can be set to auto-size on initialization by setting diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx index bd3961a6e1..a3829aaa74 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx @@ -68,6 +68,7 @@ public formatOptions = this.options; @code { private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs() { DigitsInfo = "1.4-4" }; } + ``` @@ -76,6 +77,7 @@ public formatOptions = this.options; ``` + @@ -90,6 +92,7 @@ constructor() { var column = document.getElementById('column') as IgcColumnComponent; column.pipeArgs = this.formatOptions; } + ``` @@ -101,6 +104,7 @@ const formatOptions : IgrColumnPipeArgs = { ``` + ### DateTime, Date and Time @@ -138,13 +142,14 @@ public formatOptions = this.options; @code { private IgbColumnPipeArgs formatDateOptions = new IgbColumnPipeArgs() { - /** The date/time components that a date column will display, using predefined options or a custom format string. */ - /** e.g 'dd/mm/yyyy' or 'shortDate' **/ + /** The date/time components that a date column will display, using predefined options or a custom format string. _/ + /_*e.g 'dd/mm/yyyy' or 'shortDate' **/ Format = "longDate", - /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */ + /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation.*/ Timezone = "GMT" }; } + ``` @@ -168,6 +173,7 @@ constructor() { column.pipeArgs = this.formatDateOptions; } ``` + @@ -178,6 +184,7 @@ const formatOptions : IgrColumnPipeArgs = { }; + ``` @@ -211,6 +218,7 @@ public timeFormats = [ { format: 'fullTime', eq: 'h:mm:ss a zzzz' }, ]; ``` + @@ -390,6 +398,7 @@ public formatOptions = this.options; Display = "symbol-narrow" }; } + ``` @@ -398,6 +407,7 @@ public formatOptions = this.options; ``` + @@ -413,6 +423,7 @@ constructor() { var column = document.getElementById('column') as IgcColumnComponent; column.pipeArgs = this.formatOptions; } + ``` @@ -425,12 +436,14 @@ const formatOptions : IgrColumnPipeArgs = { ``` + | Parameter | Description | |---------------------------| -------------------------| | digitsInfo | Represents Decimal representation of currency value | | display* | Displays the value by narrow or wide symbol | + | currencyCode | ISO 4217 currency code | @@ -484,15 +497,16 @@ public formatPercentOptions = this.options; private IgbColumnPipeArgs formatPercentOptions = new IgbColumnPipeArgs() { /** - * Decimal representation options, specified by a string in the following format: + *Decimal representation options, specified by a string in the following format: * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. - * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. + *`minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. - * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + *`maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. */ DigitsInfo = "2.2-3" }; } + ``` @@ -501,6 +515,7 @@ public formatPercentOptions = this.options; ``` + @@ -522,6 +537,7 @@ constructor() { var column = document.getElementById('column') as IgcColumnComponent; column.pipeArgs = this.formatPercentOptions; } + ``` @@ -540,6 +556,7 @@ const formatOptions : IgrColumnPipeArgs = { ``` + @@ -586,6 +603,7 @@ constructor() { public editCellTemplate = (ctx: IgcCellTemplateContext) => { return html``; } + ``` @@ -603,6 +621,7 @@ const editCellTemplate = (ctx: IgrCellTemplateContext) => { ``` + @@ -641,6 +660,7 @@ constructor() { public formatCurrency(value: number) { return `$ ${value.toFixed(0)}`; } + ``` @@ -654,6 +674,7 @@ const formatCurrency = (value: number) => { ``` + @@ -666,6 +687,7 @@ const formatCurrency = (value: number) => { igRegisterScript("CurrencyFormatter", (value) => { return `$ ${value.toFixed(0)}`; }, false); + ``` @@ -685,6 +707,7 @@ public init(column: IgxColumnComponent) { return; } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx index d258bf88b1..42fd9bffaa 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx @@ -57,6 +57,7 @@ constructor() { grid.rowClasses = this.rowClasses; } ``` + @@ -75,6 +76,7 @@ public rowClasses = { }; public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index; + ``` ```scss @@ -87,6 +89,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. } } ``` + @@ -253,6 +256,7 @@ public rowStyles = { 'border-color': (row: RowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null, color: (row: RowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null }; + ``` @@ -271,6 +275,7 @@ public rowStyles = { color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null }; ``` + @@ -329,6 +334,7 @@ constructor() { treeGrid.rowStyles = this.rowStyles; } ``` + @@ -358,6 +364,7 @@ public rowStyles = { public childRowStyles = { 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null }; + ``` @@ -372,6 +379,7 @@ const childRowStyles = { 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null }; ``` + @@ -388,6 +396,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => { 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null }; }, true); + ``` @@ -399,6 +408,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => { ``` + @@ -549,6 +559,7 @@ constructor() { unitPrice.cellClasses = this.unitPriceCellClasses; } ``` + @@ -586,6 +597,7 @@ public beatsPerMinuteClasses = { downFont: this.downFontCondition, upFont: this.upFontCondition }; + ``` @@ -604,6 +616,7 @@ const beatsPerMinuteClasses = { upFont: upFontCondition }; ``` + @@ -630,6 +643,7 @@ igRegisterScript("CellClassesHandler", () => { color: red; } } + ``` @@ -684,6 +698,7 @@ igRegisterScript("GrammyNominationsCellClassesHandler", () => { color: red !important; } ``` + @@ -702,6 +717,7 @@ public unitPriceCellClasses = { downPrice: this.downPriceCondition, upPrice: this.upPriceCondition }; + ``` @@ -714,6 +730,7 @@ igRegisterScript("UnitPriceCellClassesHandler", () => { }; }, true); ``` + @@ -730,6 +747,7 @@ const unitPriceCellClasses = { downPrice: downPriceCondition, upPrice: upPriceCondition }; + ``` @@ -745,6 +763,7 @@ const unitPriceCellClasses = { } } ``` + ```css @@ -805,6 +824,7 @@ public evenColStyles = { color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white', animation: '0.75s popin' }; + ``` @@ -827,6 +847,7 @@ igRegisterScript("WebGridCellStylesHandler", () => { }; }, true); ``` + @@ -930,6 +951,7 @@ Define a `popin` animation } } ``` + @@ -951,6 +973,7 @@ constructor() { col1.cellStyles = this.webGridCellStylesHandler; } ``` + @@ -986,6 +1009,7 @@ constructor() { col1.cellStyles = this.webTreeGridCellStylesHandler; } ``` + @@ -1146,6 +1170,7 @@ Define a `popin` animation } } ``` + @@ -1167,6 +1192,7 @@ constructor() { col1.cellStyles = this.cellStylesHandler; } ``` + @@ -1234,6 +1260,7 @@ constructor() { Col3.cellClasses = this.backgroundClasses; } ``` + @@ -1256,6 +1283,7 @@ const editDone = (event: IgrGridEditEventArgs) => { + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx index 81ae491bba..566c12a6b2 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx @@ -144,6 +144,7 @@ public onSorting(event: IgcSortingEventArgs) { grid.endEdit(true); } ``` + @@ -159,6 +160,7 @@ function SortingHandler() { grid.endEdit(true); } igRegisterScript("SortingHandler", SortingHandler, false); + ``` @@ -172,6 +174,7 @@ function onSorting(args: IgrSortingEventArgs) { <{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}> ``` + ## API References diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx index 60e4ed1be8..eccb757083 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx @@ -309,6 +309,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { var html = window.igTemplating.html; return html`Continued` }, false); + ``` @@ -323,6 +324,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => { return html`Continued` } ``` + @@ -343,6 +345,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { <{ComponentSelector} autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter" excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}> + ``` @@ -373,6 +376,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { ``` + @@ -657,12 +661,14 @@ In order to configure the Excel style filtering component, you should set its `C + ``` ```razor add snippet for blazor ``` + @@ -689,12 +695,14 @@ add snippet for blazor + ``` ```razor Add snippet for blazor ``` + @@ -710,12 +718,14 @@ Add snippet for blazor + ``` ```razor Add snippet for blazor ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx index 61e4072630..518d3bddb0 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx @@ -94,6 +94,7 @@ To initiate an export, you can use the handler of a button in your component's t ``` + @@ -174,6 +175,7 @@ constructor() { public webGridExportEventFreezeHeaders(args: any): void { args.detail.options.freezeHeaders = true; } + ``` @@ -190,6 +192,7 @@ public webGridExportEventFreezeHeaders(args: CustomEvent): voi args.detail.options.freezeHeaders = true; } ``` + @@ -225,6 +228,7 @@ function exportEventFreezeHeaders(args: IgrExporterEventArgs) { igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => { ev.detail.options.freezeHeaders = false; }, false); + ``` @@ -246,6 +250,7 @@ igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => { ev.detail.options.freezeHeaders = false; }, false); ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx index 5b3bf45739..4d90b526bd 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx @@ -258,6 +258,7 @@ priceFilteringExpressionsTree.filteringOperands.push(priceExpression); gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree); this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree; + ``` @@ -306,6 +307,7 @@ this.@@igObjectRef.clearFilter('ProductName'); // Clears the filtering state from all columns this.@@igObjectRef.clearFilter(); + ``` @@ -317,6 +319,7 @@ this.grid.clearFilter('ProductName'); // Clears the filtering state from all columns this.grid.clearFilter(); ``` + @@ -344,6 +347,7 @@ public ngAfterViewInit() { this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree; this.cdr.detectChanges(); } + ``` @@ -370,6 +374,7 @@ constructor() { this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; } ``` + @@ -409,6 +414,7 @@ constructor() { public IgbFilteringExpressionsTree filteringExpressions; } + ``` @@ -441,6 +447,7 @@ return ( ); ``` + ### Filtering logic @@ -458,6 +465,7 @@ The p import { FilteringLogic } from 'igniteui-angular'; this.@@igObjectRef.filteringLogic = FilteringLogic.OR; + ``` @@ -467,6 +475,7 @@ import { FilteringLogic } from "igniteui-webcomponents-grids/grids"; this.grid.filteringLogic = FilteringLogic.OR; ``` + @@ -474,6 +483,7 @@ this.grid.filteringLogic = FilteringLogic.OR; import { FilteringLogic } from "igniteui-react-grids"; <{ComponentName} filteringLogic={FilteringLogic.Or}> + ``` @@ -634,10 +644,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand { Continued - Discontinued + + ``` @@ -658,6 +669,7 @@ constructor() { discontinued.filters = this.booleanFilteringOperand; } ``` + @@ -671,10 +683,11 @@ constructor() { True - False + + ``` @@ -687,6 +700,7 @@ constructor() { ``` + ```ts diff --git a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx index 4fa0329fbe..e514668f85 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx @@ -111,7 +111,7 @@ When the body is collapses the current node. -- ALT + → or ALT + ↓ - +- ALT + → or ALT + ↓ - over Group Row - expands the group. expands the row island. @@ -206,6 +206,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS } }, false); + ``` @@ -214,6 +215,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { <{ComponentSelector} id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}> ``` + ```ts @@ -241,6 +243,7 @@ const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => { // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS } } + ``` @@ -294,6 +297,7 @@ Based on the event arg values we identified two cases, where to provide our own return; } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx index c7d1986242..e96f8fcd0a 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx @@ -69,6 +69,7 @@ public void OnStart() grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks); }, null, startTimeSpan, periodTimeSpan); } + ``` @@ -84,6 +85,7 @@ public startUpdate() { (document.getElementById('chartButton') as IgcButtonComponent).disabled = true; } ``` + @@ -97,6 +99,7 @@ const startUpdate = () => { setIsStopButtonDisabled(false); setIsChartButtonDisabled(true); } + ``` A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example: @@ -106,6 +109,7 @@ A change in the data field value or a change in the data object/data collection ``` + A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example: diff --git a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx index e03704436e..96fb79a40f 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx @@ -599,6 +599,7 @@ If you want to re-use a single template for several column groups, you could set ``` + @@ -632,6 +633,7 @@ If you want to re-use a single template for several column groups, you could set }; } ``` + @@ -678,6 +680,7 @@ public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => { `; } ``` + @@ -724,6 +727,7 @@ If a header is re-templated and the corresponding column group is movable, you h return @; }; } + ``` @@ -735,6 +739,7 @@ public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => { `; } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx index 40a21302f2..84c4262fe0 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx @@ -143,6 +143,7 @@ constructor() { paginator.selectOptions = selectOptions; } ``` + @@ -153,6 +154,7 @@ const selectOptions = [5, 15, 20, 50]; + ``` @@ -176,6 +178,7 @@ const selectOptions = [5, 15, 20, 50]; ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx index 4257cd7cba..be98c10cee 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx @@ -87,7 +87,7 @@ The first ### Remote Virtualization Demo -{/* NOTE: this sample is differed */} +{/*NOTE: this sample is differed*/} @@ -146,6 +146,7 @@ public ngAfterViewInit() { } } + ``` @@ -176,6 +177,7 @@ public handlePreLoad() { } } ``` + @@ -254,6 +256,7 @@ public handlePreLoad() { } } } + ``` @@ -556,6 +559,7 @@ export class RemotePagingService { ); } } + ``` @@ -591,6 +595,7 @@ export class RemotePagingService { } } ``` + @@ -608,6 +613,7 @@ As Blazor Server is already a remote instance, unlike the demos in the other pla return Task.FromResult(items.Count); } ``` + @@ -640,6 +646,7 @@ export class RemoteService { return `${qS}`; } } + ``` @@ -722,6 +729,7 @@ export class RemotePagingService { return `${qS}`; } } + ``` @@ -779,6 +787,7 @@ export class RemoteService { return `${qS}`; } } + ``` @@ -812,6 +821,7 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy } } ``` + @@ -1042,6 +1052,7 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, } } } + ``` @@ -1249,6 +1260,7 @@ For further reference please check the full demo bellow: + ``` then set up the state: @@ -1290,6 +1302,7 @@ next set up the method for loading the data: }) } ``` + @@ -1326,6 +1339,7 @@ and finally set up the behaviour for the RowIslands: const onOrdersGridCreatedHandler = (e: IgrGridCreatedEventArgs) => { gridCreated(e, "Orders") }; + ``` @@ -1476,7 +1490,7 @@ BLAZOR CODE SNIPPET HERE @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; private _perPage = 15; -private _dataLengthSubscriber: { unsubscribe: () => void; } | undefined; +private_dataLengthSubscriber: { unsubscribe: () => void; } | undefined; constructor(private remoteService: RemotePagingService) { } @@ -1499,12 +1513,14 @@ public perPageChange(perPage: number) { this.remoteService.getData(skip, top); } + ``` ```razor BLAZOR CODE SNIPPET HERE ``` + @@ -1532,12 +1548,14 @@ public ngAfterViewInit() { } ); } + ``` ```razor BLAZOR CODE SNIPPET HERE ``` + @@ -1550,12 +1568,14 @@ public paginate(page: number) { this.remoteService.getData(skip, top); } + ``` ```razor BLAZOR CODE SNIPPET HERE ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx index 888afe2e22..5676cfe1d5 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx @@ -32,6 +32,7 @@ import { IgxActionStripModule } from 'igniteui-angular'; imports: [..., IgxActionStripModule], }) ``` + The predefined actions UI components are: @@ -53,6 +54,7 @@ They are added inside the + ``` @@ -70,6 +72,7 @@ They are added inside the ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx index 2d14ab59f6..5acb38c215 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx @@ -46,6 +46,7 @@ import { {ComponentModule} } from 'igniteui-angular'; }) export class AppModule {} ``` + Then define a with bound data source, set to true and an component with editing actions enabled. The input controls the visibility of the button that spawns the row adding UI. @@ -65,6 +66,7 @@ Then define a wi + ``` @@ -83,6 +85,7 @@ Then define a wi ``` + @@ -99,6 +102,7 @@ Then define a wi + ``` @@ -117,6 +121,7 @@ Then define a wi ``` + @@ -172,6 +177,7 @@ Then define a wi + ``` @@ -188,6 +194,7 @@ Then define a wi ``` + @@ -229,6 +236,7 @@ Then define a wi + ``` @@ -271,6 +279,7 @@ Then define a wi ``` + @@ -311,6 +320,7 @@ Then define a wi + ``` @@ -372,6 +382,7 @@ Then define a wi ``` + @@ -586,6 +597,7 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { return @Adding Row; }; } + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx index 2ce2657084..55bd17b7d7 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx @@ -84,6 +84,7 @@ import { ..., IgxDragDropModule } from 'igniteui-angular'; imports: [..., IgxDragDropModule] }) ``` + @@ -99,6 +100,7 @@ ModuleManager.register( IgcDragDropModule ); ``` + @@ -162,6 +164,7 @@ public dragHereTemplate = (ctx: IgcGridEmptyTemplateContext) => { return html`Drop a row to add it to the grid`; } ``` + @@ -211,12 +214,14 @@ export class {ComponentName}RowDragComponent { The **changeGhostIcon** **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the **igx-grid__drag-indicator** class that is applied to the drag-indicator container), changing the element's inner text to the passed one. The icons themselves are from the [**material** font set](https://material.io/tools/icons/) and are defined in a separate **enum**: + ```typescript enum DragIcon { DEFAULT = 'drag_indicator', ALLOW = 'remove' } ``` + ```typescript @@ -229,6 +234,7 @@ enum DragIcon { Next, we have to define what should happen when the user actually drops the row inside of the drop-area. + ```typescript export class {ComponentName}RowDragComponent { @@ -254,6 +260,7 @@ export class {ComponentName}RowDragComponent { this.sourceGrid.deleteRow(args.dragData.key); } } + ``` We define a reference to each of our grids via the **ViewChild** decorator and the handle the drop as follows: @@ -278,6 +285,7 @@ export class {ComponentName}RowDragComponent { } } ``` + @@ -300,6 +308,7 @@ The drag ghost can be templated using the `RowDragGhost` directive, applied to a ``` + @@ -316,6 +325,7 @@ constructor() { public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => { return html`arrow_right_alt`; } + ``` @@ -342,6 +352,7 @@ The drag ghost can be templated on every grid level, making it possible to have ``` + @@ -366,6 +377,7 @@ The drag handle icon can be templated using the grid's `DragIndicatorIconTemplat + ``` @@ -380,6 +392,7 @@ private RenderFragment dragIndicatorIconTemplate =
    ; }; ``` + @@ -416,6 +429,7 @@ public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => { + ``` @@ -430,6 +444,7 @@ private RenderFragment dragIndicatorIconTemplate = ; }; ``` + @@ -459,6 +474,7 @@ const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => { <{ComponentSelector} rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}> + ``` @@ -474,6 +490,7 @@ private RenderFragment dragIndicatorIconTemplate = ; }; ``` + @@ -485,6 +502,7 @@ enum DragIcon { DEFAULT = "drag_handle", } ``` + @@ -564,6 +582,7 @@ Since all of the actions will be happening _inside_ of the grid's body, that's w ``` + @@ -582,6 +601,7 @@ constructor() { hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler) } ``` + @@ -599,7 +619,7 @@ constructor() { igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const grid = document.getElementsByTagName["igc-hierarchical-grid"](0); const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -620,6 +640,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } return -1; } + ``` @@ -639,6 +660,7 @@ constructor() { tGrid.addEventListener("rowDragEnd", this.webTreeGridReorderRowHandler); } ``` + @@ -669,6 +691,7 @@ constructor() { grid.addEventListener("rowDragEnd", this.webGridReorderRowHandler) } ``` + @@ -687,7 +710,7 @@ constructor() { igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-grid")[0]; + const grid = document.getElementsByTagName["igc-grid"](0); const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -708,6 +731,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } return -1; } + ``` @@ -727,6 +751,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { [rowDraggable]="true" (rowDragStart)="rowDragStart($event)" igxDrop (dropped)="rowDrop($event)"> ``` + @@ -759,7 +784,7 @@ Below, you can see this implemented: public webGridReorderRowHandler(args: CustomEvent): void { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-grid")[0] as any; + const grid = document.getElementsByTagName["igc-grid"](0) as any; const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -780,6 +805,7 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) { } return -1; } + ``` @@ -809,6 +835,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition) => { return -1; } ``` + @@ -879,6 +906,7 @@ export class TreeGridRowReorderComponent { return null; } } + ``` @@ -996,6 +1024,7 @@ public webTreeGridReorderRowStartHandler(args: CustomEvent @@ -1113,6 +1142,7 @@ export class HGridRowReorderComponent { } } } + ``` @@ -1144,6 +1174,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition: any) => { return -1; } ``` + @@ -1151,7 +1182,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition: any) => { public webGridReorderRowHandler(args: CustomEvent): void { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0] as any; + const grid = document.getElementsByTagName["igc-hierarchical-grid"](0) as any; const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -1183,7 +1214,7 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) { igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const grid = document.getElementsByTagName["igc-hierarchical-grid"](0); const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -1204,6 +1235,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } return -1; } + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx index 8452f91f32..f63e783cff 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx @@ -93,6 +93,7 @@ public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => { return html``; } ``` + @@ -113,6 +114,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { + ``` @@ -146,6 +148,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { } } ``` + @@ -177,6 +180,7 @@ constructor() { grid.data = this.data; } ``` + @@ -257,6 +261,7 @@ constructor() { grid.data = this.data; } ``` + @@ -412,6 +417,7 @@ RowEditable="true"> ``` + @@ -443,6 +449,7 @@ export class {ComponentName}RowEditSampleComponent { this.data = data; } } + ``` @@ -513,6 +520,7 @@ The `RowChangesCount` property is exposed and it holds the count of the changed Changes: {{rowChangesCount}} ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx index 6d617e57b3..9de4def578 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx @@ -169,6 +169,7 @@ public rowPinning(event) { event.detail.insertAtIndex = 0; } ``` + @@ -180,6 +181,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => { <{ComponentSelector} autoGenerate={true} onRowPinning={rowPinning}> + ``` @@ -195,6 +197,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => { Data="northwindEmployees"> ``` + @@ -206,6 +209,7 @@ function rowPinningHandler(event) { } igRegisterScript("rowPinningHandler", rowPinningHandler, false); + ``` @@ -222,6 +226,7 @@ When set to Bottom pinned rows are rendered at the bottom of the grid, after the ```typescript public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom }; ``` + @@ -233,6 +238,7 @@ public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom }; var grid = document.getElementById('dataGrid') as {ComponentName}Component; grid.pinning = { rows: RowPinningPosition.Bottom }; ``` + @@ -267,6 +273,7 @@ const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom }; <{ComponentSelector} ref={gridRef} autoGenerate={true} pinning={pinning}> + ``` @@ -299,6 +306,7 @@ igRegisterScript("WebGridRowPinCellTemplate", (ctx) => { `; }, false); ``` + @@ -351,6 +359,7 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => { return html` this.togglePinning(index)}>📌`; } ``` + @@ -368,6 +377,7 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => { + ``` @@ -391,6 +401,7 @@ igRegisterScript("WebHierarchicalGridRowPinCellTemplate", (ctx) => { `; }, false); ``` + @@ -447,6 +458,7 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => { return html` this.togglePinning(row)}>📌`; } ``` + @@ -465,6 +477,7 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => { + ``` @@ -479,6 +492,7 @@ public togglePinning(index: number) { grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned; } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx index b4927e9c33..4e32ac9d80 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx @@ -91,6 +91,7 @@ public handleRowSelection(args: IgcRowSelectionEventArgs) { } } ``` + @@ -103,6 +104,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { <{ComponentSelector} rowSelection="single" autoGenerate={true} allowFiltering={true} onRowSelectionChanging={handleRowSelection}> + ``` @@ -125,6 +127,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { } } ``` + ### Multiple Selection @@ -246,6 +249,7 @@ The code snippet below can be used to select one or multiple rows simultaneously + ``` @@ -270,6 +274,7 @@ The code snippet below can be used to select one or multiple rows simultaneously } } ``` + @@ -281,6 +286,7 @@ auto-generate="true"> + ``` ```ts @@ -292,6 +298,7 @@ public onClickSelect() { grid.selectRows([1,2,5], true); } ``` + @@ -303,6 +310,7 @@ function onClickSelect() { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}> + ``` @@ -322,6 +330,7 @@ If you need to deselect rows programmatically, you can use the `DeselectRows` me ``` + @@ -356,6 +365,7 @@ auto-generate="true"> + ``` ```ts @@ -367,6 +377,7 @@ public onClickDeselect() { grid.deselectRows([1,2,5]); } ``` + @@ -378,6 +389,7 @@ function onClickDeselect() { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}> + ``` @@ -401,6 +413,7 @@ When there is some change in the row selection ``` + @@ -420,6 +433,7 @@ public handleRowSelectionChange(args) { args.detail.cancel = true; // this will cancel the row selection } ``` + @@ -430,6 +444,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => { <{ComponentSelector} onRowSelectionChanging={handleRowSelectionChange}> + ``` @@ -452,6 +467,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => { } } ``` + ### Select All Rows @@ -540,6 +556,7 @@ const mySelectedRows = [1,2,3]; <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={false} selectedRows={mySelectedRows}> + ``` @@ -560,6 +577,7 @@ const mySelectedRows = [1,2,3]; public object[] selectedRows = new object[] { 1, 2, 5 }; } ``` + ### Row Selector Templates @@ -650,6 +668,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" rowSelectorTemplate={rowSelectorTemplate}> + ``` @@ -661,6 +680,7 @@ The `RowID` property can be used to get a reference of an `{ComponentSelector}` ``` + @@ -787,6 +807,7 @@ public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => { } return html``; } + ``` @@ -818,6 +839,7 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} headSelectorTemplate={headSelectorTemplate}> ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/search.mdx b/docs/xplat/src/content/en/components/grids/_shared/search.mdx index 45201ae075..cf94c792a4 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/search.mdx @@ -66,6 +66,7 @@ Let's start by creating our grid and binding it to our data. We will also add so this.marketData = MarketData.GetData(); } } + ``` @@ -80,6 +81,7 @@ Let's start by creating our grid and binding it to our data. We will also add so ``` + @@ -127,6 +129,7 @@ constructor() { this.treeGrid.data = new EmployeesFlatData(); } ``` + @@ -178,6 +181,7 @@ public exactMatch: boolean = false; private caseSensitiveChip: IgcChipComponent; private exactMatchChip: IgcChipComponent; + ``` @@ -188,6 +192,7 @@ public string searchText = ""; public bool caseSensitive = false; public bool exactMatch = false; ``` + @@ -213,6 +218,7 @@ private prevIconButton: IgcIconButtonComponent; private caseSensitiveChip: IgcChipComponent; private exactMatchChip: IgcChipComponent; + ``` @@ -224,6 +230,7 @@ public string searchText = ""; public bool caseSensitive = false; public bool exactMatch = false; ``` + @@ -271,6 +278,7 @@ The methods from above return a **number** value (the number of times the + ``` @@ -278,6 +286,7 @@ The methods from above return a **number** value (the number of times the ``` + @@ -297,6 +306,7 @@ public nextSearch(){ this.grid.findNext(this.searchBox.value, false, false); } ``` + @@ -330,6 +340,7 @@ public nextSearch() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -340,6 +351,7 @@ public void NextSearch() { this.treeGrid.FindNext(this.searchText, this.caseSensitive, this.exactMatch); } + ``` @@ -353,6 +365,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { ``` + @@ -413,6 +426,7 @@ In order to freely search and navigate among our search results, let's create a this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` @@ -437,6 +451,7 @@ public nextSearch() { this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -463,6 +478,7 @@ public nextSearch() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -487,6 +503,7 @@ public nextSearch() { this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` @@ -506,6 +523,7 @@ const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) = nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}> ``` + @@ -530,6 +548,7 @@ public searchKeyDown(ev) { } } ``` + @@ -558,6 +577,7 @@ public onSearchKeydown(evt: KeyboardEvent) { } } ``` + @@ -597,6 +617,7 @@ We can also allow the users to navigate the results by using the keyboard's @@ -628,6 +649,7 @@ public onSearchKeydown(evt: KeyboardEvent) { } } ``` + @@ -673,6 +695,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` @@ -704,6 +727,7 @@ public updateExactSearch() { this.@@igObjectRef.findNext(this.searchText, this.caseSensitive, this.exactMatch); } ``` + @@ -734,6 +758,7 @@ public updateSearch() { grid.findNext(search1.value, case.checked, exact.checked); } ``` + @@ -759,6 +784,7 @@ constructor() { }); } ``` + @@ -787,6 +813,7 @@ Now let's allow the user to choose whether the search should be case sensitive a this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` @@ -814,6 +841,7 @@ const handleExactMatchChange = (event: IgrComponentBoolValueChangedEventArgs) => Exact Match ``` + ### Persistence @@ -844,6 +872,7 @@ import { imports: [IgxInputGroupModule, IgxIconModule, IgxRippleModule, IgxButtonModule, IgxChipsModule], }) export class AppModule {} + ``` @@ -853,6 +882,7 @@ import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent); ``` + @@ -909,6 +939,7 @@ builder.Services.AddIgniteUIBlazor( } } } + ``` @@ -937,6 +968,7 @@ We will wrap all of our components inside an [InputGroup](../input-group.md). On ``` + @@ -978,6 +1010,7 @@ constructor() { registerIconFromText("clear", clearIconText, "material"); registerIconFromText("search", searchIconText, "material"); } + ``` @@ -1004,6 +1037,7 @@ We will wrap all of our components inside an `Input`. On the left we will toggle ``` + @@ -1033,6 +1067,7 @@ public clearSearch() { this.icon.name = 'search'; this.treeGrid.clearSearch(); } + ``` @@ -1077,6 +1112,7 @@ public clearSearch() { } } ``` + @@ -1183,6 +1219,7 @@ constructor() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail); }); } + ``` @@ -1211,6 +1248,7 @@ constructor() { } } ``` + - For the search navigation buttons, we have added two ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the `FindNext`/`FindPrev` methods. @@ -1257,6 +1295,7 @@ public nextSearch() { public prevSearch() { this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } + ``` @@ -1270,6 +1309,7 @@ public nextSearch() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -1344,6 +1384,7 @@ useEffect(() => { ``` + @@ -1367,6 +1408,7 @@ useEffect(() => { this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/selection.mdx index fa8ea52633..42de0bfc44 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/selection.mdx @@ -205,6 +205,7 @@ const rightClick = (event: IgrGridContextMenuEventArgs) => { this.ShowMenu = true; this.ClickedCell = detail.Cell; } + ``` @@ -276,6 +277,7 @@ public copySelectedCells(event) { document.execCommand('copy'); document.body.removeChild(tempElement); } + ``` @@ -315,6 +317,7 @@ const copyData = (data: any[]) => { setSelectedData(dataStringified); }; ``` + @@ -342,6 +345,7 @@ const copyData = (data: any[]) => { this.SelectedData = JsonConvert.SerializeObject(selectedData); StateHasChanged(); } + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/size.mdx b/docs/xplat/src/content/en/components/grids/_shared/size.mdx index e6893131a1..5d5e793b62 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/size.mdx @@ -179,6 +179,7 @@ public ngOnInit() { } ]; } + ``` @@ -204,6 +205,7 @@ public ngOnInit() { ``` + @@ -831,6 +833,7 @@ public selectSize(event: any) { protected get sizeStyle() { return `var(--ig-size-${this.size})`; } + ``` @@ -864,6 +867,7 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); } ``` + @@ -917,6 +921,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio var grid = document.getElementById("grid"); grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); } + ``` @@ -934,6 +939,7 @@ We can now extend our sample and add ``` + @@ -952,6 +958,7 @@ We can now extend our sample and add @@ -960,6 +967,7 @@ We can now extend our sample and add ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx index da9b532ed2..3c95fa6db3 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx @@ -106,6 +106,7 @@ this.grid.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -121,6 +122,7 @@ this.grid.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + @@ -153,6 +155,7 @@ gridRef.current.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -170,6 +173,7 @@ this.treeGrid.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + @@ -183,6 +187,7 @@ this.treeGrid.sort([ { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -204,6 +209,7 @@ this.treeGrid.sort([ }); } ``` + @@ -216,6 +222,7 @@ treeGridRef.current.sort([ { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -233,6 +240,7 @@ this.hierarchicalGrid.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + @@ -246,6 +254,7 @@ this.hierarchicalGrid.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -267,6 +276,7 @@ this.hierarchicalGrid.sort([ }); } ``` + @@ -280,6 +290,7 @@ hierarchicalGridRef.current.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -299,6 +310,7 @@ this.grid.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} this.grid.clearSort(); ``` + @@ -308,6 +320,7 @@ gridRef.current.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} gridRef.current.clearSort(); + ``` @@ -321,6 +334,7 @@ gridRef.current.clearSort(); this.grid.ClearSortAsync(""); } ``` + @@ -332,6 +346,7 @@ this.treeGrid.clearSort('Category'); // Removes the sorting state from every column in the {ComponentTitle} this.treeGrid.clearSort(); + ``` @@ -343,6 +358,7 @@ treeGridRef.current.clearSort('Category'); // Removes the sorting state from every column in the {ComponentTitle} treeGridRef.current.clearSort(); ``` + @@ -354,6 +370,7 @@ treeGridRef.current.clearSort(); @*Removes the sorting state from every column in the Grid*@ this.treeGrid.ClearSortAsync(""); } + ``` @@ -367,6 +384,7 @@ this.hierarchicalGrid.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} this.hierarchicalGrid.clearSort(); ``` + @@ -376,6 +394,7 @@ hierarchicalGridRef.current.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} hierarchicalGridRef.current.clearSort(); + ``` @@ -389,6 +408,7 @@ hierarchicalGridRef.current.clearSort(); this.hierarchicalGrid.ClearSortAsync(""); } ``` + @@ -457,6 +477,7 @@ const sortingExpressions: IgrSortingExpression[] = [ data={productSales} sortingExpressions={sortingExpressions}> + ``` @@ -471,6 +492,7 @@ public ngOnInit() { ]; } ``` + @@ -514,6 +536,7 @@ const sortingExpressions: IgrSortingExpression[] = [ data={productSales} sortingExpressions={sortingExpressions}> + ``` @@ -528,6 +551,7 @@ public ngOnInit() { ]; } ``` + @@ -601,6 +625,7 @@ The sorting indicator icon in the column header can be customized using a templa unfold_more ``` + - – re-templates the sorting icon when no sorting is applied. @@ -616,6 +641,7 @@ The sorting indicator icon in the column header can be customized using a templa return @; }; } + ``` @@ -632,6 +658,7 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { return html``; } ``` + @@ -646,6 +673,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { } <{ComponentSelector} sortHeaderIconTemplate={sortHeaderIconTemplate}> + ``` @@ -674,6 +702,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { return @; }; } + ``` @@ -690,6 +719,7 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + @@ -704,6 +734,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { } <{ComponentSelector} sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}> + ``` @@ -732,6 +763,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { return @; }; } + ``` @@ -748,6 +780,7 @@ public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + @@ -762,6 +795,7 @@ const sortDescendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => } <{ComponentSelector} sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}> + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx index b06a370857..48a04981f5 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx @@ -137,6 +137,7 @@ const gridState: IGridState = state.getState(false); // get the sorting and filtering expressions const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']); + ``` @@ -160,6 +161,7 @@ const stateString: string = gridState.getStateAsString(); // get the sorting and filtering expressions const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']); ``` + @@ -184,6 +186,7 @@ const stateString: string = gridStateRef.current.getStateAsString([]); // get the sorting and filtering expressions const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']); + ``` @@ -202,6 +205,7 @@ const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState([ string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" }); } ``` + @@ -271,6 +275,7 @@ public options = { cellSelection: false, sorting: false }; <{ComponentSelector} [igxGridState]="options"> ``` + @@ -323,6 +328,7 @@ public restoreGridState() { const state = window.sessionStorage.getItem('grid1-state'); this.state.setState(state); } + ``` @@ -359,6 +365,7 @@ public restoreGridStateString() { } } ``` + @@ -406,6 +413,7 @@ const restoreGridState = () => { gridStateRef.current.applyStateFromString(state, []); } } + ``` @@ -461,6 +469,7 @@ const restoreGridState = () => { } } ``` + @@ -510,6 +519,7 @@ constructor() { public activeTemplate = (ctx: IgcCellTemplateContext) => { return html``; } + ``` @@ -520,6 +530,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { ``` + @@ -545,6 +556,7 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) { return @; }; } + ``` @@ -559,6 +571,7 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) { ``` + @@ -589,6 +602,7 @@ constructor() { public activeTemplate = (ctx: IgcCellTemplateContext) => { return html``; } + ``` @@ -608,6 +622,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { }; } ``` + @@ -650,6 +665,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { return html``; } ``` + @@ -663,6 +679,7 @@ public onColumnInit(column: IgxColumnComponent) { } } ``` + @@ -866,9 +883,9 @@ const totalSale = (members, data) => { const totalMin = (members, data) => { let min = 0; if (data.length === 1) { - min = data[0].ProductUnitPrice * data[0].NumberOfUnits; + min = data[0].ProductUnitPrice *data[0].NumberOfUnits; } else if (data.length > 1) { - const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + const mappedData = data.map(x => x.ProductUnitPrice* x.NumberOfUnits); min = mappedData.reduce((a, b) => Math.min(a, b)); } return min; @@ -877,9 +894,9 @@ const totalMin = (members, data) => { const totalMax = (members, data) => { let max = 0; if (data.length === 1) { - max = data[0].ProductUnitPrice * data[0].NumberOfUnits; + max = data[0].ProductUnitPrice *data[0].NumberOfUnits; } else if (data.length > 1) { - const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + const mappedData = data.map(x => x.ProductUnitPrice* x.NumberOfUnits); max = mappedData.reduce((a, b) => Math.max(a, b)); } return max; @@ -904,6 +921,7 @@ igRegisterScript("OnValueInit", (args) => { }); } }, false); + ``` @@ -929,6 +947,7 @@ public onDimensionInit(dim: IPivotDimension) { } } ``` + @@ -1001,6 +1020,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; RowIslands = true }; } + ``` @@ -1012,6 +1032,7 @@ Then the API will ret ```typescript this.state.applyState(state, ['filtering', 'rowIslands']); ``` + @@ -1027,6 +1048,7 @@ Then the API will ret ```razor gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" }); ``` + @@ -1068,6 +1090,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { filters: [...] }; ``` + @@ -1139,6 +1162,7 @@ public stateParsedHandler(ev: any) { parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance(); parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance(); } + ``` @@ -1147,6 +1171,7 @@ public stateParsedHandler(ev: any) { ```razor Add snippet for blazor for restore state ``` + @@ -1166,6 +1191,7 @@ state.applyState(gridState); state.applyState(gridState.columns); state.applyState(gridState.columnSelection); ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx index dca69e3746..2ed6409a7c 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx @@ -265,6 +265,7 @@ constructor() { disableBtn.addEventListener("click", this.disableSummary); } ``` + @@ -304,6 +305,7 @@ const disableSummary = () => { + ``` @@ -321,6 +323,7 @@ const disableSummary = () => { ``` + @@ -346,6 +349,7 @@ constructor() { disableBtn.addEventListener("click", this.disableSummary); } ``` + @@ -379,6 +383,7 @@ public disableSummary() { await this.hierarchicalGrid.DisableSummariesAsync(disabledSummaries); } } + ``` @@ -404,6 +409,7 @@ const disableSummary = () => { ``` + @@ -447,6 +453,7 @@ constructor() { disableBtn.addEventListener("click", this.disableSummary); } ``` + @@ -478,6 +485,7 @@ public disableSummary() { await this.treeGrid.DisableSummariesAsync(disabledSummaries); } } + ``` @@ -501,6 +509,7 @@ const disableSummary = () => { ``` + @@ -534,6 +543,7 @@ class MySummary extends IgxNumberSummaryOperand { return result; } } + ``` @@ -557,6 +567,7 @@ class MySummary extends IgcNumberSummaryOperand { } } ``` + @@ -591,6 +602,7 @@ class WebGridDiscontinuedSummary { return result; } } + ``` @@ -632,6 +644,7 @@ class PtoSummary { } } ``` + @@ -709,6 +722,7 @@ constructor() { unitsInStock.summaries = this.mySummary; } ``` + @@ -737,6 +751,7 @@ igRegisterScript("WebGridCustomSummary", (event) => { event.detail.summaries = WebGridDiscontinuedSummary; } }, false); + ``` @@ -753,6 +768,7 @@ And now let's add our custom summary to the column `GrammyAwards`. We will achie ``` + @@ -774,6 +790,7 @@ constructor() { grammyAwards.summaries = this.mySummary; } ``` + @@ -801,6 +818,7 @@ igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { event.detail.summaries = WebHierarchicalGridSummary; } }, false); + ``` @@ -817,6 +835,7 @@ And now let's add our custom summary to the column `Title`. We will achieve that ``` + @@ -836,6 +855,7 @@ constructor() { column1.summaries = this.mySummary; } ``` + ```typescript @@ -861,6 +881,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { event.detail.summaries = PtoSummary; } }, false); + ``` @@ -886,6 +907,7 @@ class MySummary extends IgxNumberSummaryOperand { } } ``` + @@ -1022,10 +1044,11 @@ constructor() { public summaryTemplate = (ctx: IgcSummaryTemplateContext) => { return html` - My custom summary template + My custom summary template ${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult } `; } + ``` @@ -1042,6 +1065,7 @@ const summaryTemplate = (ctx: IgrSummaryTemplateContext) => { ``` + @@ -1149,6 +1173,7 @@ The following examples illustrate how to use the ``` + @@ -1254,6 +1280,7 @@ igRegisterScript("SummaryFormatter", (summary) => { } return result; }, true); + ``` @@ -1270,6 +1297,7 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx index 34c62b2914..ed79ce53c9 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx @@ -422,6 +422,7 @@ This will make sure you always have the correct grid instance in the scope of yo ``` + @@ -448,6 +449,7 @@ public rowIslandToolbarTemplate = () => { `; } + ``` ```html @@ -457,6 +459,7 @@ public rowIslandToolbarTemplate = () => { ``` + @@ -481,6 +484,7 @@ igRegisterScript("RowIslandToolbarTemplate", () => { `; }, false); + ``` @@ -646,6 +650,7 @@ Each action now exposes a way to change the overlay settings of the actions dial ``` + @@ -666,6 +671,7 @@ constructor() { hideTool.overlaySettings = this.overlaySettingsAuto; } ``` + @@ -692,6 +698,7 @@ public overlaySettingsAuto = { constructor() { this.data = athletesData; } + ``` The default overlaySettings are using **ConnectedPositionStrategy** with **Absolute** scroll strategy, **modal** set to false, with enabled **close on escape** and **close on outside click** interactions. @@ -718,6 +725,7 @@ The component is setup to work out of the box with the parent grid containing th ``` + @@ -1003,6 +1011,7 @@ constructor() { toolbarExporter.addEventListener("toolbarExporting", this.configureExport); } ``` + @@ -1019,6 +1028,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { <{ComponentSelector} onToolbarExporting={configureExport}> + ``` @@ -1050,6 +1060,7 @@ configureExport(args: IGridToolbarExportEventArgs) { }); } ``` + @@ -1063,6 +1074,7 @@ public configureExport(evt: CustomEvent) { columnArgs.cancel = columnArgs.header === 'Athlete' || columnArgs.header === 'Country'; }); } + ``` @@ -1070,6 +1082,7 @@ public configureExport(evt: CustomEvent) { ```razor ``` + @@ -1111,6 +1124,7 @@ public configureExport(evt: CustomEvent) { } } ``` + @@ -1127,6 +1141,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { <{ComponentSelector} onToolbarExporting={configureExport}> + ``` @@ -1144,6 +1159,7 @@ igRegisterScript("ConfigureExport", (evt) => { }); }, false); ``` + @@ -1170,6 +1186,7 @@ public configureExport(evt: CustomEvent) { } } ``` + @@ -1186,6 +1203,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { <{ComponentSelector} onToolbarExporting={configureExport}> + ``` @@ -1203,6 +1221,7 @@ igRegisterScript("ConfigureExport", (evt) => { }); }, false); ``` + @@ -1259,6 +1278,7 @@ Here is a sample snippet: + ``` @@ -1278,6 +1298,7 @@ Here is a sample snippet: ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx index 23b9d42c3f..e26e8d7828 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx @@ -84,6 +84,7 @@ We expose the that will be used for val requiredDateRecord.addValidators(this.pastDateValidator()); shippedDateRecord.addValidators(this.pastDateValidator()); } + ``` @@ -95,6 +96,7 @@ We expose the that will be used for val hireDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]); } ``` + You can decide to write your own validator function, or use one of the [built-in {Platform} validator functions](https://{Platform}.io/guide/form-validation#built-in-validator-functions). @@ -255,6 +257,7 @@ public calculateDealsRatio(dealsWon, dealsLost) { if (dealsLost === 0) return dealsWon + 1; return Math.round(dealsWon / dealsLost * 100) / 100; } + ``` @@ -268,6 +271,7 @@ The cross-field validator can be added to the + ```ts public rowStyles = { background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000' @@ -591,6 +596,7 @@ public cellStyles = { <{ComponentInstance} [rowStyles]="rowStyles"> ``` + @@ -647,6 +653,7 @@ public cellStyles = { ``` + diff --git a/docs/xplat/src/content/en/components/grids/data-grid.mdx b/docs/xplat/src/content/en/components/grids/data-grid.mdx index c429dd9c08..f3d7188cc7 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid.mdx @@ -77,7 +77,7 @@ In this {ProductName} Grid example, you can see how users can do both basic and ### Dependencies -To get started with the {Platform} Data Grid, first you need to install the +To get started with the {Platform} Data Grid, first you need to install the {PackageCommon} package. @@ -184,6 +184,7 @@ Or to link it: ```typescript ``` + For more details on how to customize the appearance of the grid, you may have a look at the [styling](data-grid.md#styling-{PlatformLower}-grid) section. @@ -206,6 +207,7 @@ The `DataGrid` requires the following modules: // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule)); + ``` @@ -225,6 +227,7 @@ import { IgxGridModule } from 'igniteui-angular'; }) export class AppModule {} ``` + @@ -1382,6 +1385,7 @@ and in the template of the component: ``` + **Note**: The grid property is best to be avoided when binding to remote data for now. It assumes that the data is available in order to inspect it and generate the appropriate columns. This is usually not the case until the remote service responds, and the grid will throw an error. Making available, when binding to remote service, is on our roadmap for future versions. @@ -1492,7 +1496,7 @@ configuration. Same goes for grouping and editing operations with or without tra >**WARNING** >The grids **do not** support this kind of binding for `PrimaryKey`, `ForeignKey` and `ChildKey` properties where applicable. -{/* NOTE this sample is differed */} +{/*NOTE this sample is differed*/} @@ -2309,7 +2313,7 @@ Check out these resources for more information: - [Hierarchical Grid Keyboard Navigation](hierarchical-grid/keyboard-navigation.md) - [Blog post](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility) - Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation - + @@ -2327,8 +2331,8 @@ Achieving a state persistence framework is easier than ever by using the new bui -{/* The sizing topic is still not available thus the Sizing section is commented out. */} -{/* ## Sizing +{/* The sizing topic is still not available thus the Sizing section is commented out. _/} +{/_ ## Sizing See the [Grid Sizing](sizing.md) topic. */} @@ -2478,7 +2482,7 @@ Learn more about creating a {Platform} `Grid` in our short tutorial video: - [Column Resizing](grid/column-resizing.md) - [Selection](grid/selection.md) - [Column Data Types](grid/column-types.md#default-template) -{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} +{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx index bf2e69b901..df92a08d2e 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx @@ -76,6 +76,7 @@ idColumn.isFilteringEnabled="false"; //adjust sorting this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; + ``` diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx index 7563368e0a..bd8364f43d 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx @@ -160,6 +160,7 @@ public onButtonUnPin = (e: any) => { this.grid.pinColumn(cityColumn, PinnedPositions.None); this.grid.pinColumn(countryColumn, PinnedPositions.None); } + ``` @@ -264,6 +265,7 @@ onButtonUnPin() { this.grid.pinColumn(cityColumn, PinnedPositions.None); this.grid.pinColumn(countryColumn, PinnedPositions.None); } + ``` diff --git a/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx b/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx index 6d892c2824..e0146df2a6 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx @@ -236,7 +236,7 @@ public initData() { -{/* TODO ADD WC, ETC. */} +{/*TODO ADD WC, ETC.*/} ## API References diff --git a/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx index 38288f33e5..73c9d5040e 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx @@ -566,12 +566,12 @@ Learn more about creating a Blazor data grid in our short tutorial video: - [Row Grouping](row-grouping.md) - [Row Highlighting](row-highlighting.md) -{/* TODO fix build flagging list items */} +{/*TODO fix build flagging list items*/} -{/* - [Row Paging](row-paging.md) */} +{/*- [Row Paging](row-paging.md)*/} diff --git a/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx b/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx index cc63335ef9..c37a8eff64 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx @@ -46,8 +46,8 @@ This sample demonstrates this performance by binding thousands of financial reco -{/* TODO fix build flagging list items */} -{/* - [Binding Virtual Data](remote-data.md) */} +{/*TODO fix build flagging list items _/} +{/_ - [Binding Virtual Data](remote-data.md)*/} diff --git a/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx b/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx index ce0ac4b655..dfc19145f6 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx @@ -62,6 +62,7 @@ public componentDidMount() { // ... this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; } + ``` diff --git a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx index 968ec4dc2a..8c9958ac81 100644 --- a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx @@ -907,7 +907,7 @@ This way, due to {Platform}'s [ViewEncapsulation](https://{Platform}.io/api/core ### Demo -{/* NOTE this sample is differed */} +{/*NOTE this sample is differed*/} diff --git a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx index 9754b4ae74..d09f9c8098 100644 --- a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx @@ -34,7 +34,6 @@ The new data after the paste is decorated in Italic. - @@ -119,6 +118,7 @@ public get textArea() { return this.txtArea; } ``` + @@ -157,6 +157,7 @@ public get textArea() { } return this.txtArea; } + ``` @@ -213,6 +214,7 @@ function getTextArea() { } ``` + The code creates a DOM textarea element which is used to receive the pasted data from the clipboard. When the data is pasted in the textarea the code parses it into an array. @@ -257,6 +259,7 @@ public processData(data: any) { } return pasteData; } + ``` @@ -300,6 +303,7 @@ function processData(data) { return pasteData; } ``` + The pasted data can then be added as new records or used to update the existing records based on the user selection. @@ -385,6 +389,7 @@ public updateRecords(processedData: any[]) { } } } + ``` @@ -456,6 +461,7 @@ function updateRecords(processedData) { index++; } ``` + diff --git a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx index 5f919a36b8..e63e260bb7 100644 --- a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx @@ -52,7 +52,7 @@ For the visualization of the data, you might want to use the grid footer, which ### Demo Change the selection to see summaries of the currently selected range. -{/* NOTE this sample is differed */} +{/*NOTE this sample is differed*/} diff --git a/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx index 855d144687..ce82a8d5ce 100644 --- a/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx @@ -133,7 +133,7 @@ In addition to predefined themes and palettes, you can further customize the loo - [Column Resizing](grid/column-resizing.md) - [Selection](grid/selection.md) - [Column Data Types](grid/column-types.md#default-template) -{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} +{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} diff --git a/docs/xplat/src/content/en/components/grids/grids-header.mdx b/docs/xplat/src/content/en/components/grids/grids-header.mdx index f230a74282..e5e58c72f8 100644 --- a/docs/xplat/src/content/en/components/grids/grids-header.mdx +++ b/docs/xplat/src/content/en/components/grids/grids-header.mdx @@ -261,8 +261,8 @@ Here are a few of the data grid’s key features: -{/*Add back when batch editing is available> -{/*
  • [**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options
    • */}*/} +{/_Add back when batch editing is available> +{/_
  • [**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options
    • _/}_/}
  • @@ -293,7 +293,7 @@ Interactive [**Outlook-style Grouping**](grid/groupby.md)
    • -{/*
  • Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column
    • */} +{/*
  • Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column
    • */}
    diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx index 475b9ddd33..3f1262d0c2 100644 --- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx @@ -30,7 +30,7 @@ In this {Platform} grid example you can see how users can visualize hierarchical ### Dependencies -To get started with the {Platform} hierarchical grid, first you need to install the +To get started with the {Platform} hierarchical grid, first you need to install the {PackageCommon} package. @@ -110,6 +110,7 @@ You also need to include the following import to use the grid: ```typescript import 'igniteui-webcomponents-grids/grids/combined.js'; ``` + The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.md) and based on your project configuration to import it: @@ -132,6 +133,7 @@ Or to link it: ```typescript ``` + For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](overview.md#Styling) section. @@ -150,6 +152,7 @@ For more details on how to customize the appearance of the hierarchical grid, yo // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule)); + ``` @@ -169,6 +172,7 @@ import { IgxhierarchicalGridModule } from 'igniteui-angular'; }) export class AppModule {} ``` + @@ -804,8 +808,8 @@ The Hierarchical Grid allows the users to conveniently collapse all its currentl unfold_less_icon_screenshot -{/* TODO: uncomment when sizing topic is ready */} -{/* ## Sizing +{/* TODO: uncomment when sizing topic is ready _/} +{/_ ## Sizing See the [Hierarchical Grid Sizing](sizing.md) topic. */} diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx index d4157e6fe4..279065332d 100644 --- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx +++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx @@ -134,7 +134,7 @@ In addition to predefined themes and palettes, you can further customize the loo - [Column Resizing](grid/column-resizing.md) - [Selection](grid/selection.md) - [Column Data Types](grid/column-types.md#default-template) -{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} +{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx index c0cddcedf6..1cfd692155 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx @@ -32,7 +32,6 @@ The {PivotGridTitle} component has additional features and functionalities relat - @@ -101,6 +100,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { ] } ``` + @@ -154,6 +154,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { ] } ``` + diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx index 47ecca38d0..13e0260c7b 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx @@ -825,6 +825,7 @@ When overriding the `PivotKeys` in Blazor, currently you will need to define all | Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the `Columns` configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | | Setting duplicate `MemberName` or `Member` property values for dimensions/values. | These properties should be unique for each dimension/value. Duplication may result in loss of data from the final result. | | Row Selection is only supported in **Single** mode. | Multiple selection is currently not supported. | + | Merging the dimension members is case sensitive| The Pivot Grid creates groups and merges the same (case sensitive) values. But the dimensions provide `MemberFunction` and this can be changed there, the result of the `MemberFunction` are compared and used as display value.| diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx index 8ddfd168db..77e54ad194 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx @@ -230,7 +230,7 @@ public noopSortStrategy = NoopSortingStrategy.instance(); ## Additional Resources -{/* * [{Platform} Pivot Grid Features](pivot-grid-features.md) */} +{/** [{Platform} Pivot Grid Features](pivot-grid-features.md) */} - [{Platform} Pivot Grid Overview](overview.md) Our community is active and always welcoming to new ideas. diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx index 99ffe398b9..2b134c0a61 100644 --- a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx @@ -34,7 +34,7 @@ In this example, you can see how users can manipulate hierarchical or flat data. Getting started with our {Platform} Grid library and the {Platform} Tree Grid in particular is the first step to building powerful, data-rich applications that display hierarchical information in a clear and interactive way. The {Platform} Tree Grid allows you to present parent-child data structures in a familiar tabular format, complete with features like row expansion, sorting, filtering, editing, and virtualization for high performance with large datasets. -To get started with the {Platform} tree grid, first you need to install the +To get started with the {Platform} tree grid, first you need to install the {PackageCommon} package. @@ -136,6 +136,7 @@ For more details on how to customize the appearance of the tree grid, you may ha // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule)); + ``` @@ -155,6 +156,7 @@ import { IgxTreeGridModule } from 'igniteui-angular'; }) export class AppModule {} ``` + diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx index 66b3cab075..a3a65be0f6 100644 --- a/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx +++ b/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx @@ -134,7 +134,7 @@ In addition to predefined themes and palettes, you can further customize the loo - [Column Resizing](grid/column-resizing.md) - [Selection](grid/selection.md) - [Column Data Types](grid/column-types.md#default-template) -{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} +{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */} diff --git a/docs/xplat/src/content/en/components/inputs/button.mdx b/docs/xplat/src/content/en/components/inputs/button.mdx index b436d97c41..dc76be4d32 100644 --- a/docs/xplat/src/content/en/components/inputs/button.mdx +++ b/docs/xplat/src/content/en/components/inputs/button.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Button Overview -The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button +The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button OnClick event diff --git a/docs/xplat/src/content/en/components/inputs/color-editor.mdx b/docs/xplat/src/content/en/components/inputs/color-editor.mdx index 4f312b65a6..bcf8867b20 100644 --- a/docs/xplat/src/content/en/components/inputs/color-editor.mdx +++ b/docs/xplat/src/content/en/components/inputs/color-editor.mdx @@ -140,6 +140,7 @@ The simplest way to start using the is as follows ref={this.colorEditorRef}> ``` + @@ -168,6 +169,7 @@ public ngAfterViewInit(): void public onValueChanged = (e: any) => { console.log("test"); } + ``` @@ -177,6 +179,7 @@ this.OnValueChanged = this.OnValueChanged.bind(this); this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent; this.colorEditor.valueChanged = this.OnValueChanged; ``` + @@ -189,6 +192,7 @@ this.colorEditor.valueChanged = this.OnValueChanged; } } + ``` diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx index 7a2bd78765..cf8ea5c4a5 100644 --- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx +++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx @@ -63,7 +63,7 @@ In order to add a condition you select a field, an operand based on the field da Clicking on the (AND or OR) button placed above each group, will open a menu with options to change the group type or ungroup the conditions inside. -Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all preset conditions and groups. +Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all preset conditions and groups. You can start using the component by setting the property to an array describing the entity name and an array of its fields, where each field is defined by its name and data type. Once a field is selected it will automatically assign the corresponding operands based on the data type. The Query Builder has the property. You could use it to set an initial state of the control and access the user-specified filtering logic. @@ -255,7 +255,7 @@ By default the header would not be displayed. In The search value of a condition can be templated by setting the property to a function that returns a lit-html template. -When using `SearchValueTemplate`, you must provide templates for all field types in your entity, or the query builder will not function correctly. It is mandatory to implement a default/fallback template that handles any fields or conditions not covered by specific custom templates. Without this, users will not be able to edit +When using `SearchValueTemplate`, you must provide templates for all field types in your entity, or the query builder will not function correctly. It is mandatory to implement a default/fallback template that handles any fields or conditions not covered by specific custom templates. Without this, users will not be able to edit conditions for those fields. diff --git a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx index 9661371e96..c171fd211a 100644 --- a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx @@ -35,11 +35,11 @@ The matrix below provides a high-level outline of the accessibility support prov |**Component/Principle**| (a)
    |(b)
    |(c)
    |(d)
    |(e)
    |(f)
    |(g)
    |(h)
    |(i)
    |(j)
    |(k)
    |(l)
    |(m)
    |(n)
    |(o)
    |(p)
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__||||||||||||||||| +|**Grids**||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|__Other__||||||||||*||||||| +|**Other**||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -114,11 +114,11 @@ The table above is relevant only to the **Default theme** of Ignite UI for {Plat |**Component/Guideline**|1.1
    |1.2
    |1.3
    |1.4
    |2.1
    |2.2
    |2.3
    |2.4
    |2.5
    |3.1
    |3.2
    |3.3
    |4.1
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__|||||||||||||| +|**Grids**|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|__Other__|||||||*||||||| +|**Other**|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx index 46b8345243..1eae96c93b 100644 --- a/docs/xplat/src/content/en/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx @@ -484,16 +484,16 @@ In this setup: This approach gives you full flexibility over the chat input bar, letting you add, remove, or reorder actions without rebuilding the input area from scratch. ### Markdown Rendering -The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the +The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the - `igniteui-webcomponents/extras` + `igniteui-webcomponents/extras` - `igniteui-react/extras` + `igniteui-react/extras` entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx index 6e3e4d9c4a..b867d03eac 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx @@ -17,7 +17,7 @@ import dockmanagerElectronApp from '@xplat-images/dockmanager-electron-app.gif'; The Infragistics {Platform} Dock Manager component can be used in a multi-window [Electron](https://www.electronjs.org/) desktop application to manage the layout of each window, drag panes outside of a window in order to create a new window and drag/drop panes from one window to another. You could find a sample implementation of such application in the following repository https://github.com/IgniteUI/dock-manager-electron-app. -{/* TODO: Add a gif of the application and a link to download the exe */} +{/*TODO: Add a gif of the application and a link to download the exe*/} {Platform} Dock Manager desktop integration ## Implementation diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx index 6d8cd20e99..5c99ec2114 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx @@ -112,6 +112,7 @@ this.dockManager.layout = { ] } }; + ``` @@ -136,6 +137,7 @@ this.dockManager.layout = { } }; ``` + To load the content of the panes, the Dock Manager uses [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). The [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute of the content element should match the `ContentId` of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to **100%** for predictable response when the end-user is resizing panes. @@ -644,6 +646,7 @@ private saveLayout() { private loadLayout() { this.dockManager.layout = JSON.parse(this.savedLayout); } + ``` @@ -659,6 +662,7 @@ private loadLayout() { this.dockManager.layout = JSON.parse(this.savedLayout); } ``` + @@ -684,7 +688,7 @@ The Dock Manager component raises events when specific end-user interactions are
    - + @@ -1017,6 +1021,7 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def ```html ``` + @@ -1027,6 +1032,7 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def ```tsx ``` + @@ -1047,6 +1053,7 @@ const dockManagerStringsFr: IgcDockManagerResourceStrings = { addResourceStrings('fr', dockManagerStringsFr); ``` +     The Dock Manager exposes `ResourceStrings` property which allows you to modify the strings. If you set the `ResourceStrings` property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set. diff --git a/docs/xplat/src/content/en/components/layouts/icon.mdx b/docs/xplat/src/content/en/components/layouts/icon.mdx index 7ee82e3e24..bd26f657ee 100644 --- a/docs/xplat/src/content/en/components/layouts/icon.mdx +++ b/docs/xplat/src/content/en/components/layouts/icon.mdx @@ -220,6 +220,7 @@ const searchIcon = ''; registerIconFromText("search", searchIcon, "material"); + ``` @@ -241,6 +242,7 @@ registerIconFromText("search", searchIcon, "material"); } } ``` + diff --git a/docs/xplat/src/content/en/components/menus/toolbar.mdx b/docs/xplat/src/content/en/components/menus/toolbar.mdx index 5407e9bfef..8ec7043608 100644 --- a/docs/xplat/src/content/en/components/menus/toolbar.mdx +++ b/docs/xplat/src/content/en/components/menus/toolbar.mdx @@ -585,7 +585,7 @@ The icon component can be styled by using it's `BaseTheme` property directly to -{/* The following example demonstrates the various theme options that can be applied. +{/*The following example demonstrates the various theme options that can be applied. */} diff --git a/docs/xplat/src/content/en/components/notifications/snackbar.mdx b/docs/xplat/src/content/en/components/notifications/snackbar.mdx index 947fbd4016..091ff87b06 100644 --- a/docs/xplat/src/content/en/components/notifications/snackbar.mdx +++ b/docs/xplat/src/content/en/components/notifications/snackbar.mdx @@ -160,7 +160,7 @@ Use the pro By default, the snackbar component is hidden automatically after a period specified by the . You can use property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar you can display an action button inside the component. - + diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx index 464fd4339e..4b9c4c286d 100644 --- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx @@ -298,6 +298,7 @@ this.radios.forEach(radio => { }); }) ``` + @@ -317,12 +318,13 @@ this.radios.forEach(radio => { JA - + - + ``` ```tsx @@ -342,6 +344,7 @@ public onRadioChange(e: any) { } } ``` + If everything went well, we should now have a Calendar with customized display, that also changes the locale representation, based on the user selection. Let's have a look at it: diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index 250cf2419c..f1f0c22a84 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -20,7 +20,7 @@ The {ProductName} Date Picker Component lets users pick a single date through a -The is a brand new component from {ProductName} version +The is a brand new component from {ProductName} version @@ -193,6 +193,7 @@ const date = new Date(); this.SelectedDate = DateTime.Today; } } + ``` diff --git a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx index 7d5d7eddde..b99ac9ee06 100644 --- a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx +++ b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx @@ -142,7 +142,6 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart - ### {Platform} 極座標チャート {Platform} 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。[極座標チャート](types/polar-chart.md)の詳細をご覧ください。 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx index 4fd1c0eecb..5687c5ed74 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx @@ -90,4 +90,3 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; - diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx index d39fff3bc3..cb1e553711 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx @@ -228,6 +228,7 @@ this.Chart.markerTypes.add(MarkerType.None); // on LineSeries of DataChart this.LineSeries.markerType = MarkerType.None; + ``` @@ -258,6 +259,7 @@ this.Chart.Resolution = 10; // on LineSeries of DataChart: this.LineSeries.Resolution = 10; + ``` diff --git a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx index 81cb254ac3..0554648934 100644 --- a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx @@ -46,7 +46,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 時系列データを左から右へ並べ替える。 - 透明色を使用して、別の系列の背後にプロットされているデータがブロックされないようにする。 -### 以下の場合にエリア チャートを使用しないでください: +### 以下の場合にエリア チャートを使用しないでください - 多くの (7 または 10 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。 - 時系列データの値は類似している場合 (同じ期間のデータ)。これにより、重なり合った網掛け領域を区別できなくなります。 diff --git a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx index 9c572c8832..db08faf49c 100644 --- a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx @@ -63,12 +63,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。 - 読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。 -### 以下の場合に棒チャートを使用しないでください: +### 以下の場合に棒チャートを使用しないでください - データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。 - 詳細な時系列分析が必要なときは、時系列を含む[折れ線チャート](line-chart.md)を検討してください。 -### 棒チャートのデータ構造: +### 棒チャートのデータ構造 - データ ソースはデータ項目の配列またはリストである必要があります。 - データ ソースに少なくとも 1 つのデータ項目を含む必要があります。 diff --git a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx index be9f8b9f26..9c86013555 100644 --- a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx @@ -38,16 +38,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 同じデータ セットに正の値だけでなく負の値も表示する必要がある場合。 - パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合。 -### 縦棒チャートのベスト プラクティス: +### 縦棒チャートのベスト プラクティス - データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。 - 時系列データを左から右へ並べ替える。 -### 以下の場合に縦棒チャートを使用しないでください: +### 以下の場合に縦棒チャートを使用しないでください - 多くの (10 または 12 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。 -### 縦棒チャートのデータ構造: +### 縦棒チャートのデータ構造 - データ モデルには少なくとも 1 つの数値プロパティを含む必要があります。 - データ モデルにはラベルのためのオプションの文字列または日時プロパティを含むことができます。 diff --git a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx index 10024ea6df..033a97cd47 100644 --- a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx @@ -45,7 +45,7 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と - スライスの選択 - チャート アニメーション -### ドーナツ チャートのベスト プラクティス: +### ドーナツ チャートのベスト プラクティス - 複数のデータ セットを使用して、データを輪に表示します。 - データをすばやく説明するために、ドーナツの穴の中に値やラベルなどの情報を配置します。 @@ -54,7 +54,7 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と - データ セグメントの合計が 100% になるようにします。 - パーツのセグメント/スライスでカラー パレットを区別できるようにします。 -### 以下の場合にドーナツ チャートを使用しないでください: +### 以下の場合にドーナツ チャートを使用しないでください - 時間の経過に伴う変化の比較の場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。 - 正確なデータ比較が必要である場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。 diff --git a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx index 06595e66cf..fcd506fe93 100644 --- a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx @@ -53,7 +53,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 比較解析のために 1 つ以上のカテゴリのデータ トレンドを表示する必要がある場合 - 詳細な時系列データを可視化する必要がある場合 -### 折れ線チャートのベスト プラクティス: +### 折れ線チャートのベスト プラクティス - データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する - 時系列データを左から右へ並べ替える @@ -64,7 +64,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 多くの (7 または 10 以上) シリーズのデータがある場合チャートを読みやすくすることが目標である場合 - 時系列データの値は同じ (同じ期間のデータ) である場合; 重複した行を区別できなくなります。 -### 折れ線チャートのデータ構造: +### 折れ線チャートのデータ構造 - データ ソースはデータ項目の配列またはリスト (単一シリーズの場合) である必要があります。 - データ ソースは、配列の配列またはリストのリスト (複数シリーズの場合) である必要があります。 diff --git a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx index e261d7788b..55edc8835b 100644 --- a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx @@ -49,7 +49,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 時系列データを左から右へ並べ替える。 - 実線などの視覚属性を使用して一連のデータを表示する。 -### 次の場合にスパークラインを使用しないでください: +### 次の場合にスパークラインを使用しないでください - データを詳細に分析する必要がある場合。 - データ ポイントのすべてのラベルを表示する必要がある場合。Y 軸上には最大値と最小値のみを表示でき、X 軸には最初の値と最後の値のみを表示できます。 diff --git a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx index ff584bc38f..7f6f4a5fe8 100644 --- a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx @@ -49,7 +49,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 正確な値を使用せずに、一目で迅速なデータ分析を提供したい場合長方形の相対的なサイズは、パターンや外れ値を非常に迅速に識別するのに役立ちます。 - スペースを有効に使用したい場合ツリーマップは、数千の項目を同時に画面に表示することが可能となります。 -### 以下の場合にツリーマップを使用しないでください: +### 以下の場合にツリーマップを使用しないでください - 正確な値を必要とするデータ ストーリーを説明している場合。 - 負のデータ値がある場合。 @@ -88,7 +88,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 項目を同じ値で色付けするグループ ベースのメカニズム。 - 階級区分図に似たスケール ベースのメカニズムで、ノードの色をその値に基づいてマップします。 -### レイアウト方向: +### レイアウト方向 `LayoutOrientation` プロパティによってユーザーは階層のノードが展開される方向を設定できます。 diff --git a/docs/xplat/src/content/jp/components/excel-library.mdx b/docs/xplat/src/content/jp/components/excel-library.mdx index 496b2743b0..32f656d58a 100644 --- a/docs/xplat/src/content/jp/components/excel-library.mdx +++ b/docs/xplat/src/content/jp/components/excel-library.mdx @@ -250,6 +250,7 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => // ... } ``` + diff --git a/docs/xplat/src/content/jp/components/excel-utility.mdx b/docs/xplat/src/content/jp/components/excel-utility.mdx index beac5a455b..889606813b 100644 --- a/docs/xplat/src/content/jp/components/excel-utility.mdx +++ b/docs/xplat/src/content/jp/components/excel-utility.mdx @@ -114,6 +114,7 @@ export class ExcelUtility { }); } } + ``` diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx index 290baca01e..2656b8aafd 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx @@ -36,6 +36,7 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と OthersCategoryOutline を追加しました。 #### バグ修正 + | バグ番号 | コントロール | 説明 | |------------|---------|-------------| |33808|IgbDataChart|TimeAxisInterval の IntervalType Ticks に設定されたスケールが表示されない。| @@ -54,7 +55,7 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と **重大な変更** #### {PackageCharts} (チャート) - - New dot type, improved outline implementation following WCAG AA accessibility standards and theme based sizing. [#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889) +- New dot type, improved outline implementation following WCAG AA accessibility standards and theme based sizing. [#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889) #### ユーザー注釈 {ProductName} では、ユーザー注釈機能により、実行時に `DataChart` にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 @@ -65,9 +66,9 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と #### {PackageGrids} (グリッド) - - Accessibility color adjustments for Button, Button group, Calendar, Checkbox, Date picker, date range picker, Nav drawer, Radio group, Stepper. [#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959) - - Updated and aligned styles with the design kit for Button, Calendar, Carousel, Combo, Date picker, Date range picker, input, Select, Textarea. - - Improved keyboard navigation experience and grouping(now using native Math.groupBy) for Combo. +- Accessibility color adjustments for Button, Button group, Calendar, Checkbox, Date picker, date range picker, Nav drawer, Radio group, Stepper. [#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959) +- Updated and aligned styles with the design kit for Button, Calendar, Carousel, Combo, Date picker, Date range picker, input, Select, Textarea. +- Improved keyboard navigation experience and grouping(now using native Math.groupBy) for Combo. ### **すべてのグリッド** @@ -210,7 +211,7 @@ col.Pinned = true; - Refactored grouping algorithm from recursive to iterative. - Optimized grouping operations. -- **Other Improvements** +- **Other Improvements** - A column's `MinWidth` and `MaxWidth` constrain the user-specified width so that it cannot go outside their bounds. - The `PagingMode` property can now be set as simple strings "local" and "remote" and does not require importing the `GridPagingMode` enum. @@ -525,6 +526,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft - 内部グリッド アクション ボタンをカプセル化しました。 #### バグ修正 + | バグ番号 | コントロール | 説明 | |------------|---------|------------------| |35497 | `IgbDialog` | ShowAsync と HideAsync が呼び出されると、後続のコードは実行されない。| diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx index d555fd4c6e..e339995b04 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx @@ -1400,9 +1400,11 @@ igc-avatar { - `value` is no longer readonly and can be explicitly set. The value attribute also supports declarative binding, accepting a valid JSON stringified array. - `value` type changed from `string[]` to `ComboValue[]` where + ```ts ComboValue = T | T[keyof T] ``` + - `igcChange` event object properties are also changed to reflect the new `value` type: diff --git a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx index 595915fcf0..e4c4d11ed0 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx @@ -24,7 +24,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc ## 新しい Blazor プロジェクトの作成 - - Visual Studio を起動し、スタート ページで **[新しいプロジェクトの作成]** をクリックし、**Blazor Server App**、**Blazor WebAssembly App**、**Blazor Web App** などの Blazor テンプレートを選択して **[次へ]** をクリックします。 +- Visual Studio を起動し、スタート ページで **[新しいプロジェクトの作成]** をクリックし、**Blazor Server App**、**Blazor WebAssembly App**、**Blazor Web App** などの Blazor テンプレートを選択して **[次へ]** をクリックします。 **Blazor Server App** を使用する場合は、コンポーネントが使用されるページに `@rendermode InteractiveServer` を追加してください。 diff --git a/docs/xplat/src/content/jp/components/general-nuget-feed.mdx b/docs/xplat/src/content/jp/components/general-nuget-feed.mdx index 492e10d852..fbd3a0ec24 100644 --- a/docs/xplat/src/content/jp/components/general-nuget-feed.mdx +++ b/docs/xplat/src/content/jp/components/general-nuget-feed.mdx @@ -27,8 +27,8 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet nuget-package-manager-setting-menu-item 2 - [**パッケージ ソース**] セクションで、ダイアログの右上にある **[+]** アイコンをクリックして新しいパッケージ ソースを追加します。 - - 名前を **Infragistics** に設定します。 - - NuGet プロトコル バージョン 3 を使用する場合は、ソースを **https://packages.infragistics.com/nuget/licensed/v3/index.json** に設定します。それ以外の場合は、**https://packages.infragistics.com/nuget/licensed/** に設定する必要があります。 +- 名前を **Infragistics** に設定します。 +- NuGet プロトコル バージョン 3 を使用する場合は、ソースを **https://packages.infragistics.com/nuget/licensed/v3/index.json** に設定します。それ以外の場合は、**https://packages.infragistics.com/nuget/licensed/** に設定する必要があります。 v3 またはそれ以前のバージョンを使用するかどうかの詳細については、次の Web サイト (英語) をご覧ください: **https://devblogs.microsoft.com/nuget/nuget-3-what-and-why/** 。プロトコル v3 は、新しいバージョンの NuGet クライアント (2015 以降) を使用する場合にのみ適用されます。古い NuGet クライアントは、v3 と互換性がない場合があります。 diff --git a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx index 2cbf002cf3..3a76989a10 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx @@ -28,7 +28,7 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png'; ## {Platform} Bing Maps 画像の表示の例 -{/* */} +{/**/} Angular Bing Maps Imagery diff --git a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx index 4cd9287837..ba6e7b7a15 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx @@ -53,6 +53,7 @@ function heatWorkerPostMessage() { } HeatTileGeneratorWebWorker.start(); export default {} as typeof Worker & (new () => Worker); + ``` @@ -89,6 +90,7 @@ function postMessageFunction() { self.postMessage.apply(self, Array.prototype.slice.call(arguments)); } export default {} as typeof Worker & (new () => Worker); + ``` ## 依存関係 diff --git a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx index 16c0450094..93a810b7f7 100644 --- a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx @@ -39,7 +39,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## シェイプ ファイルのフォーマット -{Platform} コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、*.shp*、*.shx*、および *.dbf* の拡張子が付いています。 +{Platform} コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、_.shp_、_.shx_、および _.dbf_ の拡張子が付いています。 以下の表は、シェープ ファイルの各タイプの基本情報および目的を提供しています。 @@ -83,7 +83,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; このトピックに関連する追加情報については、以下のトピックを参照してください。 - - [シェープファイルのバインディング](geo-map-binding-shp-file.md) +- [シェープファイルのバインディング](geo-map-binding-shp-file.md) ## API リファレンス diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx index 97e85d5de3..4013728028 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx @@ -159,7 +159,7 @@ grid.data = []; -{/* TODO */} +{/*TODO */} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx index dcba92443a..a8ef10bc79 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx @@ -35,6 +35,7 @@ column.cellTemplate = (params: IgcCellContext) => { return html` ``` + @@ -69,6 +70,7 @@ column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79 ``` + @@ -93,6 +95,7 @@ column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count); // = ``` + @@ -107,6 +110,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => ( {asCurrency(ctx.value * ctx.row.data.count)} ); ``` + @@ -115,6 +119,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => ( ``` + ## カスタム DOM テンプレート @@ -202,7 +207,7 @@ export interface GridLiteCellContext< -{/* TODO */} +{/*TODO */} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx index ea202eb9b8..9705ed4219 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx @@ -312,7 +312,7 @@ return ( -{/* TODO */} +{/*TODO */} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx index 9553459409..8f7896c36f 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx @@ -362,6 +362,7 @@ For example here is a Lit-based sample: } } ``` + Here is an example: @@ -377,6 +378,7 @@ return( ); ``` + @@ -518,6 +520,7 @@ export type DataPipelineParams = { type: 'sort' | 'filter'; }; ``` + ```typescript grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[] | Promise }; @@ -560,6 +563,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration } }; ``` + `dataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 @@ -572,7 +576,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration `DataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 -{/* TODO */} +{/*TODO */} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx index 13431d6dcc..478c3d79e1 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx @@ -93,7 +93,7 @@ column.headerTemplate = () => html`

    ⭐ Rating ⭐

    `; -{/* TODO */} +{/*TODO */} ## その他のリソース 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 15f8edac19..70606ca171 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx @@ -47,6 +47,7 @@ Or using yarn: ```cmd yarn add igniteui-grid-lite ``` + ### Installation @@ -61,6 +62,7 @@ Or using yarn: ```cmd yarn add igniteui-react ``` + ### インストール @@ -71,6 +73,7 @@ In the file where you want to use Grid Lite, first we need to import it: ```tsx import { IgrGridLite } from 'igniteui-react/grid-lite'; ``` + @@ -81,6 +84,7 @@ import { IgcGridLite } from 'igniteui-grid-lite'; IgcGridLite.register(); ``` + @@ -105,6 +109,7 @@ return ( ); ``` + @@ -138,6 +143,7 @@ import { IgcGridLite } from 'igniteui-grid-lite'; IgcGridLite.register(); ``` + ### IgniteUI.Blazor.GridLite のインストール Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。**IgniteUI.Blazor.GridLite** NuGet パッケージを検索してインストールします。 diff --git a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx index f3fd9a95e3..e50bdf1ebb 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx @@ -201,6 +201,7 @@ grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode ``` ascending -> descending -> none -> ascending ``` + `none` はデータの初期状態で、グリッドによるソートが適用されていません。 @@ -211,6 +212,7 @@ ascending -> descending -> none -> ascending ``` Ascending -> Descending -> None -> Ascending ``` + `None` はデータの初期状態で、グリッドによるソートが適用されていません。 @@ -576,6 +578,7 @@ export type DataPipelineParams = { type: 'sort' | 'filter'; }; ``` + ```typescript grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams) => T[] | Promise }; @@ -618,6 +621,7 @@ grid.DataPipelineConfiguration = new DataPipelineParams } }; ``` + `dataPipelineConfiguration` プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 @@ -630,7 +634,7 @@ grid.DataPipelineConfiguration = new DataPipelineParams `DataPipelineConfiguration` プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 -{/* TODO */} +{/*TODO */} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx index 5549b268e7..967b3fa65b 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx @@ -68,7 +68,7 @@ import ApiRef from 'igniteui-astro-components/components/mdx/ApiRef.astro'; -{/* TODO */} +{/*TODO */} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx index af4f96c2cb..e82af4839a 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx @@ -216,6 +216,7 @@ const filteringTree: IgrFilteringExpressionsTree = { + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx index 42e6710de5..9aed395574 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx @@ -81,6 +81,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + ``` @@ -114,6 +115,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; } } ``` + @@ -125,6 +127,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + ``` @@ -208,6 +211,7 @@ private OnRedoClick() { this.grid.transactions.redo(); } } + ``` @@ -221,6 +225,7 @@ private OnRedoClick() { ``` + @@ -387,6 +392,7 @@ export class GridBatchEditingSampleComponent { } } ``` + @@ -401,6 +407,7 @@ export class GridBatchEditingSampleComponent { ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx index 2ec3724901..e71908eeb7 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx @@ -97,6 +97,7 @@ import { IgrCombo } from 'igniteui-react'; ); } + ``` @@ -113,6 +114,7 @@ import { IgrCombo } from 'igniteui-react'; } ``` + @@ -185,6 +187,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) { }; }); } + ``` @@ -214,6 +217,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) { } } ``` + @@ -276,6 +280,7 @@ import { IgrCombo } from 'igniteui-react'; ); } ``` + @@ -311,6 +316,7 @@ public webGridCountryDropDownTemplate: IgcRenderFunction return html`` } ``` + ## 既知の問題と制限 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx index e9e3f96ca6..b4fe62e553 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx @@ -317,6 +317,7 @@ public classEditTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -409,6 +410,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -451,6 +453,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -481,6 +484,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { @ref="column1"> ``` + そして、テンプレートを index.ts ファイルのこの列に渡します。 @@ -542,6 +546,7 @@ public keydownHandler(event) { } } } + ``` @@ -564,6 +569,7 @@ function handleKeyDown(event: KeyBoardEvent) { } } ``` + - 常時編集モード @@ -585,6 +591,7 @@ if (key == 13) { this.cdr.detectChanges(); }); } + ``` @@ -602,6 +609,7 @@ if (code === "Enter" || code === "NumpadEnter") { }); } ``` + - ENTER/SHIFT + ENTER ナビゲーション @@ -742,6 +750,7 @@ this.selectedCell.update(newData); // Directly using the row `update` method const row = this.grid.getRowByKey(rowID); row.update(newData); + ``` @@ -760,6 +769,7 @@ selectedCell.update(newData); const row = grid1Ref.current.getRowByKey(rowID); row.update(newData); ``` + @@ -779,6 +789,7 @@ row.update(newData); IgbRowType row = this.grid.GetRowByKey(rowID); row.Update(newData); } + ``` @@ -799,6 +810,7 @@ this.selectedCell.update(newData); const row = this.treeGrid.getRowByKey(rowID); row.update(newData); ``` + @@ -817,6 +829,7 @@ row.update(newData); IgbRowType row = this.treeGrid.GetRowByKey(rowID); row.Update(newData); } + ``` @@ -838,6 +851,7 @@ this.selectedCell.update(newData); const row = this.hierarchicalGrid.getRowByKey(rowID); row.update(newData); ``` + @@ -856,6 +870,7 @@ row.update(newData); IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID); row.Update(newData); } + ``` @@ -873,6 +888,7 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID); const row = this.grid.getRowByIndex(rowIndex); row.delete(); ``` + @@ -1100,6 +1116,7 @@ function handleCellEdit(args: IgrGridEditEventArgs): void { } } ``` + @@ -1126,7 +1143,7 @@ igRegisterScript("HandleCellEdit", (ev) => { ```typescript public webTreeGridCellEdit(event: CustomEvent): void { const column = event.detail.column; - + if (column.field === 'Age') { if (event.detail.newValue < 18) { event.detail.cancel = true; @@ -1162,6 +1179,7 @@ igRegisterScript("HandleCellEdit", (ev) => { } }, false); ``` + @@ -1184,6 +1202,7 @@ public webTreeGridCellEdit(args: IgrGridEditEventArgs): void { } } } + ``` @@ -1221,6 +1240,7 @@ public webHierarchicalGridCellEdit(event: CustomEvent): vo } } ``` + @@ -1304,6 +1324,7 @@ Then set the related CSS properties for that class: --ig-grid-cell-editing-background: #add8e6; } ``` + @@ -1334,6 +1355,7 @@ Then set the related CSS properties for that class: --ig-grid-cell-editing-background: #add8e6; } ``` + @@ -1364,6 +1386,7 @@ Then set the related CSS properties for that class: --ig-grid-cell-editing-background: #add8e6; } ``` + ### スタイル設定の例 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx index deb7eff881..5b0dd2471f 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx @@ -80,6 +80,7 @@ const cellMergeMode: GridCellMergeMode = 'always'; @code { private GridCellMergeMode CellMergeMode = GridCellMergeMode.Always; } + ``` @@ -91,6 +92,7 @@ const cellMergeMode: GridCellMergeMode = 'always'; ``` + @@ -126,6 +128,7 @@ const cellMergeMode: GridCellMergeMode = 'always'; ```tsx const cellMergeMode: GridCellMergeMode = 'onSort'; ``` + @@ -149,6 +152,7 @@ const cellMergeMode: GridCellMergeMode = 'onSort'; @code { private GridCellMergeMode CellMergeMode = GridCellMergeMode.OnSort; } + ``` @@ -176,6 +180,7 @@ export declare class IgrGridMergeStrategy { comparer: (prevRecord: any, record: any, field: string) => boolean; } ``` + @@ -192,6 +197,7 @@ export declare class IgcGridMergeStrategy { comparer: (prevRecord: any, record: any, field: string) => boolean; } + ``` @@ -213,6 +219,7 @@ export class MyCustomStrategy extends IgrDefaultMergeStrategy { } } ``` + ```ts @@ -270,6 +277,7 @@ export class MyCustomStrategy extends IgcDefaultTreeGridMergeStrategy { ### デフォルトのストラテジを拡張 一部の動作 (例: comparer ロジック) のみをカスタマイズしたい場合は、組み込みの `DefaultMergeStrategy` を拡張し、必要なメソッドのみをオーバーライドできます。 + ```tsx <{ComponentSelector} data={data} mergeStrategy={customStrategy}> @@ -280,6 +288,7 @@ export class MyCustomStrategy extends IgcDefaultTreeGridMergeStrategy { ```ts const customStrategy = new MyCustomStrategy() as IgrGridMergeStrategy; ``` + @@ -291,6 +300,7 @@ constructor() { grid.mergeStrategy = new MyCustomStrategy() as IgcGridMergeStrategy; grid.cellMergeMode = 'always'; } + ``` ### Demo diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx index 024a6a0c37..2df593546e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx @@ -144,6 +144,7 @@ gridRef.current.selectRange(range) this.grid.SelectRange(new IgbGridSelectionRange[] {}); } } + ``` @@ -157,6 +158,7 @@ gridRef.current.selectRange(range) ```ts this.grid.clearCellSelection(); ``` + @@ -195,6 +197,7 @@ gridRef.current.clearCellSelection(); } } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx index 4d5f727ea3..32c34d342e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx @@ -206,6 +206,7 @@ npm install igniteui-react-grids this.addressColumn.CollapsibleIndicatorTemplate = this.ColumnIndicatorTemplate; } } + ``` @@ -236,6 +237,7 @@ public indTemplate = (ctx: IgcColumnTemplateContext) => { `; } ``` + @@ -255,6 +257,7 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => { ) } + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx index ab9ad33c4e..f22b9901ad 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx @@ -732,6 +732,7 @@ export class AppModule {} ``` + ### 列の非表示の無効化 @@ -863,6 +864,7 @@ export class AppModule {} + ``` @@ -1115,6 +1117,7 @@ $custom-button: button-theme( --ig-button-focus-visible-foreground: black; --ig-button-disabled-foreground: #ffcd0f; } + ``` @@ -1150,6 +1153,7 @@ $custom-button: button-theme( --ig-button-disabled-foreground: #ffcd0f; } ``` + @@ -1183,6 +1187,7 @@ $custom-button: button-theme( --ig-button-focus-visible-foreground: black; --ig-button-disabled-foreground: #ffcd0f; } + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx index befd2d22c1..eeed4abf8c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx @@ -83,9 +83,11 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => { **列移動**機能は各列レベルで有効にできます。つまり、 に移動可能な列または移動不可の列の両方を含むことができます。 の `Moving` 入力によって制御されます。 + ```html <{ComponentSelector} [moving]="true"> ``` + @@ -159,6 +161,7 @@ const idColumn = grid.getColumnByName("ID"); const nameColumn = grid.getColumnByName("Name"); grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); + ``` @@ -171,6 +174,7 @@ grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget); } ``` + `MoveColumn` - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター `Position` (`DropPosition` 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。 @@ -233,6 +237,7 @@ public onColumnMovingEnd(event) { } } ``` + @@ -248,6 +253,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => { + ``` @@ -265,6 +271,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => { ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx index 712ca7e6c3..fb0de18378 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx @@ -300,6 +300,7 @@ constructor() { ```typescript public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` + @@ -311,6 +312,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; var grid = document.getElementById('dataGrid') as {ComponentName}Component; grid.pinning = { columns: ColumnPinningPosition.End }; ``` + @@ -321,6 +323,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End }; ```tsx <{ComponentSelector} data={nwindData} autoGenerate={true} pinning={pinningConfig}> ``` + @@ -332,6 +335,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End }; Columns = ColumnPinningPosition.End }; } + ``` @@ -370,6 +374,7 @@ This can be done by creating a header template for the columns with a custom ico     ``` + @@ -428,6 +433,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -449,7 +455,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { igRegisterScript("WebGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; window.toggleColumnPin = function toggleColumnPin(field) { - var grid = document.getElementsByTagName("igc-grid")[0]; + var grid = document.getElementsByTagName["igc-grid"](0); var col = grid.getColumnByName(field); col.pinned = !col.pinned; grid.markForCheck(); @@ -495,6 +501,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { ); } ``` + @@ -583,6 +590,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + @@ -613,7 +621,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; window.toggleColumnPin = function toggleColumnPin(field) { - var grid = document.getElementsByTagName("igc-tree-grid")[0]; + var grid = document.getElementsByTagName["igc-tree-grid"](0); var col = grid.getColumnByName(field); col.pinned = !col.pinned; grid.markForCheck(); @@ -639,6 +647,7 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { + ``` ```tsx @@ -658,6 +667,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { ); } ``` + @@ -738,12 +748,13 @@ constructor() { public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { return html` -
    +
    ${ctx.cell.column.header}
    `; } + ``` @@ -780,6 +791,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { ); } ``` + @@ -929,7 +941,7 @@ The sample will not be affected by the selected global theme from **Change Theme ## ピン固定の制限 -- 列幅をパーセンテージ (%) で設定した場合にピン固定列があると `{ComponentName}` 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、`{ComponentName}` によって自動的に割り当てる必要があります。 +- 列幅をパーセンテージ (%) で設定した場合にピン固定列があると `{ComponentName}` 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、`{ComponentName}` によって自動的に割り当てる必要があります。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx index 6ac126f8e5..d52b766f5b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx @@ -117,6 +117,7 @@ public onResize(event) { } ``` + @@ -134,6 +135,7 @@ public onResize(event) { string nWidth = args.Detail.NewWidth; } } + ``` @@ -150,6 +152,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { ``` + @@ -184,6 +187,7 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + @@ -198,6 +202,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { + ``` @@ -217,6 +222,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { } } ``` + @@ -251,6 +257,7 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + @@ -264,6 +271,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { <{ComponentSelector} id="hierarchicalGrid" autoGenerate={false} onColumnResized={onResize}> + ``` @@ -282,6 +290,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { } } ``` + @@ -632,8 +641,9 @@ const onResize = (event: IgrColumnResizeEventArgs) => { ```typescript @ViewChild('@@igObjectRef') @@igObjectRef: {ComponentName}; -let column = this.@@igObjectRef.columnList.filter(c => c.field === 'ID')[0]; +let column = this.@@igObjectRef.columnList.filter[c => c.field === 'ID'](0); column.autosize(); + ``` @@ -644,6 +654,7 @@ constructor() { id.autosize(); } ``` + @@ -664,6 +675,7 @@ column.autosize(); column.Autosize(false); } } + ``` @@ -676,6 +688,7 @@ column.autosize(); let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0]; column.autosize(); ``` + @@ -705,6 +718,7 @@ column.autosize(); column.Autosize(false); } } + ``` @@ -718,6 +732,7 @@ column.autosize(); ```html ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx index bfd22efae9..69c6710a1c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx @@ -70,6 +70,7 @@ public formatOptions = this.options; @code { private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs() { DigitsInfo = "1.4-4" }; } + ``` @@ -78,6 +79,7 @@ public formatOptions = this.options; ``` + @@ -92,6 +94,7 @@ constructor() { var column = document.getElementById('column') as IgcColumnComponent; column.pipeArgs = this.formatOptions; } + ``` @@ -103,6 +106,7 @@ const formatOptions : IgrColumnPipeArgs = { ``` + ### DateTime、Date and Time (日付と時刻) @@ -141,13 +145,14 @@ public formatOptions = this.options; @code { private IgbColumnPipeArgs formatDateOptions = new IgbColumnPipeArgs() { - /** The date/time components that a date column will display, using predefined options or a custom format string. */ - /** e.g 'dd/mm/yyyy' or 'shortDate' **/ + /** The date/time components that a date column will display, using predefined options or a custom format string. _/ + /_*e.g 'dd/mm/yyyy' or 'shortDate' **/ Format = "longDate", - /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */ + /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation.*/ Timezone = "GMT" }; } + ``` @@ -171,6 +176,7 @@ constructor() { column.pipeArgs = this.formatDateOptions; } ``` + @@ -181,6 +187,7 @@ const formatOptions : IgrColumnPipeArgs = { }; + ``` @@ -214,6 +221,7 @@ public timeFormats = [ { format: 'fullTime', eq: 'h:mm:ss a zzzz' }, ]; ``` + @@ -266,7 +274,7 @@ const timeFormats = [ ### Boolean (ブール値) -デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。*false* 値には 'clear' アイコン、*true* 値には 'check' アイコンを使用します。編集テンプレートは コンポーネントを使用しています。 +デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。_false_ 値には 'clear' アイコン、_true_ 値には 'check' アイコンを使用します。編集テンプレートは コンポーネントを使用しています。 ```html @@ -335,7 +343,7 @@ const timeFormats = [ デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。通貨記号の位置と数値の書式設定は、提供された Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) または {ComponentTitle} の `Locale` に基づいています。 -*LOCALE_ID を使用する場合:* +_LOCALE_ID を使用する場合:_ ```ts import { LOCALE_ID } from '@angular/core'; @@ -362,7 +370,7 @@ import { LOCALE_ID } from '@angular/core'; -`PipeArgs` 入力を使用することにより、エンドユーザーは**小数点**、*currencyCode* および *display* によって数値書式をカスタマイズできます。 +`PipeArgs` 入力を使用することにより、エンドユーザーは**小数点**、_currencyCode_ および _display_ によって数値書式をカスタマイズできます。 ```ts @@ -393,6 +401,7 @@ public formatOptions = this.options; Display = "symbol-narrow" }; } + ``` @@ -401,6 +410,7 @@ public formatOptions = this.options; ``` + @@ -416,6 +426,7 @@ constructor() { var column = document.getElementById('column') as IgcColumnComponent; column.pipeArgs = this.formatOptions; } + ``` @@ -428,12 +439,14 @@ const formatOptions : IgrColumnPipeArgs = { ``` + | パラメーター | 説明 | |---------------------------| ------------------------- | | digitsInfo | 通貨値の 10 進数表現を表します。 | | display* | 狭義または広義の記号で値を表示します。 | + | currencyCode | ISO 4217 通貨コード | @@ -487,15 +500,16 @@ public formatPercentOptions = this.options; private IgbColumnPipeArgs formatPercentOptions = new IgbColumnPipeArgs() { /** - * Decimal representation options, specified by a string in the following format: + *Decimal representation options, specified by a string in the following format: * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. - * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. + *`minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. - * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + *`maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. */ DigitsInfo = "2.2-3" }; } + ``` @@ -504,6 +518,7 @@ public formatPercentOptions = this.options; ``` + @@ -525,6 +540,7 @@ constructor() { var column = document.getElementById('column') as IgcColumnComponent; column.pipeArgs = this.formatPercentOptions; } + ``` @@ -543,6 +559,7 @@ const formatOptions : IgrColumnPipeArgs = { ``` + @@ -589,6 +606,7 @@ constructor() { public editCellTemplate = (ctx: IgcCellTemplateContext) => { return html``; } + ``` @@ -606,6 +624,7 @@ const editCellTemplate = (ctx: IgrCellTemplateContext) => { ``` + @@ -644,6 +663,7 @@ constructor() { public formatCurrency(value: number) { return `$ ${value.toFixed(0)}`; } + ``` @@ -657,6 +677,7 @@ const formatCurrency = (value: number) => { ``` + @@ -669,6 +690,7 @@ const formatCurrency = (value: number) => { igRegisterScript("CurrencyFormatter", (value) => { return `$ ${value.toFixed(0)}`; }, false); + ``` @@ -688,6 +710,7 @@ public init(column: IgxColumnComponent) { return; } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx index 9425a5ff0a..f9170f29c9 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx @@ -57,6 +57,7 @@ constructor() { grid.rowClasses = this.rowClasses; } ``` + @@ -75,6 +76,7 @@ public rowClasses = { }; public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index; + ``` ```scss @@ -87,6 +89,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. } } ``` + @@ -251,6 +254,7 @@ public rowStyles = { 'border-color': (row: RowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null, color: (row: RowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null }; + ``` @@ -269,6 +273,7 @@ public rowStyles = { color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null }; ``` + @@ -327,6 +332,7 @@ constructor() { treeGrid.rowStyles = this.rowStyles; } ``` + @@ -356,6 +362,7 @@ public rowStyles = { public childRowStyles = { 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null }; + ``` @@ -370,6 +377,7 @@ const childRowStyles = { 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null }; ``` + @@ -386,6 +394,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => { 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null }; }, true); + ``` @@ -397,6 +406,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => { ``` + @@ -544,6 +554,7 @@ constructor() { unitPrice.cellClasses = this.unitPriceCellClasses; } ``` + @@ -580,6 +591,7 @@ public beatsPerMinuteClasses = { downFont: this.downFontCondition, upFont: this.upFontCondition }; + ``` @@ -598,6 +610,7 @@ const beatsPerMinuteClasses = { upFont: upFontCondition }; ``` + @@ -624,6 +637,7 @@ igRegisterScript("CellClassesHandler", () => { color: red; } } + ``` @@ -666,6 +680,7 @@ igRegisterScript("GrammyNominationsCellClassesHandler", () => { ```html ``` + @@ -683,6 +698,7 @@ public unitPriceCellClasses = { downPrice: this.downPriceCondition, upPrice: this.upPriceCondition }; + ``` @@ -695,6 +711,7 @@ igRegisterScript("UnitPriceCellClassesHandler", () => { }; }, true); ``` + @@ -711,6 +728,7 @@ const unitPriceCellClasses = { downPrice: downPriceCondition, upPrice: upPriceCondition }; + ``` @@ -726,6 +744,7 @@ const unitPriceCellClasses = { } } ``` + ```ts @@ -780,6 +799,7 @@ public evenColStyles = { color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white', animation: '0.75s popin' }; + ``` @@ -802,6 +822,7 @@ igRegisterScript("WebGridCellStylesHandler", () => { }; }, true); ``` + @@ -905,6 +926,7 @@ Define a `popin` animation } } ``` + @@ -925,6 +947,7 @@ constructor() { col1.cellStyles = this.webGridCellStylesHandler; } ``` + @@ -960,6 +983,7 @@ constructor() { col1.cellStyles = this.webTreeGridCellStylesHandler; } ``` + @@ -1120,6 +1144,7 @@ Define a `popin` animation } } ``` + @@ -1140,6 +1165,7 @@ constructor() { col1.cellStyles = this.cellStylesHandler; } ``` + @@ -1205,6 +1231,7 @@ constructor() { Col3.cellClasses = this.backgroundClasses; } ``` + @@ -1227,6 +1254,7 @@ const editDone = (event: IgrGridEditEventArgs) => { + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx index c885fc2083..1499aabfb8 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx @@ -42,7 +42,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - **false** - 対応するグリッドの行編集は無効になります。これがデフォルト値です。 - **true** - 対応するグリッドで行編集が有効になります。 - で `RowEditable` プロパティを true に設定し、`Editable` プロパティがどの列にも明示的に定義されていない場合、編集は*主キー*以外のすべての列で有効になります。 + で `RowEditable` プロパティを true に設定し、`Editable` プロパティがどの列にも明示的に定義されていない場合、編集は_主キー_以外のすべての列で有効になります。 @@ -61,9 +61,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - `boolean` データ型ではデフォルトのテンプレートは を使用します。 - `currency` データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の を使用します。 - `percent` パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ を使用します。 - + - カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。 - + すべての利用可能な列データ型は、公式の[列タイプトピック](column-types.md#デフォルトのテンプレート)にあります。 @@ -145,6 +145,7 @@ public onSorting(event: IgcSortingEventArgs) { grid.endEdit(true); } ``` + @@ -160,6 +161,7 @@ function SortingHandler() { grid.endEdit(true); } igRegisterScript("SortingHandler", SortingHandler, false); + ``` @@ -173,6 +175,7 @@ function onSorting(args: IgrSortingEventArgs) { <{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}> ``` + ## API リファレンス diff --git a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx index b7fafeb9db..81b9cf6007 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx @@ -306,6 +306,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { var html = window.igTemplating.html; return html`Continued` }, false); + ``` @@ -320,6 +321,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => { return html`Continued` } ``` + @@ -340,6 +342,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { <{ComponentSelector} autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter" excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}> + ``` @@ -370,6 +373,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { ``` + @@ -640,12 +644,14 @@ In order to configure the Excel style filtering component, you should set its `C + ``` ```razor add snippet for blazor ``` + @@ -672,12 +678,14 @@ add snippet for blazor + ``` ```razor Add snippet for blazor ``` + @@ -693,12 +701,14 @@ Add snippet for blazor + ``` ```razor Add snippet for blazor ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx index 775f322e19..0001e2d712 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx @@ -83,6 +83,7 @@ public exportButtonHandler() { this.excelExportService.exportData(this.localData, new ExcelExporterOptions('ExportedDataFile')); } ``` + @@ -145,6 +146,7 @@ this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventAr } }); this.excelExportService.export(this.{ComponentTitle}, new ExcelExporterOptions('ExportedDataFile')); + ``` @@ -160,6 +162,7 @@ public webGridExportEventFreezeHeaders(args: any): void { args.detail.options.freezeHeaders = true; } ``` + @@ -174,6 +177,7 @@ constructor() { public webGridExportEventFreezeHeaders(args: CustomEvent): void { args.detail.options.freezeHeaders = true; } + ``` @@ -191,6 +195,7 @@ function exportEventFreezeHeaders(args: IgrExporterEventArgs) { ``` + @@ -210,6 +215,7 @@ function exportEventFreezeHeaders(args: IgrExporterEventArgs) { igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => { ev.detail.options.freezeHeaders = false; }, false); + ``` @@ -231,6 +237,7 @@ igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => { ev.detail.options.freezeHeaders = false; }, false); ``` + @@ -267,6 +274,7 @@ this.excelExportService.export(this.{ComponentTitle}, new ExcelExporterOptions(' |ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。| |ピン固定列された列のエクスポート|エクスポートされた Excel ファイルでは、ピン固定列は固定されませんが、グリッドに表示されるのと同じ順序で表示されます。| |幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。| + ## API リファレンス diff --git a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx index 077396d183..f4891e55ed 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx @@ -122,7 +122,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## インタラクション -特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。*number* と **date** 列には、Equals がデフォルトで選択されます。*string* には 'Contains'、*boolean* には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。 +特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。_number_ と **date** 列には、Equals がデフォルトで選択されます。_string_ には 'Contains'、_boolean_ には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。 列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルター アイコンが表示されます。フィルター行を開くためにクリックできます。 @@ -204,11 +204,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - `Filter` - 単一の列または複数の列をフィルターします。 以下の 5 つのフィルタリング オペランド クラスが公開されます。 - - `FilteringOperand`: カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。 - - `BooleanFilteringOperand` は、*boolean* 型のすべてのデフォルト フィルタリング条件を定義します。 - - `NumberFilteringOperand` は、*numeric* 型のすべてのデフォルト フィルタリング条件を定義します。 - - `StringFilteringOperand` は、*string* 型のすべてのデフォルト フィルタリング条件を定義します。 - - `DateFilteringOperand` は、*date* 型のすべてのデフォルト フィルタリング条件を定義します。 +- `FilteringOperand`: カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。 +- `BooleanFilteringOperand` は、_boolean_ 型のすべてのデフォルト フィルタリング条件を定義します。 +- `NumberFilteringOperand` は、_numeric_ 型のすべてのデフォルト フィルタリング条件を定義します。 +- `StringFilteringOperand` は、_string_ 型のすべてのデフォルト フィルタリング条件を定義します。 +- `DateFilteringOperand` は、_date_ 型のすべてのデフォルト フィルタリング条件を定義します。 必要なパラメーターは列フィールド キーとフィルター用語のみです。条件および大文字と小文字の区別を設定しない場合、列プロパティで推測されます。フィルターが複数ある場合、このメソッドはフィルター式の配列を受け取ります。 @@ -252,6 +252,7 @@ priceFilteringExpressionsTree.filteringOperands.push(priceExpression); gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree); this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree; + ``` @@ -282,6 +283,7 @@ this.@@igObjectRef.clearFilter('ProductName'); // Clears the filtering state from all columns this.@@igObjectRef.clearFilter(); + ``` @@ -293,6 +295,7 @@ this.grid.clearFilter('ProductName'); // Clears the filtering state from all columns this.grid.clearFilter(); ``` + @@ -320,6 +323,7 @@ public ngAfterViewInit() { this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree; this.cdr.detectChanges(); } + ``` @@ -346,6 +350,7 @@ constructor() { this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; } ``` + @@ -385,6 +390,7 @@ constructor() { public IgbFilteringExpressionsTree filteringExpressions; } + ``` @@ -417,6 +423,7 @@ return ( ); ``` + ### フィルター ロジック @@ -434,6 +441,7 @@ return ( import { FilteringLogic } from 'igniteui-angular'; this.@@igObjectRef.filteringLogic = FilteringLogic.OR; + ``` @@ -443,6 +451,7 @@ import { FilteringLogic } from "igniteui-webcomponents-grids/grids"; this.grid.filteringLogic = FilteringLogic.OR; ``` + @@ -450,6 +459,7 @@ this.grid.filteringLogic = FilteringLogic.OR; import { FilteringLogic } from "igniteui-react-grids"; <{ComponentName} filteringLogic={FilteringLogic.Or}> + ``` @@ -610,10 +620,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand { Continued - Discontinued + + ``` @@ -634,6 +645,7 @@ constructor() { discontinued.filters = this.booleanFilteringOperand; } ``` + @@ -647,10 +659,11 @@ constructor() { True - False + + ``` @@ -663,6 +676,7 @@ constructor() { ``` + ```ts diff --git a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx index 62bfe7c694..622692e874 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx @@ -58,9 +58,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - CTRL + ↑ - アクティブな列ヘッダーを昇順にソートします。列が昇順で既にソートされている場合、ソート状態を削除します。 - CTRL + ↓ - アクティブな列ヘッダーを降順にソートします。列が降順で既にソートされている場合、ソート状態を削除します。 - SPACE - 列を選択します。列がすでに選択されている場合、選択を解除します。 - + - SHIFT + ALT + ← - 列がグループ化可能としてマークされている場合、列をグループ化します。 - + - SHIFT + ALT + → - 列がグループ化可能としてマークされている場合、列のグループ化を解除します。 - ALT + ← または ALT + ↑ - 列が縮小されていない場合、列グループ ヘッダーを縮小します。 - ALT + → または ALT + ↓ - 列がまだ展開されていない場合、列グループヘッダーを展開します。 @@ -108,29 +108,29 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - SHIFT + TAB - 編集モードのセルがある場合のみ使用できます。行の一つ前の編集可能なセルにフォーカスを移動します。行の最初のセルに達した場合、フォーカスを前の行の最後の編集可能なセルに移動します。[行編集](row-editing.md)が有効な場合、フォーカスを編集可能な一番右のセルから **[キャンセル]** および **[完了]** ボタンへ移動し、**[完了]** ボタンから行の一番右の編集可能なセルへ移動します。 - SPACE - [行の選択](row-selection.md)が有効な場合、行を選択します。 - ALT + ← または ALT + ↑ - - + グループ行はグループを縮小します。 - - + + 行アイランドを縮小します。 - - + + 現在のノードを縮小します。 - -- ALT + → または ALT + ↓ - + +- ALT + → または ALT + ↓ - グループ行はグループを展開します。 - - + + 行アイランドを展開します。 - - + + 現在のノードを展開します。 - - + + - ALT + ← または ALT + ↑ - マスター/詳細行で詳細ビューを縮小します。 - ALT + → または ALT + ↓ - マスター/詳細行で詳細ビューを展開します。 - SPACE - グループ行上 - `RowSelection` プロパティが複数に設定されている場合、グループ内のすべての行を選択します。 - + 以下のデモサンプルで上記のすべての操作を実行できます。ナビゲーション可能なグリッド要素をフォーカスすると、利用可能な操作のリストが表示されます。 @@ -140,7 +140,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; collapses the current node. -- ALT + → or ALT + ↓ - +- ALT + → or ALT + ↓ - over Group Row - expands the group. expands the row island. @@ -230,6 +230,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS } }, false); + ``` @@ -238,6 +239,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { <{ComponentSelector} id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}> ``` + ```ts @@ -265,6 +267,7 @@ const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => { // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS } } + ``` @@ -318,6 +321,7 @@ public customKeydown(args: : CustomEvent) { return; } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx index abfa3e69dc..c381a93bbd 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx @@ -71,6 +71,7 @@ public void OnStart() grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks); }, null, startTimeSpan, periodTimeSpan); } + ``` @@ -86,6 +87,7 @@ public startUpdate() { (document.getElementById('chartButton') as IgcButtonComponent).disabled = true; } ``` + @@ -99,6 +101,7 @@ const startUpdate = () => { setIsStopButtonDisabled(false); setIsChartButtonDisabled(true); } + ``` データ フィールド値の変更またはデータ オブジェクト / データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは、[複雑なデータ オブジェクト](../data-grid.md#complex-data-binding)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例: @@ -108,6 +111,7 @@ const startUpdate = () => { ``` + データ フィールド値の変更またはデータ オブジェクト/データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは[複合データ オブジェクト](../data-grid.md#複雑なデータ-バインディング)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例: @@ -182,7 +186,7 @@ As you can see the igxGrid component handles with ease the high-frequency update ### ハブ接続の開始 -signal-r.service は公開された管理可能なパラメーター - *frequency*、*volume* および *live-update 状態のトグル* (開始/停止) - の接続と更新を処理します。 +signal-r.service は公開された管理可能なパラメーター - _frequency_、_volume_ および _live-update 状態のトグル_ (開始/停止) - の接続と更新を処理します。 ```ts this.hubConnection = new signalR.HubConnectionBuilder() diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx index bbaa271705..6057a38625 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx @@ -598,6 +598,7 @@ columns と column groups 間の移動は、それらが階層内の同じレベ ``` + @@ -631,6 +632,7 @@ columns と column groups 間の移動は、それらが階層内の同じレベ }; } ``` + @@ -677,6 +679,7 @@ public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => { `; } ``` + @@ -723,6 +726,7 @@ const groupHeaderTemplate = (e: IgrColumnTemplateContext) => { return @; }; } + ``` @@ -734,6 +738,7 @@ public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => { `; } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx index 8582a3e052..4a29bcceea 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx @@ -141,6 +141,7 @@ constructor() { paginator.selectOptions = selectOptions; } ``` + @@ -151,6 +152,7 @@ const selectOptions = [5, 15, 20, 50]; + ``` @@ -174,6 +176,7 @@ const selectOptions = [5, 15, 20, 50]; ``` + 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 6e20705a08..30ab92a09e 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 @@ -86,7 +86,7 @@ The first ### Remote Virtualization Demo -{/* NOTE: this sample is differed */} +{/*NOTE: this sample is differed*/} @@ -135,6 +135,7 @@ public processData(reset) { this.cdr.detectChanges(); }); } + ``` @@ -146,6 +147,7 @@ public processData(reset) { ```razor BLAZOR CODE SNIPPET HERE ``` + @@ -224,6 +226,7 @@ BLAZOR CODE SNIPPET HERE } } } + ``` @@ -557,6 +560,7 @@ export class RemotePagingService { ); } } + ``` @@ -592,6 +596,7 @@ export class RemotePagingService { } } ``` + @@ -609,6 +614,7 @@ As Blazor Server is already a remote instance, unlike the demos in the other pla return Task.FromResult(items.Count); } ``` + @@ -641,6 +647,7 @@ export class RemoteService { return `${qS}`; } } + ``` @@ -723,6 +730,7 @@ export class RemotePagingService { return `${qS}`; } } + ``` @@ -780,6 +788,7 @@ export class RemoteService { return `${qS}`; } } + ``` @@ -815,6 +824,7 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy } } ``` + @@ -1045,6 +1055,7 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, } } } + ``` @@ -1252,6 +1263,7 @@ For further reference please check the full demo bellow: + ``` then set up the state: @@ -1293,6 +1305,7 @@ next set up the method for loading the data: }) } ``` + @@ -1329,6 +1342,7 @@ next set up the method for loading the data: const onOrdersGridCreatedHandler = (e: IgrGridCreatedEventArgs) => { gridCreated(e, "Orders") }; + ``` @@ -1467,7 +1481,7 @@ BLAZOR CODE SNIPPET HERE @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; private _perPage = 15; -private _dataLengthSubscriber: { unsubscribe: () => void; } | undefined; +private_dataLengthSubscriber: { unsubscribe: () => void; } | undefined; constructor(private remoteService: RemotePagingService) { } @@ -1490,12 +1504,14 @@ public perPageChange(perPage: number) { this.remoteService.getData(skip, top); } + ``` ```razor BLAZOR CODE SNIPPET HERE ``` + @@ -1523,12 +1539,14 @@ public ngAfterViewInit() { } ); } + ``` ```razor BLAZOR CODE SNIPPET HERE ``` + @@ -1541,12 +1559,14 @@ public paginate(page: number) { this.remoteService.getData(skip, top); } + ``` ```razor BLAZOR CODE SNIPPET HERE ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx index 795e93b8e0..6e5a58ebb1 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx @@ -34,6 +34,7 @@ import { IgxActionStripModule } from 'igniteui-angular'; imports: [..., IgxActionStripModule], }) ``` + 事前定義された操作 (actions) UI コンポーネントは次のとおりです: @@ -55,6 +56,7 @@ import { IgxActionStripModule } from 'igniteui-angular'; + ``` @@ -72,6 +74,7 @@ import { IgxActionStripModule } from 'igniteui-angular'; ``` + 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 202f4c1b09..4fd6b60420 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 @@ -46,6 +46,7 @@ import { {ComponentModule} } from 'igniteui-angular'; }) export class AppModule {} ``` + 次に、バインドしたデータ ソースに を定義をして `RowEditable` を true に設定し、編集アクションを有効にした コンポーネントを定義します。`AddRow` 入力は、行追加 UI を生成するボタンの表示状態を制御します。 @@ -65,6 +66,7 @@ export class AppModule {} + ``` @@ -83,6 +85,7 @@ export class AppModule {} ``` + @@ -99,6 +102,7 @@ export class AppModule {} + ``` @@ -117,6 +121,7 @@ export class AppModule {} ``` + @@ -172,6 +177,7 @@ export class AppModule {} + ``` @@ -188,6 +194,7 @@ export class AppModule {} ``` + @@ -229,6 +236,7 @@ export class AppModule {} + ``` @@ -271,6 +279,7 @@ export class AppModule {} ``` + @@ -311,6 +320,7 @@ export class AppModule {} + ``` @@ -372,6 +382,7 @@ export class AppModule {} ``` + @@ -586,6 +597,7 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { return @Adding Row; }; } + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx index 90b8606485..8d7778dd33 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx @@ -82,6 +82,7 @@ import { ..., IgxDragDropModule } from 'igniteui-angular'; imports: [..., IgxDragDropModule] }) ``` + @@ -110,6 +111,7 @@ export class {ComponentName}RowDragComponent { } } ``` + @@ -173,6 +175,7 @@ public dragHereTemplate = (ctx: IgcGridEmptyTemplateContext) => { return html`Drop a row to add it to the grid`; } ``` + @@ -209,12 +212,14 @@ enum DragIcon { The **changeGhostIcon** **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the **igx-grid__drag-indicator** class that is applied to the drag-indicator container), changing the element's inner text to the passed one. The icons themselves are from the [**material** font set](https://material.io/tools/icons/) and are defined in a separate **enum**: + ```typescript enum DragIcon { DEFAULT = 'drag_indicator', ALLOW = 'remove' } ``` + ```typescript @@ -227,6 +232,7 @@ enum DragIcon { Next, we have to define what should happen when the user actually drops the row inside of the drop-area. + ```typescript export class {ComponentName}RowDragComponent { @@ -252,6 +258,7 @@ export class {ComponentName}RowDragComponent { this.sourceGrid.deleteRow(args.dragData.key); } } + ``` We define a reference to each of our grids via the **ViewChild** decorator and the handle the drop as follows: @@ -276,6 +283,7 @@ export class {ComponentName}RowDragComponent { } } ``` + @@ -303,6 +311,7 @@ When using row data from the event arguments (**args.dragData.data**) or any oth ``` + @@ -319,6 +328,7 @@ constructor() { public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => { return html`arrow_right_alt`; } + ``` @@ -345,6 +355,7 @@ The drag ghost can be templated on every grid level, making it possible to have ``` + @@ -368,6 +379,7 @@ The drag ghost can be templated on every grid level, making it possible to have + ``` @@ -382,6 +394,7 @@ private RenderFragment dragIndicatorIconTemplate =
    ; }; ``` + @@ -418,6 +431,7 @@ public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => { + ``` @@ -432,6 +446,7 @@ private RenderFragment dragIndicatorIconTemplate = ; }; ``` + @@ -458,6 +473,7 @@ private RenderFragment dragIndicatorIconTemplate = flex-flow: column; width: 100%; } + ``` @@ -476,6 +492,7 @@ const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => { <{ComponentSelector} rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}> ``` + @@ -489,6 +506,7 @@ private RenderFragment dragIndicatorIconTemplate = ; }; + ``` @@ -501,6 +519,7 @@ enum DragIcon { DEFAULT = "drag_handle", } ``` + @@ -580,6 +599,7 @@ The classes applied to the row drag ghost, used in the demo above, are using ::n ``` + @@ -600,6 +620,7 @@ constructor() { hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler) } ``` + @@ -617,7 +638,7 @@ constructor() { igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const grid = document.getElementsByTagName["igc-hierarchical-grid"](0); const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -638,6 +659,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } return -1; } + ``` @@ -657,6 +679,7 @@ constructor() { tGrid.addEventListener("rowDragEnd", this.webTreeGridReorderRowHandler); } ``` + @@ -687,6 +710,7 @@ constructor() { grid.addEventListener("rowDragEnd", this.webGridReorderRowHandler) } ``` + @@ -705,7 +729,7 @@ constructor() { igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-grid")[0]; + const grid = document.getElementsByTagName["igc-grid"](0); const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -726,6 +750,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } return -1; } + ``` @@ -745,6 +770,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { [rowDraggable]="true" (rowDragStart)="rowDragStart($event)" igxDrop (dropped)="rowDrop($event)"> ``` + @@ -777,7 +803,7 @@ Below, you can see this implemented: public webGridReorderRowHandler(args: CustomEvent): void { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-grid")[0] as any; + const grid = document.getElementsByTagName["igc-grid"](0) as any; const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -798,6 +824,7 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) { } return -1; } + ``` @@ -827,6 +854,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition) => { return -1; } ``` + @@ -897,6 +925,7 @@ export class TreeGridRowReorderComponent { return null; } } + ``` @@ -1014,6 +1043,7 @@ public webTreeGridReorderRowStartHandler(args: CustomEvent @@ -1131,6 +1161,7 @@ export class HGridRowReorderComponent { } } } + ``` @@ -1162,6 +1193,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition: any) => { return -1; } ``` + @@ -1169,7 +1201,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition: any) => { public webGridReorderRowHandler(args: CustomEvent): void { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0] as any; + const grid = document.getElementsByTagName["igc-hierarchical-grid"](0) as any; const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -1200,7 +1232,7 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) { igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const grid = document.getElementsByTagName["igc-hierarchical-grid"](0); const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); const currRowIndex = this.getCurrentRowIndex(rows, { x: dragElementPos.x, y: dragElementPos.y }); @@ -1221,6 +1253,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } return -1; } + ``` 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 883ed8de74..b3bc3c0d96 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 @@ -91,6 +91,7 @@ public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => { return html``; } ``` + @@ -111,6 +112,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { + ``` @@ -144,6 +146,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { } } ``` + @@ -175,6 +178,7 @@ constructor() { grid.data = this.data; } ``` + @@ -255,6 +259,7 @@ constructor() { grid.data = this.data; } ``` + @@ -410,6 +415,7 @@ RowEditable="true"> ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx index a9926ff223..fa31529ecc 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx @@ -167,6 +167,7 @@ public rowPinning(event) { event.detail.insertAtIndex = 0; } ``` + @@ -178,6 +179,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => { <{ComponentSelector} autoGenerate={true} onRowPinning={rowPinning}> + ``` @@ -191,6 +193,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => { <{ComponentSelector} autoGenerate={true} onRowPinning={rowPinning}> ``` + @@ -219,6 +222,7 @@ Bottom に設定すると、行がピン固定されていない行の後に、 ```typescript public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom }; ``` + @@ -230,6 +234,7 @@ public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom }; var grid = document.getElementById('dataGrid') as {ComponentName}Component; grid.pinning = { rows: RowPinningPosition.Bottom }; ``` + @@ -264,6 +269,7 @@ const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom }; <{ComponentSelector} ref={gridRef} autoGenerate={true} pinning={pinning}> + ``` @@ -296,6 +302,7 @@ igRegisterScript("WebGridRowPinCellTemplate", (ctx) => { `; }, false); ``` + @@ -348,6 +355,7 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => { return html` this.togglePinning(index)}>📌`; } ``` + @@ -365,6 +373,7 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => { + ``` @@ -388,6 +397,7 @@ igRegisterScript("WebHierarchicalGridRowPinCellTemplate", (ctx) => { `; }, false); ``` + @@ -444,6 +454,7 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => { return html` this.togglePinning(row)}>📌`; } ``` + @@ -462,6 +473,7 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => { + ``` @@ -475,6 +487,7 @@ public togglePinning(index: number) { grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned; } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx index 98f5bdba63..d8f8a4bedf 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx @@ -93,6 +93,7 @@ public handleRowSelection(args: IgcRowSelectionEventArgs) { } } ``` + @@ -105,6 +106,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { <{ComponentSelector} rowSelection="single" autoGenerate={true} allowFiltering={true} onRowSelectionChanging={handleRowSelection}> + ``` @@ -127,6 +129,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { } } ``` + ### 複数選択 @@ -247,6 +250,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { + ``` @@ -271,6 +275,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { } } ``` + @@ -282,6 +287,7 @@ auto-generate="true"> + ``` ```ts @@ -293,6 +299,7 @@ public onClickSelect() { grid.selectRows([1,2,5], true); } ``` + @@ -304,6 +311,7 @@ function onClickSelect() { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}> + ``` @@ -323,6 +331,7 @@ function onClickSelect() { ``` + @@ -357,6 +366,7 @@ auto-generate="true"> + ``` ```ts @@ -368,6 +378,7 @@ public onClickDeselect() { grid.deselectRows([1,2,5]); } ``` + @@ -379,6 +390,7 @@ function onClickDeselect() { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}> + ``` @@ -402,6 +414,7 @@ function onClickDeselect() { <{ComponentSelector} (rowSelectionChanging)="handleRowSelectionChange($event)"> ``` + @@ -421,6 +434,7 @@ public handleRowSelectionChange(args) { args.detail.cancel = true; // this will cancel the row selection } ``` + @@ -431,6 +445,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => { <{ComponentSelector} onRowSelectionChanging={handleRowSelectionChange}> + ``` @@ -453,11 +468,12 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => { } } ``` + ### すべての行の選択 - が提供するもう 1 つの便利な API メソッドが です。このメソッドはデフォルトですべてのデータ行を選択しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみが選択されます。ただし、*false* パラメーターを指定してメソッドを呼び出すと、`SelectAllRows(false)` は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータを選択します。 + が提供するもう 1 つの便利な API メソッドが です。このメソッドはデフォルトですべてのデータ行を選択しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみが選択されます。ただし、_false_ パラメーターを指定してメソッドを呼び出すと、`SelectAllRows(false)` は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータを選択します。 > **注:** `SelectAllRows` は削除された行を選択しないことに注意してください。 @@ -541,6 +557,7 @@ const mySelectedRows = [1,2,3]; <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={false} selectedRows={mySelectedRows}> + ``` @@ -561,6 +578,7 @@ const mySelectedRows = [1,2,3]; public object[] selectedRows = new object[] { 1, 2, 5 }; } ``` + ### 行セレクターのテンプレート @@ -651,6 +669,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" rowSelectorTemplate={rowSelectorTemplate}> + ``` @@ -662,6 +681,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { ``` + @@ -786,6 +806,7 @@ public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => { } return html``; } + ``` @@ -817,6 +838,7 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => { <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} headSelectorTemplate={headSelectorTemplate}> ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx index 89a35a2dea..6b6ae5325a 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx @@ -71,6 +71,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; this.marketData = MarketData.GetData(); } } + ``` @@ -85,6 +86,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ``` + @@ -132,6 +134,7 @@ constructor() { this.treeGrid.data = new EmployeesFlatData(); } ``` + @@ -183,6 +186,7 @@ public exactMatch: boolean = false; private caseSensitiveChip: IgcChipComponent; private exactMatchChip: IgcChipComponent; + ``` @@ -193,6 +197,7 @@ public string searchText = ""; public bool caseSensitive = false; public bool exactMatch = false; ``` + @@ -218,6 +223,7 @@ private prevIconButton: IgcIconButtonComponent; private caseSensitiveChip: IgcChipComponent; private exactMatchChip: IgcChipComponent; + ``` @@ -229,6 +235,7 @@ public string searchText = ""; public bool caseSensitive = false; public bool exactMatch = false; ``` + @@ -275,6 +282,7 @@ const [searchText, setSearchText] = useState(''); + ``` @@ -282,6 +290,7 @@ const [searchText, setSearchText] = useState(''); ```razor ``` + @@ -301,6 +310,7 @@ public nextSearch(){ this.grid.findNext(this.searchBox.value, false, false); } ``` + @@ -334,6 +344,7 @@ public nextSearch() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -344,6 +355,7 @@ public void NextSearch() { this.treeGrid.FindNext(this.searchText, this.caseSensitive, this.exactMatch); } + ``` @@ -357,6 +369,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { ``` + @@ -416,6 +429,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` @@ -440,6 +454,7 @@ public nextSearch() { this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -466,6 +481,7 @@ public nextSearch() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -490,6 +506,7 @@ public nextSearch() { this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` @@ -516,6 +533,7 @@ public nextSearch() { } } ``` + ### キーボード検索の追加 @@ -539,6 +557,7 @@ public searchKeyDown(ev) { } } ``` + @@ -567,6 +586,7 @@ public onSearchKeydown(evt: KeyboardEvent) { } } ``` + @@ -606,6 +626,7 @@ We can also allow the users to navigate the results by using the keyboard's @@ -637,6 +658,7 @@ public onSearchKeydown(evt: KeyboardEvent) { } } ``` + @@ -682,6 +704,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch); } } + ``` @@ -713,6 +736,7 @@ public updateExactSearch() { this.@@igObjectRef.findNext(this.searchText, this.caseSensitive, this.exactMatch); } ``` + @@ -743,6 +767,7 @@ public updateSearch() { grid.findNext(search1.value, case.checked, exact.checked); } ``` + @@ -768,6 +793,7 @@ constructor() { }); } ``` + @@ -783,6 +809,7 @@ constructor() { Exact match + ``` @@ -805,6 +832,7 @@ public updateSearch() { grid.findNext(search1.value, case.checked, exact.checked); } ``` + ### 保持 @@ -835,6 +863,7 @@ import { imports: [IgxInputGroupModule, IgxIconModule, IgxRippleModule, IgxButtonModule, IgxChipsModule], }) export class AppModule {} + ``` @@ -844,6 +873,7 @@ import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent); ``` + @@ -933,6 +963,7 @@ builder.Services.AddIgniteUIBlazor( } } } + ``` @@ -951,6 +982,7 @@ builder.Services.AddIgniteUIBlazor( ``` + @@ -966,6 +998,7 @@ constructor() { registerIconFromText("clear", clearIconText, "material"); registerIconFromText("search", searchIconText, "material"); } + ``` @@ -992,6 +1025,7 @@ We will wrap all of our components inside an `Input`. On the left we will toggle ``` + @@ -1021,6 +1055,7 @@ public clearSearch() { this.icon.name = 'search'; this.treeGrid.clearSearch(); } + ``` @@ -1042,6 +1077,7 @@ public clearSearch() { ``` + @@ -1104,6 +1140,7 @@ constructor() { registerIconFromText("clear", clearIconText, "material"); registerIconFromText("search", searchIconText, "material"); } + ``` @@ -1150,6 +1187,7 @@ constructor() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail); }); } + ``` @@ -1183,6 +1221,7 @@ public clearSearch() { this.treeGrid.clearSearch(); } ``` + - 以下は `CaseSensitive` と `ExactMatch` プロパティを切り替えるチップを表示する方法です。チェックボックスの代わりにスタイリッシュなチップを 2 つ表示します。チップをクリックすると、どちらのチップがクリックされたかによって各ハンドラーを呼び出します。 @@ -1225,6 +1264,7 @@ public clearSearch() { this.grid.ClearSearchAsync(); } } + ``` @@ -1260,6 +1300,7 @@ public nextSearch() { public prevSearch() { this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } + ``` @@ -1273,6 +1314,7 @@ public nextSearch() { this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` + @@ -1315,6 +1357,7 @@ public showResults() { Exact Match ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx index d13cdb61ef..e091d7b29a 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx @@ -205,6 +205,7 @@ const rightClick = (event: IgrGridContextMenuEventArgs) => { this.ShowMenu = true; this.ClickedCell = detail.Cell; } + ``` @@ -276,6 +277,7 @@ public copySelectedCells(event) { document.execCommand('copy'); document.body.removeChild(tempElement); } + ``` @@ -315,6 +317,7 @@ const copyData = (data: any[]) => { setSelectedData(dataStringified); }; ``` + @@ -342,6 +345,7 @@ const copyData = (data: any[]) => { this.SelectedData = JsonConvert.SerializeObject(selectedData); StateHasChanged(); } + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx index 38e00f668f..dc45557e6b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx @@ -824,6 +824,7 @@ public selectSize(event: any) { protected get sizeStyle() { return `var(--ig-size-${this.size})`; } + ``` @@ -857,6 +858,7 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); } ``` + @@ -910,6 +912,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio var grid = document.getElementById("grid"); grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); } + ``` @@ -923,7 +926,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio <{ComponentSelector} #grid class="gridSize" width="100%" height="550px" [data]="data" [rowHeight]="'80px'" [allowFiltering]="true"> ``` - + ```razor <{ComponentSelector} @@ -942,6 +945,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio <{ComponentSelector} #grid class="gridSize" width="100%" height="550px" [data]="data" [rowHeight]="'80px'" [allowFiltering]="true"> ``` + @@ -960,6 +964,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio @code { private string rowHeight = "80px"; } + ``` @@ -968,6 +973,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio <{ComponentSelector} id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true"> ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx index 2f4ac56949..7ed29be420 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx @@ -23,7 +23,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、gropuing を sorting から切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。 +これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、grouping を sorting から切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。 @@ -108,6 +108,7 @@ this.grid.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -123,6 +124,7 @@ this.grid.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + @@ -155,6 +157,7 @@ gridRef.current.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -172,6 +175,7 @@ this.treeGrid.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + @@ -185,6 +189,7 @@ this.treeGrid.sort([ { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -206,6 +211,7 @@ this.treeGrid.sort([ }); } ``` + @@ -218,6 +224,7 @@ treeGridRef.current.sort([ { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -235,6 +242,7 @@ this.hierarchicalGrid.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + @@ -248,6 +256,7 @@ this.hierarchicalGrid.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -269,6 +278,7 @@ this.hierarchicalGrid.sort([ }); } ``` + @@ -282,6 +292,7 @@ hierarchicalGridRef.current.sort([ { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, { fieldName: 'Price', dir: SortingDirection.Desc } ]); + ``` @@ -301,6 +312,7 @@ this.grid.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} this.grid.clearSort(); ``` + @@ -310,6 +322,7 @@ gridRef.current.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} gridRef.current.clearSort(); + ``` @@ -323,6 +336,7 @@ gridRef.current.clearSort(); this.grid.ClearSortAsync(""); } ``` + @@ -334,6 +348,7 @@ this.treeGrid.clearSort('Category'); // Removes the sorting state from every column in the {ComponentTitle} this.treeGrid.clearSort(); + ``` @@ -345,6 +360,7 @@ treeGridRef.current.clearSort('Category'); // Removes the sorting state from every column in the {ComponentTitle} treeGridRef.current.clearSort(); ``` + @@ -356,6 +372,7 @@ treeGridRef.current.clearSort(); @*Removes the sorting state from every column in the Grid*@ this.treeGrid.ClearSortAsync(""); } + ``` @@ -369,6 +386,7 @@ this.hierarchicalGrid.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} this.hierarchicalGrid.clearSort(); ``` + @@ -378,6 +396,7 @@ hierarchicalGridRef.current.clearSort('ProductName'); // Removes the sorting state from every column in the {ComponentTitle} hierarchicalGridRef.current.clearSort(); + ``` @@ -391,6 +410,7 @@ hierarchicalGridRef.current.clearSort(); this.hierarchicalGrid.ClearSortAsync(""); } ``` + @@ -459,6 +479,7 @@ const sortingExpressions: IgrSortingExpression[] = [ data={productSales} sortingExpressions={sortingExpressions}> + ``` @@ -473,6 +494,7 @@ public ngOnInit() { ]; } ``` + @@ -516,6 +538,7 @@ const sortingExpressions: IgrSortingExpression[] = [ data={productSales} sortingExpressions={sortingExpressions}> + ``` @@ -530,6 +553,7 @@ public ngOnInit() { ]; } ``` + @@ -603,6 +627,7 @@ The supports rem unfold_more ``` + - – re-templates the sorting icon when no sorting is applied. @@ -618,6 +643,7 @@ The supports rem return @; }; } + ``` @@ -634,6 +660,7 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { return html``; } ``` + @@ -648,6 +675,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { } <{ComponentSelector} sortHeaderIconTemplate={sortHeaderIconTemplate}> + ``` @@ -676,6 +704,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { return @; }; } + ``` @@ -692,6 +721,7 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + @@ -706,6 +736,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { } <{ComponentSelector} sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}> + ``` @@ -734,6 +765,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { return @; }; } + ``` @@ -750,6 +782,7 @@ public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + @@ -764,6 +797,7 @@ const sortDescendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => } <{ComponentSelector} sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}> + ``` @@ -809,6 +843,7 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { - `IgxSortAscendingHeaderIconDirective` – 列が昇順にソートされたときにソート アイコンを再テンプレート化します。 - `SortAscendingHeaderIconTemplate` – 列が昇順にソートされたときにソート アイコンを再テンプレート化します。 + ```tsx const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { return ( @@ -820,18 +855,22 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { <{ComponentSelector} sortHeaderIconTemplate={sortHeaderIconTemplate}> ``` + - `IgxSortDescendningHeaderIconDirective` – 列が降順でソートされたときにソート アイコンを再テンプレート化します。 - `SortDescendingHeaderIconTemplate` – 列が降順にソートされたときにソート アイコンを再テンプレート化します。 + ```html expand_less ``` + $custom-theme: grid-theme( $sorted-header-icon-color: color($custom-palette, "secondary", 500), $sortable-header-icon-hover-color: color($custom-palette, "primary", 500) ); + ```razor <{ComponentSelector} SortAscendingHeaderIconTemplate="SortAscendingTemplate"> @@ -842,6 +881,7 @@ $custom-theme: grid-theme( }; } ``` + // Extending the light grid schema $custom-grid-schema: extend($_light-grid, ( @@ -849,6 +889,7 @@ $custom-grid-schema: extend($_light-grid, sortable-header-icon-hover-color: (igx-color:('primary', 500)) ) ); + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -860,6 +901,7 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + // Extending the global light-schema $my-custom-schema: extend($light-schema, ( @@ -872,6 +914,7 @@ $custom-theme: grid-theme( $palette: $custom-palette, $schema: $my-custom-schema ); + ```tsx const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { return ( @@ -883,6 +926,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { <{ComponentSelector} sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}> ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx index 15eec9d304..3a569b2fc5 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx @@ -123,6 +123,7 @@ const gridState: IGridState = state.getState(false); // get the sorting and filtering expressions const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']); + ``` @@ -146,6 +147,7 @@ const stateString: string = gridState.getStateAsString(); // get the sorting and filtering expressions const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']); ``` + @@ -170,6 +172,7 @@ const stateString: string = gridStateRef.current.getStateAsString([]); // get the sorting and filtering expressions const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']); + ``` @@ -180,6 +183,7 @@ const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState([ ``` + @@ -210,6 +214,7 @@ const stateString: string = gridState.getStateAsString(); // get the sorting and filtering expressions const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']); + ``` @@ -219,6 +224,7 @@ const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', ``` + @@ -231,6 +237,7 @@ const stateString: string = gridStateRef.current.getStateAsString([]); // get the sorting and filtering expressions const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']); + ``` @@ -248,6 +255,7 @@ const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState([ string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" }); } ``` + @@ -273,6 +281,7 @@ gridState.applyState(gridState); gridState.applyStateFromString(gridStateString); gridState.applyState(sortingFilteringStates) ``` + @@ -358,6 +367,7 @@ const restoreGridState = () => { gridStateRef.current.applyStateFromString(state, []); } } + ``` @@ -366,6 +376,7 @@ const restoreGridState = () => { ```typescript gridState.options = { cellSelection: false, sorting: false }; ``` + @@ -414,6 +425,7 @@ constructor() { public activeTemplate = (ctx: IgcCellTemplateContext) => { return html``; } + ``` @@ -424,6 +436,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { ``` + @@ -449,6 +462,7 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) { return @; }; } + ``` @@ -462,6 +476,7 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) { ``` + @@ -492,6 +507,7 @@ constructor() { public activeTemplate = (ctx: IgcCellTemplateContext) => { return html``; } + ``` @@ -511,6 +527,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { }; } ``` + @@ -552,6 +569,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { return html``; } ``` + @@ -565,6 +583,7 @@ public onColumnInit(column: IgxColumnComponent) { } } ``` + @@ -767,9 +786,9 @@ const totalSale = (members, data) => { const totalMin = (members, data) => { let min = 0; if (data.length === 1) { - min = data[0].ProductUnitPrice * data[0].NumberOfUnits; + min = data[0].ProductUnitPrice *data[0].NumberOfUnits; } else if (data.length > 1) { - const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + const mappedData = data.map(x => x.ProductUnitPrice* x.NumberOfUnits); min = mappedData.reduce((a, b) => Math.min(a, b)); } return min; @@ -778,9 +797,9 @@ const totalMin = (members, data) => { const totalMax = (members, data) => { let max = 0; if (data.length === 1) { - max = data[0].ProductUnitPrice * data[0].NumberOfUnits; + max = data[0].ProductUnitPrice *data[0].NumberOfUnits; } else if (data.length > 1) { - const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + const mappedData = data.map(x => x.ProductUnitPrice* x.NumberOfUnits); max = mappedData.reduce((a, b) => Math.max(a, b)); } return max; @@ -805,6 +824,7 @@ igRegisterScript("OnValueInit", (args) => { }); } }, false); + ``` @@ -830,6 +850,7 @@ public onDimensionInit(dim: IPivotDimension) { } } ``` + @@ -901,6 +922,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; RowIslands = true }; } + ``` @@ -912,6 +934,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; ```typescript this.state.applyState(state, ['filtering', 'rowIslands']); ``` + @@ -926,6 +949,7 @@ Then the API will ret ```razor gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" }); ``` + @@ -966,6 +990,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { filters: [...] }; ``` + @@ -1037,6 +1062,7 @@ public stateParsedHandler(ev: any) { parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance(); parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance(); } + ``` @@ -1045,6 +1071,7 @@ public stateParsedHandler(ev: any) { ```razor Add snippet for blazor for restore state ``` + @@ -1065,6 +1092,7 @@ Add snippet for blazor for restore state [igxGridState]="options" [sortStrategy]="customStrategy" [showPivotConfigurationUI]='false' [superCompactMode]="true" [height]="'500px'"> ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx index a20105829c..b89caabbff 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx @@ -263,6 +263,7 @@ constructor() { disableBtn.addEventListener("click", this.disableSummary); } ``` + @@ -301,6 +302,7 @@ const disableSummary = () => { + ``` @@ -318,6 +320,7 @@ const disableSummary = () => { ``` + @@ -343,6 +346,7 @@ constructor() { disableBtn.addEventListener("click", this.disableSummary); } ``` + @@ -376,6 +380,7 @@ public disableSummary() { await this.hierarchicalGrid.DisableSummariesAsync(disabledSummaries); } } + ``` @@ -401,6 +406,7 @@ const disableSummary = () => { ``` + @@ -444,6 +450,7 @@ constructor() { disableBtn.addEventListener("click", this.disableSummary); } ``` + @@ -475,6 +482,7 @@ public disableSummary() { await this.treeGrid.DisableSummariesAsync(disabledSummaries); } } + ``` @@ -498,6 +506,7 @@ const disableSummary = () => { ``` + @@ -530,6 +539,7 @@ class MySummary extends IgxNumberSummaryOperand { return result; } } + ``` @@ -553,6 +563,7 @@ class MySummary extends IgcNumberSummaryOperand { } } ``` + @@ -587,6 +598,7 @@ class WebGridDiscontinuedSummary { return result; } } + ``` @@ -628,6 +640,7 @@ class PtoSummary { } } ``` + @@ -699,6 +712,7 @@ constructor() { unitsInStock.summaries = this.mySummary; } ``` + @@ -727,6 +741,7 @@ igRegisterScript("WebGridCustomSummary", (event) => { event.detail.summaries = WebGridDiscontinuedSummary; } }, false); + ``` @@ -743,6 +758,7 @@ And now let's add our custom summary to the column `GrammyAwards`. We will achie ``` + @@ -764,6 +780,7 @@ constructor() { grammyAwards.summaries = this.mySummary; } ``` + @@ -791,6 +808,7 @@ igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { event.detail.summaries = WebHierarchicalGridSummary; } }, false); + ``` @@ -807,6 +825,7 @@ And now let's add our custom summary to the column `Title`. We will achieve that ``` + @@ -826,6 +845,7 @@ constructor() { column1.summaries = this.mySummary; } ``` + ```typescript @@ -851,6 +871,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { event.detail.summaries = PtoSummary; } }, false); + ``` @@ -876,6 +897,7 @@ class MySummary extends IgxNumberSummaryOperand { } } ``` + @@ -1011,10 +1033,11 @@ constructor() { public summaryTemplate = (ctx: IgcSummaryTemplateContext) => { return html` - My custom summary template + My custom summary template ${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult } `; } + ``` @@ -1031,6 +1054,7 @@ const summaryTemplate = (ctx: IgrSummaryTemplateContext) => { ``` + @@ -1131,6 +1155,7 @@ igRegisterScript("SummaryTemplate", (ctx) => { summaries={discontinuedSummary} disabledSummaries={['discontinued', 'totalDiscontinued']} /> + ``` @@ -1153,6 +1178,7 @@ igRegisterScript("SummaryTemplate", (ctx) => { Summaries="discontinuedSummary" DisabledSummaries="['discontinued', 'totalDiscontinued']" /> ``` + @@ -1233,6 +1259,7 @@ igRegisterScript("SummaryFormatter", (summary) => { } return result; }, true); + ``` @@ -1249,6 +1276,7 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO ``` + @@ -1447,10 +1475,12 @@ If the component is using an [Emulated](../themes/styles.md#view-encapsulation) --ig-grid-summary-result-color: black; } ``` + $blue-color: #7793b1; $green-color: #00ff2d; $my-custom-palette: palette($primary: $blue-color, $secondary: $green-color); + ``` And then with [igx-color]({environment:sassApiUrl}/index.html#function-igx-color) we can easily retrieve color from the palette. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx index fc2c64a203..32b26bbc6c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx @@ -422,6 +422,7 @@ This will make sure you always have the correct grid instance in the scope of yo ``` + @@ -448,6 +449,7 @@ public rowIslandToolbarTemplate = () => { `; } + ``` ```html @@ -457,6 +459,7 @@ public rowIslandToolbarTemplate = () => { ``` + @@ -481,6 +484,7 @@ igRegisterScript("RowIslandToolbarTemplate", () => { `; }, false); + ``` @@ -646,6 +650,7 @@ IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動 ``` + @@ -666,6 +671,7 @@ constructor() { hideTool.overlaySettings = this.overlaySettingsAuto; } ``` + @@ -692,6 +698,7 @@ public overlaySettingsAuto = { constructor() { this.data = athletesData; } + ``` 以下にリストされているのは、ツールバーの主な機能と、それぞれのサンプル コードです。 @@ -718,6 +725,7 @@ constructor() { ``` + @@ -1000,6 +1008,7 @@ constructor() { toolbarExporter.addEventListener("toolbarExporting", this.configureExport); } ``` + @@ -1016,6 +1025,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { <{ComponentSelector} onToolbarExporting={configureExport}> + ``` @@ -1046,6 +1056,7 @@ configureExport(args: IGridToolbarExportEventArgs) { }); } ``` + @@ -1059,6 +1070,7 @@ public configureExport(evt: CustomEvent) { columnArgs.cancel = columnArgs.header === 'Athlete' || columnArgs.header === 'Country'; }); } + ``` @@ -1066,6 +1078,7 @@ public configureExport(evt: CustomEvent) { ```razor ``` + @@ -1107,6 +1120,7 @@ public configureExport(evt: CustomEvent) { } } ``` + @@ -1123,6 +1137,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { <{ComponentSelector} onToolbarExporting={configureExport}> + ``` @@ -1140,6 +1155,7 @@ igRegisterScript("ConfigureExport", (evt) => { }); }, false); ``` + @@ -1166,6 +1182,7 @@ public configureExport(evt: CustomEvent) { } } ``` + @@ -1182,6 +1199,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { <{ComponentSelector} onToolbarExporting={configureExport}> + ``` @@ -1199,6 +1217,7 @@ igRegisterScript("ConfigureExport", (evt) => { }); }, false); ``` + @@ -1251,6 +1270,7 @@ This replaces the old toolbar template directive. If you are migrating from a ve + ``` @@ -1270,6 +1290,7 @@ This replaces the old toolbar template directive. If you are migrating from a ve ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx index 08aa86a14e..0809c0276e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx @@ -84,6 +84,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; requiredDateRecord.addValidators(this.pastDateValidator()); shippedDateRecord.addValidators(this.pastDateValidator()); } + ``` @@ -95,6 +96,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; hireDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]); } ``` + 独自の検証関数を作成するか、[組み込みの {Platform} 検証関数](https://{Platform}.io/guide/form-validation#built-in-validator-functions)を使用できます。 @@ -249,6 +251,7 @@ public calculateDealsRatio(dealsWon, dealsLost) { if (dealsLost === 0) return dealsWon + 1; return Math.round(dealsWon / dealsLost * 100) / 100; } + ``` @@ -262,6 +265,7 @@ The cross-field validator can be added to the + ```ts public rowStyles = { background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000' @@ -585,6 +590,7 @@ public cellStyles = { <{ComponentInstance} [rowStyles]="rowStyles"> ``` + @@ -640,6 +646,7 @@ public cellStyles = { ``` + ### デモ diff --git a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx index 84ed609082..bc0506221e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx @@ -36,8 +36,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; データのサイズは以下によって決定されます。 -- 垂直 (行) 仮想化の行の高さ。`RowHeight` オプションで決定されますがデフォルトは 50(px) です。 -- 水平 (列) 仮想化の列幅 (ピクセル単位)。各列コンポーネントで明示的に幅を設定、または明示的に幅が設定されないすべての列に適用する の `ColumnWidth` オプションを設定できます。 +- 垂直 (行) 仮想化の行の高さ。`RowHeight` オプションで決定されますがデフォルトは 50(px) です。 +- 水平 (列) 仮想化の列幅 (ピクセル単位)。各列コンポーネントで明示的に幅を設定、または明示的に幅が設定されないすべての列に適用する の `ColumnWidth` オプションを設定できます。 ディメンションを設定せずにグリッドでデフォルト動作を適用する場合、ほとんどの場合は望ましいレイアウトになります。列幅は列カウント、幅が設定された列、および コンテナの計算幅に基づいて決定されます。グリッドは、割り当てる幅が 136px 未満になる以外はすべての列を利用可能なスペースに合わせようとします。その場合、割り当てられない幅を持つ列は 136px の最小幅に設定され、水平方向スクロールバーが表示されます。グリッドは水平方向に仮想化されます。 @@ -92,7 +92,7 @@ igRegisterScript("CellTemplate", (ctx) => { ## 仮想化の制限 -- Mac OS で 「Show scrollbars only when scrolling」システム オプションを true (デフォルト値) に設定した場合、水平スクロールバーが表示されません。これは、 の行コンテナーで、overflow が hidden に設定されているためです。オプションを「Always」に変更するとスクロールが表示されます。 +- Mac OS で 「Show scrollbars only when scrolling」システム オプションを true (デフォルト値) に設定した場合、水平スクロールバーが表示されません。これは、 の行コンテナーで、overflow が hidden に設定されているためです。オプションを「Always」に変更するとスクロールが表示されます。 ## FAQ diff --git a/docs/xplat/src/content/jp/components/grids/data-grid.mdx b/docs/xplat/src/content/jp/components/grids/data-grid.mdx index 0f5270a79c..e3f2747289 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid.mdx @@ -186,6 +186,7 @@ Or to link it: ```typescript ``` + For more details on how to customize the appearance of the grid, you may have a look at the [styling](data-grid.md#styling-{PlatformLower}-grid) section. @@ -208,6 +209,7 @@ For more details on how to customize the appearance of the grid, you may have a // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule)); + ``` @@ -227,6 +229,7 @@ import { IgxGridModule } from 'igniteui-angular'; }) export class AppModule {} ``` + @@ -1383,6 +1386,7 @@ and in the template of the component: ``` + これを行うには、JSON 応答を受信して指定された URL からデータを取得し、それをグリッドのデータ ソースとして使用されるグリッドの `data` プロパティに割り当てます。 @@ -2328,9 +2332,6 @@ igRegisterScript("AddressEditCellTemplate", (ctx) => { - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx index 15f172b343..f3379fd77c 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx @@ -78,6 +78,7 @@ idColumn.isFilteringEnabled="false"; //adjust sorting this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; + ``` diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx index 3324bf3d6f..4708226392 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx @@ -164,6 +164,7 @@ public onButtonUnPin = (e: any) => { this.grid.pinColumn(cityColumn, PinnedPositions.None); this.grid.pinColumn(countryColumn, PinnedPositions.None); } + ``` @@ -268,6 +269,7 @@ onButtonUnPin() { this.grid.pinColumn(cityColumn, PinnedPositions.None); this.grid.pinColumn(countryColumn, PinnedPositions.None); } + ``` diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx index e3f9a37475..8afefc7483 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx @@ -64,6 +64,7 @@ public componentDidMount() { // ... this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; } + ``` diff --git a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx index d67562d2df..ea46624ce1 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx @@ -36,7 +36,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - @@ -121,6 +120,7 @@ public get textArea() { return this.txtArea; } ``` + @@ -159,6 +159,7 @@ public get textArea() { } return this.txtArea; } + ``` @@ -215,6 +216,7 @@ function getTextArea() { } ``` + このコードはクリップボードから貼り付けられたデータを受け取るための DOM textarea 要素を作成します。コードは textarea に貼り付けられたデータが配列に解析します。 @@ -259,6 +261,7 @@ public processData(data: any) { } return pasteData; } + ``` @@ -302,6 +305,7 @@ function processData(data) { return pasteData; } ``` + 貼り付けたデータは、新しいレコードとして追加したり、ユーザーの選択に基づいて既存のレコードを更新するために使用したりすることができます。 @@ -387,6 +391,7 @@ public updateRecords(processedData: any[]) { } } } + ``` @@ -458,6 +463,7 @@ function updateRecords(processedData) { index++; } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/grids-header.mdx b/docs/xplat/src/content/jp/components/grids/grids-header.mdx index fbaa4adb2d..e266f69ead 100644 --- a/docs/xplat/src/content/jp/components/grids/grids-header.mdx +++ b/docs/xplat/src/content/jp/components/grids/grids-header.mdx @@ -457,7 +457,7 @@ h3#excel-library-for-the-angular-grid ~ h3{ [リアルタイム/ライブ データのテーマ](grid/live-data.md) - +
  • [グリッド ページング](grid/paging.md) @@ -480,13 +480,13 @@ h3#excel-library-for-the-angular-grid ~ h3{ [グリッド レベルの検索](grid/search.md)
    • - +
  • [複数列ヘッダー](grid/multi-column-headers.md)
    • - +
  • [仮想化とパフォーマンス](grid/virtualization.md) @@ -503,8 +503,8 @@ h3#excel-library-for-the-angular-grid ~ h3{ [列の非表示](grid/column-hiding.md)
    • - - + + @@ -611,7 +611,7 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ 行の高さとサイズ変更を調整する[サイズ](grid/size.md) - + diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx index aa86d3d70b..31e4dfe1f7 100644 --- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx @@ -97,6 +97,7 @@ You also need to include the following import to use the grid: ```typescript import 'igniteui-webcomponents-grids/grids/combined.js'; ``` + 階層グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定](overview.md#スタイル設定)セクションを参照してください。 @@ -119,6 +120,7 @@ Or to link it: ```typescript ``` + For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](overview.md#Styling) section. @@ -133,6 +135,7 @@ For more details on how to customize the appearance of the hierarchical grid, yo // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule)); + ``` @@ -152,6 +155,7 @@ import { IgxhierarchicalGridModule } from 'igniteui-angular'; }) export class AppModule {} ``` + @@ -846,7 +850,9 @@ $custom-palette: palette( $secondary: $yellow-color ); ``` + カスタム パレットが生成された後、`igx-color` 関数を使用して、さまざまな種類の原色と二次色を取得できます。 + ```scss $custom-theme: grid-theme( $cell-active-border-color: (igx-color($custom-palette, "secondary", 500)), @@ -865,6 +871,7 @@ $custom-theme: grid-theme( ### カスタム スキーマの定義 [**schema**](../themes/sass/schemas.md) のすべての利点を備えた柔軟な構造を構築できます。**schema** はテーマを作成させるための方法です。 すべてのコンポーネントに提供される 2 つの事前定義されたスキーマのいずれかを拡張します。この場合、`$_light_grid` を使用します。 + ```scss $custom-grid-schema: extend($_light-grid,( cell-active-border-color: (igx-color:('secondary', 500)), @@ -879,7 +886,9 @@ $custom-grid-schema: extend($_light-grid,( row-highlight: (igx-color:('secondary', 500)) )); ``` + カスタム スキーマを適用するには、`light` グローバルまたは `dark` グローバルを拡張する必要があります。プロセス全体が実際にコンポーネントにカスタム スキーマを提供し、その後、それぞれのコンポーネントテーマに追加します。 + ```scss $my-custom-schema: extend($light-schema, ( igx-grid: $custom-grid-schema diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx index a60c6ba08b..bb151bbeb3 100644 --- a/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx +++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx @@ -34,7 +34,6 @@ import ApiRef from 'igniteui-astro-components/components/mdx/ApiRef.astro'; - @@ -103,6 +102,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { ] } ``` + @@ -156,6 +156,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { ] } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx index ccee30fdbd..7f6d2b1063 100644 --- a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx @@ -827,6 +827,7 @@ Blazor で `PivotKeys` をオーバーライドする場合、新しい PivotKey | 列を宣言的に設定することはサポートされていません。 | ピボット グリッドは `Columns` (列) の構成に基づいて列を生成するため、ベース グリッドのように宣言的に設定することはサポートされていません。このような列は無視されます。 | | ディメンション / 値に重複した `MemberName` または `Member` プロパティ値を設定します。 | これらのプロパティは、各ディメンション / 値に対して一意である必要があります。複製すると、最終結果からデータが失われる可能性があります。 | | 行選択は、**Single** (単一) モードでのみサポートされます。 | 現在、複数選択はサポートされていません。 | + | ディメンション メンバーのマージでは大文字と小文字が区別されます。| ピボット グリッドはグループを作成し、同じ (大文字と小文字を区別する) 値をマージします。ただし、ディメンションは `MemberFunction` を提供し、これはそこで変更できます。`MemberFunction` の結果が比較され、表示値として使用されます。| diff --git a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx index 2681043b4b..206ae20160 100644 --- a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx @@ -122,6 +122,7 @@ For more details on how to customize the appearance of the tree grid, you may ha // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule)); + ``` @@ -141,6 +142,7 @@ import { IgxTreeGridModule } from 'igniteui-angular'; }) export class AppModule {} ``` + diff --git a/docs/xplat/src/content/jp/components/grids/tree.mdx b/docs/xplat/src/content/jp/components/grids/tree.mdx index 001f47886d..7e25b3c3ff 100644 --- a/docs/xplat/src/content/jp/components/grids/tree.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree.mdx @@ -227,7 +227,7 @@ builder.Services.AddIgniteUIBlazor( ### 項目のインタラクション `TreeItem` は展開または折り畳むことができます。 -- 項目の展開インジケーター *(デフォルトの動作)* をクリックします。 +- 項目の展開インジケーター _(デフォルトの動作)_ をクリックします。 - `Tree` の `ToggleNodeOnClick` プロパティが **true** に設定されている場合、項目をクリックします。 diff --git a/docs/xplat/src/content/jp/components/inputs/color-editor.mdx b/docs/xplat/src/content/jp/components/inputs/color-editor.mdx index 290f7395c7..9a43a50890 100644 --- a/docs/xplat/src/content/jp/components/inputs/color-editor.mdx +++ b/docs/xplat/src/content/jp/components/inputs/color-editor.mdx @@ -150,6 +150,7 @@ ModuleManager.register( ref={this.colorEditorRef}> ``` + @@ -178,6 +179,7 @@ public ngAfterViewInit(): void public onValueChanged = (e: any) => { console.log("test"); } + ``` @@ -187,6 +189,7 @@ this.OnValueChanged = this.OnValueChanged.bind(this); this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent; this.colorEditor.valueChanged = this.OnValueChanged; ``` + @@ -199,6 +202,7 @@ this.colorEditor.valueChanged = this.OnValueChanged; } } + ``` diff --git a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx index fcee0d6c7c..18bed9cfe3 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx @@ -253,7 +253,7 @@ comboRef.current.value = ['NY01', 'UK01']; ユーザーの操作によってオプションのリストから項目を選択する以外に、プログラムで項目を選択することもできます。これは、 および メソッドを介して行われます。項目の配列をこれらのメソッドに渡すことができます。メソッドが引数なしで呼び出された場合、呼び出されたメソッドに応じて、すべての項目が選択 / 選択解除されます。コンボ コンポーネントに を指定した場合は、選択 / 選択解除する項目の値キーを渡す必要があります。 -#### 一部の項目を選択 / 選択解除: +#### 一部の項目を選択 / 選択解除 @@ -314,7 +314,7 @@ comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]); -#### すべての項目を選択 / 選択解除: +#### すべての項目を選択 / 選択解除 diff --git a/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx b/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx index 2d818526f6..e38538ae46 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx @@ -58,7 +58,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 単一の選択コンボでプログラムによって項目を選択 / 選択解除する方法は次のとおりです。 -### 項目の選択: +### 項目の選択 @@ -100,7 +100,7 @@ comboRef.current.select('BG01'); 新たに選択せずに項目の選択を解除するには、 メソッドを呼び出します。 -#### 項目の選択解除: +#### 項目の選択解除 diff --git a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx index 7d76cba09b..9f7ef3f49a 100644 --- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -36,11 +36,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/原則**| (a)
    |(b)
    |(c)
    |(d)
    |(e)
    |(f)
    |(g)
    |(h)
    |(i)
    |(j)
    |(k)
    |(l)
    |(m)
    |(n)
    |(o)
    |(p)
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*||||||||||||||||| +|_グリッド_||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|*その他*||||||||||*||||||| +|_その他_||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -115,11 +115,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/ガイドライン**|1.1
    |1.2
    |1.3
    |1.4
    |2.1
    |2.2
    |2.3
    |2.4
    |2.5
    |3.1
    |3.2
    |3.3
    |4.1
    | |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*|||||||||||||| +|_グリッド_|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|*その他*|||||||*||||||| +|_その他_|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx index 91b20cc3e9..9045f42a0a 100644 --- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx @@ -873,10 +873,10 @@ const images = [ ### WAI-ARIA の役割、状態、およびプロパティ - * カルーセルの基本要素の役割は [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) です。これは、ユーザーが簡単にナビゲートできるようにしたい特定の目的に関連するコンテンツを含むセクションです。 - * カルーセル インジケーターの役割は [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) です。これは、ユーザーに描画されるタブ コンテンツを選択するためのメカニズムを提供するグループ化ラベルです。 - * タブのセット (カルーセル インジケーター) 役割のコンテナーとして機能する要素は、[`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist) に設定されます。 - * 各スライド要素には、[`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) の役割が設定されています。 +- カルーセルの基本要素の役割は [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) です。これは、ユーザーが簡単にナビゲートできるようにしたい特定の目的に関連するコンテンツを含むセクションです。 +- カルーセル インジケーターの役割は [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) です。これは、ユーザーに描画されるタブ コンテンツを選択するためのメカニズムを提供するグループ化ラベルです。 +- タブのセット (カルーセル インジケーター) 役割のコンテナーとして機能する要素は、[`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist) に設定されます。 +- 各スライド要素には、[`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) の役割が設定されています。 ### ARIA のサポート diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx index 2da6c6baa7..5d3359f2c7 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx @@ -102,6 +102,7 @@ this.dockManager.layout = { ] } }; + ```     @@ -126,6 +127,7 @@ this.dockManager.layout = { } }; ``` +     ペインのコンテンツをロードするために、ドック マネージャーは[スロット](https://developer.mozilla.org/ja-JP/docs/Web/HTML/Element/slot)を使用します。コンテンツ要素の [slot](https://developer.mozilla.org/ja-JP/docs/Web/HTML/Global_attributes/slot) 属性はレイアウト構成のコンテンツ ペインの `ContentId` と一致する必要があります。エンドユーザーがペインのサイズを変更する場合は、予測可能な応答のために、コンテンツ要素の幅と高さを **100%** に設定することを強くお勧めします。 @@ -633,6 +635,7 @@ private saveLayout() { private loadLayout() { this.dockManager.layout = JSON.parse(this.savedLayout); } + ```     @@ -648,6 +651,7 @@ private loadLayout() { this.dockManager.layout = JSON.parse(this.savedLayout); } ``` + @@ -695,7 +699,7 @@ this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail)); ドック マネージャー コンポーネントは、ペインを閉じる、ピン固定、サイズ変更、ドラッグするなど、特定のエンドユーザーの操作が実行されるとイベントを発生させます。ドック マネージャーのイベントの完全なリストは、[こちら]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/interfaces/igcdockmanagereventmap.html)です。 - + `PaneClose` イベントのイベント リスナーを追加する方法は以下の通りです。 @@ -964,6 +968,7 @@ igc-dockmanager::part(content-pane) { ```html ``` + @@ -974,6 +979,7 @@ igc-dockmanager::part(content-pane) { ```tsx ``` + ## テーマ @@ -993,6 +999,7 @@ const dockManagerStringsFr: IgcDockManagerResourceStrings = { addResourceStrings('fr', dockManagerStringsFr); ``` + The Dock Manager exposes `ResourceStrings` property which allows you to modify the strings. If you set the `ResourceStrings` property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set. diff --git a/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx b/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx index ecd4ece21b..71516ccd14 100644 --- a/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx @@ -178,7 +178,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; ## コンポーネントのカスタマイズ コントロールを使用すると、あらゆる種類のコンテンツを本体内に追加できます。[Input](../inputs/input.md)、チャート、さらには他の展開パネルを描画できます! - を使用すると、公開された **title**、*subTitle*、および **indicator** スロット全体でヘッダーを簡単にカスタマイズできます。 + を使用すると、公開された **title**、_subTitle_、および **indicator** スロット全体でヘッダーを簡単にカスタマイズできます。 展開インジケーターの位置の構成は、展開パネルの プロパティを使用して行うことができます。可能なオプションは、**start**、**end**、または **none** です。 diff --git a/docs/xplat/src/content/jp/components/layouts/icon.mdx b/docs/xplat/src/content/jp/components/layouts/icon.mdx index b48ee4baf8..642ec0e643 100644 --- a/docs/xplat/src/content/jp/components/layouts/icon.mdx +++ b/docs/xplat/src/content/jp/components/layouts/icon.mdx @@ -222,6 +222,7 @@ const searchIcon = ''; registerIconFromText("search", searchIcon, "material"); + ``` @@ -243,6 +244,7 @@ registerIconFromText("search", searchIcon, "material"); } } ``` + @@ -251,6 +253,7 @@ const searchIcon = ''; registerIconFromText("search", searchIcon, "material"); + ``` diff --git a/docs/xplat/src/content/jp/components/menus/toolbar.mdx b/docs/xplat/src/content/jp/components/menus/toolbar.mdx index bfbdace526..a2a7ac2d92 100644 --- a/docs/xplat/src/content/jp/components/menus/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/menus/toolbar.mdx @@ -312,20 +312,20 @@ ModuleManager.register( - `AnalyzeHeader`: サブ セクションのヘッダー。 - `LinesMenu`: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブ メニュー。 - `LinesHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー: - - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する `ToolActionCheckbox`。 - - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する `ToolActionCheckbox`。 - - `Average`: シリーズの平均値で yAxis に沿って水平破線を表示する `ToolActionCheckbox`。 + - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する `ToolActionCheckbox`。 + - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する `ToolActionCheckbox`。 + - `Average`: シリーズの平均値で yAxis に沿って水平破線を表示する `ToolActionCheckbox`。 - `TrendsMenu`: さまざまな近似曲線を `DataChart` プロット領域に適用するためのツールを含むサブ メニュー。 - `TrendsHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー: - - **Exponential**: チャート内の各シリーズの `TrendLineType` を **ExponentialFit** に設定する `ToolActionRadio`。 - - **Linear**: チャート内の各シリーズの `TrendLineType` を **LinearFit** に設定する `ToolActionRadio`。 - - **Logarithmic**: チャート内の各シリーズの `TrendLineType` を **LogarithmicFit** に設定する `ToolActionRadio`。 + - **Exponential**: チャート内の各シリーズの `TrendLineType` を **ExponentialFit** に設定する `ToolActionRadio`。 + - **Linear**: チャート内の各シリーズの `TrendLineType` を **LinearFit** に設定する `ToolActionRadio`。 + - **Logarithmic**: チャート内の各シリーズの `TrendLineType` を **LogarithmicFit** に設定する `ToolActionRadio`。 - `HelpersHeader`: サブ セクションのヘッダー。 - `SeriesAvg`: `Average` タイプの `ValueLayerValueMode` を使用して、チャートのシリーズ コレクションに `ValueLayer` を追加または削除する `ToolActionCheckbox`。 - `ValueLabelsMenu`: `DataChart` のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。 - `ValueLabelsHeader`: 次のツールのサブ メニュー セクション ヘッダー: - - `ShowValueLabels`: `CalloutLayer` を使用してデータ ポイント値を切り替える `ToolActionCheckbox`。 - - `ShowLastValueLabel`: `FinalValueLayer` を使用して最終値軸の注釈を切り替える `ToolActionCheckbox`。 + - `ShowValueLabels`: `CalloutLayer` を使用してデータ ポイント値を切り替える `ToolActionCheckbox`。 + - `ShowLastValueLabel`: `FinalValueLayer` を使用して最終値軸の注釈を切り替える `ToolActionCheckbox`。 - `ShowCrosshairs`: チャートの `CrosshairsDisplayMode` プロパティを介してマウスオーバー十字線の注釈を切り替える `ToolActionCheckbox`。 - `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える `ToolActionCheckbox`。 @@ -597,7 +597,7 @@ The icon component can be styled by using it's `BaseTheme` property directly to -{/* The following example demonstrates the various theme options that can be applied. +{/*The following example demonstrates the various theme options that can be applied. */} diff --git a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx index e7f9d20dc3..1638223347 100644 --- a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx +++ b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx @@ -162,7 +162,7 @@ const onShowButtonClicked = () => { デフォルトでは、Snackbar コンポーネントは、 で指定された期間が経過すると自動的に非表示になります。 プロパティを使用して、この動作を変更できます。この場合、Snackbar は非表示になりません。Snackbar の を使用すると、コンポーネント内にアクション ボタンを表示できます。 - + diff --git a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx index 0ce98a10f5..3fd44655e4 100644 --- a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx @@ -273,6 +273,7 @@ this.radios.forEach(radio => { }); }) ``` + @@ -292,12 +293,13 @@ this.radios.forEach(radio => { JA - + - + ``` ```tsx @@ -317,6 +319,7 @@ public onRadioChange(e: any) { } } ``` + すべて適切に設定できると、カスタマイズされた表示の Calendar ができあがります。これにより、ユーザーの選択に基づいてロケールの表現も変更されます。以下は結果です: diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 25fee1fa86..03c887de8f 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -179,6 +179,7 @@ const date = new Date(); this.SelectedDate = DateTime.Today; } } + ``` diff --git a/docs/xplat/src/content/jp/components/themes/typography.mdx b/docs/xplat/src/content/jp/components/themes/typography.mdx index 3094617a11..75d4a062ae 100644 --- a/docs/xplat/src/content/jp/components/themes/typography.mdx +++ b/docs/xplat/src/content/jp/components/themes/typography.mdx @@ -36,7 +36,7 @@ import ApiRef from 'igniteui-astro-components/components/mdx/ApiRef.astro'; | **caption** | システム フォント | 400 | .75 rem | none | 0.025 rem | 1 rem | `--ig-caption-*` | | **overline** | システム フォント | 400 | .625 rem | uppercase | 0.09375 rem | 1 rem | `--ig-overline-*` | -各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Boostrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じ**スケール カテゴリ**を共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。 +各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Bootstrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じ**スケール カテゴリ**を共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。 ## 使用方法