mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(layout-sider): sider placement right

Browse Source
This commit is contained in:
07akioni 2021-08-07 17:35:11 +08:00
parent ccb0dedd1b
commit 3f8e640f82
14 changed files with 97 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/layout/demos/enUS/basic.demo.md
View File

@ -6,7 +6,7 @@ I hope the demo can meet you demand, so that you can have more time to do other
<n-space vertical size="large">
<n-layout>
<n-layout-header>Yiheyuan Road</n-layout-header>
<n-layout-content content-style="padding: 24px"
<n-layout-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
<n-layout-footer>Chengfu Road</n-layout-footer>
@ -14,10 +14,10 @@ I hope the demo can meet you demand, so that you can have more time to do other
<n-layout>
<n-layout-header>Yiheyuan Road</n-layout-header>
<n-layout has-sider>
<n-layout-sider content-style="padding: 24px"
<n-layout-sider content-style="padding: 24px;"
>Handian Bridge</n-layout-sider
>
<n-layout-content content-style="padding: 24px"
<n-layout-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
</n-layout>
@ -29,7 +29,7 @@ I hope the demo can meet you demand, so that you can have more time to do other
>
<n-layout>
<n-layout-header>Yiheyuan Road</n-layout-header>
<n-layout-content content-style="padding: 24px"
<n-layout-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
<n-layout-footer>Chengfu Road</n-layout-footer>

20
src/layout/demos/enUS/collapse-right.demo.md
View File

@ -5,13 +5,16 @@ 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-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
<n-layout-sider
collapse-mode="width"
:collapsed-width="120"
:native-scrollbar="true"
:width="240"
show-trigger="arrow-circle"
content-style="padding: 24px"
content-style="padding: 24px;"
bordered
>
<p>
@ -19,27 +22,25 @@ Sometimes you might want to put the collapsed sidebar on the right.
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-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
<n-layout-sider
collapse-mode="transform"
:native-scrollbar="false"
:collapsed-width="120"
:width="240"
show-trigger="arrow-circle"
content-style="padding: 24px"
show-trigger="bar"
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 style="max-height: 320px;" />
<n-layout-sider
bordered
show-trigger
@ -57,7 +58,6 @@ Sometimes you might want to put the collapsed sidebar on the right.
:options="menuOptions"
/>
</n-layout-sider>
<n-layout style="max-height: 320px;" />
</n-layout>
</n-space>
```

10
src/layout/demos/enUS/collapse.demo.md
View File

@ -15,8 +15,8 @@ Use `show-trigger` to use builtin button.
collapse-mode="width"
:collapsed-width="120"
:width="240"
show-trigger="arrow-circle"
content-style="padding: 24px"
show-trigger="bar"
content-style="padding: 24px;"
bordered
>
<p>
@ -24,7 +24,7 @@ Use `show-trigger` to use builtin button.
Bridge
</p>
</n-layout-sider>
<n-layout-content content-style="padding: 24px"
<n-layout-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
</n-layout>
@ -34,12 +34,12 @@ Use `show-trigger` to use builtin button.
:collapsed-width="120"
:width="240"
show-trigger="arrow-circle"
content-style="padding: 24px"
content-style="padding: 24px;"
bordered
>
<n-h2>Handian Bridge</n-h2>
</n-layout-sider>
<n-layout-content content-style="padding: 24px"
<n-layout-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
</n-layout>

2
src/layout/demos/enUS/embedded.demo.md
View File

@ -3,7 +3,7 @@
Sometimes you may want the background to be darker to highlight the content (especially card like things).
```html
<n-layout embedded content-style="padding: 24px">
<n-layout embedded content-style="padding: 24px;">
<n-card>
All you need to do to look to those clouds,<br />
and every day be in a good mood.

8
src/layout/demos/enUS/show-sider-content.demo.md
View File

