diff --git a/.changeset/thick-scissors-report.md b/.changeset/thick-scissors-report.md new file mode 100644 index 000000000..fa53ee231 --- /dev/null +++ b/.changeset/thick-scissors-report.md @@ -0,0 +1,5 @@ +--- +'@alauda/ui': patch +--- + +drawer add divider diff --git a/src/drawer/component/drawer-ref.ts b/src/drawer/component/drawer-ref.ts index 54aec52dd..ce7f5766c 100644 --- a/src/drawer/component/drawer-ref.ts +++ b/src/drawer/component/drawer-ref.ts @@ -26,4 +26,5 @@ export abstract class DrawerRef, R = any> { abstract mask?: boolean; abstract maskClosable?: boolean; abstract width?: number; + abstract divider?: boolean; } diff --git a/src/drawer/component/drawer.component.scss b/src/drawer/component/drawer.component.scss index 21bd7475f..cc86e8f1f 100644 --- a/src/drawer/component/drawer.component.scss +++ b/src/drawer/component/drawer.component.scss @@ -1,7 +1,9 @@ @import '../../theme/var'; @import '../../theme/mixin'; -.aui-drawer-mask { +$drawer: aui-drawer; + +.#{$drawer}-mask { position: absolute; top: 0; left: 0; @@ -15,7 +17,7 @@ } } -.aui-drawer { +.#{$drawer} { position: fixed; top: 0; bottom: 0; @@ -37,11 +39,17 @@ } &__header { - margin: 20px 20px -4px 20px; - padding-bottom: 16px; + margin: 20px 20px 0 20px; display: flex; justify-content: space-between; - border-bottom: 1px solid get-color(n-8); + } + + &.hasDivider { + .#{$drawer}__header { + margin: 20px 20px -4px 20px; + padding-bottom: 16px; + border-bottom: 1px solid get-color(n-8); + } } &__title { diff --git a/src/drawer/component/drawer.component.ts b/src/drawer/component/drawer.component.ts index 600a401fd..bdebaf616 100644 --- a/src/drawer/component/drawer.component.ts +++ b/src/drawer/component/drawer.component.ts @@ -98,6 +98,9 @@ export class DrawerComponent< @Input() maskClosable: boolean; + @Input() + divider = true; + private _value = SIZE_MAPPER[DrawerSize.Medium]; @Input() set width(value: number) { @@ -111,6 +114,7 @@ export class DrawerComponent< get drawerClasses(): Record { return { 'aui-drawer': true, + hasDivider: this.divider, ...(!this.drawerClass ? null : { [this.drawerClass]: true }), }; } diff --git a/src/drawer/drawer.service.ts b/src/drawer/drawer.service.ts index 2bdabb340..37aa517be 100644 --- a/src/drawer/drawer.service.ts +++ b/src/drawer/drawer.service.ts @@ -5,14 +5,23 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { DrawerComponent } from './component/drawer.component'; +import { DrawerSize } from './public-api'; -interface DrawerOptions { +export interface DrawerOptions { title?: string | TemplateRef; width?: number; content?: ComponentType | TemplateRef; contentParams?: D; footer?: string | TemplateRef; - offsetY?: number; + offsetY?: string; + divider?: boolean; + drawerClass?: string; + size?: DrawerSize; + visible?: boolean; + hideOnClickOutside?: boolean; + showClose?: boolean; + mask?: boolean; + maskClosable?: boolean; } @Injectable() export class DrawerService { diff --git a/stories/drawer/index.ts b/stories/drawer/index.ts index df75a527f..8cfb05693 100644 --- a/stories/drawer/index.ts +++ b/stories/drawer/index.ts @@ -4,6 +4,7 @@ import { DrawerRef, DrawerService, InputModule, + SwitchModule, } from '@alauda/ui'; import { Component, Input, TemplateRef } from '@angular/core'; import { FormsModule } from '@angular/forms'; @@ -12,7 +13,13 @@ import { storiesOf } from '@storybook/angular'; storiesOf('Drawer', module) .add('drawer', () => ({ moduleMetadata: { - imports: [ButtonModule, DrawerModule, InputModule, FormsModule], + imports: [ + ButtonModule, + DrawerModule, + InputModule, + FormsModule, + SwitchModule, + ], declarations: [DemoComponent], }, component: DemoComponent, @@ -52,7 +59,16 @@ storiesOf('Drawer', module) offsetY: - +
+ divider: + +
+
header
content
footer
@@ -62,6 +78,7 @@ storiesOf('Drawer', module) class DemoComponent { offsetY = 0; visible = false; + divider = true; open() { this.visible = true; }