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 {
|
export interface FieldProps {
|
||||||
name?: string;
|
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 (
|
return (
|
||||||
<div className="field">
|
<div className={`field ${classes}`}>
|
||||||
{name ? <label className="label">{name}</label> : null}
|
{nameEl}
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue