PatAlcala9/articles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-02-20 19:04:03 +08:00
parent eb8731d039
commit 0b4c7b2d93
6 changed files with 98 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

5
@dasig/components/Row.tsx
View file

@ -5,19 +5,20 @@ interface Props {
children: JSXElement
content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
gap?: number
wrap?: boolean
}
export default (props: Props) => {
return (
<>
<Show when={props.gap}>
<section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
<section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem; flex-wrap: ${props.wrap ? 'wrap' : 'nowrap'}`}>
{props.children}
</section>
</Show>
<Show when={!props.gap}>
<section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
<section class={`dasig-row-${props.content || 'center'}`} style={`flex-wrap: ${props.wrap ? 'wrap' : 'nowrap'}`}>{props.children}</section>
</Show>
</>
)

12
@dasig/styles/Row.sass
View file

@ -1,7 +1,7 @@
.dasig-row-left
display: flex
flex-direction: row
flex-wrap: wrap
// flex-wrap: wrap
justify-content: flex-start
align-items: center
align-content: center
@ -9,7 +9,7 @@
.dasig-row-center
display: flex
flex-direction: row
flex-wrap: wrap
// flex-wrap: wrap
justify-content: center
align-items: center
align-content: center
@ -17,7 +17,7 @@
.dasig-row-right
display: flex
flex-direction: row
flex-wrap: wrap
// flex-wrap: wrap
justify-content: flex-end
align-items: center
align-content: center
@ -25,7 +25,7 @@
.dasig-row-split
display: flex
flex-direction: row
flex-wrap: wrap
// flex-wrap: wrap
justify-content: space-between
align-items: center
align-content: center
@ -33,7 +33,7 @@
.dasig-row-spaced
display: flex
flex-direction: row
flex-wrap: wrap
// flex-wrap: wrap
justify-content: space-around
align-items: center
align-content: center
@ -41,7 +41,7 @@
.dasig-row-even
display: flex
flex-direction: row
flex-wrap: wrap
// flex-wrap: wrap
justify-content: space-evenly
align-items: center
align-content: center