@para-ui/core 2.1.32 → 2.1.35

package/docs/view/label/codeString.tsx

@@ -0,0 +1,63 @@
+/**
+* @author linhd
+* @date 2022/3/23 8:30 PM
+* @description 标题
+*/
+export const iconLabel = `
+import Label from '@para-ui/core/Label';
+
+<Label
+    label={'标题'}
+/>
+<br />
+<Label
+    label={'标题'}
+    required={true}
+/>
+<br />
+<Label
+    label={'标题'}
+    tooltip={'帮组提示'}
+/>
+<br />
+<Label
+    label={'标题'}
+    required={true}
+    tooltip={'帮组提示'}
+/>
+<br />
+<Label
+    label={'标题'}
+    required={true}
+    tooltip={'帮组提示'}
+    tooltipIcon={<WarningCircle />}
+/>
+`;
+
+export const lineLabel = `
+import Label from '@para-ui/core/Label';
+
+<Label
+    label={'标题'}
+    tooltipType={'line'}
+/>
+<br />
+<Label
+    label={'标题'}
+    required={true}
+    tooltipType={'line'}
+/>
+<br />
+<Label
+    label={'标题'}
+    tooltip={'帮组提示'}
+    tooltipType={'line'}
+/>
+<br />
+<Label
+    label={'标题'}
+    required={true}
+    tooltip={'帮组提示'}
+    tooltipType={'line'}
+/>
+`;

package/docs/view/label/index.tsx

@@ -0,0 +1,82 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Label from 'src/Label';
+import WarningCircle from "@para-ui/icons/WarningCircle";
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {iconLabel, lineLabel} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaLabel: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-label-demo'}>
+            <Title name={'标题'}>代码演示</Title>
+            <CodeBox
+                code={iconLabel}
+                title={'提示带图标的标题'}
+                description={'提示带图标的标题。'}
+            >
+                <Label
+                    label={'标题'}
+                />
+                <br />
+                <Label
+                    label={'标题'}
+                    required={true}
+                />
+                <br />
+                <Label
+                    label={'标题'}
+                    tooltip={'帮组提示'}
+                />
+                <br />
+                <Label
+                    label={'标题'}
+                    required={true}
+                    tooltip={'帮组提示'}
+                />
+                <br />
+                <Label
+                    label={'标题'}
+                    required={true}
+                    tooltip={'帮组提示'}
+                    tooltipIcon={<WarningCircle />}
+                />
+            </CodeBox>
+            <CodeBox
+                code={lineLabel}
+                title={'提示下划线的标题'}
+                description={'提示下划线的标题。'}
+            >
+                <Label
+                    label={'标题'}
+                    tooltipType={'line'}
+                />
+                <br />
+                <Label
+                    label={'标题'}
+                    required={true}
+                    tooltipType={'line'}
+                />
+                <br />
+                <Label
+                    label={'标题'}
+                    tooltip={'帮组提示'}
+                    tooltipType={'line'}
+                />
+                <br />
+                <Label
+                    label={'标题'}
+                    required={true}
+                    tooltip={'帮组提示'}
+                    tooltipType={'line'}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaLabel;

package/docs/view/loading/api.tsx

@@ -0,0 +1,26 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: 'style',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'opacity',
+        desc: '背景透明度',
+        type: 'number',
+        default: '0.7'
+    }
+];
+export default apiData;

package/docs/view/loading/codeString.tsx

@@ -0,0 +1,13 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicLoading = `
+import Loading from '@para-ui/core/Loading';
+
+<div>
+    <p>加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件</p>
+    <Loading />
+</div>
+`;

package/docs/view/loading/index.tsx

