nmy-ui

# Grid 网格布局

通过基础的24格分栏，快速构建网页布局。

基础布局

8
8
8

栅格间隙

8
8
8

属性偏移

4
4
4
4
4
4

# 基础用法

<n-row class="row"  :gutter="10" align="top" justify="space-between">
  <n-col :span="4" class="col" :offset="4">
    ...
  </n-col>
  <n-col :xs="4" :offset="4" >
    ...
  </n-col>
  <n-col :xs="{span:4,offset:4}">
    ...
  </n-col>
</n-row>

xs , sm 等属性可以直接传入对象: :xs="{span:4,offset:4}"

# n-row Attributes

属性名 含义 类型 必填 默认值
gutter 栅格的间隙，单位为 px String , Number - -
align flex 布局下的垂直对齐方式：top middle bottom String - top
justify flex 布局下的水平排列方式：start end center space-around space-between String - start

# n-col Attributes

属性名 含义 类型 必填 默认值
offset 栅格左侧的间隔格数，间隔内不可以有栅格 number | String - 0
span 栅格占位格数，为 0 时相当于 display: none number | String - -
xs <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 object | number | String - -
sm ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 object | number | String - -
md ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 object | number | String - -
lg ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 object | number | String - -
xl ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 object | number | String - -

# Container 布局容器

容器布局，可快速搭建页面的基本结构，需浏览器支持flex布局。在使用容器布局时，container组件的子组件只能是header，main，footer，sider或container，同时，上述子组件的父组件也只能是container。

基础布局

header
content
footer

<n-layout>
  <n-header>header</n-header>
  <n-content>content</n-content>
  <n-footer>footer</n-footer>
</n-layout>

上中下三栏布局，主体部分带侧边栏

header
sider
content
footer

<n-layout>
  <n-header>header</n-header>
  <n-layout>
    <n-sider>sider</n-sider>
    <n-content>content</n-content>
  </n-layout>
  <n-footer>footer</n-footer>
</n-layout>

左右布局，主体部分分为上中下三部分

sider
header
content
footer

<n-layout>
  <n-sider>sider</n-sider>
  <n-layout>
    <n-header>header</n-header>
    <n-content>content</n-content>
    <n-footer>footer</n-footer>
  </n-layout>
</n-layout>



# Collapse 折叠面板

将内容区域折叠/展开。

展开: [ 1, 2 ]

新闻
经过税务机关3个多月的依法调查核实，群众举报范冰冰“阴阳合同”涉税问题有了明确结果。 税务机关依法向范冰冰作出追缴税款、滞纳金并处以罚款的决定。 社会各界特别是文艺影视工作者坚决支持税务部门依法查处此案，并从中得到教育警示。
财经
经过税务机关3个多月的依法调查核实，群众举报范冰冰“阴阳合同”涉税问题有了明确结果。 税务机关依法向范冰冰作出追缴税款、滞纳金并处以罚款的决定。 社会各界特别是文艺影视工作者坚决支持税务部门依法查处此案，并从中得到教育警示。
体育
经过税务机关3个多月的依法调查核实，群众举报范冰冰“阴阳合同”涉税问题有了明确结果。 税务机关依法向范冰冰作出追缴税款、滞纳金并处以罚款的决定。 社会各界特别是文艺影视工作者坚决支持税务部门依法查处此案，并从中得到教育警示。

# 基本用法

<n-collapse v-model="collapseSelected" :single="true">
  <n-collapse-item name="1">
    <template #title> 新闻 </template>
    ...
  </n-collapse-item>
  <n-collapse-item name="2">
    <template #title> 财经 </template>
    ...
  </n-collapse-item>
  <n-collapse-item name="3">
    <template #title> 体育 </template>
    ...
  </n-collapse-item>
</n-collapse>

# n-collapse Attributes

属性名 含义 类型 必填 默认值
collapseSelected 当前展开 item 的 name 组成的数组。v-model双向数据绑定。 Array - []
single 是否允许同时展开多个 item。 Boolean - true

# n-collapse-item Attributes

属性名 含义 类型 必填 默认值
name item 的 name 属性，唯一且必填。 String true -
title 标题插槽 slot - -
default 列表项插槽 slot - -

← 基础组件 →