@operato/scene-tab 1.2.66 → 1.2.82

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.
@@ -1,61 +1,61 @@
1
- # tab-container
1
+ # Tab Container (tab-container)
2
2
 
3
- ## properties
3
+ ## Properties
4
4
 
5
- 1. activeIndex (value-property) : the zero based index of current active card
5
+ 1. activeIndex (value-property)
6
6
 
7
- ## example
7
+ - The current zero-based index of the active card.
8
+ - When this value changes, the data of this component also changes accordingly.
8
9
 
9
- Control the TabContainer layer by triggering events on the rectangular component
10
+ ## Example
10
11
 
11
- > -**Apply a click event to a square component and deliver it to TabContainers** -**If you change the value property of TabContainer, the TabCard will be changed.**
12
+ Attach events to the rectangle components to control the active card in the Tab Container (TabContainer).
13
+
14
+ > - **Attach a click event to the rectangle components and pass it to the Tab Container (TabContainer).**
15
+ > - **Change the value property of the Tab Container (TabContainer), and the Tab Card will be updated.**
12
16
 
13
17
  ![gif][gif-01]
14
18
 
15
19
  [gif-01]: ../images/tab-button-finish-01.gif
16
20
 
17
- 1. It creates TabContainer with three layers.
21
+ 1. Create a Tab Container (TabContainer) with three layers.
18
22
 
19
- ![tab-container][tab-container-create]
23
+ ![Tab Container (TabContainer)][tab-container-create]
20
24
 
21
- 2. Text is put in each layer for distinction.
25
+ 2. Add text to each layer for distinction.
22
26
 
23
- ![tab-container][tab-container-text]
27
+ ![Tab Container (TabContainer)][tab-container-text]
24
28
 
25
- 3. The ID of the TabContainer is designated as 'indoor'.
29
+ 3. Set the ID of the Tab Container (TabContainer) to 'indoor'.
26
30
 
27
- ![tab-container][tab-container-id]
31
+ ![Tab Container (TabContainer)][tab-container-id]
28
32
 
29
- 4. Add button event
33
+ 4. Add button events
30
34
 
31
- - After drawing 3 squares, select 'indoor' as the variable information in the 'effect window'.
32
- (In the variable information, a list of IDs of basic events and components is shown.)
33
- ![buttonEvent][button-02]
35
+ - Draw three rectangles and select 'indoor' in the variable information from the 'Effects Pane'.
36
+ (Variable information shows the default events and a list of component IDs.)
37
+ ![Button Events][button-02]
34
38
 
35
- - Map values for each square. (When clicking the square, data of '0' is passed to the component with the 'indoor' ID.)
36
- - 1layer - 0
37
- - 2layer - 1
38
- - 3layer - 2
39
+ - Map values for each rectangle. (When you click a rectangle, it passes the data '0' to the component with the 'indoor' ID.)
40
+ - 1st layer - 0
41
+ - 2nd layer - 1
42
+ - 3rd layer - 2
39
43
 
40
- ![buttonEvent][button-03]
44
+ ![Button Events][button-03]
41
45
 
42
46
  [button-02]: ../images/button-evnet-mapping-02.png
43
47
  [button-03]: ../images/button-evnet-mapping-03.png
44
48
 
45
- 5. TabContainer setting
49
+ 5. Tab Container (TabContainer) Configuration
46
50
 
47
- - Set the data binding setting of the TabContainer component as shown in the figure below.
48
- (Setting to change its value property when receiving data)
51
+ - Configure the data binding settings of the Tab Container (TabContainer) component as shown in the image below.
52
+ (Change its value property when receiving data.)
49
53
 
50
- ![buttonEvent][tab-container-setting]
54
+ ![Button Events][tab-container-setting]
51
55
 
52
- 6. check result
56
+ 6. Check the Result
53
57
 
54
- - If all settings are complete, you can see that the TabContainer layer changes every time you click the square as shown below.
58
+ - Once all the settings are completed, you can observe that **the Tab Container (TabContainer) changes its layer every time you click a rectangle**.
55
59
  ![gif-01]
56
60
 
57
61
  [gif-01]: ../images/tab-button-finish-01.gif
