{"id":15646179,"url":"https://github.com/artstorm/ui-toolkit-safe-area","last_synced_at":"2025-04-30T11:15:05.842Z","repository":{"id":142364537,"uuid":"591613431","full_name":"artstorm/ui-toolkit-safe-area","owner":"artstorm","description":"A Safe Area Container for Unity's UI Toolkit.","archived":false,"fork":false,"pushed_at":"2024-03-22T03:19:01.000Z","size":405,"stargazers_count":73,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T01:31:47.641Z","etag":null,"topics":["game-development","safe-area","safearea","ui","ui-toolkit","uitoolkit","unity","unity3d"],"latest_commit_sha":null,"homepage":"","language":"C#","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/artstorm.png","metadata":{"files":{"readme":".github/readme/collapse-margin.png","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-21T09:33:21.000Z","updated_at":"2025-04-09T03:57:29.000Z","dependencies_parsed_at":"2024-10-23T03:01:31.400Z","dependency_job_id":null,"html_url":"https://github.com/artstorm/ui-toolkit-safe-area","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artstorm%2Fui-toolkit-safe-area","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artstorm%2Fui-toolkit-safe-area/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artstorm%2Fui-toolkit-safe-area/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artstorm%2Fui-toolkit-safe-area/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artstorm","download_url":"https://codeload.github.com/artstorm/ui-toolkit-safe-area/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251687516,"owners_count":21627587,"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":["game-development","safe-area","safearea","ui","ui-toolkit","uitoolkit","unity","unity3d"],"created_at":"2024-10-03T12:11:42.284Z","updated_at":"2025-04-30T11:15:05.525Z","avatar_url":"https://github.com/artstorm.png","language":"C#","funding_links":[],"categories":["GamePlay"],"sub_categories":["Skill"],"readme":"# UI Toolkit Safe Area\n\n\u003cp align=\"center\"\u003e\n    \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/icon-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/icon-light.png\"\u003e\n    \u003cimg alt=\"Unity UI Toolkit Safe Area\" src=\"https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/icon-light.png\"\u003e\n    \u003c/picture\u003e\n    \u003cbr/\u003e\n    \u003cem\u003eProvides a Safe Area Container for Unity's UI Toolkit.\u003c/em\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://openupm.com/packages/com.bitbebop.ui-toolkit-safe-area/\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/com.bitbebop.ui-toolkit-safe-area?label=openupm\u0026amp;registry_uri=https://package.openupm.com\u0026labelColor=383f47\" alt=\"openupm\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://mastodon.gamedev.place/@johansteen\"\u003e\u003cimg src=\"https://img.shields.io/badge/mastodon-@johansteen-blue.svg?logo=mastodon\u0026logoColor=ffffff\u0026labelColor=383f47\" alt=\"Mastodon: @johansteen\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://twitter.com/artstorm\"\u003e\u003cimg src=\"https://img.shields.io/badge/twitter-@artstorm-blue.svg?logo=twitter\u0026logoColor=ffffff\u0026labelColor=383f47\" alt=\"Twitter: @artstorm\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://discord.gg/WJn7w5WaU9\"\u003e\u003cimg src=\"https://img.shields.io/badge/chat-discord-blue?logo=discord\u0026logoColor=ffffff\u0026labelColor=383f47\" alt=\"Discord: Bitbebop\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## About\n\nThe goal of the safe area container is to provide a custom control to simplify handling safe areas with UI Toolkit on relevant devices.\n\n- Option to collapse margins with the safe area.\n- Option to exclude specific safe area edges.\n- Option to exclude safe area on tvOS.\n\n## Usage\n\nThe SafeArea container is available in the Library in UI Builder and can be found under Project → Custom Controls and can be dragged into the UI hierarchy.\n\n![UI Builder Hierarchy](https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/ui-builder-hierarchy.png)\n\nThe SafeArea container should be added as the top element in the hierarchy to ensure that it can fill up the entire screen. All child elements dropped into the SafeArea container will live inside `safe-area-content-container` and be adjusted accordingly depending on the current device SafeArea.\n\nMargins can be set on the SafeArea container, which can be useful when running on devices that does not utilize a safe area.\n\nThe SafeArea container has a selection of custom attributes that can be set in the UI Builder inspector.\n\n![UI Builder Inspector](https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/ui-builder-inspector.png)\n\n### Collapse Margins\n\nThe container margins and the safe area is collapsed by default. That can be disabled in the inspector.\n\nTake a look at these screenshots which helps illustrate the differences how margin, safe area and collapse comes together. In each example the margin is set to `10px 10px 0px 10px`.\n\n![UI Builder Inspector](https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/collapse-margin.png)\n\n1. For a device without a safe area, the margin values are used as-is and collapse margins doesn't play a part as there is no safe area to collapse with.\n2. For a device with a safe area the margins are collapsed with the safe area. The margin value is used if it would be larger than the safe area.\n3. If `Collapse Margins` is disabled, the margin is added to the safe area.\n\n### Exclude Edges\n\nWith exclude edges, the safe area value of `left`, `right`, `top` and `bottom` edges can optionally be excluded from the calculations. If an edge is excluded, only the margin value for that edge will be used.\n\n### Exclude tvOS\n\nThis option excludes the safe area values for all edges on tvOS. If selected, tvOS builds will not use safe area but only the margin values.\n\n## Installation\n\nRequires Unity 2021.3 LTS or higher.\n\n### OpenUPM\n\nThe package is available on the [OpenUPM registry](https://openupm.com). It's recommended to install it via [openupm-cli](https://github.com/openupm/openupm-cli).\n\n```sh\nopenupm add com.bitbebop.ui-toolkit-safe-area\n```\n\n### Unity Package Manager and Git URL\n\nInstall the package directly in Unity Package Manger using this URL:\n\n```\nhttps://github.com/artstorm/ui-toolkit-safe-area.git?path=/Packages/com.bitbebop.ui-toolkit-safe-area\n```\n\nOpen Unity Package Manager → \u003ckbd\u003e+\u003c/kbd\u003e → Add package from git URL:\n\n![Add package from git URL](https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/installation-git-1.png)\n\nPaste URL:\n\n![Paste git URL](https://raw.githubusercontent.com/artstorm/ui-toolkit-safe-area/main/.github/readme/installation-git-2.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartstorm%2Fui-toolkit-safe-area","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartstorm%2Fui-toolkit-safe-area","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartstorm%2Fui-toolkit-safe-area/lists"}