11/19/2023 0 Comments Anvil docsYou can set a default drop zone with the anvil-drop-default attribute. Normally, if the user drags and drops over an element that is not a drop zone (that is, it has none of the anvil-drop-xxx attributes discussed here), the whole form will be highlighted while dragging, and the component will be added at the end of the “default” slot. If you drop the component on that text, the component will appear at the end of the slot named “my-list” (in this example, the div with the attribute anvil-slot-repeat="my-list"), with a red box around it. In the example below, if you drag a component over the + Add to nav bar text, that text will be highlighted. While dragging over the anvil-drop-slot element, it will be highlighted. If you add the attribute anvil-drop-slot="my-list" to an element, then if a component is dragged and dropped over that element, it will be added to the end of slot named my-list (an element with the anvil-slot-xx="my-list" attribute). Try copying and pasting this HTML into the html property of a Custom HTML form, then drag and drop some components onto the form and see what they do. If you want to make your template as easy to use as the Anvil sample templates, you need to declare your own drop zones.Įach of the following explanations is accompanied by an example piece of HTML. However, editing each component’s slot by hand is awkward. You can change a component’s slot in the Container Properties section of its Properties. If you have not declared any drop zones, or the pointer is not over a drop zone, a dragged component will land in the slot called default (an element with the anvil-slot-xx="default" attribute). It does this by examining whether the pointer is over a drop zone you have declared. When you drag and drop a component onto your form, Anvil uses the position of your mouse pointer to work out which slot the component will land in. In this example, we create a box with a red border for each element:Įvery component dropped into here ends up inĪ green-bordered div inside a red-bordered div. This element will not appear on your page when the form is blank, but for every component added to that slot, a new copy of that element will be created, and the component will be added to the end of it. The simplest way to create a slot is to use the anvil-slot-repeat attribute on any element of your HTML. A slot can have any name - this example declares a slot called default. Slots and templatingĪn Anvil HTML template has one or more named “slots” into which components can be dropped. When creating a form, you can choose whether to make it a blank panel (a ColumnPanel), or choose a design template.Ī template Form allows components to be dragged and dropped into several different places within the design: For example, a particular template might have a navigation bar, a title/heading, and a main body. However, if you do know HTML, or employ a web designer who does, this reference will allow you or them to create a beautiful template into which you can easily drag-and-drop your Anvil components. This feature is optional - you do not need to know HTML to use Anvil!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |