docs(layout-sider): expose trigger style

demo/pages/Layout.vue

@@ -6,6 +6,7 @@
       collapse-mode="transform"
       bordered
       show-trigger="bar"
+      trigger-style="top: calc(50% - 64px);"
       v-if="showSider"
     >
       <n-menu

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

@@ -57,10 +57,11 @@ scroll-to
 | collapsed-width | `number` | `48` |  |
 | content-style | `string \| Object` | `undefined` | Style of scrollable content node. |
 | default-collapsed | `boolean` | `false` |  |
+| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, sider 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`, `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 as you expect. |
 | show-content | `boolean` | `true` | If set to `false`, sider content will be invisible. |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | Whether to show the built-in trigger button on sider. |
-| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content |
+| trigger-style | `string \| Object` | `undefined` |  |
 | width | `number` | `272` |  |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` |  |
 

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

@@ -57,11 +57,12 @@ scroll-to
 | collapsed-width | `number` | `48` |  |
 | content-style | `string \| Object` | `undefined` | 可滚动内容节点的样式 |
 | default-collapsed | `boolean` | `false` |  |
+| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条 |
 | position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
 | show-content | `boolean` | `true` | 如果设为 `false`，Sider 的内容将会变透明 |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
+| trigger-style | `string \| Object` | `undefined` |  |
 | width | `number` | `272` |  |
-| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条 |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` |  |
 
 ## Slots

src/layout/src/LayoutSider.tsx

@@ -72,7 +72,7 @@ const layoutSiderProps = {
   scrollbarProps: Object as PropType<
   Partial<ScrollbarProps> & { style: CSSProperties }
   >,
-  triggerStyle: Object as PropType<CSSProperties>,
+  triggerStyle: [String, Object] as PropType<string | CSSProperties>,
   // eslint-disable-next-line vue/prop-name-casing
   'onUpdate:collapsed': [Function, Array] as PropType<
   MaybeArray<(value: boolean) => void>