58
- [tab-container-create]: ../images/tab-container-create-01.png
59
- [tab-container-text]: ../images/tab-container-create-02.png
60
- [tab-container-id]: ../images/tab-container-create-03.png
61
- [tab-container-setting]: ../images/tab-container-setting-01.png
@@ -0,0 +1,61 @@
1
+ # Bekas Tab (tab-container)
2
+
3
+ ## Ciri-ciri
4
+
5
+ 1. activeIndex (ciri-nilai)
6
+
7
+ - Indeks semasa kad aktif berdasarkan sifar.
8
+ - Apabila nilai ini berubah, data komponen ini juga berubah mengikutnya.
9
+
10
+ ## Contoh
11
+
12
+ Sambungkan acara ke komponen segi empat untuk mengawal kad aktif dalam Bekas Tab (TabContainer).
13
+
14
+ > - **Sambungkan acara klik ke komponen segi empat dan teruskan ke Bekas Tab (TabContainer).**
15
+ > - **Ubah nilai ciri Tab Container (TabContainer), dan Kad Tab akan dikemaskini.**
16
+
17
+ ![gif][gif-01]
18
+
19
+ [gif-01]: ../images/tab-button-finish-01.gif
20
+
21
+ 1. Cipta Bekas Tab (TabContainer) dengan tiga lapisan.
22
+
23
+ ![Bekas Tab (TabContainer)][tab-container-create]
24
+
25
+ 2. Tambahkan teks kepada setiap lapisan untuk membezakannya.
26
+
27
+ ![Bekas Tab (TabContainer)][tab-container-text]
28
+
29
+ 3. Tetapkan ID Bekas Tab (TabContainer) kepada 'indoor'.
30
+
31
+ ![Bekas Tab (TabContainer)][tab-container-id]
32
+
33
+ 4. Tambah acara butang
34
+
35
+ - Lukis tiga segi empat dan pilih 'indoor' dalam maklumat pembolehubah dari 'Bahagian Kesan'.
36
+ (Maklumat pembolehubah menunjukkan acara asas dan senarai ID komponen.)
37
+ ![Acara Butang][button-02]
38
+
39
+ - Peta nilai untuk setiap segi empat. (Apabila anda mengklik segi empat, ia akan menghantar data '0' kepada komponen dengan ID 'indoor'.)
40
+ - Lapisan 1 - 0
41
+ - Lapisan 2 - 1
42
+ - Lapisan 3 - 2
43
+
44
+ ![Acara Butang][button-03]
45
+
46
+ [button-02]: ../images/button-evnet-mapping-02.png
47
+ [button-03]: ../images/button-evnet-mapping-03.png
48
+
49
+ 5. Konfigurasi Bekas Tab (TabContainer)
50
+
51
+ - Konfigurasikan tetapan pengikatan data komponen Bekas Tab (TabContainer) seperti yang ditunjukkan dalam imej di bawah.
52
+ (Tukar ciri nilai ketika menerima data.)
53
+
54
+ ![Acara Butang][tab-container-setting]
55
+
56
+ 6. Periksa Keputusan
57
+
58
+ - Setelah semua tetapan selesai, anda boleh mengamati bahawa **Bekas Tab Container (TabContainer) menukar lapisannya setiap kali anda mengklik segi empat**.
59
+ ![gif-01]
60
+
61
+ [gif-01]: ../images/tab-button-finish-01.gif
@@ -1,63 +1,61 @@
1
- # tab-container
1
+ # 标签容器(tab-container
2
2
 
3
- ## properties
3
+ ## 属性
4
4
 
5
- 1. activeIndex (value-property) : 当前活动卡的零基索引
5
+ 1. activeIndex(值属性)
6
6
 
7
- ## example
7
+ - 当前活动卡片的从零开始的索引。
8
+ - 当此值更改时,此组件的数据也会相应更改。
8
9
 
9
- 通过触发矩形组件上的事件来控制室内层
10
+ ## 示例
10
11
 
11
- > - **将矩形组件的 click 事件传递到 TabContainer 组件**
12
- > - **更改 TabContainer 组件的 value 属性 TabCard 会发生变化**
12
+ 附加事件到矩形组件以控制标签容器(TabContainer)中的活动卡片。
13
+
14
+ > - **将点击事件附加到矩形组件并传递给标签容器(TabContainer)。**
15
+ > - **更改标签容器(TabContainer)的值属性,标签卡片将更新。**
13
16
 
