feat(layout): sider-position

CHANGELOG.en-US.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+### Feats
+
+- `n-layout` add `sider-placement` prop, closes [#566](https://github.com/TuSimple/naive-ui/issues/566).
+
 ## 2.15.7 (2021-07-25)
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+### Feats
+
+- `n-layout` 增加 `sider-placement` 属性，关闭 [#566](https://github.com/TuSimple/naive-ui/issues/566)
+
 ## 2.15.7 (2021-07-25)
 
 ### Feats

src/layout/demos/enUS/collapse-right.demo.md

@@ -0,0 +1,160 @@
+# Sider Placement
+
+Sometimes you might want to put the collapsed sidebar on the right.
+
+```html
+<n-space vertical size="large">
+  <n-layout has-sider sider-placement="right">
+    <n-layout-sider
+      collapse-mode="width"
+      :collapsed-width="120"
+      :native-scrollbar="true"
+      :width="240"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
+    >
+      <p>
+        Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian
+        Bridge
+      </p>
+    </n-layout-sider>
+    <n-layout-content content-style="padding: 24px"
+      >Pingshan Road</n-layout-content
+    >
+  </n-layout>
+  <n-layout has-sider sider-placement="right">
+    <n-layout-sider
+      collapse-mode="transform"
+      :native-scrollbar="false"
+      :collapsed-width="120"
+      :width="240"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
+    >
+      <n-h2>Handian Bridge</n-h2>
+    </n-layout-sider>
+    <n-layout-content content-style="padding: 24px"
+      >Pingshan Road</n-layout-content
+    >
+  </n-layout>
+  <n-layout has-sider sider-placement="right">
+    <n-layout-sider
+      bordered
+      show-trigger
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="240"
+      :native-scrollbar="false"
+      :inverted="inverted"
+      style="max-height: 320px;"
+    >
+      <n-menu
+        :inverted="inverted"
+        :collapsed-width="64"
+        :collapsed-icon-size="22"
+        :options="menuOptions"
+      />
+    </n-layout-sider>
+    <n-layout style="max-height: 320px;" />
+  </n-layout>
+</n-space>
+```
+
+```js
+import { h, defineComponent } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  BookOutline as BookIcon,
+  PersonOutline as PersonIcon,
+  WineOutline as WineIcon
+} from '@vicons/ionicons5'
+
+function renderIcon (icon) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions = [
+  {
+    label: 'Hear the Wind Sing',
+    key: 'hear-the-wind-sing',
+    icon: renderIcon(BookIcon)
+  },
+  {
+    label: 'Pinball 1973',
+    key: 'pinball-1973',
+    icon: renderIcon(BookIcon),
+    disabled: true,
+    children: [
+      {
+        label: 'Rat',
+        key: 'rat'
+      }
+    ]
+  },
+  {
+    label: 'A Wild Sheep Chase',
+    key: 'a-wild-sheep-chase',
+    disabled: true,
+    icon: renderIcon(BookIcon)
+  },
+  {
+    label: 'Dance Dance Dance',
+    key: 'Dance Dance Dance',
+    icon: renderIcon(BookIcon),
+    children: [
+      {
+        type: 'group',
+        label: 'People',
+        key: 'people',
+        children: [
+          {
+            label: 'Narrator',
+            key: 'narrator',
+            icon: renderIcon(PersonIcon)
+          },
+          {
+            label: 'Sheep Man',
+            key: 'sheep-man',
+            icon: renderIcon(PersonIcon)
+          }
+        ]
+      },
+      {
+        label: 'Beverage',
+        key: 'beverage',
+        icon: renderIcon(WineIcon),
+        children: [
+          {
+            label: 'Whisky',
+            key: 'whisky'
+          }
+        ]
+      },
+      {
+        label: 'Food',
+        key: 'food',
+        children: [
+          {
+            label: 'Sandwich',
+            key: 'sandwich'
+          }
+        ]
+      },
+      {
+        label: 'The past increases. The future recedes.',
+        key: 'the-past-increases-the-future-recedes'
+      }
+    ]
+  }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      menuOptions
+    }
+  }
+})
+```

src/layout/demos/enUS/index.demo-entry.md

@@ -18,6 +18,7 @@ embedded
 absolute
 scrollbar
 collapse
+collapse-right
 inverted
 show-sider-content
 scroll-to
@@ -34,6 +35,7 @@ scroll-to
 | has-sider | `boolean` | `false` | Whether the component has sider inside. If so it must be `true`. |
 | native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content. |
 | position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
+| sider-placement | `'left' \| 'right'` | `left` | The sidebar is displayed on the left or the right side. |
 
 ### Layout Footer Props
 

src/layout/demos/zhCN/collapse-right.demo.md

@@ -0,0 +1,151 @@
+# 折叠侧边栏的位置
+
+有时候你可能想将折叠侧边栏放在右侧。
+
+```html
+<n-space vertical size="large">
+  <n-layout has-sider sider-placement="right">
+    <n-layout-sider
+      collapse-mode="width"
+      :collapsed-width="120"
+      :width="240"
+      :native-scrollbar="true"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
+    >
+      <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
+    </n-layout-sider>
+    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+  </n-layout>
+  <n-layout has-sider sider-placement="right">
+    <n-layout-sider
+      collapse-mode="transform"
+      :collapsed-width="120"
+      :width="240"
+      :native-scrollbar="false"
+      show-trigger="arrow-circle"
+      content-style="padding: 24px"
+      bordered
+    >
+      <n-h2>海淀桥</n-h2>
+    </n-layout-sider>
+    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+  </n-layout>
+  <n-layout has-sider sider-placement="right">
+    <n-layout-sider
+      bordered
+      show-trigger
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="240"
+      :native-scrollbar="false"
+      style="max-height: 320px;"
+    >
+      <n-menu
+        :collapsed-width="64"
+        :collapsed-icon-size="22"
+        :options="menuOptions"
+      />
+    </n-layout-sider>
+    <n-layout style="max-height: 320px;" />
+  </n-layout>
+</n-space>
+```
+
+```js
+import { h, defineComponent } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  BookOutline as BookIcon,
+  PersonOutline as PersonIcon,
+  WineOutline as WineIcon
+} from '@vicons/ionicons5'
+
+function renderIcon (icon) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions = [
+  {
+    label: '且听风吟',
+    key: 'hear-the-wind-sing',
+    icon: renderIcon(BookIcon)
+  },
+  {
+    label: '1973年的弹珠玩具',
+    key: 'pinball-1973',
+    icon: renderIcon(BookIcon),
+    disabled: true,
+    children: [
+      {
+        label: '鼠',
+        key: 'rat'
+      }
+    ]
+  },
+  {
+    label: '寻羊冒险记',
+    key: 'a-wild-sheep-chase',
+    disabled: true,
+    icon: renderIcon(BookIcon)
+  },
+  {
+    label: '舞，舞，舞',
+    key: 'dance-dance-dance',
+    icon: renderIcon(BookIcon),
+    children: [
+      {
+        type: 'group',
+        label: '人物',
+        key: 'people',
+        children: [
+          {
+            label: '叙事者',
+            key: 'narrator',
+            icon: renderIcon(PersonIcon)
+          },
+          {
+            label: '羊男',
+            key: 'sheep-man',
+            icon: renderIcon(PersonIcon)
+          }
+        ]
+      },
+      {
+        label: '饮品',
+        key: 'beverage',
+        icon: renderIcon(WineIcon),
+        children: [
+          {
+            label: '威士忌',
+            key: 'whisky'
+          }
+        ]
+      },
+      {
+        label: '食物',
+        key: 'food',
+        children: [
+          {
+            label: '三明治',
+            key: 'sandwich'
+          }
+        ]
+      },
+      {
+        label: '过去增多，未来减少',
+        key: 'the-past-increases-the-future-recedes'
+      }
+    ]
+  }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      menuOptions
+    }
+  }
+})
+```

src/layout/demos/zhCN/index.demo-entry.md

@@ -18,6 +18,7 @@ border
 absolute
 scrollbar
 collapse
+collapse-right
 inverted
 show-sider-content
 scroll-to
@@ -34,6 +35,7 @@ scroll-to
 | has-sider | `boolean` | `false` | 组件内部是否有边栏，如果有的话必须设为 `true` |
 | native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`，`Layout` 将会对内容使用 `naive-ui` 风格的滚动条 |
 | position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`，`absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
+| sider-placement | `'left' \| 'right'` | `left` | 组件折叠侧边栏在哪一侧 |
 
 ### Layout Footer Props