{"id":13422267,"url":"https://github.com/phphe/react-colrow","last_synced_at":"2025-04-30T08:32:07.953Z","repository":{"id":83554226,"uuid":"246251474","full_name":"phphe/react-colrow","owner":"phphe","description":"Smarter layout components. Based on css flexbox. Support responsive design, Typescript, server side render. 3 KB gzipped.","archived":false,"fork":false,"pushed_at":"2020-04-15T11:19:57.000Z","size":317,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-27T22:33:13.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-colrow.phphe.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phphe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-03-10T08:53:47.000Z","updated_at":"2023-12-01T20:11:13.000Z","dependencies_parsed_at":"2023-06-07T21:45:27.090Z","dependency_job_id":null,"html_url":"https://github.com/phphe/react-colrow","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"986043cbcc7800a8ff080e85254861b94ee4c8e6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Freact-colrow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Freact-colrow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Freact-colrow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Freact-colrow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phphe","download_url":"https://codeload.github.com/phphe/react-colrow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224202754,"owners_count":17272807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:40.800Z","updated_at":"2024-11-12T02:16:41.332Z","avatar_url":"https://github.com/phphe.png","language":"TypeScript","readme":"# react-colrow\n[English](https://github.com/phphe/react-colrow/blob/master/README.md) | [中文](https://github.com/phphe/react-colrow/blob/master/README_zh.md)\n\nSmarter layout components. Based on css flexbox. Support responsive design, Typescript, server side render. 3 KB gzipped.\n\n更智能的布局组件. 基于css flexbox. 支持响应式布局, Typescript, 服务端渲染. 3 KB gzipped. \n\n* [Typedoc](https://react-colrow.phphe.com) Types document generated according to Typescript.\n* [Demo](https://codesandbox.io/s/react-colrow-demo-vs6vg) A full project demo in codesandbox. It can run online.\n\nCol's width can be fixed number, percentage or auto grow. Support responsive layout. Row has gutter to set column spacing. This libarary based on css flexbox, not js. So it support ssr(server side render).\n\nI created [vue-colrow](https://vue-colrow.phphe.com) first. react-colrow is developed with Typescript, so I don’t want to write a repeat detailed document. If you want know more, you can refer to [vue-colrow's documentation](https://vue-colrow.phphe.com).\n\n## Usage\n```js\nimport {Row, Col, BreakRow, config} from 'react-colrow'\n\n// change default global config\nconfig.DEFAULT_GUTTER_X = 16\nconfig.DEFAULT_GUTTER_Y = 16\n```\n```html\n\u003cRow gutter={16} gutter={[16, 16]} gutter={[null, 16]} smGutterX={6}\u003e\n  \u003cCol width={1} width={1/3} width={500}\u003e\u003c/Col\u003e\n  \u003cBreakRow /\u003e\u003c!-- break row manually --\u003e\n\u003c/Row\u003e\n```\ncss is included in js. Row, Col and BreakRow are components, `config` is [global config](https://vue-colrow.phphe.com/api.html#config). \n\nCol's prop width can pass in number, number greater than 1 is considered to be pixels of the specified length, number less than or equal to 1 is considered to be percentage, so 1 represents 100%. Its default is 1, representing full row width. You can pass in a non-number, this will directly pass to the css width, but in this case you need to adjust it yourself, this project does not deal with it. [Check documentation to learn more props](https://vue-colrow.phphe.com).\n\n## Demo\nFollow screenshot images are from vue-colrow, but it also works with react-colrow.\n\n![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-form.png?raw=true)\n\nIn small screen: \n\n![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-form-xs.png?raw=true)\n\nThe code should be:\n```html\n\u003cRow\u003e\n  \u003cCol width={300}\u003e\u003cCard1 /\u003e\u003c/Col\u003e\n  \u003cCol grow xs={1}\u003e\n    \u003cRow\u003e\n      \u003cCol width={1/3} xs={1/2}\u003e\n        \u003clabel\u003eFirst Name\u003c/label\u003e\u003cv-text-field solo\u003e\u003c/v-text-field\u003e\n      \u003c/Col\u003e\n      \u003cCol width={1/3} xs={1/2}\u003e\n        \u003clabel\u003eLast Name\u003c/label\u003e\u003cv-text-field solo\u003e\u003c/v-text-field\u003e\n      \u003c/Col\u003e\n      \u003cCol width={1/3} xs={1}\u003e\n        \u003clabel\u003eEmail\u003c/label\u003e\u003cv-text-field solo\u003e\u003c/v-text-field\u003e\n      \u003c/Col\u003e\n      \u003cCol width={3/5} xs={1}\u003e\n        \u003clabel\u003eWebsite\u003c/label\u003e\u003cv-text-field solo\u003e\u003c/v-text-field\u003e\n      \u003c/Col\u003e\n      \u003cCol width={2/5} xs={1}\u003e\n        \u003clabel\u003eTitle\u003c/label\u003e\u003cv-text-field solo\u003e\u003c/v-text-field\u003e\n      \u003c/Col\u003e\n      \u003cCol\u003e\n        \u003clabel\u003eAbout\u003c/label\u003e\u003cv-textarea solo\u003e\u003c/v-textarea\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n  \u003c/Col\u003e\n\u003c/Row\u003e\n```\n## Demo 2: Responsive card list with gutter\n![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-list.png?raw=true)\n```html\n\u003cRow\u003e\n  \u003cCol xl={1/5} lg={1/4} md={1/3} sm={1/2} xs={1}\u003e\u003cCard1 /\u003e\u003c/Col\u003e\n  \u003cCol xl={1/5} lg={1/4} md={1/3} sm={1/2} xs={1}\u003e\u003cCard1 /\u003e\u003c/Col\u003e\n  \u003cCol xl={1/5} lg={1/4} md={1/3} sm={1/2} xs={1}\u003e\u003cCard1 /\u003e\u003c/Col\u003e\n  ...\n\u003c/Row\u003e\n```\n\n## Related\n* [My blog](https://phphe.com)\n* [vue-colrow](https://vue-colrow.phphe.com)\n* [Responsive](https://vue-colrow.phphe.com/guide.html#responsive)\n* [CSS hack](https://vue-colrow.phphe.com/guide.html#css-hack)\n\n## License\n[MIT](http://opensource.org/licenses/MIT)","funding_links":[],"categories":["UI Layout","目录"],"sub_categories":["Form Components","\u003ca id=\"ui\"\u003eui\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphphe%2Freact-colrow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphphe%2Freact-colrow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphphe%2Freact-colrow/lists"}