14
17
  ![gif][gif-01]
15
18
 
16
19
  [gif-01]: ../images/tab-button-finish-01.gif
17
20
 
18
- 1. 创建具有三层的 tab-container
21
+ 1. 创建一个具有三个层的标签容器(TabContainer)。
19
22
 
20
- ![tab-container][tab-container-create]
23
+ ![标签容器(TabContainer)][tab-container-create]
21
24
 
22
- 2. 为了区分为每层更改显示层数
25
+ 2. 为区分每个层添加文本。
23
26
 
24
- ![tab-container][tab-container-text]
27
+ ![标签容器(TabContainer)][tab-container-text]
25
28
 
26
- 3. 指定室内地图的 ID。
29
+ 3. 将标签容器(TabContainer)的 ID 设置为'indoor'
27
30
 
28
- ![tab-container][tab-container-id]
31
+ ![标签容器(TabContainer)][tab-container-id]
29
32
 
30
- 4. 增加按钮
33
+ 4. 添加按钮事件
31
34
 
32
- - 绘制 3 个矩形后,在“效果窗口”中的点击事件中 'indoor' 作为变量信息。
33
- (在变量信息中,显示基本事件处理方法和组件的 ID 的列表。)
34
- ![buttonEvent][button-02]
35
+ - 绘制三个矩形,然后从'效果面板'中选择'indoor'作为变量信息。
36
+ (变量信息显示默认事件和组件 ID 列表。)
37
+ ![按钮事件][button-02]
35
38
 
36
- - 每个矩形的地图值。 (单击矩形时,数据“0”将传递到具有 'indoor' ID 的组件。)
37
- - 1 - 0
38
- - 2 - 1
39
- - 3 - 2
39
+ - 为每个矩形映射值。 (当您点击矩形时,它将将数据'0'传递给具有'indoor' ID 的组件。)
40
+ - 1 - 0
41
+ - 2 - 1
42
+ - 3 - 2
40
43
 
41
- ![buttonEvent][button-03]
44
+ ![按钮事件][button-03]
42
45
 
43
46
  [button-02]: ../images/button-evnet-mapping-02.png
44
47
  [button-03]: ../images/button-evnet-mapping-03.png
45
48
 
46
- 5. tab-container 配置
47
-
48
- - 如下图设置室内地图组件的数据绑定设置。
49
- (设置为在接收数据时更改其 value 属性)
49
+ 5. 标签容器(TabContainer)配置
50
50
 
51
- ![buttonEvent][tab-container-setting]
51
+ - 将标签容器(TabContainer)组件的数据绑定设置配置如下图所示。
52
+ (接收数据时更改其值属性。)
52
53
 
53
- 6. 确认结果
54
+ ![按钮事件][tab-container-setting]
54
55
 
55
- - 如果所有设置均已完成,则每次单击矩形时,都可以看到室内地图图层发生变化,如下所示。
56
- ![gif-01]
56
+ 6. 检查结果
57
57
 
58
- [gif-01]: ../images/tab-button-finish-01.gif
58
+ - 一旦所有设置完成,您将观察到**每次单击矩形时,标签容器(TabContainer)都会更改其层**。
59
+ ![gif-01]
59
60
 
