feat(n-layout): add content-class collapsed-trigger-class trigger-class prop (#5274)

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -13,6 +13,7 @@
 
 - `n-tree` adds `treeGetClickTarget` method to get click target of node click event, closes [#5375](https://github.com/tusen-ai/naive-ui/issues/5375).
 - `n-space` adds `item-class` prop.
+- `n-layout` adds `content-class`, `collapsed-trigger-class`, `trigger-class` props.
 
 ## 2.35.0
 

CHANGELOG.zh-CN.md

@@ -8,11 +8,12 @@
 - 修复 `n-tree` 在 `disabled` 的情况下不显示选中节点的样式
 - 修复 `n-tree` `virtual-scroll` 空数据占位符丢失
 - 修复 `n-watermark` 组件中的 `content` 属性为空时，无法清空水印内容
-- `n-space` 新增 `item-class` 属性
 
 ### Features
 
 - `n-tree` 导出 `treeGetClickTarget` 函数，判断点击位置，关闭 [#5375](https://github.com/tusen-ai/naive-ui/issues/5375)
+- `n-space` 新增 `item-class` 属性
+- `n-layout` 新增 `content-class`、`collapsed-trigger-class`、`trigger-class` 属性
 
 ## 2.35.0
 

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

@@ -30,6 +30,7 @@ scroll-to.vue
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| content-class | `string` | `undefined` | Class of scrollable content node. |
 | content-style | `string \| Object` | `undefined` | Style of scrollable content node. |
 | embedded | `boolean` | `false` | Use darker background to show a embedded effect. Only work for light theme. |
 | has-sider | `boolean` | `false` | Whether the component has sider inside. If so it must be `true`. |
@@ -62,8 +63,10 @@ scroll-to.vue
 | bordered | `boolean` | `false` | Whether to show the border. |
 | collapse-mode | `'transform' \| 'width'` | `'transform'` | If set to `'width'`, the sider's content width will be actually collapsed. If set to `'transform'`, the sider will only move it's position and won't change its content width. |
 | collapsed | `boolean` | `undefined` | Whether the sider is collapsed. It only works for when `position` is `'static'`. |
+| collapsed-trigger-class | `string` | `undefined` | Trigger class when collapsed. |
 | collapsed-trigger-style | `string \| Object` | `undefined` | Trigger style when collapsed. |
 | collapsed-width | `number` | `48` | Folded width. |
+| content-class | `string` | `undefined` | Class of scrollable content node. |
 | content-style | `string \| Object` | `undefined` | Style of scrollable content node. |
 | default-collapsed | `boolean` | `false` | Default collapsed state in uncontrolled mode. |
 | inverted | `boolean` | `false` | Whether to use inverted background. |
@@ -72,6 +75,7 @@ scroll-to.vue
 | scrollbar-props | `object` | `undefined` | See [Scrollbar props](scrollbar#Scrollbar-Props) |
 | show-collapsed-content | `boolean` | `true` | Whether to show content in sider after it is collapsed. |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | Whether to show the built-in trigger button on sider. |
+| trigger-class | `string` | `undefined` | Trigger class. |
 | trigger-style | `string \| Object` | `undefined` | Trigger style. |
 | width | `number \| string` | `272` | Width CSS value. When it is number, px will be added. |
 | on-after-enter | `() => void` | `undefined` | Callback after it's expanded. |

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

@@ -31,6 +31,7 @@ keep-alive-debug.vue
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| content-class | `string` | `undefined` | 可滚动内容节点的类名 |
 | content-style | `string \| Object` | `undefined` | 可滚动内容节点的样式 |
 | embedded | `boolean` | `false` | 使用更深的背景色展现嵌入效果，只对亮色主题生效 |
 | has-sider | `boolean` | `false` | 组件内部是否有边栏，如果有的话必须设为 `true` |
@@ -63,8 +64,10 @@ keep-alive-debug.vue
 | bordered | `boolean` | `false` | 是否显示边框 |
 | collapse-mode | `'transform' \| 'width'` | `'transform'` | 如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度 |
 | collapsed | `boolean` | `undefined` | 边栏是否折叠。只在 `position` 为 `'static'` 时生效 |
+| collapsed-trigger-class | `string` | `undefined` | 折叠时触发器类名 |
 | collapsed-trigger-style | `string \| Object` | `undefined` | 折叠时触发器样式 |
 | collapsed-width | `number` | `48` | 折叠宽度 |
+| content-class | `string` | `undefined` | 可滚动内容节点的类名 |
 | content-style | `string \| Object` | `undefined` | 可滚动内容节点的样式 |
 | default-collapsed | `boolean` | `false` | 非受控模式下的默认折叠状态 |
 | inverted | `boolean` | `false` | 使用反转背景色 |
@@ -73,6 +76,7 @@ keep-alive-debug.vue
 | scrollbar-props | `object` | `undefined` | 属性参考 [Scrollbar props](scrollbar#Scrollbar-Props) |
 | show-collapsed-content | `boolean` | `true` | 是否在 `sider` 折叠后展示内部内容 |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
+| trigger-class | `string` | `undefined` | 触发器类名 |
 | trigger-style | `string \| Object` | `undefined` | 触发器样式 |
 | width | `number \| string` | `272` | 宽度的 CSS 值，为数字时会添加 px |
 | on-after-enter | `() => void` | `undefined` | 完成展开后的回调 |

src/layout/src/Layout.tsx

@@ -29,6 +29,7 @@ export const layoutProps = {
   },
   scrollbarProps: Object as PropType<Partial<ScrollbarProps>>,
   onScroll: Function as PropType<(e: Event) => void>,
+  contentClass: String,
   contentStyle: {
     type: [String, Object] as PropType<string | CSSProperties>,
     default: ''
@@ -160,7 +161,10 @@ export function createLayoutComponent (isContent: boolean) {
           {this.nativeScrollbar ? (
             <div
               ref="scrollableElRef"
-              class={`${mergedClsPrefix}-layout-scroll-container`}
+              class={[
+                `${mergedClsPrefix}-layout-scroll-container`,
+                this.contentClass
+              ]}
               style={[this.contentStyle, hasSiderStyle] as any}
               onScroll={this.handleNativeElScroll}
             >
@@ -173,6 +177,7 @@ export function createLayoutComponent (isContent: boolean) {
               ref="scrollbarInstRef"
               theme={this.mergedTheme.peers.Scrollbar}
               themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
+              contentClass={this.contentClass}
               contentStyle={[this.contentStyle, hasSiderStyle] as any}
             >
               {this.$slots}

src/layout/src/LayoutSider.tsx

@@ -39,6 +39,7 @@ export const layoutSiderProps = {
     type: [Number, String] as PropType<string | number>,
     default: 272
   },
+  contentClass: String,
   contentStyle: {
     type: [String, Object] as PropType<string | CSSProperties>,
     default: ''
@@ -68,7 +69,9 @@ export const layoutSiderProps = {
   scrollbarProps: Object as PropType<
   Partial<ScrollbarProps> & { style: CSSProperties }
   >,
+  triggerClass: String,
   triggerStyle: [String, Object] as PropType<string | CSSProperties>,
+  collapsedTriggerClass: String,
   collapsedTriggerStyle: [String, Object] as PropType<string | CSSProperties>,
   'onUpdate:collapsed': [Function, Array] as PropType<
   MaybeArray<(value: boolean) => void>
@@ -307,6 +310,7 @@ export default defineComponent({
             ref="scrollbarInstRef"
             style={this.scrollContainerStyle}
             contentStyle={this.contentStyle}
+            contentClass={this.contentClass}
             theme={this.mergedTheme.peers.Scrollbar}
             themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
             // here is a hack, since in light theme the scrollbar color is dark,
@@ -324,7 +328,10 @@ export default defineComponent({
           </NScrollbar>
         ) : (
           <div
-            class={`${mergedClsPrefix}-layout-sider-scroll-container`}
+            class={[
+              `${mergedClsPrefix}-layout-sider-scroll-container`,
+              this.contentClass
+            ]}
             onScroll={this.handleNativeElScroll}
             style={[
               this.scrollContainerStyle,
@@ -342,6 +349,9 @@ export default defineComponent({
           showTrigger === 'bar' ? (
             <ToggleBar
               clsPrefix={mergedClsPrefix}
+              class={
+                mergedCollapsed ? this.collapsedTriggerClass : this.triggerClass
+              }
               style={
                 mergedCollapsed ? this.collapsedTriggerStyle : this.triggerStyle
               }
@@ -350,6 +360,9 @@ export default defineComponent({
           ) : (
             <ToggleButton
               clsPrefix={mergedClsPrefix}
+              class={
+                mergedCollapsed ? this.collapsedTriggerClass : this.triggerClass
+              }
               style={
                 mergedCollapsed ? this.collapsedTriggerStyle : this.triggerStyle
               }