StickyBar宽度
This commit is contained in:
tangly1024
2021-12-20 16:53:37 +08:00
parent 44df05243c
commit c883bbac43
3 changed files with 7 additions and 13 deletions

View File

@@ -8,19 +8,11 @@
const StickyBar = ({ children }) => {
if (!children) return <></>
return (
<div id='sticky-bar' className='sticky flex justify-center top-14 md:top-0 duration-500 z-10 w-full'>
<div className='bg-white dark:bg-gray-800 dark:border-gray-600 w-full px-5 rounded-none md:rounded-xl shadow-xl border overflow-x-auto'>
<div className="flex">
<div className='z-30 absolute h-12 left-0 flex'>
<div className='pr-6 md:ml-5 -line-x-opacity'/>
</div>
<div id='tag-container' className="md:pl-3 max-w-xs md:max-w-lg xl:max-w-2xl 2xl:max-w-5xl 3xl:max-w-6xl">
<div id='sticky-bar' className='sticky flex-grow justify-center top-14 md:top-0 duration-500 z-10 pb-16'>
<div className='bg-white dark:bg-gray-800 dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
<div id='tag-container' className="md:pl-3 overflow-x-auto">
{ children }
</div>
<div className='z-30 absolute h-12 right-0 flex'>
<div className='pl-5 md:mr-5 line-x-opacity'/>
</div>
</div>
</div>
</div>
)

View File

@@ -14,7 +14,7 @@ const TagList = ({ tags, currentTag }) => {
if (!tags) {
return <></>
}
return <ul className='flex py-1 space-x-3 overflow-x-scroll w-full'>
return <ul className='flex py-1 space-x-3'>
<li className='w-20 py-2 dark:text-gray-200 whitespace-nowrap'><FontAwesomeIcon icon={faTags} className='mr-2'/>标签:</li>
{tags.map(tag => {
const selected = tag.name === currentTag