PageSourceSearch

https://grida.co/docs/assets/js/9b2e227d.070f915f.js

js grida.co collected 2026-10-03 22:58:48 UTC 3,873 bytes, 1 lines download raw bytes

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2300],{553:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>c});var o=t(11979);const r={},i=o.createContext(r);function s(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:n},e.children)}},25713:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>l,frontMatter:()=>s,metadata:()=>o,toc:()=>d});const o=JSON.parse('{"id":"@designto-code/component-property-interfacing-auto","title":"Automatic property interfacing strategy for Components","description":"Learn more at support-components","source":"@site/docs/@designto-code/component-property-interfacing-auto.md","sourceDirName":"@designto-code","slug":"/@designto-code/component-property-interfacing-auto","permalink":"/docs/@designto-code/component-property-interfacing-auto","draft":false,"unlisted":false,"editUrl":"https://github.com/gridaco/grida/tree/main/docs/docs/@designto-code/component-property-interfacing-auto.md","tags":[],"version":"current","frontMatter":{"title":"Automatic property interfacing strategy for Components","version":"0.1.0","revision":1},"sidebar":"apiSidebar","previous":{"title":"Component Property Default value","permalink":"/docs/@designto-code/component-property-default-value"},"next":{"title":"Css box sizing","permalink":"/docs/@designto-code/css-box-sizing"}}');var r=t(41627),i=t(553);const s={title:"Automatic property interfacing strategy for Components",version:"0.1.0",revision:1},c="Automatic property interfacing strategy for Components",a={},d=[{value:"Reference",id:"reference",level:2}];function p(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"automatic-property-interfacing-strategy-for-components",children:"Automatic property interfacing strategy for Components"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:["Learn more at ",(0,r.jsx)(n.a,{href:"https://github.com/gridaco/designto-code/blob/main/packages/support-components/README.md",children:"support-components"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"We support automatic property interfacing for Components, which means that we automatically extracts a dynamic property so that you can expect the output component code to be ready to be extended."}),"\n",(0,r.jsxs)(n.p,{children:["This is based on diff checking of master ",(0,r.jsx)(n.code,{children:"A"})," and instance ",(0,r.jsx)(n.code,{children:"A'"}),", supporting below interfacing"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"text data"}),"\n",(0,r.jsxs)(n.li,{children:["color on ",(0,r.jsx)(n.strong,{children:"single fill"})]}),"\n",(0,r.jsxs)(n.li,{children:["image as src uri on ",(0,r.jsx)(n.strong,{children:"single image fill"})]}),"\n",(0,r.jsx)(n.li,{children:"item spacing"}),"\n",(0,r.jsx)(n.li,{children:"margin / padding"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsxs)(n.a,{href:"https://github.com/gridaco/design-sdk/tree/main/design-diff",children:["Design diff - ",(0,r.jsx)(n.code,{children:"@design-sdk/diff"})]})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsxs)(n.a,{href:"https://github.com/gridaco/designto-code/tree/main/packages/support-components",children:["Code Features Components - ",(0,r.jsx)(n.code,{children:"@code-features/components"})]})}),"\n"]})]})}function l(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.