@next-bricks/data-view 1.12.11 → 1.12.12

package/docs/loading-panel.react.md

@@ -0,0 +1,62 @@
+---
+tagName: data-view.loading-panel
+displayName: WrappedDataViewLoadingPanel
+description: 大屏加载模块展示
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewLoadingPanel
+
+> 大屏加载模块展示
+
+## 导入
+
+```tsx
+import { WrappedDataViewLoadingPanel } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                | 类型      | 必填 | 默认值  | 说明                                       |
+| ------------------- | --------- | ---- | ------- | ------------------------------------------ |
+| customTitle         | `string`  | 否   | -       | 标题                                       |
+| loading             | `boolean` | 否   | -       | 是否加载中，虚拟数据模拟加载过程           |
+| useRealTimeProgress | `boolean` | 否   | `false` | 加载过程是否使用真实数据                   |
+| progress            | `number`  | 否   | -       | 加载进度，区间 [0-100]，使用真实数据时生效 |
+| intervalTime        | `number`  | 否   | `100`   | 每次加载变化的时间间隔，单位 ms            |
+
+## Events
+
+| 事件  | detail | 说明             |
+| ----- | ------ | ---------------- |
+| onEnd | `void` | loading 结束事件 |
+
+## Examples
+
+### Basic
+
+展示虚拟数据模拟加载过程的基本用法。
+
+```tsx
+<WrappedDataViewLoadingPanel
+  customTitle="Hello World!!"
+  loading={false}
+  style={{ height: "300px", display: "block" }}
+/>
+```
+
+### Progress
+
+展示使用真实进度数据及加载结束事件监听的用法。
+
+```tsx
+<WrappedDataViewLoadingPanel
+  customTitle="Hello World!!"
+  progress={60}
+  useRealTimeProgress={true}
+  intervalTime={300}
+  style={{ height: "300px", display: "block" }}
+  onEnd={() => console.log("loading ended")}
+/>
+```

package/docs/modern-style-component-title.md

@@ -1,9 +1,38 @@
-现代风格的组件标题
+---
+tagName: data-view.modern-style-component-title
+displayName: WrappedDataViewModernStyleComponentTitle
+description: 现代风组件标题
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.modern-style-component-title
+
+> 现代风组件标题
+
+## Props
+
+| 属性               | 类型                           | 必填 | 默认值  | 说明             |
+| ------------------ | ------------------------------ | ---- | ------- | ---------------- |
+| hideLeftComponent  | `boolean`                      | 否   | `false` | 是否隐藏左侧装饰 |
+| hideRightComponent | `boolean`                      | 否   | `true`  | 是否隐藏右侧装饰 |
+| componentTitle     | `string`                       | 否   | -       | 组件标题         |
+| titleTextStyle     | `React.CSSProperties`          | 否   | -       | 标题文字样式     |
+| squareColor        | `React.CSSProperties["color"]` | 否   | -       | 装饰颜色         |
+
+## Slots
+
+| 名称        | 说明                                                                      |
+| ----------- | ------------------------------------------------------------------------- |
+| toolbar     | 工具栏区域，在 `hideLeftComponent` 为 `true` 时显示于左侧，否则显示于右侧 |
+| titleSuffix | 标题后缀内容，紧跟标题文字后显示                                          |
 
 ## Examples
 
 ### Basic
 
+展示现代风组件标题的基本用法。
+
 ```yaml preview
 - brick: data-view.modern-style-component-title
   properties:
@@ -16,6 +45,8 @@
 
 ### TitleSuffix && Toolbar slot
 
+展示带工具栏和标题后缀插槽的现代风组件标题。
+
 ```yaml preview
 - brick: data-view.modern-style-component-title
   properties:
@@ -39,7 +70,9 @@
             textContent: titleSuffix
 ```
 
-### hideRightComponent
+### Hide Left Component with Right Decoration
+
+展示隐藏左侧装饰、显示右侧装饰并自定义颜色的现代风组件标题。
 
 ```yaml preview
 - brick: data-view.modern-style-component-title
@@ -47,6 +80,10 @@
     componentTitle: 组件标题
     hideRightComponent: false
     hideLeftComponent: true
+    squareColor: "#4AEAFF"
+    titleTextStyle:
+      color: "#FFFFFF"
+      fontSize: 18px
     style:
       height: 50px
       display: block

package/docs/modern-style-component-title.react.md

@@ -0,0 +1,76 @@
+---
+tagName: data-view.modern-style-component-title
+displayName: WrappedDataViewModernStyleComponentTitle
+description: 现代风组件标题
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewModernStyleComponentTitle
+
+> 现代风组件标题
+
+## 导入
+
+```tsx
+import { WrappedDataViewModernStyleComponentTitle } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性               | 类型                           | 必填 | 默认值  | 说明             |
+| ------------------ | ------------------------------ | ---- | ------- | ---------------- |
+| hideLeftComponent  | `boolean`                      | 否   | `false` | 是否隐藏左侧装饰 |
+| hideRightComponent | `boolean`                      | 否   | `true`  | 是否隐藏右侧装饰 |
+| componentTitle     | `string`                       | 否   | -       | 组件标题         |
+| titleTextStyle     | `React.CSSProperties`          | 否   | -       | 标题文字样式     |
+| squareColor        | `React.CSSProperties["color"]` | 否   | -       | 装饰颜色         |
+
+## Slots
+
+| 名称        | 说明                                                                      |
+| ----------- | ------------------------------------------------------------------------- |
+| toolbar     | 工具栏区域，在 `hideLeftComponent` 为 `true` 时显示于左侧，否则显示于右侧 |
+| titleSuffix | 标题后缀内容，紧跟标题文字后显示                                          |
+
+## Examples
+
+### Basic
+
+展示现代风组件标题的基本用法。
+
+```tsx
+<WrappedDataViewModernStyleComponentTitle
+  componentTitle="组件标题"
+  style={{ height: "50px", display: "block", backgroundColor: "#1c1e21" }}
+/>
+```
+
+### TitleSuffix && Toolbar slot
+
+展示带工具栏和标题后缀插槽的现代风组件标题。
+
+```tsx
+<WrappedDataViewModernStyleComponentTitle
+  componentTitle="组件标题"
+  style={{ height: "50px", display: "block", backgroundColor: "#1c1e21" }}
+>
+  <span slot="toolbar">toolbar</span>
+  <span slot="titleSuffix">titleSuffix</span>
+</WrappedDataViewModernStyleComponentTitle>
+```
+
+### Hide Left Component with Right Decoration
+
+展示隐藏左侧装饰、显示右侧装饰并自定义颜色的现代风组件标题。
+
+```tsx
+<WrappedDataViewModernStyleComponentTitle
+  componentTitle="组件标题"
+  hideRightComponent={false}
+  hideLeftComponent={true}
+  squareColor="#4AEAFF"
+  titleTextStyle={{ color: "#FFFFFF", fontSize: "18px" }}
+  style={{ height: "50px", display: "block", backgroundColor: "#1c1e21" }}
+/>
+```

