mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

site: full site responsive

Browse Source
This commit is contained in:
07akioni 2021-04-06 01:31:09 +08:00
parent 8f824033ed
commit 55982babf0
10 changed files with 197 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
build/loaders/convert-md-to-doc.js
View File

@ -97,24 +97,25 @@ export default {
},
setup () {
const breakpointRef = useBreakpoint()
const isMobileRef = useMemo(() => {
return breakpointRef.value === 'xs'
})
const showAnchorRef = computed(() => {
if (isMobileRef.value) {
const showAnchorRef = useMemo(() => {
const { value: breakpoint } = breakpointRef
if (breakpoint === 'xs' || breakpoint === 's') {
return false
}
return ${showAnchor}
})
const useSmallPaddingRef = useMemo(() => {
return breakpointRef.value === 'xs'
})
return {
showAnchor: showAnchorRef,
wrapperStyle: computed(() => {
return !isMobileRef.value
return !useSmallPaddingRef.value
? 'display: flex; flex-wrap: nowrap; padding: 32px 24px 24px 56px;'
: 'padding: 16px;'
}),
contentStyle: computed(() => {
return !isMobileRef.value
return showAnchorRef.value
? 'width: calc(100% - 180px); margin-right: 36px;'
: 'width: 100%';
}),

12
demo/Site.vue
View File

@ -1,10 +1,10 @@
<template>
<n-layout :position="isMobile ? undefined : 'absolute'" class="root-layout">
<n-layout :position="isXs ? undefined : 'absolute'" class="root-layout">
<site-header />
<n-layout
class="home-layout"
:style="isMobile ? undefined : 'top: 64px; overflow: hidden'"
:position="isMobile ? undefined : 'absolute'"
:style="isXs ? undefined : 'top: 64px; overflow: hidden'"
:position="isXs ? undefined : 'absolute'"
>
<router-view />
</n-layout>
@ -15,7 +15,7 @@
import { onMounted, inject } from 'vue'
import SiteHeader from './SiteHeader.vue'
import { loadingBarApiRef } from './routes/router'
import { useIsMobile } from './utils/composables'
import { useIsXs } from './utils/composables'
export default {
name: 'Site',
@ -24,7 +24,7 @@ export default {
},
setup () {
const loadingBar = inject('loadingBar')
const isMobileRef = useIsMobile()
const isXsRef = useIsXs()
onMounted(() => {
loadingBarApiRef.value = loadingBar
loadingBar.finish()
@ -36,7 +36,7 @@ export default {
}
})
return {
isMobile: isMobileRef
isXs: isXsRef
}
}
}

184
demo/SiteHeader.vue
View File

@ -2,10 +2,10 @@
<n-layout-header bordered class="nav" :style="style">
<n-text tag="div" class="ui-logo" :depth="1" @click="handleLogoClick">
<img src="./assets/images/naivelogo.svg" />
<span v-if="!isMobile">Naive UI</span>
<span v-if="!isXs">Naive UI</span>
</n-text>
<div :style="!isMobile ? 'display: flex; align-items: center;' : ''">
<div class="nav-menu" v-if="!isMobile">
<div :style="!isXs ? 'display: flex; align-items: center;' : ''">
<div class="nav-menu" v-if="!isS">
<n-menu
mode="horizontal"
:value="menuValue"
@ -15,7 +15,7 @@
</div>
<n-auto-complete
v-model:value="searchPattern"
:style="!isMobile ? 'width: 216px; margin-left: 24px' : undefined"
:style="!isXs ? 'width: 216px; margin-left: 24px' : undefined"
:placeholder="t('searchPlaceholder')"
:options="searchOptions"
clear-after-select
@ -23,7 +23,63 @@
@select="handleSearch"
/>
</div>
<div style="display: flex" v-if="!isMobile">
<n-popover
v-if="isXs"
style="padding: 0; width: 288px"
placement="bottom-end"
display-directive="show"
trigger="click"
>
<template #trigger>
<n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
</template>
<div style="overflow: auto; max-height: 80vh">
<n-menu
:value="xsMenuValue"
:options="xsMenuOptions"
:indent="18"
@update:value="handleUpdateXsMenu"
/>
</div>
</n-popover>
<n-popover
v-else-if="isS"
style="padding: 0; width: 288px"
placement="bottom-end"
display-directive="show"
trigger="hover"
>
<template #trigger>
<n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
</template>
<div style="overflow: auto; max-height: 80vh">
<n-menu
:value="sMenuValue"
:options="sMenuOptions"
:indent="18"
@update:value="handleUpdateSMenu"
/>
</div>
</n-popover>
<div style="display: flex" v-else-if="isM">
<n-popover
style="padding: 0; width: 180px"
placement="bottom-end"
display-directive="show"
trigger="hover"
>
<template #trigger>
<n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
</template>
<n-menu
:value="mMenuValue"
:options="mMenuOptions"
:indent="18"
@update:value="handleUpdateMMenu"
/>
</n-popover>
</div>
<div style="display: flex" v-else>
<n-button size="small" class="nav-picker" @click="handleThemeUpdate">
{{ themeLabelMap[theme] }}
</n-button>
@ -66,25 +122,6 @@
{{ version }}
</n-button>
</div>
<n-popover
v-else
style="padding: 0; width: 288px"
placement="bottom-end"
display-directive="show"
trigger="click"
>
<template #trigger>
<n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
</template>
<div style="overflow: auto; max-height: 80vh">
<n-menu
:value="mobileMenuValue"
:options="mobileMenuOptions"
:indent="18"
@update:value="handleMobileUpdateMenu"
/>
</div>
</n-popover>
</n-layout-header>
</template>
@ -93,7 +130,7 @@ import { computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMessage, version } from 'naive-ui'
import { MenuOutline } from '@vicons/ionicons5'
import { i18n, useIsMobile } from './utils/composables'
import { i18n, useIsXs, useIsM, useIsS } from './utils/composables'
import { findMenuValue } from './utils/route'
import {
useThemeName,
@ -199,10 +236,71 @@ export default {
return null
})
// mobile options
// m options
const mMenuOptionsRef = computed(() => [
{
key: 'theme',
title: themeLabelMapRef.value[themeNameRef.value]
},
{
key: 'locale',
title: localeNameRef.value === 'zh-CN' ? 'English' : '中文'
}
])
function handleUpdateMMenu (value, { path }) {
if (value === 'theme') {
handleThemeUpdate()
} else if (value === 'locale') {
if (localeNameRef.value === 'zh-CN') {
localeNameRef.value = 'en-US'
} else {
localeNameRef.value = 'zh-CN'
}
}
}
// s opitions
const sMenuOptionsRef = computed(() => {
return [
{
key: 'theme',
title: themeLabelMapRef.value[themeNameRef.value]
},
{
key: 'locale',
title: localeNameRef.value === 'zh-CN' ? 'English' : '中文'
},
{
key: 'home',
title: t('home')
},
{
key: 'doc',
title: t('doc')
},
{
key: 'component',
title: t('component')
}
]
})
function handleUpdateSMenu (value) {
if (value === 'theme') {
handleThemeUpdate()
} else if (value === 'locale') {
if (localeNameRef.value === 'zh-CN') {
localeNameRef.value = 'en-US'
} else {
localeNameRef.value = 'zh-CN'
}
} else {
handleMenuUpdateValue(value)
}
}
// xs options
const docOptionsRef = useDocOptions()
const componentOptionsRef = useComponentOptions()
const mobileMenuOptionsRef = computed(() => {
const xsMenuOptionsRef = computed(() => {
return [
{
key: 'theme',
@ -228,11 +326,11 @@ export default {
}
]
})
const mobileMenuValueRef = computed(() => {
const xsMenuValueRef = computed(() => {
if (route.name === 'home') return 'home'
return findMenuValue(mobileMenuOptionsRef.value, route.path)
return findMenuValue(xsMenuOptionsRef.value, route.path)
})
function handleMobileUpdateMenu (value, { path }) {
function handleUpdateXsMenu (value, { path }) {
if (value === 'theme') {
handleThemeUpdate()
} else if (value === 'locale') {
@ -344,7 +442,7 @@ export default {
}
// common
const isMobileRef = useIsMobile()
const isXsRef = useIsXs()
function handleLogoClick () {
if (/^(\/[^/]+){2}$/.test(route.path)) {
message.info(t('alreadyHome'))
@ -354,13 +452,15 @@ export default {
}
return {
// mobileMenuOptions,
// xsMenuOptions,
tusimple: process.env.TUSIMPLE,
dev: __DEV__,
message,
t,
version,
isMobile: isMobileRef,
isXs: isXsRef,
isM: useIsM(),
isS: useIsS(),
// theme
theme: themeNameRef,
handleThemeUpdate,
@ -385,14 +485,22 @@ export default {
menuOptions: menuOptionsRef,
menuValue: menuValueRef,
handleMenuUpdateValue,
// mobile menu
mobileMenuOptions: mobileMenuOptionsRef,
handleMobileUpdateMenu,
mobileMenuValue: mobileMenuValueRef,
// m menu
mMenuOptions: mMenuOptionsRef,
handleUpdateMMenu,
mMenuValue: null,
// s menu
sMenuOptions: sMenuOptionsRef,
handleUpdateSMenu,
sMenuValue: menuValueRef,
// xs menu
xsMenuOptions: xsMenuOptionsRef,
handleUpdateXsMenu,
xsMenuValue: xsMenuValueRef,
// common
handleLogoClick,
style: computed(() => {
return isMobileRef.value
return isXsRef.value
? {
'--side-padding': '16px',
'grid-template-columns': 'auto 1fr auto'

7
demo/pages/Layout.vue
View File

@ -1,7 +1,8 @@
<template>
<n-layout has-sider :position="isMobile ? undefined : 'absolute'">
<n-layout has-sider :position="isXs ? undefined : 'absolute'">
<n-layout-sider
:native-scrollbar="false"
:collapsed-width="0"
bordered
show-trigger="bar"
v-if="showSider"
@ -23,7 +24,7 @@
import { computed, watch, toRef, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { findMenuValue } from '../utils/route'
import { useIsMobile } from '../utils/composables'
import { useIsXs } from '../utils/composables'
import { useDocOptions, useComponentOptions } from '../store'
import { useBreakpoint, useMemo } from 'vooks'
@ -61,7 +62,7 @@ export default {
layoutInstRef,
options: optionsRef,
menuValue: menuValueRef,
isMobile: useIsMobile(),
isXs: useIsXs(),
handleMenuUpdateValue: (_, option) => {
router.push(option.path)
}

14
demo/pages/home/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="banner">
<right-image class="right-image" v-if="!isMobile" />
<right-image class="right-image" v-if="!isXs" />
<n-h1 :style="titleStyle" class="naive-title">
<span
@mouseenter="handleTitleMouseEnter"
@ -46,7 +46,7 @@
<left-image class="left-image" />
</div>
<n-layout-footer
:position="isMobile ? undefined : 'absolute'"
:position="isXs ? undefined : 'absolute'"
style="z-index: auto"
>
<landing-footer style="max-width: 1200px; margin: auto" />
@ -59,7 +59,7 @@ import { computed } from 'vue'
import LandingFooter from './Footer.vue'
import leftImage from './Left.vue'
import rightImage from './Right.vue'
import { i18n, useIsMobile } from '../../utils/composables'
import { i18n, useIsXs } from '../../utils/composables'
import { useThemeName } from '../../store'
export default {
@ -69,12 +69,12 @@ export default {
rightImage
},
setup () {
const isMobileRef = useIsMobile()
const isXsRef = useIsXs()
return {
isMobile: isMobileRef,
isXs: isXsRef,
theme: useThemeName(),
titleStyle: computed(() => {
if (isMobileRef.value) {
if (isXsRef.value) {
return 'margin-top: 0; font-size: 64px !important'
} else {
return 'margin-top: 0; font-size: 80px !important'
@ -180,7 +180,7 @@ export default {
transform: translateY(-50%);
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 639px) {
.banner {
position: static;
text-align: left;

6
demo/store/index.js
View File

@ -10,7 +10,7 @@ import {
useOsTheme
} from 'naive-ui'
import { TsConfigProvider } from '../../themes/tusimple/src'
import { i18n, useIsMobile } from '../utils/composables'
import { i18n, useIsXs } from '../utils/composables'
import {
createDocumentationMenuOptions,
createComponentMenuOptions
@ -119,10 +119,10 @@ const flattenedDocOptionsRef = computed(() => {
export function siteSetup () {
i18n.provide(computed(() => localeNameRef.value))
const isMobileRef = useIsMobile()
const isXsRef = useIsXs()
return {
themeEditorStyle: computed(() => {
return isMobileRef.value ? 'right: 18px; bottom: 24px;' : undefined
return isXsRef.value ? 'right: 18px; bottom: 24px;' : undefined
}),
configProvider: configProviderRef,
hljs,

4
demo/store/menu-options.js
View File

@ -600,7 +600,7 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
},
...createDeprecatedDemos(
{
en: 'Deprecated',
en: '--Deprecated',
children: [
{
en: 'Nimbus Service Layout',
@ -612,7 +612,7 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
),
...createDebugDemos(
{
en: 'Debug',
en: '--Debug',
children: [
{
en: 'SuffixDebug',

2
demo/styles/demo.css
View File

@ -5,7 +5,7 @@ body {
-webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 639px) {
body {
overflow: visible;
}

10
demo/utils/ComponentDemos.tsx
View File

@ -1,5 +1,5 @@
import { defineComponent, Fragment, h } from 'vue'
import { useMemo, useBreakpoint } from 'vooks'
import { defineComponent, Fragment, h, computed } from 'vue'
import { useIsM } from './composables'
export default defineComponent({
name: 'ComponentDemos',
@ -10,9 +10,9 @@ export default defineComponent({
}
},
setup (props) {
const breakpointRef = useBreakpoint()
const mergedColsRef = useMemo(() => {
return ['xs', 's', 'm'].includes(breakpointRef.value) ? 1 : props.span
const isMRef = useIsM()
const mergedColsRef = computed(() => {
return isMRef.value ? 1 : props.span
})
return {
mergedCols: mergedColsRef

16
demo/utils/composables.js
View File

@ -1,13 +1,27 @@
import { toRef, inject, provide, reactive, watchEffect } from 'vue'
import { useBreakpoint, useMemo } from 'vooks'
export function useIsMobile () {
export function useIsXs () {
const breakpointRef = useBreakpoint()
return useMemo(() => {
return breakpointRef.value === 'xs'
})
}
export function useIsS () {
const breakpointRef = useBreakpoint()
return useMemo(() => {
return ['xs', 's'].includes(breakpointRef.value)
})
}
export function useIsM () {
const breakpointRef = useBreakpoint()
return useMemo(() => {
return ['xs', 's', 'm'].includes(breakpointRef.value)
})
}
export const i18n = function (data) {
const localeReactive = inject('i18n', null)
return {