Comments (2)
Hi Geraldo,
Thank you for asking and sorry that there is still no official documentation for Signum React.
The problem is well-supported.
Raw Bootstrap
If you take a look at http://getbootstrap.com/css/#forms there are different examples of layout.
- Basic: label up, value button with width 100%.
- Sr Only: value only, label is hidden for screen-readers only
- Inline form: label value in the same line with no margin or alignment.
- Horizontal form: label takes 2 columns, value takes 12-2 columns.
Most of the changes are in how the div
with class form-group
is built. But Horizontal form also requires a container div with class form-horizontal
.
Signum React
FormControl
Signum.React typical components, like ValueLine
, EntityLine
or EntityCombo
, have in their render
function a FormGroup
component.
FormGroup
is an abstraction that let you choose the right configuration for the form-grup
div
depending on the ctx
variable. You can also use the control alone to write a label.
FormGroupStyle
You can control the behaviour using formGroupStyle
and labelColumns
properties.
The different values values for formGroupStyle
are:
export enum FormGroupStyle {
/// Unaffected by FormGroupSize
None,
/// Requires form-vertical container
Basic,
/// Requires form-vertical container
BasicDown,
/// Requires form-vertical / form-inline container
SrOnly,
/// Requires form-horizontal (default), affected by LabelColumns / ValueColumns
LabelColumns,
}
You can set the properties in each component:
<ValueLine ctx={ctx.subCtx(c => c.companyName) } formGroupStyle={FormGroupStyle.Basic} />
But this will require a lot of repetition so typically you set this in the context.
render() {
var ctx = this.props.ctx.subCtx({ formGroupStyle: FormGroupStyle.Basic });
return (
<div>
<ValueLine ctx={ctx.subCtx(c => c.companyName) } />
<ValueLine ctx={ctx.subCtx(c => c.contactName)} />
<ValueLine ctx={ctx.subCtx(c => c.contactTitle)} />
</div>
);
}
There are a lot of other useful things that you can set in the context, like readOnly
, placeHolderLabels
or formGroupSize
, to control the size of the inputs.
export enum FormGroupSize {
Normal, //Raw Bootstrap default
Small, //Signum default
ExtraSmall, //Like in FilterBuilder
}
form-horizontal
and form-vertical
Bootstrap requires a form-horizontal
container to make the horizontal forms. In order to make them simpler to build, since they are the default style, the default container (ModalFrame
and PageFrame
) already include them.
That means that if you want to any other configuration you have to create a div
with the class form-vertical
to compensate.
The class form-vertical
is non standard and part for Signum React.
So, to answer your question, it will be like this:
import * as React from 'react'
import { CompanyEntity } from '../Southwind.Entities'
import { ValueLine, EntityLine, EntityCombo, EntityList, EntityDetail, EntityStrip, EntityRepeater, TypeContext, FormGroupStyle } from '../../../../Framework/Signum.React/Scripts/Lines'
export default class Company extends React.Component<{ ctx: TypeContext<CompanyEntity> }, void> {
render() {
var ctx = this.props.ctx.subCtx({ formGroupStyle: FormGroupStyle.Basic });
return (
<div className="form-vertical">
<ValueLine ctx={ctx.subCtx(c => c.companyName) } />
<ValueLine ctx={ctx.subCtx(c => c.contactName)} />
<ValueLine ctx={ctx.subCtx(c => c.contactTitle)} />
</div>
);
}
}
from framework.
Hi Olmo,
Thanks for the extensive and clear answer. Once you know how it's very simple to do.
Regards, Geraldo.
from framework.
Related Issues (20)
- Test environment path HOT 3
- Where is the export tool bar to xml? HOT 1
- Mysql support and .net core HOT 5
- Bug Report code generation. HOT 1
- Change license to MIT HOT 15
- Does not Compile as Release with VS2019 HOT 4
- dotnet publish -c Release does not work with Dotnet SDK 3.0 Pre HOT 2
- EMail Message Create button is missing. HOT 1
- Can't find Load Project downloaded project zip HOT 19
- Receiving emails via smpt HOT 1
- Ability to disable prompt 'lose changes' HOT 5
- Translation Problem in Dasboard Tab view HOT 2
- Login Signum with AD HOT 7
- Key 'Signum.Entities.Rest.RestLogEntity' (string) not found on ItemsDictionary HOT 7
- How to use [CurrentEntity] to filter current entity HOT 11
- Problems with transactions HOT 2
- Read Only property of Entity in UI HOT 2
- Improve password security HOT 3
- Problems with getOperationInfo and tryGetOperationInfo HOT 1
- Problems in Entitytables and entitybase HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from framework.