properties
changelog

Display Type

Define how an element is rendered (displayed) in layout.

Usage:

  • @layout is-*;

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		layout: {
			is: {
				property: "display: <v><i>;",
				values: {
					hidden: "none",
					block: "block",
					flex: "flex",
					grid: "grid",

					// inline
					inline: {
						DEFAULT: "inline",
						block: "inline-block",
						flex: "inline-flex",
						grid: "inline-grid",
						table: "inline-table",
					},

					// table
					table: {
						DEFAULT: "table",
						head: "table-header-group",
						body: "table-row-group",
						footer: "table-footer-group",
						row: "table-row",
						column: {
							DEFAULT: "table-column",
							group: "table-column-group",
						},
						cell: "table-cell",
						caption: "table-caption",
					},

					// list
					list: {
						item: "list-item",
					},
				},
			},
		},
	},
};

export default shilpConfig;