@@ -0,0 +1,38 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Loading from 'src/Loading';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicLoading} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaLoading: FunctionComponent = () => {
+    return (
+        <div className={'paraui-loading-demo'}>
+            <Title name={'Loading'}>代码演示</Title>
+            <CodeBox
+                code={basicLoading}
+                title={'基本'}
+                description={'基本。'}
+            >
+                <div>
+                    <p>
+                        加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加
+                        加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件
+                        加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件
+                        载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件
+                        加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加
+                        加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件
+                        加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件
+                        载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件加载组件
+                    </p>
+                    <Loading />
+                </div>
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaLoading;

package/docs/view/menu/api.tsx

@@ -0,0 +1,227 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: 'style',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'color',
+        desc: '颜色',
+        type: 'deep | light',
+        default: 'deep'
+    },
+    {
+        name: 'expansion',
+        desc: '展开 / 收起',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'selectMenu',
+        desc: '当前选中菜单',
+        type: 'string'
+    },
+    {
+        name: 'shrinkOthers',
+        desc: '选中菜单,是否收起其他展开项',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'showExpansion',
+        desc: '显示收缩按钮',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'logoProps',
+        desc: 'logo配置',
+        type: 'LogoProps'
+    },
+    {
+        name: 'menuListProps',
+        desc: '菜单配置',
+        type: 'MenuListProps'
+    },
+    {
+        name: 'footerExpansionProps',
+        desc: '尾部展开参数',
+        type: 'FooterExpansionProps'
+    },
+    {
+        name: 'onClickExpansion',
+        desc: '展开事件',
+        type: '(bol: boolean) => void'
+    },
+    {
+        name: 'onClickMenu',
+        desc: '点击菜单',
+        type: '(item: MenuChildrenProps | false) => void'
+    }
+];
+
+export const apiDataLogoProps: RowsData = [
+    {
+        name: 'className',
+        desc: '样式class',
+        type: 'string'
+    },
+    {
+        name: 'expansion',
+        desc: '展开 / 收起',
+        type: 'boolean'
+    },
+    {
+        name: 'render',
+        desc: '自定义内容',
+        type: 'ReactNode'
+    }
+];
+
+export const apiDataMenuProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'color',
+        desc: '颜色',
+        type: 'deep | light'
+    },
+    {
+        name: 'expansion',
+        desc: '展开 / 收起',
+        type: 'boolean'
+    },
+    {
+        name: 'list',
+        desc: '菜单列表参数',
+        type: 'MenuChildrenProps[]'
+    },
+    {
+        name: 'selectMenu',
+        desc: '当前选中菜单',
+        type: 'string'
+    },
+    {
+        name: 'onClickMenu',
+        desc: '点击菜单',
+        type: '(item: MenuChildrenProps | false) => void'
+    },
+    {
+        name: 'shrinkOthers',
+        desc: '选中菜单,是否收起其他展开项',
+        type: 'boolean'
+    }
+];
+
+export const apiDataMenuChildrenProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'label',
+        desc: '菜单名',
+        type: 'ReactNode'
+    },
+    {
+        name: 'type',
+        desc: '菜单类型',
+        type: 'redirect | router | iframe | snack | snackPage'
+    },
+    {
+        name: 'path',
+        desc: '菜单路径',
+        type: 'string'
+    },
+    {
+        name: 'icon',
+        desc: '菜单图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'component',
+        desc: '菜单组件',
+        type: 'any'
+    },
+    {
+        name: 'children',
+        desc: '子菜单',
+        type: 'MenuChildrenProps[]'
+    },
+    {
+        name: 'idMenuLast',
+        desc: '菜单最后一层所有上下级 一条线',
+        type: 'any'
+    },
+    {
+        name: 'selectMenu',
+        desc: '当前选中菜单',
+        type: 'string'
+    },
+    {
+        name: 'onClickMenu',
+        desc: '点击菜单',
+        type: '(item: MenuChildrenProps | false) => void'
+    },
+    {
+        name: 'shrinkOthers',
+        desc: '选中菜单,是否收起其他展开项',
+        type: 'boolean'
+    }
+];
+
+export const apiDataFooterExpansionProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'expansion',
+        desc: '展开 / 收起',
+        type: 'boolean'
+    },
+    {
+        name: 'expandIcon',
+        desc: '展开图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'shrinkIcon',
+        desc: '收起图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'render',
+        desc: '自定义尾部',
+        type: 'ReactNode'
+    },
+    {
+        name: 'clickExpansion',
+        desc: '展开事件',
+        type: '(bol: boolean) => void'
+    },
+    {
+        name: 'version',
+        desc: '版本号',
+        type: 'ReactNode'
+    }
+]
+
+export default apiData;