From ce2dd6f831e2299bea314c3ad3341b2501e3da78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Thu, 16 May 2024 23:53:51 +0800 Subject: [PATCH] flex --- main.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 6e2814c..4c84899 100644 --- a/main.js +++ b/main.js @@ -1,11 +1,11 @@ -import { div, main, section, aside, h3, p, ul, li } from '@laniakeasupercluster/widgets' +import { div, span, main, section, aside, h3, p, ul, li } from '@laniakeasupercluster/widgets' const blogData = [ { id: '1', title: 'Blog 1', content: 'Content 1', date: new Date() }, { id: '2', title: 'Blog 2', content: 'Content 2', date: new Date() }, { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() }, ] -const tagData = ['JavaScript', 'CSS', 'HTML', 'Web'] +const tagData = ['JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web'] const articleData = ['Article 1', 'Article 2', 'Article 3'] document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' }).p('1rem').childs([ @@ -17,7 +17,9 @@ document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' aside.grid({ gridColumn: '2', flexDirection: 'column', gap: '1rem' }).childs([ div.childs([ h3.text('# TAG'), - ul.bg('#ececec').radius('1rem').childs(tagData.map(tag => li.text(tag))), + div.flex({ gap: '.5rem', flexWrap: 'wrap' }).childs([ + ...tagData.map(tag => span.bg('#ececec').radius('.25rem').px('8px').text(tag)) + ]), ]), div.childs([ h3.text('# 归档'),