mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
Add horizontal support to Field
This commit is contained in:
parent
3577dc7142
commit
f4a30dddb5
1 changed files with 21 additions and 3 deletions
|
@ -2,12 +2,30 @@ import React from 'react';
|
|||
|
||||
export interface FieldProps {
|
||||
name?: string;
|
||||
className?: string;
|
||||
horizontal?: boolean;
|
||||
}
|
||||
|
||||
function Field({ name, children }: React.PropsWithChildren<FieldProps>) {
|
||||
function Field({
|
||||
name,
|
||||
className,
|
||||
horizontal,
|
||||
children,
|
||||
}: React.PropsWithChildren<FieldProps>) {
|
||||
let classes = className ?? '';
|
||||
if (horizontal) {
|
||||
classes += ' is-horizontal';
|
||||
}
|
||||
let nameEl = null;
|
||||
if (name) {
|
||||
nameEl = <label className="label">{name}</label>;
|
||||
if (horizontal) {
|
||||
nameEl = <div className="field-label is-normal">{nameEl}</div>;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="field">
|
||||
{name ? <label className="label">{name}</label> : null}
|
||||
<div className={`field ${classes}`}>
|
||||
{nameEl}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue