at-layout

简介

AT 布局

使用说明

布局包括整体式和卡片式。

示例

import Layout from '@txdfe/at-layout';
import { ConfigProvider, locale, Card } from '@txdfe/at';
const enUS = locale['en-us'];

const LayoutSidebar = () => (
  <>
    <div style={{ width: '100%', height: '100%', background: '#888' }}>
      Sidebar
    </div>
  </>
);

const LayoutMain = () => (
  <>
    <div style={{ width: '100%', height: '100%', background: '#888' }}>
      Main
    </div>
  </>
);

const Demo = () => {
  const prefix = 'layout-whole-demo-1';

  return (
      <div className={prefix}>
        <Layout
          type="whole1"
          sidebar={<LayoutNav />}
          main={<LayoutMain />}
        />
      </div>
  );
}

API

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | type | string | whole1, whole2, whole3, whole4, card1, card2, card3, card4, card5, card6, card7 | whole1 | 主要内容 | | main | JSXElement | 必填 | null | 主要内容 | | sidebar | JSXElement | 可选 | null | 边栏 |