@ -11,12 +11,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set `
:width="240"
:show-collapsed-content="false"
show-trigger="arrow-circle"
content-style="padding: 24px"
content-style="padding: 24px;"
bordered
>
Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian Bridge
</n-layout-sider>
<n-layout-content content-style="padding: 24px"
<n-layout-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
</n-layout>
@ -26,12 +26,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set `
:collapsed-width="120"
:width="240"
show-trigger="arrow-circle"
content-style="padding: 24px"
content-style="padding: 24px;"
bordered
>
<n-h2>Handian Bridge</n-h2>
</n-layout-sider>
<n-layout-content content-style="padding: 24px"
<n-layout-content content-style="padding: 24px;"
>Pingshan Road</n-layout-content
>
</n-layout>

8
src/layout/demos/zhCN/basic.demo.md
View File

@ -6,14 +6,14 @@
<n-space vertical size="large">
<n-layout>
<n-layout-header>颐和园路</n-layout-header>
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
<n-layout-footer>成府路</n-layout-footer>
</n-layout>
<n-layout>
<n-layout-header>颐和园路</n-layout-header>
<n-layout has-sider>
<n-layout-sider content-style="padding: 24px">海淀桥</n-layout-sider>
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
<n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
</n-layout>
<n-layout-footer>成府路</n-layout-footer>
</n-layout>
@ -21,7 +21,7 @@
<n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
<n-layout>
<n-layout-header>颐和园路</n-layout-header>
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
<n-layout-footer>成府路</n-layout-footer>
</n-layout>
</n-layout>

12
src/layout/demos/zhCN/collapse-right.demo.md
View File

@ -5,34 +5,35 @@
```html
<n-space vertical size="large">
<n-layout has-sider sider-placement="right">
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
<n-layout-sider
collapse-mode="width"
:collapsed-width="120"
:width="240"
:native-scrollbar="true"
show-trigger="arrow-circle"
content-style="padding: 24px"
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-content content-style="padding: 24px;">平山道</n-layout-content>
<n-layout-sider
collapse-mode="transform"
:collapsed-width="120"
:width="240"
:native-scrollbar="false"
show-trigger="arrow-circle"
content-style="padding: 24px"
show-trigger="bar"
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 style="max-height: 320px;" />
<n-layout-sider
bordered
show-trigger
@ -48,7 +49,6 @@
:options="menuOptions"
/>
</n-layout-sider>
<n-layout style="max-height: 320px;" />
</n-layout>
</n-space>
```

10
src/layout/demos/zhCN/collapse.demo.md
View File

@ -14,25 +14,25 @@
:collapsed-width="120"
:width="240"
show-trigger="arrow-circle"
content-style="padding: 24px"
content-style="padding: 24px;"
bordered
>
<p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
</n-layout-sider>
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
</n-layout>
<n-layout has-sider>
<n-layout-sider
collapse-mode="transform"
:collapsed-width="120"
:width="240"
show-trigger="arrow-circle"
content-style="padding: 24px"
show-trigger="bar"
content-style="padding: 24px;"
bordered
>
<n-h2>海淀桥</n-h2>
</n-layout-sider>
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
</n-layout>
</n-space>
```

2
src/layout/demos/zhCN/embedded.demo.md
View File

@ -3,7 +3,7 @@
有的时候你希望背景色暗一点，来突出上面显示的内容（尤其是卡片）。
```html
<n-layout embedded content-style="padding: 24px">
<n-layout embedded content-style="padding: 24px;">
<n-card>
只要是 看到天边云一朵<br />
逐天拢有好心情

4
src/layout/demos/zhCN/show-sider-content.demo.md
View File

