diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx index d562743268..30736f8f88 100644 --- a/components/layout/Sider.tsx +++ b/components/layout/Sider.tsx @@ -31,6 +31,8 @@ const dimensionMap = { export type CollapseType = 'clickTrigger' | 'responsive'; +export type SiderTheme = 'light' | 'dark'; + export interface SiderProps extends React.HTMLAttributes { prefixCls?: string; collapsible?: boolean; @@ -42,6 +44,7 @@ export interface SiderProps extends React.HTMLAttributes { width?: number | string; collapsedWidth?: number | string; breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; + theme?: SiderTheme; } export interface SiderState { @@ -73,6 +76,7 @@ export default class Sider extends React.Component { width: 200, collapsedWidth: 80, style: {}, + theme: 'dark' as SiderTheme, }; static childContextTypes = { @@ -174,7 +178,7 @@ export default class Sider extends React.Component { } render() { - const { prefixCls, className, + const { prefixCls, className, theme, collapsible, reverseArrow, trigger, style, width, collapsedWidth, ...others, } = this.props; @@ -210,7 +214,7 @@ export default class Sider extends React.Component { minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349 width: siderWidth, }; - const siderCls = classNames(className, prefixCls, { + const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, { [`${prefixCls}-collapsed`]: !!this.state.collapsed, [`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger, [`${prefixCls}-below`]: !!this.state.below, diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap index 386206ffc4..c211f5967c 100644 --- a/components/layout/__tests__/__snapshots__/demo.test.js.snap +++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap @@ -33,7 +33,7 @@ exports[`renders ./components/layout/demo/basic.md correctly 1`] = ` class="ant-layout" >
{ ); expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-zero-width')).toBe(true); }); + + it('detect ant-layout-sider-dark as default theme', async () => { + const wrapper = mount( + Sider + ); + expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-dark')); + }); + + it('detect ant-layout-sider-light when set light theme', async () => { + const wrapper = mount( + Sider + ); + expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-light')); + }); }); diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md index b04925f8fa..ace6a50f44 100644 --- a/components/layout/index.en-US.md +++ b/components/layout/index.en-US.md @@ -98,6 +98,7 @@ The sidebar. | trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - | | width | width of the sidebar | number\|string | 200 | | onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | +| theme | color theme of the sidebar | string: `light` `dark` | `dark` | #### breakpoint width diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index c75ec8a02f..55fc83aa1a 100644 --- a/components/layout/index.zh-CN.md +++ b/components/layout/index.zh-CN.md @@ -99,6 +99,7 @@ title: Layout | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - | | width | 宽度 | number\|string | 200 | | onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | +| theme | 主题颜色 | string: `light` `dark` | `dark` | #### breakpoint width diff --git a/components/layout/style/index.less b/components/layout/style/index.less index 4ad899d78b..73d27d9e6a 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -110,3 +110,5 @@ } } } + +@import './light'; diff --git a/components/layout/style/light.less b/components/layout/style/light.less new file mode 100644 index 0000000000..56835f8a67 --- /dev/null +++ b/components/layout/style/light.less @@ -0,0 +1,11 @@ +.@{layout-prefix-cls} { + &-sider { + &-light { + background: @layout-sider-background-light; + } + &-light > &-trigger { + color: @layout-trigger-color-light; + background: @layout-trigger-background-light; + } + } +} diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 17b274a654..38b6993c8f 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -205,18 +205,22 @@ @grid-gutter-width : 0; // Layout -@layout-body-background : #f0f2f5; -@layout-header-background : #001529; -@layout-footer-background : @layout-body-background; -@layout-header-height : 64px; -@layout-header-padding : 0 50px; -@layout-footer-padding : 24px 50px; -@layout-sider-background : @layout-header-background; -@layout-trigger-height : 48px; -@layout-trigger-background : #002140; -@layout-trigger-color : #fff; -@layout-zero-trigger-width : 36px; -@layout-zero-trigger-height : 42px; +@layout-body-background : #f0f2f5; +@layout-header-background : #001529; +@layout-footer-background : @layout-body-background; +@layout-header-height : 64px; +@layout-header-padding : 0 50px; +@layout-footer-padding : 24px 50px; +@layout-sider-background : @layout-header-background; +@layout-trigger-height : 48px; +@layout-trigger-background : #002140; +@layout-trigger-color : #fff; +@layout-zero-trigger-width : 36px; +@layout-zero-trigger-height : 42px; +// Layout light theme +@layout-sider-background-light : #fff; +@layout-trigger-background-light: #fff; +@layout-trigger-color-light : @text-color; // z-index list @zindex-affix : 10;