package/docs/modern-style-page-title.md

@@ -1,9 +1,31 @@
-现代风格的页面标题构件
+---
+tagName: data-view.modern-style-page-title
+displayName: WrappedDataViewModernStylePageTitle
+description: 现代风页面标题
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.modern-style-page-title
+
+> 现代风页面标题
+
+## Props
+
+| 属性            | 类型                  | 必填 | 默认值 | 说明             |
+| --------------- | --------------------- | ---- | ------ | ---------------- |
+| pageTitle       | `string`              | 是   | -      | 页面标题         |
+| description     | `string`              | 否   | -      | 辅助描述         |
+| backgroundStyle | `React.CSSProperties` | 否   | -      | 背景样式         |
+| leftRoundStyle  | `React.CSSProperties` | 否   | -      | 左边圆形装饰样式 |
+| rightRoundStyle | `React.CSSProperties` | 否   | -      | 右边圆形装饰样式 |
 
 ## Examples
 
 ### Basic
 
+展示现代风页面标题的基本用法，包含主标题和辅助描述。
+
 ```yaml preview
 - brick: data-view.modern-style-page-title
   properties:
@@ -13,3 +35,23 @@
       display: block
       background-color: "#1c1e21"
 ```
+
+### Custom Style
+
+展示自定义背景和圆形装饰样式的现代风页面标题。
+
+```yaml preview
+- brick: data-view.modern-style-page-title
+  properties:
+    pageTitle: 智慧城市监控大屏
+    description: "- SMART CITY MONITORING -"
+    backgroundStyle:
+      opacity: 0.8
+    leftRoundStyle:
+      background: "rgba(74, 234, 255, 0.3)"
+    rightRoundStyle:
+      background: "rgba(74, 234, 255, 0.3)"
+    style:
+      display: block
+      background-color: "#0a0e1a"
+```

package/docs/modern-style-page-title.react.md

@@ -0,0 +1,56 @@
+---
+tagName: data-view.modern-style-page-title
+displayName: WrappedDataViewModernStylePageTitle
+description: 现代风页面标题
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewModernStylePageTitle
+
+> 现代风页面标题
+
+## 导入
+
+```tsx
+import { WrappedDataViewModernStylePageTitle } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性            | 类型                  | 必填 | 默认值 | 说明             |
+| --------------- | --------------------- | ---- | ------ | ---------------- |
+| pageTitle       | `string`              | 是   | -      | 页面标题         |
+| description     | `string`              | 否   | -      | 辅助描述         |
+| backgroundStyle | `React.CSSProperties` | 否   | -      | 背景样式         |
+| leftRoundStyle  | `React.CSSProperties` | 否   | -      | 左边圆形装饰样式 |
+| rightRoundStyle | `React.CSSProperties` | 否   | -      | 右边圆形装饰样式 |
+
+## Examples
+
+### Basic
+
+展示现代风页面标题的基本用法，包含主标题和辅助描述。
+
+```tsx
+<WrappedDataViewModernStylePageTitle
+  pageTitle="XX应用大屏"
+  description="- APPLICATION HEALTH MONITORING SCREEN -"
+  style={{ display: "block", backgroundColor: "#1c1e21" }}
+/>
+```
+
+### Custom Style
+
+展示自定义背景和圆形装饰样式的现代风页面标题。
+
+```tsx
+<WrappedDataViewModernStylePageTitle
+  pageTitle="智慧城市监控大屏"
+  description="- SMART CITY MONITORING -"
+  backgroundStyle={{ opacity: 0.8 }}
+  leftRoundStyle={{ background: "rgba(74, 234, 255, 0.3)" }}
+  rightRoundStyle={{ background: "rgba(74, 234, 255, 0.3)" }}
+  style={{ display: "block", backgroundColor: "#0a0e1a" }}
+/>
+```