aloha-vue 1.0.348 → 1.0.349
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/docs-test.yml +78 -0
- package/docs/index.html +3 -2
- package/docs/package.json +1 -1
- package/docs/src/views/PageButton/PageButton.js +2 -0
- package/docs/src/views/PageButton/PageButton.pug +2 -5
- package/docs/src/views/PageButton/PageButtonAriaDisabled/PageButtonAriaDisabled.pug +1 -0
- package/docs/src/views/PageButton/PageButtonBasic/PageButtonBasic.pug +1 -0
- package/docs/src/views/PageButton/PageButtonComplex/PageButtonComplex.pug +1 -0
- package/docs/src/views/PageButton/PageButtonDisabled/PageButtonDisabled.pug +1 -0
- package/docs/src/views/PageButton/PageButtonGroup/PageButtonGroup.pug +1 -0
- package/docs/src/views/PageButton/PageButtonGroupHorizontalVertical/PageButtonGroupHorizontalVertical.pug +1 -0
- package/docs/src/views/PageButton/PageButtonGroupSizes/PageButtonGroupSizes.pug +1 -0
- package/docs/src/views/PageButton/PageButtonGroupVertical/PageButtonGroupVertical.pug +1 -0
- package/docs/src/views/PageButton/PageButtonHtml/PageButtonHtml.pug +1 -0
- package/docs/src/views/PageButton/PageButtonIcons/PageButtonIcons.pug +1 -0
- package/docs/src/views/PageButton/PageButtonLoading/PageButtonLoading.pug +1 -0
- package/docs/src/views/PageButton/PageButtonOutline/PageButtonOutline.pug +1 -0
- package/docs/src/views/PageButton/PageButtonSafeHtml/PageButtonSafeHtml.pug +1 -0
- package/docs/src/views/PageButton/PageButtonSizes/PageButtonSizes.pug +1 -0
- package/docs/src/views/PageButton/PageButtonSlotAppend/PageButtonSlotAppend.pug +1 -0
- package/docs/src/views/PageButton/PageButtonSlotDefault/PageButtonSlotDefault.pug +1 -0
- package/docs/src/views/PageButton/PageButtonSlotPrepend/PageButtonSlotPrepend.pug +1 -0
- package/docs/src/views/PageButton/PageButtonSlotTitle/PageButtonSlotTitle.pug +2 -0
- package/docs/src/views/PageButton/PageButtonSwitch/PageButtonSwitch.pug +1 -0
- package/docs/src/views/PageButton/PageButtonTextAfterBefore/PageButtonTextAfterBefore.pug +1 -0
- package/docs/src/views/PageButton/PageButtonTextObject/PageButtonTextObject.pug +1 -0
- package/docs/src/views/PageButton/PageButtonTitleArray/PageButtonTitleArray.pug +1 -0
- package/docs/src/views/PageButton/PageButtonTitleHtml/PageButtonTitleHtml.pug +1 -0
- package/docs/src/views/PageButton/PageButtonTitleHtmlExtra/PageButtonTitleHtmlExtra.js +27 -0
- package/docs/src/views/PageButton/PageButtonTitleHtmlExtra/PageButtonTitleHtmlExtra.pug +14 -0
- package/docs/src/views/PageButton/PageButtonTitleHtmlExtra/PageButtonTitleHtmlExtra.vue +2 -0
- package/docs/src/views/PageButton/PageButtonTitleHtmlExtra/compositionAPI/HtmlAPI.js +13 -0
- package/docs/src/views/PageButton/PageButtonTitleHtmlExtra/compositionAPI/JsAPI.js +14 -0
- package/docs/src/views/PageButton/compositionAPI/PropsAPI.js +14 -0
- package/docs/src/views/PageButton/i18n/de.json +89 -83
- package/docs/src/views/PageButton/i18n/en.json +91 -85
- package/docs/src/views/PageButton/i18n/ru.json +91 -85
- package/docs/webpack.config.js +9 -6
- package/package.json +1 -1
- package/src/AButton/AButton.js +1 -0
- package/src/AButton/comositionAPI/HtmlTitleAPI.js +3 -1
- package/test/.nojekyll.js +0 -0
- package/test/index.html +13 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
name: Deploy to gh-pages
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches:
|
|
6
|
+
- master
|
|
7
|
+
|
|
8
|
+
jobs:
|
|
9
|
+
deploy:
|
|
10
|
+
runs-on: ubuntu-latest
|
|
11
|
+
|
|
12
|
+
steps:
|
|
13
|
+
- name: Checkout repository
|
|
14
|
+
uses: actions/checkout@v2
|
|
15
|
+
|
|
16
|
+
# - name: Prepare publishing assets
|
|
17
|
+
# run: |
|
|
18
|
+
# mkdir deploy
|
|
19
|
+
# cp -r ./test/* ./deploy
|
|
20
|
+
# find ./deploy -name ".*" ! -name "." ! -name ".." -exec rm -rf {} \;
|
|
21
|
+
# touch ./deploy/.nojekyll
|
|
22
|
+
|
|
23
|
+
- name: Deploy to GitHub Pages
|
|
24
|
+
uses: peaceiris/actions-gh-pages@v3
|
|
25
|
+
with:
|
|
26
|
+
github_token: ${{ secrets.GITHUB_TOKEN }}
|
|
27
|
+
# publish_dir: ./docs/dist
|
|
28
|
+
publish_dir: ./test
|
|
29
|
+
keep_files: true
|
|
30
|
+
publish_branch: gh-pages
|
|
31
|
+
|
|
32
|
+
#name: Deploy Docs
|
|
33
|
+
#
|
|
34
|
+
#on:
|
|
35
|
+
# push:
|
|
36
|
+
# branches:
|
|
37
|
+
# - master
|
|
38
|
+
#
|
|
39
|
+
#jobs:
|
|
40
|
+
# deploy:
|
|
41
|
+
# runs-on: ubuntu-latest
|
|
42
|
+
# steps:
|
|
43
|
+
# - name: Checkout code
|
|
44
|
+
# uses: actions/checkout@v3
|
|
45
|
+
# with:
|
|
46
|
+
# persist-credentials: false
|
|
47
|
+
#
|
|
48
|
+
# - name: Deploy to GH Pages 🚀
|
|
49
|
+
# uses: peaceiris/actions-gh-pages@v3
|
|
50
|
+
# with:
|
|
51
|
+
# github_token: ${{ secrets.GITHUB_TOKEN }}
|
|
52
|
+
# publish_dir: ./test
|
|
53
|
+
|
|
54
|
+
# - name: Set up Node.js
|
|
55
|
+
# uses: actions/setup-node@v3
|
|
56
|
+
# with:
|
|
57
|
+
# node-version: 18
|
|
58
|
+
#
|
|
59
|
+
# - name: Install dependencies
|
|
60
|
+
# run: |
|
|
61
|
+
# cd docs/
|
|
62
|
+
# npm install
|
|
63
|
+
#
|
|
64
|
+
#
|
|
65
|
+
# - name: Build documentation
|
|
66
|
+
# run: |
|
|
67
|
+
# cd docs/
|
|
68
|
+
# npm run build-production
|
|
69
|
+
# npm run build-css
|
|
70
|
+
|
|
71
|
+
# - name: Deploy to GitHub Pages
|
|
72
|
+
# uses: peaceiris/actions-gh-pages@v3
|
|
73
|
+
# with:
|
|
74
|
+
# github_token: ${{ secrets.GITHUB_TOKEN }}
|
|
75
|
+
## publish_dir: ./docs/dist
|
|
76
|
+
# publish_dir: ./docs
|
|
77
|
+
# keep_files: true
|
|
78
|
+
# publish_branch: gh-pages
|
package/docs/index.html
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<title>Aloha</title>
|
|
5
|
+
<title>Aloha test 3</title>
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
-
<link rel="stylesheet" href="/
|
|
7
|
+
<link rel="stylesheet" href="./styles/styles.css" />
|
|
8
8
|
</head>
|
|
9
9
|
<body class="a_text_break">
|
|
10
|
+
<h1>Aloha</h1>
|
|
10
11
|
<div id="app"></div>
|
|
11
12
|
</body>
|
|
12
13
|
</html>
|
package/docs/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"watch": "webpack --watch --mode=development --devtool=eval",
|
|
9
9
|
"watch-details": "webpack --watch --mode=development --devtool=eval-source-map",
|
|
10
10
|
"build-production": "webpack --mode=production --devtool=source-map",
|
|
11
|
-
"build-css": "node-sass --include-path scss styles/styles.scss
|
|
11
|
+
"build-css": "node-sass --include-path scss styles/styles.scss dist/styles/styles.css"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@popperjs/core": "2.11.8",
|
|
@@ -24,6 +24,7 @@ import PageButtonTextAfterBefore from "./PageButtonTextAfterBefore/PageButtonTex
|
|
|
24
24
|
import PageButtonTextObject from "./PageButtonTextObject/PageButtonTextObject.vue";
|
|
25
25
|
import PageButtonTitleArray from "./PageButtonTitleArray/PageButtonTitleArray.vue";
|
|
26
26
|
import PageButtonTitleHtml from "./PageButtonTitleHtml/PageButtonTitleHtml.vue";
|
|
27
|
+
import PageButtonTitleHtmlExtra from "./PageButtonTitleHtmlExtra/PageButtonTitleHtmlExtra.vue";
|
|
27
28
|
|
|
28
29
|
import ExposesAPI from "./compositionAPI/ExposesAPI";
|
|
29
30
|
import EventsAPI from "./compositionAPI/EventsAPI";
|
|
@@ -60,6 +61,7 @@ export default {
|
|
|
60
61
|
PageButtonSlotPrepend,
|
|
61
62
|
PageButtonSlotAppend,
|
|
62
63
|
PageButtonSlotTitle,
|
|
64
|
+
PageButtonTitleHtmlExtra,
|
|
63
65
|
},
|
|
64
66
|
setup() {
|
|
65
67
|
const {
|
|
@@ -4,11 +4,6 @@ aloha-page(
|
|
|
4
4
|
template(
|
|
5
5
|
v-slot:body
|
|
6
6
|
)
|
|
7
|
-
a-translation(
|
|
8
|
-
tag="p"
|
|
9
|
-
html="_A_BUTTON_COMPONENT_DESCRIPTION_"
|
|
10
|
-
)
|
|
11
|
-
|
|
12
7
|
page-button-basic
|
|
13
8
|
|
|
14
9
|
page-button-outline
|
|
@@ -43,6 +38,8 @@ aloha-page(
|
|
|
43
38
|
|
|
44
39
|
page-button-title-html
|
|
45
40
|
|
|
41
|
+
page-button-title-html-extra
|
|
42
|
+
|
|
46
43
|
page-button-slot-default
|
|
47
44
|
|
|
48
45
|
page-button-slot-prepend
|
|
@@ -3,6 +3,7 @@ aloha-example(
|
|
|
3
3
|
:code-js="codeJs"
|
|
4
4
|
header="_A_BUTTON_GROUP_COMPLEX_HEADER_"
|
|
5
5
|
description="_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_"
|
|
6
|
+
:props="['class', 'loading', 'loading-align', 'text', 'text-before', 'icon-left', 'icon-right', 'title', 'text-aria-hidden', 'text-screen-reader']"
|
|
6
7
|
)
|
|
7
8
|
a-button(
|
|
8
9
|
class="a_btn a_btn_primary"
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import AButton from "../../../../../src/AButton/AButton";
|
|
2
|
+
import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
|
|
3
|
+
|
|
4
|
+
import HtmlAPI from "./compositionAPI/HtmlAPI";
|
|
5
|
+
import JsAPI from "./compositionAPI/JsAPI";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
name: "PageButtonTitleHtmlExtra",
|
|
9
|
+
components: {
|
|
10
|
+
AButton,
|
|
11
|
+
AlohaExample,
|
|
12
|
+
},
|
|
13
|
+
setup() {
|
|
14
|
+
const {
|
|
15
|
+
codeHtml,
|
|
16
|
+
} = HtmlAPI();
|
|
17
|
+
|
|
18
|
+
const {
|
|
19
|
+
codeJs,
|
|
20
|
+
} = JsAPI();
|
|
21
|
+
|
|
22
|
+
return {
|
|
23
|
+
codeHtml,
|
|
24
|
+
codeJs,
|
|
25
|
+
};
|
|
26
|
+
},
|
|
27
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
aloha-example(
|
|
2
|
+
:code-html="codeHtml"
|
|
3
|
+
:code-js="codeJs"
|
|
4
|
+
header="_A_BUTTON_GROUP_TITLE_HTML_EXTRA_HEADER_"
|
|
5
|
+
description="_A_BUTTON_GROUP_TITLE_HTML_EXTRA_DESCRIPTION_"
|
|
6
|
+
:props="['is-title-html', 'title', 'extra']"
|
|
7
|
+
)
|
|
8
|
+
a-button(
|
|
9
|
+
class="a_btn a_btn_success"
|
|
10
|
+
title="_A_BUTTON_EXAMPLE_BIG_TITLE_{{number}}_"
|
|
11
|
+
text="extra"
|
|
12
|
+
:is-title-html="true"
|
|
13
|
+
:extra="{ number: 2 }"
|
|
14
|
+
)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export default function HtmlAPI() {
|
|
2
|
+
const codeHtml = `<a-button
|
|
3
|
+
class="a_btn a_btn_success"
|
|
4
|
+
title="_A_BUTTON_EXAMPLE_BIG_TITLE_{{number}}_"
|
|
5
|
+
text="extra"
|
|
6
|
+
:is-title-html="true"
|
|
7
|
+
:extra="{ number: 2 }"
|
|
8
|
+
></a-button>`;
|
|
9
|
+
|
|
10
|
+
return {
|
|
11
|
+
codeHtml,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
@@ -218,6 +218,20 @@ export default function PropsAPI() {
|
|
|
218
218
|
default: undefined,
|
|
219
219
|
required: false,
|
|
220
220
|
},
|
|
221
|
+
{
|
|
222
|
+
name: "is-switch",
|
|
223
|
+
description: "_A_BUTTON_PROPS_IS_SWITCH_DESCRIPTION_",
|
|
224
|
+
type: "Boolean",
|
|
225
|
+
default: undefined,
|
|
226
|
+
required: false,
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
name: "model-switch",
|
|
230
|
+
description: "_A_BUTTON_PROPS_MODEL_SWITCH_DESCRIPTION_",
|
|
231
|
+
type: "Boolean",
|
|
232
|
+
default: undefined,
|
|
233
|
+
required: false,
|
|
234
|
+
},
|
|
221
235
|
{
|
|
222
236
|
name: "title-placement",
|
|
223
237
|
description: "_A_BUTTON_PROPS_TITLE_PLACEMENT_DESCRIPTION_",
|
|
@@ -1,87 +1,93 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
"
|
|
4
|
-
"_A_BUTTON_EVENTS_CLICK_DESCRIPTION_": "[ALOHA]",
|
|
2
|
+
"_A_BUTTON_COMPONENT_NAME_": "Schaltfläche",
|
|
3
|
+
"_A_BUTTON_EVENTS_CLICK_DESCRIPTION_": "Wird emittiert, wenn der Button geklickt wird.",
|
|
5
4
|
"_A_BUTTON_EXAMPLE_BIG_TITLE_": "<div>DAS IST MEIN <strong>HTML-TOOLTIP!!!!</strong></div><div>Zweite Zeile</div>",
|
|
5
|
+
"_A_BUTTON_EXAMPLE_BIG_TITLE_{{number}}_": "<div>DAS IST MEIN <strong>HTML-TOOLTIP!!!!</strong></div><div>Zweite Zeile</div><div>Nummer: {{ number }}</div>",
|
|
6
6
|
"_A_BUTTON_EXAMPLE_HTML_": "<span onclick='alert(\"Aloha\")'>Aloha</button>",
|
|
7
|
-
"_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "
|
|
8
|
-
"_A_BUTTON_GROUP_ARIA_DISABLED_HEADER_": "
|
|
9
|
-
"_A_BUTTON_GROUP_BASIC_DESCRIPTION_": "
|
|
10
|
-
"_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "
|
|
11
|
-
"_A_BUTTON_GROUP_COMPLEX_HEADER_": "
|
|
12
|
-
"_A_BUTTON_GROUP_DISABLED_DESCRIPTION_": "
|
|
13
|
-
"_A_BUTTON_GROUP_DISABLED_HEADER_": "
|
|
14
|
-
"_A_BUTTON_GROUP_GROUP_DESCRIPTION_": "
|
|
15
|
-
"_A_BUTTON_GROUP_GROUP_HEADER_": "
|
|
16
|
-
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_DESCRIPTION_": "
|
|
17
|
-
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_HEADER_": "
|
|
18
|
-
"_A_BUTTON_GROUP_GROUP_SIZES_DESCRIPTION_": "
|
|
19
|
-
"_A_BUTTON_GROUP_GROUP_SIZES_HEADER_": "
|
|
20
|
-
"_A_BUTTON_GROUP_GROUP_VERTICAL_DESCRIPTION_": "
|
|
21
|
-
"_A_BUTTON_GROUP_GROUP_VERTICAL_HEADER_": "
|
|
22
|
-
"_A_BUTTON_GROUP_HTML_DESCRIPTION_": "
|
|
23
|
-
"_A_BUTTON_GROUP_HTML_HEADER_": "
|
|
24
|
-
"_A_BUTTON_GROUP_ICONS_DESCRIPTION_": "
|
|
25
|
-
"_A_BUTTON_GROUP_ICONS_HEADER_": "
|
|
26
|
-
"_A_BUTTON_GROUP_LOADING_DESCRIPTION_": "
|
|
27
|
-
"_A_BUTTON_GROUP_LOADING_HEADER_": "
|
|
28
|
-
"_A_BUTTON_GROUP_OUTLINE_DESCRIPTION_": "
|
|
29
|
-
"_A_BUTTON_GROUP_OUTLINE_HEADER_": "
|
|
30
|
-
"_A_BUTTON_GROUP_SAFE_HTML_DESCRIPTION_": "
|
|
31
|
-
"_A_BUTTON_GROUP_SAFE_HTML_HEADER_": "
|
|
32
|
-
"_A_BUTTON_GROUP_SIZES_DESCRIPTION_": "
|
|
33
|
-
"_A_BUTTON_GROUP_SIZES_HEADER_": "
|
|
34
|
-
"_A_BUTTON_GROUP_SLOT_APPEND_DESCRIPTION_": "
|
|
35
|
-
"_A_BUTTON_GROUP_SLOT_APPEND_HEADER_": "
|
|
36
|
-
"_A_BUTTON_GROUP_SLOT_DEFAULT_DESCRIPTION_": "
|
|
37
|
-
"_A_BUTTON_GROUP_SLOT_DEFAULT_HEADER_": "
|
|
38
|
-
"_A_BUTTON_GROUP_SLOT_PREPEND_DESCRIPTION_": "
|
|
39
|
-
"_A_BUTTON_GROUP_SLOT_PREPEND_HEADER_": "
|
|
40
|
-
"_A_BUTTON_GROUP_SLOT_TITLE_DESCRIPTION_": "
|
|
41
|
-
"_A_BUTTON_GROUP_SLOT_TITLE_HEADER_": "
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
7
|
+
"_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, den Button als inaktiv darzustellen und die entsprechenden Accessibility-Eigenschaften zu setzen. Dazu können Sie die Prop \"aria-disabled\" verwenden, um den inaktiven Zustand anzugeben. Dies ermöglicht es Ihnen, Events wie Fokus oder Hover zu verwenden, während der Button nicht klickbar ist.",
|
|
8
|
+
"_A_BUTTON_GROUP_ARIA_DISABLED_HEADER_": "Inaktiver Button mit aria-disabled",
|
|
9
|
+
"_A_BUTTON_GROUP_BASIC_DESCRIPTION_": "Es gibt viele CSS-Klassen, die man mit der Schaltfläche verwenden kann.",
|
|
10
|
+
"_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, verschiedene komplexe Props und Events zu verwenden, um den Button mit erweiterten Funktionen anzupassen und zu steuern. Im folgenden Beispiel werden mehrere Props und ein Event verwendet, um den Button zu konfigurieren und das Laden zu steuern.",
|
|
11
|
+
"_A_BUTTON_GROUP_COMPLEX_HEADER_": "Verwendung von komplexen Props und Events",
|
|
12
|
+
"_A_BUTTON_GROUP_DISABLED_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, den Button zu deaktivieren, indem Sie die Prop \"disabled\" verwenden. Dadurch wird der Button optisch und funktional deaktiviert, sodass er nicht mehr interaktiv ist.",
|
|
13
|
+
"_A_BUTTON_GROUP_DISABLED_HEADER_": "Deaktivierung des Buttons",
|
|
14
|
+
"_A_BUTTON_GROUP_GROUP_DESCRIPTION_": "Gruppieren Sie eine Reihe von Schaltflächen in einer einzelnen Zeile.",
|
|
15
|
+
"_A_BUTTON_GROUP_GROUP_HEADER_": "Gruppierung der Schaltflächen horizontal",
|
|
16
|
+
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_DESCRIPTION_": "Sie können Schaltflächen in einer Tabelle gruppieren.",
|
|
17
|
+
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_HEADER_": "Tabellarische Gruppierung der Schaltflächen",
|
|
18
|
+
"_A_BUTTON_GROUP_GROUP_SIZES_DESCRIPTION_": "Anstatt Schaltflächengrößenklassen auf jede Schaltfläche in einer Gruppe anzuwenden, fügen Sie einfach .a_btn_group_large oder .a_btn_group_small zu jeder .a_btn_group hinzu, einschließlich jeder einzelnen, wenn Sie mehrere Gruppen verschachteln.",
|
|
19
|
+
"_A_BUTTON_GROUP_GROUP_SIZES_HEADER_": "Größe der Schaltflächengruppe",
|
|
20
|
+
"_A_BUTTON_GROUP_GROUP_VERTICAL_DESCRIPTION_": "Stapeln Sie Schaltflächen in einer vertikalen Spalte.",
|
|
21
|
+
"_A_BUTTON_GROUP_GROUP_VERTICAL_HEADER_": "Gruppierung der Schaltflächen vertikal",
|
|
22
|
+
"_A_BUTTON_GROUP_HTML_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, HTML-Inhalt sicher anzuzeigen, ohne ihm vollständig zu vertrauen. Durch Verwendung der Prop \"html\" und der DomPurify-Bibliothek wird der übergebene HTML-Inhalt gesäubert und sicher im Button dargestellt.",
|
|
23
|
+
"_A_BUTTON_GROUP_HTML_HEADER_": "HTML-Inhalt sicher anzeigen mit Hilfe von DomPurify",
|
|
24
|
+
"_A_BUTTON_GROUP_ICONS_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, Icons auf der linken und rechten Seite des Buttons anzuzeigen, indem Sie die Props \":icon-left\" und \":icon-right\" verwenden. Sie können verschiedene Icons für verschiedene Geräte definieren, um eine anpassbare Darstellung zu erreichen.",
|
|
25
|
+
"_A_BUTTON_GROUP_ICONS_HEADER_": "Verwendung von Icon-Props",
|
|
26
|
+
"_A_BUTTON_GROUP_LOADING_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, den Button mit einem Ladezustand und einem Ladeindikator anzuzeigen. Sie können auch die Ausrichtung des Ladeindikators festlegen. Dies kann nützlich sein, um anzuzeigen, dass ein bestimmter Vorgang im Hintergrund läuft und der Benutzer auf den Abschluss warten muss.",
|
|
27
|
+
"_A_BUTTON_GROUP_LOADING_HEADER_": "Button mit Ladezustand und Ausrichtung des Ladeindikators",
|
|
28
|
+
"_A_BUTTON_GROUP_OUTLINE_DESCRIPTION_": "Brauchen Sie einen Button, aber nicht die kräftigen Hintergrundfarben, die sie mit sich bringen? Ersetzen Sie die Standardmodifikatorklassen durch die .a_btn_outline_*-Klassen, um alle Hintergrundbilder und Farben auf einer beliebigen Schaltfläche zu entfernen.",
|
|
29
|
+
"_A_BUTTON_GROUP_OUTLINE_HEADER_": "Gliederungsschaltflächen",
|
|
30
|
+
"_A_BUTTON_GROUP_SAFE_HTML_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, sicheren HTML-Inhalt als String im Button zu verwenden. Durch die Aktivierung der Prop \"safe-html\" und die Übermittlung eines HTML-Strings wird der übergebene HTML-Inhalt vertrauenswürdig behandelt und direkt über das JavaScript-Attribut \"innerHTML\" eingefügt.",
|
|
31
|
+
"_A_BUTTON_GROUP_SAFE_HTML_HEADER_": "Sicherer HTML-Inhalt als String im Button verwenden",
|
|
32
|
+
"_A_BUTTON_GROUP_SIZES_DESCRIPTION_": "Lust auf größere oder kleinere Knöpfe? Fügen Sie .a_btn_large oder .a_btn_small für zusätzliche Größen hinzu.",
|
|
33
|
+
"_A_BUTTON_GROUP_SIZES_HEADER_": "Schaltfläche Größen",
|
|
34
|
+
"_A_BUTTON_GROUP_SLOT_APPEND_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, zusätzlichen Inhalt nach dem Text im Button anzuzeigen, indem Sie den Slot \"buttonAppend\" verwenden. Der Inhalt, der im Slot platziert wird, wird nach dem Text im Button angezeigt.",
|
|
35
|
+
"_A_BUTTON_GROUP_SLOT_APPEND_HEADER_": "Verwendung des Slots \"buttonAppend\"",
|
|
36
|
+
"_A_BUTTON_GROUP_SLOT_DEFAULT_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, benutzerdefinierten Inhalt im Button zu platzieren, indem Sie den Standard-Slot \":slots='default'\" verwenden. Der Inhalt, der im Slot platziert wird, wird im Button angezeigt.",
|
|
37
|
+
"_A_BUTTON_GROUP_SLOT_DEFAULT_HEADER_": "Verwendung des Standard-Slots",
|
|
38
|
+
"_A_BUTTON_GROUP_SLOT_PREPEND_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, zusätzlichen Inhalt vor dem Text im Button anzuzeigen, indem Sie den Slot \"buttonPrepend\" verwenden. Der Inhalt, der im Slot platziert wird, wird vor dem Text im Button angezeigt.",
|
|
39
|
+
"_A_BUTTON_GROUP_SLOT_PREPEND_HEADER_": "Verwendung des Slots \"buttonPrepend\"",
|
|
40
|
+
"_A_BUTTON_GROUP_SLOT_TITLE_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, benutzerdefinierten HTML-Inhalt für den Titel des Buttons zu definieren, indem Sie den Slot \"buttonTitle\" zusammen mit der Prop \":is-title-html\" verwenden. Der Inhalt, der im Slot platziert wird, wird als HTML-Titel für den Button verwendet.",
|
|
41
|
+
"_A_BUTTON_GROUP_SLOT_TITLE_HEADER_": "Verwendung des Slots \"buttonTitle\" für HTML-Titel",
|
|
42
|
+
"_A_BUTTON_GROUP_SWITCH_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, den Button als Button-Switch zu verwenden, mit zwei Zuständen (aktiv/inaktiv). Durch Verwendung der Props \":is-switch\" und \":model-switch\" können Sie den Button-Switch aktivieren und den Zustand steuern. Der Button wird als \"button\"-Element mit dem Attribut \"aria-pressed\" gerendert, um den Zustand anzugeben.",
|
|
43
|
+
"_A_BUTTON_GROUP_SWITCH_HEADER_": "Verwendung des Button-Switch-Modus",
|
|
44
|
+
"_A_BUTTON_GROUP_TEXT_AFTER_BEFORE_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, zusätzlichen Text innerhalb des Buttons anzuzeigen. Dies kann nützlich sein, um vordefinierten Text vor oder nach dem eigentlichen Button-Text hinzuzufügen.",
|
|
45
|
+
"_A_BUTTON_GROUP_TEXT_AFTER_BEFORE_HEADER_": "Zusätzlicher Text innerhalb des Buttons",
|
|
46
|
+
"_A_BUTTON_GROUP_TEXT_OBJECT_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, den Text des Buttons für verschiedene Geräte anzupassen. Durch Verwendung der Prop \":text\" als Objekt können Sie unterschiedlichen Text für mobile und Desktop-Geräte definieren.",
|
|
47
|
+
"_A_BUTTON_GROUP_TEXT_OBJECT_HEADER_": "Anpassbarer Text für verschiedene Geräte",
|
|
48
|
+
"_A_BUTTON_GROUP_TITLE_ARRAY_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, mehrere Titel in einer Prop zu konkatenieren. Durch Verwendung der Prop \":title\" als Array können Sie mehrere Elemente angeben, die zu einem einzigen Titel für den Button zusammengeführt werden.",
|
|
49
|
+
"_A_BUTTON_GROUP_TITLE_ARRAY_HEADER_": "Konkatenieren von Titeln in einer Prop",
|
|
50
|
+
"_A_BUTTON_GROUP_TITLE_HTML_DESCRIPTION_": "Die AButton-Komponente ermöglicht es Ihnen, den Titel als HTML anzuzeigen und die Titelplatzierung zu steuern. Durch Verwendung der Props \":is-title-html\", \":title\" und \":title-placement\" können Sie HTML-Titel verwenden und die Positionierung des Titels festlegen.",
|
|
51
|
+
"_A_BUTTON_GROUP_TITLE_HTML_EXTRA_DESCRIPTION_": "Anzeige von HTML-Titel mit Übersetzung und Parameter",
|
|
52
|
+
"_A_BUTTON_GROUP_TITLE_HTML_EXTRA_HEADER_": "Im folgenden Beispiel wird der Titel als übersetzter Text mit einem Parameter angezeigt. Dabei wird der Parameter number über das extra-Attribut übergeben.",
|
|
53
|
+
"_A_BUTTON_GROUP_TITLE_HTML_HEADER_": "Anzeige von HTML-Titel und Titelplatzierung",
|
|
54
|
+
"_A_BUTTON_PROPS_ARIA_DISABLED_DESCRIPTION_": "Gibt an, ob der Button als inaktiv markiert werden soll. Wenn der Wert auf true gesetzt ist, wird der Button als inaktiv dargestellt und die Accessibility-Eigenschaft \"aria-disabled\" wird hinzugefügt.",
|
|
55
|
+
"_A_BUTTON_PROPS_ARIA_LABEL_DESCRIPTION_": " Gibt das ARIA-Label für den Button an. Sie können einen String, eine Zahl oder ein Objekt als Wert verwenden, um das gewünschte Label festzulegen.",
|
|
56
|
+
"_A_BUTTON_PROPS_ATTRIBUTES_DESCRIPTION_": "Gibt zusätzliche Attribute für den Button an. Sie können ein Objekt verwenden, um die gewünschten Attribute und deren Werte festzulegen.",
|
|
57
|
+
"_A_BUTTON_PROPS_CLASS_DESCRIPTION_": "CSS-Klasse",
|
|
58
|
+
"_A_BUTTON_PROPS_DISABLED_DESCRIPTION_": "Gibt an, ob der Button deaktiviert werden soll. Wenn der Wert auf true gesetzt ist, wird der Button deaktiviert.",
|
|
59
|
+
"_A_BUTTON_PROPS_EXTRA_DESCRIPTION_": "Extra-Objekt für Übersetzung",
|
|
60
|
+
"_A_BUTTON_PROPS_HTML_DESCRIPTION_": "Der zu sichernde HTML-Inhalt, der im Button angezeigt werden soll",
|
|
61
|
+
"_A_BUTTON_PROPS_HTML_SCREEN_READER_DESCRIPTION_": "Gibt das HTML für den Screenreader-Inhalt des Buttons an. Sie können einen String, eine Zahl oder ein Objekt als Wert verwenden, um den gewünschten HTML-Inhalt festzulegen.",
|
|
62
|
+
"_A_BUTTON_PROPS_ICON_ATTRIBUTES_DESCRIPTION_": "Gibt zusätzliche Attribute für die Icons an. Sie können ein Objekt verwenden, um die gewünschten Attribute und deren Werte für die Icons festzulegen.",
|
|
63
|
+
"_A_BUTTON_PROPS_ICON_CLASS_DESCRIPTION_": "Gibt eine zusätzliche CSS-Klasse für die Icons an.",
|
|
64
|
+
"_A_BUTTON_PROPS_ICON_LEFT_DESCRIPTION_": "Definiert das Icon auf der linken Seite des Buttons. Sie können entweder einen Icon-Namen als String angeben oder verschiedene Icons für verschiedene Geräte als Objekt definieren.",
|
|
65
|
+
"_A_BUTTON_PROPS_ICON_RIGHT_DESCRIPTION_": "Definiert das Icon auf der rechten Seite des Buttons. Sie können entweder einen Icon-Namen als String angeben oder verschiedene Icons für verschiedene Geräte als Objekt definieren.",
|
|
66
|
+
"_A_BUTTON_PROPS_ICON_TAG_DESCRIPTION_": " Gibt das benutzerdefinierte HTML-Tag für die Icons an.",
|
|
67
|
+
"_A_BUTTON_PROPS_ID_DESCRIPTION_": "Gibt eine eindeutige ID für den Button an. Wenn keine ID angegeben wird, wird automatisch eine eindeutige ID generiert.",
|
|
68
|
+
"_A_BUTTON_PROPS_IS_SWITCH_DESCRIPTION_": "Gibt an, ob der Button im Switch-Modus verwendet werden soll. Wenn der Wert auf true gesetzt ist, wird der Button als Button-Switch gerendert.",
|
|
69
|
+
"_A_BUTTON_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Gibt an, ob der Titel als HTML interpretiert werden soll. Wenn der Wert auf true gesetzt ist, wird der Titel als HTML gerendert.",
|
|
70
|
+
"_A_BUTTON_PROPS_LOADING_ALIGN_DESCRIPTION_": "Gibt die Ausrichtung des Ladeindikators an. Sie können entweder \"left\" oder \"right\" als Wert angeben.",
|
|
71
|
+
"_A_BUTTON_PROPS_LOADING_CLASS_DESCRIPTION_": "Gibt die CSS-Klasse für den Ladezustand des Buttons an. Sie können entweder einen String mit der CSS-Klasse angeben oder ein Objekt verwenden, um verschiedene CSS-Klassen für verschiedene Zustände anzugeben.",
|
|
72
|
+
"_A_BUTTON_PROPS_LOADING_DESCRIPTION_": "Gibt an, ob der Button im Ladezustand ist. Wenn der Wert auf true gesetzt ist, wird der Button als \"loading\" angezeigt.",
|
|
73
|
+
"_A_BUTTON_PROPS_MODEL_SWITCH_DESCRIPTION_": "Der Modellwert, der den Zustand des Button-Switchs steuert. Wenn der Wert auf true gesetzt ist, ist der Button aktiviert (pressed=true), andernfalls ist der Button deaktiviert (pressed=false).",
|
|
74
|
+
"_A_BUTTON_PROPS_PREVENT_DESCRIPTION_": "Gibt an, ob das Standardverhalten von Event-Handling-Funktionen für den Button verhindert werden soll.",
|
|
75
|
+
"_A_BUTTON_PROPS_SAFE_HTML_DESCRIPTION_": "Aktiviert das Vertrauen in den übergebenen HTML-String und ermöglicht dessen Darstellung im Button",
|
|
76
|
+
"_A_BUTTON_PROPS_SAFE_HTML_SCREEN_READER_DESCRIPTION_": "Gibt den sicheren HTML-Inhalt für den Screenreader-Bereich an. Sie können entweder einen String, eine Zahl oder ein Objekt verwenden, um verschiedene Inhalte für verschiedene Zustände anzugeben.",
|
|
77
|
+
"_A_BUTTON_PROPS_STOP_DESCRIPTION_": "Gibt an, ob das weitere Ausbreiten des Events gestoppt werden soll.",
|
|
78
|
+
"_A_BUTTON_PROPS_TABINDEX_DESCRIPTION_": "Gibt den Tabindex-Wert für den Button an. Der Tabindex kann entweder als Zahl oder als String angegeben werden.",
|
|
79
|
+
"_A_BUTTON_PROPS_TAG_DESCRIPTION_": "Gibt das HTML-Tag an, das für die Darstellung des Buttons verwendet werden soll.",
|
|
80
|
+
"_A_BUTTON_PROPS_TEXT_AFTER_DESCRIPTION_": "Definiert den Text, der nach dem Button-Text angezeigt werden soll.",
|
|
81
|
+
"_A_BUTTON_PROPS_TEXT_ARIA_HIDDEN_DESCRIPTION_": "Gibt an, ob der Text des Buttons als aria-hidden=\"true\" markiert werden soll.\n",
|
|
82
|
+
"_A_BUTTON_PROPS_TEXT_BEFORE_DESCRIPTION_": "Definiert den Text, der vor dem Button-Text angezeigt werden soll.",
|
|
83
|
+
"_A_BUTTON_PROPS_TEXT_CLASS_DESCRIPTION_": "Gibt die CSS-Klasse an, die auf den Text des Buttons angewendet werden soll.",
|
|
84
|
+
"_A_BUTTON_PROPS_TEXT_DESCRIPTION_": "Ein String oder ein Objekt, das den Text für verschiedene Geräte enthält. Verwenden Sie die Schlüssel \"mobile\" und \"desktop\", um den entsprechenden Text für jedes Gerät anzugeben.",
|
|
85
|
+
"_A_BUTTON_PROPS_TEXT_SCREEN_READER_DESCRIPTION_": "Gibt den Text an, der für Screenreader verwendet werden soll.",
|
|
86
|
+
"_A_BUTTON_PROPS_TITLE_DESCRIPTION_": "Ein String oder ein Array von Elementen, die zu einem einzigen Titel konkateniert werden.",
|
|
87
|
+
"_A_BUTTON_PROPS_TITLE_PLACEMENT_DESCRIPTION_": "Die Positionierung des HTML-Titels",
|
|
88
|
+
"_A_BUTTON_PROPS_TYPE_DESCRIPTION_": "Gibt den Typ des Buttons an. Erlaubte Werte sind \"button\", \"submit\" und \"reset\".",
|
|
89
|
+
"_A_BUTTON_SLOT_BUTTON_APPEND_DESCRIPTION_": "Der Slot, der den Inhalt enthält, der nach dem Text im Button angezeigt werden soll.",
|
|
90
|
+
"_A_BUTTON_SLOT_BUTTON_PREPEND_DESCRIPTION_": "Der Slot, der den Inhalt enthält, der vor dem Text im Button angezeigt werden soll.",
|
|
91
|
+
"_A_BUTTON_SLOT_BUTTON_TITLE_DESCRIPTION_": "Der Slot, der den HTML-Inhalt enthält, der als Titel für den Button verwendet werden soll.",
|
|
92
|
+
"_A_BUTTON_SLOT_DEFAULT_DESCRIPTION_": "Der Standard-Slot, der den Inhalt für den Button enthält."
|
|
87
93
|
}
|
|
@@ -1,87 +1,93 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"_A_BUTTON_EXAMPLE_BIG_TITLE_": "<div>
|
|
2
|
+
"_A_BUTTON_COMPONENT_NAME_": "Button",
|
|
3
|
+
"_A_BUTTON_EVENTS_CLICK_DESCRIPTION_": "Emitted when the button is clicked.",
|
|
4
|
+
"_A_BUTTON_EXAMPLE_BIG_TITLE_": "<div>THIS IS MY <strong>HTML TOOLTIP!!!!</strong></div><div>Second line</div>",
|
|
5
|
+
"_A_BUTTON_EXAMPLE_BIG_TITLE_{{number}}_": "<div>THIS IS MY <strong>HTML TOOLTIP!!!!</strong></div><div>Second line</div><div>Number: {{ number }}</div>",
|
|
6
6
|
"_A_BUTTON_EXAMPLE_HTML_": "<span onclick='alert(\"Aloha\")'>Aloha</button>",
|
|
7
|
-
"_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "
|
|
8
|
-
"_A_BUTTON_GROUP_ARIA_DISABLED_HEADER_": "
|
|
9
|
-
"_A_BUTTON_GROUP_BASIC_DESCRIPTION_": "
|
|
10
|
-
"_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "
|
|
11
|
-
"_A_BUTTON_GROUP_COMPLEX_HEADER_": "
|
|
12
|
-
"_A_BUTTON_GROUP_DISABLED_DESCRIPTION_": "
|
|
13
|
-
"_A_BUTTON_GROUP_DISABLED_HEADER_": "
|
|
14
|
-
"_A_BUTTON_GROUP_GROUP_DESCRIPTION_": "
|
|
15
|
-
"_A_BUTTON_GROUP_GROUP_HEADER_": "
|
|
16
|
-
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_DESCRIPTION_": "
|
|
17
|
-
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_HEADER_": "
|
|
18
|
-
"_A_BUTTON_GROUP_GROUP_SIZES_DESCRIPTION_": "
|
|
19
|
-
"_A_BUTTON_GROUP_GROUP_SIZES_HEADER_": "
|
|
20
|
-
"_A_BUTTON_GROUP_GROUP_VERTICAL_DESCRIPTION_": "
|
|
21
|
-
"_A_BUTTON_GROUP_GROUP_VERTICAL_HEADER_": "
|
|
22
|
-
"_A_BUTTON_GROUP_HTML_DESCRIPTION_": "
|
|
23
|
-
"_A_BUTTON_GROUP_HTML_HEADER_": "
|
|
24
|
-
"_A_BUTTON_GROUP_ICONS_DESCRIPTION_": "
|
|
25
|
-
"_A_BUTTON_GROUP_ICONS_HEADER_": "
|
|
26
|
-
"_A_BUTTON_GROUP_LOADING_DESCRIPTION_": "
|
|
27
|
-
"_A_BUTTON_GROUP_LOADING_HEADER_": "
|
|
28
|
-
"_A_BUTTON_GROUP_OUTLINE_DESCRIPTION_": "
|
|
29
|
-
"_A_BUTTON_GROUP_OUTLINE_HEADER_": "
|
|
30
|
-
"_A_BUTTON_GROUP_SAFE_HTML_DESCRIPTION_": "
|
|
31
|
-
"_A_BUTTON_GROUP_SAFE_HTML_HEADER_": "
|
|
32
|
-
"_A_BUTTON_GROUP_SIZES_DESCRIPTION_": "
|
|
33
|
-
"_A_BUTTON_GROUP_SIZES_HEADER_": "
|
|
34
|
-
"_A_BUTTON_GROUP_SLOT_APPEND_DESCRIPTION_": "
|
|
35
|
-
"_A_BUTTON_GROUP_SLOT_APPEND_HEADER_": "
|
|
36
|
-
"_A_BUTTON_GROUP_SLOT_DEFAULT_DESCRIPTION_": "
|
|
37
|
-
"_A_BUTTON_GROUP_SLOT_DEFAULT_HEADER_": "
|
|
38
|
-
"_A_BUTTON_GROUP_SLOT_PREPEND_DESCRIPTION_": "
|
|
39
|
-
"_A_BUTTON_GROUP_SLOT_PREPEND_HEADER_": "
|
|
40
|
-
"_A_BUTTON_GROUP_SLOT_TITLE_DESCRIPTION_": "
|
|
41
|
-
"_A_BUTTON_GROUP_SLOT_TITLE_HEADER_": "
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
|
|
7
|
+
"_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "The AButton component allows you to display the button as disabled and set the corresponding accessibility properties. You can use the \"aria-disabled\" prop to indicate the disabled state. This allows you to use events like focus or hover while the button is not clickable.",
|
|
8
|
+
"_A_BUTTON_GROUP_ARIA_DISABLED_HEADER_": "Disabled button with aria-disabled",
|
|
9
|
+
"_A_BUTTON_GROUP_BASIC_DESCRIPTION_": "There are many CSS classes that you can use with the button.",
|
|
10
|
+
"_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "The AButton component allows you to use various complex props and events to customize and control the button with advanced functionality. In the following example, multiple props and an event are used to configure the button and control the loading state.",
|
|
11
|
+
"_A_BUTTON_GROUP_COMPLEX_HEADER_": "Using complex props and events",
|
|
12
|
+
"_A_BUTTON_GROUP_DISABLED_DESCRIPTION_": "The AButton component allows you to disable the button by using the \"disabled\" prop. This visually and functionally disables the button, making it non-interactive.",
|
|
13
|
+
"_A_BUTTON_GROUP_DISABLED_HEADER_": "Disabling the button",
|
|
14
|
+
"_A_BUTTON_GROUP_GROUP_DESCRIPTION_": "Group a set of buttons in a single row.",
|
|
15
|
+
"_A_BUTTON_GROUP_GROUP_HEADER_": "Grouping buttons horizontally",
|
|
16
|
+
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_DESCRIPTION_": "You can group buttons in a table format.",
|
|
17
|
+
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_HEADER_": "Table-based grouping of buttons",
|
|
18
|
+
"_A_BUTTON_GROUP_GROUP_SIZES_DESCRIPTION_": "Instead of applying button size classes to each button within a group, simply add .a_btn_group_large or .a_btn_group_small to each .a_btn_group, including any nested ones if you have multiple levels of nesting.",
|
|
19
|
+
"_A_BUTTON_GROUP_GROUP_SIZES_HEADER_": "Button group size",
|
|
20
|
+
"_A_BUTTON_GROUP_GROUP_VERTICAL_DESCRIPTION_": "Stack buttons in a vertical column.",
|
|
21
|
+
"_A_BUTTON_GROUP_GROUP_VERTICAL_HEADER_": "Grouping buttons vertically",
|
|
22
|
+
"_A_BUTTON_GROUP_HTML_DESCRIPTION_": "The AButton component allows you to safely display HTML content without fully trusting it. By using the \"html\" prop and the DomPurify library, the provided HTML content is sanitized and securely rendered in the button.",
|
|
23
|
+
"_A_BUTTON_GROUP_HTML_HEADER_": "Safely displaying HTML content using DomPurify",
|
|
24
|
+
"_A_BUTTON_GROUP_ICONS_DESCRIPTION_": "The AButton component allows you to display icons on the left and right side of the button by using the \":icon-left\" and \":icon-right\" props. You can define different icons for different devices to achieve a customizable display.",
|
|
25
|
+
"_A_BUTTON_GROUP_ICONS_HEADER_": "Using icon props",
|
|
26
|
+
"_A_BUTTON_GROUP_LOADING_DESCRIPTION_": "The AButton component allows you to display the button with a loading state and a loading indicator. You can also set the alignment of the loading indicator. This can be useful to indicate that a specific operation is running in the background and the user needs to wait for completion.",
|
|
27
|
+
"_A_BUTTON_GROUP_LOADING_HEADER_": "Button with loading state and loading indicator alignment",
|
|
28
|
+
"_A_BUTTON_GROUP_OUTLINE_DESCRIPTION_": "Need a button but not the bold background colors they bring? Replace the default modifier classes with the .a_btn_outline_* classes to remove all background images and colors on any button.",
|
|
29
|
+
"_A_BUTTON_GROUP_OUTLINE_HEADER_": "Outline Buttons",
|
|
30
|
+
"_A_BUTTON_GROUP_SAFE_HTML_DESCRIPTION_": "The AButton component allows you to use safe HTML content as a string inside the button. By enabling the \"safe-html\" prop and passing an HTML string, the provided HTML content is treated as trusted and directly inserted via the JavaScript \"innerHTML\" attribute.",
|
|
31
|
+
"_A_BUTTON_GROUP_SAFE_HTML_HEADER_": "Using Safe HTML Content as a String inside the Button",
|
|
32
|
+
"_A_BUTTON_GROUP_SIZES_DESCRIPTION_": "Feeling like having larger or smaller buttons? Add .a_btn_large or .a_btn_small for additional sizes.",
|
|
33
|
+
"_A_BUTTON_GROUP_SIZES_HEADER_": "Button Sizes",
|
|
34
|
+
"_A_BUTTON_GROUP_SLOT_APPEND_DESCRIPTION_": "The AButton component allows you to display additional content after the text inside the button by using the \"buttonAppend\" slot. The content placed in the slot will be shown after the text inside the button.",
|
|
35
|
+
"_A_BUTTON_GROUP_SLOT_APPEND_HEADER_": "Using the \"buttonAppend\" Slot",
|
|
36
|
+
"_A_BUTTON_GROUP_SLOT_DEFAULT_DESCRIPTION_": "The AButton component allows you to place custom content inside the button by using the default slot \":slots='default'\". The content placed in the slot will be shown inside the button.",
|
|
37
|
+
"_A_BUTTON_GROUP_SLOT_DEFAULT_HEADER_": "Using the Default Slot",
|
|
38
|
+
"_A_BUTTON_GROUP_SLOT_PREPEND_DESCRIPTION_": "The AButton component allows you to display additional content before the text inside the button by using the \"buttonPrepend\" slot. The content placed in the slot will be shown before the text inside the button.",
|
|
39
|
+
"_A_BUTTON_GROUP_SLOT_PREPEND_HEADER_": "Using the \"buttonPrepend\" Slot",
|
|
40
|
+
"_A_BUTTON_GROUP_SLOT_TITLE_DESCRIPTION_": "The AButton component allows you to define custom HTML content for the button's title by using the \"buttonTitle\" slot along with the \":is-title-html\" prop. The content placed in the slot will be used as an HTML title for the button.",
|
|
41
|
+
"_A_BUTTON_GROUP_SLOT_TITLE_HEADER_": "Using the \"buttonTitle\" Slot for HTML Title",
|
|
42
|
+
"_A_BUTTON_GROUP_SWITCH_DESCRIPTION_": "The AButton component allows you to use the button as a button switch, with two states (active/inactive). By using the \":is-switch\" and \":model-switch\" props, you can enable the button switch and control the state. The button is rendered as a \"button\" element with the \"aria-pressed\" attribute to indicate the state.",
|
|
43
|
+
"_A_BUTTON_GROUP_SWITCH_HEADER_": "Using Button Switch Mode",
|
|
44
|
+
"_A_BUTTON_GROUP_TEXT_AFTER_BEFORE_DESCRIPTION_": "The AButton component allows you to display additional text inside the button. This can be useful for adding predefined text before or after the actual button text.",
|
|
45
|
+
"_A_BUTTON_GROUP_TEXT_AFTER_BEFORE_HEADER_": "Additional Text Inside the Button",
|
|
46
|
+
"_A_BUTTON_GROUP_TEXT_OBJECT_DESCRIPTION_": "The AButton component allows you to customize the button's text for different devices. By using the \":text\" prop as an object, you can define different text for mobile and desktop devices.",
|
|
47
|
+
"_A_BUTTON_GROUP_TEXT_OBJECT_HEADER_": "Customizable Text for Different Devices",
|
|
48
|
+
"_A_BUTTON_GROUP_TITLE_ARRAY_DESCRIPTION_": "The AButton component allows you to concatenate multiple titles in a prop. By using the \":title\" prop as an array, you can specify multiple elements that will be merged into a single title for the button.",
|
|
49
|
+
"_A_BUTTON_GROUP_TITLE_ARRAY_HEADER_": "Concatenating Titles in a Prop",
|
|
50
|
+
"_A_BUTTON_GROUP_TITLE_HTML_DESCRIPTION_": "The AButton component allows you to display the title as HTML and control the title placement. By using the \":is-title-html\", \":title\", and \":title-placement\" props, you can use HTML titles and set the positioning of the title.",
|
|
51
|
+
"_A_BUTTON_GROUP_TITLE_HTML_EXTRA_DESCRIPTION_": "Display of HTML titles with translation and parameters",
|
|
52
|
+
"_A_BUTTON_GROUP_TITLE_HTML_EXTRA_HEADER_": "In the example below, the title is displayed as translated text with a parameter. The number parameter is passed via the extra attribute.",
|
|
53
|
+
"_A_BUTTON_GROUP_TITLE_HTML_HEADER_": "Displaying HTML Title and Title Placement",
|
|
54
|
+
"_A_BUTTON_PROPS_ARIA_DISABLED_DESCRIPTION_": "Specifies whether the button should be marked as disabled. When set to true, the button is displayed as disabled, and the \"aria-disabled\" accessibility property is added.",
|
|
55
|
+
"_A_BUTTON_PROPS_ARIA_LABEL_DESCRIPTION_": "Specifies the ARIA label for the button. You can use a string, number, or object as the value to set the desired label.",
|
|
56
|
+
"_A_BUTTON_PROPS_ATTRIBUTES_DESCRIPTION_": "Specifies additional attributes for the button. You can use an object to set the desired attributes and their values.",
|
|
57
|
+
"_A_BUTTON_PROPS_CLASS_DESCRIPTION_": "CSS class",
|
|
58
|
+
"_A_BUTTON_PROPS_DISABLED_DESCRIPTION_": "Specifies whether the button should be disabled. When set to true, the button is disabled.",
|
|
59
|
+
"_A_BUTTON_PROPS_EXTRA_DESCRIPTION_": "Extra object for translation",
|
|
60
|
+
"_A_BUTTON_PROPS_HTML_DESCRIPTION_": "Specifies the HTML content to be displayed inside the button.",
|
|
61
|
+
"_A_BUTTON_PROPS_HTML_SCREEN_READER_DESCRIPTION_": "Specifies the HTML for the screen reader content of the button. You can use a string, number, or object as the value to set the desired HTML content.",
|
|
62
|
+
"_A_BUTTON_PROPS_ICON_ATTRIBUTES_DESCRIPTION_": "Specifies additional attributes for the icons. You can use an object to set the desired attributes and their values for the icons.",
|
|
63
|
+
"_A_BUTTON_PROPS_ICON_CLASS_DESCRIPTION_": "Specifies an additional CSS class for the icons.",
|
|
64
|
+
"_A_BUTTON_PROPS_ICON_LEFT_DESCRIPTION_": "Defines the icon on the left side of the button. You can either specify an icon name as a string or define different icons for different devices as an object.",
|
|
65
|
+
"_A_BUTTON_PROPS_ICON_RIGHT_DESCRIPTION_": "Defines the icon on the right side of the button. You can either specify an icon name as a string or define different icons for different devices as an object.",
|
|
66
|
+
"_A_BUTTON_PROPS_ICON_TAG_DESCRIPTION_": "Specifies the custom HTML tag for the icons.",
|
|
67
|
+
"_A_BUTTON_PROPS_ID_DESCRIPTION_": "Specifies a unique ID for the button. If no ID is provided, a unique ID will be automatically generated.",
|
|
68
|
+
"_A_BUTTON_PROPS_IS_SWITCH_DESCRIPTION_": "Specifies whether the button should be used in switch mode. When set to true, the button is rendered as a button switch.",
|
|
69
|
+
"_A_BUTTON_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Specifies whether the title should be interpreted as HTML. When set to true, the title is rendered as HTML.",
|
|
70
|
+
"_A_BUTTON_PROPS_LOADING_ALIGN_DESCRIPTION_": "Specifies the alignment of the loading indicator. You can either specify \"left\" or \"right\" as the value.",
|
|
71
|
+
"_A_BUTTON_PROPS_LOADING_CLASS_DESCRIPTION_": "Specifies the CSS class for the loading state of the button. You can either provide a string with the CSS class or use an object to specify different CSS classes for different states.",
|
|
72
|
+
"_A_BUTTON_PROPS_LOADING_DESCRIPTION_": "Specifies whether the button is in the loading state. When set to true, the button is displayed as \"loading\".",
|
|
73
|
+
"_A_BUTTON_PROPS_MODEL_SWITCH_DESCRIPTION_": "The model value that controls the state of the button switch. When set to true, the button is enabled (pressed=true); otherwise, the button is disabled (pressed=false).",
|
|
74
|
+
"_A_BUTTON_PROPS_PREVENT_DESCRIPTION_": "Specifies whether to prevent the default behavior of event handling functions for the button.",
|
|
75
|
+
"_A_BUTTON_PROPS_SAFE_HTML_DESCRIPTION_": "Enables trust in the passed HTML string and allows its rendering in the button.",
|
|
76
|
+
"_A_BUTTON_PROPS_SAFE_HTML_SCREEN_READER_DESCRIPTION_": "Specifies the safe HTML content for the screen reader area. You can either use a string, number, or object to specify different content for different states.",
|
|
77
|
+
"_A_BUTTON_PROPS_STOP_DESCRIPTION_": "Specifies whether to stop the further propagation of the event.",
|
|
78
|
+
"_A_BUTTON_PROPS_TABINDEX_DESCRIPTION_": "Specifies the tabindex value for the button. The tabindex can be specified as a number or a string.",
|
|
79
|
+
"_A_BUTTON_PROPS_TAG_DESCRIPTION_": "Specifies the HTML tag to use for rendering the button.",
|
|
80
|
+
"_A_BUTTON_PROPS_TEXT_AFTER_DESCRIPTION_": "Defines the text to be displayed after the button text.",
|
|
81
|
+
"_A_BUTTON_PROPS_TEXT_ARIA_HIDDEN_DESCRIPTION_": "Specifies whether the button text should be marked as aria-hidden=\"true\".",
|
|
82
|
+
"_A_BUTTON_PROPS_TEXT_BEFORE_DESCRIPTION_": "Defines the text to be displayed before the button text.",
|
|
83
|
+
"_A_BUTTON_PROPS_TEXT_CLASS_DESCRIPTION_": "Specifies the CSS class to apply to the button text.",
|
|
84
|
+
"_A_BUTTON_PROPS_TEXT_DESCRIPTION_": "A string or object that contains the text for different devices. Use the keys \"mobile\" and \"desktop\" to specify the corresponding text for each device.",
|
|
85
|
+
"_A_BUTTON_PROPS_TEXT_SCREEN_READER_DESCRIPTION_": "Specifies the text to be used for screen readers.",
|
|
86
|
+
"_A_BUTTON_PROPS_TITLE_DESCRIPTION_": "A string or an array of elements to be concatenated into a single title.",
|
|
87
|
+
"_A_BUTTON_PROPS_TITLE_PLACEMENT_DESCRIPTION_": "The placement of the HTML title.",
|
|
88
|
+
"_A_BUTTON_PROPS_TYPE_DESCRIPTION_": "Specifies the type of the button. Allowed values are \"button\", \"submit\", and \"reset\".",
|
|
89
|
+
"_A_BUTTON_SLOT_BUTTON_APPEND_DESCRIPTION_": "The slot that contains the content to be displayed after the text in the button.",
|
|
90
|
+
"_A_BUTTON_SLOT_BUTTON_PREPEND_DESCRIPTION_": "The slot that contains the content to be displayed before the text in the button.",
|
|
91
|
+
"_A_BUTTON_SLOT_BUTTON_TITLE_DESCRIPTION_": "The slot that contains the HTML content to be used as the title for the button.",
|
|
92
|
+
"_A_BUTTON_SLOT_DEFAULT_DESCRIPTION_": "The default slot that contains the content for the button."
|
|
93
|
+
}
|
|
@@ -1,87 +1,93 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"_A_BUTTON_EXAMPLE_BIG_TITLE_": "<div
|
|
2
|
+
"_A_BUTTON_COMPONENT_NAME_": "Кнопка",
|
|
3
|
+
"_A_BUTTON_EVENTS_CLICK_DESCRIPTION_": "Срабатывает при клике на кнопку.",
|
|
4
|
+
"_A_BUTTON_EXAMPLE_BIG_TITLE_": "<div>ЭТО МОЙ <strong>HTML-ВОЛШЕБНАЯ ПОДСКАЗКА!!!!</strong></div><div>Вторая строка</div>",
|
|
5
|
+
"_A_BUTTON_EXAMPLE_BIG_TITLE_{{number}}_": "<div>ЭТО МОЙ <strong>HTML-ВОЛШЕБНАЯ ПОДСКАЗКА!!!!</strong></div><div>Вторая строка</div><div>Номер: {{ number }}</div>",
|
|
6
6
|
"_A_BUTTON_EXAMPLE_HTML_": "<span onclick='alert(\"Aloha\")'>Aloha</button>",
|
|
7
|
-
"_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "
|
|
8
|
-
"_A_BUTTON_GROUP_ARIA_DISABLED_HEADER_": "
|
|
9
|
-
"_A_BUTTON_GROUP_BASIC_DESCRIPTION_": "
|
|
10
|
-
"_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "
|
|
11
|
-
"_A_BUTTON_GROUP_COMPLEX_HEADER_": "
|
|
12
|
-
"_A_BUTTON_GROUP_DISABLED_DESCRIPTION_": "
|
|
13
|
-
"_A_BUTTON_GROUP_DISABLED_HEADER_": "
|
|
14
|
-
"_A_BUTTON_GROUP_GROUP_DESCRIPTION_": "
|
|
15
|
-
"_A_BUTTON_GROUP_GROUP_HEADER_": "
|
|
16
|
-
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_DESCRIPTION_": "
|
|
17
|
-
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_HEADER_": "
|
|
18
|
-
"_A_BUTTON_GROUP_GROUP_SIZES_DESCRIPTION_": "
|
|
19
|
-
"_A_BUTTON_GROUP_GROUP_SIZES_HEADER_": "
|
|
20
|
-
"_A_BUTTON_GROUP_GROUP_VERTICAL_DESCRIPTION_": "
|
|
21
|
-
"_A_BUTTON_GROUP_GROUP_VERTICAL_HEADER_": "
|
|
22
|
-
"_A_BUTTON_GROUP_HTML_DESCRIPTION_": "
|
|
23
|
-
"_A_BUTTON_GROUP_HTML_HEADER_": "
|
|
24
|
-
"_A_BUTTON_GROUP_ICONS_DESCRIPTION_": "
|
|
25
|
-
"_A_BUTTON_GROUP_ICONS_HEADER_": "
|
|
26
|
-
"_A_BUTTON_GROUP_LOADING_DESCRIPTION_": "
|
|
27
|
-
"_A_BUTTON_GROUP_LOADING_HEADER_": "
|
|
28
|
-
"_A_BUTTON_GROUP_OUTLINE_DESCRIPTION_": "
|
|
29
|
-
"_A_BUTTON_GROUP_OUTLINE_HEADER_": "
|
|
30
|
-
"_A_BUTTON_GROUP_SAFE_HTML_DESCRIPTION_": "
|
|
31
|
-
"_A_BUTTON_GROUP_SAFE_HTML_HEADER_": "
|
|
32
|
-
"_A_BUTTON_GROUP_SIZES_DESCRIPTION_": "
|
|
33
|
-
"_A_BUTTON_GROUP_SIZES_HEADER_": "
|
|
34
|
-
"_A_BUTTON_GROUP_SLOT_APPEND_DESCRIPTION_": "
|
|
35
|
-
"_A_BUTTON_GROUP_SLOT_APPEND_HEADER_": "
|
|
36
|
-
"_A_BUTTON_GROUP_SLOT_DEFAULT_DESCRIPTION_": "
|
|
37
|
-
"_A_BUTTON_GROUP_SLOT_DEFAULT_HEADER_": "
|
|
38
|
-
"_A_BUTTON_GROUP_SLOT_PREPEND_DESCRIPTION_": "
|
|
39
|
-
"_A_BUTTON_GROUP_SLOT_PREPEND_HEADER_": "
|
|
40
|
-
"_A_BUTTON_GROUP_SLOT_TITLE_DESCRIPTION_": "
|
|
41
|
-
"_A_BUTTON_GROUP_SLOT_TITLE_HEADER_": "
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
|
|
7
|
+
"_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "Компонент AButton позволяет отображать кнопку в неактивном состоянии и устанавливать соответствующие атрибуты доступности. Для этого можно использовать свойство \"aria-disabled\" для указания неактивного состояния. Это позволяет использовать события, такие как фокус или наведение, при этом кнопка остаётся неактивной для нажатия.",
|
|
8
|
+
"_A_BUTTON_GROUP_ARIA_DISABLED_HEADER_": "Неактивная кнопка с использованием aria-disabled",
|
|
9
|
+
"_A_BUTTON_GROUP_BASIC_DESCRIPTION_": "Существует множество классов CSS, которые можно использовать с кнопкой.",
|
|
10
|
+
"_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "Компонент AButton позволяет использовать различные сложные свойства и события для настройки и управления кнопкой с расширенными функциями. В следующем примере используются несколько свойств и событий для настройки кнопки и управления её состоянием загрузки.",
|
|
11
|
+
"_A_BUTTON_GROUP_COMPLEX_HEADER_": "Использование сложных свойств и событий",
|
|
12
|
+
"_A_BUTTON_GROUP_DISABLED_DESCRIPTION_": "Компонент AButton позволяет отключить кнопку с помощью свойства \"disabled\". Это делает кнопку недоступной для взаимодействия как внешне, так и функционально.",
|
|
13
|
+
"_A_BUTTON_GROUP_DISABLED_HEADER_": "Отключение кнопки",
|
|
14
|
+
"_A_BUTTON_GROUP_GROUP_DESCRIPTION_": "Группируйте ряд кнопок в одну строку.",
|
|
15
|
+
"_A_BUTTON_GROUP_GROUP_HEADER_": "Горизонтальная группировка кнопок",
|
|
16
|
+
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_DESCRIPTION_": "Вы можете группировать кнопки в таблице.",
|
|
17
|
+
"_A_BUTTON_GROUP_GROUP_HORIZONTAL_VERTICAL_HEADER_": "Табличная группировка кнопок",
|
|
18
|
+
"_A_BUTTON_GROUP_GROUP_SIZES_DESCRIPTION_": "Вместо применения классов размеров кнопок к каждой кнопке в группе, просто добавьте .a_btn_group_large или .a_btn_group_small к каждой .a_btn_group, включая каждую вложенную группу, если у вас есть несколько уровней.",
|
|
19
|
+
"_A_BUTTON_GROUP_GROUP_SIZES_HEADER_": "Размер группы кнопок",
|
|
20
|
+
"_A_BUTTON_GROUP_GROUP_VERTICAL_DESCRIPTION_": "Разместите кнопки в вертикальном столбце.",
|
|
21
|
+
"_A_BUTTON_GROUP_GROUP_VERTICAL_HEADER_": "Вертикальная группировка кнопок",
|
|
22
|
+
"_A_BUTTON_GROUP_HTML_DESCRIPTION_": "Компонент AButton позволяет безопасно отображать HTML-содержимое, не доверяя ему полностью. С использованием свойства \"html\" и библиотеки DomPurify переданное HTML-содержимое очищается и безопасно отображается в кнопке.",
|
|
23
|
+
"_A_BUTTON_GROUP_HTML_HEADER_": "Безопасное отображение HTML-содержимого с помощью DomPurify",
|
|
24
|
+
"_A_BUTTON_GROUP_ICONS_DESCRIPTION_": "Компонент AButton позволяет отображать иконки слева и справа от кнопки с помощью свойств \":icon-left\" и \":icon-right\". Вы можете задать разные иконки для разных устройств, чтобы добиться настраиваемого вида.",
|
|
25
|
+
"_A_BUTTON_GROUP_ICONS_HEADER_": "Использование свойств иконок",
|
|
26
|
+
"_A_BUTTON_GROUP_LOADING_DESCRIPTION_": "Компонент AButton позволяет отображать кнопку в состоянии загрузки с индикатором загрузки. Вы также можете задать выравнивание индикатора загрузки. Это может быть полезно для отображения фонового процесса, требующего ожидания завершения пользователем.",
|
|
27
|
+
"_A_BUTTON_GROUP_LOADING_HEADER_": "Кнопка в состоянии загрузки и выравнивание индикатора загрузки",
|
|
28
|
+
"_A_BUTTON_GROUP_OUTLINE_DESCRIPTION_": "Нужна кнопка, но без ярких фоновых цветов? Замените стандартные классы модификаторов на классы .a_btn_outline_*, чтобы удалить все фоновые изображения и цвета на любой кнопке.",
|
|
29
|
+
"_A_BUTTON_GROUP_OUTLINE_HEADER_": "Кнопки-контур",
|
|
30
|
+
"_A_BUTTON_GROUP_SAFE_HTML_DESCRIPTION_": "Компонент AButton позволяет использовать безопасное HTML-содержимое в виде строки внутри кнопки. При включении свойства \"safe-html\" и передаче строки HTML-содержимого, переданный HTML-контент будет обработан с доверием и вставлен непосредственно через JavaScript-атрибут \"innerHTML\".",
|
|
31
|
+
"_A_BUTTON_GROUP_SAFE_HTML_HEADER_": "Использование безопасного HTML-содержимого в виде строки внутри кнопки",
|
|
32
|
+
"_A_BUTTON_GROUP_SIZES_DESCRIPTION_": "Хотите большие или маленькие кнопки? Добавьте .a_btn_large или .a_btn_small для дополнительных размеров.",
|
|
33
|
+
"_A_BUTTON_GROUP_SIZES_HEADER_": "Размеры кнопок",
|
|
34
|
+
"_A_BUTTON_GROUP_SLOT_APPEND_DESCRIPTION_": "Компонент AButton позволяет отображать дополнительное содержимое после текста кнопки с помощью слота \"buttonAppend\". Содержимое, помещенное в слот, будет отображаться после текста кнопки.",
|
|
35
|
+
"_A_BUTTON_GROUP_SLOT_APPEND_HEADER_": "Использование слота \"buttonAppend\"",
|
|
36
|
+
"_A_BUTTON_GROUP_SLOT_DEFAULT_DESCRIPTION_": "Компонент AButton позволяет размещать пользовательский контент внутри кнопки с помощью стандартного слота \":slots='default'\". Содержимое, помещенное в слот, будет отображаться внутри кнопки.",
|
|
37
|
+
"_A_BUTTON_GROUP_SLOT_DEFAULT_HEADER_": "Использование стандартного слота",
|
|
38
|
+
"_A_BUTTON_GROUP_SLOT_PREPEND_DESCRIPTION_": "Компонент AButton позволяет отображать дополнительное содержимое перед текстом кнопки с помощью слота \"buttonPrepend\". Содержимое, помещенное в слот, будет отображаться перед текстом кнопки.",
|
|
39
|
+
"_A_BUTTON_GROUP_SLOT_PREPEND_HEADER_": "Использование слота \"buttonPrepend\"",
|
|
40
|
+
"_A_BUTTON_GROUP_SLOT_TITLE_DESCRIPTION_": "Компонент AButton позволяет определить пользовательский HTML-контент для заголовка кнопки с помощью слота \"buttonTitle\" в сочетании с атрибутом \":is-title-html\". Содержимое, помещенное в слот, будет использоваться как HTML-заголовок для кнопки.",
|
|
41
|
+
"_A_BUTTON_GROUP_SLOT_TITLE_HEADER_": "Использование слота \"buttonTitle\" для HTML-заголовка",
|
|
42
|
+
"_A_BUTTON_GROUP_SWITCH_DESCRIPTION_": "Компонент AButton позволяет использовать кнопку в качестве переключателя с двумя состояниями (включено/выключено). С помощью атрибутов \":is-switch\" и \":model-switch\" вы можете включить режим переключателя и управлять состоянием кнопки. Кнопка рендерится как элемент \"button\" с атрибутом \"aria-pressed\", указывающим состояние.",
|
|
43
|
+
"_A_BUTTON_GROUP_SWITCH_HEADER_": "Использование режима кнопки-переключателя",
|
|
44
|
+
"_A_BUTTON_GROUP_TEXT_AFTER_BEFORE_DESCRIPTION_": "Компонент AButton позволяет отображать дополнительный текст внутри кнопки. Это может быть полезно для добавления предопределенного текста перед или после основного текста кнопки.",
|
|
45
|
+
"_A_BUTTON_GROUP_TEXT_AFTER_BEFORE_HEADER_": "Дополнительный текст внутри кнопки",
|
|
46
|
+
"_A_BUTTON_GROUP_TEXT_OBJECT_DESCRIPTION_": "Компонент AButton позволяет настроить текст кнопки для разных устройств. С помощью атрибута \":text\" в виде объекта вы можете задать разный текст для мобильных и настольных устройств.",
|
|
47
|
+
"_A_BUTTON_GROUP_TEXT_OBJECT_HEADER_": "Настройка текста для разных устройств",
|
|
48
|
+
"_A_BUTTON_GROUP_TITLE_ARRAY_DESCRIPTION_": "Компонент AButton позволяет объединить несколько заголовков в одном атрибуте. С помощью атрибута \":title\" в виде массива вы можете указать несколько элементов, которые будут объединены в единый заголовок для кнопки.",
|
|
49
|
+
"_A_BUTTON_GROUP_TITLE_ARRAY_HEADER_": "Объединение заголовков в одном атрибуте",
|
|
50
|
+
"_A_BUTTON_GROUP_TITLE_HTML_DESCRIPTION_": "Компонент AButton позволяет отображать заголовок в виде HTML и управлять его размещением. С помощью атрибутов \":is-title-html\", \":title\" и \":title-placement\" вы можете использовать HTML-заголовок и задать его расположение.",
|
|
51
|
+
"_A_BUTTON_GROUP_TITLE_HTML_EXTRA_DESCRIPTION_": "Отображение HTML-заголовка с переводом и параметрами",
|
|
52
|
+
"_A_BUTTON_GROUP_TITLE_HTML_EXTRA_HEADER_": "В приведенном ниже примере заголовок отображается как переведенный текст с параметром. Параметр number передается через extra атрибут.",
|
|
53
|
+
"_A_BUTTON_GROUP_TITLE_HTML_HEADER_": "Отображение HTML-заголовка и его размещение",
|
|
54
|
+
"_A_BUTTON_PROPS_ARIA_DISABLED_DESCRIPTION_": "Определяет, должна ли кнопка быть неактивной. Если значение установлено как true, кнопка будет отображаться как неактивная, и будет добавлено свойство доступности \"aria-disabled\".",
|
|
55
|
+
"_A_BUTTON_PROPS_ARIA_LABEL_DESCRIPTION_": "Определяет ARIA-метку для кнопки. Вы можете использовать строку, число или объект в качестве значения для задания желаемой метки.",
|
|
56
|
+
"_A_BUTTON_PROPS_ATTRIBUTES_DESCRIPTION_": "Определяет дополнительные атрибуты для кнопки. Вы можете использовать объект для задания необходимых атрибутов и их значений.",
|
|
57
|
+
"_A_BUTTON_PROPS_CLASS_DESCRIPTION_": "CSS-класс",
|
|
58
|
+
"_A_BUTTON_PROPS_DISABLED_DESCRIPTION_": "Определяет, должна ли кнопка быть отключена. Если значение установлено как true, кнопка будет отключена.",
|
|
59
|
+
"_A_BUTTON_PROPS_EXTRA_DESCRIPTION_": "Дополнительный объект для перевода",
|
|
60
|
+
"_A_BUTTON_PROPS_HTML_DESCRIPTION_": "HTML-контент, который должен быть отображен внутри кнопки.",
|
|
61
|
+
"_A_BUTTON_PROPS_HTML_SCREEN_READER_DESCRIPTION_": "Определяет HTML-контент для чтения экраном кнопки. Вы можете использовать строку, число или объект в качестве значения для задания желаемого HTML-контента.",
|
|
62
|
+
"_A_BUTTON_PROPS_ICON_ATTRIBUTES_DESCRIPTION_": "Определяет дополнительные атрибуты для иконок. Вы можете использовать объект для задания необходимых атрибутов и их значений для иконок.",
|
|
63
|
+
"_A_BUTTON_PROPS_ICON_CLASS_DESCRIPTION_": "Определяет дополнительный CSS-класс для иконок.",
|
|
64
|
+
"_A_BUTTON_PROPS_ICON_LEFT_DESCRIPTION_": "Определяет иконку слева от кнопки. Вы можете указать имя иконки в виде строки или определить разные иконки для разных устройств в виде объекта.",
|
|
65
|
+
"_A_BUTTON_PROPS_ICON_RIGHT_DESCRIPTION_": "Определяет иконку справа от кнопки. Вы можете указать имя иконки в виде строки или определить разные иконки для разных устройств в виде объекта.",
|
|
66
|
+
"_A_BUTTON_PROPS_ICON_TAG_DESCRIPTION_": "Определяет пользовательский HTML-тег для иконок.",
|
|
67
|
+
"_A_BUTTON_PROPS_ID_DESCRIPTION_": "Определяет уникальный идентификатор для кнопки. Если идентификатор не указан, будет автоматически сгенерирован уникальный идентификатор.",
|
|
68
|
+
"_A_BUTTON_PROPS_IS_SWITCH_DESCRIPTION_": "Определяет, должна ли кнопка использоваться в режиме переключателя. Если значение установлено как true, кнопка будет отображаться как кнопка-переключатель.",
|
|
69
|
+
"_A_BUTTON_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Определяет, должен ли заголовок интерпретироваться как HTML. Если значение установлено как true, заголовок будет отображаться как HTML.",
|
|
70
|
+
"_A_BUTTON_PROPS_LOADING_ALIGN_DESCRIPTION_": "Определяет выравнивание индикатора загрузки. Вы можете указать значение \"left\" или \"right\".",
|
|
71
|
+
"_A_BUTTON_PROPS_LOADING_CLASS_DESCRIPTION_": "Определяет CSS-класс для состояния загрузки кнопки. Вы можете указать строку с CSS-классом или использовать объект для указания разных CSS-классов для разных состояний.",
|
|
72
|
+
"_A_BUTTON_PROPS_LOADING_DESCRIPTION_": "Определяет, находится ли кнопка в состоянии загрузки. Если значение установлено как true, кнопка будет отображаться как \"loading\".",
|
|
73
|
+
"_A_BUTTON_PROPS_MODEL_SWITCH_DESCRIPTION_": "Значение модели, которое управляет состоянием переключателя кнопки. Если значение установлено как true, кнопка будет включена (pressed=true), в противном случае кнопка будет отключена (pressed=false).",
|
|
74
|
+
"_A_BUTTON_PROPS_PREVENT_DESCRIPTION_": "Определяет, должно ли быть предотвращено стандартное поведение обработчиков событий для кнопки.",
|
|
75
|
+
"_A_BUTTON_PROPS_SAFE_HTML_DESCRIPTION_": "Включает доверие к переданной HTML-строке и позволяет ее отображать внутри кнопки.",
|
|
76
|
+
"_A_BUTTON_PROPS_SAFE_HTML_SCREEN_READER_DESCRIPTION_": "Определяет безопасный HTML-контент для области считывания экрана. Вы можете указать строку, число или объект для задания разного контента для разных состояний.",
|
|
77
|
+
"_A_BUTTON_PROPS_STOP_DESCRIPTION_": "Определяет, должно ли быть остановлено дальнейшее распространение события.",
|
|
78
|
+
"_A_BUTTON_PROPS_TABINDEX_DESCRIPTION_": "Определяет значение индекса перехода для кнопки. Индекс перехода может быть задан как число или строка.",
|
|
79
|
+
"_A_BUTTON_PROPS_TAG_DESCRIPTION_": "Определяет HTML-тег, который будет использоваться для отображения кнопки.",
|
|
80
|
+
"_A_BUTTON_PROPS_TEXT_AFTER_DESCRIPTION_": "Определяет текст, который должен быть отображен после текста кнопки.",
|
|
81
|
+
"_A_BUTTON_PROPS_TEXT_ARIA_HIDDEN_DESCRIPTION_": "Определяет, должен ли текст кнопки быть помечен как aria-hidden=\"true\".",
|
|
82
|
+
"_A_BUTTON_PROPS_TEXT_BEFORE_DESCRIPTION_": "Определяет текст, который должен быть отображен перед текстом кнопки.",
|
|
83
|
+
"_A_BUTTON_PROPS_TEXT_CLASS_DESCRIPTION_": "Определяет CSS-класс, который будет применен к тексту кнопки.",
|
|
84
|
+
"_A_BUTTON_PROPS_TEXT_DESCRIPTION_": "Строка или объект, содержащий текст для разных устройств. Используйте ключи \"mobile\" и \"desktop\", чтобы указать соответствующий текст для каждого устройства.",
|
|
85
|
+
"_A_BUTTON_PROPS_TEXT_SCREEN_READER_DESCRIPTION_": "Определяет текст, который будет использоваться для считывания экраном.",
|
|
86
|
+
"_A_BUTTON_PROPS_TITLE_DESCRIPTION_": "Строка или массив элементов, которые будут объединены в один заголовок.",
|
|
87
|
+
"_A_BUTTON_PROPS_TITLE_PLACEMENT_DESCRIPTION_": "Позиционирование HTML-заголовка.",
|
|
88
|
+
"_A_BUTTON_PROPS_TYPE_DESCRIPTION_": "Определяет тип кнопки. Допустимые значения: \"button\", \"submit\" и \"reset\".",
|
|
89
|
+
"_A_BUTTON_SLOT_BUTTON_APPEND_DESCRIPTION_": "Слот, который содержит контент, который должен быть отображен после текста кнопки.",
|
|
90
|
+
"_A_BUTTON_SLOT_BUTTON_PREPEND_DESCRIPTION_": "Слот, который содержит контент, который должен быть отображен перед текстом кнопки.",
|
|
91
|
+
"_A_BUTTON_SLOT_BUTTON_TITLE_DESCRIPTION_": "Слот, который содержит HTML-контент, который будет использоваться в качестве заголовка для кнопки.",
|
|
92
|
+
"_A_BUTTON_SLOT_DEFAULT_DESCRIPTION_": "Стандартный слот, который содержит контент для кнопки."
|
|
93
|
+
}
|
package/docs/webpack.config.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const path = require("path");
|
|
2
|
-
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
|
2
|
+
// const CopyWebpackPlugin = require("copy-webpack-plugin");
|
|
3
3
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
4
4
|
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
|
5
5
|
const { VueLoaderPlugin } = require("vue-loader");
|
|
@@ -25,6 +25,9 @@ function resolveAlias(mode) {
|
|
|
25
25
|
"get-contrast-ratio": path.resolve(__dirname, "node_modules/get-contrast-ratio"),
|
|
26
26
|
popperjs: path.resolve(__dirname, "node_modules/@popperjs/core"),
|
|
27
27
|
"tiny-emitter": path.resolve(__dirname, "node_modules/tiny-emitter"),
|
|
28
|
+
dompurify: path.resolve(__dirname, "node_modules/dompurify"),
|
|
29
|
+
tinymce: path.resolve(__dirname, "node_modules/tinymce"),
|
|
30
|
+
"@popperjs/core": path.resolve(__dirname, "node_modules/@popperjs/core"),
|
|
28
31
|
};
|
|
29
32
|
}
|
|
30
33
|
|
|
@@ -116,8 +119,8 @@ module.exports = (env, options) => {
|
|
|
116
119
|
},
|
|
117
120
|
entry: ["regenerator-runtime/runtime.js", "./src/main.js"],
|
|
118
121
|
output: {
|
|
119
|
-
|
|
120
|
-
|
|
122
|
+
path: path.resolve(__dirname, "./dist/"),
|
|
123
|
+
publicPath: "/",
|
|
121
124
|
filename: "bundle.[id].[contenthash].js",
|
|
122
125
|
chunkFilename: "chunk.[id].[contenthash].js",
|
|
123
126
|
asyncChunks: true,
|
|
@@ -140,7 +143,7 @@ module.exports = (env, options) => {
|
|
|
140
143
|
plugins: [
|
|
141
144
|
new CleanWebpackPlugin({
|
|
142
145
|
cleanOnceBeforeBuildPatterns: [],
|
|
143
|
-
cleanAfterEveryBuildPatterns: ["**/*", "!assets/**"],
|
|
146
|
+
cleanAfterEveryBuildPatterns: ["**/*", "!assets/**", "!styles/**"],
|
|
144
147
|
}),
|
|
145
148
|
new VueLoaderPlugin(),
|
|
146
149
|
// new CopyWebpackPlugin({
|
|
@@ -172,8 +175,8 @@ module.exports = (env, options) => {
|
|
|
172
175
|
devServer: {
|
|
173
176
|
historyApiFallback: true,
|
|
174
177
|
static: {
|
|
175
|
-
directory: path.join(__dirname, "
|
|
176
|
-
publicPath: "/
|
|
178
|
+
directory: path.join(__dirname, "dist"),
|
|
179
|
+
publicPath: "/",
|
|
177
180
|
},
|
|
178
181
|
compress: true,
|
|
179
182
|
port: 9000,
|
package/package.json
CHANGED
package/src/AButton/AButton.js
CHANGED
|
File without changes
|
package/test/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Aloha test 4</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<link rel="stylesheet" href="./styles/styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body class="a_text_break">
|
|
10
|
+
<h1>Aloha test 4</h1>
|
|
11
|
+
<div id="app"></div>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|