@fle-ui/next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/components/layout/demos/side/index.tsx

@@ -1,78 +0,0 @@
-/**
- * title: 侧边布局
- * desc: 侧边两列式布局。页面横向空间有限时，侧边导航可收起。
- *
- *   侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部分。
- *
- *   > 🛎️ 想要 3 分钟实现？试试 [ProLayout](https://procomponents.ant.design/components/layout)！
- */
-
-import React, { useState, useEffect } from 'react';
-import { Layout, Menu, Breadcrumb } from 'antd';
-import {
-  DesktopOutlined,
-  PieChartOutlined,
-  FileOutlined,
-  TeamOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
-import './index.less';
-
-const { Header, Content, Footer, Sider } = Layout;
-const { SubMenu } = Menu;
-
-const SideDemo = () => {
-  const [collapsed, setCollapsed] = useState(false);
-
-  const onCollapse = (collapsed: boolean) => {
-    console.log(collapsed);
-    setCollapsed(collapsed);
-  };
-  return (
-    <Layout style={{ minHeight: '100vh' }}>
-      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
-        <div className="logo" />
-        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
-          <Menu.Item key="1" icon={<PieChartOutlined />}>
-            Option 1
-          </Menu.Item>
-          <Menu.Item key="2" icon={<DesktopOutlined />}>
-            Option 2
-          </Menu.Item>
-          <SubMenu key="sub1" icon={<UserOutlined />} title="User">
-            <Menu.Item key="3">Tom</Menu.Item>
-            <Menu.Item key="4">Bill</Menu.Item>
-            <Menu.Item key="5">Alex</Menu.Item>
-          </SubMenu>
-          <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
-            <Menu.Item key="6">Team 1</Menu.Item>
-            <Menu.Item key="8">Team 2</Menu.Item>
-          </SubMenu>
-          <Menu.Item key="9" icon={<FileOutlined />}>
-            Files
-          </Menu.Item>
-        </Menu>
-      </Sider>
-      <Layout className="site-layout">
-        <Header className="site-layout-background" style={{ padding: 0 }} />
-        <Content style={{ margin: '0 16px' }}>
-          <Breadcrumb style={{ margin: '16px 0' }}>
-            <Breadcrumb.Item>User</Breadcrumb.Item>
-            <Breadcrumb.Item>Bill</Breadcrumb.Item>
-          </Breadcrumb>
-          <div
-            className="site-layout-background"
-            style={{ padding: 24, minHeight: 360 }}
-          >
-            Bill is a cat.
-          </div>
-        </Content>
-        <Footer style={{ textAlign: 'center' }}>
-          Ant Design ©2018 Created by Ant UED
-        </Footer>
-      </Layout>
-    </Layout>
-  );
-};
-
-export default SideDemo;

package/components/layout/demos/top.tsx

@@ -1,40 +0,0 @@
-/**
- * title: 上中下布局
- * desc: 最基本的『上-中-下』布局。
- *      一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
- *       典型的页面布局。
- */
-
-import React from 'react';
-import { Layout, Menu, Breadcrumb } from 'antd';
-
-const { Header, Content, Footer } = Layout;
-
-const TopDemo = () => {
-  return (
-    <Layout className="layout">
-      <Header>
-        <div className="logo" />
-        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
-          {new Array(15).fill(null).map((_, index) => {
-            const key = index + 1;
-            return <Menu.Item key={key}>{`nav ${key}`}</Menu.Item>;
-          })}
-        </Menu>
-      </Header>
-      <Content style={{ padding: '0 50px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
-        <div className="site-layout-content">Content</div>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>
-        Ant Design ©2018 Created by Ant UED
-      </Footer>
-    </Layout>
-  );
-};
-
-export default TopDemo;

package/components/layout/demos/topSide.tsx

@@ -1,81 +0,0 @@
-/**
- * title: 顶部-侧边布局
- * desc: 拥有顶部导航及侧边栏的页面，多用于展示类网站。
- */
-
-import React from 'react';
-import { Layout, Menu, Breadcrumb } from 'antd';
-import {
-  UserOutlined,
-  LaptopOutlined,
-  NotificationOutlined,
-} from '@ant-design/icons';
-
-const { SubMenu } = Menu;
-const { Header, Content, Footer, Sider } = Layout;
-
-const TopSideDemo = () => {
-  return (
-    <Layout>
-      <Header className="header">
-        <div className="logo" />
-        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
-          <Menu.Item key="1">nav 1</Menu.Item>
-          <Menu.Item key="2">nav 2</Menu.Item>
-          <Menu.Item key="3">nav 3</Menu.Item>
-        </Menu>
-      </Header>
-      <Content style={{ padding: '0 50px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
-        <Layout
-          className="site-layout-background"
-          style={{ padding: '24px 0' }}
-        >
-          <Sider className="site-layout-background" width={200}>
-            <Menu
-              mode="inline"
-              defaultSelectedKeys={['1']}
-              defaultOpenKeys={['sub1']}
-              style={{ height: '100%' }}
-            >
-              <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
-                <Menu.Item key="1">option1</Menu.Item>
-                <Menu.Item key="2">option2</Menu.Item>
-                <Menu.Item key="3">option3</Menu.Item>
-                <Menu.Item key="4">option4</Menu.Item>
-              </SubMenu>
-              <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
-                <Menu.Item key="5">option5</Menu.Item>
-                <Menu.Item key="6">option6</Menu.Item>
-                <Menu.Item key="7">option7</Menu.Item>
-                <Menu.Item key="8">option8</Menu.Item>
-              </SubMenu>
-              <SubMenu
-                key="sub3"
-                icon={<NotificationOutlined />}
-                title="subnav 3"
-              >
-                <Menu.Item key="9">option9</Menu.Item>
-                <Menu.Item key="10">option10</Menu.Item>
-                <Menu.Item key="11">option11</Menu.Item>
-                <Menu.Item key="12">option12</Menu.Item>
-              </SubMenu>
-            </Menu>
-          </Sider>
-          <Content style={{ padding: '0 24px', minHeight: 280 }}>
-            Content
-          </Content>
-        </Layout>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>
-        Ant Design ©2018 Created by Ant UED
-      </Footer>
-    </Layout>
-  );
-};
-
-export default TopSideDemo;

package/components/layout/demos/topSide2.tsx

@@ -1,82 +0,0 @@
-/**
- * title: 顶部-侧边布局-通栏
- * desc: 同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。
- */
-
-import React from 'react';
-import { Layout, Menu, Breadcrumb } from 'antd';
-import {
-  UserOutlined,
-  LaptopOutlined,
-  NotificationOutlined,
-} from '@ant-design/icons';
-
-const { SubMenu } = Menu;
-const { Header, Content, Sider } = Layout;
-
-const TopSide2Demo = () => {
-  return (
-    <Layout>
-      <Header className="header">
-        <div className="logo" />
-        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
-          <Menu.Item key="1">nav 1</Menu.Item>
-          <Menu.Item key="2">nav 2</Menu.Item>
-          <Menu.Item key="3">nav 3</Menu.Item>
-        </Menu>
-      </Header>
-      <Layout>
-        <Sider width={200} className="site-layout-background">
-          <Menu
-            mode="inline"
-            defaultSelectedKeys={['1']}
-            defaultOpenKeys={['sub1']}
-            style={{ height: '100%', borderRight: 0 }}
-          >
-            <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
-              <Menu.Item key="1">option1</Menu.Item>
-              <Menu.Item key="2">option2</Menu.Item>
-              <Menu.Item key="3">option3</Menu.Item>
-              <Menu.Item key="4">option4</Menu.Item>
-            </SubMenu>
-            <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
-              <Menu.Item key="5">option5</Menu.Item>
-              <Menu.Item key="6">option6</Menu.Item>
-              <Menu.Item key="7">option7</Menu.Item>
-              <Menu.Item key="8">option8</Menu.Item>
-            </SubMenu>
-            <SubMenu
-              key="sub3"
-              icon={<NotificationOutlined />}
-              title="subnav 3"
-            >
-              <Menu.Item key="9">option9</Menu.Item>
-              <Menu.Item key="10">option10</Menu.Item>
-              <Menu.Item key="11">option11</Menu.Item>
-              <Menu.Item key="12">option12</Menu.Item>
-            </SubMenu>
-          </Menu>
-        </Sider>
-        <Layout style={{ padding: '0 24px 24px' }}>
-          <Breadcrumb style={{ margin: '16px 0' }}>
-            <Breadcrumb.Item>Home</Breadcrumb.Item>
-            <Breadcrumb.Item>List</Breadcrumb.Item>
-            <Breadcrumb.Item>App</Breadcrumb.Item>
-          </Breadcrumb>
-          <Content
-            className="site-layout-background"
-            style={{
-              padding: 24,
-              margin: 0,
-              minHeight: 280,
-            }}
-          >
-            Content
-          </Content>
-        </Layout>
-      </Layout>
-    </Layout>
-  );
-};
-
-export default TopSide2Demo;

package/components/layout/index.tsx

@@ -1,25 +0,0 @@
-import InternalLayout, {
-  BasicProps,
-  Content,
-  Footer,
-  Header,
-} from './components/layout';
-import Sider, { SiderProps } from './components/sider';
-
-interface LayoutType extends React.FC<BasicProps> {
-  Header: typeof Header;
-  Footer: typeof Footer;
-  Content: typeof Content;
-  Sider: typeof Sider;
-}
-
-const Layout = InternalLayout as LayoutType;
-
-Layout.Content = Content;
-Layout.Footer = Footer;
-Layout.Header = Header;
-Layout.Sider = Sider;
-
-export type { SiderProps, BasicProps as LayoutProps };
-
-export default Layout;

package/components/layout/layout.md

@@ -1,308 +0,0 @@
----
-title: Layout 布局
-order: 0
-legacy: /layout
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Layout 布局
-
-协助进行页面级整体布局。
-
-## 设计规则
-
-### 尺寸
-
-一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
-
-- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
-- 顶部导航（展示类页面）：一级导航高度 `80px`，二级导航 `56px`。
-- 顶部导航高度的范围计算公式为：`48+8n`。
-- 侧边导航宽度的范围计算公式：`200+8n`。
-
-### 交互
-
-- 一级导航和末级的导航需要在可视化的层面被强调出来；
-- 当前项应该在呈现上优先级最高；
-- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
-- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
-
-### 视觉
-
-导航样式上需要根据信息层级合理的选择样式：
-
-- **大色块强调**
-
-  建议用于底色为深色系时，当前页面父级的导航项。
-
-- **高亮火柴棍**
-
-  当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
-
-- **字体高亮变色**
-
-  从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
-
-- **字体放大**
-
-  `12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
-
-## 组件概述
-
-- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
-- `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
-- `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
-- `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
-- `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
-
-> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。
-
-### 基本结构
-
-<code src="./demos/basic.tsx" />
-
-### 上中下布局
-
-<code src="./demos/top.tsx" />
-
-### 顶部-侧边布局-通栏
-
-<code src="./demos/topSide2.tsx" />
-
-### 顶部-侧边布局
-
-<code src="./demos/topSide.tsx" />
-
-### 侧边布局
-
-<code src="./demos/side/index.tsx" iframe="650px" />
-
-### 自定义触发器
-
-<code src="./demos/customTrigger.tsx" />
-
-### 响应式布局
-
-<code src="./demos/responsive.tsx" />
-
-### 固定头部
-
-<code src="./demos/fixed/index.tsx" iframe="650px"/>
-
-### 固定侧边栏
-
-<code src="./demos/fixedSider/index.tsx" iframe="650px"/>
-
-## API
-
-```bash
-<Layout>
-  <Header>header</Header>
-  <Layout>
-    <Sider>left sidebar</Sider>
-    <Content>main content</Content>
-    <Sider>right sidebar</Sider>
-  </Layout>
-  <Footer>footer</Footer>
-</Layout>
-```
-
-### Layout
-
-布局容器。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| className | 容器 className | string | - |
-| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
-| style | 指定样式 | CSSProperties | - |
-
-> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
-
-### Layout.Sider
-
-侧边栏。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| breakpoint | 触发响应式布局的[断点](/components/grid/#Col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
-| className | 容器 className | string | - |
-| collapsed | 当前收起状态 | boolean | - |
-| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
-| collapsible | 是否可收起 | boolean | false |
-| defaultCollapsed | 是否默认收起 | boolean | false |
-| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
-| style | 指定样式 | CSSProperties | - |
-| theme | 主题颜色 | `light` \| `dark` | `dark` |
-| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - |
-| width | 宽度 | number \| string | 200 |
-| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
-| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - |
-| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
-
-#### breakpoint width
-
-```ts
-{
-  xs: '480px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  xl: '1200px',
-  xxl: '1600px',
-}
-```
-
-<style>
-  [data-theme="dark"] .site-layout-background {
-    background: #141414;
-  }
-  [data-theme="dark"] .site-layout-header-background {
-    background: #1f1f1f;
-  }
-
-  [data-theme="dark"] .site-layout-content {
-    background: #141414;
-  }
-
-   [data-theme="dark"] .site-layout .site-layout-background {
-    background: #141414;
-  }
-
-  [data-theme="dark"] .site-layout-sub-header-background {
-    background: #141414;
-  }
-
-  #layout-basic {
-  text-align: center;
-}
-#layout-basic .ant-layout-header,
-#layout-basic .ant-layout-footer {
-  color: #fff;
-  background: #7dbcea;
-}
-[data-theme="dark"] #layout-basic .ant-layout-header {
-  background: #6aa0c7;
-}
-[data-theme="dark"] #layout-basic .ant-layout-footer {
-  background: #6aa0c7;
-}
-#layout-basic .ant-layout-footer {
-  line-height: 1.5;
-}
-#layout-basic .ant-layout-sider {
-  color: #fff;
-  line-height: 120px;
-  background: #3ba0e9;
-}
-[data-theme="dark"] #layout-basic .ant-layout-sider {
-  background: #3499ec;
-}
-#layout-basic .ant-layout-content {
-  min-height: 120px;
-  color: #fff;
-  line-height: 120px;
-  background: rgba(16, 142, 233, 1);
-}
-[data-theme="dark"] #layout-basic .ant-layout-content {
-  background: #107bcb;
-}
-#layout-basic .ant-layout + .ant-layout {
-  margin-top: 48px;
-}
-
-.site-layout-content {
-  min-height: 280px;
-  padding: 24px;
-  background: #fff;
-}
-#layout-top .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-.ant-row-rtl #layout-top .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-
-#layout-topside2 .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-row-rtl #layout-topside2 .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-
-.site-layout-background {
-  background: #fff;
-}
-  
-
-#layout-topside .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-row-rtl #layout-topside .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-
-.site-layout-background {
-  background: #fff;
-}
-
-
-#layout-customtrigger .trigger {
-  padding: 0 24px;
-  font-size: 18px;
-  line-height: 64px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-#layout-customtrigger .trigger:hover {
-  color: #1890ff;
-}
-
-#layout-customtrigger .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.site-layout .site-layout-background {
-  background: #fff;
-}
-
-
-#layout-responsive .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.site-layout-sub-header-background {
-  background: #fff;
-}
-
-.site-layout-background {
-  background: #fff;
-}
-
-</style>