60
- [tab-container-create]: ../images/tab-container-create-01.png
61
- [tab-container-text]: ../images/tab-container-create-02.png
62
- [tab-container-id]: ../images/tab-container-create-03.png
63
- [tab-container-setting]: ../images/tab-container-setting-01.png
61
+ [gif-01]: ../images/tab-button-finish-01.gif
@@ -0,0 +1,31 @@
1
+ # タブコンポーネント(tab)
2
+
3
+ ユーザーインタラクションを介してタブコンテナを制御するためのコンポーネントです。対象のタブコンテナのカードをボタンとして表現し、ユーザーがボタンをクリックすると、そのボタンに対応するカードがタブコンテナの前面に表示されます。
4
+
5
+ ## プロパティ
6
+
7
+ 1. タブ参照(reference)
8
+
9
+ - このタブコンポーネントで制御する対象のタブコンテナを指定します。
10
+
11
+ 2. アクティブタブインデックス(activeIndex)
12
+
13
+ - 現在アクティブなカードのゼロベースのインデックスです。
14
+ - このコンポーネントの値プロパティとして、この値が変更されると、タブコンテナのアクティブなカードが変更されます。
15
+ - このコンポーネントのデータ値もこの値に合わせて変更されます。
16
+
17
+ 3. アクティブタブ塗りつぶしスタイル(activeFillStyle)
18
+
19
+ - アクティブなインデックスに対応するボタンに塗りつぶす色を指定します。
20
+
21
+ 4. アクティブタブフォントカラー(activeFontColor)
22
+
23
+ - アクティブなインデックスに対応するボタンのテキスト色を指定します。
24
+
25
+ 5. アクティブタブボーダーカラー(activeLineColor)
26
+
27
+ - アクティブなインデックスに対応するボタンの境界線の色を指定します。
28
+
29
+ 6. アクティブタブボーダー幅(activeLineWidth)
30
+
31
+ - アクティブなインデックスに対応するボタンの境界線の幅を指定します。
@@ -1,14 +1,32 @@
1
- # tab[ko]
1
+ # 탭 컴포넌트 (tab)
2
2
 
3
- ![Container][Container-04]
4
-
3
+ 탭 컨테이너를 사용자 인터랙션으로 컨트롤하기위한 컴포넌트이다.
4
+ 대상 컨테이너의 카드들을 버튼으로 표현하며, 사용자가 클릭하는 버튼에 해당하는 카드가 탭 컨테이너 전면에 보이게 된다.
5
5
 
6
+ ## properties
6
7
 
7
- - Category : Container
8
+ 1. 참조(reference)
8
9
 
9
- [Container-04]: ../images/container-04.png
10
+ - 이 탭 컴포넌트로 컨트롤 하고자하는 대상 탭컨테이너를 지정한다.
10
11
 
12
+ 2. 활성탭인덱스(activeIndex) - value-property
11
13
 
12
- ## properties
14
+ - 현재 활성화된 카드의 0 기반 인덱스이다.
15
+ - 이 컴포넌트의 value-property로서 이 값이 변경되면 탭 컨테이너의 활성 카드가 변경된다.
16
+ - 이 컴포넌트의 data 값도 이 값과 동일하게 변경된다.
17
+
18
+ 3. 활성탭 채우기 스타일(activeFillStyle)
19
+
20
+ - 활성화된 인덱스에 해당하는 버튼에 채워지는 색상을 지정한다.
21
+
22
+ 4. 활성탭 글씨 색상(activeFontColor)
23
+
24
+ - 활성화된 인덱스에 해당하는 버튼의 글자 색상을 지정한다.
25
+
26
+ 5. 활성탭 테두리 색상(activeLineColor)
27
+
28
+ - 활성화된 인덱스에 해당하는 버튼의 테두리 색상을 지정한다.
29
+
30
+ 6. 활성탭 테두리 굵기(activeLineWidth)
13
31
 
14
- ###
32
+ - 활성화된 인덱스에 해당하는 버튼의 테두리 굵기를 지정한다.
@@ -1,13 +1,31 @@
1
- # tab[en]
1
+ # Tab Component (tab)
2
2
 
3
- ![Container][Container-04]
4
- Tab
3
+ A component used to control a tab container through user interaction. It represents the cards of the target tab container as buttons, and when a user clicks on a button, the card corresponding to that button is displayed at the forefront of the tab container.
5
4
 
5
+ ## Properties
6
6
 
7
- - Category : Container
7
+ 1. Tab Reference (reference)
8
8
 
9
- [Container-04]: ../images/container-04.png
9
+ - Specifies the target tab container to be controlled by this tab component.
10
10
 
11
- ## properties
11
+ 2. Active Tab Index (activeIndex)
12
12
 
