satori/kana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flex

Browse Source
This commit is contained in:
觉
2024-05-16 23:53:51 +08:00
parent 230d29964f
commit ce2dd6f831
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
main.js
View File

@@ -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 = [ const blogData = [
{ id: '1', title: 'Blog 1', content: 'Content 1', date: new Date() }, { id: '1', title: 'Blog 1', content: 'Content 1', date: new Date() },
{ id: '2', title: 'Blog 2', content: 'Content 2', 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() }, { 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'] const articleData = ['Article 1', 'Article 2', 'Article 3']
document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' }).p('1rem').childs([ 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([ aside.grid({ gridColumn: '2', flexDirection: 'column', gap: '1rem' }).childs([
div.childs([ div.childs([
h3.text('# TAG'), 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([ div.childs([
h3.text('# 归档'), h3.text('# 归档'),