mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Add form component styling
This commit is contained in:
parent
58036cd156
commit
1ad6730b9e
@ -5,7 +5,7 @@ class GridFieldTable extends SilverStripeComponent {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="container-fluid grid-field">
|
<div className="grid-field">
|
||||||
<table className="table table-hover grid-field__table">
|
<table className="table table-hover grid-field__table">
|
||||||
<thead>{this.generateHeader()}</thead>
|
<thead>{this.generateHeader()}</thead>
|
||||||
<tbody>{this.generateRows()}</tbody>
|
<tbody>{this.generateRows()}</tbody>
|
||||||
|
@ -18,14 +18,18 @@ class Form extends SilverStripeComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const props = Object.assign({ onSubmit: this.handleSubmit }, this.props.attributes);
|
const defaultFormProps = {
|
||||||
|
className: 'container-fluid form-component',
|
||||||
|
onSubmit: this.handleSubmit,
|
||||||
|
};
|
||||||
|
const formProps = Object.assign({}, this.props.attributes, defaultFormProps);
|
||||||
const fields = this.props.mapFieldsToComponents(this.props.fields);
|
const fields = this.props.mapFieldsToComponents(this.props.fields);
|
||||||
const actions = this.props.mapActionsToComponents(this.props.actions);
|
const actions = this.props.mapActionsToComponents(this.props.actions);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form {...props}>
|
<form {...formProps}>
|
||||||
{fields &&
|
{fields &&
|
||||||
<fieldset className="form-group">
|
<fieldset>
|
||||||
{fields}
|
{fields}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
}
|
}
|
||||||
|
4
admin/client/src/components/form/styles.scss
Normal file
4
admin/client/src/components/form/styles.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.form-component {
|
||||||
|
padding-top: $spacer-y;
|
||||||
|
padding-bottom: $spacer-y;
|
||||||
|
}
|
@ -34,6 +34,8 @@
|
|||||||
@import "../components/HiddenField/HiddenField";
|
@import "../components/HiddenField/HiddenField";
|
||||||
@import "../components/Label/Label";
|
@import "../components/Label/Label";
|
||||||
@import "../components/Preview/Preview";
|
@import "../components/Preview/Preview";
|
||||||
|
@import "../components/NorthHeader/NorthHeader";
|
||||||
|
@import "../components/Form/Form";
|
||||||
|
|
||||||
// Layout and sections
|
// Layout and sections
|
||||||
@import "layout";
|
@import "layout";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user