13
- ###
13
+ - The zero-based index of the currently active card.
14
+ - As a value property of this component, when this value changes, the active card of the tab container changes.
15
+ - The data value of this component also changes to match this value.
16
+
17
+ 3. Active Tab Fill Style (activeFillStyle)
18
+
19
+ - Specifies the color to fill the button corresponding to the active index.
20
+
21
+ 4. Active Tab Font Color (activeFontColor)
22
+
23
+ - Specifies the text color of the button corresponding to the active index.
24
+
25
+ 5. Active Tab Border Color (activeLineColor)
26
+
27
+ - Specifies the border color of the button corresponding to the active index.
28
+
29
+ 6. Active Tab Border Width (activeLineWidth)
30
+
31
+ - Specifies the border width of the button corresponding to the active index.
@@ -0,0 +1,31 @@
1
+ # Komponen Tab (tab)
2
+
3
+ Sebuah komponen yang digunakan untuk mengawal tab container melalui interaksi pengguna. Ia mewakili kad-kad dalam tab container sasaran sebagai butang, dan apabila pengguna mengklik butang, kad yang sepadan dengan butang tersebut akan dipaparkan di hadapan tab container.
4
+
5
+ ## Ciri-ciri
6
+
7
+ 1. Rujukan Tab (reference)
8
+
9
+ - Menentukan tab container sasaran yang ingin dikawal oleh komponen tab ini.
10
+
11
+ 2. Indeks Tab Aktif (activeIndex)
12
+
13
+ - Indeks berasaskan sifar bagi kad yang kini aktif.
14
+ - Sebagai ciri nilai komponen ini, apabila nilai ini berubah, kad aktif dalam tab container juga berubah.
15
+ - Nilai data komponen ini juga berubah untuk sepadan dengan nilai ini.
16
+
17
+ 3. Gaya Isi Tab Aktif (activeFillStyle)
18
+
19
+ - Menentukan warna untuk mengisi butang yang sepadan dengan indeks aktif.
20
+
21
+ 4. Warna Fon Tab Aktif (activeFontColor)
22
+
23
+ - Menentukan warna teks butang yang sepadan dengan indeks aktif.
24
+
25
+ 5. Warna Sempadan Tab Aktif (activeLineColor)
26
+
27
+ - Menentukan warna sempadan butang yang sepadan dengan indeks aktif.
28
+
29
+ 6. Lebar Sempadan Tab Aktif (activeLineWidth)
30
+
31
+ - Menentukan lebar sempadan butang yang sepadan dengan indeks aktif.
@@ -1,13 +1,31 @@
1
- # tab[zh]
2
- ![Container][Container-04]
3
- 标签
1
+ # 选项卡组件(tab
4
2
 
3
+ 这是一个用于通过用户交互控制选项卡容器的组件。它将目标选项卡容器的卡片表示为按钮,当用户单击按钮时,与该按钮对应的卡片将显示在选项卡容器的最前面。
5
4
 
6
- - 类型:集装箱
5
+ ## 属性
7
6
 
8
- [Container-04]: ../images/container-04.png
7
+ 1. 选项卡引用(reference)
9
8
 
9
+ - 指定要由此选项卡组件控制的目标选项卡容器。
10
10
 
11
- ## properties
11
+ 2. 活动选项卡索引(activeIndex)
12
12
 
13
- ###
13
+ - 当前活动卡片的基于零的索引。
14
+ - 作为此组件的值属性,当此值更改时,选项卡容器的活动卡片也会更改。
15
+ - 此组件的数据值也会与此值匹配而更改。
16
+
17
+ 3. 活动选项卡填充样式(activeFillStyle)
18
+
19
+ - 指定要填充到与活动索引对应的按钮的颜色。
20
+
21
+ 4. 活动选项卡字体颜色(activeFontColor)
22
+
23
+ - 指定与活动索引对应的按钮的文本颜色。
24
+
25
+ 5. 活动选项卡边框颜色(activeLineColor)
26
+
27
+ - 指定与活动索引对应的按钮的边框颜色。
28
+
29
+ 6. 活动选项卡边框宽度(activeLineWidth)
30
+
31
+ - 指定与活动索引对应的按钮的边框宽度。
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@operato/scene-tab",
3
3
  "description": "Tab style container for Things Scene",
4
4
  "author": "heartyoh",
5
- "version": "1.2.66",
5
+ "version": "1.2.82",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
8
8
  "license": "MIT",
@@ -57,5 +57,5 @@
57
57
  "prettier --write"
58
58
  ]
59
59
  },
60
- "gitHead": "7216f5867ad09928146234ddad5fb188023f66fe"
60
+ "gitHead": "12e8c24333b53bcd5a50fca4601bc7acd16390c4"
61
61
  }