{"id":18720806,"url":"https://github.com/alibaba-fusion/shell","last_synced_at":"2025-04-12T14:24:48.903Z","repository":{"id":52685594,"uuid":"193824598","full_name":"alibaba-fusion/shell","owner":"alibaba-fusion","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-15T20:27:18.000Z","size":36,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T14:24:45.130Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alibaba-fusion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-26T03:41:30.000Z","updated_at":"2023-06-27T08:10:42.000Z","dependencies_parsed_at":"2022-08-22T05:20:46.881Z","dependency_job_id":null,"html_url":"https://github.com/alibaba-fusion/shell","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fshell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fshell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fshell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fshell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alibaba-fusion","download_url":"https://codeload.github.com/alibaba-fusion/shell/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248579181,"owners_count":21127771,"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-11-07T13:32:40.086Z","updated_at":"2025-04-12T14:24:48.880Z","avatar_url":"https://github.com/alibaba-fusion.png","language":"JavaScript","readme":"# @alifd/shell\n\n![](https://img.alicdn.com/tfs/TB1nNtcelCw3KVjSZFuXXcAOpXa-881-465.png)\n````jsx\n\u003cShell\u003e\n    \u003cShell.Branding /\u003e Box(row)\n    \u003cShell.Navigation/\u003e\n    \u003cShell.Action /\u003e Box(row)\n\n    \u003cShell.MultiTask /\u003e Box(row)\n    \u003cShell.LocalNavigation /\u003e Box(column)\n\n    \u003cShell.AppBar /\u003e Box(column)\n    \u003cShell.Content /\u003e Grid\n    \u003cShell.Footer /\u003e Box(column)\n\n    \u003cShell.Ancillary /\u003e Box(column)\n    \u003cShell.ToolDock /\u003e Box(column)\n        \u003cShell.ToolDockItem /\u003e\n\u003c/Shell\u003e\n````\n\n其中 `\u003cShell.Content /\u003e` 采用Grid布局， 其他均为 Flex布局\n\n## API\n### Shell\n| 参数                  | 说明          | 类型              | 默认值              |\n| -------------------- | ------------ | ----------------- | ------------------ |\n| device             | 预设屏幕宽度，会影响`Navigation` `LocalNavigation` `Ancillary`等是否占据空间\u003cbr\u003e\u003cbr\u003e**可选值**:\u003cbr\u003e'phone', 'tablet', 'desktop'     | Enum         |  desktop    |\n\n### Shell.Navigation\n向子组件透传 isCollapse 的Context，表示当前是否处于折叠状态\n\n| 参数                  | 说明          | 类型              | 默认值              |\n| -------------------- | ------------ | ----------------- | ------------------ |\n| collapse   | 是否折叠(折叠成只有icon状态)   | Boolean         | false     |\n| direction  | 方向\u003cbr\u003e\u003cbr\u003e**可选值**:\u003cbr\u003e'hoz', 'ver'    | Enum         |  hoz    |\n| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =\u003e{} |\n\n\n### Shell.LocalNavigation\n| 参数                  | 说明          | 类型              | 默认值              |\n| -------------------- | ------------ | ----------------- | ------------------ |\n| collapse   | 是否折叠（完全收起）    | Boolean         | false     |\n| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =\u003e{} |\n\n### Shell.ToolDock\n| 参数                  | 说明          | 类型              | 默认值              |\n| -------------------- | ------------ | ----------------- | ------------------ |\n| collapse   | 是否折叠（完全收起）   | Boolean         | false     |\n| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =\u003e{} |\n\n### Shell.Ancillary\n| 参数                  | 说明          | 类型              | 默认值              |\n| -------------------- | ------------ | ----------------- | ------------------ |\n| collapse   | 是否折叠（完全收起）   | Boolean         | false     |\n| onCollapseChange | 组件显示或折叠时触发的回调函数        | Function           | () =\u003e{} |\n\n## Config配置项(待视觉稿提供后调整)\n\n- Header (Fixed)\n  - height\n  - background\n  - shadow\n  - padding(l, r)\n  - divider (bottom-border-color, bottom-border-size)\n  - navigation-margin\n  - navigation-alignment\n- MultiTask (Fixed)\n  - height\n  - background\n  - shadow\n  - padding(l, r)\n  - divider (bottom-border-color, bottom-border-size)\n- Navigation (Fixed)\n  - width(ver)\n  - mini-width (ver)\n  - divider (right-border-color, right-border-size) (ver)\n  - background \n  - padding(t, b) \n  - shadow\n-  LocalNavigation (Fixed)\n  - width\n  - background \n  - padding(t, b) \n  - divider (right-border-color, right-border-size)\n  - shadow\n- Ancillary\n  - width\n  - background \n  - divider (left-border-color, left-border-size)\n  - padding(t, b) \n  - shadow\n- ToolDock\n  - width\n  - background \n  - shadow\n  - divider (left-border-color, left-border-size)\n  - padding(t, b)\n- AppBar\n  - min-height\n  - background \n  - divider (bottom-border-color, bottom-border-size)\n  - shadow\n  - padding(l, r) \n- Content\n  - max-width\n  - columns\n  - background\n  - padding\n  - gutter-row\n  - gutter-column\n- Footer\n  - background \n  - min-height\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba-fusion%2Fshell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falibaba-fusion%2Fshell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba-fusion%2Fshell/lists"}