View is just a wrapper which creates HTML Elements, and you can combine them to make anything that you want. View supports two props, one is for Props / attributes of component and other is list of it's children (Slots).
if component doesn't have props, you can pass slot as first argument. Slot can be of any type except object (but Array is allowed).
If component has prop, you should pass it as first argument, and move slot to second argument. Prop is always object.
View (and all components) returns an object which has these features: toString, toHead, toScript, tag, props, slots. you can use toString to render it as html code.
const value = View({ tag: "span", class: "custom" }, ["Content"]);
console.log(value); // <span class="custom">Content</span>All components are based on View and their usage are similar.
using tag prop you can change tag of component, all html tags are supported including (html,script, body, style, ....)
You can register custom javascript code using script prop, at the end you can get all scripts using toScript method of component.
View({ script: 'document.body.setAttribute("u-view-theme", "dark")' })Also it is possible to add items in <head> section of page using htmlHead prop. they are accessible using toHead method.
View([View({ htmlHead: "<title>Change title of page</;title>" })])there are some useful props which you can use with these components.
You can change margin of components using these props (m, ms, me, mx, my, mt, mb), supported values are (0, auto, xxs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl).
Padding is similar to margin, but without auto value.
there are some props for supporting displays for responsive breakpoints. (d, dXs, dSm, dMd, dLg, dXl). sopports these vaules (none, flex, inline-flex, block, inline, inline-block, contents, grid)
You can use w and h to set size of element. supported values are (0, 50, 100, auto, xxs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl).
And here is examples of height
View supports (flexDirection, flexDirectionXs, flexDirectionSm, ....) props which available values are: (row, row-reverse, column and column-reverse), these are only usable if display is flex or inline-flex
gap prop is used to add spacing between flex items, supported values are(xs, sm, md, lg, xl).
bgColor (primary-100, secondary-100, success-200, info-500, warning-100, danger-900, light-700, dark-600, base-9, ...)
textColor (primary-100, secondary-100, success-200, info-500, warning-100, danger-900, light-700, dark-600, base-9, ...)
borderRadius (xs, sm, md, lg, xl)
borderColor (primary-100, secondary-100, success-200, info-500, warning-100, danger-900, light-700, dark-600, base-9, ...) +
borderSize (xs, sm, md, lg, xl)
align (start, center, end, baseline, stretch)
alignSelf (start, center, end, baseline, stretch)
justify (start, center, end, between, evenly, around)
justifySelf (start, center, end, between, evenly, around)
You can control wrapping of flex items using wrap boolean prop