@ -16,7 +16,7 @@
>
海淀桥 海淀桥 海淀桥 海淀桥 海淀桥
</n-layout-sider>
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
</n-layout>
<n-layout has-sider>
<n-layout-sider
@ -29,7 +29,7 @@
>
<n-h2>海淀桥</n-h2>
</n-layout-sider>
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
</n-layout>
</n-space>
```

13
src/layout/src/Layout.tsx
View File

@ -40,8 +40,9 @@ const layoutProps = {
export type LayoutProps = ExtractPublicPropTypes<typeof layoutProps>
export const layoutInjectionKey: InjectionKey<ExtractPropTypes<LayoutProps>> =
Symbol('layout')
export const layoutInjectionKey: InjectionKey<
ExtractPropTypes<typeof layoutProps>
> = Symbol('layout')
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createLayoutComponent (isContent: boolean) {
@ -115,9 +116,6 @@ export function createLayoutComponent (isContent: boolean) {
render () {
const { mergedClsPrefix, hasSider } = this
const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined
const siderPlacementStyle = {
'flex-direction': this.siderPlacement === 'right' && 'row-reverse'
}
const layoutClass = [
isContent && `${mergedClsPrefix}-layout-content`,
`${mergedClsPrefix}-layout`,
@ -129,9 +127,7 @@ export function createLayoutComponent (isContent: boolean) {
<div
ref="scrollableElRef"
class={`${mergedClsPrefix}-layout-scroll-container`}
style={
[this.contentStyle, hasSiderStyle, siderPlacementStyle] as any
}
style={[this.contentStyle, hasSiderStyle] as any}
>
{this.$slots}
</div>
@ -141,7 +137,6 @@ export function createLayoutComponent (isContent: boolean) {
ref="scrollbarInstRef"
theme={this.mergedTheme.peers.Scrollbar}
themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
style={siderPlacementStyle}
contentStyle={[this.contentStyle, hasSiderStyle] as any}
>
{this.$slots}

28
src/layout/src/LayoutSider.tsx
View File

@ -123,20 +123,8 @@ export default defineComponent({
minWidth: formatLength(props.width)
}
})
const siderScrollContainerTransformStyleRef = computed<CSSProperties>(
() => {
if (siderPlacementRef.value !== 'left' && props.collapseMode === 'transform') {
return {
transform: `translateX(calc(${formatLength(props.width)} - ${
styleMaxWidthRef.value
}px)`
}
}
return {}
}
)
const siderPlacementRef = computed(() => {
return layoutProps?.siderPlacement || 'left'
return layoutProps ? layoutProps.siderPlacement : 'left'
})
const uncontrolledCollapsedRef = ref(props.defaultCollapsed)
const mergedCollapsedRef = useMergedState(
@ -209,7 +197,6 @@ export default defineComponent({
styleMaxWidth: styleMaxWidthRef,
mergedCollapsed: mergedCollapsedRef,
scrollContainerStyle: scrollContainerStyleRef,
siderScrollContainerTransformStyle: siderScrollContainerTransformStyleRef,
siderPlacement: siderPlacementRef,
handleTriggerClick,
cssVars: computed(() => {
@ -250,7 +237,7 @@ export default defineComponent({
class={[
`${mergedClsPrefix}-layout-sider`,
`${mergedClsPrefix}-layout-sider--${this.position}-positioned`,
`${mergedClsPrefix}-layout-sider--${this.siderPlacement}`,
`${mergedClsPrefix}-layout-sider--${this.siderPlacement}-placement`,
this.bordered && `${mergedClsPrefix}-layout-sider--bordered`,
mergedCollapsed && `${mergedClsPrefix}-layout-sider--collapsed`,
(!mergedCollapsed || this.showCollapsedContent) &&
@ -268,10 +255,7 @@ export default defineComponent({
<NScrollbar
{...this.scrollbarProps}
ref="scrollbarInstRef"
style={[
this.scrollContainerStyle,
this.siderScrollContainerTransformStyle
]}
style={this.scrollContainerStyle}
contentStyle={this.contentStyle}
theme={this.mergedTheme.peers.Scrollbar}
themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
@ -294,7 +278,6 @@ export default defineComponent({
style={[
this.scrollContainerStyle,
this.contentStyle,
this.siderScrollContainerTransformStyle,
{
overflow: 'auto'
}
@ -307,10 +290,6 @@ export default defineComponent({
{showTrigger ? (
showTrigger === 'arrow-circle' ? (
<ToggleButton
class={[
mergedCollapsed &&
`${mergedClsPrefix}-layout-toggle-button--collapsed`
]}
clsPrefix={mergedClsPrefix}
style={this.triggerStyle}
onClick={this.handleTriggerClick}
@ -318,7 +297,6 @@ export default defineComponent({
) : (
<ToggleBar
clsPrefix={mergedClsPrefix}
collapsed={mergedCollapsed}
style={this.triggerStyle}
onClick={this.handleTriggerClick}
/>

14
src/layout/src/ToggleBar.tsx
View File

@ -6,22 +6,12 @@ export default defineComponent({
type: String,
required: true
},
onClick: Function as PropType<(e: MouseEvent) => void>,
collapsed: {
type: Boolean,
default: false
}
onClick: Function as PropType<(e: MouseEvent) => void>
},
render () {
const { clsPrefix } = this
return (
<div
onClick={this.onClick}
class={[
`${clsPrefix}-layout-toggle-bar`,
this.collapsed && `${clsPrefix}-layout-toggle-bar--collapsed`
]}
>
<div onClick={this.onClick} class={`${clsPrefix}-layout-toggle-bar`}>
<div class={`${clsPrefix}-layout-toggle-bar__top`} />
<div class={`${clsPrefix}-layout-toggle-bar__bottom`} />
</div>

73
src/layout/src/styles/layout-sider.cssr.ts
View File

@ -25,26 +25,59 @@ export default cB('layout-sider', `
display: flex;
justify-content: flex-end;
`, [
c('>', [
cB('scrollbar', `
transition: transform .3s var(--bezier);
`)
]),
cM('right', [
cM('right-placement', `
justify-content: flex-start;
`, [
cM('bordered', `
border-right: none;
border-left: 1px solid var(--border-color);
`),
cM('collapsed', [
cB('layout-toggle-button', `
transform: translateX(-50%) translateY(-50%) rotate(0);
`),
cB('layout-toggle-bar', [
c('&:hover', [
cE('top', {
transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
}),
cE('bottom', {
transform: 'rotate(12deg) scale(1.15) translateY(2px)'
})
])
])
]),
cB('layout-toggle-button', `
transform: translateX(-50%) translateY(-50%) rotate(180deg);
left: 0;
`, [
cM('collapsed', `
transform: translateX(-50%) translateY(-50%) rotate(0);
`)
]),
`),
cB('layout-toggle-bar', `
left: -28px;
transform: rotate(180deg);
`, [
c('&:hover', [
cE('top', {
transform: 'rotate(12deg) scale(1.15) translateY(-2px)'
}),
cE('bottom', {
transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
})
])
])
]),
cM('collapsed', [
cB('layout-toggle-bar', [
c('&:hover', [
cE('top', {
transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
}),
cE('bottom', {
transform: 'rotate(12deg) scale(1.15) translateY(2px)'
})
])
]),
cB('layout-toggle-button', `
transform: translateX(50%) translateY(-50%) rotate(180deg);
`)
]),
cB('layout-toggle-button', `
@ -59,11 +92,7 @@ export default cB('layout-sider', `
right: 0;
fill: var(--toggle-button-color);
transform: translateX(50%) translateY(-50%) rotate(0);
`, [
cM('collapsed', `
transform: translateX(50%) translateY(-50%) rotate(180deg);
`)
]),
`),
cB('layout-toggle-bar', `
cursor: pointer;
height: 72px;
@ -94,16 +123,6 @@ export default cB('layout-sider', `
transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
})
]),
cM('collapsed', [
c('&:hover', [
cE('top', {
transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
}),
cE('bottom', {
transform: 'rotate(12deg) scale(1.15) translateY(2px)'
})
])
]),
cE('top, bottom', {
backgroundColor: 'var(--toggle-bar-color)'
}),
@ -127,7 +146,7 @@ export default cB('layout-sider', `
box-sizing: border-box;
height: 100%;
opacity: 0;
transition: transform .3s var(--bezier), opacity .3s var(--bezier);
transition: opacity .3s var(--bezier);
max-width: 100%;
`),
cM('show-content', [