diff --git a/.gitignore b/.gitignore index 281318a..e577bc7 100644 --- a/.gitignore +++ b/.gitignore @@ -41,6 +41,7 @@ sysinfo.txt # Jekyll build output _site/ +_site_test/ # Python bytecode cache (from generate_pdfs.py) __pycache__/ @@ -48,4 +49,6 @@ __pycache__/ # Documentation & press-kit PDFs are generated by generate_pdfs.py and published # as GitHub Release assets (tag: docs-pdfs) by CI — never committed to the repo. # The site links to the release URLs (see _config.yml: pdf_downloads_base). -assets/downloads/*.pdf \ No newline at end of file +assets/downloads/*.pdf + +*.mp4 \ No newline at end of file diff --git a/MISSING_CONTENT.md b/MISSING_CONTENT.md deleted file mode 100644 index 91b4f73..0000000 --- a/MISSING_CONTENT.md +++ /dev/null @@ -1,110 +0,0 @@ -# Missing Demo Content — uGUI & UI Toolkit Controls - -The controls listed here now have **complete documentation pages and are listed** -on the site (shown with a placeholder card) — they are only **missing demo media** -(screenshots / GIFs). - -To add demo media: drop at least one screenshot or GIF into `ugui/images/`, -reference it in the control's `.md` file, set `preview_image` for the control in -`_data/ugui_controls.yml`, then remove it from this list. - ---- - -## uGUI Controls Pending Demo Media (43) - -> Count derived from `_data/ugui_controls.yml`: of 101 controls, **58** have a -> `preview_image` and **43** are still blank (`preview_image: ""`). The 43 blank -> entries are listed below. - -| Control | File | Notes | -|---|---|---| -| BestFitOutline | `ugui/controls/best-fit-outline/index.md` | Text effect — needs before/after screenshot | -| BoundToolTip | `ugui/controls/bound-tooltip/index.md` | Tooltip variant — needs inspector screenshot | -| CLFZ2 | `ugui/controls/clzf2-compression/index.md` | Compression utility — needs usage screenshot | -| CurvedLayout | `ugui/controls/curved-layout/index.md` | Layout — needs arc arrangement demo | -| CurvedText | `ugui/controls/curved-text/index.md` | Text effect — needs curve demo screenshot | -| CylinderText | `ugui/controls/cylinder-text/index.md` | Text effect — needs cylinder wrap demo | -| DragCorrector | `ugui/controls/drag-corrector/index.md` | Utility — needs inspector screenshot | -| ExtensionsToggle | `ugui/controls/extensions-toggle/index.md` | Toggle — needs screenshot | -| ExtensionsToggleGroup | `ugui/controls/extensions-toggle-group/index.md` | Toggle group — needs screenshot | -| GamePadInputModule | `ugui/controls/gamepad-input-module/index.md` | Input module — needs inspector screenshot | -| HoverToolTip | `ugui/controls/hover-tooltip/index.md` | Tooltip — needs hover state GIF | -| ImageExtended | `ugui/controls/image-extended/index.md` | Image extension — needs screenshot | -| Infinite Scroll Snap | `ugui/controls/infinite-scroll-snap/index.md` | Scroll — needs demo GIF (note: has `InfiniteScrollInspector.jpg` in Images/ but not linked) | -| InputFieldEnterSubmit | `ugui/controls/input-field-enter-submit/index.md` | Input utility — needs demo GIF | -| InputFocus | `ugui/controls/input-focus/index.md` | Input utility — needs demo GIF | -| MinMaxSlider | `ugui/controls/min-max-slider/index.md` | Slider — needs screenshot (note: has no image files in Images/) | -| MultiTouchScrollRect | `ugui/controls/multitouch-scroll-rect/index.md` | ScrollRect fix — no visual change, needs usage note | -| NicerOutline | `ugui/controls/nicer-outline/index.md` | Outline effect — needs before/after screenshot | -| PPIViewer | `ugui/controls/ppi-viewer/index.md` | Utility — needs runtime screenshot | -| RaycastMask | `ugui/controls/raycast-mask/index.md` | Utility — needs hit-area demo screenshot | -| RescaleDragPanel | `ugui/controls/rescale-drag-panel/index.md` | Panel — needs resize GIF | -| RescalePanel | `ugui/controls/rescale-panel/index.md` | Panel — needs resize GIF | -| ResizePanel | `ugui/controls/resize-panel/index.md` | Panel — needs resize GIF | -| ReturnKeyTrigger | `ugui/controls/return-key-trigger/index.md` | Input utility — needs demo GIF | -| Scroller | `ugui/controls/scroller/index.md` | Scroll utility — needs screenshot | -| Serialization | `ugui/controls/serialization/index.md` | Utility — needs usage code example or screenshot | -| ShaderEffects | `ugui/controls/shader-effects/index.md` | Effects — needs screenshot | -| UIHorizontalScroller | `ugui/controls/ui-horizontal-scroller/index.md` | Layout — needs horizontal scrolling demo screenshot or GIF | -| UICircle | `ugui/controls/ui-circle/index.md` | Primitive — needs shape screenshot | -| UICornerCut | `ugui/controls/ui-corner-cut/index.md` | Effect — needs before/after screenshot | -| UIImageCrop | `ugui/controls/ui-image-crop/index.md` | Image utility — needs crop demo screenshot | -| UILineRendererFIFO | `ugui/controls/ui-line-renderer-fifo/index.md` | Line renderer variant — needs demo | -| UILineRendererList | `ugui/controls/ui-line-renderer-list/index.md` | Line renderer variant — needs demo | -| UILineTextureRenderer | `ugui/controls/ui-line-texture-renderer/index.md` | Line renderer variant — needs demo | -| UISquircle | `ugui/controls/ui-squircle/index.md` | Primitive — needs squircle shape screenshot | -| UIWindowBase | `ugui/controls/ui-window-base/index.md` | Window — needs screenshot | -| switchToRectTransform | `ugui/controls/switch-to-recttransform/index.md` | Utility — needs inspector/usage screenshot | -| Diamond Graph | `ugui/controls/diamond-graph/index.md` | Primitive — needs radar/stat-graph screenshot | -| Grid Raw Image | `ugui/controls/grid-raw-image/index.md` | Primitive — needs grid render screenshot | -| Radial Layout | `ugui/controls/radial-layout/index.md` | Layout — needs radial arrangement screenshot | -| UI Circle Segmented | `ugui/controls/ui-circle-segmented/index.md` | Primitive — needs segmented-circle screenshot | -| UI Graphic Sector | `ugui/controls/ui-graphic-sector/index.md` | Primitive — needs sector/arc screenshot | -| UI Vertical Scroller | `ugui/controls/ui-vertical-scroller/index.md` | Layout — needs vertical scrolling demo GIF | - ---- - -## UIToolkit Controls — Missing Visual Demos - -All 25 UIToolkit controls have **complete text documentation and code examples** but -**no screenshots or animated demos** yet. They appear on the UIToolkit controls page -but are marked as lacking visual reference. - -| Control | Priority | Notes | -|---|---|---| -| ScrollSnap | High | Core navigation control — needs swipe demo GIF | -| ScreenHeader | High | Top app-bar with title + action buttons — needs screenshot | -| ElasticListView | High | Elastic overscroll + load-more — needs on-device GIF | -| Dropdown | High | Wheel-style value picker — needs modal-open GIF | -| DropDownMenuControl | Medium | Anchored action menu — needs open/overlay GIF | -| SocialLinkContainer | Medium | Editable social links list — needs add/remove GIF | -| NotificationBadge | Medium | Unread-count badge — needs overlay screenshot | -| ImageCropOverlay | Medium | Modal cropper — needs pan/zoom GIF | -| CollapsibleSection | High | Visible expand/collapse — easy GIF to capture | -| StepProgressBar | High | Visual fill progress — needs progress demo | -| PillButton | High | Primary CTA — needs flash animation GIF | -| ColorToggleGroup | High | Tap/drag selection — needs interaction GIF | -| PageDotIndicator | Medium | Pagination dots — needs animated GIF | -| QuadrantStepper | Medium | Step selector overlay — needs GIF | -| PillInputField | Medium | Input with label — needs screenshot | -| RoundedInputField | Medium | Rounded input — needs screenshot | -| PillSelector | Medium | Selector row — needs screenshot | -| CircularImageButton | Medium | Avatar button — needs screenshot | -| GrayscaleImage | Medium | Shader effect — needs before/after | -| LoadingIcon | Medium | Spinner — needs rotation GIF | -| IconLabelButton | Low | Row button — needs screenshot | -| ToggleButton | Low | Toggle — needs screenshot | -| ColorToggleButton | Low | Tinted toggle — needs screenshot | -| ToastSwipeDismissManipulator | Low | Utility manipulator — needs swipe GIF | -| ComingSoonMessage | Low | Placeholder panel — needs screenshot | - ---- - -## How to Contribute Demo Content - -1. Capture a screenshot or GIF of the control in action in the Unity Editor or Play Mode -2. Name the file clearly: e.g. `UICircleDemo.gif` or `UICircleInspector.jpg` -3. Place it in `ugui/images/` (for uGUI) or `uitoolkit/controls/images/` (for UIToolkit) -4. Reference it in the control's `.md` file -5. Remove the control from this list (or update its row if it still needs video) -6. The control will automatically appear on the controls listing page on next build diff --git a/README.md b/README.md index 64c27d6..53c87f1 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,15 @@ bundle exec jekyll build > [!NOTE] > Changes to `_config.yml` require restarting `jekyll serve` — live reload does not pick up configuration changes. The build also ignores `README.md`, the helper scripts (`*.py`, `*.sh`) and a few other files; see the `exclude` list in `_config.yml` for the full set. +### Testing the donate toast locally + +The site shows a slide-in "consider donating" toast after a browser has visited on **5 distinct days** (tracked purely in that browser's `localStorage` — nothing is sent anywhere). Waiting five days to test is no fun, so two URL hashes exist: + +- — force-show the toast immediately. Test mode neither reads nor writes the stored visit state and skips the GoatCounter events, so it cannot pollute real stats or your own visit count. +- — wipe the stored nudge state in the current browser (visit-day count, snoozes, and the permanent opt-out set by clicking Donate), returning it to a first-time visitor. + +Normal behaviour outside test mode: the toast appears at most once per 14 days, "Maybe later" / close / Esc snoozes it for 90 days, and clicking the Donate button retires it permanently for that browser. The same hashes also work on the live site. + ----- ## Contributing diff --git a/_data/uitk_controls.yml b/_data/uitk_controls.yml index 01b67e5..eff40d8 100644 --- a/_data/uitk_controls.yml +++ b/_data/uitk_controls.yml @@ -1,6 +1,7 @@ # UIToolkit Controls — 25 controls -# All controls have complete text/code documentation but no visual demos yet. -# See MISSING_CONTENT.md for the full list of missing screenshots/GIFs. +# 24 have preview screenshots (-example.png in each control folder); +# Grayscale Image is the only one still using the placeholder card. +# 14 controls also have WebM demo videos on their detail pages. # ── Navigation ─────────────────────────────────────────────────────────────── @@ -9,8 +10,8 @@ permalink: /uitoolkit/controls/scroll-snap/ category: Navigation description: Swipe/drag paged scroll container that snaps to discrete pages by index. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/scroll-snap/scroll-snap-example.png + has_video: true tags: [navigation, scroll, snap, pages, swipe] - name: Collapsible Section @@ -18,8 +19,8 @@ permalink: /uitoolkit/controls/collapsible-section/ category: Navigation description: Animated expand/collapse section with header toggle and content container. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/collapsible-section/collapsible-section-example.png + has_video: true tags: [navigation, collapse, expand, accordion, section] - name: Quadrant Stepper @@ -27,8 +28,8 @@ permalink: /uitoolkit/controls/quadrant-stepper/ category: Navigation description: Four-directional step selector displayed as an overlay compass widget. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/quadrant-stepper/quadrant-stepper-example.png + has_video: true tags: [navigation, stepper, direction, compass, selector] - name: Screen Header @@ -36,7 +37,7 @@ permalink: /uitoolkit/controls/screen-header/ category: Navigation description: Configurable top app-bar with title, notch spacer, and up to four edge action buttons. - preview_image: "" + preview_image: /uitoolkit/controls/screen-header/screen-header-example.png has_video: false tags: [navigation, header, appbar, title, actions] @@ -45,8 +46,8 @@ permalink: /uitoolkit/controls/dropdown-menu/ category: Navigation description: Anchored overlay action menu with large tappable rows and backdrop-tap dismiss. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/dropdown-menu/dropdown-menu-example.png + has_video: true tags: [navigation, menu, dropdown, overlay, actions] # ── Forms ───────────────────────────────────────────────────────────────────── @@ -56,8 +57,8 @@ permalink: /uitoolkit/controls/dropdown/ category: Forms description: Wheel-style dropdown picker that opens a touch-friendly modal list for single-value selection. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/dropdown/dropdown-example.png + has_video: true tags: [forms, dropdown, combobox, select, picker] - name: Pill Input Field @@ -65,7 +66,7 @@ permalink: /uitoolkit/controls/pill-input-field/ category: Forms description: Rounded pill-shaped input field with floating label and validation state. - preview_image: "" + preview_image: /uitoolkit/controls/pill-input-field/pill-input-field-example.png has_video: false tags: [forms, input, pill, label, text-field] @@ -74,7 +75,7 @@ permalink: /uitoolkit/controls/rounded-input-field/ category: Forms description: Card-style text input with rounded corners and focus/error colour states. - preview_image: "" + preview_image: /uitoolkit/controls/rounded-input-field/rounded-input-field-example.png has_video: false tags: [forms, input, rounded, text-field, focus] @@ -83,7 +84,7 @@ permalink: /uitoolkit/controls/pill-selector/ category: Forms description: Row of pill-shaped radio buttons for exclusive single-option selection. - preview_image: "" + preview_image: /uitoolkit/controls/pill-selector/pill-selector-example.png has_video: false tags: [forms, selector, pill, radio, single-select] @@ -92,8 +93,8 @@ permalink: /uitoolkit/controls/toggle-button/ category: Forms description: Flat toggle switch with animated indicator and on/off label support. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/toggle-button/toggle-button-example.png + has_video: true tags: [forms, toggle, switch, button, boolean] - name: Color Toggle Button @@ -101,8 +102,8 @@ permalink: /uitoolkit/controls/color-toggle-button/ category: Forms description: Toggle button that tints itself with a configurable accent colour when active. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/color-toggle-button/color-toggle-button-example.png + has_video: true tags: [forms, toggle, color, tint, button] - name: Color Toggle Group @@ -110,8 +111,8 @@ permalink: /uitoolkit/controls/color-toggle-group/ category: Forms description: Horizontally scrollable row of colour-tinted toggle buttons for multi-select. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/color-toggle-group/color-toggle-group-example.png + has_video: true tags: [forms, toggle, group, color, multi-select] - name: Social Link Container @@ -119,8 +120,8 @@ permalink: /uitoolkit/controls/social-link-container/ category: Forms description: Editable list of platform-labelled social link fields with add/remove and a platform picker. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/social-link-container/social-link-container-example.png + has_video: true tags: [forms, social, links, list, editable] # ── Layout ─────────────────────────────────────────────────────────────────── @@ -130,8 +131,8 @@ permalink: /uitoolkit/controls/elastic-list-view/ category: Layout description: Vertical list with iOS-style elastic overscroll and an optional swipe-up load-more trigger. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/elastic-list-view/elastic-list-view-example.png + has_video: true tags: [layout, list, scroll, elastic, load-more] # ── Feedback ───────────────────────────────────────────────────────────────── @@ -141,8 +142,8 @@ permalink: /uitoolkit/controls/step-progress-bar/ category: Feedback description: Segmented progress bar with labelled milestone steps and fill animation. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/step-progress-bar/step-progress-bar-example.png + has_video: true tags: [feedback, progress, steps, bar, milestone] - name: Page Dot Indicator @@ -150,8 +151,8 @@ permalink: /uitoolkit/controls/page-dot-indicator/ category: Feedback description: Animated pagination dots that reflect the current page of a scroll view. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/page-dot-indicator/page-dot-indicator-example.png + has_video: true tags: [feedback, pagination, dots, indicator, scroll] - name: Loading Icon @@ -159,8 +160,8 @@ permalink: /uitoolkit/controls/loading-icon/ category: Feedback description: Animated spinner/loading indicator with configurable speed and colour. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/loading-icon/loading-icon-example.png + has_video: true tags: [feedback, loading, spinner, animation, indicator] - name: Toast Swipe Dismiss Manipulator @@ -168,8 +169,8 @@ permalink: /uitoolkit/controls/toast-swipe-dismiss/ category: Feedback description: Gesture manipulator that allows swiping a toast/notification to dismiss it. - preview_image: "" - has_video: false + preview_image: /uitoolkit/controls/toast-swipe-dismiss/toast-swipe-dismiss-example.png + has_video: true tags: [feedback, toast, swipe, dismiss, gesture] - name: Coming Soon Message @@ -177,7 +178,7 @@ permalink: /uitoolkit/controls/coming-soon-message/ category: Feedback description: "Placeholder panel displaying a styled 'coming soon' message with icon." - preview_image: "" + preview_image: /uitoolkit/controls/coming-soon-message/coming-soon-message-example.png has_video: false tags: [feedback, placeholder, coming-soon, panel] @@ -185,8 +186,8 @@ slug: notification-badge permalink: /uitoolkit/controls/notification-badge/ category: Feedback - description: Small rounded unread-count badge that auto-hides at zero and clamps to "99+". - preview_image: "" + description: Small rounded unread-count badge that auto-hides at zero and clamps to 99+. + preview_image: /uitoolkit/controls/notification-badge/notification-badge-example.png has_video: false tags: [feedback, badge, notification, count, indicator] @@ -197,7 +198,7 @@ permalink: /uitoolkit/controls/pill-button/ category: Primitives description: Primary CTA button in a rounded pill shape with press flash animation. - preview_image: "" + preview_image: /uitoolkit/controls/pill-button/pill-button-example.png has_video: false tags: [primitives, button, pill, cta, animation] @@ -206,7 +207,7 @@ permalink: /uitoolkit/controls/circular-image-button/ category: Primitives description: Circular avatar/icon button with mask, border, and selected-state styling. - preview_image: "" + preview_image: /uitoolkit/controls/circular-image-button/circular-image-button-example.png has_video: false tags: [primitives, button, circular, avatar, icon] @@ -215,7 +216,7 @@ permalink: /uitoolkit/controls/icon-label-button/ category: Primitives description: Horizontal row button combining a left-side icon with label and subtitle text. - preview_image: "" + preview_image: /uitoolkit/controls/icon-label-button/icon-label-button-example.png has_video: false tags: [primitives, button, icon, label, row] @@ -226,7 +227,7 @@ permalink: /uitoolkit/controls/image-crop-overlay/ category: Utilities description: Full-screen modal image cropper with drag-to-pan, pinch-to-zoom, and configurable square export. - preview_image: "" + preview_image: /uitoolkit/controls/image-crop-overlay/image-crop-overlay-example.png has_video: false tags: [utilities, image, crop, editor, overlay] diff --git a/_data/uitk_examples.yml b/_data/uitk_examples.yml index 6bb97eb..23c90cc 100644 --- a/_data/uitk_examples.yml +++ b/_data/uitk_examples.yml @@ -1,8 +1,23 @@ -# UI Toolkit Examples — 12 example scenes -# Generated by create_example_pages.py — do not edit by hand. +# UI Toolkit Examples — 13 example scenes +# Generated by create_example_pages.py (Action Menu added by hand 2026-08-05). # Each example lists the controls it demonstrates (drives the examples # browser, the per-control "Demonstrated In" block, and cross-links). +- name: Action Menu + slug: action-menu + permalink: /uitoolkit/examples/action-menu/ + category: Navigation + description: Anchored overflow menus — per-row ··· triggers and a centered card menu, with callback and dismiss handling. + preview_image: "" + has_video: false + tags: [navigation, menu, overflow, actions] + control_permalinks: "/uitoolkit/controls/dropdown-menu/ /uitoolkit/controls/pill-button/" + controls: + - name: Dropdown Menu + permalink: /uitoolkit/controls/dropdown-menu/ + - name: Pill Button + permalink: /uitoolkit/controls/pill-button/ + - name: Content Explorer slug: content-explorer permalink: /uitoolkit/examples/content-explorer/ diff --git a/_layouts/default.html b/_layouts/default.html index 7d41ebc..2f2a223 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,5 +10,8 @@ {% include footer.html %} + + diff --git a/_site_test/About.html b/_site_test/About.html deleted file mode 100644 index bf78881..0000000 --- a/_site_test/About.html +++ /dev/null @@ -1,631 +0,0 @@ - - - - - -Unity UI Extensions README — Unity UI Extensions - - - -Unity UI Extensions README | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Unity UI Extensions README

- -

This is an extension project for the new Unity UI system which can be found at: Unity UI Source

- -
-

Check out the control demos on our Tumblr page

-
- -

Intro

- -

For more info, here’s a little introduction video for the project:

- -

View Intro Video

- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter - #unityuiextensions / Facebook / YouTube

- -
-

Ways to get in touch:

- - -
- -
- -

What is this repository for?

- -

In this repository is a collection of extension scripts / effects and controls to enhance your Unity UI experience. These scripts have been gathered from many sources, combined and improved over time.

- -
-

The majority of the scripts came from the Scripts thread on the Unity UI forum here

-
- -

You can either download / fork this project to access the scripts, or you can also download these pre-compiled Unity Assets, chock full of goodness for each release:

- -

Download Latest - Version 2.3.2

- -

We have expanded where you can download the UnityPackage asset and widened the options to contribute to the project. (although we recommend using the UPM Packages for active use!)

- -
-

I will still stress however, contribution is optional. The assets / code will always remain FREE

-
- - - - - - - - - - - - - - - - -
Download from Itch.IODownload from Itch.IODownload from Itch.IO
Grab from ItchioObtain via Union AssetsSupport through Patreon
- -
-

Still available to download on the GitHub site if you prefer

-
- -

To view previous releases, visit the release archive

- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

Getting Started

- -

To get started with the project, here’s a little guide:

- -

View Getting Started Video

- -
- -

Updates:

- -

Release 2.3 - Reanimation - 2023/02/07

- -

It has been a tough time for all since the last update, but things have been moving steadily along. In the past few months there has been a concerted effort to revamp and update the project ready for Unity 2022, as well as migrating the source repository over to GitHub and refreshing all the things. -We hope the new release is better for everyone and we have paid close attention to the editor menus and places to find all the controls for this release.

- -

To get up to speed with the Unity UI Extensions, check out the Getting Started Page.

- -
-

Ways to get in touch:

- - - -

Much easier that posting a question / issue on YouTube, Twitter or Facebook :D

-
- -

Breaking changes

- -

For customers upgrading from earlier versions of Unity to Unity 2020, please be aware of the Breaking change related to Text Based components. You will need to manually replace any UI using the older Text component and replace them with TextMeshPro versions. This is unavoidable due to Unity deprecating the Text component.

- -
-

New users to 2022 are unaffected as all the Editor commands have been updated to use the newer TextMeshPro versions.

-
- -

For more details, see the deprecation notice on GitHub.

- -

Added

- -
    -
  • Added new FIFO based UI Line Render when dynamic line rendering is needed.
    • -
  • Added ResetSelectableHighlight component.
    • -
  • Added SetArc method to UICircle as requested.
    • -
  • Added new UIHorizontalScroller based on UIVerticalScroller.
    • -
  • Added OnHighlightChanged and OnPressChanged events for UI Button.
    • -
  • Added error handling around setting Unity UI Components for Vertical/Horizontal ScrollSnaps.
    • -
  • Added Editor Menu Option to create a Min/Max slider.
    • -
  • Added the ability to set a specific item for combobox controls on start and not just the first.
    • -
  • Added the ability to disable the combo boxes and make them read-only.
    • -
- -

Changed

- -
    -
  • Refresh FancyScrollView with the latest fixes
    • -
  • -

    All Text based components updated to use TextMeshPro from Unity 2022 Breaking Change

    -
    • -
  • Clean-up and reset pivots on scene start.
    • -
  • Merged in feature/improved-ui-highlightable (pull request UILineRenderer - issues with specifying point locations at runtime #123).
    • -
  • Merged in fix/ragesliderfix (pull request HorizontalScrollSnap Mask Area doesn’t work when content created dynamically #125).
    • -
  • Merged in fix/infinitescrollcontentsize (pull request Gradient initialization should be in Awake() #126).
    • -
  • Merged in feature/controlTouchUp (pull request UILineRenderer mesh not updating in Editor scene view #127).
    • -
  • Upgraded RangeSlider to work in both Horizontal and Vertical setups.
    • -
  • Merged in RangeSlider-upgrade. (pull request Newtonsoft.Json.dll conflict #131)
    • -
  • Updated UIVertical scroller to be 2022 compliant.
    • -
  • Updated Curly UI to wait until end of the frame to recalculate positions.
    • -
  • Updated Depth Texture sampler in UI Particles Shaders.
    • -
  • Updated Points to always be an array of 1 when set to nothing for the Line Renderer.
    • -
  • Updated Cooldown button to work with Keyboard input.
    • -
  • Removed unneeded size calculation which caused some issues with mixed content.
    • -
  • Resolved an issue whereby the last row in a flow layout group would not size correctly.
    • -
  • Updated all components using “LayoutGroup” to override their OnDisable.
    • -
  • Updated validation in the new MinMaxSlider.
    • -
  • Updated Editor create options to add the correct Event System Input manager.
    • -
  • Updated initialisation logic to not cause an endless loop in the TabNavigationHelper.
    • -
  • Updated “Action” use to “UnityAction” to avoid Unity issues for DropDowns.
    • -
  • Updated UIVerticalScroller for standards.
    • -
  • Updated ReorderableList/ReorderableListElement to prevent creating a fake object for non-transferable items.
    • -
  • Updated panel drawing for ComboBox controls and added DropdownOffset.
    • -
  • Updated build issue with ReorderableListElement.
    • -
  • Updated NonDrawingGraphic to require a CanvasRender, else it causes an error on run.
    • -
- -

Deprecated

- -
    -
  • Marked ScrollPositionController as Obsolete, users should use the new Scoller.
    • -
  • BestFitOutline - Deprecated in Unity 2020 onwards. (still available for earlier versions)
    • -
  • NicerOutline - Deprecated in Unity 2020 onwards. (still available for earlier versions)
    • -
  • Marked TileSizeFitter as obsolete as Unity has made this unworkable.
    • -
- -

Fixed

- -
    -
  • Resolved issues with DisplayAbove and using a 0 ItemsToDisplay for ComboBox controls.
    • -
  • Resolved startup issue that prevented the control from being used (Unity changed the start order in some instances), this was causing null reference issues with comboboxes.
    • -
  • Patch fix for UILineRenderer.
    • -
  • Resolves issue where the lower range value would become stuck when moving.
    • -
  • Updated Infinite scroll to work with content of different sizes.
    • -
  • Updated Dropdown list to NOT resize text Rect on draw.
    • -
  • Revised the Curly UI fix as it was preventing the graphic from being updated in the scene view.
    • -
  • Cleanup and ensuring the UIParticleSystem is disposed in onDestroy correctly.
    • -
  • -

    Clean up range slider unused variables.

    -
    • -
  • UI Extensions Issue log
    • -
- -

Upgrade Notes

- -

We recommend using the UPM delivery method. If you are using the Unity asset, there should be no issues updating but if you have a problem, just deleted the old Unity-UI-Extensions folder and import the asset new.

- -
- -

Release History

- -

For the full release history, follow the below link to the full release notes page.

- -

Release Notes

- -
- -

Controls and extensions listed in this project

- -

There are almost 70+ extension controls / effect and other utilities in the project which are listed on the following page:

- -
-

Check out the control demos on our Tumblr page

- - - - - - - - - - - - - - - - -
UI Line RendererUI KnobScrollSnap
UI Line RendererUI KnobScroll Snap
-
- -

UI Extensions controls list

- -

Controls

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AccordionColorPickerSelection BoxUI FlippableComboBox
AutoComplete ComboBoxDropDown ListBoundToolTipUIWindowBaseUI Knob
TextPicInput FocusBox SliderCooldown ButtonSegmented Control
StepperRange SliderRadial SliderMultiTouch Scroll RectMinMax SLider
- -

Primitives

- - - - - - - - - - - - - - - - - - - - -
UILineRendererUILineTextureRendererUICircleDiamondGraphUICornerCut
UIPolygonUISquircle   
- -

Layouts

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Horizontal Scroll SnapVertical Scroll SnapFlow Layout GroupRadial LayoutTile Size Fitter
Scroll Snap (alt implementation)Reorderable ListUI Vertical ScrollerCurved LayoutTable Layout
FancyScrollViewCard UIScroll Position Controller (obsolete)Content Scroll Snap HorizontalScroller
ResizePanelRescalePanelRescaleDragPanel  
- -

Effects

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Best Fit OutlineCurved TextGradientGradient2Letter Spacing
NicerOutlineRaycastMaskUIFlippableUIImageCropSoftAlphaMask
CylinderTextUIParticleSystemCurlyUIShine EffectShader Effects
- -

Additional Components

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ReturnKeyTriggerTabNavigationuGUIToolsScrollRectTweenerScrollRectLinker
ScrollRectExUI_InfiniteScrollUI_ScrollRectOcclusionUIScrollToSelectionUISelectableExtension
switchToRectTransformScrollConflictManagerCLFZ2 (Encryption)DragCorrectorPPIViewer
UI_TweenScaleUI_MagneticInfiniteScrollUI_ScrollRectOcclusionNonDrawingGraphic 
UILineConnector    
UIHighlightableMenu ManagerPagination Manager  
- -

More to come

- -
- -

How do I get set up?

- -

The recommended way to add the Unity UI Extensions project to your solution is to use the Unity package Manager. Simply use the Unity Package Manager to reference the project to install it

- -

New for 2020, we have added OpenUPM support and the package can be installed using the following OpenUPM CLI command:

- -
`openupm add com.unity.uiextensions`
-
- -
-

For more details on using OpenUPM CLI, check the docs here.

-
- -
    -
  • Unity Package Manager - manual
    • -
- -

Alternatively, you can also add the package manually through the Unity package manager using the scope com.unity.uiextensions, see the Unity Package Manager docs for more information.

- -
    -
  • Unity 2018 or lower -The pre-compiled Unity assets are the only solution for Unity 2018 or earlier due to the changes in the Unity UI framework in Unity made for 2019. -Either clone / download this repository to your machine and then copy the scripts in, or use the pre-packaged .UnityPackage for your version of Unity and import it as a custom package in to your project.
    • -
- -

Contribution guidelines

- -

Got a script you want added? Then just fork the GitHub repository and submit a PR. All contributions accepted (including fixes)

- -

Just ensure:

- -
    -
  • The header of the script should match the standard used in all scripts.
    • -
  • The script uses the Unity.UI.Extensions namespace so they do not affect any other developments.
    • -
  • (optional) Add Component and Editor options where possible. (editor options are in the Editor\UIExtensionsMenuOptions.cs file)
    • -
- -

License

- -

All scripts conform to the BSD3 license and are free to use / distribute. See the LICENSE file for more information =

- -

Like what you see?

- -

All these scripts were put together for my latest book Unity3D UI Essentials -Check out the page on my blog for more details and learn all about the inner workings of the new Unity UI System.

- -

The downloads

- -

As this repo was created to support my new Unity UI Title “Unity 3D UI Essentials”, in the downloads section you will find two custom assets (SpaceShip-DemoScene-Start.unitypackage and RollABallSample-Start.unitypackage). These are just here as starter scenes for doing UI tasks in the book.

- -

I will add more sample scenes for the UI examples in this repository and detail them above over time.

- -

Previous Releases

- -

Please see the full downloads list for all previous releases and their corresponding download links.

- -
- -

More Information

- -

For more information about the project, please see the following pages:

- - - -
- - - - - diff --git a/_site_test/About.md b/_site_test/About.md deleted file mode 100644 index 75dac68..0000000 --- a/_site_test/About.md +++ /dev/null @@ -1,289 +0,0 @@ -# Unity UI Extensions README - -This is an extension project for the new Unity UI system which can be found at: [Unity UI Source](https://github.com/Unity-Technologies/uGUI) - -> [Check out the control demos on our Tumblr page](https://unityuiextensions.tumblr.com/) - -## [Intro](https://unity-ui-extensions.github.io/GettingStarted) - -For more info, here's a little introduction video for the project: - -[![View Intro Video](http://img.youtube.com/vi/njoIeE4akq0/0.jpg)](http://www.youtube.com/watch?v=njoIeE4akq0 "Unity UI Extensions intro video") - -You can follow the UI Extensions team for updates and news on: - -### [Twitter - #unityuiextensions](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/@UnityUIExtensions) - -> Ways to get in touch: -> -> - [GitHub Discussions](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/discussions), if you have any questions, queries or suggestions -> - [GitHub Projects view](https://github.com/orgs/Unity-UI-Extensions/projects/2), to see what is currently scheduled for the next release. -> - [Gitter Chat](https://gitter.im/Unity-UI-Extensions/Lobby) site for the UI Extensions project - ------ - -## [What is this repository for?](https://unity-ui-extensions.github.io/About) - -In this repository is a collection of extension scripts / effects and controls to enhance your Unity UI experience. These scripts have been gathered from many sources, combined and improved over time. - -> The majority of the scripts came from the Scripts thread on the [Unity UI forum here](http://bit.ly/UnityUIScriptsForumPost) - -You can either download / fork this project to access the scripts, or you can also download these pre-compiled Unity Assets, chock full of goodness for each release: - -## [Download Latest - Version 2.3.2](https://unity-ui-extensions.github.io/Downloads) - -We have expanded where you can download the UnityPackage asset and widened the options to contribute to the project. (although we recommend using the [UPM](/UPMInstallation.md) Packages for active use!) - -> I will still stress however, ***contribution is optional***. **The assets / code will always remain FREE** - -| [![Download from Itch.IO](https://unity-ui-extensions.github.io/SiteImages/itchio.png)](https://unityuiextensions.itch.io/uiextensions2-0 "Download from Itch.IO") | [![Download from Itch.IO](https://unity-ui-extensions.github.io/SiteImages/unionassets.png)](https://unionassets.com/unity-ui-extensions "Download from Union Assets") | [![Download from Itch.IO](https://unity-ui-extensions.github.io/SiteImages/patreon.jpg)](https://www.patreon.com/UnityUIExtensions "Support Unity UI Extensions on Patreon & download")| -| :--- | :--- | :--- | -| [Grab from Itchio](https://unityuiextensions.itch.io/uiextensions2-0) | [Obtain via Union Assets](https://unionassets.com/unity-ui-extensions) |[Support through Patreon](https://www.patreon.com/UnityUIExtensions) | - -> Still available to download on the [GitHub site](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/releases) if you prefer - -To view previous releases, visit the [release archive](https://unity-ui-extensions.github.io/Downloads) - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -## [Getting Started](https://unity-ui-extensions.github.io/GettingStarted) - -To get started with the project, here's a little guide: - -[![View Getting Started Video](http://img.youtube.com/vi/sVLeYmsNQAI/0.jpg)](http://www.youtube.com/watch?v=sVLeYmsNQAI "Unity UI getting started video") - ------ - -## [Updates:](https://unity-ui-extensions.github.io/ReleaseNotes/RELEASENOTES) - -## Release 2.3 - Reanimation - 2023/02/07 - -It has been a tough time for all since the last update, but things have been moving steadily along. In the past few months there has been a concerted effort to revamp and update the project ready for Unity 2022, as well as migrating the source repository over to GitHub and refreshing all the things. -We hope the new release is better for everyone and we have paid close attention to the editor menus and places to find all the controls for this release. - -To get up to speed with the Unity UI Extensions, check out the [Getting Started](https://unity-ui-extensions.github.io/GettingStarted.html) Page. - -> Ways to get in touch: -> -> - [Gitter Chat](https://gitter.im/Unity-UI-Extensions/Lobby) site for the UI Extensions project -> - [GitHub Discussions](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/discussions), if you have any questions, queries or suggestions -> -> Much easier that posting a question / issue on YouTube, Twitter or Facebook :D - -## Breaking changes - -For customers upgrading from earlier versions of Unity to Unity 2020, please be aware of the Breaking change related to Text Based components. You will need to manually replace any UI using the older ```Text``` component and replace them with ```TextMeshPro``` versions. This is unavoidable due to Unity deprecating the Text component. - -> New users to 2022 are unaffected as all the Editor commands have been updated to use the newer TextMeshPro versions. - -For more details, see the [deprecation notice](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/discussions/428) on GitHub. - -## Added - -- Added new FIFO based UI Line Render when dynamic line rendering is needed. -- Added ResetSelectableHighlight component. -- Added SetArc method to UICircle as requested. -- Added new UIHorizontalScroller based on UIVerticalScroller. -- Added OnHighlightChanged and OnPressChanged events for UI Button. -- Added error handling around setting Unity UI Components for Vertical/Horizontal ScrollSnaps. -- Added Editor Menu Option to create a Min/Max slider. -- Added the ability to set a specific item for combobox controls on start and not just the first. -- Added the ability to disable the combo boxes and make them read-only. - -## Changed - -- Refresh FancyScrollView with the latest fixes -- All Text based components updated to use TextMeshPro from Unity 2022 **Breaking Change** - -- Clean-up and reset pivots on scene start. -- Merged in feature/improved-ui-highlightable (pull request UILineRenderer - issues with specifying point locations at runtime #123). -- Merged in fix/ragesliderfix (pull request HorizontalScrollSnap Mask Area doesn't work when content created dynamically #125). -- Merged in fix/infinitescrollcontentsize (pull request Gradient initialization should be in Awake() #126). -- Merged in feature/controlTouchUp (pull request UILineRenderer mesh not updating in Editor scene view #127). -- Upgraded RangeSlider to work in both Horizontal and Vertical setups. -- Merged in RangeSlider-upgrade. (pull request Newtonsoft.Json.dll conflict #131) -- Updated UIVertical scroller to be 2022 compliant. -- Updated Curly UI to wait until end of the frame to recalculate positions. -- Updated Depth Texture sampler in UI Particles Shaders. -- Updated Points to always be an array of 1 when set to nothing for the Line Renderer. -- Updated Cooldown button to work with Keyboard input. -- Removed unneeded size calculation which caused some issues with mixed content. -- Resolved an issue whereby the last row in a flow layout group would not size correctly. -- Updated all components using "LayoutGroup" to override their OnDisable. -- Updated validation in the new MinMaxSlider. -- Updated Editor create options to add the correct Event System Input manager. -- Updated initialisation logic to not cause an endless loop in the TabNavigationHelper. -- Updated "Action" use to "UnityAction" to avoid Unity issues for DropDowns. -- Updated UIVerticalScroller for standards. -- Updated ReorderableList/ReorderableListElement to prevent creating a fake object for non-transferable items. -- Updated panel drawing for ComboBox controls and added DropdownOffset. -- Updated build issue with ReorderableListElement. -- Updated NonDrawingGraphic to require a CanvasRender, else it causes an error on run. - -## Deprecated - -- Marked ScrollPositionController as Obsolete, users should use the new Scoller. -- BestFitOutline - Deprecated in Unity 2020 onwards. (still available for earlier versions) -- NicerOutline - Deprecated in Unity 2020 onwards. (still available for earlier versions) -- Marked TileSizeFitter as obsolete as Unity has made this unworkable. - -## Fixed - -- Resolved issues with DisplayAbove and using a 0 ItemsToDisplay for ComboBox controls. -- Resolved startup issue that prevented the control from being used (Unity changed the start order in some instances), this was causing null reference issues with comboboxes. -- Patch fix for UILineRenderer. -- Resolves issue where the lower range value would become stuck when moving. -- Updated Infinite scroll to work with content of different sizes. -- Updated Dropdown list to NOT resize text Rect on draw. -- Revised the Curly UI fix as it was preventing the graphic from being updated in the scene view. -- Cleanup and ensuring the UIParticleSystem is disposed in onDestroy correctly. -- Clean up range slider unused variables. - -* [UI Extensions Issue log](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/issues) - -## Upgrade Notes - -We recommend using the UPM delivery method. If you are using the Unity asset, there should be no issues updating but if you have a problem, just deleted the old Unity-UI-Extensions folder and import the asset new. - ------ - -## Release History - -For the full release history, follow the below link to the full release notes page. - -### [Release Notes](https://unity-ui-extensions.github.io/ReleaseNotes/RELEASENOTES) - ------ - -## [Controls and extensions listed in this project](https://unity-ui-extensions.github.io/Controls) - -There are almost 70+ extension controls / effect and other utilities in the project which are listed on the following page: - -> ## [Check out the control demos on our Tumblr page](https://www.tumblr.com/blog/unityuiextensions) -> -> | [![UI Line Renderer](https://unity-ui-extensions.github.io/SiteImages/LineRenderer.gif)](https://www.tumblr.com/blog/unityuiextensions "UI Line Renderer") | [![UI Knob](https://unity-ui-extensions.github.io/SiteImages/UIKnob.gif)](https://www.tumblr.com/blog/unityuiextensions "UI Knob") | [![ScrollSnap](https://unity-ui-extensions.github.io/SiteImages/ScrollSnap.gif)](https://www.tumblr.com/blog/unityuiextensions "Scroll Snap")| -> | :--- | :--- | :--- | -> | [UI Line Renderer](https://www.tumblr.com/blog/unityuiextensions) | [UI Knob](https://www.tumblr.com/blog/unityuiextensions) |[Scroll Snap](https://www.tumblr.com/blog/unityuiextensions) | - -## [UI Extensions controls list](https://unity-ui-extensions.github.io/Controls) - -[Controls](https://unity-ui-extensions.github.io/Controls.html#controls) - -|Accordion|ColorPicker|Selection Box|UI Flippable|ComboBox| -|-|-|-|-|-| -|AutoComplete ComboBox|DropDown List|BoundToolTip|UIWindowBase|UI Knob| -|TextPic|Input Focus|Box Slider|Cooldown Button|Segmented Control| -|Stepper|Range Slider|Radial Slider|MultiTouch Scroll Rect|MinMax SLider| - -[Primitives](https://unity-ui-extensions.github.io/Controls.html#primitives) - -|UILineRenderer|UILineTextureRenderer|UICircle|DiamondGraph|UICornerCut| -|-|-|-|-|-| -|UIPolygon|UISquircle|||| - -[Layouts](https://unity-ui-extensions.github.io/Controls.html#layouts) - -|Horizontal Scroll Snap|Vertical Scroll Snap|Flow Layout Group|Radial Layout|Tile Size Fitter| -|-|-|-|-|-| -|Scroll Snap (alt implementation)|Reorderable List|UI Vertical Scroller|Curved Layout|Table Layout| -|FancyScrollView|Card UI|Scroll Position Controller (obsolete)|Content Scroll Snap Horizontal|Scroller| -|ResizePanel|RescalePanel|RescaleDragPanel||| - -[Effects](https://unity-ui-extensions.github.io/Controls.html#effect-components) - -|Best Fit Outline|Curved Text|Gradient|Gradient2|Letter Spacing| -|-|-|-|-|-| -|NicerOutline|RaycastMask|UIFlippable|UIImageCrop|SoftAlphaMask| -|CylinderText|UIParticleSystem|CurlyUI|Shine Effect|Shader Effects| - -[Additional Components](https://unity-ui-extensions.github.io/Controls.html#additional-components) - -|ReturnKeyTrigger|TabNavigation|uGUITools|ScrollRectTweener|ScrollRectLinker| -|-|-|-|-|-| -|ScrollRectEx|UI_InfiniteScroll|UI_ScrollRectOcclusion|UIScrollToSelection|UISelectableExtension| -|switchToRectTransform|ScrollConflictManager|CLFZ2 (Encryption)|DragCorrector|PPIViewer| -|UI_TweenScale|UI_MagneticInfiniteScroll|UI_ScrollRectOcclusion|NonDrawingGraphic| -|UILineConnector| -|UIHighlightable|Menu Manager|Pagination Manager||| - -*More to come* - ------ - -## [How do I get set up?](https://unity-ui-extensions.github.io/UPMInstallation.html) - -The recommended way to add the Unity UI Extensions project to your solution is to use the Unity package Manager. Simply use the Unity Package Manager to reference the project to install it - -New for 2020, we have added OpenUPM support and the package can be installed using the following [OpenUPM CLI](https://openupm.com/docs/) command: - -```cli -`openupm add com.unity.uiextensions` -``` - -> For more details on using [OpenUPM CLI, check the docs here](https://github.com/openupm/openupm-cli#installation). - -- Unity Package Manager - manual - -Alternatively, you can also add the package manually through the Unity package manager using the scope ```com.unity.uiextensions```, see the [Unity Package Manager docs](https://learn.unity.com/tutorial/the-package-manager) for more information. - -- Unity 2018 or lower -The pre-compiled Unity assets are the only solution for Unity 2018 or earlier due to the changes in the Unity UI framework in Unity made for 2019. -Either clone / download this repository to your machine and then copy the scripts in, or use the pre-packaged .UnityPackage for your version of Unity and import it as a custom package in to your project. - -## [Contribution guidelines](https://unity-ui-extensions.github.io/ContributionGuidelines) - -Got a script you want added? Then just fork the [GitHub repository](https://github.com/unity-UI-Extensions/com.unity.uiextensions) and submit a PR. All contributions accepted (including fixes) - -Just ensure: - -* The header of the script should match the standard used in all scripts. -* The script uses the **Unity.UI.Extensions** namespace so they do not affect any other developments. -* (optional) Add Component and Editor options where possible. (editor options are in the Editor\UIExtensionsMenuOptions.cs file) - -## [License](https://raw.githubusercontent.com/Unity-UI-Extensions/com.unity.uiextensions/release/LICENSE.md) - -All scripts conform to the BSD3 license and are free to use / distribute. See the [LICENSE](https://raw.githubusercontent.com/Unity-UI-Extensions/com.unity.uiextensions/release/LICENSE.md) file for more information = - -## [Like what you see?](https://unity-ui-extensions.github.io/FurtherInfo) - -All these scripts were put together for my latest book Unity3D UI Essentials -Check out the [page on my blog](http://bit.ly/Unity3DUIEssentials) for more details and learn all about the inner workings of the new Unity UI System. - -## [The downloads](https://unity-ui-extensions.github.io/Downloads) - -As this repo was created to support my new Unity UI Title ["Unity 3D UI Essentials"](http://bit.ly/Unity3DUIEssentials), in the downloads section you will find two custom assets (SpaceShip-DemoScene-Start.unitypackage and RollABallSample-Start.unitypackage). These are just here as starter scenes for doing UI tasks in the book. - -I will add more sample scenes for the UI examples in this repository and detail them above over time. - -## [Previous Releases](https://unity-ui-extensions.github.io/Downloads) - -Please see the [full downloads list](https://unity-ui-extensions.github.io/Downloads) for all previous releases and their corresponding download links. - ------ - -## More Information - -For more information about the project, please see the following pages: - -- [Downloads](Downloads.md) -- [Getting Started](GettingStarted.md) -- [UPM Installation Instructions](UPMInstallation.md) -- [Controls detailed list](Controls.md) -- [Further Information](FurtherInfo.md) -- [Contribution Guidelines](ContributionGuidelines.md) -- [See who's contributing](Contributors.md) -- [About](About.md) diff --git a/_site_test/ContributionGuidelines.html b/_site_test/ContributionGuidelines.html deleted file mode 100644 index 8821253..0000000 --- a/_site_test/ContributionGuidelines.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - -Contribution guidelines — Unity UI Extensions - - - -Contribution guidelines | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Contribution guidelines

- -

Got a script you want added? Then just fork the GitHub repository and submit a PR. All contributions accepted (including fixes)

- -

Just ensure:

- -
    -
  • The header of the script matches the standard used in all scripts
    • -
  • The script uses the Unity.UI.Extensions namespace so they do not affect any other developments
    • -
  • Ensure there are no unnecessary “usings” declarations in the script to avoid warning notices
    • -
  • Try where possible to annotate your code, so it’s clear what each part does (also add TOOLTIPS to any public parameters)
    • -
  • (optional) Add Component and Editor options where possible (editor options are in the Editor\UIExtensionsMenuOptions.cs file)
    • -
- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter / Facebook / YouTube

- -
-

Also, come chat live with the Unity UI Extensions community on Gitter here

- -

UI Extensions Live Chat

-
- -
- -
- - - - - diff --git a/_site_test/ContributionGuidelines.md b/_site_test/ContributionGuidelines.md deleted file mode 100644 index ed20107..0000000 --- a/_site_test/ContributionGuidelines.md +++ /dev/null @@ -1,37 +0,0 @@ -# Contribution guidelines - -Got a script you want added? Then just fork the [GitHub repository](https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git) and submit a PR. All contributions accepted (including fixes) - -Just ensure: - -* The header of the script matches the standard used in all scripts -* The script uses the **Unity.UI.Extensions** namespace so they do not affect any other developments -* Ensure there are no unnecessary "usings" declarations in the script to avoid warning notices -* Try where possible to annotate your code, so it's clear what each part does (also add TOOLTIPS to any public parameters) -* (optional) Add Component and Editor options where possible (editor options are in the Editor\UIExtensionsMenuOptions.cs file) - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here -> -> ## [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/Contributors.html b/_site_test/Contributors.html deleted file mode 100644 index 4d925c8..0000000 --- a/_site_test/Contributors.html +++ /dev/null @@ -1,190 +0,0 @@ - - - - - -Contributors — Unity UI Extensions - - - -Contributors | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Contributors

- -

A huge thanks to all of the contributors and supports of the project, without you, this would be a much harder job.

- -

Time as we know is the root of all evil, so without the communities support, it’s hard to dedicate enough effort to constantly maintain the project. The 2.0 release alone has consumed over 3 months of my time away from my other projects (and my own games) that I’m invested in.

- -

Your support goes a long way to helping keep the project alive. (and may open the doors to other rewards in the future)

- -

The code contributors go without saying, their names are listed everywhere and on every script in the project, please support them and help them become gaming legends wherever you see their names come up.

- -

As for the unsung heroes who have also contributed funds to the project, they are:

- -
    -
  • Streamfall Interactive (our biggest supporter to date!)
    • -
  • Plastic Cow Games
    • -
  • Marcus Wallinder
    • -
  • Rodrigo Laiz
    • -
  • Tri Nguyen
    • -
  • Sourabh Verma
    • -
  • Jakov Dužević
    • -
  • Scott Looney (our first supporter!)
    • -
- -

With the new support / contribution options I hope to see this list increase and I’ll be able to also start offering other rewards back to everyone supporting the project (likely beginning with 3D printed gifts of your choice :D)

- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter / Facebook / YouTube

- -
-

Also, come chat live with the Unity UI Extensions community on Gitter here

- -

UI Extensions Live Chat

-
- -
- -
- - - - - diff --git a/_site_test/Contributors.md b/_site_test/Contributors.md deleted file mode 100644 index adb4e6e..0000000 --- a/_site_test/Contributors.md +++ /dev/null @@ -1,48 +0,0 @@ -# Contributors - -A huge thanks to all of the contributors and supports of the project, without you, this would be a much harder job. - -Time as we know is the root of all evil, so without the communities support, it's hard to dedicate enough effort to constantly maintain the project. The 2.0 release alone has consumed over 3 months of my time away from my other projects (and my own games) that I'm invested in. - -Your support goes a long way to helping keep the project alive. (and may open the doors to other rewards in the future) - -The code contributors go without saying, their names are listed everywhere and on every script in the project, please support them and help them become gaming legends wherever you see their names come up. - -As for the unsung heroes who have also contributed funds to the project, they are: - -* **Streamfall Interactive** (our biggest supporter to date!) -* Plastic Cow Games -* Marcus Wallinder -* Rodrigo Laiz -* Tri Nguyen -* Sourabh Verma -* Jakov Dužević -* **Scott Looney** (our first supporter!) - -With the new support / contribution options I hope to see this list increase and I'll be able to also start offering other rewards back to everyone supporting the project (likely beginning with 3D printed gifts of your choice :D) - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here -> -> ## [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/Controls.html b/_site_test/Controls.html deleted file mode 100644 index 3cef36f..0000000 --- a/_site_test/Controls.html +++ /dev/null @@ -1,1206 +0,0 @@ - - - - - -Controls and extensions listed in this project — Unity UI Extensions - - - -Controls and extensions listed in this project | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Controls and extensions listed in this project

- -

This page lists all the available controls within the UI Extensions project. To look at the detailed documentation page, click the name of the control.

- -

Controls

- -

================

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ControlDescriptionMenu CommandComponent CommandNotesDonateCredits
AccordionAn Accordian style control with animated segments.N/AComponent / UI / Extensions / AccordionGroupdemo video ChoMPHi
   Component / UI / Extensions / AccordionItemdemo video ChoMPHi
Color PickerA color picker UIN/A (Use Prefab) https://github.com/judah4/HSV-Color-Picker-Unity
Project folder includes prefab and sample scene		 judah4 yosun kurozael gamedev1020192 troien boredmormon
Selection BoxAn RTS style selection box controlUI / Extensions / Selection BoxUI / Extensions / Selection Boxtutorial video Korindian, BenZed
UIFlippableImproved Image control with image flipping optionsUI / Extensions / UI FlippableUI / Extensions / Flippabletutorial video ChoMPHi
UIWindowBaseA draggable Window implementationUI / Extensions / UI Window BaseUI / Extensions / UI Window Basetutorial video GXMark, alexzzzz, CaoMengde777, TroyDavis
ComboBoxA fixed combobox implementation for textUI / Extensions / ComboBoxUI / Extensions / ComboBoxtutorial video Perchik
AutoCompleteComboBoxA text combobox with autocomplete selectionUI / Extensions / AutoComplete ComboBoxUI / Extensions / AutoComplete ComboBoxtutorial video Perchik
DropDownListA basic drop down list with text and image supportUI / Extensions / Dropdown ListUI / Extensions / Dropdown Listtutorial video Perchik
ToolTipA basic Tooltip implementationUI / Extensions / TooltipUI / Extensions / ToolTip  drHogan
HoverToolTipA basic hover Tooltip implementationUI / Extensions / Hover TooltipUI / Extensions / Hover Tooltip  drHogan
BoundToolTipAn alternate Tooltip implementation with central listenerUI / Extensions / Bound Tooltip / TooltipUI / Extensions / Bound Tooltip / Tooltip ItemOffset and tooltip placement needs work Martin Sharkbomb
  UI / Extensions / Bound Tooltip / Tooltip Trigger  Martin Sharkbomb 
UI_KnobA radial Knob style controlUI / Extensions / UI_KnobUI / Extensions / UI_Knobtutorial video Tomasz Schelenz
TextPicEnhanced Text control that supports adding images inside textUI / Extensions / TextPicUI / Extensions / TextPic  drobina, w34edrtfg, playemgames
InputFocusEnhanced InputField control for forms, enables Enter to submit and other features UI / Extensions / InputFocus  Zelek
Box SliderA slider which supports both X and Y values within a box UI / Extensions / Box SliderDemo video judah4
MultiTouch ScrollRectFixed version of the scroll rect to properly handle multiple touches UI / Extensions / MultiTouchScrollRect  PixelEnvision
CooldownButtonA selectable extension to provide a “cooldown” capability, preventing the button from being usable until a specified amount of time has passed UI / Extensions / CooldownButton  SimonDarksideJ
Segmented ControlA segmented control, like those found on iOS. It’s two or more buttons side by side, where only one of them is selectable at a time UI / Extensions / SegmentedControl  David Gileadi
StepperA stepper control, like those found in iOS. It’s basically two buttons side by side, and can step its numeric value up and down UI / Extensions / Stepper  David Gileadi
Range SliderA slider control that can support range values with min/maxUI / Extensions / Range SliderUI / Extensions / Range SliderDemo video Ben MacKinnon @Dover8
MinMaxSliderAn alternative slider control that can support range values with min/maxUI / Extensions / MinMax SliderUI / Extensions / MinMax Slider  brogan89
Extensions ToggleEnhanced Toggle component with unique IDs and dual event system UI / Extensions / Extensions Toggle  Unity UI Extensions Contributors
Extensions Toggle GroupEnhanced ToggleGroup managing ExtensionsToggle components UI / Extensions / Extensions Toggle Group  Unity UI Extensions Contributors
SegmentIndividual segment component within SegmentedControl UI / Extensions / Segmented Control / Segment  David Gileadi
- -

Primitives

- -

================

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ControlDescriptionMenu CommandComponent CommandNotesDonateCredits
UILineRendererGraphic control for drawing lines in the UI SystemUI / Extensions / Primitives / UI Line RendererUI / Extensions / Primitives / UI Line Renderertutorial video jack.sydorenko
UILineTextureRendererGraphic control for drawing lines in the UI SystemUI / Extensions / Primitives / UI Line Texture RendererUI / Extensions / Primitives / UI Line Texture Renderertutorial video jack.sydorenko, jonbro5556
UILineRendererFIFOHigh Performant version of the Graphic control for drawing lines in the UI SystemUI / Extensions / Primitives / UILineRendererFIFOUI / Extensions / Primitives / UILineRendererFIFO  Steve Westhoff
UILineRendererListAdvanced line renderer with Bezier curves, configurable joins, and line capsUI / Extensions / Primitives / UI Line Renderer ListUI / Extensions / Primitives / UILineRendererList  jack.sydorenko, firagon
UICircleGraphic control for drawing circles in the UI SystemUI / Extensions / Primitives / UI CircleUI / Extensions / Primitives / UI Circletutorial video zge
DiamondGraphGraphic control for drawing a diamond in the UI SystemUI / Extensions / Primitives / DiamondGraphUI / Extensions / Primitives / DiamondGraph5.2+ only tutorial video koohddang
UICornerCutGraphic control for drawing a diamond in the UI SystemUI/Extensions/Primitives/Cut CornersUI/Extensions/Primitives/Cut Corners  Freezy
UIPolygonGraphic control for drawing custom polygons in the UI SystemUI / Extensions / Primitives / UI PolygonUI/Extensions/Primitives/UI Polygon  CiaccoDavide
UISquircleSquare cirlces, who doesn’t want them?UI / Extensions / Primitives / SquircleUI/Extensions/Primitives/Squircle  Soprachev Andrei
- -

Layouts

- -

================

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
LayoutDescriptionMenu CommandComponent CommandNotesDonateCredits 
Card UIA table layout system supporting customizable column and row sizes / layoutN/AN/A  ryanslikesocool 
ContentScrollSnapA dynamic scroll snap control supporting differently sized content UI/Extensions/ContentSnapScrollHorizontal  Beka Westberg 
CurvedLayoutA curved layout system Layout / Extensions / Curved Layout  Freezy 
FancyScrollViewA dynamic layout system with inbuilt animations/event systemN/A Code OnlyN/A Code Only  setchi 
FlowLayoutGroupA more rugged grid style layout group Layout / Extensions / Flow Layout GroupExample Video Simie 
ScrollSnapAn alternate scroll snap control supporting both Horizontal and Vertical layouts in one controlUI / Extensions / Fixed Item Scroll / Snap Horizontal Single Item   xesenix 
HorizontalScrollSnapA pages scroll rect that can work in steps / pages, includes button supportUI / Extensions / Horizontal Scroll SnapLayout / Extensions / Horizontal Scroll Snaptutorial video BinaryX 
VerticalScrollSnapA pages scroll rect that can work in steps / pages, includes button supportUI / Extensions / Vertical Scroll SnapLayout / Extensions / Vertical Scroll Snaptutorial video BinaryX, Simon Darkside Jackson 
 UI / Extensions / Fixed Item Scroll / Snap Horizontal Multiple Item    xesenix 
 UI / Extensions / Fixed Item Scroll / Snap Vertical Single Item    xesenix 
 UI / Extensions / Fixed Item Scroll / Snap Vertical Multiple Item    xesenix 
RadialLayoutA radial layout system Layout / Extensions / Radial Layouttutorial video Danny Goodayle 
ReorderableListA dynamic control allowing drag and drop of child elements with reordering supportUI/Extensions/Re-orderable Lists/Re-orderable Vertical Scroll RectUI/Extensions/Re-orderable listExample Ziboo 
 UI/Extensions/Re-orderable Lists/Re-orderable Horizontal Scroll Rect    Ziboo 
 UI/Extensions/Re-orderable Lists/Re-orderable Grid Scroll Rect    Ziboo 
 UI/Extensions/Re-orderable Lists/Re-orderable Vertical List    Ziboo 
 UI/Extensions/Re-orderable Lists/Re-orderable Horizontal List    Ziboo 
 UI/Extensions/Re-orderable Lists/Re-orderable Grid    Ziboo 
ResizePanelAn automatically resizing UI panel UI / Extensions / RescalePanels / ResizePanel  .entity 
RescalePanelAn automatically rescaling UI Panel UI / Extensions / RescalePanels / RescalePanel  .entity 
RescaleDragPanelAn automatically rescaling UI Panel that supports dragging UI / Extensions / RescalePanels / RescaleDragPanel  .entity 
TableLayoutGroupA table layout system supporting customizable column and row sizes / layout Layout / Extensions / Table Layout Group  RahulOfTheRamanEffect 
TileSizeFitterA fitter layout that will shrink / expand content by tiles Layout / Extensions / TileSizeFittertutorial video Ges 
RescaleDragPanelRolling scrolling selectorUI / Extensions / Vertical ScrollerLayout / Extensions / Vertical Scroller  DonateMrs. YakaYocha
- -

Effect Components

- -

=====================

- -
-

Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EffectDescriptionComponent CommandNotesDonateCredits
BestFitOutlineAn improved outline effectUI / Effects / Extensions / Best Fit Outline  Melang
GradientApply vertex colours in a gradient on any UI objectUI / Effects / Extensions / Gradient  Breyer
Gradient2Apply vertex colours in a gradient on any UI objectUI / Effects / Extensions / Gradient2  Breyer
RaycastMaskAn example of an enhanced mask component able to work with the image data. Enables picking on image parts and not just the Rect TransformUI / Effects / Extensions / Raycast Mask  senritsu
UIFlippableImage component effect to flip the graphicUI / Effects / Extensions / UI Flippable  ChoMPHi
UIImageCropShader based mask system which clips to specific ranges X&YUI / Effects / Extensions / UI Image Crop  00christian00
SoftAlphaMaskShader based mask able to clip images using an alpha maskUI / Effects / Extensions / Soft Mask Script DonateNemoKrad
Shader Effects SuiteCollection of shader-based effects (Additive, Soft Additive, Multiply, Linear Dodge, Screen, Shine)UI / Effects / Extensions / UI*EffectUI / Effects / Extensions / UI*Effect and Shining Effect 00christian00, ömer faruk sayılır
UIParticleSystemImplementation of a particle system on a canvasUI / Effects / Extensions / UI Particle System5.3+ only Glennpow
CurlyUIA UI Effect that will make your UI CurlyUI / Effects / Extensions / CUI***  Titinious
- -

Deprecated for Unity 6 / V3

- -

=======================

- -

The following components have been deprecated for Unity 6 (Version 3.0.0) and are no longer maintained. They remain documented for legacy reference only.

- -

Why Deprecated?

- -

Text Effects: Unity deprecated the legacy Text component in favor of TextMeshPro. Text effects that relied on Text component vertex manipulation no longer function with TextMeshPro due to its different architecture. Users should utilize native TextMeshPro effects instead.

- -

VR/Input Modules: These components were removed as Unity’s input system and VR frameworks have evolved significantly, making these implementations obsolete.

- -

Other Components: ImageExtended, Infinite Scroll Snap, Serialization, and UIButton were removed due to functionality being superseded by other components or Unity’s built-in features.

- -

Deprecated Components

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComponentReasonAlternativeCredits
CurvedTextText component deprecated by UnityUse TextMeshPro native effectsBreyer
CylinderTextText component deprecated by UnityUse TextMeshPro native effectsBreyer
LetterSpacingText component deprecated by UnityUse TextMeshPro character spacingDeeperbeige
MonoSpacingText component deprecated by UnityUse TextMeshPro character spacingHerbst
NicerOutlineText component deprecated by UnityUse TextMeshPro outlineMelang
VRInputModuleObsolete VR input systemUse Unity’s XR Interaction ToolkitN/A
VRCursorObsolete VR input systemUse Unity’s XR Interaction ToolkitN/A
AimerInputModuleObsolete input systemUse Unity’s new Input SystemN/A
GamePadInputModuleObsolete input systemUse Unity’s new Input SystemN/A
ImageExtendedFunctionality supersededUse standard Unity Image componentGes
Infinite Scroll SnapReplaced by improved implementationUse HorizontalScrollSnap or VerticalScrollSnap with infinite scrolling enabledN/A
SerializationNo longer neededUse Unity’s JsonUtility or other serialization solutionsN/A
UIButtonDuplicate functionalityUse Unity Button or CooldownButtonN/A
- -

Additional Components

- -

=======================

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComponentDescriptionComponent CommandNotesDonateCredits
InputFieldEnterSubmitAutomatically submits InputField when Enter key is pressedUI / Extensions / Input Field Submit  Vicente Russo
ReturnKeyTriggerEnables you to bind the return key within an InputField control to a buttonUI / Extensions / ReturnKey Trigger  Melang
TabNavigationAn example Tab navigation script, updated to add manual navigationUI / Extensions / Tab Navigation  Melang, omatase
uGUITools Menu / uGUI  Senshi
ScrollRectTweenerTweening solution for ScrollRects, add smoothing automaticallyUI / Extensions / ScrollRectTweenertutorial video Martin Sharkbomb
ScrollRectLinkerScrollRect Linker script, enable multiple ScrollRects to move togetherUI / Extensions / ScrollRectLinkertutorial video Martin Sharkbomb
ScrollRectExImproved ScrollRect control, enables support for Nested ScrollRectsUI / Extensions / ScrollRectExtutorial video CaptainSchnittchen, GamesRUs
UIScrollToSelectionEnables a ScrollRect to scroll based on the selected child automaticallyUI / Extensions / UIScrollToSelection  zero3growlithe
UISelectableExtensionRefactor of original UIButton control, can now add Press/Release and Hold events to any Selectable controlUI / Extensions / UI Selectable Extension  AriathTheWise / Simon Jackson
switchToRectTransformRectTransform extension method to move one Rect to anotherN/A  Izitmee
ScrollConflictManagerResolves dragging issues with multiple nested scroll rectsUI / Extensions / Scrollrect Conflict Managertutorial video srinivas sunil
CLFZ2LZF Compression library to compress dataN/ACheck the readme in the Utilities folder mrbroshkin, Agent_007
DragCorrectorUtility to manage the EventSystem drag threshold for high DPI systemsUI / Extensions / Drag Corrector  FireOApache
PPIViewerSimple script to attach to a text component to display the current DPI/PPIUI / Extensions / PPI Viewer  FireOApache
UI_TweenScaleDynamic scalling of text or image (including button) based on curvesUI / Extensions / UI Tween Scaletutorial video Tomasz Schelenz
UI_ScrollRectOcclusionDisables the objects outside of the scrollrect viewport. Useful for scrolls with lots of contentUI / Extensions / UI ScrollRect Occlusiontutorial video Tomasz Schelenz
UI_InfiniteScrollConfigures automatically - works in both vertical and horizontal (but not both at the same time) - drag and drop - can be initialized by codeUI / Extensions / UI Infinite Scrolltutorial video Tomasz Schelenz
UI_MagneticInfiniteScrollAn extension of the InfiniteScroll control that adds a hot spot region to anchor child elements when scrolling finishes.UI / Extensions / UI Magnetic Infinite Scroll  Febo Zodiaco
Non Drawing GraphicGraphic control that does not draw or update, useful for hidden buttons when used with the Selectable ExtensionUI / Extensions / NonDrawingGraphic  Slipp Douglas Thompson
SelectableScalarA simple tween scaler to affect Rect Transform scale on other controlsUI / Extensions / Selectable ScalarDemo video Tomasz Schelenz
UILineConnectorA Line Renderer helper used to draw a chain between multiple gameObjects, like a node connectorUI / Extensions / UILineConnector  Alastair Aitchison
UIHighlightableA custom component to enable RectTransform highlighting without the Unity UI Selectable control.UI / Extensions / UIHighlightable  SimonDarksideJ
Menu SystemA customisable menu management system for the Unity UI.UI / Extensions / Menu ManagerExample Project Nezz (Adam Kapos)
Pagination ManagerA management script to attach to the Horizontal or Vertical Scroll snaps to enable automatic click navigation.UI / Extensions / Pagination Manager  Brogan King (@BroganKing)
- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter / Facebook / YouTube

- -
-

Also, come chat live with the Unity UI Extensions community on Gitter here

- -

UI Extensions Live Chat

-
- -
- -
- - - - - diff --git a/_site_test/Controls.md b/_site_test/Controls.md deleted file mode 100644 index 874e8c7..0000000 --- a/_site_test/Controls.md +++ /dev/null @@ -1,191 +0,0 @@ -# Controls and extensions listed in this project - -This page lists all the available controls within the UI Extensions project. To look at the detailed documentation page, click the name of the control. - -## Controls - -================ - -|Control|Description|Menu Command|Component Command|Notes|Donate|Credits| -|-|-|-|-|-|-|-| -|**[Accordion](/Controls/Accordion.md)** | An Accordian style control with animated segments. | N/A | Component / UI / Extensions / AccordionGroup |[demo video](http://forum.unity3d.com/threads/accordion-type-layout.271818/)|| ChoMPHi| - | | | | Component / UI / Extensions / AccordionItem |[demo video](http://forum.unity3d.com/threads/accordion-type-layout.271818/)|| ChoMPHi| -|**[Color Picker](/Controls/ColorPicker.md)** | A color picker UI | N/A (Use Prefab) || [https://github.com/judah4/HSV-Color-Picker-Unity](https://github.com/judah4/HSV-Color-Picker-Unity)
Project folder includes prefab and sample scene || judah4 yosun kurozael gamedev1020192 troien boredmormon| -|**[Selection Box](/Controls/SelectionBox.md)** | An RTS style selection box control | UI / Extensions / Selection Box | UI / Extensions / Selection Box |[tutorial video](https://www.youtube.com/watch?v=UtM3HejKL5s)|| Korindian, BenZed| -|**[UIFlippable](/Controls/UIFlippable.md)** | Improved Image control with image flipping options | UI / Extensions / UI Flippable | UI / Extensions / Flippable |[tutorial video](https://www.youtube.com/watch?v=Htt2RNa2qy0)|| ChoMPHi| -|**[UIWindowBase](/Controls/UIWindowBase.md)** | A draggable Window implementation | UI / Extensions / UI Window Base | UI / Extensions / UI Window Base |[tutorial video](https://www.youtube.com/watch?v=Htt2RNa2qy0)|| GXMark, alexzzzz, CaoMengde777, TroyDavis| -|**[ComboBox](/Controls/ComboBox.md)** | A fixed combobox implementation for text | UI / Extensions / ComboBox | UI / Extensions / ComboBox |[tutorial video](https://www.youtube.com/watch?v=JrEfs47FoOE)|| Perchik| -|**[AutoCompleteComboBox](/Controls/AutoCompleteComboBox.md)** | A text combobox with autocomplete selection | UI / Extensions / AutoComplete ComboBox | UI / Extensions / AutoComplete ComboBox |[tutorial video](https://www.youtube.com/watch?v=JrEfs47FoOE)|| Perchik| -|**[DropDownList](/Controls/DropDownList.md)** | A basic drop down list with text and image support | UI / Extensions / Dropdown List | UI / Extensions / Dropdown List |[tutorial video](https://www.youtube.com/watch?v=JrEfs47FoOE)|| Perchik| -|**[ToolTip](/Controls/ToolTip.md)** | A basic Tooltip implementation | UI / Extensions / Tooltip | UI / Extensions / ToolTip ||| drHogan| -|**[HoverToolTip](/Controls/HoverToolTip.md)** | A basic hover Tooltip implementation | UI / Extensions / Hover Tooltip | UI / Extensions / Hover Tooltip ||| drHogan| -|**[BoundToolTip](/Controls/BoundToolTip.md)** | An alternate Tooltip implementation with central listener | UI / Extensions / Bound Tooltip / Tooltip | UI / Extensions / Bound Tooltip / Tooltip Item | Offset and tooltip placement needs work || Martin Sharkbomb| - | | | UI / Extensions / Bound Tooltip / Tooltip Trigger ||| Martin Sharkbomb| -|**[UI_Knob](/Controls/UI_Knob.md)** | A radial Knob style control | UI / Extensions / UI_Knob | UI / Extensions / UI_Knob |[tutorial video](https://www.youtube.com/watch?v=WP8ZBwyRqN8)|| Tomasz Schelenz| -|**[TextPic](/Controls/TextPic.md)** | Enhanced Text control that supports adding images inside text | UI / Extensions / TextPic | UI / Extensions / TextPic ||| drobina, w34edrtfg, playemgames| -|**[InputFocus](/Controls/InputFocus.md)** | Enhanced InputField control for forms, enables Enter to submit and other features || UI / Extensions / InputFocus ||| Zelek| -|**[Box Slider](/Controls/BoxSlider.md)** | A slider which supports both X and Y values within a box || UI / Extensions / Box Slider |[Demo video](/Controls/Images/BoxSliderDemo.mp4)|| judah4| -|**[MultiTouch ScrollRect](/Controls/MultiTouchScrollRect.md)** | Fixed version of the scroll rect to properly handle multiple touches || UI / Extensions / MultiTouchScrollRect ||| PixelEnvision| -|**[CooldownButton](/Controls/CooldownButton.md)** | A selectable extension to provide a "cooldown" capability, preventing the button from being usable until a specified amount of time has passed || UI / Extensions / CooldownButton ||| SimonDarksideJ| -|**[Segmented Control](/Controls/SegmentedControl.md)** | A segmented control, like those found on iOS. It's two or more buttons side by side, where only one of them is selectable at a time || UI / Extensions / SegmentedControl ||| David Gileadi| -|**[Stepper](/Controls/Stepper.md)** | A stepper control, like those found in iOS. It's basically two buttons side by side, and can step its numeric value up and down || UI / Extensions / Stepper ||| David Gileadi| -|**[Range Slider](/Controls/RangeSlider.md)** | A slider control that can support range values with min/max | UI / Extensions / Range Slider | UI / Extensions / Range Slider|[Demo video](/Controls/Images/RangeSliderDemo.mp4)|| Ben MacKinnon @Dover8| -|**[MinMaxSlider](/Controls/MinMaxSlider.md)** | An alternative slider control that can support range values with min/max | UI / Extensions / MinMax Slider | UI / Extensions / MinMax Slider||| brogan89| -|**[Extensions Toggle](/Controls/ExtensionsToggle.md)** | Enhanced Toggle component with unique IDs and dual event system || UI / Extensions / Extensions Toggle ||| Unity UI Extensions Contributors| -|**[Extensions Toggle Group](/Controls/ExtensionsToggleGroup.md)** | Enhanced ToggleGroup managing ExtensionsToggle components || UI / Extensions / Extensions Toggle Group ||| Unity UI Extensions Contributors| -|**[Segment](/Controls/Segment.md)** | Individual segment component within SegmentedControl || UI / Extensions / Segmented Control / Segment ||| David Gileadi| - -## Primitives - -================ - -|Control|Description|Menu Command|Component Command|Notes|Donate|Credits| -|-|-|-|-|-|-|-| -|**[UILineRenderer](/Controls/UILineRenderer.md)** | Graphic control for drawing lines in the UI System | UI / Extensions / Primitives / UI Line Renderer | UI / Extensions / Primitives / UI Line Renderer |[tutorial video](https://www.youtube.com/watch?v=OElcWAZGHi0)|| jack.sydorenko| -|**[UILineTextureRenderer](/Controls/UILineTextureRenderer.md)** | Graphic control for drawing lines in the UI System | UI / Extensions / Primitives / UI Line Texture Renderer | UI / Extensions / Primitives / UI Line Texture Renderer |[tutorial video](https://www.youtube.com/watch?v=OElcWAZGHi0)|| jack.sydorenko, jonbro5556| -|**[UILineRendererFIFO](/Controls/UILineRendererFIFO.md)** | High Performant version of the Graphic control for drawing lines in the UI System | UI / Extensions / Primitives / UILineRendererFIFO | UI / Extensions / Primitives / UILineRendererFIFO ||| Steve Westhoff| -|**[UILineRendererList](/Controls/UILineRendererList.md)** | Advanced line renderer with Bezier curves, configurable joins, and line caps | UI / Extensions / Primitives / UI Line Renderer List | UI / Extensions / Primitives / UILineRendererList ||| jack.sydorenko, firagon| -|**[UICircle](/Controls/UICircle.md)** | Graphic control for drawing circles in the UI System | UI / Extensions / Primitives / UI Circle | UI / Extensions / Primitives / UI Circle |[tutorial video](https://www.youtube.com/watch?v=2KOnEKAVua0)|| zge| -|**[DiamondGraph](/Controls/DiamondGraph.md)** | Graphic control for drawing a diamond in the UI System | UI / Extensions / Primitives / DiamondGraph | UI / Extensions / Primitives / DiamondGraph |5.2+ only [tutorial video](https://www.youtube.com/watch?v=2KOnEKAVua0)|| koohddang| -|**[UICornerCut](/Controls/UICornerCut.md)** | Graphic control for drawing a diamond in the UI System | UI/Extensions/Primitives/Cut Corners | UI/Extensions/Primitives/Cut Corners ||| Freezy| -|**[UIPolygon](/Controls/UIPolygon.md)** | Graphic control for drawing custom polygons in the UI System | UI / Extensions / Primitives / UI Polygon | UI/Extensions/Primitives/UI Polygon ||| CiaccoDavide| -|**[UISquircle](/Controls/UISquircle.md)** | Square cirlces, who doesn't want them? | UI / Extensions / Primitives / Squircle | UI/Extensions/Primitives/Squircle ||| Soprachev Andrei| - -## Layouts - -================ - -|Layout | Description | Menu Command | Component Command | Notes | Donate | Credits -|-|-|-|-|-|-|-| -|**[Card UI](/Controls/CardUI.md)** | A table layout system supporting customizable column and row sizes / layout |N/A|N/A||| ryanslikesocool| -|**[ContentScrollSnap](/Controls/ContentScrollSnapHorizontal.md)** | A dynamic scroll snap control supporting differently sized content || UI/Extensions/ContentSnapScrollHorizontal ||| Beka Westberg| -|**[CurvedLayout](/Controls/CurvedLayout.md)** | A curved layout system || Layout / Extensions / Curved Layout ||| Freezy| -|**[FancyScrollView](/Controls/FancyScrollView.md)** | A dynamic layout system with inbuilt animations/event system |N/A Code Only| N/A Code Only ||| setchi| -|**[FlowLayoutGroup](/Controls/FlowLayoutGroup.md)** | A more rugged grid style layout group || Layout / Extensions / Flow Layout Group | [Example Video](https://www.youtube.com/watch?v=tMe_3tJTZvc) || Simie| -|**[ScrollSnap](/Controls/ScrollSnap.md)** | An alternate scroll snap control supporting both Horizontal and Vertical layouts in one control | UI / Extensions / Fixed Item Scroll / Snap Horizontal Single Item|||| xesenix| -|**[HorizontalScrollSnap](/Controls/HorizontalScrollSnap.md)** | A pages scroll rect that can work in steps / pages, includes button support | UI / Extensions / Horizontal Scroll Snap | Layout / Extensions / Horizontal Scroll Snap |[tutorial video](https://www.youtube.com/watch?v=KJlIlWHlfMo)|| BinaryX| -|**[VerticalScrollSnap](/Controls/VerticalScrollSnap.md)** | A pages scroll rect that can work in steps / pages, includes button support | UI / Extensions / Vertical Scroll Snap | Layout / Extensions / Vertical Scroll Snap |[tutorial video](https://www.youtube.com/watch?v=KJlIlWHlfMo)|| BinaryX, Simon Darkside Jackson| -|| UI / Extensions / Fixed Item Scroll / Snap Horizontal Multiple Item||||| xesenix| -|| UI / Extensions / Fixed Item Scroll / Snap Vertical Single Item||||| xesenix| -|| UI / Extensions / Fixed Item Scroll / Snap Vertical Multiple Item||||| xesenix| -|**[RadialLayout](/Controls/RadialLayout.md)** | A radial layout system || Layout / Extensions / Radial Layout |[tutorial video](https://www.youtube.com/watch?v=iUlk0d2RDMs)|| Danny Goodayle| -|**[ReorderableList](/Controls/ReorderableList.md)** | A dynamic control allowing drag and drop of child elements with reordering support | UI/Extensions/Re-orderable Lists/Re-orderable Vertical Scroll Rect|UI/Extensions/Re-orderable list|[Example](http://i.giphy.com/3o85xri0ARKKSfDHIQ.gif)|| Ziboo| -|| UI/Extensions/Re-orderable Lists/Re-orderable Horizontal Scroll Rect||||| Ziboo| -|| UI/Extensions/Re-orderable Lists/Re-orderable Grid Scroll Rect||||| Ziboo| -|| UI/Extensions/Re-orderable Lists/Re-orderable Vertical List||||| Ziboo| -|| UI/Extensions/Re-orderable Lists/Re-orderable Horizontal List||||| Ziboo| -|| UI/Extensions/Re-orderable Lists/Re-orderable Grid||||| Ziboo| -|**[ResizePanel](/Controls/ResizePanel.md)** | An automatically resizing UI panel || UI / Extensions / RescalePanels / ResizePanel ||| .entity| -|**[RescalePanel](/Controls/RescalePanel.md)** | An automatically rescaling UI Panel || UI / Extensions / RescalePanels / RescalePanel ||| .entity| -|**[RescaleDragPanel](/Controls/RescaleDragPanel.md)** | An automatically rescaling UI Panel that supports dragging || UI / Extensions / RescalePanels / RescaleDragPanel ||| .entity| -|**[TableLayoutGroup](/Controls/TableLayoutGroup)** | A table layout system supporting customizable column and row sizes / layout || Layout / Extensions / Table Layout Group ||| RahulOfTheRamanEffect| -|**[TileSizeFitter](/Controls/TileSizeFitter.md)** | A fitter layout that will shrink / expand content by tiles || Layout / Extensions / TileSizeFitter |[tutorial video](https://www.youtube.com/watch?v=AkQNWl8mnxg)|| Ges| -|**[RescaleDragPanel](/Controls/UIVerticalScroller.md)** | Rolling scrolling selector | UI / Extensions / Vertical Scroller | Layout / Extensions / Vertical Scroller |||[Donate](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RJ8D9FRFQF9VS)| Mrs. YakaYocha| - -## Effect Components - -===================== - -> Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead. - -|Effect|Description|Component Command|Notes|Donate|Credits| -|-|-|-|-|-|-| -|**[BestFitOutline](/Controls/BestFitOutline.md)** | An improved outline effect | UI / Effects / Extensions / Best Fit Outline ||| Melang| -|**[Gradient](/Controls/Gradient.md)** | Apply vertex colours in a gradient on any UI object | UI / Effects / Extensions / Gradient ||| Breyer| -|**[Gradient2](/Controls/Gradient2.md)** | Apply vertex colours in a gradient on any UI object | UI / Effects / Extensions / Gradient2 ||| Breyer| -|**[RaycastMask](/Controls/RaycastMask.md)** | An example of an enhanced mask component able to work with the image data. Enables picking on image parts and not just the Rect Transform | UI / Effects / Extensions / Raycast Mask ||| senritsu| -|**[UIFlippable](/Controls/UIFlippable.md)** | Image component effect to flip the graphic | UI / Effects / Extensions / UI Flippable ||| ChoMPHi| -|**[UIImageCrop](/Controls/UIImageCrop.md)** | Shader based mask system which clips to specific ranges X&Y | UI / Effects / Extensions / UI Image Crop ||| 00christian00| -|**[SoftAlphaMask](/Controls/SoftAlphaMask.md)** | Shader based mask able to clip images using an alpha mask | UI / Effects / Extensions / Soft Mask Script ||[Donate](https://www.assetstore.unity3d.com/en/#!/content/50339)| NemoKrad| -|**[Shader Effects Suite](/Controls/ShaderEffects.md)** | Collection of shader-based effects (Additive, Soft Additive, Multiply, Linear Dodge, Screen, Shine) | UI / Effects / Extensions / UI*Effect | UI / Effects / Extensions / UI*Effect and Shining Effect || 00christian00, ömer faruk sayılır| -|**[UIParticleSystem](/Controls/UIParticleSystem.md)** | Implementation of a particle system on a canvas | UI / Effects / Extensions / UI Particle System |5.3+ only|| Glennpow| -|**[CurlyUI](/Controls/CurlyUI.md)** | A UI Effect that will make your UI Curly | UI / Effects / Extensions / CUI*** ||| Titinious| - -## Deprecated for Unity 6 / V3 - -======================= - -The following components have been deprecated for Unity 6 (Version 3.0.0) and are no longer maintained. They remain documented for legacy reference only. - -### Why Deprecated? - -**Text Effects**: Unity deprecated the legacy Text component in favor of TextMeshPro. Text effects that relied on Text component vertex manipulation no longer function with TextMeshPro due to its different architecture. Users should utilize native TextMeshPro effects instead. - -**VR/Input Modules**: These components were removed as Unity's input system and VR frameworks have evolved significantly, making these implementations obsolete. - -**Other Components**: ImageExtended, Infinite Scroll Snap, Serialization, and UIButton were removed due to functionality being superseded by other components or Unity's built-in features. - -### Deprecated Components - -|Component|Reason|Alternative|Credits| -|-|-|-|-| -|**[CurvedText](/Controls/CurvedText.md)**|Text component deprecated by Unity|Use TextMeshPro native effects|Breyer| -|**[CylinderText](/Controls/CylinderText.md)**|Text component deprecated by Unity|Use TextMeshPro native effects|Breyer| -|**[LetterSpacing](/Controls/LetterSpacing.md)**|Text component deprecated by Unity|Use TextMeshPro character spacing|Deeperbeige| -|**[MonoSpacing](/Controls/MonoSpacing.md)**|Text component deprecated by Unity|Use TextMeshPro character spacing|Herbst| -|**[NicerOutline](/Controls/NicerOutline.md)**|Text component deprecated by Unity|Use TextMeshPro outline|Melang| -|**[VRInputModule](/Controls/VRInputModule.md)**|Obsolete VR input system|Use Unity's XR Interaction Toolkit|N/A| -|**[VRCursor](/Controls/VRCursor.md)**|Obsolete VR input system|Use Unity's XR Interaction Toolkit|N/A| -|**[AimerInputModule](/Controls/AimerInputModule.md)**|Obsolete input system|Use Unity's new Input System|N/A| -|**[GamePadInputModule](/Controls/GamePadInputModule.md)**|Obsolete input system|Use Unity's new Input System|N/A| -|**[ImageExtended](/Controls/ImageExtended.md)**|Functionality superseded|Use standard Unity Image component|Ges| -|**[Infinite Scroll Snap](/Controls/Infinite Scroll Snap.md)**|Replaced by improved implementation|Use HorizontalScrollSnap or VerticalScrollSnap with infinite scrolling enabled|N/A| -|**[Serialization](/Controls/Serialization.md)**|No longer needed|Use Unity's JsonUtility or other serialization solutions|N/A| -|**[UIButton](/Controls/UIButton.md)**|Duplicate functionality|Use Unity Button or CooldownButton|N/A| - -## Additional Components - -======================= - -|Component | Description | Component Command | Notes | Donate | Credits -|-|-|-|-|-|-| -|**[InputFieldEnterSubmit](/Controls/InputFieldEnterSubmit.md)** | Automatically submits InputField when Enter key is pressed | UI / Extensions / Input Field Submit ||| Vicente Russo| -|**[ReturnKeyTrigger](/Controls/ReturnKeyTrigger.md)** | Enables you to bind the return key within an InputField control to a button | UI / Extensions / ReturnKey Trigger ||| Melang| -|**[TabNavigation](/Controls/TabNavigation.md)** | An example Tab navigation script, updated to add manual navigation | UI / Extensions / Tab Navigation ||| Melang, omatase| -|**[uGUITools](/Controls/uGUITools.md)** | | Menu / uGUI ||| Senshi| -|**[ScrollRectTweener](/Controls/ScrollRectTweener.md)** | Tweening solution for ScrollRects, add smoothing automatically | UI / Extensions / ScrollRectTweener |[tutorial video](https://www.youtube.com/watch?v=1ZNIrdlV9QY)|| Martin Sharkbomb| -|**[ScrollRectLinker](/Controls/ScrollRectLinker.md)** | ScrollRect Linker script, enable multiple ScrollRects to move together | UI / Extensions / ScrollRectLinker |[tutorial video](https://www.youtube.com/watch?v=1ZNIrdlV9QY)|| Martin Sharkbomb| -|**[ScrollRectEx](/Controls/ScrollRectEx.md)** | Improved ScrollRect control, enables support for Nested ScrollRects | UI / Extensions / ScrollRectEx |[tutorial video](https://www.youtube.com/watch?v=1ZNIrdlV9QY)|| CaptainSchnittchen, GamesRUs| -|**[UIScrollToSelection](/Controls/UIScrollToSelection.md)** | Enables a ScrollRect to scroll based on the selected child automatically | UI / Extensions / UIScrollToSelection ||| zero3growlithe| -|**[UISelectableExtension](/Controls/UISelectableExtension.md)** | Refactor of original UIButton control, can now add Press/Release and Hold events to any Selectable control | UI / Extensions / UI Selectable Extension ||| AriathTheWise / Simon Jackson| -|**[switchToRectTransform](/Controls/switchToRectTransform.md)** | RectTransform extension method to move one Rect to another | N/A ||| Izitmee| -|**[ScrollConflictManager](/Controls/ScrollConflictManager.md)** | Resolves dragging issues with multiple nested scroll rects | UI / Extensions / Scrollrect Conflict Manager |[tutorial video](https://www.youtube.com/watch?v=1ZNIrdlV9QY)|| srinivas sunil| -|**[CLFZ2](/Controls/CLFZ2.md)** | LZF Compression library to compress data | N/A |Check the readme in the Utilities folder|| mrbroshkin, Agent_007| -|**[DragCorrector](/Controls/DragCorrector.md)** | Utility to manage the EventSystem drag threshold for high DPI systems | UI / Extensions / Drag Corrector ||| FireOApache| -|**[PPIViewer](/Controls/PPIViewer.md)** | Simple script to attach to a text component to display the current DPI/PPI | UI / Extensions / PPI Viewer ||| FireOApache| -|**[UI_TweenScale](/Controls/UI_TweenScale.md)** | Dynamic scalling of text or image (including button) based on curves | UI / Extensions / UI Tween Scale |[tutorial video](https://youtu.be/uVTV7Udx78k?t=1m33s)|| Tomasz Schelenz| -|**[UI_ScrollRectOcclusion](/Controls/UI_ScrollRectOcclusion.md)** | Disables the objects outside of the scrollrect viewport. Useful for scrolls with lots of content | UI / Extensions / UI ScrollRect Occlusion |[tutorial video](https://youtu.be/uVTV7Udx78k?t=39s)|| Tomasz Schelenz| -|**[UI_InfiniteScroll](/Controls/UI_InfiniteScroll.md)** | Configures automatically - works in both vertical and horizontal (but not both at the same time) - drag and drop - can be initialized by code | UI / Extensions / UI Infinite Scroll |[tutorial video](https://www.youtube.com/watch?v=uVTV7Udx78k)|| Tomasz Schelenz| -|**[UI_MagneticInfiniteScroll](/Controls/UI_MagneticInfiniteScroll.md)** | An extension of the InfiniteScroll control that adds a hot spot region to anchor child elements when scrolling finishes. | UI / Extensions / UI Magnetic Infinite Scroll ||| Febo Zodiaco| -|**[Non Drawing Graphic](/Controls/NonDrawingGraphic.md)** | Graphic control that does not draw or update, useful for hidden buttons when used with the Selectable Extension | UI / Extensions / NonDrawingGraphic||| Slipp Douglas Thompson| -|**[SelectableScalar](/Controls/SelectableScalar.md)** | A simple tween scaler to affect Rect Transform scale on other controls | UI / Extensions / Selectable Scalar |[Demo video](/Controls/Images/SelectableScalarDemo.mp4)|| Tomasz Schelenz| -|**[UILineConnector](/Controls/UILineConnector.md)** | A Line Renderer helper used to draw a chain between multiple gameObjects, like a node connector | UI / Extensions / UILineConnector ||| Alastair Aitchison| -|**[UIHighlightable](/Controls/UIHighlightable.md)** | A custom component to enable RectTransform highlighting without the Unity UI Selectable control. | UI / Extensions / UIHighlightable ||| SimonDarksideJ| -|**[Menu System](/Controls/MenuSystem.md)** | A customisable menu management system for the Unity UI. | UI / Extensions / Menu Manager |[Example Project](https://github.com/makeplayhappy/reactive-menu-system)|| Nezz (Adam Kapos)| -|**[Pagination Manager](/Controls/PaginationManager.md)** | A management script to attach to the Horizontal or Vertical Scroll snaps to enable automatic click navigation. | UI / Extensions / Pagination Manager ||| Brogan King (@BroganKing)| - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here -> -> ## [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/Controls/BestFitOutline.html b/_site_test/Controls/BestFitOutline.html deleted file mode 100644 index 8d6dfd5..0000000 --- a/_site_test/Controls/BestFitOutline.html +++ /dev/null @@ -1,245 +0,0 @@ - - - - - -Best Fit Outline — Unity UI Extensions - - - -Best Fit Outline | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Best Fit Outline

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

An improved outline effect

- - - -
-

Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead.

-
- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Provides a simple way to add an outline to your UI component, be it an image or Text component

- -
- -

Properties

- -

The properties of the Best Fit Outline component are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
StatusDeprecated and removed in Unity 6; no configurable properties remain
Recommended AlternativeUse TextMeshPro materials/shaders for outline effects in modern projects
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DeprecatedN/ARemoved in Unity 6; no public methods are available
- -
- -

Usage

- -

Add the effect to your object through the component menu using:

- -

“Add Component -> UI -> Effects -> Extensions -> Best Fit Outline”

- -
- -

Video Demo

- -

tbc

- -
- -

See also

- -

NicerOutline

- -
- -

Credits and Donation

- -

Melang

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/BestFitOutline.md b/_site_test/Controls/BestFitOutline.md deleted file mode 100644 index 7ae243e..0000000 --- a/_site_test/Controls/BestFitOutline.md +++ /dev/null @@ -1,87 +0,0 @@ -# Best Fit Outline - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -An improved outline effect - - - -> Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Provides a simple way to add an outline to your UI component, be it an image or Text component - ---------- - -## Properties - -The properties of the Best Fit Outline component are as follows: - -Property | Description --|- -*Status*|Deprecated and removed in Unity 6; no configurable properties remain -*Recommended Alternative*|Use TextMeshPro materials/shaders for outline effects in modern projects - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*Deprecated*|N/A|Removed in Unity 6; no public methods are available - ---------- - -## Usage - -Add the effect to your object through the component menu using: - -"*Add Component -> UI -> Effects -> Extensions -> Best Fit Outline*" - ---------- - -## Video Demo - -tbc - ---------- - -## See also - -[NicerOutline](/Controls/NicerOutline.md) - ---------- - -## Credits and Donation - -Melang - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/members/melang.593409/) diff --git a/_site_test/Controls/BoundToolTip.html b/_site_test/Controls/BoundToolTip.html deleted file mode 100644 index 452275f..0000000 --- a/_site_test/Controls/BoundToolTip.html +++ /dev/null @@ -1,303 +0,0 @@ - - - - - -BoundToolTip — Unity UI Extensions - - - -BoundToolTip | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

BoundToolTip

- -

An alternate Tooltip implementation with central listener

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A tooltip implementation which uses a manager to control the tooltip appearance, provides a different way to manage multiple tooltips in a scene

- -
- -

Properties

- -

Bound Tooltip Item Properties

- -

The properties of the Bound Tooltip Item control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Tooltip TextThe TextMeshPro text component that will display the tooltip content
Tool Tip OffsetVector3 offset from the trigger position where the tooltip will appear
- -

Bound Tooltip Trigger Properties

- -

The properties of the Bound Tooltip Trigger control are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
TextThe tooltip text to display when this trigger is activated
Use Mouse PositionWhen enabled, tooltip appears at mouse position instead of trigger position
OffsetVector3 offset from the trigger position (used when Use Mouse Position is false)
- -
- -

Methods

- -

Bound Tooltip Item Methods

- - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
ShowTooltiptext (string), pos (Vector3)Displays the tooltip with the specified text at the specified position plus offset
HideTooltipN/AHides the tooltip by deactivating the GameObject
- -

Additional properties available in code

- - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
IsActiveboolReturns whether the tooltip GameObject is currently active
InstanceBoundTooltipItemStatic singleton instance of the BoundTooltipItem in the scene
- -
- -

Usage

- -

Add the ToolTip control to your scene using:

- -

“GameObject -> UI -> Extensions -> Bound Tooltip -> Tooltip”

- -

If no tooltip item exists in the scene, one will be created automatically for you.

- -

An additional “Tool Tip Trigger” is also available to activate the tooltip, by adding the relevant component:

- -

“Add Component -> UI -> Extensions -> Bound Tooltip -> Tooltip Trigger”

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs”

- -
- -

See also

- -

ToolTip -HoverToolTip

- -
- -

Credits and Donation

- -

Martin Sharkbomb

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/BoundToolTip.md b/_site_test/Controls/BoundToolTip.md deleted file mode 100644 index cac2e72..0000000 --- a/_site_test/Controls/BoundToolTip.md +++ /dev/null @@ -1,111 +0,0 @@ -# BoundToolTip - -An alternate Tooltip implementation with central listener - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -A tooltip implementation which uses a manager to control the tooltip appearance, provides a different way to manage multiple tooltips in a scene - ---------- - -## Properties - -### Bound Tooltip Item Properties - -The properties of the Bound Tooltip Item control are as follows: - -Property | Description --|- -*Tooltip Text*|The TextMeshPro text component that will display the tooltip content -*Tool Tip Offset*|Vector3 offset from the trigger position where the tooltip will appear - -### Bound Tooltip Trigger Properties - -The properties of the Bound Tooltip Trigger control are as follows: - -Property | Description --|- -*Text*|The tooltip text to display when this trigger is activated -*Use Mouse Position*|When enabled, tooltip appears at mouse position instead of trigger position -*Offset*|Vector3 offset from the trigger position (used when Use Mouse Position is false) - ---------- - -## Methods - -### Bound Tooltip Item Methods - -Method | Arguments | Description --|-|- -*ShowTooltip*|text (string), pos (Vector3)|Displays the tooltip with the specified text at the specified position plus offset -*HideTooltip*|N/A|Hides the tooltip by deactivating the GameObject - -### Additional properties available in code - -Property | Return Type | Description -|-|-|-| -IsActive|bool|Returns whether the tooltip GameObject is currently active -Instance|BoundTooltipItem|Static singleton instance of the BoundTooltipItem in the scene - ---------- - -## Usage - -Add the ToolTip control to your scene using: - -"GameObject -> UI -> Extensions -> Bound Tooltip -> Tooltip" - -If no tooltip item exists in the scene, one will be created automatically for you. - -An additional "Tool Tip Trigger" is also available to activate the tooltip, by adding the relevant component: - -"Add Component -> UI -> Extensions -> Bound Tooltip -> Tooltip Trigger" - ---------- - -## Video Demo - -"Link to demo video or animated Gifs" - ---------- - -## See also - -[ToolTip](/Controls/ToolTip.md) -[HoverToolTip](/Controls/HoverToolTip.md) - ---------- - -## Credits and Donation - -Martin Sharkbomb - ---------- - -## External links - -[Sourced from](http://www.sharkbombs.com/2015/02/10/tooltips-with-the-new-unity-ui-ugui/) diff --git a/_site_test/Controls/CLFZ2.html b/_site_test/Controls/CLFZ2.html deleted file mode 100644 index 1eaf238..0000000 --- a/_site_test/Controls/CLFZ2.html +++ /dev/null @@ -1,232 +0,0 @@ - - - - - -CLFZ2 - LFZ Compression helper — Unity UI Extensions - - - -CLFZ2 - LFZ Compression helper | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

CLFZ2 - LFZ Compression helper

- -

LZF Compression library to compress data

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The LZF Compression component is a useful extension to Unity to be able to compress data for sending over a network or for more efficient saving.

- -

The library is complete and has even been patched a few times already through the forum thread, so I took the most stable version without issues. (issus were reported on other versions, so I didn’t take them)

- -

There are some Unit Tests included in the following file:

-
-

Assets\unity-ui-extensions\Scripts\Editor\CompressionTests.cs

-
- -

These details some sample use cases and also provide a good way to test that the compression/decompression works as expected. -To run these Unit Tests In Unity 5.3, open the following editor window from the menu to see the tests and run them.

-
-

Window\Editor Tests Runner

-
- -

(For earlier versions of Unity, you will need to install the “Unity Test Tools” asset from the store and follow the instructions from there.)

- -
- -

Properties

- -

This is a static helper library and exposes no inspector properties.

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply create a byte array in code for the data you want compressed and pas it to the Compress function of the Library, as follows:

- -
      byte[] byteText = Encoding.Unicode.GetBytes(x);
-      var compressed = CLZF2.Compress(byteText);
-
- -

To decompress, follow the same process using the Decompress function and then unencode your data as follows:

- -
      var decompressed = CLZF2.Decompress(compressed);
-      var outString = Encoding.Unicode.GetString(decompressed);
-
- -

For more examples, see the Unit Tests included in the following file:

-
-

Assets\unity-ui-extensions\Scripts\Editor\CompressionTests.cs

-
- -
- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Roman Atachiants kelindar@gmail.com -Oren J. Maurice oymaurice@hazorea.org.il -Marc Alexander Lehmann schmorp@schmorp.de

- -
- - - -

Sourced From

- -
- - - - - diff --git a/_site_test/Controls/CLFZ2.md b/_site_test/Controls/CLFZ2.md deleted file mode 100644 index 8735e1e..0000000 --- a/_site_test/Controls/CLFZ2.md +++ /dev/null @@ -1,101 +0,0 @@ -# CLFZ2 - LFZ Compression helper - -LZF Compression library to compress data - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The LZF Compression component is a useful extension to Unity to be able to compress data for sending over a network or for more efficient saving. - -The library is complete and has even been patched a few times already through the forum thread, so I took the most stable version without issues. (issus were reported on other versions, so I didn't take them) - -There are some Unit Tests included in the following file: ->Assets\unity-ui-extensions\Scripts\Editor\CompressionTests.cs - -These details some sample use cases and also provide a good way to test that the compression/decompression works as expected. -To run these Unit Tests In Unity 5.3, open the following editor window from the menu to see the tests and run them. ->Window\Editor Tests Runner - -(For earlier versions of Unity, you will need to install the "Unity Test Tools" asset from the store and follow the instructions from there.) - ---------- - -## Properties - -This is a static helper library and exposes no inspector properties. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Simply create a byte array in code for the data you want compressed and pas it to the Compress function of the Library, as follows: - -```csharp - byte[] byteText = Encoding.Unicode.GetBytes(x); - var compressed = CLZF2.Compress(byteText); -``` - -To decompress, follow the same process using the Decompress function and then unencode your data as follows: - -```csharp - var decompressed = CLZF2.Decompress(compressed); - var outString = Encoding.Unicode.GetString(decompressed); -``` - -For more examples, see the Unit Tests included in the following file: ->Assets\unity-ui-extensions\Scripts\Editor\CompressionTests.cs - ---------- - -## Video Demo - -N/A - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -Roman Atachiants -Oren J. Maurice -Marc Alexander Lehmann - ---------- - -## External links - -[Sourced From](http://forum.unity3d.com/threads/lzf-compression-and-decompression-for-unity.152579/) diff --git a/_site_test/Controls/CurvedLayout.html b/_site_test/Controls/CurvedLayout.html deleted file mode 100644 index 5e63a16..0000000 --- a/_site_test/Controls/CurvedLayout.html +++ /dev/null @@ -1,241 +0,0 @@ - - - - - -CurvedLayout — Unity UI Extensions - - - -CurvedLayout | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

CurvedLayout

- -

A curved layout system

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Similar to the Horizontal and Vertical Layout components provided by Unity, this offers more control both vertically and horizontally with the ability to curve or bend the layout.

- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Curve AlignmentBased on which anchor should the curve apply.
Curve OffsetVector 3 offset to apply to the curve.
Item AxisThe axis along which to place the items, Normalized before use.
Item SizeThe size of each item along the Normalized axis.
Center PointThe slope can be moved by altering this setting, it could be constrained to the 0-1 range, but other values are useful for animations.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows:

- -

“Add Component -> Layout -> Extensions -> Curved Layout”

- -
-

Make sure to configure the Item Size, Offset and Axis to apply a curve, else child items will just collate.

-
- -
- -

Video Demo

- -

tbc

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Freezy

- -
- - - -

Sourced From

- -
- - - - - diff --git a/_site_test/Controls/CurvedLayout.md b/_site_test/Controls/CurvedLayout.md deleted file mode 100644 index 29a0bcd..0000000 --- a/_site_test/Controls/CurvedLayout.md +++ /dev/null @@ -1,87 +0,0 @@ -# CurvedLayout - -A curved layout system - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Similar to the Horizontal and Vertical Layout components provided by Unity, this offers more control both vertically and horizontally with the ability to curve or bend the layout. - ---------- - -## Properties - -The properties of the Box Slider control are as follows: - -Property | Description --|- -*Curve Alignment*|Based on which anchor should the curve apply. -*Curve Offset*|Vector 3 offset to apply to the curve. -*Item Axis*|The axis along which to place the items, Normalized before use. -*Item Size*|The size of each item along the Normalized axis. -*Center Point*|The slope can be moved by altering this setting, it could be constrained to the 0-1 range, but other values are useful for animations. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows: - -"*Add Component -> Layout -> Extensions -> Curved Layout*" - -> Make sure to configure the Item Size, Offset and Axis to apply a curve, else child items will just collate. - ---------- - -## Video Demo - -tbc - ---------- - -## See also - -* [Radial Layout Group](/Controls/RadialLayout.md) -* [Table Layout Group](/Controls/TableLayoutGroup.md) -* [Flow Layout Group](/Controls/FlowLayoutGroup.md) - ---------- - -## Credits and Donation - -Freezy - ---------- - -## External links - -[Sourced From](http://forum.unity3d.com/threads/curved-layout.403985/) diff --git a/_site_test/Controls/CurvedText.html b/_site_test/Controls/CurvedText.html deleted file mode 100644 index 5709633..0000000 --- a/_site_test/Controls/CurvedText.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - -Curved Text — Unity UI Extensions - - - -Curved Text | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Curved Text

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

A Text vertex manipulator for those users NOT using TextMeshPro (why ever not?)

- - - -
-

Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead.

-
- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Manipulation effect for text to give it a curved or rounded layout.

- -
- -

Properties

- -

The properties of the Curved Text component are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
StatusDeprecated and removed in Unity 6; no configurable properties remain
Recommended AlternativeUse TextMeshPro and shader/material-based curvature effects for curved text
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DeprecatedN/ARemoved in Unity 6; no public methods are available
- -
- -

Usage

- -

Simply add this to a Text component through the Add Component menu as follows: -Add Component -> UI -> Effects -> Extensions -> Curved Text

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs”

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Breyer

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/CurvedText.md b/_site_test/Controls/CurvedText.md deleted file mode 100644 index dede4ae..0000000 --- a/_site_test/Controls/CurvedText.md +++ /dev/null @@ -1,87 +0,0 @@ -# Curved Text - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -A Text vertex manipulator for those users NOT using TextMeshPro (why ever not?) - - - -> Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Manipulation effect for text to give it a curved or rounded layout. - ---------- - -## Properties - -The properties of the Curved Text component are as follows: - -Property | Description --|- -*Status*|Deprecated and removed in Unity 6; no configurable properties remain -*Recommended Alternative*|Use TextMeshPro and shader/material-based curvature effects for curved text - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*Deprecated*|N/A|Removed in Unity 6; no public methods are available - ---------- - -## Usage - -Simply add this to a Text component through the Add Component menu as follows: -Add Component -> UI -> Effects -> Extensions -> Curved Text - ---------- - -## Video Demo - -"Link to demo video or animated Gifs" - ---------- - -## See also - -- [CylinderText](/Controls/CylinderText.md) -- [LetterSpacing](/Controls/LetterSpacing.md) - ---------- - -## Credits and Donation - -Breyer - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/#post-1777407) diff --git a/_site_test/Controls/CylinderText.html b/_site_test/Controls/CylinderText.html deleted file mode 100644 index 91e603b..0000000 --- a/_site_test/Controls/CylinderText.html +++ /dev/null @@ -1,244 +0,0 @@ - - - - - -Cylinder Text — Unity UI Extensions - - - -Cylinder Text | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Cylinder Text

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

An alternate curved text effect

- - - -
-

Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead.

-
- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Manipulation effect for text to give it a Cylindrical or looped layout.

- -
- -

Properties

- -

The properties of the Cylinder Text component are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
StatusDeprecated and removed in Unity 6; no configurable properties remain
Recommended AlternativeUse TextMeshPro and shader/material-based curvature effects for curved text
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DeprecatedN/ARemoved in Unity 6; no public methods are available
- -
- -

Usage

- -

Simply add this to a Text component through the Add Component menu as follows: -Add Component -> UI -> Effects -> Extensions -> Cylinder Text

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs”

- -
- -

See also

- -

CurvedText

- -
- -

Credits and Donation

- -

Breyer

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/CylinderText.md b/_site_test/Controls/CylinderText.md deleted file mode 100644 index fc452e5..0000000 --- a/_site_test/Controls/CylinderText.md +++ /dev/null @@ -1,86 +0,0 @@ -# Cylinder Text - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -An alternate curved text effect - - - -> Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Manipulation effect for text to give it a Cylindrical or looped layout. - ---------- - -## Properties - -The properties of the Cylinder Text component are as follows: - -Property | Description --|- -*Status*|Deprecated and removed in Unity 6; no configurable properties remain -*Recommended Alternative*|Use TextMeshPro and shader/material-based curvature effects for curved text - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*Deprecated*|N/A|Removed in Unity 6; no public methods are available - ---------- - -## Usage - -Simply add this to a Text component through the Add Component menu as follows: -Add Component -> UI -> Effects -> Extensions -> Cylinder Text - ---------- - -## Video Demo - -"Link to demo video or animated Gifs" - ---------- - -## See also - -[CurvedText](/Controls/CurvedText.md) - ---------- - -## Credits and Donation - -Breyer - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/#post-1777407) diff --git a/_site_test/Controls/DragCorrector.html b/_site_test/Controls/DragCorrector.html deleted file mode 100644 index 80f6776..0000000 --- a/_site_test/Controls/DragCorrector.html +++ /dev/null @@ -1,223 +0,0 @@ - - - - - -DragCorrector — Unity UI Extensions - - - -DragCorrector | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

DragCorrector

- -

Utility to manage the EventSystem drag threshold for high DPI systems

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Utility to manage the EventSystem drag threshold for high DPI systems

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Reference DPIBaseline DPI used to scale the drag threshold.
Use Device DPIIf enabled, scales threshold using the current device DPI; otherwise uses Reference DPI.
MultiplierAdditional scaling factor applied to the computed drag threshold.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

To enable the Drag Corrector, simply add the component to the EventSystem using:

- -

“Add Component -> UI -> Extensions -> DragCorrector”

- -
- -

Video Demo

- -

tbc

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

FireOApache

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/DragCorrector.md b/_site_test/Controls/DragCorrector.md deleted file mode 100644 index 25d7a5a..0000000 --- a/_site_test/Controls/DragCorrector.md +++ /dev/null @@ -1,79 +0,0 @@ -# DragCorrector - -Utility to manage the EventSystem drag threshold for high DPI systems - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Utility to manage the EventSystem drag threshold for high DPI systems - ---------- - -## Properties - -Property | Description --|- -*Reference DPI*|Baseline DPI used to scale the drag threshold. -*Use Device DPI*|If enabled, scales threshold using the current device DPI; otherwise uses Reference DPI. -*Multiplier*|Additional scaling factor applied to the computed drag threshold. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -To enable the Drag Corrector, simply add the component to the EventSystem using: - -"Add Component -> UI -> Extensions -> DragCorrector" - ---------- - -## Video Demo - -tbc - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -FireOApache - ---------- - -## External links - -[Sourced from](http://answers.unity3d.com/questions/1149417/ui-button-onclick-sensitivity-for-high-dpi-devices.html#answer-1197307) diff --git a/_site_test/Controls/ExtensionsToggle.html b/_site_test/Controls/ExtensionsToggle.html deleted file mode 100644 index 5be549c..0000000 --- a/_site_test/Controls/ExtensionsToggle.html +++ /dev/null @@ -1,399 +0,0 @@ - - - - - -Extensions Toggle — Unity UI Extensions - - - -Extensions Toggle | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Extensions Toggle

- -

An enhanced Toggle component with additional features including multiple event types and toggle group support.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Extensions Toggle is an enhanced version of Unity’s standard Toggle component. It extends the functionality with:

- -
    -
  • Unique Identification: Each toggle can have a unique ID string for easy reference
    • -
  • Dual Event System: Both OnValueChanged (bool) and OnToggleChanged (toggle reference) events
    • -
  • Enhanced Toggle Group: Integrates seamlessly with the ExtensionsToggleGroup for managed toggle groups
    • -
  • Flexible Transitions: Supports Color Tint, Sprite Swap, and Animation transitions
    • -
  • State Management: Robust handling of on/off states with proper callback triggering
    • -
- -

This component is ideal when you need more control over toggle behavior or require toggle group features beyond Unity’s standard Toggle.

- -
- -

Properties

- -

The properties of the Extensions Toggle control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Unique IDA string identifier for this toggle, useful for identifying which toggle was toggled in callbacks.
InteractableWhether this toggle can be interacted with by the user.
Toggle TransitionHow the toggle transitions between states: None or Fade.
GraphicThe graphic element to transition (typically a checkmark or indicator).
GroupThe ExtensionsToggleGroup this toggle belongs to. Only one toggle in a group can be on at a time (if group allows).
Is OnWhether the toggle is currently in the on state.
Toggle TransitionThe type of transition when toggling: None or Fade.
Fade DurationHow long the fade transition takes when Is On changes.
On Value Changed (event)Invoked when the toggle state changes, passes the new bool value.
On Toggle Changed (event)Invoked when the toggle state changes, passes a reference to the toggle itself.
- -

Additional properties available in code

- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
IsOnboolGet or set whether the toggle is currently on.
UniqueIDstringGet or set the unique identifier string.
GroupExtensionsToggleGroupGet or set the toggle group this toggle belongs to.
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
Setvalue (bool)Set the toggle state without triggering callbacks.
Setvalue (bool), sendCallback (bool)Set the toggle state with optional callback triggering.
OnPointerClickPointerEventDataHandles left mouse click to toggle.
OnSubmitBaseEventDataHandles submission (Enter/Space key or gamepad button) to toggle.
- -
- -

Usage

- -

Add the Extensions Toggle component to a GameObject:

- -

“Add Component -> UI -> Extensions -> Extensions Toggle”

- -

Basic Toggle Setup

- -
public ExtensionsToggle toggle;
-
-void Start()
-{
-    // Listen to toggle state changes
-    toggle.onValueChanged.AddListener(OnToggleChanged);
-}
-
-void OnToggleChanged(bool isOn)
-{
-    Debug.Log("Toggle is " + (isOn ? "ON" : "OFF"));
-}
-
- -

Using the Toggle with Unique ID

- -
public ExtensionsToggle toggle;
-
-void Start()
-{
-    toggle.UniqueID = "sound_toggle";
-    toggle.onToggleChanged.AddListener(OnToggleChanged);
-}
-
-void OnToggleChanged(ExtensionsToggle toggleThatChanged)
-{
-    if (toggleThatChanged.UniqueID == "sound_toggle")
-    {
-        AudioListener.pause = !toggleThatChanged.IsOn;
-    }
-}
-
- -

Using Toggle Groups

- -
public ExtensionsToggle option1, option2, option3;
-public ExtensionsToggleGroup optionGroup;
-
-void Start()
-{
-    // Assign toggles to the group
-    option1.Group = optionGroup;
-    option2.Group = optionGroup;
-    option3.Group = optionGroup;
-    
-    // Only one toggle can be on at a time
-    optionGroup.onToggleGroupChanged.AddListener(OnOptionSelected);
-}
-
-void OnOptionSelected(bool anyToggleOn)
-{
-    if (anyToggleOn)
-    {
-        var selected = optionGroup.SelectedToggle;
-        Debug.Log("Selected option: " + selected.UniqueID);
-    }
-}
-
- -

Programmatic Toggle Control

- -
public ExtensionsToggle toggle;
-
-void Update()
-{
-    if (Input.GetKeyDown(KeyCode.Space))
-    {
-        // Toggle the state
-        toggle.IsOn = !toggle.IsOn;
-    }
-}
-
- -
- -

Video Demo

- -

Coming soon…

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Unity UI Extensions Contributors

- -
- - - -

Unity Toggle Documentation

- -
- - - - - diff --git a/_site_test/Controls/ExtensionsToggle.md b/_site_test/Controls/ExtensionsToggle.md deleted file mode 100644 index 79e250b..0000000 --- a/_site_test/Controls/ExtensionsToggle.md +++ /dev/null @@ -1,188 +0,0 @@ -# Extensions Toggle - -An enhanced Toggle component with additional features including multiple event types and toggle group support. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The Extensions Toggle is an enhanced version of Unity's standard Toggle component. It extends the functionality with: - -- **Unique Identification**: Each toggle can have a unique ID string for easy reference -- **Dual Event System**: Both `OnValueChanged` (bool) and `OnToggleChanged` (toggle reference) events -- **Enhanced Toggle Group**: Integrates seamlessly with the ExtensionsToggleGroup for managed toggle groups -- **Flexible Transitions**: Supports Color Tint, Sprite Swap, and Animation transitions -- **State Management**: Robust handling of on/off states with proper callback triggering - -This component is ideal when you need more control over toggle behavior or require toggle group features beyond Unity's standard Toggle. - ---------- - -## Properties - -The properties of the Extensions Toggle control are as follows: - -Property | Description --|- -*Unique ID*|A string identifier for this toggle, useful for identifying which toggle was toggled in callbacks. -*Interactable*|Whether this toggle can be interacted with by the user. -*Toggle Transition*|How the toggle transitions between states: None or Fade. -*Graphic*|The graphic element to transition (typically a checkmark or indicator). -*Group*|The ExtensionsToggleGroup this toggle belongs to. Only one toggle in a group can be on at a time (if group allows). -*Is On*|Whether the toggle is currently in the on state. -*Toggle Transition*|The type of transition when toggling: None or Fade. -*Fade Duration*|How long the fade transition takes when Is On changes. -***On Value Changed*** (event)|Invoked when the toggle state changes, passes the new bool value. -***On Toggle Changed*** (event)|Invoked when the toggle state changes, passes a reference to the toggle itself. - -### Additional properties available in code - -Property | Return Type | Description --|-|- -IsOn|bool|Get or set whether the toggle is currently on. -UniqueID|string|Get or set the unique identifier string. -Group|ExtensionsToggleGroup|Get or set the toggle group this toggle belongs to. - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*Set*|value (bool)|Set the toggle state without triggering callbacks. -*Set*|value (bool), sendCallback (bool)|Set the toggle state with optional callback triggering. -*OnPointerClick*|PointerEventData|Handles left mouse click to toggle. -*OnSubmit*|BaseEventData|Handles submission (Enter/Space key or gamepad button) to toggle. - ---------- - -## Usage - -Add the Extensions Toggle component to a GameObject: - -"Add Component -> UI -> Extensions -> Extensions Toggle" - -### Basic Toggle Setup - -```csharp -public ExtensionsToggle toggle; - -void Start() -{ - // Listen to toggle state changes - toggle.onValueChanged.AddListener(OnToggleChanged); -} - -void OnToggleChanged(bool isOn) -{ - Debug.Log("Toggle is " + (isOn ? "ON" : "OFF")); -} -``` - -### Using the Toggle with Unique ID - -```csharp -public ExtensionsToggle toggle; - -void Start() -{ - toggle.UniqueID = "sound_toggle"; - toggle.onToggleChanged.AddListener(OnToggleChanged); -} - -void OnToggleChanged(ExtensionsToggle toggleThatChanged) -{ - if (toggleThatChanged.UniqueID == "sound_toggle") - { - AudioListener.pause = !toggleThatChanged.IsOn; - } -} -``` - -### Using Toggle Groups - -```csharp -public ExtensionsToggle option1, option2, option3; -public ExtensionsToggleGroup optionGroup; - -void Start() -{ - // Assign toggles to the group - option1.Group = optionGroup; - option2.Group = optionGroup; - option3.Group = optionGroup; - - // Only one toggle can be on at a time - optionGroup.onToggleGroupChanged.AddListener(OnOptionSelected); -} - -void OnOptionSelected(bool anyToggleOn) -{ - if (anyToggleOn) - { - var selected = optionGroup.SelectedToggle; - Debug.Log("Selected option: " + selected.UniqueID); - } -} -``` - -### Programmatic Toggle Control - -```csharp -public ExtensionsToggle toggle; - -void Update() -{ - if (Input.GetKeyDown(KeyCode.Space)) - { - // Toggle the state - toggle.IsOn = !toggle.IsOn; - } -} -``` - ---------- - -## Video Demo - -Coming soon... - ---------- - -## See also - -* [ExtensionsToggleGroup](/Controls/ExtensionsToggleGroup.md) -* [UIButton](/Controls/UIButton.md) -* [Selector](/Controls/Selector.md) - ---------- - -## Credits and Donation - -Unity UI Extensions Contributors - ---------- - -## External links - -[Unity Toggle Documentation](https://docs.unity3d.com/Manual/script-Toggle.html) diff --git a/_site_test/Controls/ExtensionsToggleGroup.html b/_site_test/Controls/ExtensionsToggleGroup.html deleted file mode 100644 index 9d42735..0000000 --- a/_site_test/Controls/ExtensionsToggleGroup.html +++ /dev/null @@ -1,392 +0,0 @@ - - - - - -Extensions Toggle Group — Unity UI Extensions - - - -Extensions Toggle Group | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Extensions Toggle Group

- -

An enhanced ToggleGroup component that manages a group of ExtensionsToggle components, ensuring only one toggle is active at a time.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Extensions Toggle Group is an enhanced version of Unity’s standard ToggleGroup that manages ExtensionsToggle components. It ensures that only one toggle in the group can be on at a time (unless AllowSwitchOff is enabled) and provides events for monitoring group state changes.

- -

Key features include:

- -
    -
  • Enforced Single Selection: Only one toggle can be selected at a time
    • -
  • Optional Multi-Off Mode: When enabled, all toggles can be off
    • -
  • Dual Event System: Separate events for group state changes and individual toggle changes
    • -
  • Active Toggles Enumeration: Access all currently active toggles in the group
    • -
  • Programmatic Control: Methods to query and control toggle states
    • -
- -
- -

Properties

- -

The properties of the Extensions Toggle Group control are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Allow Switch OffWhen true, allows all toggles in the group to be off. When false, at least one toggle must be on.
On Toggle Group Changed (event)Invoked when any toggle in the group changes state, passes whether any toggles are on.
On Toggle Group Toggle Changed (event)Invoked when a toggle in the group changes, passes the new boolean state.
- -

Additional properties available in code

- - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
AllowSwitchOffboolGet or set whether all toggles can be off.
SelectedToggleExtensionsToggleGet the currently selected toggle, or null if none selected.
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
NotifyToggleOntoggle (ExtensionsToggle)Internally called when a toggle becomes on. Turns off all other toggles in the group.
RegisterToggletoggle (ExtensionsToggle)Register an ExtensionsToggle to be managed by this group.
UnregisterToggletoggle (ExtensionsToggle)Unregister an ExtensionsToggle from this group.
AnyTogglesOnN/AReturns true if at least one toggle in the group is on.
ActiveTogglesN/AReturns an enumerable collection of all toggles that are currently on.
SetAllTogglesOffN/ATurns off all toggles in the group.
- -
- -

Usage

- -

Add the Extensions Toggle Group component to a GameObject, typically the parent of the toggles:

- -

“Add Component -> UI -> Extensions -> Extensions Toggle Group”

- -

Basic Group Setup

- -
public ExtensionsToggleGroup toggleGroup;
-public ExtensionsToggle[] toggles;
-
-void Start()
-{
-    // The toggles should have their Group property set to this group
-    // This can be done in the inspector or programmatically:
-    foreach (var toggle in toggles)
-    {
-        toggle.Group = toggleGroup;
-    }
-    
-    // Listen to group changes
-    toggleGroup.onToggleGroupChanged.AddListener(OnGroupChanged);
-}
-
-void OnGroupChanged(bool anyToggleOn)
-{
-    Debug.Log("Any toggle on: " + anyToggleOn);
-}
-
- -

Accessing the Selected Toggle

- -
public ExtensionsToggleGroup toggleGroup;
-
-void Update()
-{
-    if (Input.GetKeyDown(KeyCode.E))
-    {
-        var selected = toggleGroup.SelectedToggle;
-        if (selected != null)
-        {
-            Debug.Log("Currently selected: " + selected.UniqueID);
-        }
-    }
-}
-
- -

Allowing Multiple Off State

- -
public ExtensionsToggleGroup toggleGroup;
-
-void Start()
-{
-    // Allow all toggles to be off
-    toggleGroup.AllowSwitchOff = true;
-    
-    // Now users can click the selected toggle again to deselect it
-}
-
- -

Querying Active Toggles

- -
public ExtensionsToggleGroup toggleGroup;
-
-void CheckActiveToggles()
-{
-    var activeToggles = toggleGroup.ActiveToggles();
-    foreach (var toggle in activeToggles)
-    {
-        Debug.Log("Active toggle: " + toggle.UniqueID);
-    }
-}
-
- -

Controlling Toggles Programmatically

- -
public ExtensionsToggleGroup toggleGroup;
-public ExtensionsToggle[] optionToggles;
-
-void SelectOption(int index)
-{
-    if (index >= 0 && index < optionToggles.Length)
-    {
-        optionToggles[index].IsOn = true;
-        // Other toggles in the group will automatically turn off
-    }
-}
-
-void DeselectAll()
-{
-    if (toggleGroup.AllowSwitchOff)
-    {
-        toggleGroup.SetAllTogglesOff();
-    }
-}
-
- -
- -

Video Demo

- -

Coming soon…

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Unity UI Extensions Contributors

- -
- - - -

Unity ToggleGroup Documentation

- -
- - - - - diff --git a/_site_test/Controls/ExtensionsToggleGroup.md b/_site_test/Controls/ExtensionsToggleGroup.md deleted file mode 100644 index dbbc3d9..0000000 --- a/_site_test/Controls/ExtensionsToggleGroup.md +++ /dev/null @@ -1,199 +0,0 @@ -# Extensions Toggle Group - -An enhanced ToggleGroup component that manages a group of ExtensionsToggle components, ensuring only one toggle is active at a time. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The Extensions Toggle Group is an enhanced version of Unity's standard ToggleGroup that manages ExtensionsToggle components. It ensures that only one toggle in the group can be on at a time (unless `AllowSwitchOff` is enabled) and provides events for monitoring group state changes. - -Key features include: - -- **Enforced Single Selection**: Only one toggle can be selected at a time -- **Optional Multi-Off Mode**: When enabled, all toggles can be off -- **Dual Event System**: Separate events for group state changes and individual toggle changes -- **Active Toggles Enumeration**: Access all currently active toggles in the group -- **Programmatic Control**: Methods to query and control toggle states - ---------- - -## Properties - -The properties of the Extensions Toggle Group control are as follows: - -Property | Description --|- -*Allow Switch Off*|When true, allows all toggles in the group to be off. When false, at least one toggle must be on. -***On Toggle Group Changed*** (event)|Invoked when any toggle in the group changes state, passes whether any toggles are on. -***On Toggle Group Toggle Changed*** (event)|Invoked when a toggle in the group changes, passes the new boolean state. - -### Additional properties available in code - -Property | Return Type | Description --|-|- -AllowSwitchOff|bool|Get or set whether all toggles can be off. -SelectedToggle|ExtensionsToggle|Get the currently selected toggle, or null if none selected. - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*NotifyToggleOn*|toggle (ExtensionsToggle)|Internally called when a toggle becomes on. Turns off all other toggles in the group. -*RegisterToggle*|toggle (ExtensionsToggle)|Register an ExtensionsToggle to be managed by this group. -*UnregisterToggle*|toggle (ExtensionsToggle)|Unregister an ExtensionsToggle from this group. -*AnyTogglesOn*|N/A|Returns true if at least one toggle in the group is on. -*ActiveToggles*|N/A|Returns an enumerable collection of all toggles that are currently on. -*SetAllTogglesOff*|N/A|Turns off all toggles in the group. - ---------- - -## Usage - -Add the Extensions Toggle Group component to a GameObject, typically the parent of the toggles: - -"Add Component -> UI -> Extensions -> Extensions Toggle Group" - -### Basic Group Setup - -```csharp -public ExtensionsToggleGroup toggleGroup; -public ExtensionsToggle[] toggles; - -void Start() -{ - // The toggles should have their Group property set to this group - // This can be done in the inspector or programmatically: - foreach (var toggle in toggles) - { - toggle.Group = toggleGroup; - } - - // Listen to group changes - toggleGroup.onToggleGroupChanged.AddListener(OnGroupChanged); -} - -void OnGroupChanged(bool anyToggleOn) -{ - Debug.Log("Any toggle on: " + anyToggleOn); -} -``` - -### Accessing the Selected Toggle - -```csharp -public ExtensionsToggleGroup toggleGroup; - -void Update() -{ - if (Input.GetKeyDown(KeyCode.E)) - { - var selected = toggleGroup.SelectedToggle; - if (selected != null) - { - Debug.Log("Currently selected: " + selected.UniqueID); - } - } -} -``` - -### Allowing Multiple Off State - -```csharp -public ExtensionsToggleGroup toggleGroup; - -void Start() -{ - // Allow all toggles to be off - toggleGroup.AllowSwitchOff = true; - - // Now users can click the selected toggle again to deselect it -} -``` - -### Querying Active Toggles - -```csharp -public ExtensionsToggleGroup toggleGroup; - -void CheckActiveToggles() -{ - var activeToggles = toggleGroup.ActiveToggles(); - foreach (var toggle in activeToggles) - { - Debug.Log("Active toggle: " + toggle.UniqueID); - } -} -``` - -### Controlling Toggles Programmatically - -```csharp -public ExtensionsToggleGroup toggleGroup; -public ExtensionsToggle[] optionToggles; - -void SelectOption(int index) -{ - if (index >= 0 && index < optionToggles.Length) - { - optionToggles[index].IsOn = true; - // Other toggles in the group will automatically turn off - } -} - -void DeselectAll() -{ - if (toggleGroup.AllowSwitchOff) - { - toggleGroup.SetAllTogglesOff(); - } -} -``` - ---------- - -## Video Demo - -Coming soon... - ---------- - -## See also - -* [ExtensionsToggle](/Controls/ExtensionsToggle.md) -* [UIButton](/Controls/UIButton.md) -* [SegmentedControl](/Controls/SegmentedControl.md) - ---------- - -## Credits and Donation - -Unity UI Extensions Contributors - ---------- - -## External links - -[Unity ToggleGroup Documentation](https://docs.unity3d.com/Manual/script-ToggleGroup.html) diff --git a/_site_test/Controls/GamePadInputModule.html b/_site_test/Controls/GamePadInputModule.html deleted file mode 100644 index bfaf5f0..0000000 --- a/_site_test/Controls/GamePadInputModule.html +++ /dev/null @@ -1,251 +0,0 @@ - - - - - -GamePad Input Module — Unity UI Extensions - - - -GamePad Input Module | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

GamePad Input Module

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

Stripped down SIM Input module for just gamepad/keyboard input

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Focused input module for just gamepads as opposed to the standard Standalone Input Module

- -

*NOTE, not compatible with the StandaloneInputModule, so please remove / disable this before adding this component

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Actions Per SecondRepeat rate for move/submit actions while a button is held.
Repeat DelayDelay before repeating move/submit actions.
Horizontal AxisAxis name for horizontal navigation.
Vertical AxisAxis name for vertical navigation.
Submit ButtonInput name used to trigger Submit.
Cancel ButtonInput name used to trigger Cancel.
On Submit (event)Invoked when a submit action is processed.
On Cancel (event)Invoked when a cancel action is processed.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

To enable the Gamepad Input Module, simply add the component to the EventSystem using: -Add Component -> UI -> Extensions -> GamePadInputModule

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs”

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

SimonDarksideJ

- -
- - - -

N/A

- -
- -
- - - - - diff --git a/_site_test/Controls/GamePadInputModule.md b/_site_test/Controls/GamePadInputModule.md deleted file mode 100644 index 092bfed..0000000 --- a/_site_test/Controls/GamePadInputModule.md +++ /dev/null @@ -1,90 +0,0 @@ -# GamePad Input Module - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -Stripped down SIM Input module for just gamepad/keyboard input - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Focused input module for just gamepads as opposed to the standard Standalone Input Module - -*NOTE, not compatible with the StandaloneInputModule, so please remove / disable this before adding this component - ---------- - -## Properties - -Property | Description --|- -*Actions Per Second*|Repeat rate for move/submit actions while a button is held. -*Repeat Delay*|Delay before repeating move/submit actions. -*Horizontal Axis*|Axis name for horizontal navigation. -*Vertical Axis*|Axis name for vertical navigation. -*Submit Button*|Input name used to trigger Submit. -*Cancel Button*|Input name used to trigger Cancel. -***On Submit*** (event)|Invoked when a submit action is processed. -***On Cancel*** (event)|Invoked when a cancel action is processed. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -To enable the Gamepad Input Module, simply add the component to the EventSystem using: -Add Component -> UI -> Extensions -> GamePadInputModule - ---------- - -## Video Demo - -"Link to demo video or animated Gifs" - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -SimonDarksideJ - ---------- - -## External links - -N/A - ---------- diff --git a/_site_test/Controls/HoverToolTip.html b/_site_test/Controls/HoverToolTip.html deleted file mode 100644 index fe40270..0000000 --- a/_site_test/Controls/HoverToolTip.html +++ /dev/null @@ -1,241 +0,0 @@ - - - - - -HoverToolTip — Unity UI Extensions - - - -HoverToolTip | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

HoverToolTip

- -

A basic Tooltip implementation

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A tooltip implementation which allows the user to hover over a RectTransform to activate it.

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Tooltip PositionRectTransform used to position the tooltip; defaults to the hovered rect.
Hover TimeDelay (seconds) before showing the tooltip.
Stay HoveredKeep showing the tooltip while the pointer remains over the target.
Hide TimeDelay (seconds) before hiding after pointer exit.
On Show (event)Invoked when the tooltip is shown.
On Hide (event)Invoked when the tooltip is hidden.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add the HoverToolTip control to your scene using:

- -

“Add Component -> UI -> Extensions -> HoverTooltip”

- -

Or alternatively, add it via the GameObject menu:

- -

“GameObject -> UI -> Extensions -> HoverToolTip”

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs”

- -
- -

See also

- -

ToolTip -BoundToolTip

- -
- -

Credits and Donation

- -

Needs Verifying -drHogan

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/HoverToolTip.md b/_site_test/Controls/HoverToolTip.md deleted file mode 100644 index a0ca747..0000000 --- a/_site_test/Controls/HoverToolTip.md +++ /dev/null @@ -1,88 +0,0 @@ -# HoverToolTip - -A basic Tooltip implementation - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -A tooltip implementation which allows the user to hover over a RectTransform to activate it. - ---------- - -## Properties - -Property | Description --|- -*Tooltip Position*|RectTransform used to position the tooltip; defaults to the hovered rect. -*Hover Time*|Delay (seconds) before showing the tooltip. -*Stay Hovered*|Keep showing the tooltip while the pointer remains over the target. -*Hide Time*|Delay (seconds) before hiding after pointer exit. -***On Show*** (event)|Invoked when the tooltip is shown. -***On Hide*** (event)|Invoked when the tooltip is hidden. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Add the HoverToolTip control to your scene using: - -"Add Component -> UI -> Extensions -> HoverTooltip" - -Or alternatively, add it via the GameObject menu: - -"GameObject -> UI -> Extensions -> HoverToolTip" - ---------- - -## Video Demo - -"Link to demo video or animated Gifs" - ---------- - -## See also - -[ToolTip](/Controls/ToolTip.md) -[BoundToolTip](/Controls/BoundToolTip.md) - ---------- - -## Credits and Donation - -**Needs Verifying** -drHogan - ---------- - -## External links - -[Sourced from](http://www.hammerandravens.com/multi-use-tooltip-system-in-unity3d/) diff --git a/_site_test/Controls/ImageExtended.html b/_site_test/Controls/ImageExtended.html deleted file mode 100644 index c100eb3..0000000 --- a/_site_test/Controls/ImageExtended.html +++ /dev/null @@ -1,231 +0,0 @@ - - - - - -Image Extended — Unity UI Extensions - - - -Image Extended | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Image Extended

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

Improved Image control with rotation support and use of filled type without an Image (useful for masks)

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Improved Image control with rotation support and use of filled type without an Image (useful for masks)

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
RotateApplies rotation to the image vertices.
Use Sprite MeshUse the sprite’s mesh data instead of a simple quad when available.
Preserve AspectMaintain aspect ratio when resizing.
Fill Center Without SpriteAllow filled mode even when no sprite is assigned (useful for masks).
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add the Image Extended control to your scene using: -GameObject -> UI -> Extensions -> Image Extended

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs”

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Ges

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/ImageExtended.md b/_site_test/Controls/ImageExtended.md deleted file mode 100644 index e2dfeaa..0000000 --- a/_site_test/Controls/ImageExtended.md +++ /dev/null @@ -1,82 +0,0 @@ -# Image Extended - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -Improved Image control with rotation support and use of filled type without an Image (useful for masks) - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Improved Image control with rotation support and use of filled type without an Image (useful for masks) - ---------- - -## Properties - -Property | Description --|- -*Rotate*|Applies rotation to the image vertices. -*Use Sprite Mesh*|Use the sprite's mesh data instead of a simple quad when available. -*Preserve Aspect*|Maintain aspect ratio when resizing. -*Fill Center Without Sprite*|Allow filled mode even when no sprite is assigned (useful for masks). - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Add the Image Extended control to your scene using: -GameObject -> UI -> Extensions -> Image Extended - ---------- - -## Video Demo - -"Link to demo video or animated Gifs" - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -Ges - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/page-2#post-2062320) diff --git a/_site_test/Controls/Images/Accordion-Element.png b/_site_test/Controls/Images/Accordion-Element.png deleted file mode 100644 index 0897d80..0000000 Binary files a/_site_test/Controls/Images/Accordion-Element.png and /dev/null differ diff --git a/_site_test/Controls/Images/Accordion-Header.png b/_site_test/Controls/Images/Accordion-Header.png deleted file mode 100644 index 0b2ad57..0000000 Binary files a/_site_test/Controls/Images/Accordion-Header.png and /dev/null differ diff --git a/_site_test/Controls/Images/Accordion-Layout.png b/_site_test/Controls/Images/Accordion-Layout.png deleted file mode 100644 index 34117e9..0000000 Binary files a/_site_test/Controls/Images/Accordion-Layout.png and /dev/null differ diff --git a/_site_test/Controls/Images/Accordion-Settings.png b/_site_test/Controls/Images/Accordion-Settings.png deleted file mode 100644 index 6be98f3..0000000 Binary files a/_site_test/Controls/Images/Accordion-Settings.png and /dev/null differ diff --git a/_site_test/Controls/Images/AutoCompleteComboBoxInspector.jpg b/_site_test/Controls/Images/AutoCompleteComboBoxInspector.jpg deleted file mode 100644 index 75dec27..0000000 Binary files a/_site_test/Controls/Images/AutoCompleteComboBoxInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/BoxSliderDemo.jpg b/_site_test/Controls/Images/BoxSliderDemo.jpg deleted file mode 100644 index 8eb673c..0000000 Binary files a/_site_test/Controls/Images/BoxSliderDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/BoxSliderDemo.mp4 b/_site_test/Controls/Images/BoxSliderDemo.mp4 deleted file mode 100644 index 10cbee1..0000000 Binary files a/_site_test/Controls/Images/BoxSliderDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/BoxSliderInspector.jpg b/_site_test/Controls/Images/BoxSliderInspector.jpg deleted file mode 100644 index cdb0677..0000000 Binary files a/_site_test/Controls/Images/BoxSliderInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CardUI2DExpandingInspector.jpg b/_site_test/Controls/Images/CardUI2DExpandingInspector.jpg deleted file mode 100644 index e9780bf..0000000 Binary files a/_site_test/Controls/Images/CardUI2DExpandingInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CardUI2DPopupInspector.jpg b/_site_test/Controls/Images/CardUI2DPopupInspector.jpg deleted file mode 100644 index 974205c..0000000 Binary files a/_site_test/Controls/Images/CardUI2DPopupInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CardUI2DStackInspector.jpg b/_site_test/Controls/Images/CardUI2DStackInspector.jpg deleted file mode 100644 index 7f49651..0000000 Binary files a/_site_test/Controls/Images/CardUI2DStackInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CardUI3DExpandingInspector.jpg b/_site_test/Controls/Images/CardUI3DExpandingInspector.jpg deleted file mode 100644 index a4e2d47..0000000 Binary files a/_site_test/Controls/Images/CardUI3DExpandingInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CardUIDemo.gif b/_site_test/Controls/Images/CardUIDemo.gif deleted file mode 100644 index 93c1163..0000000 Binary files a/_site_test/Controls/Images/CardUIDemo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/ColorPicker.jpg b/_site_test/Controls/Images/ColorPicker.jpg deleted file mode 100644 index 6af9b27..0000000 Binary files a/_site_test/Controls/Images/ColorPicker.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ColorPickerDemo.jpg b/_site_test/Controls/Images/ColorPickerDemo.jpg deleted file mode 100644 index 41f1dc9..0000000 Binary files a/_site_test/Controls/Images/ColorPickerDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ColorPickerDemo.mp4 b/_site_test/Controls/Images/ColorPickerDemo.mp4 deleted file mode 100644 index 2b17fad..0000000 Binary files a/_site_test/Controls/Images/ColorPickerDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/ColorPickerInspector.jpg b/_site_test/Controls/Images/ColorPickerInspector.jpg deleted file mode 100644 index 93aa68a..0000000 Binary files a/_site_test/Controls/Images/ColorPickerInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ColorPickerPresets.jpg b/_site_test/Controls/Images/ColorPickerPresets.jpg deleted file mode 100644 index 541278e..0000000 Binary files a/_site_test/Controls/Images/ColorPickerPresets.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ComboBoxInspector.jpg b/_site_test/Controls/Images/ComboBoxInspector.jpg deleted file mode 100644 index bfefb6f..0000000 Binary files a/_site_test/Controls/Images/ComboBoxInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ContentScrollSnapHorizontalDemo.gif b/_site_test/Controls/Images/ContentScrollSnapHorizontalDemo.gif deleted file mode 100644 index b1f2cad..0000000 Binary files a/_site_test/Controls/Images/ContentScrollSnapHorizontalDemo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/ContentScrollSnapHorizontalInspector.jpg b/_site_test/Controls/Images/ContentScrollSnapHorizontalInspector.jpg deleted file mode 100644 index 99414b6..0000000 Binary files a/_site_test/Controls/Images/ContentScrollSnapHorizontalInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CooldownDemo.jpg b/_site_test/Controls/Images/CooldownDemo.jpg deleted file mode 100644 index 4b5a8f3..0000000 Binary files a/_site_test/Controls/Images/CooldownDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CooldownDemo.mp4 b/_site_test/Controls/Images/CooldownDemo.mp4 deleted file mode 100644 index 46094d3..0000000 Binary files a/_site_test/Controls/Images/CooldownDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/CooldownInspector.jpg b/_site_test/Controls/Images/CooldownInspector.jpg deleted file mode 100644 index 69cffe8..0000000 Binary files a/_site_test/Controls/Images/CooldownInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CurlyUIDemo.jpg b/_site_test/Controls/Images/CurlyUIDemo.jpg deleted file mode 100644 index 09498c0..0000000 Binary files a/_site_test/Controls/Images/CurlyUIDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CurlyUIDemo.mp4 b/_site_test/Controls/Images/CurlyUIDemo.mp4 deleted file mode 100644 index e53d819..0000000 Binary files a/_site_test/Controls/Images/CurlyUIDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/CurlyUIExample.jpg b/_site_test/Controls/Images/CurlyUIExample.jpg deleted file mode 100644 index a99d02b..0000000 Binary files a/_site_test/Controls/Images/CurlyUIExample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/CurlyUIInspector.jpg b/_site_test/Controls/Images/CurlyUIInspector.jpg deleted file mode 100644 index 7b9cf66..0000000 Binary files a/_site_test/Controls/Images/CurlyUIInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/DropDownListInspector.jpg b/_site_test/Controls/Images/DropDownListInspector.jpg deleted file mode 100644 index 7d6c571..0000000 Binary files a/_site_test/Controls/Images/DropDownListInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/FancyScrollViewExample.jpg b/_site_test/Controls/Images/FancyScrollViewExample.jpg deleted file mode 100644 index 968770e..0000000 Binary files a/_site_test/Controls/Images/FancyScrollViewExample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/FancyScrollViewInspector.jpg b/_site_test/Controls/Images/FancyScrollViewInspector.jpg deleted file mode 100644 index 91f3986..0000000 Binary files a/_site_test/Controls/Images/FancyScrollViewInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/Gradient2Demo.jpg b/_site_test/Controls/Images/Gradient2Demo.jpg deleted file mode 100644 index 6452b1c..0000000 Binary files a/_site_test/Controls/Images/Gradient2Demo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/Gradient2Example.jpg b/_site_test/Controls/Images/Gradient2Example.jpg deleted file mode 100644 index 610134f..0000000 Binary files a/_site_test/Controls/Images/Gradient2Example.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/Gradient2Inspector.jpg b/_site_test/Controls/Images/Gradient2Inspector.jpg deleted file mode 100644 index b9b56af..0000000 Binary files a/_site_test/Controls/Images/Gradient2Inspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/GradientDemo.jpg b/_site_test/Controls/Images/GradientDemo.jpg deleted file mode 100644 index 1a014c9..0000000 Binary files a/_site_test/Controls/Images/GradientDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/GradientDemo.mp4 b/_site_test/Controls/Images/GradientDemo.mp4 deleted file mode 100644 index 14d3637..0000000 Binary files a/_site_test/Controls/Images/GradientDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/GradientDemo2.mp4 b/_site_test/Controls/Images/GradientDemo2.mp4 deleted file mode 100644 index e0806ee..0000000 Binary files a/_site_test/Controls/Images/GradientDemo2.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/GradientInspector.jpg b/_site_test/Controls/Images/GradientInspector.jpg deleted file mode 100644 index 525c4fd..0000000 Binary files a/_site_test/Controls/Images/GradientInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/Screenshot_1.png b/_site_test/Controls/Images/GridRawImage/Screenshot_1.png deleted file mode 100644 index ccbb023..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/Screenshot_1.png and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/Screenshot_2.png b/_site_test/Controls/Images/GridRawImage/Screenshot_2.png deleted file mode 100644 index b1730d6..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/Screenshot_2.png and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/Screenshot_20.png b/_site_test/Controls/Images/GridRawImage/Screenshot_20.png deleted file mode 100644 index 13485cb..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/Screenshot_20.png and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/Screenshot_3.png b/_site_test/Controls/Images/GridRawImage/Screenshot_3.png deleted file mode 100644 index 0911cf2..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/Screenshot_3.png and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/Screenshot_4.png b/_site_test/Controls/Images/GridRawImage/Screenshot_4.png deleted file mode 100644 index 005eed8..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/Screenshot_4.png and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/Screenshot_5.png b/_site_test/Controls/Images/GridRawImage/Screenshot_5.png deleted file mode 100644 index 07f3be2..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/Screenshot_5.png and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/Screenshot_6.png b/_site_test/Controls/Images/GridRawImage/Screenshot_6.png deleted file mode 100644 index 1956ffa..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/Screenshot_6.png and /dev/null differ diff --git a/_site_test/Controls/Images/GridRawImage/inspector-preview.png b/_site_test/Controls/Images/GridRawImage/inspector-preview.png deleted file mode 100644 index 62045f9..0000000 Binary files a/_site_test/Controls/Images/GridRawImage/inspector-preview.png and /dev/null differ diff --git a/_site_test/Controls/Images/HSSInspector.jpg b/_site_test/Controls/Images/HSSInspector.jpg deleted file mode 100644 index 1c75145..0000000 Binary files a/_site_test/Controls/Images/HSSInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/InfiniteScrollInspector.jpg b/_site_test/Controls/Images/InfiniteScrollInspector.jpg deleted file mode 100644 index d0d7d54..0000000 Binary files a/_site_test/Controls/Images/InfiniteScrollInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/LetterSpacingDemo.jpg b/_site_test/Controls/Images/LetterSpacingDemo.jpg deleted file mode 100644 index 4e1bd7c..0000000 Binary files a/_site_test/Controls/Images/LetterSpacingDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/LetterSpacingDemo.mp4 b/_site_test/Controls/Images/LetterSpacingDemo.mp4 deleted file mode 100644 index 990a22c..0000000 Binary files a/_site_test/Controls/Images/LetterSpacingDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/LetterSpacingInspector.jpg b/_site_test/Controls/Images/LetterSpacingInspector.jpg deleted file mode 100644 index 51edc01..0000000 Binary files a/_site_test/Controls/Images/LetterSpacingInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/MagneticInfiniteScrollDemo.gif b/_site_test/Controls/Images/MagneticInfiniteScrollDemo.gif deleted file mode 100644 index b6d5027..0000000 Binary files a/_site_test/Controls/Images/MagneticInfiniteScrollDemo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/MagneticInfiniteScrollInspector.jpg b/_site_test/Controls/Images/MagneticInfiniteScrollInspector.jpg deleted file mode 100644 index 767405c..0000000 Binary files a/_site_test/Controls/Images/MagneticInfiniteScrollInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/MenuDemo.jpg b/_site_test/Controls/Images/MenuDemo.jpg deleted file mode 100644 index c208ca7..0000000 Binary files a/_site_test/Controls/Images/MenuDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/MenuDemo.mp4 b/_site_test/Controls/Images/MenuDemo.mp4 deleted file mode 100644 index 0019d9e..0000000 Binary files a/_site_test/Controls/Images/MenuDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/MenuExample.jpg b/_site_test/Controls/Images/MenuExample.jpg deleted file mode 100644 index 75a3289..0000000 Binary files a/_site_test/Controls/Images/MenuExample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/MenuInspector.jpg b/_site_test/Controls/Images/MenuInspector.jpg deleted file mode 100644 index 460ab2a..0000000 Binary files a/_site_test/Controls/Images/MenuInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/MonoSpacingDemo.jpg b/_site_test/Controls/Images/MonoSpacingDemo.jpg deleted file mode 100644 index 6f81751..0000000 Binary files a/_site_test/Controls/Images/MonoSpacingDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/MonoSpacingDemo.mp4 b/_site_test/Controls/Images/MonoSpacingDemo.mp4 deleted file mode 100644 index d178451..0000000 Binary files a/_site_test/Controls/Images/MonoSpacingDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/MonoSpacingInspector.jpg b/_site_test/Controls/Images/MonoSpacingInspector.jpg deleted file mode 100644 index 90d0d88..0000000 Binary files a/_site_test/Controls/Images/MonoSpacingInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/NonDrawingGraphicDemo.jpg b/_site_test/Controls/Images/NonDrawingGraphicDemo.jpg deleted file mode 100644 index db6c31d..0000000 Binary files a/_site_test/Controls/Images/NonDrawingGraphicDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/NonDrawingGraphicDemo.mp4 b/_site_test/Controls/Images/NonDrawingGraphicDemo.mp4 deleted file mode 100644 index 9d750e2..0000000 Binary files a/_site_test/Controls/Images/NonDrawingGraphicDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/NonDrawingGraphicInspector.jpg b/_site_test/Controls/Images/NonDrawingGraphicInspector.jpg deleted file mode 100644 index f75a911..0000000 Binary files a/_site_test/Controls/Images/NonDrawingGraphicInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/NonDrawingGraphicInspectorClickable.jpg b/_site_test/Controls/Images/NonDrawingGraphicInspectorClickable.jpg deleted file mode 100644 index 9f4ce52..0000000 Binary files a/_site_test/Controls/Images/NonDrawingGraphicInspectorClickable.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/PaginationManagerDemo.jpg b/_site_test/Controls/Images/PaginationManagerDemo.jpg deleted file mode 100644 index cda4f55..0000000 Binary files a/_site_test/Controls/Images/PaginationManagerDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/PaginationManagerInspector.jpg b/_site_test/Controls/Images/PaginationManagerInspector.jpg deleted file mode 100644 index bcc03d9..0000000 Binary files a/_site_test/Controls/Images/PaginationManagerInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/RadialSliderDemo.jpg b/_site_test/Controls/Images/RadialSliderDemo.jpg deleted file mode 100644 index 5d0a1f6..0000000 Binary files a/_site_test/Controls/Images/RadialSliderDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/RadialSliderDemo.mp4 b/_site_test/Controls/Images/RadialSliderDemo.mp4 deleted file mode 100644 index 7040870..0000000 Binary files a/_site_test/Controls/Images/RadialSliderDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/RadialSliderExample.jpg b/_site_test/Controls/Images/RadialSliderExample.jpg deleted file mode 100644 index 6434ecc..0000000 Binary files a/_site_test/Controls/Images/RadialSliderExample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/RadialSliderInspector.jpg b/_site_test/Controls/Images/RadialSliderInspector.jpg deleted file mode 100644 index b879cbe..0000000 Binary files a/_site_test/Controls/Images/RadialSliderInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/RangeSliderDemo.jpg b/_site_test/Controls/Images/RangeSliderDemo.jpg deleted file mode 100644 index 7f2ff79..0000000 Binary files a/_site_test/Controls/Images/RangeSliderDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/RangeSliderDemo.mp4 b/_site_test/Controls/Images/RangeSliderDemo.mp4 deleted file mode 100644 index 197e054..0000000 Binary files a/_site_test/Controls/Images/RangeSliderDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/RangeSliderExample.jpg b/_site_test/Controls/Images/RangeSliderExample.jpg deleted file mode 100644 index fb6190a..0000000 Binary files a/_site_test/Controls/Images/RangeSliderExample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/RangeSliderInspector.jpg b/_site_test/Controls/Images/RangeSliderInspector.jpg deleted file mode 100644 index 78d9b01..0000000 Binary files a/_site_test/Controls/Images/RangeSliderInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/RectTransformEditor-Inspector.jpg b/_site_test/Controls/Images/RectTransformEditor-Inspector.jpg deleted file mode 100644 index d718410..0000000 Binary files a/_site_test/Controls/Images/RectTransformEditor-Inspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ReorderableListInspector.jpg b/_site_test/Controls/Images/ReorderableListInspector.jpg deleted file mode 100644 index 3d63c91..0000000 Binary files a/_site_test/Controls/Images/ReorderableListInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ResetSelectableHighlight-demo.gif b/_site_test/Controls/Images/ResetSelectableHighlight-demo.gif deleted file mode 100644 index b20e42a..0000000 Binary files a/_site_test/Controls/Images/ResetSelectableHighlight-demo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectConflictManagerDemo.jpg b/_site_test/Controls/Images/ScrollRectConflictManagerDemo.jpg deleted file mode 100644 index 38c0ece..0000000 Binary files a/_site_test/Controls/Images/ScrollRectConflictManagerDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectConflictManagerInspector.jpg b/_site_test/Controls/Images/ScrollRectConflictManagerInspector.jpg deleted file mode 100644 index 99d1513..0000000 Binary files a/_site_test/Controls/Images/ScrollRectConflictManagerInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectExDemo.jpg b/_site_test/Controls/Images/ScrollRectExDemo.jpg deleted file mode 100644 index ad3e9c0..0000000 Binary files a/_site_test/Controls/Images/ScrollRectExDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectExInspector.jpg b/_site_test/Controls/Images/ScrollRectExInspector.jpg deleted file mode 100644 index 07f2ed6..0000000 Binary files a/_site_test/Controls/Images/ScrollRectExInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectLinkerDemo.jpg b/_site_test/Controls/Images/ScrollRectLinkerDemo.jpg deleted file mode 100644 index c6d5985..0000000 Binary files a/_site_test/Controls/Images/ScrollRectLinkerDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectLinkerInspector.jpg b/_site_test/Controls/Images/ScrollRectLinkerInspector.jpg deleted file mode 100644 index 8b45f77..0000000 Binary files a/_site_test/Controls/Images/ScrollRectLinkerInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectOcclusionInspector.jpg b/_site_test/Controls/Images/ScrollRectOcclusionInspector.jpg deleted file mode 100644 index 38194d2..0000000 Binary files a/_site_test/Controls/Images/ScrollRectOcclusionInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectTweenerDemo.jpg b/_site_test/Controls/Images/ScrollRectTweenerDemo.jpg deleted file mode 100644 index dddc16f..0000000 Binary files a/_site_test/Controls/Images/ScrollRectTweenerDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollRectTweenerInspector.jpg b/_site_test/Controls/Images/ScrollRectTweenerInspector.jpg deleted file mode 100644 index aede5c5..0000000 Binary files a/_site_test/Controls/Images/ScrollRectTweenerInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollSnapPerspectiveDemo.jpg b/_site_test/Controls/Images/ScrollSnapPerspectiveDemo.jpg deleted file mode 100644 index d430c39..0000000 Binary files a/_site_test/Controls/Images/ScrollSnapPerspectiveDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/ScrollSnapPerspectiveDemo.mp4 b/_site_test/Controls/Images/ScrollSnapPerspectiveDemo.mp4 deleted file mode 100644 index 75861d2..0000000 Binary files a/_site_test/Controls/Images/ScrollSnapPerspectiveDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/SegmentedControlDemo.jpg b/_site_test/Controls/Images/SegmentedControlDemo.jpg deleted file mode 100644 index 98a7d1a..0000000 Binary files a/_site_test/Controls/Images/SegmentedControlDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/SegmentedControlDemo.mp4 b/_site_test/Controls/Images/SegmentedControlDemo.mp4 deleted file mode 100644 index 4db8d67..0000000 Binary files a/_site_test/Controls/Images/SegmentedControlDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/SegmentedControlInspector.jpg b/_site_test/Controls/Images/SegmentedControlInspector.jpg deleted file mode 100644 index 972e29c..0000000 Binary files a/_site_test/Controls/Images/SegmentedControlInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/SegmentedExample.png b/_site_test/Controls/Images/SegmentedExample.png deleted file mode 100644 index 89eb586..0000000 Binary files a/_site_test/Controls/Images/SegmentedExample.png and /dev/null differ diff --git a/_site_test/Controls/Images/SelectableExtensionInspector.jpg b/_site_test/Controls/Images/SelectableExtensionInspector.jpg deleted file mode 100644 index c189e32..0000000 Binary files a/_site_test/Controls/Images/SelectableExtensionInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/SelectableScalarDemo.jpg b/_site_test/Controls/Images/SelectableScalarDemo.jpg deleted file mode 100644 index aff77a6..0000000 Binary files a/_site_test/Controls/Images/SelectableScalarDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/SelectableScalarDemo.mp4 b/_site_test/Controls/Images/SelectableScalarDemo.mp4 deleted file mode 100644 index b257827..0000000 Binary files a/_site_test/Controls/Images/SelectableScalarDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/SelectableScalarInspector.jpg b/_site_test/Controls/Images/SelectableScalarInspector.jpg deleted file mode 100644 index 9a2319e..0000000 Binary files a/_site_test/Controls/Images/SelectableScalarInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/SelectionBoxDemo.gif b/_site_test/Controls/Images/SelectionBoxDemo.gif deleted file mode 100644 index db13b81..0000000 Binary files a/_site_test/Controls/Images/SelectionBoxDemo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/SelectionBoxInspector.jpg b/_site_test/Controls/Images/SelectionBoxInspector.jpg deleted file mode 100644 index b9736c0..0000000 Binary files a/_site_test/Controls/Images/SelectionBoxInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/SoftAlphaMaskDemo.gif b/_site_test/Controls/Images/SoftAlphaMaskDemo.gif deleted file mode 100644 index 302c3c7..0000000 Binary files a/_site_test/Controls/Images/SoftAlphaMaskDemo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/SoftAplhaMaskInspector.jpg b/_site_test/Controls/Images/SoftAplhaMaskInspector.jpg deleted file mode 100644 index 27d56d0..0000000 Binary files a/_site_test/Controls/Images/SoftAplhaMaskInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/StepperDemo.jpg b/_site_test/Controls/Images/StepperDemo.jpg deleted file mode 100644 index 434258e..0000000 Binary files a/_site_test/Controls/Images/StepperDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/StepperDemo.mp4 b/_site_test/Controls/Images/StepperDemo.mp4 deleted file mode 100644 index b32355e..0000000 Binary files a/_site_test/Controls/Images/StepperDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/StepperExample.png b/_site_test/Controls/Images/StepperExample.png deleted file mode 100644 index 85fc8bf..0000000 Binary files a/_site_test/Controls/Images/StepperExample.png and /dev/null differ diff --git a/_site_test/Controls/Images/StepperInspector.jpg b/_site_test/Controls/Images/StepperInspector.jpg deleted file mode 100644 index eb5d995..0000000 Binary files a/_site_test/Controls/Images/StepperInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TabNavigationDemo.jpg b/_site_test/Controls/Images/TabNavigationDemo.jpg deleted file mode 100644 index 2aaaaec..0000000 Binary files a/_site_test/Controls/Images/TabNavigationDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TabNavigationDemo.mp4 b/_site_test/Controls/Images/TabNavigationDemo.mp4 deleted file mode 100644 index dc0280a..0000000 Binary files a/_site_test/Controls/Images/TabNavigationDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/TabNavigationInspector.jpg b/_site_test/Controls/Images/TabNavigationInspector.jpg deleted file mode 100644 index d86bc47..0000000 Binary files a/_site_test/Controls/Images/TabNavigationInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TableLayoutGroup.jpg b/_site_test/Controls/Images/TableLayoutGroup.jpg deleted file mode 100644 index bcd5fcb..0000000 Binary files a/_site_test/Controls/Images/TableLayoutGroup.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TableLayoutGroupDemo.jpg b/_site_test/Controls/Images/TableLayoutGroupDemo.jpg deleted file mode 100644 index 771d89c..0000000 Binary files a/_site_test/Controls/Images/TableLayoutGroupDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TableLayoutGroupDemo.mp4 b/_site_test/Controls/Images/TableLayoutGroupDemo.mp4 deleted file mode 100644 index 97b6e08..0000000 Binary files a/_site_test/Controls/Images/TableLayoutGroupDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/TableLayoutGroupInspector.jpg b/_site_test/Controls/Images/TableLayoutGroupInspector.jpg deleted file mode 100644 index 8ac96ec..0000000 Binary files a/_site_test/Controls/Images/TableLayoutGroupInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TextPicDemo.jpg b/_site_test/Controls/Images/TextPicDemo.jpg deleted file mode 100644 index d574d5c..0000000 Binary files a/_site_test/Controls/Images/TextPicDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TextPicDemo.mp4 b/_site_test/Controls/Images/TextPicDemo.mp4 deleted file mode 100644 index 8adcba0..0000000 Binary files a/_site_test/Controls/Images/TextPicDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/TextPicInspector.jpg b/_site_test/Controls/Images/TextPicInspector.jpg deleted file mode 100644 index ec935e3..0000000 Binary files a/_site_test/Controls/Images/TextPicInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TileSizeFitterInspector.jpg b/_site_test/Controls/Images/TileSizeFitterInspector.jpg deleted file mode 100644 index fbe2368..0000000 Binary files a/_site_test/Controls/Images/TileSizeFitterInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/TooltipInspector.jpg b/_site_test/Controls/Images/TooltipInspector.jpg deleted file mode 100644 index 72c2e2e..0000000 Binary files a/_site_test/Controls/Images/TooltipInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UICircleSegmented/Inspector_preview.png b/_site_test/Controls/Images/UICircleSegmented/Inspector_preview.png deleted file mode 100644 index 712b386..0000000 Binary files a/_site_test/Controls/Images/UICircleSegmented/Inspector_preview.png and /dev/null differ diff --git a/_site_test/Controls/Images/UICircleSegmented/border example.png b/_site_test/Controls/Images/UICircleSegmented/border example.png deleted file mode 100644 index b834717..0000000 Binary files a/_site_test/Controls/Images/UICircleSegmented/border example.png and /dev/null differ diff --git a/_site_test/Controls/Images/UICircleSegmented/samples_animated.gif b/_site_test/Controls/Images/UICircleSegmented/samples_animated.gif deleted file mode 100644 index 122da0e..0000000 Binary files a/_site_test/Controls/Images/UICircleSegmented/samples_animated.gif and /dev/null differ diff --git a/_site_test/Controls/Images/UICircleSegmented/wheel_select.gif b/_site_test/Controls/Images/UICircleSegmented/wheel_select.gif deleted file mode 100644 index 5d7c6a9..0000000 Binary files a/_site_test/Controls/Images/UICircleSegmented/wheel_select.gif and /dev/null differ diff --git a/_site_test/Controls/Images/UIFlippableDemo.jpg b/_site_test/Controls/Images/UIFlippableDemo.jpg deleted file mode 100644 index 2edf1dd..0000000 Binary files a/_site_test/Controls/Images/UIFlippableDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIFlippableDemo.mp4 b/_site_test/Controls/Images/UIFlippableDemo.mp4 deleted file mode 100644 index f0b0ddf..0000000 Binary files a/_site_test/Controls/Images/UIFlippableDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/UIFlippableInspector.jpg b/_site_test/Controls/Images/UIFlippableInspector.jpg deleted file mode 100644 index ae4acdd..0000000 Binary files a/_site_test/Controls/Images/UIFlippableInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIGraphicSector b/_site_test/Controls/Images/UIGraphicSector deleted file mode 100644 index e69de29..0000000 diff --git a/_site_test/Controls/Images/UIGridRendererDemo.jpg b/_site_test/Controls/Images/UIGridRendererDemo.jpg deleted file mode 100644 index 8af8bc7..0000000 Binary files a/_site_test/Controls/Images/UIGridRendererDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIGridRendererDemo.mp4 b/_site_test/Controls/Images/UIGridRendererDemo.mp4 deleted file mode 100644 index bd03d49..0000000 Binary files a/_site_test/Controls/Images/UIGridRendererDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/UIGridRendererInspector.jpg b/_site_test/Controls/Images/UIGridRendererInspector.jpg deleted file mode 100644 index dbd2b7c..0000000 Binary files a/_site_test/Controls/Images/UIGridRendererInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIGridRendererSample.jpg b/_site_test/Controls/Images/UIGridRendererSample.jpg deleted file mode 100644 index 99b2ce4..0000000 Binary files a/_site_test/Controls/Images/UIGridRendererSample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIHighlightableInspector.jpg b/_site_test/Controls/Images/UIHighlightableInspector.jpg deleted file mode 100644 index b8eccbf..0000000 Binary files a/_site_test/Controls/Images/UIHighlightableInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIHighlighterDemo.jpg b/_site_test/Controls/Images/UIHighlighterDemo.jpg deleted file mode 100644 index 4e68036..0000000 Binary files a/_site_test/Controls/Images/UIHighlighterDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIHighlighterDemo.mp4 b/_site_test/Controls/Images/UIHighlighterDemo.mp4 deleted file mode 100644 index 42aa136..0000000 Binary files a/_site_test/Controls/Images/UIHighlighterDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/UIKnobInspector.jpg b/_site_test/Controls/Images/UIKnobInspector.jpg deleted file mode 100644 index 5a59f74..0000000 Binary files a/_site_test/Controls/Images/UIKnobInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UILineConnectorDemo.jpg b/_site_test/Controls/Images/UILineConnectorDemo.jpg deleted file mode 100644 index 4433a7a..0000000 Binary files a/_site_test/Controls/Images/UILineConnectorDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UILineConnectorDemo.mp4 b/_site_test/Controls/Images/UILineConnectorDemo.mp4 deleted file mode 100644 index af54e83..0000000 Binary files a/_site_test/Controls/Images/UILineConnectorDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/UILineConnectorInspector.jpg b/_site_test/Controls/Images/UILineConnectorInspector.jpg deleted file mode 100644 index 06dfbad..0000000 Binary files a/_site_test/Controls/Images/UILineConnectorInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UILineConnectorSample.jpg b/_site_test/Controls/Images/UILineConnectorSample.jpg deleted file mode 100644 index 7d06423..0000000 Binary files a/_site_test/Controls/Images/UILineConnectorSample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UILineRendererInspector.jpg b/_site_test/Controls/Images/UILineRendererInspector.jpg deleted file mode 100644 index 42f1ce7..0000000 Binary files a/_site_test/Controls/Images/UILineRendererInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIParticleSystemDemo.jpg b/_site_test/Controls/Images/UIParticleSystemDemo.jpg deleted file mode 100644 index 72bae38..0000000 Binary files a/_site_test/Controls/Images/UIParticleSystemDemo.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIParticleSystemDemo.mp4 b/_site_test/Controls/Images/UIParticleSystemDemo.mp4 deleted file mode 100644 index 1587988..0000000 Binary files a/_site_test/Controls/Images/UIParticleSystemDemo.mp4 and /dev/null differ diff --git a/_site_test/Controls/Images/UIParticleSystemExample.jpg b/_site_test/Controls/Images/UIParticleSystemExample.jpg deleted file mode 100644 index 0e2f40c..0000000 Binary files a/_site_test/Controls/Images/UIParticleSystemExample.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIParticleSystemInspector.jpg b/_site_test/Controls/Images/UIParticleSystemInspector.jpg deleted file mode 100644 index 1dc8304..0000000 Binary files a/_site_test/Controls/Images/UIParticleSystemInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIPolygonDemo.gif b/_site_test/Controls/Images/UIPolygonDemo.gif deleted file mode 100644 index b52838b..0000000 Binary files a/_site_test/Controls/Images/UIPolygonDemo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/UIPolygonInspector.jpg b/_site_test/Controls/Images/UIPolygonInspector.jpg deleted file mode 100644 index 65e27e7..0000000 Binary files a/_site_test/Controls/Images/UIPolygonInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIScrollToSelectionInspector.jpg b/_site_test/Controls/Images/UIScrollToSelectionInspector.jpg deleted file mode 100644 index 147b886..0000000 Binary files a/_site_test/Controls/Images/UIScrollToSelectionInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UIScrollToSelectionXYInspector.jpg b/_site_test/Controls/Images/UIScrollToSelectionXYInspector.jpg deleted file mode 100644 index 8bde27f..0000000 Binary files a/_site_test/Controls/Images/UIScrollToSelectionXYInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/UITweenScaleDemo.gif b/_site_test/Controls/Images/UITweenScaleDemo.gif deleted file mode 100644 index 177edb9..0000000 Binary files a/_site_test/Controls/Images/UITweenScaleDemo.gif and /dev/null differ diff --git a/_site_test/Controls/Images/UITweenScaleInspector.jpg b/_site_test/Controls/Images/UITweenScaleInspector.jpg deleted file mode 100644 index 39f2501..0000000 Binary files a/_site_test/Controls/Images/UITweenScaleInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/VSSInspector.jpg b/_site_test/Controls/Images/VSSInspector.jpg deleted file mode 100644 index adbe398..0000000 Binary files a/_site_test/Controls/Images/VSSInspector.jpg and /dev/null differ diff --git a/_site_test/Controls/Images/uGUIToolsMenu.jpg b/_site_test/Controls/Images/uGUIToolsMenu.jpg deleted file mode 100644 index 46f224e..0000000 Binary files a/_site_test/Controls/Images/uGUIToolsMenu.jpg and /dev/null differ diff --git a/_site_test/Controls/Infinite Scroll Snap.html b/_site_test/Controls/Infinite Scroll Snap.html deleted file mode 100644 index 1a75c41..0000000 --- a/_site_test/Controls/Infinite Scroll Snap.html +++ /dev/null @@ -1,310 +0,0 @@ - - - - - -Infinite Scroll Snap — Unity UI Extensions - - - -Infinite Scroll Snap | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Infinite Scroll Snap

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

Infinite scrolling layout control for UI elements.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Infinite scrolling layout control for UI elements. This component has been replaced by improved infinite scrolling implementation in HorizontalScrollSnap and VerticalScrollSnap.

- -
- -

Properties

- -

This component has been deprecated and replaced.

- -
- -

Methods

- -

This component has been deprecated and replaced.

- -
- -

Usage

- -

This component has been deprecated for Unity 6. Use HorizontalScrollSnap or VerticalScrollSnap with infinite scrolling enabled instead.

- -
- -

Video Demo

- -

N/A - Component deprecated

- -
- -

See also

- - - -
- -

Credits and Donation

- -

N/A

- -
- - - -

N/A

- -

This is a code I wrote to add snap functionality to UI_InfiniteScroll. I’ve only tested it in vertical, but it should work perfectly fine horizontally as well. Feel free to add this to your projects and really do anything with it.

-
#!c#
-using System.Collections;
-using System.Collections.Generic;
-using UnityEngine;
-using UnityEngine.UI;
-using UnityEngine.UI.Extensions;
-using UnityEngine.EventSystems;
-
-public class UI_InfiniteScrollSnap : MonoBehaviour, IBeginDragHandler, IEndDragHandler
-{
-    //this component is meant to be added to objects which have UI_InfiniteScroll components
-    //if true user will need to call Init() method manually (in case the contend of the scrollview is generated from code or requires special initialization)
-    [Tooltip("If false, will Init automatically, otherwise you need to call Init() method")]
-    public bool InitByUser = false;
-    public RectTransform _center; //the transform target of lerping. the list item closest to this recttransform is the 'center' of it
-
-    private UI_InfiniteScroll _UI_InfiniteScroll;
-    private ScrollRect _scrollRect;
-    private RectTransform _content;
-    private RectTransform _centerChild; //the closest child to the center
-    public RectTransform CenterChild //the center child needs to be initialized as to begin with
-    {
-        set { _centerChild = value; }
-    }
-    private bool _centerChildChanged; //if the closest child to the center has changed
-    private bool _beingDragged;
-    private bool _isLerping;
-
-    private int dragCheck;
-
-    void Awake()
-    {
-        if (!InitByUser)
-        {
-            Init();
-        }
-    }
-    public void Init()
-    {
-        if (_snapRecieverGameObject != null)
-        {
-            _snapReciever = _snapRecieverGameObject.GetComponent<IRecievesSnap>();
-        }
-        if (GetComponent<UI_InfiniteScroll>() != null)
-        {
-            _UI_InfiniteScroll = GetComponent<UI_InfiniteScroll>();
-            if (GetComponent<ScrollRect>() != null)
-            {
-                _scrollRect = GetComponent<ScrollRect>();
-                _content = _scrollRect.content;
-            }
-        }
-    }
-    public void Update()
-    {
-        if (_isLerping)
-        {
-            if (_centerChild.position.Equals(_center.position)) _isLerping = false;
-            else
-            {
-                _content.transform.position -= MyMath.Lerp(Vector3.zero, _centerChild.position - _center.position, .2f);
-            }
-
-        }
-        else if (_scrollRect.velocity.y < 30f) //if the list is being scrolled slowly
-        {
-            foreach (RectTransform child in _content) //this for loop finds the closest child to the center
-            {
-                if ((child.position - _center.position).magnitude < (_centerChild.position - _center.position).magnitude)
-                {
-                    _centerChild = child;
-                    _centerChildChanged = true;
-                }
-            }
-            if (_centerChildChanged)
-            {
-                _snapReciever.Recieve(_centerChild); //the menu which will recieve the message that this child is the new focus of the menu
-                _centerChildChanged = false;
-            }
-            if (!_isLerping && !_beingDragged && (_scrollRect.velocity).magnitude < 20) //if the menu is moving really slowly, it should lerp to the center
-            {
-                _scrollRect.velocity = Vector3.zero;
-                _isLerping = true;
-            }
-        }
-    }
-
-    public void OnBeginDrag(PointerEventData eventData)
-    {
-        _beingDragged = true;
-        _isLerping = false;
-    }
-
-    public void OnEndDrag(PointerEventData eventData)
-    {
-        _beingDragged = false;
-    }
-}
-
-
- -
- - - - - diff --git a/_site_test/Controls/Infinite Scroll Snap.md b/_site_test/Controls/Infinite Scroll Snap.md deleted file mode 100644 index ac9b364..0000000 --- a/_site_test/Controls/Infinite Scroll Snap.md +++ /dev/null @@ -1,182 +0,0 @@ -# Infinite Scroll Snap - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -Infinite scrolling layout control for UI elements. - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Infinite scrolling layout control for UI elements. This component has been replaced by improved infinite scrolling implementation in HorizontalScrollSnap and VerticalScrollSnap. - ---------- - -## Properties - -This component has been deprecated and replaced. - ---------- - -## Methods - -This component has been deprecated and replaced. - ---------- - -## Usage - -This component has been deprecated for Unity 6. Use HorizontalScrollSnap or VerticalScrollSnap with infinite scrolling enabled instead. - ---------- - -## Video Demo - -N/A - Component deprecated - ---------- - -## See also - -* [HorizontalScrollSnap](/Controls/HorizontalScrollSnap.md) -* [VerticalScrollSnap](/Controls/VerticalScrollSnap.md) - ---------- - -## Credits and Donation - -N/A - ---------- - -## External links - -N/A - - - -This is a code I wrote to add snap functionality to UI_InfiniteScroll. I've only tested it in vertical, but it should work perfectly fine horizontally as well. Feel free to add this to your projects and really do anything with it. -``` -#!c# -using System.Collections; -using System.Collections.Generic; -using UnityEngine; -using UnityEngine.UI; -using UnityEngine.UI.Extensions; -using UnityEngine.EventSystems; - -public class UI_InfiniteScrollSnap : MonoBehaviour, IBeginDragHandler, IEndDragHandler -{ - //this component is meant to be added to objects which have UI_InfiniteScroll components - //if true user will need to call Init() method manually (in case the contend of the scrollview is generated from code or requires special initialization) - [Tooltip("If false, will Init automatically, otherwise you need to call Init() method")] - public bool InitByUser = false; - public RectTransform _center; //the transform target of lerping. the list item closest to this recttransform is the 'center' of it - - private UI_InfiniteScroll _UI_InfiniteScroll; - private ScrollRect _scrollRect; - private RectTransform _content; - private RectTransform _centerChild; //the closest child to the center - public RectTransform CenterChild //the center child needs to be initialized as to begin with - { - set { _centerChild = value; } - } - private bool _centerChildChanged; //if the closest child to the center has changed - private bool _beingDragged; - private bool _isLerping; - - private int dragCheck; - - void Awake() - { - if (!InitByUser) - { - Init(); - } - } - public void Init() - { - if (_snapRecieverGameObject != null) - { - _snapReciever = _snapRecieverGameObject.GetComponent(); - } - if (GetComponent() != null) - { - _UI_InfiniteScroll = GetComponent(); - if (GetComponent() != null) - { - _scrollRect = GetComponent(); - _content = _scrollRect.content; - } - } - } - public void Update() - { - if (_isLerping) - { - if (_centerChild.position.Equals(_center.position)) _isLerping = false; - else - { - _content.transform.position -= MyMath.Lerp(Vector3.zero, _centerChild.position - _center.position, .2f); - } - - } - else if (_scrollRect.velocity.y < 30f) //if the list is being scrolled slowly - { - foreach (RectTransform child in _content) //this for loop finds the closest child to the center - { - if ((child.position - _center.position).magnitude < (_centerChild.position - _center.position).magnitude) - { - _centerChild = child; - _centerChildChanged = true; - } - } - if (_centerChildChanged) - { - _snapReciever.Recieve(_centerChild); //the menu which will recieve the message that this child is the new focus of the menu - _centerChildChanged = false; - } - if (!_isLerping && !_beingDragged && (_scrollRect.velocity).magnitude < 20) //if the menu is moving really slowly, it should lerp to the center - { - _scrollRect.velocity = Vector3.zero; - _isLerping = true; - } - } - } - - public void OnBeginDrag(PointerEventData eventData) - { - _beingDragged = true; - _isLerping = false; - } - - public void OnEndDrag(PointerEventData eventData) - { - _beingDragged = false; - } -} - -``` \ No newline at end of file diff --git a/_site_test/Controls/InputFieldEnterSubmit.html b/_site_test/Controls/InputFieldEnterSubmit.html deleted file mode 100644 index 79553dc..0000000 --- a/_site_test/Controls/InputFieldEnterSubmit.html +++ /dev/null @@ -1,384 +0,0 @@ - - - - - -Input Field Enter Submit — Unity UI Extensions - - - -Input Field Enter Submit | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Input Field Enter Submit

- -

A simple utility component that automatically submits an InputField when the Enter key is pressed.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

InputFieldEnterSubmit is a lightweight utility component that extends the standard Unity InputField with automatic submission on Enter key press. When the Enter key is pressed (or Enter on the numeric keypad), the component:

- -
    -
  1. Triggers the EnterSubmit event with the current input text
    2. -
  2. Optionally defocuses the input field (clears selection)
    3. -
- -

This is useful for creating form-like interactions where pressing Enter should submit data (search boxes, chat input, command prompts, etc.).

- -
- -

Properties

- -

The properties of the Input Field Enter Submit control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Defocus InputWhen true, the InputField loses focus after submission. When false, the field retains focus for further input.
Enter Submit (event)Event invoked when Enter is pressed, passes the current input text as a string parameter.
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
OnEndEdittxt (string)Internal method called by InputField’s onEndEdit event. Checks for Enter key press and invokes EnterSubmit event.
- -
- -

Usage

- -

Add the Input Field Enter Submit component to the same GameObject as an InputField:

- -

“Add Component -> UI -> Extensions -> Input Field Submit”

- -

The component will automatically detect the InputField on the same GameObject.

- -

Basic Usage

- -
public InputFieldEnterSubmit inputField;
-
-void Start()
-{
-    // Listen for Enter key submission
-    inputField.EnterSubmit.AddListener(OnInputSubmitted);
-}
-
-void OnInputSubmitted(string input)
-{
-    Debug.Log("User submitted: " + input);
-}
-
- -

Search Box Example

- -
public InputFieldEnterSubmit searchField;
-public Text resultsText;
-
-void Start()
-{
-    searchField.defocusInput = true;  // Clear focus after search
-    searchField.EnterSubmit.AddListener(OnSearch);
-}
-
-void OnSearch(string query)
-{
-    // Perform search with the query
-    var results = SearchDatabase(query);
-    resultsText.text = "Found " + results.Count + " results";
-}
-
- -

Chat Input Example

- -
public InputFieldEnterSubmit chatInput;
-public ScrollRect messageScroll;
-
-void Start()
-{
-    chatInput.defocusInput = false;  // Keep focus for rapid typing
-    chatInput.EnterSubmit.AddListener(OnMessageSent);
-}
-
-void OnMessageSent(string message)
-{
-    // Send the message
-    SendChatMessage(message);
-    
-    // Clear for next message
-    chatInput.GetComponent<InputField>().text = "";
-}
-
- -

Command Prompt Example

- -
public InputFieldEnterSubmit commandInput;
-
-void Start()
-{
-    commandInput.EnterSubmit.AddListener(OnCommandEntered);
-}
-
-void OnCommandEntered(string command)
-{
-    // Parse and execute command
-    ExecuteCommand(command);
-}
-
-void ExecuteCommand(string command)
-{
-    string[] parts = command.Split(' ');
-    string action = parts[0];
-    
-    switch (action)
-    {
-        case "help":
-            Debug.Log("Available commands: help, load, save, exit");
-            break;
-        case "load":
-            LoadGame(parts.Length > 1 ? parts[1] : "");
-            break;
-        case "save":
-            SaveGame(parts.Length > 1 ? parts[1] : "");
-            break;
-    }
-}
-
- -

Controlling Defocus Behavior

- -
public InputFieldEnterSubmit inputField;
-private bool shouldFocusAfterSubmit;
-
-void Start()
-{
-    inputField.EnterSubmit.AddListener(OnSubmit);
-}
-
-void OnSubmit(string text)
-{
-    ProcessInput(text);
-    
-    // Optionally defocus based on some condition
-    if (shouldFocusAfterSubmit)
-    {
-        inputField.defocusInput = false;
-    }
-    else
-    {
-        inputField.defocusInput = true;
-    }
-}
-
- -

Using with Multiple InputFields

- -
public InputFieldEnterSubmit[] formFields;
-
-void Start()
-{
-    foreach (var field in formFields)
-    {
-        field.EnterSubmit.AddListener(OnFieldSubmitted);
-    }
-}
-
-void OnFieldSubmitted(string value)
-{
-    // Process submission - context comes from which field was submitted
-    Debug.Log("Field submitted: " + value);
-}
-
- -
- -

Video Demo

- -

Coming soon…

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Vicente Russo

- -
- - - -

Sourced from -Unity InputField Documentation

- -
- - - - - diff --git a/_site_test/Controls/InputFieldEnterSubmit.md b/_site_test/Controls/InputFieldEnterSubmit.md deleted file mode 100644 index b961414..0000000 --- a/_site_test/Controls/InputFieldEnterSubmit.md +++ /dev/null @@ -1,232 +0,0 @@ -# Input Field Enter Submit - -A simple utility component that automatically submits an InputField when the Enter key is pressed. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -InputFieldEnterSubmit is a lightweight utility component that extends the standard Unity InputField with automatic submission on Enter key press. When the Enter key is pressed (or Enter on the numeric keypad), the component: - -1. Triggers the `EnterSubmit` event with the current input text -2. Optionally defocuses the input field (clears selection) - -This is useful for creating form-like interactions where pressing Enter should submit data (search boxes, chat input, command prompts, etc.). - ---------- - -## Properties - -The properties of the Input Field Enter Submit control are as follows: - -Property | Description --|- -*Defocus Input*|When true, the InputField loses focus after submission. When false, the field retains focus for further input. -***Enter Submit*** (event)|Event invoked when Enter is pressed, passes the current input text as a string parameter. - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*OnEndEdit*|txt (string)|Internal method called by InputField's onEndEdit event. Checks for Enter key press and invokes EnterSubmit event. - ---------- - -## Usage - -Add the Input Field Enter Submit component to the same GameObject as an InputField: - -"Add Component -> UI -> Extensions -> Input Field Submit" - -The component will automatically detect the InputField on the same GameObject. - -### Basic Usage - -```csharp -public InputFieldEnterSubmit inputField; - -void Start() -{ - // Listen for Enter key submission - inputField.EnterSubmit.AddListener(OnInputSubmitted); -} - -void OnInputSubmitted(string input) -{ - Debug.Log("User submitted: " + input); -} -``` - -### Search Box Example - -```csharp -public InputFieldEnterSubmit searchField; -public Text resultsText; - -void Start() -{ - searchField.defocusInput = true; // Clear focus after search - searchField.EnterSubmit.AddListener(OnSearch); -} - -void OnSearch(string query) -{ - // Perform search with the query - var results = SearchDatabase(query); - resultsText.text = "Found " + results.Count + " results"; -} -``` - -### Chat Input Example - -```csharp -public InputFieldEnterSubmit chatInput; -public ScrollRect messageScroll; - -void Start() -{ - chatInput.defocusInput = false; // Keep focus for rapid typing - chatInput.EnterSubmit.AddListener(OnMessageSent); -} - -void OnMessageSent(string message) -{ - // Send the message - SendChatMessage(message); - - // Clear for next message - chatInput.GetComponent().text = ""; -} -``` - -### Command Prompt Example - -```csharp -public InputFieldEnterSubmit commandInput; - -void Start() -{ - commandInput.EnterSubmit.AddListener(OnCommandEntered); -} - -void OnCommandEntered(string command) -{ - // Parse and execute command - ExecuteCommand(command); -} - -void ExecuteCommand(string command) -{ - string[] parts = command.Split(' '); - string action = parts[0]; - - switch (action) - { - case "help": - Debug.Log("Available commands: help, load, save, exit"); - break; - case "load": - LoadGame(parts.Length > 1 ? parts[1] : ""); - break; - case "save": - SaveGame(parts.Length > 1 ? parts[1] : ""); - break; - } -} -``` - -### Controlling Defocus Behavior - -```csharp -public InputFieldEnterSubmit inputField; -private bool shouldFocusAfterSubmit; - -void Start() -{ - inputField.EnterSubmit.AddListener(OnSubmit); -} - -void OnSubmit(string text) -{ - ProcessInput(text); - - // Optionally defocus based on some condition - if (shouldFocusAfterSubmit) - { - inputField.defocusInput = false; - } - else - { - inputField.defocusInput = true; - } -} -``` - -### Using with Multiple InputFields - -```csharp -public InputFieldEnterSubmit[] formFields; - -void Start() -{ - foreach (var field in formFields) - { - field.EnterSubmit.AddListener(OnFieldSubmitted); - } -} - -void OnFieldSubmitted(string value) -{ - // Process submission - context comes from which field was submitted - Debug.Log("Field submitted: " + value); -} -``` - ---------- - -## Video Demo - -Coming soon... - ---------- - -## See also - -* [InputFocus](/Controls/InputFocus.md) -* [ReturnKeyTrigger](/Controls/ReturnKeyTrigger.md) -* [Stepper](/Controls/Stepper.md) - ---------- - -## Credits and Donation - -Vicente Russo - ---------- - -## External links - -[Sourced from](https://bitbucket.org/SimonDarksideJ/unity-ui-extensions/issues/23/returnkeytriggersbutton) -[Unity InputField Documentation](https://docs.unity3d.com/Manual/script-InputField.html) diff --git a/_site_test/Controls/InputFocus.html b/_site_test/Controls/InputFocus.html deleted file mode 100644 index 917167a..0000000 --- a/_site_test/Controls/InputFocus.html +++ /dev/null @@ -1,217 +0,0 @@ - - - - - -InputFocus — Unity UI Extensions - - - -InputFocus | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

InputFocus

- -

Enhanced InputField control for forms, enables Enter to submit and other features

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Enhanced InputField control for forms, enables Enter to submit and other features

- -
- -

Properties

- -

This control has no configurable properties in the inspector.

- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
buttonPressedN/ACall this method from a button’s onClick event to submit the input field
- -
- -

Usage

- -

Simply add the component to an existing InputField using:

- -

“Add Component -> UI -> Extensions -> InputFocus”

- -

Assign the component to an Input field, set the OnEndEdit function to the one in this script and the Click event for the submit button to the buttonPressed function.

- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Zelek

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/InputFocus.md b/_site_test/Controls/InputFocus.md deleted file mode 100644 index 4feb5d6..0000000 --- a/_site_test/Controls/InputFocus.md +++ /dev/null @@ -1,77 +0,0 @@ -# InputFocus - -Enhanced InputField control for forms, enables Enter to submit and other features - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Enhanced InputField control for forms, enables Enter to submit and other features - ---------- - -## Properties - -This control has no configurable properties in the inspector. - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*buttonPressed*|N/A|Call this method from a button's onClick event to submit the input field - ---------- - -## Usage - -Simply add the component to an existing InputField using: - -"*Add Component -> UI -> Extensions -> InputFocus*" - -Assign the component to an Input field, set the OnEndEdit function to the one in this script and the Click event for the submit button to the buttonPressed function. - -## Video Demo - -N/A - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -Zelek - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/inputfield-focus-and-unfocus.306634/) diff --git a/_site_test/Controls/MinMaxSlider.html b/_site_test/Controls/MinMaxSlider.html deleted file mode 100644 index fee8d83..0000000 --- a/_site_test/Controls/MinMaxSlider.html +++ /dev/null @@ -1,398 +0,0 @@ - - - - - -MinMaxSlider — Unity UI Extensions - - - -MinMaxSlider | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

MinMaxSlider

- -

A dual-handle slider control for selecting a range of values between minimum and maximum bounds, with optional TextMeshPro display and event callbacks.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The MinMaxSlider control provides a dual-handle slider for selecting a range within defined limits. Users can drag either handle independently to adjust the min/max values, or drag the middle area to move both handles together. It supports optional TextMeshPro text displays for showing current values and includes whole number mode for integer-only values.

- -
- -

Properties

- -

The properties of the MinMaxSlider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Custom CameraOptional camera to use for input detection. If not set, uses Camera.main
Slider BoundsRectTransform defining the bounds of the slider. Defaults to the component’s RectTransform if not set
Min HandleRectTransform for the minimum value handle
Max HandleRectTransform for the maximum value handle
Middle GraphicRectTransform for the visual element displayed between the two handles
Min TextOptional TextMeshProUGUI component to display the current minimum value
Max TextOptional TextMeshProUGUI component to display the current maximum value
Text FormatString format for displaying numeric values (default “0”). Use formats like “0.00” for decimals
Min LimitThe minimum possible value of the slider range (default 0)
Max LimitThe maximum possible value of the slider range (default 100)
Whole NumbersWhen enabled, slider values snap to whole numbers (integers only)
Min ValueThe current minimum value selected on the slider (default 25)
Max ValueThe current maximum value selected on the slider (default 75)
On Value Changed (event)Event invoked when either slider value changes. Passes min and max values as float parameters
- -

Additional properties available in code:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription 
 ValuesMinMaxValuesReturns a MinMaxValues struct containing minValue, maxValue, minLimit, and maxLimit
 SliderBoundsRectTransformGets or sets the slider bounds RectTransform
 MinHandleRectTransformGets or sets the minimum handle RectTransform
 MaxHandleRectTransformGets or sets the maximum handle RectTransform
 MiddleGraphicRectTransformGets or sets the middle graphic RectTransform
 MinTextTextMeshProUGUIGets or sets the minimum value text component
 MaxTextTextMeshProUGUIGets or sets the maximum value text component
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetLimitsfloat minLimit, float maxLimitSets the minimum and maximum limits for the slider range. Values are rounded if wholeNumbers is enabled
SetValues (overload 1)MinMaxValues values, bool notify = trueSets all slider values using a MinMaxValues struct. If notify is true, triggers the onValueChanged event
SetValues (overload 2)float minValue, float maxValue, bool notify = trueSets the current min/max values while keeping existing limits. If notify is true, triggers the onValueChanged event
SetValues (overload 3)float minValue, float maxValue, float minLimit, float maxLimit, bool notify = trueSets all slider values and limits. If notify is true, triggers the onValueChanged event
- -
- -

Usage

- -

To use the MinMaxSlider control:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> Sliders -> MinMax Slider”
    2. -
  2. Assign RectTransforms for Min Handle, Max Handle, and optionally Middle Graphic and Slider Bounds
    3. -
  3. Optionally assign TextMeshProUGUI components for Min Text and Max Text to display current values
    4. -
  4. Configure Min Limit, Max Limit, Min Value, and Max Value in the inspector
    5. -
  5. Subscribe to the OnValueChanged event to respond to slider changes
    6. -
- -

Example code for programmatic usage:

- -
using UnityEngine.UI.Extensions;
-
-public class MinMaxSliderExample : MonoBehaviour
-{
-    public MinMaxSlider slider;
-
-    void Start()
-    {
-        // Set slider limits to 0-1000
-        slider.SetLimits(0f, 1000f);
-        
-        // Set initial values to 200-800
-        slider.SetValues(200f, 800f);
-        
-        // Subscribe to value changes
-        slider.onValueChanged.AddListener(OnSliderValueChanged);
-    }
-    
-    void OnSliderValueChanged(float minValue, float maxValue)
-    {
-        Debug.Log($"Range selected: {minValue} to {maxValue}");
-    }
-    
-    void UpdateRange()
-    {
-        // Get current values
-        var values = slider.Values;
-        Debug.Log($"Current range: {values.minValue}-{values.maxValue} (limits: {values.minLimit}-{values.maxLimit})");
-    }
-}
-
- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: brogan89

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/MinMaxSlider.md b/_site_test/Controls/MinMaxSlider.md deleted file mode 100644 index 775b909..0000000 --- a/_site_test/Controls/MinMaxSlider.md +++ /dev/null @@ -1,148 +0,0 @@ -# MinMaxSlider - -A dual-handle slider control for selecting a range of values between minimum and maximum bounds, with optional TextMeshPro display and event callbacks. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The MinMaxSlider control provides a dual-handle slider for selecting a range within defined limits. Users can drag either handle independently to adjust the min/max values, or drag the middle area to move both handles together. It supports optional TextMeshPro text displays for showing current values and includes whole number mode for integer-only values. - ---------- - -## Properties - -The properties of the MinMaxSlider control are as follows: - -Property | Description --|- -*Custom Camera*|Optional camera to use for input detection. If not set, uses Camera.main -*Slider Bounds*|RectTransform defining the bounds of the slider. Defaults to the component's RectTransform if not set -*Min Handle*|RectTransform for the minimum value handle -*Max Handle*|RectTransform for the maximum value handle -*Middle Graphic*|RectTransform for the visual element displayed between the two handles -*Min Text*|Optional TextMeshProUGUI component to display the current minimum value -*Max Text*|Optional TextMeshProUGUI component to display the current maximum value -*Text Format*|String format for displaying numeric values (default "0"). Use formats like "0.00" for decimals -*Min Limit*|The minimum possible value of the slider range (default 0) -*Max Limit*|The maximum possible value of the slider range (default 100) -*Whole Numbers*|When enabled, slider values snap to whole numbers (integers only) -*Min Value*|The current minimum value selected on the slider (default 25) -*Max Value*|The current maximum value selected on the slider (default 75) -***On Value Changed*** (event)|Event invoked when either slider value changes. Passes min and max values as float parameters - -Additional properties available in code: - -Property | Return Type | Description --|-|- -|Values|MinMaxValues|Returns a MinMaxValues struct containing minValue, maxValue, minLimit, and maxLimit -|SliderBounds|RectTransform|Gets or sets the slider bounds RectTransform -|MinHandle|RectTransform|Gets or sets the minimum handle RectTransform -|MaxHandle|RectTransform|Gets or sets the maximum handle RectTransform -|MiddleGraphic|RectTransform|Gets or sets the middle graphic RectTransform -|MinText|TextMeshProUGUI|Gets or sets the minimum value text component -|MaxText|TextMeshProUGUI|Gets or sets the maximum value text component - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*SetLimits*|float minLimit, float maxLimit|Sets the minimum and maximum limits for the slider range. Values are rounded if wholeNumbers is enabled -*SetValues* (overload 1)|MinMaxValues values, bool notify = true|Sets all slider values using a MinMaxValues struct. If notify is true, triggers the onValueChanged event -*SetValues* (overload 2)|float minValue, float maxValue, bool notify = true|Sets the current min/max values while keeping existing limits. If notify is true, triggers the onValueChanged event -*SetValues* (overload 3)|float minValue, float maxValue, float minLimit, float maxLimit, bool notify = true|Sets all slider values and limits. If notify is true, triggers the onValueChanged event - ---------- - -## Usage - -To use the MinMaxSlider control: - -1. Add the component via "**Add Component -> UI -> Extensions -> Sliders -> MinMax Slider**" -2. Assign RectTransforms for Min Handle, Max Handle, and optionally Middle Graphic and Slider Bounds -3. Optionally assign TextMeshProUGUI components for Min Text and Max Text to display current values -4. Configure Min Limit, Max Limit, Min Value, and Max Value in the inspector -5. Subscribe to the OnValueChanged event to respond to slider changes - -Example code for programmatic usage: - -```csharp -using UnityEngine.UI.Extensions; - -public class MinMaxSliderExample : MonoBehaviour -{ - public MinMaxSlider slider; - - void Start() - { - // Set slider limits to 0-1000 - slider.SetLimits(0f, 1000f); - - // Set initial values to 200-800 - slider.SetValues(200f, 800f); - - // Subscribe to value changes - slider.onValueChanged.AddListener(OnSliderValueChanged); - } - - void OnSliderValueChanged(float minValue, float maxValue) - { - Debug.Log($"Range selected: {minValue} to {maxValue}"); - } - - void UpdateRange() - { - // Get current values - var values = slider.Values; - Debug.Log($"Current range: {values.minValue}-{values.maxValue} (limits: {values.minLimit}-{values.maxLimit})"); - } -} -``` - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [RangeSlider](RangeSlider.md) - Alternative range slider implementation -* [BoxSlider](BoxSlider.md) - Two-dimensional slider control -* [RadialSlider](RadialSlider.md) - Circular slider control - ---------- - -## Credits and Donation - -Credits: brogan89 - ---------- - -## External links - -[Sourced from](https://github.com/brogan89/MinMaxSlider) diff --git a/_site_test/Controls/MultiTouchScrollRect.html b/_site_test/Controls/MultiTouchScrollRect.html deleted file mode 100644 index 207ab8f..0000000 --- a/_site_test/Controls/MultiTouchScrollRect.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - - -MultiTouch Scroll Rect — Unity UI Extensions - - - -MultiTouch Scroll Rect | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

MultiTouch Scroll Rect

- -

Fixed version of the scroll rect to properly handle multiple touches

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Unity’s ScrollRect is behaving erratic when more than one touch is used for drag. It seems to be a bug with the UI system as it jumps between fingers (to moving one). This script fixes it by blocking event data based on touch id.

- -
- -

Properties

- -

No additional properties, inherits from the original ScrollRect

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply replace the original ScrollRect with the new MultiTouchScrollRect:

- -

“Add Component -> UI -> Extensions -> MultiTouchScrollRect”

- -
- -

Video Demo

- -

None, no change to Scroll Rect

- -
- -

See also

- -
- -

Credits and Donation

- -

Erdener Gonenc - @PixelEnvision

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/MultiTouchScrollRect.md b/_site_test/Controls/MultiTouchScrollRect.md deleted file mode 100644 index 9fb18ba..0000000 --- a/_site_test/Controls/MultiTouchScrollRect.md +++ /dev/null @@ -1,73 +0,0 @@ -# MultiTouch Scroll Rect - -Fixed version of the scroll rect to properly handle multiple touches - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Unity's ScrollRect is behaving erratic when more than one touch is used for drag. It seems to be a bug with the UI system as it jumps between fingers (to moving one). This script fixes it by blocking event data based on touch id. - ---------- - -## Properties - -No additional properties, inherits from the original ScrollRect - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Simply replace the original ScrollRect with the new MultiTouchScrollRect: - -"*Add Component -> UI -> Extensions -> MultiTouchScrollRect*" - ---------- - -## Video Demo - -None, no change to Scroll Rect - ---------- - -## See also - ---------- - -## Credits and Donation - -Erdener Gonenc - @PixelEnvision - ---------- - -## External links - -[Sourced from](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/3/scrollrectmultitouchfixcs) diff --git a/_site_test/Controls/NicerOutline.html b/_site_test/Controls/NicerOutline.html deleted file mode 100644 index 8721304..0000000 --- a/_site_test/Controls/NicerOutline.html +++ /dev/null @@ -1,244 +0,0 @@ - - - - - -Nicer Outline — Unity UI Extensions - - - -Nicer Outline | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Nicer Outline

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

An improved outline effect

- - - -
-

Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead.

-
- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Provides a simple way to add an outline to your UI component, be it an image or Text component

- -
- -

Properties

- -

The properties of the Nicer Outline component are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
StatusDeprecated and removed in Unity 6; no configurable properties remain
Recommended AlternativeUse TextMeshPro materials/shaders for outline effects in modern projects
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DeprecatedN/ARemoved in Unity 6; no public methods are available
- -
- -

Usage

- -

Add the effect to your object through the component menu using: -Add Component -> UI -> Effects -> Extensions -> Nicer Outline

- -
- -

Video Demo

- -

tbc

- -
- -

See also

- -

BestFitOutline

- -
- -

Credits and Donation

- -

Melang

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/NicerOutline.md b/_site_test/Controls/NicerOutline.md deleted file mode 100644 index 85a2f21..0000000 --- a/_site_test/Controls/NicerOutline.md +++ /dev/null @@ -1,86 +0,0 @@ -# Nicer Outline - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -An improved outline effect - - - -> Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Provides a simple way to add an outline to your UI component, be it an image or Text component - ---------- - -## Properties - -The properties of the Nicer Outline component are as follows: - -Property | Description --|- -*Status*|Deprecated and removed in Unity 6; no configurable properties remain -*Recommended Alternative*|Use TextMeshPro materials/shaders for outline effects in modern projects - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*Deprecated*|N/A|Removed in Unity 6; no public methods are available - ---------- - -## Usage - -Add the effect to your object through the component menu using: -Add Component -> UI -> Effects -> Extensions -> Nicer Outline - ---------- - -## Video Demo - -tbc - ---------- - -## See also - -[BestFitOutline](/Controls/BestFitOutline.md) - ---------- - -## Credits and Donation - -Melang - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/members/melang.593409/) diff --git a/_site_test/Controls/PPIViewer.html b/_site_test/Controls/PPIViewer.html deleted file mode 100644 index 91a60ec..0000000 --- a/_site_test/Controls/PPIViewer.html +++ /dev/null @@ -1,202 +0,0 @@ - - - - - -PPIViewer — Unity UI Extensions - - - -PPIViewer | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

PPIViewer

- -

Simple script to attach to a text component to display the current DPI/PPI

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Simple script to attach to a text component to display the current DPI/PPI

- -
- -

Properties

- -

This control has no configurable properties in the inspector.

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add this to a Text component through the Add Component menu as follows:

- -

“Add Component -> UI -> Extensions -> PPIViewer”

- -
- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

FireOApache

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/PPIViewer.md b/_site_test/Controls/PPIViewer.md deleted file mode 100644 index 04d051f..0000000 --- a/_site_test/Controls/PPIViewer.md +++ /dev/null @@ -1,75 +0,0 @@ -# PPIViewer - -Simple script to attach to a text component to display the current DPI/PPI - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Simple script to attach to a text component to display the current DPI/PPI - ---------- - -## Properties - -This control has no configurable properties in the inspector. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Simply add this to a Text component through the Add Component menu as follows: - -"Add Component -> UI -> Extensions -> PPIViewer" - ---------- - -## Video Demo - -N/A - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -FireOApache - ---------- - -## External links - -[Sourced from](http://answers.unity3d.com/questions/1149417/ui-button-onclick-sensitivity-for-high-dpi-devices.html#answer-1197307) diff --git a/_site_test/Controls/RaycastMask.html b/_site_test/Controls/RaycastMask.html deleted file mode 100644 index 9d53b89..0000000 --- a/_site_test/Controls/RaycastMask.html +++ /dev/null @@ -1,223 +0,0 @@ - - - - - -RaycastMask — Unity UI Extensions - - - -RaycastMask | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

RaycastMask

- -

An example of an enhanced mask component able to work with the image data. Enables picking on image parts and not just the Rect Transform

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

An example of an enhanced mask component able to work with the image data. Enables picking on image parts and not just the Rect Transform

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Alpha ThresholdMinimum alpha value required for a point to register as a hit.
GraphicGraphic source used for sampling pixels.
Raycast TargetToggle whether this graphic blocks raycasts.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add the effect to your object through the component menu using:

- -

“Add Component -> UI -> Extensions -> Raycast Mask”

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs”

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

senritsu

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/RaycastMask.md b/_site_test/Controls/RaycastMask.md deleted file mode 100644 index 9a35ca9..0000000 --- a/_site_test/Controls/RaycastMask.md +++ /dev/null @@ -1,79 +0,0 @@ -# RaycastMask - -An example of an enhanced mask component able to work with the image data. Enables picking on image parts and not just the Rect Transform - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -An example of an enhanced mask component able to work with the image data. Enables picking on image parts and not just the Rect Transform - ---------- - -## Properties - -Property | Description --|- -*Alpha Threshold*|Minimum alpha value required for a point to register as a hit. -*Graphic*|Graphic source used for sampling pixels. -*Raycast Target*|Toggle whether this graphic blocks raycasts. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Add the effect to your object through the component menu using: - -"*Add Component -> UI -> Extensions -> Raycast Mask*" - ---------- - -## Video Demo - -"Link to demo video or animated Gifs" - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -senritsu - ---------- - -## External links - -[Sourced from](https://github.com/senritsu/unitility/blob/master/Assets/Unitility/GUI/RaycastMask.cs) diff --git a/_site_test/Controls/RescaleDragPanel.html b/_site_test/Controls/RescaleDragPanel.html deleted file mode 100644 index bb63079..0000000 --- a/_site_test/Controls/RescaleDragPanel.html +++ /dev/null @@ -1,244 +0,0 @@ - - - - - -RescaleDragPanel — Unity UI Extensions - - - -RescaleDragPanel | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

RescaleDragPanel

- -

A control that enables dragging a rescaled panel to reposition it within a canvas, compensating for the panel’s local scale during movement.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The RescaleDragPanel control allows users to drag and reposition a panel that may have been rescaled. It automatically accounts for the parent’s local scale when calculating drag offsets, ensuring accurate positioning. The panel is constrained to remain within the canvas boundaries during dragging.

- -
- -

Properties

- -

The RescaleDragPanel control has no serialized properties exposed in the inspector. All functionality is handled internally through automatic canvas and parent detection.

- -
- -

Methods

- -

The RescaleDragPanel control implements Unity’s IPointerDownHandler and IDragHandler interfaces but does not expose additional public methods.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
OnPointerDownPointerEventDataHandles pointer down events to bring panel to front and calculate initial pointer offset
OnDragPointerEventDataHandles drag events to reposition the panel, accounting for local scale and clamping to canvas bounds
ClampToWindowPointerEventDataInternal method that clamps the pointer position to canvas boundaries
- -
- -

Usage

- -

To use the RescaleDragPanel control:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> RescalePanels -> RescaleDragPanel”
    2. -
  2. Attach the component to a child GameObject of the panel you want to make draggable
    3. -
  3. The parent RectTransform and parent Canvas will be automatically detected
    4. -
  4. Drag the handle to move the panel; it will automatically stay within canvas bounds
    5. -
  5. The control compensates for any local scale applied to the parent, ensuring accurate drag behavior
    6. -
- -

This control works best when combined with RescalePanel to provide both rescaling and repositioning functionality.

- -

Example setup:

- -
// Typically no code configuration needed - add component and it works automatically
-// The control self-configures in Awake() by detecting the parent Canvas and RectTransform
-
- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: .entity

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/RescaleDragPanel.md b/_site_test/Controls/RescaleDragPanel.md deleted file mode 100644 index 509cec3..0000000 --- a/_site_test/Controls/RescaleDragPanel.md +++ /dev/null @@ -1,93 +0,0 @@ -# RescaleDragPanel - -A control that enables dragging a rescaled panel to reposition it within a canvas, compensating for the panel's local scale during movement. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The RescaleDragPanel control allows users to drag and reposition a panel that may have been rescaled. It automatically accounts for the parent's local scale when calculating drag offsets, ensuring accurate positioning. The panel is constrained to remain within the canvas boundaries during dragging. - ---------- - -## Properties - -The RescaleDragPanel control has no serialized properties exposed in the inspector. All functionality is handled internally through automatic canvas and parent detection. - ---------- - -## Methods - -The RescaleDragPanel control implements Unity's IPointerDownHandler and IDragHandler interfaces but does not expose additional public methods. - -Method | Arguments | Description --|-|- -*OnPointerDown*|PointerEventData|Handles pointer down events to bring panel to front and calculate initial pointer offset -*OnDrag*|PointerEventData|Handles drag events to reposition the panel, accounting for local scale and clamping to canvas bounds -*ClampToWindow*|PointerEventData|Internal method that clamps the pointer position to canvas boundaries - ---------- - -## Usage - -To use the RescaleDragPanel control: - -1. Add the component via "**Add Component -> UI -> Extensions -> RescalePanels -> RescaleDragPanel**" -2. Attach the component to a child GameObject of the panel you want to make draggable -3. The parent RectTransform and parent Canvas will be automatically detected -4. Drag the handle to move the panel; it will automatically stay within canvas bounds -5. The control compensates for any local scale applied to the parent, ensuring accurate drag behavior - -This control works best when combined with RescalePanel to provide both rescaling and repositioning functionality. - -Example setup: - -```csharp -// Typically no code configuration needed - add component and it works automatically -// The control self-configures in Awake() by detecting the parent Canvas and RectTransform -``` - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [ResizePanel](ResizePanel.md) - Resizes a panel by changing sizeDelta -* [RescalePanel](RescalePanel.md) - Rescales a panel using local scale - ---------- - -## Credits and Donation - -Credits: .entity - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/rescale-panel.309226/) diff --git a/_site_test/Controls/RescalePanel.html b/_site_test/Controls/RescalePanel.html deleted file mode 100644 index f5ca5d3..0000000 --- a/_site_test/Controls/RescalePanel.html +++ /dev/null @@ -1,256 +0,0 @@ - - - - - -RescalePanel — Unity UI Extensions - - - -RescalePanel | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

RescalePanel

- -

A control that rescales a parent panel by dragging a handle, adjusting the local scale while keeping the UI element size consistent.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The RescalePanel control allows users to rescale a parent panel by dragging a handle. Unlike ResizePanel, this control modifies the parent’s local scale rather than its size delta, and automatically adjusts the handle’s size delta to maintain visual consistency during scaling.

- -
- -

Properties

- -

The properties of the RescalePanel control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Min SizeMinimum scale constraint for the panel (Vector2). Defines the minimum local scale values for X and Y axes
Max SizeMaximum scale constraint for the panel (Vector2). Defines the maximum local scale values for X and Y axes
- -
- -

Methods

- -

The RescalePanel control implements Unity’s IPointerDownHandler and IDragHandler interfaces but does not expose additional public methods.

- - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
OnPointerDownPointerEventDataHandles pointer down events to bring panel to front and record starting position
OnDragPointerEventDataHandles drag events to rescale the parent panel by adjusting local scale and compensating handle size
- -
- -

Usage

- -

To use the RescalePanel control:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> RescalePanels -> RescalePanel”
    2. -
  2. Attach the component to a child GameObject of the panel you want to rescale
    3. -
  3. The parent Transform will be automatically detected and become rescalable via local scale
    4. -
  4. Configure min/max size constraints in the inspector to limit scaling range
    5. -
- -

Example code for setting scale constraints:

- -
var rescalePanel = rescaleHandle.GetComponent<RescalePanel>();
-rescalePanel.minSize = new Vector2(0.5f, 0.5f);  // Minimum 50% scale
-rescalePanel.maxSize = new Vector2(3.0f, 3.0f);  // Maximum 300% scale
-
- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: .entity

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/RescalePanel.md b/_site_test/Controls/RescalePanel.md deleted file mode 100644 index 1fcbc13..0000000 --- a/_site_test/Controls/RescalePanel.md +++ /dev/null @@ -1,95 +0,0 @@ -# RescalePanel - -A control that rescales a parent panel by dragging a handle, adjusting the local scale while keeping the UI element size consistent. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The RescalePanel control allows users to rescale a parent panel by dragging a handle. Unlike ResizePanel, this control modifies the parent's local scale rather than its size delta, and automatically adjusts the handle's size delta to maintain visual consistency during scaling. - ---------- - -## Properties - -The properties of the RescalePanel control are as follows: - -Property | Description --|- -*Min Size*|Minimum scale constraint for the panel (Vector2). Defines the minimum local scale values for X and Y axes -*Max Size*|Maximum scale constraint for the panel (Vector2). Defines the maximum local scale values for X and Y axes - ---------- - -## Methods - -The RescalePanel control implements Unity's IPointerDownHandler and IDragHandler interfaces but does not expose additional public methods. - -Method | Arguments | Description --|-|- -*OnPointerDown*|PointerEventData|Handles pointer down events to bring panel to front and record starting position -*OnDrag*|PointerEventData|Handles drag events to rescale the parent panel by adjusting local scale and compensating handle size - ---------- - -## Usage - -To use the RescalePanel control: - -1. Add the component via "**Add Component -> UI -> Extensions -> RescalePanels -> RescalePanel**" -2. Attach the component to a child GameObject of the panel you want to rescale -3. The parent Transform will be automatically detected and become rescalable via local scale -4. Configure min/max size constraints in the inspector to limit scaling range - -Example code for setting scale constraints: - -```csharp -var rescalePanel = rescaleHandle.GetComponent(); -rescalePanel.minSize = new Vector2(0.5f, 0.5f); // Minimum 50% scale -rescalePanel.maxSize = new Vector2(3.0f, 3.0f); // Maximum 300% scale -``` - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [ResizePanel](ResizePanel.md) - Resizes a panel by changing sizeDelta -* [RescaleDragPanel](RescaleDragPanel.md) - Combines rescaling with drag-to-move functionality - ---------- - -## Credits and Donation - -Credits: .entity - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/rescale-panel.309226/) diff --git a/_site_test/Controls/ResizePanel.html b/_site_test/Controls/ResizePanel.html deleted file mode 100644 index 9da1dc0..0000000 --- a/_site_test/Controls/ResizePanel.html +++ /dev/null @@ -1,256 +0,0 @@ - - - - - -ResizePanel — Unity UI Extensions - - - -ResizePanel | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

ResizePanel

- -

A control that allows resizing of a parent panel by dragging a handle, maintaining aspect ratio and respecting min/max size constraints.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The ResizePanel control enables users to resize a parent panel by dragging a handle component. It automatically maintains the original aspect ratio and constrains resizing within specified minimum and maximum bounds (calculated as 10% to 1000% of the original size).

- -
- -

Properties

- -

The properties of the ResizePanel control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Min SizeMinimum size constraint for the panel (Vector2). Automatically set to 10% of original dimensions in Awake()
Max SizeMaximum size constraint for the panel (Vector2). Automatically set to 1000% of original dimensions in Awake()
- -
- -

Methods

- -

The ResizePanel control implements Unity’s IPointerDownHandler and IDragHandler interfaces but does not expose additional public methods.

- - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
OnPointerDownPointerEventDataHandles pointer down events to bring panel to front and record starting position
OnDragPointerEventDataHandles drag events to resize the parent panel while maintaining aspect ratio
- -
- -

Usage

- -

To use the ResizePanel control:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> RescalePanels -> ResizePanel”
    2. -
  2. Attach the component to a child GameObject of the panel you want to resize
    3. -
  3. The parent RectTransform will be automatically detected and become resizable
    4. -
  4. Min/Max size constraints are automatically calculated on Awake() as 10% and 1000% of the original panel size
    5. -
- -

Example code for manual configuration:

- -
var resizePanel = resizeHandle.GetComponent<ResizePanel>();
-resizePanel.minSize = new Vector2(100, 100);
-resizePanel.maxSize = new Vector2(1000, 1000);
-
- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: .entity

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/ResizePanel.md b/_site_test/Controls/ResizePanel.md deleted file mode 100644 index d036d64..0000000 --- a/_site_test/Controls/ResizePanel.md +++ /dev/null @@ -1,95 +0,0 @@ -# ResizePanel - -A control that allows resizing of a parent panel by dragging a handle, maintaining aspect ratio and respecting min/max size constraints. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The ResizePanel control enables users to resize a parent panel by dragging a handle component. It automatically maintains the original aspect ratio and constrains resizing within specified minimum and maximum bounds (calculated as 10% to 1000% of the original size). - ---------- - -## Properties - -The properties of the ResizePanel control are as follows: - -Property | Description --|- -*Min Size*|Minimum size constraint for the panel (Vector2). Automatically set to 10% of original dimensions in Awake() -*Max Size*|Maximum size constraint for the panel (Vector2). Automatically set to 1000% of original dimensions in Awake() - ---------- - -## Methods - -The ResizePanel control implements Unity's IPointerDownHandler and IDragHandler interfaces but does not expose additional public methods. - -Method | Arguments | Description --|-|- -*OnPointerDown*|PointerEventData|Handles pointer down events to bring panel to front and record starting position -*OnDrag*|PointerEventData|Handles drag events to resize the parent panel while maintaining aspect ratio - ---------- - -## Usage - -To use the ResizePanel control: - -1. Add the component via "**Add Component -> UI -> Extensions -> RescalePanels -> ResizePanel**" -2. Attach the component to a child GameObject of the panel you want to resize -3. The parent RectTransform will be automatically detected and become resizable -4. Min/Max size constraints are automatically calculated on Awake() as 10% and 1000% of the original panel size - -Example code for manual configuration: - -```csharp -var resizePanel = resizeHandle.GetComponent(); -resizePanel.minSize = new Vector2(100, 100); -resizePanel.maxSize = new Vector2(1000, 1000); -``` - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [RescalePanel](RescalePanel.md) - Rescales a panel using local scale -* [RescaleDragPanel](RescaleDragPanel.md) - Combines rescaling with drag-to-move functionality - ---------- - -## Credits and Donation - -Credits: .entity - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/rescale-panel.309226/) diff --git a/_site_test/Controls/ReturnKeyTrigger.html b/_site_test/Controls/ReturnKeyTrigger.html deleted file mode 100644 index 074cc24..0000000 --- a/_site_test/Controls/ReturnKeyTrigger.html +++ /dev/null @@ -1,234 +0,0 @@ - - - - - -ReturnKeyTrigger — Unity UI Extensions - - - -ReturnKeyTrigger | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

ReturnKeyTrigger

- -

Enables you to bind the return key within an InputField control to a button, also supports toggling the highlight of a control or field.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

If you want to enable a user to use the Return key on finishing entering in a field, the same as a web style control or Submit, this will enabling binding that action to a UI button (aka submit button). -It also allows you to hind to a Highlight effect on the field (e.g. a red highlight for mandatory fields) which will enable/disable based on the submit action.

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Input FieldInputField listened to for Return key.
Target ButtonButton invoked when Return is pressed.
Highlight TargetOptional GameObject toggled to show validation state.
Trigger Only When Input ValidIf enabled, only submits when InputField has text.
On Submit (event)Event fired when Return key triggers submission.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Either add the “ReturnKeyTrigger” component to an existing UI InputField control, or create an Empty GameObject and add the “ReturnKeyTrigger” component using:

- -

“Add Component -> UI -> Extensions -> Return Key Trigger”

- -

This will automatically add an Input field if none is present.

- -
- -

Video Demo

- -

tbc

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Melang

- -
- - - -

N/A

- -
- - - - - diff --git a/_site_test/Controls/ReturnKeyTrigger.md b/_site_test/Controls/ReturnKeyTrigger.md deleted file mode 100644 index 0174a34..0000000 --- a/_site_test/Controls/ReturnKeyTrigger.md +++ /dev/null @@ -1,84 +0,0 @@ -# ReturnKeyTrigger - -Enables you to bind the return key within an InputField control to a button, also supports toggling the highlight of a control or field. - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -If you want to enable a user to use the Return key on finishing entering in a field, the same as a web style control or Submit, this will enabling binding that action to a UI button (aka submit button). -It also allows you to hind to a Highlight effect on the field (e.g. a red highlight for mandatory fields) which will enable/disable based on the submit action. - ---------- - -## Properties - -Property | Description --|- -*Input Field*|InputField listened to for Return key. -*Target Button*|Button invoked when Return is pressed. -*Highlight Target*|Optional GameObject toggled to show validation state. -*Trigger Only When Input Valid*|If enabled, only submits when InputField has text. -***On Submit*** (event)|Event fired when Return key triggers submission. - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Either add the "ReturnKeyTrigger" component to an existing UI InputField control, or create an Empty GameObject and add the "ReturnKeyTrigger" component using: - -"Add Component -> UI -> Extensions -> Return Key Trigger" - -This will automatically add an Input field if none is present. - ---------- - -## Video Demo - -tbc - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -Melang - ---------- - -## External links - -N/A diff --git a/_site_test/Controls/Scroller.html b/_site_test/Controls/Scroller.html deleted file mode 100644 index 4638f28..0000000 --- a/_site_test/Controls/Scroller.html +++ /dev/null @@ -1,256 +0,0 @@ - - - - - -Scroller — Unity UI Extensions - - - -Scroller | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Scroller

- -

A component of the FancyScrollView system for advanced scrolling implementations.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Scroller component is part of the FancyScrollView system and handles the scrolling behavior for advanced scrolling implementations. It provides smooth scrolling with inertia and customizable behavior.

- -
- -

Properties

- -

The properties of the Scroller control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
ViewportThe RectTransform of the scrollable viewport
Direction AxisThe axis of scrolling (Horizontal or Vertical)
Movement TypeHow the scroller behaves (Unrestricted, Elastic, Clamped)
ElasticityThe elasticity factor when using elastic movement type
Scroll SensitivitySensitivity of the scrolling input
InertiaWhether to use inertia for smooth deceleration
Deceleration RateRate at which scrolling decelerates (only used when inertia is enabled)
SnapWhether to snap to nearest item when scrolling stops
Snap DurationDuration of the snap animation
Snap EasingEasing function used for snap animation
- -
- -

Methods

- -

The Scroller provides programmatic control through code (no public methods exposed directly).

- -
- -

Usage

- -

The Scroller component is typically used as part of the FancyScrollView system and is not meant to be used standalone. See the FancyScrollView documentation for complete implementation details.

- -

For implementation examples, refer to the FancyScrollView samples in the Examples~ folder.

- -
- -

Video Demo

- -

See FancyScrollView documentation for demo videos.

- -
- -

See also

- - - -
- -

Credits and Donation

- -

setchi

- -
- - - -

Sourced from

- - -
- - - - - diff --git a/_site_test/Controls/Scroller.md b/_site_test/Controls/Scroller.md deleted file mode 100644 index 6e8dc60..0000000 --- a/_site_test/Controls/Scroller.md +++ /dev/null @@ -1,89 +0,0 @@ -# Scroller - -A component of the FancyScrollView system for advanced scrolling implementations. - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The Scroller component is part of the FancyScrollView system and handles the scrolling behavior for advanced scrolling implementations. It provides smooth scrolling with inertia and customizable behavior. - ---------- - -## Properties - -The properties of the Scroller control are as follows: - -Property | Description --|- -*Viewport*|The RectTransform of the scrollable viewport -*Direction Axis*|The axis of scrolling (Horizontal or Vertical) -*Movement Type*|How the scroller behaves (Unrestricted, Elastic, Clamped) -*Elasticity*|The elasticity factor when using elastic movement type -*Scroll Sensitivity*|Sensitivity of the scrolling input -*Inertia*|Whether to use inertia for smooth deceleration -*Deceleration Rate*|Rate at which scrolling decelerates (only used when inertia is enabled) -*Snap*|Whether to snap to nearest item when scrolling stops -*Snap Duration*|Duration of the snap animation -*Snap Easing*|Easing function used for snap animation - ---------- - -## Methods - -The Scroller provides programmatic control through code (no public methods exposed directly). - ---------- - -## Usage - -The Scroller component is typically used as part of the FancyScrollView system and is not meant to be used standalone. See the FancyScrollView documentation for complete implementation details. - -For implementation examples, refer to the FancyScrollView samples in the Examples~ folder. - ---------- - -## Video Demo - -See FancyScrollView documentation for demo videos. - ---------- - -## See also - -* [FancyScrollView](/Controls/FancyScrollView.md) - ---------- - -## Credits and Donation - -setchi - ---------- - -## External links - -[Sourced from](https://github.com/setchi/FancyScrollView) - diff --git a/_site_test/Controls/Serialization.html b/_site_test/Controls/Serialization.html deleted file mode 100644 index e5edf6f..0000000 --- a/_site_test/Controls/Serialization.html +++ /dev/null @@ -1,208 +0,0 @@ - - - - - -Serialization — Unity UI Extensions - - - -Serialization | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Serialization

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

Serialization utilities for UI components.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Serialization utilities for UI components. This component has been removed in Unity 6.

- -
- -

Properties

- -

This component has been deprecated and removed.

- -
- -

Methods

- -

This component has been deprecated and removed.

- -
- -

Usage

- -

This component has been deprecated for Unity 6. Use Unity’s JsonUtility or other modern serialization solutions instead.

- -
- -

Video Demo

- -

N/A - Component deprecated

- -
- -

See also

- - - -
- -

Credits and Donation

- -

N/A

- -
- - - -

N/A

- - -
- - - - - diff --git a/_site_test/Controls/Serialization.md b/_site_test/Controls/Serialization.md deleted file mode 100644 index c07d0e2..0000000 --- a/_site_test/Controls/Serialization.md +++ /dev/null @@ -1,77 +0,0 @@ -# Serialization - -> [!IMPORTANT] -> ⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference. - -Serialization utilities for UI components. - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -Serialization utilities for UI components. This component has been removed in Unity 6. - ---------- - -## Properties - -This component has been deprecated and removed. - ---------- - -## Methods - -This component has been deprecated and removed. - ---------- - -## Usage - -This component has been deprecated for Unity 6. Use Unity's JsonUtility or other modern serialization solutions instead. - ---------- - -## Video Demo - -N/A - Component deprecated - ---------- - -## See also - -* [Unity JsonUtility](https://docs.unity3d.com/ScriptReference/JsonUtility.html) - ---------- - -## Credits and Donation - -N/A - ---------- - -## External links - -N/A - diff --git a/_site_test/Controls/ShaderEffects.html b/_site_test/Controls/ShaderEffects.html deleted file mode 100644 index d910abf..0000000 --- a/_site_test/Controls/ShaderEffects.html +++ /dev/null @@ -1,379 +0,0 @@ - - - - - -Shader Effects Suite — Unity UI Extensions - - - -Shader Effects Suite | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Shader Effects Suite

- -

A collection of shader-based effects that apply different blending modes to UI elements, including additive, multiply, screen, and shine effects.

- -
- -

Contents

- -
-

1 Overview

- -

2 Effects

- -

3 Properties

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Shader Effects Suite provides a collection of shader-based visual effects for UI elements. Each effect applies a different blending mode to create various visual styles. These effects automatically apply the appropriate shader material to the target graphic component.

- -

All shader effects in this suite share a common implementation pattern: they detect the attached graphic component and apply a specialized shader material that implements the desired blending behavior.

- -
- -

Effects

- -

UIAdditiveEffect

- -

Menu Path: UI/Effects/Extensions/UIAdditiveEffect

- -

Applies additive blending to UI elements. This effect adds the pixel colors together, resulting in a brightening effect. Useful for glow, light, and highlight effects.

- -

Use Cases:

-
    -
  • Glow effects
    • -
  • Light overlays
    • -
  • Bright highlights
    • -
  • Additive particle effects in UI
    • -
- -

UISoftAdditiveEffect

- -

Menu Path: UI/Effects/Extensions/UISoftAdditiveEffect

- -

Applies soft additive blending to UI elements. Similar to additive blending but with reduced intensity, resulting in a gentler brightening effect.

- -

Use Cases:

-
    -
  • Softer glow effects
    • -
  • Subtle light overlays
    • -
  • Gentle highlights
    • -
  • Semi-transparent light effects
    • -
- -

UIMultiplyEffect

- -

Menu Path: UI/Effects/Extensions/UIMultiplyEffect

- -

Applies multiply blending to UI elements. This effect darkens by multiplying pixel colors, resulting in a darkening effect. Useful for shadows and darkening overlays.

- -

Use Cases:

-
    -
  • Shadow effects
    • -
  • Darkening overlays
    • -
  • Dimming effects
    • -
  • Dark highlights
    • -
- -

UILinearDodgeEffect

- -

Menu Path: UI/Effects/Extensions/UILinearDodgeEffect

- -

Applies linear dodge (additive) blending to UI elements. Similar to additive blending with slightly different color mathematics.

- -

Use Cases:

-
    -
  • Bright light effects
    • -
  • Intense glows
    • -
  • Light trails
    • -
  • Energy effects
    • -
- -

UIScreenEffect

- -

Menu Path: UI/Effects/Extensions/UIScreenEffect

- -

Applies screen blending to UI elements. This effect inverts and multiplies pixel colors, resulting in a lightening effect that’s gentler than additive blending.

- -

Use Cases:

-
    -
  • Screen overlays
    • -
  • Vignette effects
    • -
  • Light blending
    • -
  • Composite lighting
    • -
- -

ShineEffector

- -

Menu Path: UI/Effects/Extensions/Shining Effect

- -

Creates a moving shine/gloss effect across UI elements. Renders an animated gradient that slides across the target graphic to simulate a glossy or polished surface.

- -

Use Cases:

-
    -
  • Glossy button effects
    • -
  • Shine animations
    • -
  • Polished surface effects
    • -
  • Attention-drawing animations
    • -
- -

Properties:

-
    -
  • Y Offset (Range: -1 to 1): Vertical position of the shine effect
    • -
  • Width (Range: 0.1 to 1): Width of the shine gradient
    • -
- -
- -

Properties

- -

All shader effects (except ShineEffector) share these properties:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Graphic ComponentThe target Graphic component (Image, RawImage, Text) that the effect will be applied to. Automatically detected on the same GameObject.
MaterialThe shader material applied to the graphic. Automatically created using the appropriate shader for the effect type.
- -

ShineEffector-specific properties:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Y OffsetControls the vertical position of the shine effect. Range from -1 (top) to 1 (bottom).
WidthControls the width/thickness of the shine effect. Range from 0.1 (thin) to 1 (wide).
- -
- -

Usage

- -

Basic Effect Application

- -

Simply add the desired effect to a GameObject with a Graphic component (Image, RawImage, or Text):

- -
// In editor: Add Component -> UI/Effects/Extensions -> [EffectName]
-// Or in code:
-var image = GetComponent<Image>();
-image.gameObject.AddComponent<UIAdditiveEffect>();
-
- -

The effect will automatically apply its shader material to the graphic component.

- -

Using Additive Effects

- -
public Image glowImage;
-
-void Start()
-{
-    // Add additive effect to create a glow
-    glowImage.gameObject.AddComponent<UIAdditiveEffect>();
-}
-
- -

Using ShineEffector

- -
public ShineEffector shineEffect;
-
-void Update()
-{
-    // Animate the shine effect
-    shineEffect.YOffset = Mathf.Sin(Time.time) * 0.5f;
-}
-
- -

Combining Multiple Effects

- -

Multiple effects can be combined for complex visual results:

- -
var image = GetComponent<Image>();
-
-// Add multiple effects
-image.gameObject.AddComponent<UIMultiplyEffect>();
-image.gameObject.AddComponent<UIAdditiveEffect>();
-
- -

Note: When combining effects, be aware that the order and interaction of blending modes will affect the final result.

- -
- -

Video Demo

- -

Coming soon…

- -
- -

See also

- - - -
- -

Credits and Donation

- -

00christian00, ömer faruk sayılır

- -
- - - -

UIAdditiveEffect Sourced from -ShineEffector Sourced from

- -
- - - - - diff --git a/_site_test/Controls/ShaderEffects.md b/_site_test/Controls/ShaderEffects.md deleted file mode 100644 index 2bd1278..0000000 --- a/_site_test/Controls/ShaderEffects.md +++ /dev/null @@ -1,212 +0,0 @@ -# Shader Effects Suite - -A collection of shader-based effects that apply different blending modes to UI elements, including additive, multiply, screen, and shine effects. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Effects](#effects) -> -> 3 [Properties](#properties) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The Shader Effects Suite provides a collection of shader-based visual effects for UI elements. Each effect applies a different blending mode to create various visual styles. These effects automatically apply the appropriate shader material to the target graphic component. - -All shader effects in this suite share a common implementation pattern: they detect the attached graphic component and apply a specialized shader material that implements the desired blending behavior. - ---------- - -## Effects - -### UIAdditiveEffect - -**Menu Path:** `UI/Effects/Extensions/UIAdditiveEffect` - -Applies additive blending to UI elements. This effect adds the pixel colors together, resulting in a brightening effect. Useful for glow, light, and highlight effects. - -**Use Cases:** -- Glow effects -- Light overlays -- Bright highlights -- Additive particle effects in UI - -### UISoftAdditiveEffect - -**Menu Path:** `UI/Effects/Extensions/UISoftAdditiveEffect` - -Applies soft additive blending to UI elements. Similar to additive blending but with reduced intensity, resulting in a gentler brightening effect. - -**Use Cases:** -- Softer glow effects -- Subtle light overlays -- Gentle highlights -- Semi-transparent light effects - -### UIMultiplyEffect - -**Menu Path:** `UI/Effects/Extensions/UIMultiplyEffect` - -Applies multiply blending to UI elements. This effect darkens by multiplying pixel colors, resulting in a darkening effect. Useful for shadows and darkening overlays. - -**Use Cases:** -- Shadow effects -- Darkening overlays -- Dimming effects -- Dark highlights - -### UILinearDodgeEffect - -**Menu Path:** `UI/Effects/Extensions/UILinearDodgeEffect` - -Applies linear dodge (additive) blending to UI elements. Similar to additive blending with slightly different color mathematics. - -**Use Cases:** -- Bright light effects -- Intense glows -- Light trails -- Energy effects - -### UIScreenEffect - -**Menu Path:** `UI/Effects/Extensions/UIScreenEffect` - -Applies screen blending to UI elements. This effect inverts and multiplies pixel colors, resulting in a lightening effect that's gentler than additive blending. - -**Use Cases:** -- Screen overlays -- Vignette effects -- Light blending -- Composite lighting - -### ShineEffector - -**Menu Path:** `UI/Effects/Extensions/Shining Effect` - -Creates a moving shine/gloss effect across UI elements. Renders an animated gradient that slides across the target graphic to simulate a glossy or polished surface. - -**Use Cases:** -- Glossy button effects -- Shine animations -- Polished surface effects -- Attention-drawing animations - -**Properties:** -- *Y Offset* (Range: -1 to 1): Vertical position of the shine effect -- *Width* (Range: 0.1 to 1): Width of the shine gradient - ---------- - -## Properties - -All shader effects (except ShineEffector) share these properties: - -Property | Description --|- -*Graphic Component*|The target Graphic component (Image, RawImage, Text) that the effect will be applied to. Automatically detected on the same GameObject. -*Material*|The shader material applied to the graphic. Automatically created using the appropriate shader for the effect type. - -ShineEffector-specific properties: - -Property | Description --|- -*Y Offset*|Controls the vertical position of the shine effect. Range from -1 (top) to 1 (bottom). -*Width*|Controls the width/thickness of the shine effect. Range from 0.1 (thin) to 1 (wide). - ---------- - -## Usage - -### Basic Effect Application - -Simply add the desired effect to a GameObject with a Graphic component (Image, RawImage, or Text): - -```csharp -// In editor: Add Component -> UI/Effects/Extensions -> [EffectName] -// Or in code: -var image = GetComponent(); -image.gameObject.AddComponent(); -``` - -The effect will automatically apply its shader material to the graphic component. - -### Using Additive Effects - -```csharp -public Image glowImage; - -void Start() -{ - // Add additive effect to create a glow - glowImage.gameObject.AddComponent(); -} -``` - -### Using ShineEffector - -```csharp -public ShineEffector shineEffect; - -void Update() -{ - // Animate the shine effect - shineEffect.YOffset = Mathf.Sin(Time.time) * 0.5f; -} -``` - -### Combining Multiple Effects - -Multiple effects can be combined for complex visual results: - -```csharp -var image = GetComponent(); - -// Add multiple effects -image.gameObject.AddComponent(); -image.gameObject.AddComponent(); -``` - -Note: When combining effects, be aware that the order and interaction of blending modes will affect the final result. - ---------- - -## Video Demo - -Coming soon... - ---------- - -## See also - -* [NonDrawingGraphic](/Controls/NonDrawingGraphic.md) -* [UIImageCrop](/Controls/UIImageCrop.md) -* [UIHighlightable](/Controls/UIHighlightable.md) -* [RaycastMask](/Controls/RaycastMask.md) - ---------- - -## Credits and Donation - -00christian00, ömer faruk sayılır - ---------- - -## External links - -[UIAdditiveEffect Sourced from](http://forum.unity3d.com/threads/any-way-to-show-part-of-an-image-without-using-mask.360085/#post-2332030) -[ShineEffector Sourced from](https://bitbucket.org/snippets/Lordinarius/nrn4L) diff --git a/_site_test/Controls/UICircle.html b/_site_test/Controls/UICircle.html deleted file mode 100644 index 1956df1..0000000 --- a/_site_test/Controls/UICircle.html +++ /dev/null @@ -1,366 +0,0 @@ - - - - - -UICircle — Unity UI Extensions - - - -UICircle | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UICircle

- -

A customizable circle/arc primitive with progress indication, fill modes, and extensive runtime control options.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UICircle primitive renders customizable circles and arcs with optional fill modes. It supports progress indication (useful for loading circles/health bars), arc construction with configurable segments, rotation, thickness control, and padding. The component efficiently uses vertex streams and maps UVs for sprite/texture rendering.

- -
- -

Properties

- -

The properties of the UICircle control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Arc InvertInverts the construction direction of the arc (default: true)
ArcPercentage of the entire circumference to draw, from 0 to 1 (default: 1 = full circle)
Arc StepsNumber of segments the arc is divided into, from 0 to 1000 (default: 100). Higher values = smoother curves
Arc RotationRotation of the geometry around the Z axis in degrees, from 0 to 360 (default: 0)
ProgressProgress indicator value from 0 to 1, colors the arc with ProgressColor up to this point (default: 0)
Progress ColorColor used for the progress portion of the arc (default: white)
FillWhether to draw a solid filled circle (true) or hollow ring (false) (default: true)
ThicknessThickness of the ring when Fill is false (default: 5)
PaddingPadding applied to the circle diameter (default: 0)
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetProgressfloat progressSets the progress value (0-1) and updates the mesh
SetArcfloat arcSets the arc percentage (0-1) and updates the mesh
SetArcStepsint stepsSets the number of arc segments and updates the mesh
SetInvertArcbool invertSets whether the arc construction is inverted and updates the mesh
SetArcRotationint rotationSets the arc rotation in degrees and updates the mesh
SetFillbool fillSets whether the circle is filled or hollow and updates the mesh
SetBaseColorColor colorSets the base color of the circle and updates the mesh
UpdateBaseAlphafloat valueUpdates only the alpha channel of the base color and updates the mesh
SetProgressColorColor colorSets the progress color and updates the mesh
UpdateProgressAlphafloat valueUpdates only the alpha channel of the progress color and updates the mesh
SetPaddingint paddingSets the padding and updates the mesh
SetThicknessint thicknessSets the thickness (for hollow circles) and updates the mesh
- -
- -

Usage

- -

To use the UICircle primitive:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> Primitives -> UI Circle”
    2. -
  2. Configure the arc percentage, steps, and rotation to define the circle shape
    3. -
  3. Enable Fill for a solid circle or disable it and set Thickness for a ring
    4. -
  4. Use Progress and Progress Color for progress indicators
    5. -
  5. Adjust Padding to fit within the RectTransform bounds
    6. -
- -

Example code for runtime control:

- -
using UnityEngine.UI.Extensions;
-
-public class CircleProgressExample : MonoBehaviour
-{
-    public UICircle progressCircle;
-
-    void Start()
-    {
-        // Configure as a progress ring
-        progressCircle.SetFill(false);
-        progressCircle.SetThickness(10);
-        progressCircle.SetArc(1f);  // Full circle
-        progressCircle.SetBaseColor(Color.gray);
-        progressCircle.SetProgressColor(Color.green);
-    }
-    
-    void UpdateProgress(float progress)
-    {
-        // Update progress from 0 to 1
-        progressCircle.SetProgress(progress);
-    }
-    
-    void CreateArc()
-    {
-        // Create a 270-degree arc rotated 45 degrees
-        progressCircle.SetArc(0.75f);
-        progressCircle.SetArcRotation(45);
-        progressCircle.SetArcSteps(100);
-    }
-}
-
- -

Note: Moving the pivot from center or having a RectTransform smaller than Thickness/Padding can cause unexpected behavior. Test multiple aspect ratios when designing layouts.

- -
- -

Video Demo

- -

Video demonstration to be added

- -

Sample scene: UICircleProgress

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: zge, jeremie sellam, tswalker
-Updated from - https://bitbucket.org/tswalker/

- -
- - - -

Sourced from
-Updated from

- -
- - - - - diff --git a/_site_test/Controls/UICircle.md b/_site_test/Controls/UICircle.md deleted file mode 100644 index 76eeea3..0000000 --- a/_site_test/Controls/UICircle.md +++ /dev/null @@ -1,144 +0,0 @@ -# UICircle - -A customizable circle/arc primitive with progress indication, fill modes, and extensive runtime control options. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The UICircle primitive renders customizable circles and arcs with optional fill modes. It supports progress indication (useful for loading circles/health bars), arc construction with configurable segments, rotation, thickness control, and padding. The component efficiently uses vertex streams and maps UVs for sprite/texture rendering. - ---------- - -## Properties - -The properties of the UICircle control are as follows: - -Property | Description --|- -*Arc Invert*|Inverts the construction direction of the arc (default: true) -*Arc*|Percentage of the entire circumference to draw, from 0 to 1 (default: 1 = full circle) -*Arc Steps*|Number of segments the arc is divided into, from 0 to 1000 (default: 100). Higher values = smoother curves -*Arc Rotation*|Rotation of the geometry around the Z axis in degrees, from 0 to 360 (default: 0) -*Progress*|Progress indicator value from 0 to 1, colors the arc with ProgressColor up to this point (default: 0) -*Progress Color*|Color used for the progress portion of the arc (default: white) -*Fill*|Whether to draw a solid filled circle (true) or hollow ring (false) (default: true) -*Thickness*|Thickness of the ring when Fill is false (default: 5) -*Padding*|Padding applied to the circle diameter (default: 0) - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*SetProgress*|float progress|Sets the progress value (0-1) and updates the mesh -*SetArc*|float arc|Sets the arc percentage (0-1) and updates the mesh -*SetArcSteps*|int steps|Sets the number of arc segments and updates the mesh -*SetInvertArc*|bool invert|Sets whether the arc construction is inverted and updates the mesh -*SetArcRotation*|int rotation|Sets the arc rotation in degrees and updates the mesh -*SetFill*|bool fill|Sets whether the circle is filled or hollow and updates the mesh -*SetBaseColor*|Color color|Sets the base color of the circle and updates the mesh -*UpdateBaseAlpha*|float value|Updates only the alpha channel of the base color and updates the mesh -*SetProgressColor*|Color color|Sets the progress color and updates the mesh -*UpdateProgressAlpha*|float value|Updates only the alpha channel of the progress color and updates the mesh -*SetPadding*|int padding|Sets the padding and updates the mesh -*SetThickness*|int thickness|Sets the thickness (for hollow circles) and updates the mesh - ---------- - -## Usage - -To use the UICircle primitive: - -1. Add the component via "**Add Component -> UI -> Extensions -> Primitives -> UI Circle**" -2. Configure the arc percentage, steps, and rotation to define the circle shape -3. Enable Fill for a solid circle or disable it and set Thickness for a ring -4. Use Progress and Progress Color for progress indicators -5. Adjust Padding to fit within the RectTransform bounds - -Example code for runtime control: - -```csharp -using UnityEngine.UI.Extensions; - -public class CircleProgressExample : MonoBehaviour -{ - public UICircle progressCircle; - - void Start() - { - // Configure as a progress ring - progressCircle.SetFill(false); - progressCircle.SetThickness(10); - progressCircle.SetArc(1f); // Full circle - progressCircle.SetBaseColor(Color.gray); - progressCircle.SetProgressColor(Color.green); - } - - void UpdateProgress(float progress) - { - // Update progress from 0 to 1 - progressCircle.SetProgress(progress); - } - - void CreateArc() - { - // Create a 270-degree arc rotated 45 degrees - progressCircle.SetArc(0.75f); - progressCircle.SetArcRotation(45); - progressCircle.SetArcSteps(100); - } -} -``` - -**Note**: Moving the pivot from center or having a RectTransform smaller than Thickness/Padding can cause unexpected behavior. Test multiple aspect ratios when designing layouts. - ---------- - -## Video Demo - -*Video demonstration to be added* - -Sample scene: `UICircleProgress` - ---------- - -## See also - -* [UILineRenderer](UILineRenderer.md) - Draw custom lines -* [UIPolygon](UIPolygon.md) - Draw custom polygons - ---------- - -## Credits and Donation - -Credits: zge, jeremie sellam, tswalker -Updated from - https://bitbucket.org/tswalker/ - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/draw-circles-or-primitives-on-the-new-ui-canvas.272488/#post-2293224) -[Updated from](https://bitbucket.org/SimonDarksideJ/unity-ui-extensions/issues/65/a-better-uicircle) diff --git a/_site_test/Controls/UICornerCut.html b/_site_test/Controls/UICornerCut.html deleted file mode 100644 index 0168625..0000000 --- a/_site_test/Controls/UICornerCut.html +++ /dev/null @@ -1,354 +0,0 @@ - - - - - -UICornerCut — Unity UI Extensions - - - -UICornerCut | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UICornerCut

- -

A primitive that renders rectangles with selectively cut corners, creating non-square panels with beveled edges and optional color variations.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UICornerCut primitive takes a rectangular RectTransform and cuts off selected corners based on a configurable corner size. This is useful for creating quick and easy non-square panels or images with beveled corners. The component adds additional geometry for cut corners and offsets the ends to simulate the cut appearance. UVs are set for texture mapping (though may be skewed when textures are applied).

- -
- -

Properties

- -

The properties of the UICornerCut control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Corner SizeSize of the corner cuts in pixels (Vector2, default: 16x16)
Cut ULCut the upper-left corner (default: true)
Cut URCut the upper-right corner (default: false)
Cut LLCut the lower-left corner (default: false)
Cut LRCut the lower-right corner (default: false)
Make ColumnsWhen enabled, up-down colors become left-right colors, changing the color bar orientation
Use Color UpEnable custom color for the upper (or left if Make Columns) cut bars
Color UpCustom color for the upper/left cut bars (when Use Color Up is enabled)
Use Color DownEnable custom color for the lower (or right if Make Columns) cut bars
Color DownCustom color for the lower/right cut bars (when Use Color Down is enabled)
- -

Additional properties available in code:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
CutULboolGets or sets whether the upper-left corner is cut. Calling the setter marks the component dirty
CutURboolGets or sets whether the upper-right corner is cut. Calling the setter marks the component dirty
CutLLboolGets or sets whether the lower-left corner is cut. Calling the setter marks the component dirty
CutLRboolGets or sets whether the lower-right corner is cut. Calling the setter marks the component dirty
MakeColumnsboolGets or sets the Make Columns mode. Calling the setter marks the component dirty
UseColorUpboolGets or sets whether to use custom color for upper/left bars
ColorUpColor32Gets or sets the custom color for upper/left bars
UseColorDownboolGets or sets whether to use custom color for lower/right bars
ColorDownColor32Gets or sets the custom color for lower/right bars
- -
- -

Methods

- -

The UICornerCut control does not expose public methods beyond the property setters (which automatically call SetAllDirty() to update the mesh).

- -
- -

Usage

- -

To use the UICornerCut primitive:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> Primitives -> Cut Corners”
    2. -
  2. Set the Corner Size to define how large the beveled corners should be
    3. -
  3. Enable/disable individual corners (Cut UL, Cut UR, Cut LL, Cut LR) as needed
    4. -
  4. Optionally enable Use Color Up/Down and set custom colors to differentiate cut bars from the main panel
    5. -
  5. Toggle Make Columns to change color bar orientation from horizontal to vertical
    6. -
- -

Example code for runtime configuration:

- -
using UnityEngine.UI.Extensions;
-
-public class CornerCutExample : MonoBehaviour
-{
-    public UICornerCut panel;
-
-    void Start()
-    {
-        // Cut all corners with 20px size
-        panel.cornerSize = new Vector2(20, 20);
-        panel.CutUL = true;
-        panel.CutUR = true;
-        panel.CutLL = true;
-        panel.CutLR = true;
-        
-        // Color the top/bottom bars differently
-        panel.UseColorUp = true;
-        panel.ColorUp = new Color32(255, 200, 200, 255);
-        panel.UseColorDown = true;
-        panel.ColorDown = new Color32(200, 200, 255, 255);
-    }
-    
-    void ToggleUpperCorners()
-    {
-        // Toggle only upper corners
-        panel.CutUL = !panel.CutUL;
-        panel.CutUR = !panel.CutUR;
-    }
-}
-
- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: Freezy - ElicitIce.nl

- -

Free for any use and alteration, source code may not be sold without permission.

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/UICornerCut.md b/_site_test/Controls/UICornerCut.md deleted file mode 100644 index 017c7ce..0000000 --- a/_site_test/Controls/UICornerCut.md +++ /dev/null @@ -1,141 +0,0 @@ -# UICornerCut - -A primitive that renders rectangles with selectively cut corners, creating non-square panels with beveled edges and optional color variations. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The UICornerCut primitive takes a rectangular RectTransform and cuts off selected corners based on a configurable corner size. This is useful for creating quick and easy non-square panels or images with beveled corners. The component adds additional geometry for cut corners and offsets the ends to simulate the cut appearance. UVs are set for texture mapping (though may be skewed when textures are applied). - ---------- - -## Properties - -The properties of the UICornerCut control are as follows: - -Property | Description --|- -*Corner Size*|Size of the corner cuts in pixels (Vector2, default: 16x16) -*Cut UL*|Cut the upper-left corner (default: true) -*Cut UR*|Cut the upper-right corner (default: false) -*Cut LL*|Cut the lower-left corner (default: false) -*Cut LR*|Cut the lower-right corner (default: false) -*Make Columns*|When enabled, up-down colors become left-right colors, changing the color bar orientation -*Use Color Up*|Enable custom color for the upper (or left if Make Columns) cut bars -*Color Up*|Custom color for the upper/left cut bars (when Use Color Up is enabled) -*Use Color Down*|Enable custom color for the lower (or right if Make Columns) cut bars -*Color Down*|Custom color for the lower/right cut bars (when Use Color Down is enabled) - -Additional properties available in code: - -Property | Return Type | Description --|-|- -CutUL|bool|Gets or sets whether the upper-left corner is cut. Calling the setter marks the component dirty -CutUR|bool|Gets or sets whether the upper-right corner is cut. Calling the setter marks the component dirty -CutLL|bool|Gets or sets whether the lower-left corner is cut. Calling the setter marks the component dirty -CutLR|bool|Gets or sets whether the lower-right corner is cut. Calling the setter marks the component dirty -MakeColumns|bool|Gets or sets the Make Columns mode. Calling the setter marks the component dirty -UseColorUp|bool|Gets or sets whether to use custom color for upper/left bars -ColorUp|Color32|Gets or sets the custom color for upper/left bars -UseColorDown|bool|Gets or sets whether to use custom color for lower/right bars -ColorDown|Color32|Gets or sets the custom color for lower/right bars - ---------- - -## Methods - -The UICornerCut control does not expose public methods beyond the property setters (which automatically call SetAllDirty() to update the mesh). - ---------- - -## Usage - -To use the UICornerCut primitive: - -1. Add the component via "**Add Component -> UI -> Extensions -> Primitives -> Cut Corners**" -2. Set the Corner Size to define how large the beveled corners should be -3. Enable/disable individual corners (Cut UL, Cut UR, Cut LL, Cut LR) as needed -4. Optionally enable Use Color Up/Down and set custom colors to differentiate cut bars from the main panel -5. Toggle Make Columns to change color bar orientation from horizontal to vertical - -Example code for runtime configuration: - -```csharp -using UnityEngine.UI.Extensions; - -public class CornerCutExample : MonoBehaviour -{ - public UICornerCut panel; - - void Start() - { - // Cut all corners with 20px size - panel.cornerSize = new Vector2(20, 20); - panel.CutUL = true; - panel.CutUR = true; - panel.CutLL = true; - panel.CutLR = true; - - // Color the top/bottom bars differently - panel.UseColorUp = true; - panel.ColorUp = new Color32(255, 200, 200, 255); - panel.UseColorDown = true; - panel.ColorDown = new Color32(200, 200, 255, 255); - } - - void ToggleUpperCorners() - { - // Toggle only upper corners - panel.CutUL = !panel.CutUL; - panel.CutUR = !panel.CutUR; - } -} -``` - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [UISquircle](UISquircle.md) - Rounded corner primitive with smooth curves -* [NicerOutline (deprecated)](NicerOutline.md) - Alternative outline effect (deprecated for Unity 6) - ---------- - -## Credits and Donation - -Credits: Freezy - ElicitIce.nl - -Free for any use and alteration, source code may not be sold without permission. - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/cut-corners-primative.359494/) diff --git a/_site_test/Controls/UIImageCrop.html b/_site_test/Controls/UIImageCrop.html deleted file mode 100644 index 8ba397a..0000000 --- a/_site_test/Controls/UIImageCrop.html +++ /dev/null @@ -1,295 +0,0 @@ - - - - - -UIImageCrop — Unity UI Extensions - - - -UIImageCrop | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UIImageCrop

- -

A shader-based effect that crops portions of a UI image along the X and Y axes without using masks, providing efficient partial image rendering.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UIImageCrop effect allows cropping portions of a UI image along X and Y axes without requiring mask components. It applies a custom shader (UI Extensions/UI Image Crop) to the MaskableGraphic component, enabling efficient partial image display through shader-based cropping rather than masking. The component automatically applies the shader material on Start() and in the editor via OnValidate().

- -
- -

Properties

- -

The properties of the UIImageCrop effect are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
XCropNormalized X-axis crop factor from 0 to 1 (default: 0). Crops the image horizontally
YCropNormalized Y-axis crop factor from 0 to 1 (default: 0). Crops the image vertically
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetMaterial(none)Initializes the shader material on the MaskableGraphic component. Automatically called on Start()
SetXCropfloat xcropSets the X crop factor (clamped 0-1) and updates the shader property
SetYCropfloat ycropSets the Y crop factor (clamped 0-1) and updates the shader property
- -
- -

Usage

- -

To use the UIImageCrop effect:

- -
    -
  1. Add the component via “Add Component -> UI -> Effects -> Extensions -> UIImageCrop”
    2. -
  2. The component requires a MaskableGraphic (Image, RawImage, Text, etc.) on the same GameObject
    3. -
  3. The shader material is automatically applied when the component initializes
    4. -
  4. Adjust XCrop and YCrop values in the inspector (0 = no crop, 1 = fully cropped)
    5. -
  5. Use SetXCrop() and SetYCrop() methods for runtime control
    6. -
- -

Example code for runtime cropping:

- -
using UnityEngine.UI.Extensions;
-
-public class ImageCropExample : MonoBehaviour
-{
-    public UIImageCrop imageCrop;
-
-    void Start()
-    {
-        // Ensure material is initialized
-        imageCrop.SetMaterial();
-    }
-    
-    void CropHorizontally(float amount)
-    {
-        // Crop from 0 (no crop) to 1 (fully cropped)
-        imageCrop.SetXCrop(amount);
-    }
-    
-    void AnimateCrop()
-    {
-        // Animate cropping over time
-        StartCoroutine(AnimateCropCoroutine());
-    }
-    
-    IEnumerator AnimateCropCoroutine()
-    {
-        float t = 0;
-        while (t < 1)
-        {
-            imageCrop.SetXCrop(t);
-            imageCrop.SetYCrop(t);
-            t += Time.deltaTime;
-            yield return null;
-        }
-    }
-}
-
- -

Note: This component must be attached to a GameObject with a MaskableGraphic component (Image, RawImage, Text, etc.). If no graphic is found, an error will be logged.

- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- -
    -
  • SoftMaskScript - Alternative masking approach (not yet documented)
    • -
  • UIFlippable - Flip images horizontally or vertically
    • -
- -
- -

Credits and Donation

- -

Credits: 00christian00

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/UIImageCrop.md b/_site_test/Controls/UIImageCrop.md deleted file mode 100644 index dbc0ed0..0000000 --- a/_site_test/Controls/UIImageCrop.md +++ /dev/null @@ -1,130 +0,0 @@ -# UIImageCrop - -A shader-based effect that crops portions of a UI image along the X and Y axes without using masks, providing efficient partial image rendering. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The UIImageCrop effect allows cropping portions of a UI image along X and Y axes without requiring mask components. It applies a custom shader (UI Extensions/UI Image Crop) to the MaskableGraphic component, enabling efficient partial image display through shader-based cropping rather than masking. The component automatically applies the shader material on Start() and in the editor via OnValidate(). - ---------- - -## Properties - -The properties of the UIImageCrop effect are as follows: - -Property | Description --|- -*XCrop*|Normalized X-axis crop factor from 0 to 1 (default: 0). Crops the image horizontally -*YCrop*|Normalized Y-axis crop factor from 0 to 1 (default: 0). Crops the image vertically - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*SetMaterial*|(none)|Initializes the shader material on the MaskableGraphic component. Automatically called on Start() -*SetXCrop*|float xcrop|Sets the X crop factor (clamped 0-1) and updates the shader property -*SetYCrop*|float ycrop|Sets the Y crop factor (clamped 0-1) and updates the shader property - ---------- - -## Usage - -To use the UIImageCrop effect: - -1. Add the component via "**Add Component -> UI -> Effects -> Extensions -> UIImageCrop**" -2. The component requires a MaskableGraphic (Image, RawImage, Text, etc.) on the same GameObject -3. The shader material is automatically applied when the component initializes -4. Adjust XCrop and YCrop values in the inspector (0 = no crop, 1 = fully cropped) -5. Use SetXCrop() and SetYCrop() methods for runtime control - -Example code for runtime cropping: - -```csharp -using UnityEngine.UI.Extensions; - -public class ImageCropExample : MonoBehaviour -{ - public UIImageCrop imageCrop; - - void Start() - { - // Ensure material is initialized - imageCrop.SetMaterial(); - } - - void CropHorizontally(float amount) - { - // Crop from 0 (no crop) to 1 (fully cropped) - imageCrop.SetXCrop(amount); - } - - void AnimateCrop() - { - // Animate cropping over time - StartCoroutine(AnimateCropCoroutine()); - } - - IEnumerator AnimateCropCoroutine() - { - float t = 0; - while (t < 1) - { - imageCrop.SetXCrop(t); - imageCrop.SetYCrop(t); - t += Time.deltaTime; - yield return null; - } - } -} -``` - -**Note**: This component must be attached to a GameObject with a MaskableGraphic component (Image, RawImage, Text, etc.). If no graphic is found, an error will be logged. - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [SoftMaskScript](../MISSING_DOCUMENTATION.md) - Alternative masking approach (not yet documented) -* [UIFlippable](UIFlippable.md) - Flip images horizontally or vertically - ---------- - -## Credits and Donation - -Credits: 00christian00 - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/any-way-to-show-part-of-an-image-without-using-mask.360085/#post-2332030) diff --git a/_site_test/Controls/UILineRendererFIFO.html b/_site_test/Controls/UILineRendererFIFO.html deleted file mode 100644 index b204de0..0000000 --- a/_site_test/Controls/UILineRendererFIFO.html +++ /dev/null @@ -1,338 +0,0 @@ - - - - - -UILineRendererFIFO — Unity UI Extensions - - - -UILineRendererFIFO | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UILineRendererFIFO

- -

A performance-optimized line renderer that uses a first-in-first-out (FIFO) queue for adding and removing points, ideal for drawing dynamic trails or graphs.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UILineRendererFIFO is a refactored and performance-optimized version of UILineRenderer that uses FIFO (first-in-first-out) queue logic. Points are added to the head of the queue and removed from the tail, making it ideal for applications like scrolling graphs, dynamic trails, or real-time data visualization. The component efficiently manages vertex buffers by only rebuilding segments for newly added points.

- -
- -

Properties

- -

The properties of the UILineRendererFIFO control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Line ThicknessThickness of the drawn line in pixels (default: 1)
PointsList of Vector2 points to draw lines between. Can be improved using the Resolution Option from base class
- -

Additional properties available in code:

- - - - - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription 
 LineThicknessfloatGets or sets the line thickness. Setter marks the component dirty
 PointsListGets or sets the points list. Should not be modified directly—use Add/Remove methods instead
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
AddPointVector2 pointAdds a point to the head of the queue. New points are drawn on the next mesh update
RemovePoint(none)Removes a point from the tail (FIFO). Triggers a full mesh resize on next update
ClearPoints(none)Clears all points, segments, and resets the internal state
Resize(none)Forces a full mesh resize/rebuild on the next update
- -
- -

Usage

- -

To use the UILineRendererFIFO primitive:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> Primitives -> UILineRendererFIFO”
    2. -
  2. Set the Line Thickness to control line width
    3. -
  3. Use AddPoint() to add points dynamically at runtime
    4. -
  4. Use RemovePoint() to remove the oldest point (FIFO behavior)
    5. -
  5. The component automatically optimizes rendering by only updating newly added geometry
    6. -
- -

Example code for dynamic line drawing:

- -
using UnityEngine.UI.Extensions;
-using System.Collections;
-
-public class FIFOLineExample : MonoBehaviour
-{
-    public UILineRendererFIFO lineRenderer;
-    public int maxPoints = 100;
-
-    void Start()
-    {
-        lineRenderer.LineThickness = 2f;
-        lineRenderer.ClearPoints();
-        StartCoroutine(DrawTrail());
-    }
-    
-    IEnumerator DrawTrail()
-    {
-        while (true)
-        {
-            // Add new point at mouse position (normalized to RectTransform)
-            Vector2 localPoint;
-            RectTransformUtility.ScreenPointToLocalPointInRectangle(
-                lineRenderer.GetComponent<RectTransform>(),
-                Input.mousePosition,
-                null,
-                out localPoint
-            );
-            
-            lineRenderer.AddPoint(localPoint);
-            
-            // Remove oldest point if exceeding max
-            if (lineRenderer.Points.Count > maxPoints)
-            {
-                lineRenderer.RemovePoint();
-            }
-            
-            yield return new WaitForSeconds(0.05f);
-        }
-    }
-    
-    public void ClearTrail()
-    {
-        lineRenderer.ClearPoints();
-    }
-}
-
- -

Note: The component includes a 64,000 vertex limit check. If exceeded, the mesh will be cleared and an error logged.

- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: Steve Westhoff, jack.sydorenko, firagon
-Refactored and updated for performance from UILineRenderer

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/UILineRendererFIFO.md b/_site_test/Controls/UILineRendererFIFO.md deleted file mode 100644 index 823eaea..0000000 --- a/_site_test/Controls/UILineRendererFIFO.md +++ /dev/null @@ -1,149 +0,0 @@ -# UILineRendererFIFO - -A performance-optimized line renderer that uses a first-in-first-out (FIFO) queue for adding and removing points, ideal for drawing dynamic trails or graphs. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The UILineRendererFIFO is a refactored and performance-optimized version of UILineRenderer that uses FIFO (first-in-first-out) queue logic. Points are added to the head of the queue and removed from the tail, making it ideal for applications like scrolling graphs, dynamic trails, or real-time data visualization. The component efficiently manages vertex buffers by only rebuilding segments for newly added points. - ---------- - -## Properties - -The properties of the UILineRendererFIFO control are as follows: - -Property | Description --|- -*Line Thickness*|Thickness of the drawn line in pixels (default: 1) -*Points*|List of Vector2 points to draw lines between. Can be improved using the Resolution Option from base class - -Additional properties available in code: - -Property | Return Type | Description -|-|-|-| -|LineThickness|float|Gets or sets the line thickness. Setter marks the component dirty -|Points|List|Gets or sets the points list. Should not be modified directly—use Add/Remove methods instead - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*AddPoint*|Vector2 point|Adds a point to the head of the queue. New points are drawn on the next mesh update -*RemovePoint*|(none)|Removes a point from the tail (FIFO). Triggers a full mesh resize on next update -*ClearPoints*|(none)|Clears all points, segments, and resets the internal state -*Resize*|(none)|Forces a full mesh resize/rebuild on the next update - ---------- - -## Usage - -To use the UILineRendererFIFO primitive: - -1. Add the component via "**Add Component -> UI -> Extensions -> Primitives -> UILineRendererFIFO**" -2. Set the Line Thickness to control line width -3. Use AddPoint() to add points dynamically at runtime -4. Use RemovePoint() to remove the oldest point (FIFO behavior) -5. The component automatically optimizes rendering by only updating newly added geometry - -Example code for dynamic line drawing: - -```csharp -using UnityEngine.UI.Extensions; -using System.Collections; - -public class FIFOLineExample : MonoBehaviour -{ - public UILineRendererFIFO lineRenderer; - public int maxPoints = 100; - - void Start() - { - lineRenderer.LineThickness = 2f; - lineRenderer.ClearPoints(); - StartCoroutine(DrawTrail()); - } - - IEnumerator DrawTrail() - { - while (true) - { - // Add new point at mouse position (normalized to RectTransform) - Vector2 localPoint; - RectTransformUtility.ScreenPointToLocalPointInRectangle( - lineRenderer.GetComponent(), - Input.mousePosition, - null, - out localPoint - ); - - lineRenderer.AddPoint(localPoint); - - // Remove oldest point if exceeding max - if (lineRenderer.Points.Count > maxPoints) - { - lineRenderer.RemovePoint(); - } - - yield return new WaitForSeconds(0.05f); - } - } - - public void ClearTrail() - { - lineRenderer.ClearPoints(); - } -} -``` - -**Note**: The component includes a 64,000 vertex limit check. If exceeded, the mesh will be cleared and an error logged. - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [UILineRenderer](UILineRenderer.md) - Standard line renderer -* [UILineTextureRenderer](UILineTextureRenderer.md) - Line renderer with texture mapping and caps -* [BezierLineRenderer](BezierLineRenderer.md) - Curved line renderer - ---------- - -## Credits and Donation - -Credits: Steve Westhoff, jack.sydorenko, firagon -Refactored and updated for performance from UILineRenderer - ---------- - -## External links - -[Sourced from](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/issues/324) diff --git a/_site_test/Controls/UILineRendererList.html b/_site_test/Controls/UILineRendererList.html deleted file mode 100644 index 2bc843e..0000000 --- a/_site_test/Controls/UILineRendererList.html +++ /dev/null @@ -1,359 +0,0 @@ - - - - - -UILineRendererList — Unity UI Extensions - - - -UILineRendererList | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UILineRendererList

- -

An advanced line renderer for drawing multiple connected line segments with features including bezier curves, join types (bevel/miter), and line caps.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

UILineRendererList is an advanced primitive that renders multiple connected line segments with customizable styling options. It extends the basic line rendering capabilities with support for:

- -
    -
  • Bezier Curves: Optional smoothing of line segments using various Bezier interpolation methods
    • -
  • Join Types: Control how line segments connect with bevel (curved) or miter (sharp) joins
    • -
  • Line Caps: Add end caps to each line segment
    • -
  • Line List Mode: Draw disconnected pairs of lines instead of a continuous path
    • -
  • Configurable Thickness: Adjust line thickness dynamically
    • -
- -

This is a more feature-rich alternative to UILineRenderer for complex line drawings.

- -
- -

Properties

- -

The properties of the UILineRendererList control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
PointsList of points to draw lines between. Can be improved using the Resolution option.
Line ThicknessThickness of the drawn line in pixels.
Relative SizeWhen true, points use normalized coordinates (0,0 -> 1,1) relative to the RectTransform. When false, uses screen-space coordinates.
Line ListWhen true, points are treated as pairs of disconnected lines. When false, points form a continuous path.
Line CapsWhether to add end caps (circles) at the start and end of each line.
Bezier Segments Per CurveNumber of segments to generate per bezier curve for smoothing. Only used when Bezier Mode is not None.
Line JoinsThe type of join between line segments: Bevel (curved) or Miter (sharp angular).
Bezier ModeThe type of Bezier smoothing to apply: None, Quick, Basic, Improved, or Catenary. Cannot be used with manual Resolution setting.
Driven ExternallyWhen true, allows external code to drive the rendering without updating from properties.
- -

Additional properties available in code

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
LineThicknessfloatGet or set the line thickness, automatically marks for redraw.
RelativeSizeboolGet or set whether points are relative or screen-space.
LineListboolGet or set whether lines are connected or as pairs.
LineCapsboolGet or set whether line caps are drawn.
BezierSegmentsPerCurveintGet or set the bezier resolution.
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetAllDirtyN/AMarks the graphic as dirty and requires a full redraw.
OnPopulateMeshVertexHelperInternal method that populates the mesh data for rendering.
- -
- -

Usage

- -

Add the UILineRendererList component to a RectTransform in your UI hierarchy:

- -

“Add Component -> UI -> Extensions -> Primitives -> UILineRendererList”

- -

Then configure the line points and drawing options in the inspector.

- -

Basic usage example:

- -
public UILineRendererList lineRenderer;
-
-void Start()
-{
-    // Create points for the line
-    List<Vector2> points = new List<Vector2>
-    {
-        Vector2.zero,           // Start point
-        new Vector2(100, 50),   // Middle point
-        new Vector2(200, 0)     // End point
-    };
-    
-    lineRenderer.Points = points;
-    lineRenderer.LineThickness = 5f;
-}
-
- -

Drawing with Bezier Curves

- -

To smooth line segments with Bezier interpolation:

- -
lineRenderer.BezierMode = UILineRendererList.BezierType.Improved;
-lineRenderer.BezierSegmentsPerCurve = 20;
-
- -

Line Joins and Caps

- -

Configure how segments connect:

- -
lineRenderer.LineJoins = UILineRendererList.JoinType.Bevel;  // Curved joins
-lineRenderer.LineCaps = true;  // Add end caps
-
- -
- -

Video Demo

- -

Coming soon…

- -
- -

See also

- - - -
- -

Credits and Donation

- -

jack.sydorenko, firagon

- -
- - - -

Sourced from -Updated/Refactored from

- -
- - - - - diff --git a/_site_test/Controls/UILineRendererList.md b/_site_test/Controls/UILineRendererList.md deleted file mode 100644 index 1345426..0000000 --- a/_site_test/Controls/UILineRendererList.md +++ /dev/null @@ -1,150 +0,0 @@ -# UILineRendererList - -An advanced line renderer for drawing multiple connected line segments with features including bezier curves, join types (bevel/miter), and line caps. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -UILineRendererList is an advanced primitive that renders multiple connected line segments with customizable styling options. It extends the basic line rendering capabilities with support for: - -- **Bezier Curves**: Optional smoothing of line segments using various Bezier interpolation methods -- **Join Types**: Control how line segments connect with bevel (curved) or miter (sharp) joins -- **Line Caps**: Add end caps to each line segment -- **Line List Mode**: Draw disconnected pairs of lines instead of a continuous path -- **Configurable Thickness**: Adjust line thickness dynamically - -This is a more feature-rich alternative to UILineRenderer for complex line drawings. - ---------- - -## Properties - -The properties of the UILineRendererList control are as follows: - -Property | Description --|- -*Points*|List of points to draw lines between. Can be improved using the Resolution option. -*Line Thickness*|Thickness of the drawn line in pixels. -*Relative Size*|When true, points use normalized coordinates (0,0 -> 1,1) relative to the RectTransform. When false, uses screen-space coordinates. -*Line List*|When true, points are treated as pairs of disconnected lines. When false, points form a continuous path. -*Line Caps*|Whether to add end caps (circles) at the start and end of each line. -*Bezier Segments Per Curve*|Number of segments to generate per bezier curve for smoothing. Only used when Bezier Mode is not None. -*Line Joins*|The type of join between line segments: Bevel (curved) or Miter (sharp angular). -*Bezier Mode*|The type of Bezier smoothing to apply: None, Quick, Basic, Improved, or Catenary. Cannot be used with manual Resolution setting. -*Driven Externally*|When true, allows external code to drive the rendering without updating from properties. - -### Additional properties available in code - -Property | Return Type | Description --|-|- -LineThickness|float|Get or set the line thickness, automatically marks for redraw. -RelativeSize|bool|Get or set whether points are relative or screen-space. -LineList|bool|Get or set whether lines are connected or as pairs. -LineCaps|bool|Get or set whether line caps are drawn. -BezierSegmentsPerCurve|int|Get or set the bezier resolution. - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*SetAllDirty*|N/A|Marks the graphic as dirty and requires a full redraw. -*OnPopulateMesh*|VertexHelper|Internal method that populates the mesh data for rendering. - ---------- - -## Usage - -Add the UILineRendererList component to a RectTransform in your UI hierarchy: - -"Add Component -> UI -> Extensions -> Primitives -> UILineRendererList" - -Then configure the line points and drawing options in the inspector. - -Basic usage example: - -```csharp -public UILineRendererList lineRenderer; - -void Start() -{ - // Create points for the line - List points = new List - { - Vector2.zero, // Start point - new Vector2(100, 50), // Middle point - new Vector2(200, 0) // End point - }; - - lineRenderer.Points = points; - lineRenderer.LineThickness = 5f; -} -``` - -### Drawing with Bezier Curves - -To smooth line segments with Bezier interpolation: - -```csharp -lineRenderer.BezierMode = UILineRendererList.BezierType.Improved; -lineRenderer.BezierSegmentsPerCurve = 20; -``` - -### Line Joins and Caps - -Configure how segments connect: - -```csharp -lineRenderer.LineJoins = UILineRendererList.JoinType.Bevel; // Curved joins -lineRenderer.LineCaps = true; // Add end caps -``` - ---------- - -## Video Demo - -Coming soon... - ---------- - -## See also - -* [UILineRenderer](/Controls/UILineRenderer.md) -* [UILineRendererFIFO](/Controls/UILineRendererFIFO.md) -* [UILineTextureRenderer](/Controls/UILineTextureRenderer.md) -* [UILineConnector](/Controls/UILineConnector.md) - ---------- - -## Credits and Donation - -jack.sydorenko, firagon - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/new-ui-and-line-drawing.253772/) -[Updated/Refactored from](http://forum.unity3d.com/threads/new-ui-and-line-drawing.253772/#post-2528050) diff --git a/_site_test/Controls/UILineTextureRenderer.html b/_site_test/Controls/UILineTextureRenderer.html deleted file mode 100644 index be98cf7..0000000 --- a/_site_test/Controls/UILineTextureRenderer.html +++ /dev/null @@ -1,312 +0,0 @@ - - - - - -UILineTextureRenderer — Unity UI Extensions - - - -UILineTextureRenderer | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UILineTextureRenderer

- -

A line renderer with UV texture mapping and automatic end caps, supporting both absolute and relative sizing modes.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UILineTextureRenderer draws lines between points with proper UV texture mapping, making it ideal for textured lines and trails. The component automatically adds end caps (24 pixels) to the line segments and supports both relative (scaled to RectTransform) and absolute sizing modes. UVs are configured for proper texture wrapping with left/center/right sections.

- -
- -

Properties

- -

The properties of the UILineTextureRenderer control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
UV RectUV rectangle used by the texture (default: 0,0,1,1). Defines which portion of the texture to map
Line ThicknessThickness of the drawn line in pixels (default: 2)
Use MarginsWhen enabled, applies margin offsets to the drawing area
MarginMargin offset in pixels (Vector2) applied when Use Margins is enabled
Relative SizeWhen enabled, scales points relative to RectTransform dimensions. When disabled, uses absolute 1:1 scale
PointsArray of Vector2 points to draw lines between
- -

Additional properties available in code:

- - - - - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription 
 uvRectRectGets or sets the UV rectangle. Setter marks vertices dirty
 PointsVector2[]Gets or sets the points array. Setter marks all dirty
- -
- -

Methods

- -

The UILineTextureRenderer control does not expose public methods beyond the property setters.

- -
- -

Usage

- -

To use the UILineTextureRenderer primitive:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> Primitives -> UILineTextureRenderer”
    2. -
  2. Assign a texture/sprite to the Image component (if using a texture)
    3. -
  3. Set the Points array with Vector2 positions (requires at least 2 points)
    4. -
  4. Configure Line Thickness and UV Rect as needed
    5. -
  5. Toggle Relative Size: enabled scales to RectTransform, disabled uses absolute positioning
    6. -
  6. Optionally enable Use Margins and set Margin for offset adjustments
    7. -
- -

Example code for runtime line creation:

- -
using UnityEngine.UI.Extensions;
-
-public class TexturedLineExample : MonoBehaviour
-{
-    public UILineTextureRenderer lineRenderer;
-
-    void Start()
-    {
-        // Create a simple line
-        lineRenderer.Points = new Vector2[]
-        {
-            new Vector2(0.1f, 0.1f),
-            new Vector2(0.5f, 0.8f),
-            new Vector2(0.9f, 0.2f)
-        };
-        
-        lineRenderer.LineThickness = 5f;
-        lineRenderer.relativeSize = true;
-        lineRenderer.uvRect = new Rect(0, 0, 1, 1);
-    }
-    
-    void DrawPath(Vector2[] pathPoints)
-    {
-        lineRenderer.Points = pathPoints;
-    }
-    
-    void SetCustomUVMapping()
-    {
-        // Use only part of the texture
-        lineRenderer.uvRect = new Rect(0.25f, 0.25f, 0.5f, 0.5f);
-    }
-}
-
- -

Note: The component automatically adds 24-pixel caps to the start and end of the line. If fewer than 2 points are provided, it defaults to a simple diagonal line from (0,0) to (1,1).

- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: jonbro5556
-Based on original LineRender script by jack.sydorenko

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/UILineTextureRenderer.md b/_site_test/Controls/UILineTextureRenderer.md deleted file mode 100644 index 724250a..0000000 --- a/_site_test/Controls/UILineTextureRenderer.md +++ /dev/null @@ -1,136 +0,0 @@ -# UILineTextureRenderer - -A line renderer with UV texture mapping and automatic end caps, supporting both absolute and relative sizing modes. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The UILineTextureRenderer draws lines between points with proper UV texture mapping, making it ideal for textured lines and trails. The component automatically adds end caps (24 pixels) to the line segments and supports both relative (scaled to RectTransform) and absolute sizing modes. UVs are configured for proper texture wrapping with left/center/right sections. - ---------- - -## Properties - -The properties of the UILineTextureRenderer control are as follows: - -Property | Description --|- -*UV Rect*|UV rectangle used by the texture (default: 0,0,1,1). Defines which portion of the texture to map -*Line Thickness*|Thickness of the drawn line in pixels (default: 2) -*Use Margins*|When enabled, applies margin offsets to the drawing area -*Margin*|Margin offset in pixels (Vector2) applied when Use Margins is enabled -*Relative Size*|When enabled, scales points relative to RectTransform dimensions. When disabled, uses absolute 1:1 scale -*Points*|Array of Vector2 points to draw lines between - -Additional properties available in code: - -Property | Return Type | Description -|-|-|-| -|uvRect|Rect|Gets or sets the UV rectangle. Setter marks vertices dirty -|Points|Vector2[]|Gets or sets the points array. Setter marks all dirty - ---------- - -## Methods - -The UILineTextureRenderer control does not expose public methods beyond the property setters. - ---------- - -## Usage - -To use the UILineTextureRenderer primitive: - -1. Add the component via "**Add Component -> UI -> Extensions -> Primitives -> UILineTextureRenderer**" -2. Assign a texture/sprite to the Image component (if using a texture) -3. Set the Points array with Vector2 positions (requires at least 2 points) -4. Configure Line Thickness and UV Rect as needed -5. Toggle Relative Size: enabled scales to RectTransform, disabled uses absolute positioning -6. Optionally enable Use Margins and set Margin for offset adjustments - -Example code for runtime line creation: - -```csharp -using UnityEngine.UI.Extensions; - -public class TexturedLineExample : MonoBehaviour -{ - public UILineTextureRenderer lineRenderer; - - void Start() - { - // Create a simple line - lineRenderer.Points = new Vector2[] - { - new Vector2(0.1f, 0.1f), - new Vector2(0.5f, 0.8f), - new Vector2(0.9f, 0.2f) - }; - - lineRenderer.LineThickness = 5f; - lineRenderer.relativeSize = true; - lineRenderer.uvRect = new Rect(0, 0, 1, 1); - } - - void DrawPath(Vector2[] pathPoints) - { - lineRenderer.Points = pathPoints; - } - - void SetCustomUVMapping() - { - // Use only part of the texture - lineRenderer.uvRect = new Rect(0.25f, 0.25f, 0.5f, 0.5f); - } -} -``` - -**Note**: The component automatically adds 24-pixel caps to the start and end of the line. If fewer than 2 points are provided, it defaults to a simple diagonal line from (0,0) to (1,1). - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [UILineRenderer](UILineRenderer.md) - Standard line renderer without texture mapping -* [UILineRendererFIFO](UILineRendererFIFO.md) - FIFO-based line renderer for trails -* [BezierLineRenderer](BezierLineRenderer.md) - Curved line renderer - ---------- - -## Credits and Donation - -Credits: jonbro5556 -Based on original LineRender script by jack.sydorenko - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/new-ui-and-line-drawing.253772/) diff --git a/_site_test/Controls/UISquircle.html b/_site_test/Controls/UISquircle.html deleted file mode 100644 index d50cdcd..0000000 --- a/_site_test/Controls/UISquircle.html +++ /dev/null @@ -1,298 +0,0 @@ - - - - - -UISquircle — Unity UI Extensions - - - -UISquircle | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UISquircle

- -

A primitive that renders smooth superellipse shapes (squircles) with configurable curvature, offering an elegant alternative to sharp corners or simple rounded rectangles.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- - - - - - - - - - - -
The UISquircle primitive renders superellipse shapes (commonly called “squircles”) using the mathematical formulax/a^n +y/b^n = 1. These shapes provide a smooth, aesthetically pleasing alternative to sharp corners or simple rounded rectangles. The component supports two modes: Classic (fits shape to RectTransform dimensions) and Scaled (uniform scaling with configurable radius), and includes quality optimization to reduce vertex count.
- -
- -

Properties

- -

The properties of the UISquircle control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Squircle TypeShape calculation mode: Classic (scales to RectTransform width/height) or Scaled (uniform scaling with radius constraint)
NCurvature exponent from 1 to 40 (default: 4). Higher values = sharper corners, lower = rounder. Classic squircle uses n=4
DeltaStep size for vertex generation (default: 5). Smaller = more vertices = smoother curve
QualityVertex optimization threshold (default: 0.1). Higher values = fewer vertices = lower quality
RadiusMaximum radius for Scaled mode (default: 1000). Constrains the shape size
- -
- -

Methods

- -

The UISquircle control does not expose public methods beyond inherited base class functionality.

- -
- -

Usage

- -

To use the UISquircle primitive:

- -
    -
  1. Add the component via “Add Component -> UI -> Extensions -> Primitives -> Squircle”
    2. -
  2. Choose Squircle Type: -
      -
    • Classic: Shape scales to fill RectTransform dimensions (may be non-uniform)
      • -
    • Scaled: Shape maintains uniform circular scaling within specified radius
      • -
    -
    3. -
  3. Adjust N to control corner sharpness (4 = classic squircle, lower = rounder, higher = sharper)
    4. -
  4. Tune Delta and Quality to balance smoothness vs. performance
    5. -
  5. For Scaled mode, set Radius to constrain maximum size
    6. -
- -

Example code for runtime squircle configuration:

- -
using UnityEngine.UI.Extensions;
-
-public class SquircleExample : MonoBehaviour
-{
-    public UISquircle squircle;
-
-    void Start()
-    {
-        // Configure as classic squircle
-        squircle.squircleType = UISquircle.Type.Classic;
-        squircle.n = 4f;       // Classic squircle value
-        squircle.delta = 3f;   // Smoother curve
-        squircle.quality = 0.1f;
-    }
-    
-    void MakeRounder()
-    {
-        // Lower n = rounder corners
-        squircle.n = 2f;
-        squircle.SetVerticesDirty();
-    }
-    
-    void MakeSharper()
-    {
-        // Higher n = sharper corners
-        squircle.n = 8f;
-        squircle.SetVerticesDirty();
-    }
-    
-    void UseScaledMode()
-    {
-        // Switch to uniform scaling
-        squircle.squircleType = UISquircle.Type.Scaled;
-        squircle.radius = 200f;
-        squircle.SetVerticesDirty();
-    }
-}
-
- -

Performance Note: The editor inspector displays the current vertex count. Adjust Quality and Delta to optimize. Higher Quality values remove more vertices but may reduce smoothness.

- -
- -

Video Demo

- -

Video demonstration to be added

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: Soprachev Andrei

- -
- - - -

No external source link provided

- -
- - - - - diff --git a/_site_test/Controls/UISquircle.md b/_site_test/Controls/UISquircle.md deleted file mode 100644 index 6c8e648..0000000 --- a/_site_test/Controls/UISquircle.md +++ /dev/null @@ -1,132 +0,0 @@ -# UISquircle - -A primitive that renders smooth superellipse shapes (squircles) with configurable curvature, offering an elegant alternative to sharp corners or simple rounded rectangles. - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -The UISquircle primitive renders superellipse shapes (commonly called "squircles") using the mathematical formula |x/a|^n + |y/b|^n = 1. These shapes provide a smooth, aesthetically pleasing alternative to sharp corners or simple rounded rectangles. The component supports two modes: Classic (fits shape to RectTransform dimensions) and Scaled (uniform scaling with configurable radius), and includes quality optimization to reduce vertex count. - ---------- - -## Properties - -The properties of the UISquircle control are as follows: - -Property | Description --|- -*Squircle Type*|Shape calculation mode: **Classic** (scales to RectTransform width/height) or **Scaled** (uniform scaling with radius constraint) -*N*|Curvature exponent from 1 to 40 (default: 4). Higher values = sharper corners, lower = rounder. Classic squircle uses n=4 -*Delta*|Step size for vertex generation (default: 5). Smaller = more vertices = smoother curve -*Quality*|Vertex optimization threshold (default: 0.1). Higher values = fewer vertices = lower quality -*Radius*|Maximum radius for Scaled mode (default: 1000). Constrains the shape size - ---------- - -## Methods - -The UISquircle control does not expose public methods beyond inherited base class functionality. - ---------- - -## Usage - -To use the UISquircle primitive: - -1. Add the component via "**Add Component -> UI -> Extensions -> Primitives -> Squircle**" -2. Choose Squircle Type: - - **Classic**: Shape scales to fill RectTransform dimensions (may be non-uniform) - - **Scaled**: Shape maintains uniform circular scaling within specified radius -3. Adjust **N** to control corner sharpness (4 = classic squircle, lower = rounder, higher = sharper) -4. Tune **Delta** and **Quality** to balance smoothness vs. performance -5. For Scaled mode, set **Radius** to constrain maximum size - -Example code for runtime squircle configuration: - -```csharp -using UnityEngine.UI.Extensions; - -public class SquircleExample : MonoBehaviour -{ - public UISquircle squircle; - - void Start() - { - // Configure as classic squircle - squircle.squircleType = UISquircle.Type.Classic; - squircle.n = 4f; // Classic squircle value - squircle.delta = 3f; // Smoother curve - squircle.quality = 0.1f; - } - - void MakeRounder() - { - // Lower n = rounder corners - squircle.n = 2f; - squircle.SetVerticesDirty(); - } - - void MakeSharper() - { - // Higher n = sharper corners - squircle.n = 8f; - squircle.SetVerticesDirty(); - } - - void UseScaledMode() - { - // Switch to uniform scaling - squircle.squircleType = UISquircle.Type.Scaled; - squircle.radius = 200f; - squircle.SetVerticesDirty(); - } -} -``` - -**Performance Note**: The editor inspector displays the current vertex count. Adjust Quality and Delta to optimize. Higher Quality values remove more vertices but may reduce smoothness. - ---------- - -## Video Demo - -*Video demonstration to be added* - ---------- - -## See also - -* [UICornerCut](UICornerCut.md) - Cut corner primitive -* [UICircle](UICircle.md) - Circle/arc primitive - ---------- - -## Credits and Donation - -Credits: Soprachev Andrei - ---------- - -## External links - -*No external source link provided* diff --git a/_site_test/Controls/UIWindowBase.html b/_site_test/Controls/UIWindowBase.html deleted file mode 100644 index 60c3b26..0000000 --- a/_site_test/Controls/UIWindowBase.html +++ /dev/null @@ -1,244 +0,0 @@ - - - - - -UIWindowBase — Unity UI Extensions - - - -UIWindowBase | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

UIWindowBase

- -

A draggable window for RectTransforms with bounds checking to keep it within the canvas

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A draggable window implementation for RectTransforms that includes bounds checking to ensure the window stays within the canvas area.

- -
- -

Properties

- -

The properties of the UI Window Base control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Keep Window In CanvasNumber of pixels of the window that must stay inside the canvas view
Root TransformThe transform that is moved when dragging, can be left empty in which case its own transform is used
- -

Additional properties available in code

- - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
ResetCoordsbool (static)Set to true to reset the window to its original position
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add the UI Window Base component to a RectTransform using:

- -

“Add Component -> UI -> Extensions -> UI Window Base”

- -

Or alternatively, add it via the GameObject menu:

- -

“GameObject -> UI -> Extensions -> Controls -> UI Window Base”

- -
- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

GXMark, alexzzzz, CaoMengde777, TroyDavis

- -
- - - -

Sourced from

- -
- - - - - diff --git a/_site_test/Controls/UIWindowBase.md b/_site_test/Controls/UIWindowBase.md deleted file mode 100644 index 2562441..0000000 --- a/_site_test/Controls/UIWindowBase.md +++ /dev/null @@ -1,90 +0,0 @@ -# UIWindowBase - -A draggable window for RectTransforms with bounds checking to keep it within the canvas - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -A draggable window implementation for RectTransforms that includes bounds checking to ensure the window stays within the canvas area. - ---------- - -## Properties - -The properties of the UI Window Base control are as follows: - -Property | Description --|- -*Keep Window In Canvas*|Number of pixels of the window that must stay inside the canvas view -*Root Transform*|The transform that is moved when dragging, can be left empty in which case its own transform is used - -### Additional properties available in code - -Property | Return Type | Description -|-|-|-| -ResetCoords|bool (static)|Set to true to reset the window to its original position - ---------- - -## Methods - -This component does not expose public methods beyond inherited behaviour. - ---------- - -## Usage - -Add the UI Window Base component to a RectTransform using: - -"Add Component -> UI -> Extensions -> UI Window Base" - -Or alternatively, add it via the GameObject menu: - -"GameObject -> UI -> Extensions -> Controls -> UI Window Base" - ---------- - -## Video Demo - -N/A - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -GXMark, alexzzzz, CaoMengde777, TroyDavis - ---------- - -## External links - -[Sourced from](http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/page-2#post-1834806) diff --git a/_site_test/Controls/switchToRectTransform.html b/_site_test/Controls/switchToRectTransform.html deleted file mode 100644 index 7999b1e..0000000 --- a/_site_test/Controls/switchToRectTransform.html +++ /dev/null @@ -1,226 +0,0 @@ - - - - - -SwitchToRectTransform — Unity UI Extensions - - - -SwitchToRectTransform | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

SwitchToRectTransform

- -

RectTransform extension method to move one RectTransform to another

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A programmatic extension that enables you, through code to move a RectTransform from one point on a screen to another point on the screen using a target RectTransform. This aligns all the Anchors, Pivots and offsets of the Target RectTransform.

- -
- -

Properties

- -

This is a static extension method; there are no inspector properties.

- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
switchToRectTransformRectTransform source, RectTransform targetMoves source to match anchors/pivots/offsets of target in screen space.
- -
- -

Usage

- -

Using this utility through code is very simply, just call:

- -
sourceRectTransform.switchToRectTransform(targetRectTransform);
-
- -

And the Source (from) Rect Transform will be moved to mimic the Target (to) RectTransform position.

- -
- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -
    -
  • Izitmee
    • -
  • Brave Michael
    • -
- -
- - - - - -
- - - - - diff --git a/_site_test/Controls/switchToRectTransform.md b/_site_test/Controls/switchToRectTransform.md deleted file mode 100644 index 1e05b9e..0000000 --- a/_site_test/Controls/switchToRectTransform.md +++ /dev/null @@ -1,83 +0,0 @@ -# SwitchToRectTransform - -RectTransform extension method to move one RectTransform to another - - - ---------- - -## Contents - -> 1 [Overview](#overview) -> -> 2 [Properties](#properties) -> -> 3 [Methods](#methods) -> -> 4 [Usage](#usage) -> -> 5 [Video Demo](#video-demo) -> -> 6 [See also](#see-also) -> -> 7 [Credits and Donation](#credits-and-donation) -> -> 8 [External links](#external-links) - ---------- - -## Overview - -A programmatic extension that enables you, through code to move a RectTransform from one point on a screen to another point on the screen using a target RectTransform. This aligns all the Anchors, Pivots and offsets of the Target RectTransform. - ---------- - -## Properties - -This is a static extension method; there are no inspector properties. - ---------- - -## Methods - -Method | Arguments | Description --|-|- -*switchToRectTransform*|RectTransform source, RectTransform target|Moves `source` to match anchors/pivots/offsets of `target` in screen space. - ---------- - -## Usage - -Using this utility through code is very simply, just call: - -```csharp -sourceRectTransform.switchToRectTransform(targetRectTransform); -``` - -And the Source (from) Rect Transform will be moved to mimic the Target (to) RectTransform position. - ---------- - -## Video Demo - -N/A - ---------- - -## See also - -N/A - ---------- - -## Credits and Donation - -* Izitmee -* Brave Michael - ---------- - -## External links - -* Izitmee - [http://forum.unity3d.com/threads/find-anchoredposition-of-a-recttransform-relative-to-another-recttransform](http://forum.unity3d.com/threads/find-anchoredposition-of-a-recttransform-relative-to-another-recttransform.330560/#post-2300992) -* Brave Michael - [http://forum.unity3d.com/threads/find-anchoredposition-of-a-recttransform-relative-to-another-recttransform](http://forum.unity3d.com/threads/find-anchoredposition-of-a-recttransform-relative-to-another-recttransform.330560/#post-2300992) \ No newline at end of file diff --git a/_site_test/Downloads.html b/_site_test/Downloads.html deleted file mode 100644 index 959b9c7..0000000 --- a/_site_test/Downloads.html +++ /dev/null @@ -1,291 +0,0 @@ - - - - - -Unity UI Extensions Asset downloads — Unity UI Extensions - - - -Unity UI Extensions Asset downloads | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Unity UI Extensions Asset downloads

- -

Below is a list of all the .UnityPackage asset package downloads for the Unity UI Extensions project (although we recommend using the UPM Packages for active use!)

- -

Release 2.3.2 - Rejuvenation (Latest) - 2023/11/26

- -

We have expanded where you can download the UnityPackage asset and widened the options to contribute to the project. Check the Release notes for Upgrade information

- -
-

I will still stress however, contribution is optional. The assets / code will always remain FREE

-
- -

Download from Itch.IO -Download from Union Assets -Download from Patreon

- -

Package archive on Bitbucket

- -

Below are a list of the .UnityPackages from previous releases.

- -

Release 2.3.2 - latest - Nov 2023

- - - -

Release 2.3

- - - -

Release 2019.6

- - - -

Release 2019.6 Examples

- - - -

Release 2019.5

- - - -

Release 2019.5 Examples

- - - -

Release 2019.4 (2.2)

- - - -

Release 2019.4 (2.2) Examples

- - - -

Release 2019.1 (2.1)

- - - -

Release 2.0

- - - -

Release 1.2

- - - -

Older Unity 5 and below packages

- -

Keeping with history, please find the Unity 5 and below historical packages for reference.

- -

Release 1.1

- -

Below is a list of all the previous asset package downloads for the Unity UI Extensions project (once Unity approve it. I’ll list the asset store link here as well)

- - - -
-

Note To retain 5.2 compatibility in the 5.3 package, you will see two warnings related to:

- - 
`UnityEngine.UI.InputField.onValueChange' is obsolete.  
-
- -

This has no effect on the package working in 5.4 plus and is only there to maintain backwards compatibility. We will look to update/remove this in a future release, likely after 5.4. If you have any concerns, feel free to update your code in your project to add the missing “d”. Unity have ensured it still works as they have mapped the API change for now.

-
- -

Other downloads on the Bitbucket site

- -

As this repo was created to support my new Unity UI Title “Unity 3D UI Essentials”, in the downloads section you will find two custom assets (SpaceShip-DemoScene-Start.unitypackage and RollABallSample-Start.unitypackage).

- -

These are just here as starter scenes for doing UI tasks in the book.

- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter / Facebook / YouTube

- -
-

Also, come chat live with the Unity UI Extensions community on Gitter here

- -

UI Extensions Live Chat

-
- -
- -
- - - - - diff --git a/_site_test/Downloads.md b/_site_test/Downloads.md deleted file mode 100644 index c10a156..0000000 --- a/_site_test/Downloads.md +++ /dev/null @@ -1,119 +0,0 @@ -# Unity UI Extensions Asset downloads - -Below is a list of all the `.UnityPackage` asset package downloads for the Unity UI Extensions project (although we recommend using the [UPM](/UPMInstallation.md) Packages for active use!) - -## Release 2.3.2 - Rejuvenation (Latest) - 2023/11/26 - -We have expanded where you can download the UnityPackage asset and widened the options to contribute to the project. **Check the [Release notes](./ReleaseNotes/RELEASENOTES.md) for Upgrade information** - -> I will still stress however, ***contribution is optional***. **The assets / code will always remain FREE** - -[![Download from Itch.IO](/SiteImages/itchio.png)](https://unityuiextensions.itch.io/uiextensions2-0 "Download from Itch.IO") -[![Download from Union Assets](/SiteImages/unionassets.png)](https://unionassets.com/unity-ui-extensions "Download from Union Assets") -[![Download from Patreon](/SiteImages/patreon.jpg)](https://www.patreon.com/UnityUIExtensions "Support Unity UI Extensions on Patreon & download") - -## Package archive on Bitbucket - -Below are a list of the `.UnityPackage`s from previous releases. - -### Release 2.3.2 - latest - Nov 2023 - -* [Unity UI Extensions Asset 2.3.2](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/releases/download/2.3.2/UnityUIExtensions-2.3.2.unitypackage) -* [Unity UI Extensions Asset 2.3.2 examples](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/releases/download/2.3.2/UnityUIExtensions-2.3.2-Examples.unitypackage) - -### Release 2.3 - -* [Unity UI Extensions Asset 2.3](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/releases/download/2.3.0/UnityUIExtensions-2.3.0.unitypackage) -* [Unity UI Extensions Asset 2.3 examples](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/releases/download/2.3.0/UnityUIExtensions-2.3.0-Examples.unitypackage) - -### Release 2019.6 - -* [Unity UI Extensions Asset 2019.6](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2019-6.unitypackage) - -### Release 2019.6 Examples - -* [Unity UI Extensions Examples 2019.6](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2019-6-Examples.unitypackage) - -### Release 2019.5 - -* [Unity UI Extensions Asset 2019.5](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2019-5.unitypackage) - -### Release 2019.5 Examples - -* [Unity UI Extensions Examples 2019.5](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2019-5-Examples.unitypackage) - -### Release 2019.4 (2.2) - -* [Unity UI Extensions Asset 2019.4 (V2.2)](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2019-4.unitypackage) - -### Release 2019.4 (2.2) Examples - -* [Unity UI Extensions Examples 2019.4 (V2.2)](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2019-4-Examples.unitypackage) - -### Release 2019.1 (2.1) - -* [Unity UI Extensions Asset 2019.1 (V2.1)](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2019-1.unitypackage) - -### Release 2.0 - -* [Unity UI Extensions Asset V2.0](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-2-0.unitypackage) - -### Release 1.2 - -* [Unity UI Extensions Asset V1.2](https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/downloads/UnityUIExtensions-1-2.unitypackage) - -## Older Unity 5 and below packages - -Keeping with history, please find the Unity 5 and below historical packages for reference. - -### Release 1.1 - -Below is a list of all the previous asset package downloads for the Unity UI Extensions project (once Unity approve it. I'll list the asset store link here as well) - -* [Unity UI Extensions Unity 4.x Asset](https://bitbucket.org/ddreaper/unity-ui-extensions/downloads/UnityUIExtensions-4.x.unitypackage) - -* [Unity UI Extensions Unity 5.1 Asset](https://bitbucket.org/ddreaper/unity-ui-extensions/downloads/UnityUIExtensions-5.1.unitypackage) - -* [Unity UI Extensions Unity 5.2 Asset](https://bitbucket.org/ddreaper/unity-ui-extensions/downloads/UnityUIExtensions-5.2.unitypackage) <- 5.2.0 - 5.2.1 base releases ONLY - -* [Unity UI Extensions Unity 5.3 (5.2.1P+) Asset](https://bitbucket.org/ddreaper/unity-ui-extensions/downloads/UnityUIExtensions-5.3.unitypackage) <- use this for 5.2.1P+ releases - -> **Note** To retain 5.2 compatibility in the 5.3 package, you will see two warnings related to: -> -> ```csharp -> `UnityEngine.UI.InputField.onValueChange' is obsolete. -> ``` -> -> This has no effect on the package working in 5.4 plus and is only there to maintain backwards compatibility. We will look to update/remove this in a future release, likely after 5.4. If you have any concerns, feel free to update your code in your project to add the missing "d". Unity have ensured it still works as they have mapped the API change for now. - -## Other downloads on the Bitbucket site - -As this repo was created to support my new Unity UI Title ["Unity 3D UI Essentials"](http://bit.ly/Unity3DUIEssentials), in the downloads section you will find two custom assets (SpaceShip-DemoScene-Start.unitypackage and RollABallSample-Start.unitypackage). - -These are just here as starter scenes for doing UI tasks in the book. - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here -> -> ## [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/FurtherInfo.html b/_site_test/FurtherInfo.html deleted file mode 100644 index 14cd916..0000000 --- a/_site_test/FurtherInfo.html +++ /dev/null @@ -1,174 +0,0 @@ - - - - - -Like what you see — Unity UI Extensions - - - -Like what you see | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Like what you see

- -

All these scripts were put together for my latest book Unity3D UI Essentials -Check out the page on my blog for more details and learn all about the inner workings of the new Unity UI System.

- - - -

Coming soon.

- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter / Facebook / YouTube

- -
-

Also, come chat live with the Unity UI Extensions community on Gitter here

- -

UI Extensions Live Chat

-
- -
- -
- - - - - diff --git a/_site_test/FurtherInfo.md b/_site_test/FurtherInfo.md deleted file mode 100644 index eac76b6..0000000 --- a/_site_test/FurtherInfo.md +++ /dev/null @@ -1,34 +0,0 @@ -# Like what you see - -All these scripts were put together for my latest book Unity3D UI Essentials -Check out the [page on my blog](http://bit.ly/Unity3DUIEssentials) for more details and learn all about the inner workings of the new Unity UI System. - -## Links to other UI resources - -Coming soon. - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here -> -> ## [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/GettingStarted.html b/_site_test/GettingStarted.html deleted file mode 100644 index f753e07..0000000 --- a/_site_test/GettingStarted.html +++ /dev/null @@ -1,196 +0,0 @@ - - - - - -Getting started Unity UI Extensions — Unity UI Extensions - - - -Getting started Unity UI Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Getting started Unity UI Extensions

- -

It is very easy to get started with the Unity UI Extensions project, just add it to your project using the instructions below or check out the Downloads page for more details.

- -

Then take any of the UI controls for a spin in your project.

- -
-

Seriously needs refreshing for the new world order 🤣

-
- -

View Intro Video

- -
- -

Installation Instructions

- -

As of Unity 2019, there are now two paths for getting access to the Unity UI Extensions project:

- -
    -
  • Unity 2019 or higher -The recommended way to add the Unity UI Extensions project to your solution is to use the Unity package Manager. Simply use the Unity Package Manager to reference the project and install it.
    • -
- -

Alternatively, you can also use the pre-compiled Unity packages if you wish, however, UPM offers full versioning support to allow you to switch versions as you wish.

- -
    -
  • Unity 2018 or lower -The pre-compiled Unity assets are the only solution for Unity 2018 or earlier due to the changes in the Unity UI framework in Unity made for 2019. -Either clone / download this repository to your machine and then copy the scripts in, or use the pre-packaged .UnityPackage for your version of Unity and import it as a custom package in to your project.
    • -
- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter / Facebook / YouTube

- -
-

Also, come chat live with the Unity UI Extensions community on Gitter here

- -

UI Extensions Live Chat

-
- -
- -
- - - - - diff --git a/_site_test/GettingStarted.md b/_site_test/GettingStarted.md deleted file mode 100644 index 9d21d7f..0000000 --- a/_site_test/GettingStarted.md +++ /dev/null @@ -1,50 +0,0 @@ -# Getting started Unity UI Extensions - -It is very easy to get started with the Unity UI Extensions project, just add it to your project using the [instructions below](#installation-instructions) or check out the [Downloads page](/Downloads.md) for more details. - -Then take any of the UI controls for a spin in your project. - -> Seriously needs refreshing for the new world order 🤣 - -[![View Intro Video](http://img.youtube.com/vi/njoIeE4akq0/0.jpg)](http://www.youtube.com/watch?v=njoIeE4akq0 "Unity UI Extensions intro video") - ------ - -## Installation Instructions - -As of Unity 2019, there are now two paths for getting access to the Unity UI Extensions project: - -- [Unity 2019 or higher](/UPMInstallation.md) -The recommended way to add the Unity UI Extensions project to your solution is to use the Unity package Manager. Simply use the [Unity Package Manager](/UPMInstallation.md) to reference the project and install it. - -Alternatively, you can also use the [pre-compiled Unity packages](/Downloads.md) if you wish, however, UPM offers full versioning support to allow you to switch versions as you wish. - -- [Unity 2018 or lower](/Downloads.md) -The [pre-compiled Unity assets](/Downloads.md) are the only solution for Unity 2018 or earlier due to the changes in the Unity UI framework in Unity made for 2019. -Either clone / download this repository to your machine and then copy the scripts in, or use the pre-packaged .UnityPackage for your version of Unity and import it as a custom package in to your project. - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here -> -> ## [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/License.md b/_site_test/License.md deleted file mode 100644 index 4ed0cc3..0000000 --- a/_site_test/License.md +++ /dev/null @@ -1,45 +0,0 @@ -# Unity UI Extensions License (BSD3) - -Copyright (c) 2015 - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. - ------ - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -| | | -|---|---| -| [![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal") | [![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee") | - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here: [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/MISSING_CONTENT.html b/_site_test/MISSING_CONTENT.html deleted file mode 100644 index f008893..0000000 --- a/_site_test/MISSING_CONTENT.html +++ /dev/null @@ -1,451 +0,0 @@ - - - - - -Missing Demo Content — uGUI Controls — Unity UI Extensions - - - -Missing Demo Content — uGUI Controls | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Missing Demo Content — uGUI Controls

- -

Controls listed here have basic documentation but no demo images or video links.
-They are excluded from the controls listing page until demo content is added.

- -

To get a control re-listed: add at least one screenshot or GIF to Controls/Images/,
-reference it in the control’s .md file, then remove it from this list.

- -
- -

Excluded uGUI Controls (36)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ControlFileNotes
BestFitOutlineControls/BestFitOutline.mdText effect — needs before/after screenshot
BoundToolTipControls/BoundToolTip.mdTooltip variant — needs inspector screenshot
CLFZ2Controls/CLFZ2.mdCompression utility — needs usage screenshot
CurvedLayoutControls/CurvedLayout.mdLayout — needs arc arrangement demo
CurvedTextControls/CurvedText.mdText effect — needs curve demo screenshot
CylinderTextControls/CylinderText.mdText effect — needs cylinder wrap demo
DragCorrectorControls/DragCorrector.mdUtility — needs inspector screenshot
ExtensionsToggleControls/ExtensionsToggle.mdToggle — needs screenshot
ExtensionsToggleGroupControls/ExtensionsToggleGroup.mdToggle group — needs screenshot
GamePadInputModuleControls/GamePadInputModule.mdInput module — needs inspector screenshot
HoverToolTipControls/HoverToolTip.mdTooltip — needs hover state GIF
ImageExtendedControls/ImageExtended.mdImage extension — needs screenshot
Infinite Scroll SnapControls/Infinite Scroll Snap.mdScroll — needs demo GIF (note: has InfiniteScrollInspector.jpg in Images/ but not linked)
InputFieldEnterSubmitControls/InputFieldEnterSubmit.mdInput utility — needs demo GIF
InputFocusControls/InputFocus.mdInput utility — needs demo GIF
MinMaxSliderControls/MinMaxSlider.mdSlider — needs screenshot (note: has no image files in Images/)
MultiTouchScrollRectControls/MultiTouchScrollRect.mdScrollRect fix — no visual change, needs usage note
NicerOutlineControls/NicerOutline.mdOutline effect — needs before/after screenshot
PPIViewerControls/PPIViewer.mdUtility — needs runtime screenshot
RaycastMaskControls/RaycastMask.mdUtility — needs hit-area demo screenshot
RescaleDragPanelControls/RescaleDragPanel.mdPanel — needs resize GIF
RescalePanelControls/RescalePanel.mdPanel — needs resize GIF
ResizePanelControls/ResizePanel.mdPanel — needs resize GIF
ReturnKeyTriggerControls/ReturnKeyTrigger.mdInput utility — needs demo GIF
ScrollerControls/Scroller.mdScroll utility — needs screenshot
SerializationControls/Serialization.mdUtility — needs usage code example or screenshot
ShaderEffectsControls/ShaderEffects.mdEffects — needs screenshot
UICircleControls/UICircle.mdPrimitive — needs shape screenshot
UICornerCutControls/UICornerCut.mdEffect — needs before/after screenshot
UIImageCropControls/UIImageCrop.mdImage utility — needs crop demo screenshot
UILineRendererFIFOControls/UILineRendererFIFO.mdLine renderer variant — needs demo
UILineRendererListControls/UILineRendererList.mdLine renderer variant — needs demo
UILineTextureRendererControls/UILineTextureRenderer.mdLine renderer variant — needs demo
UISquircleControls/UISquircle.mdPrimitive — needs squircle shape screenshot
UIWindowBaseControls/UIWindowBase.mdWindow — needs screenshot
switchToRectTransformControls/switchToRectTransform.mdUtility — needs inspector/usage screenshot
- -
- -

UIToolkit Controls — Missing Visual Demos

- -

All 18 UIToolkit controls have complete text documentation and code examples but
-no screenshots or animated demos yet. They appear on the UIToolkit controls page
-but are marked as lacking visual reference.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ControlPriorityNotes
ScrollSnapHighCore navigation control — needs swipe demo GIF
CollapsibleSectionHighVisible expand/collapse — easy GIF to capture
StepProgressBarHighVisual fill progress — needs progress demo
PillButtonHighPrimary CTA — needs flash animation GIF
ColorToggleGroupHighTap/drag selection — needs interaction GIF
PageDotIndicatorMediumPagination dots — needs animated GIF
QuadrantStepperMediumStep selector overlay — needs GIF
PillInputFieldMediumInput with label — needs screenshot
RoundedInputFieldMediumRounded input — needs screenshot
PillSelectorMediumSelector row — needs screenshot
CircularImageButtonMediumAvatar button — needs screenshot
GrayscaleImageMediumShader effect — needs before/after
LoadingIconMediumSpinner — needs rotation GIF
IconLabelButtonLowRow button — needs screenshot
ToggleButtonLowToggle — needs screenshot
ColorToggleButtonLowTinted toggle — needs screenshot
ToastSwipeDismissManipulatorLowUtility manipulator — needs swipe GIF
ComingSoonMessageLowPlaceholder panel — needs screenshot
- -
- -

How to Contribute Demo Content

- -
    -
  1. Capture a screenshot or GIF of the control in action in the Unity Editor or Play Mode
    2. -
  2. Name the file clearly: e.g. UICircleDemo.gif or UICircleInspector.jpg
    3. -
  3. Place it in Controls/Images/ (for uGUI) or uitoolkit/controls/images/ (for UIToolkit)
    4. -
  4. Reference it in the control’s .md file
    5. -
  5. Remove the control from this list (or update its row if it still needs video)
    6. -
  6. The control will automatically appear on the controls listing page on next build
    7. -
- -
- - - - - diff --git a/_site_test/MISSING_CONTENT.md b/_site_test/MISSING_CONTENT.md deleted file mode 100644 index cc4e908..0000000 --- a/_site_test/MISSING_CONTENT.md +++ /dev/null @@ -1,90 +0,0 @@ -# Missing Demo Content — uGUI Controls - -Controls listed here have basic documentation but **no demo images or video links**. -They are **excluded from the controls listing page** until demo content is added. - -To get a control re-listed: add at least one screenshot or GIF to `Controls/Images/`, -reference it in the control's `.md` file, then remove it from this list. - ---- - -## Excluded uGUI Controls (36) - -| Control | File | Notes | -|---|---|---| -| BestFitOutline | `Controls/BestFitOutline.md` | Text effect — needs before/after screenshot | -| BoundToolTip | `Controls/BoundToolTip.md` | Tooltip variant — needs inspector screenshot | -| CLFZ2 | `Controls/CLFZ2.md` | Compression utility — needs usage screenshot | -| CurvedLayout | `Controls/CurvedLayout.md` | Layout — needs arc arrangement demo | -| CurvedText | `Controls/CurvedText.md` | Text effect — needs curve demo screenshot | -| CylinderText | `Controls/CylinderText.md` | Text effect — needs cylinder wrap demo | -| DragCorrector | `Controls/DragCorrector.md` | Utility — needs inspector screenshot | -| ExtensionsToggle | `Controls/ExtensionsToggle.md` | Toggle — needs screenshot | -| ExtensionsToggleGroup | `Controls/ExtensionsToggleGroup.md` | Toggle group — needs screenshot | -| GamePadInputModule | `Controls/GamePadInputModule.md` | Input module — needs inspector screenshot | -| HoverToolTip | `Controls/HoverToolTip.md` | Tooltip — needs hover state GIF | -| ImageExtended | `Controls/ImageExtended.md` | Image extension — needs screenshot | -| Infinite Scroll Snap | `Controls/Infinite Scroll Snap.md` | Scroll — needs demo GIF (note: has `InfiniteScrollInspector.jpg` in Images/ but not linked) | -| InputFieldEnterSubmit | `Controls/InputFieldEnterSubmit.md` | Input utility — needs demo GIF | -| InputFocus | `Controls/InputFocus.md` | Input utility — needs demo GIF | -| MinMaxSlider | `Controls/MinMaxSlider.md` | Slider — needs screenshot (note: has no image files in Images/) | -| MultiTouchScrollRect | `Controls/MultiTouchScrollRect.md` | ScrollRect fix — no visual change, needs usage note | -| NicerOutline | `Controls/NicerOutline.md` | Outline effect — needs before/after screenshot | -| PPIViewer | `Controls/PPIViewer.md` | Utility — needs runtime screenshot | -| RaycastMask | `Controls/RaycastMask.md` | Utility — needs hit-area demo screenshot | -| RescaleDragPanel | `Controls/RescaleDragPanel.md` | Panel — needs resize GIF | -| RescalePanel | `Controls/RescalePanel.md` | Panel — needs resize GIF | -| ResizePanel | `Controls/ResizePanel.md` | Panel — needs resize GIF | -| ReturnKeyTrigger | `Controls/ReturnKeyTrigger.md` | Input utility — needs demo GIF | -| Scroller | `Controls/Scroller.md` | Scroll utility — needs screenshot | -| Serialization | `Controls/Serialization.md` | Utility — needs usage code example or screenshot | -| ShaderEffects | `Controls/ShaderEffects.md` | Effects — needs screenshot | -| UICircle | `Controls/UICircle.md` | Primitive — needs shape screenshot | -| UICornerCut | `Controls/UICornerCut.md` | Effect — needs before/after screenshot | -| UIImageCrop | `Controls/UIImageCrop.md` | Image utility — needs crop demo screenshot | -| UILineRendererFIFO | `Controls/UILineRendererFIFO.md` | Line renderer variant — needs demo | -| UILineRendererList | `Controls/UILineRendererList.md` | Line renderer variant — needs demo | -| UILineTextureRenderer | `Controls/UILineTextureRenderer.md` | Line renderer variant — needs demo | -| UISquircle | `Controls/UISquircle.md` | Primitive — needs squircle shape screenshot | -| UIWindowBase | `Controls/UIWindowBase.md` | Window — needs screenshot | -| switchToRectTransform | `Controls/switchToRectTransform.md` | Utility — needs inspector/usage screenshot | - ---- - -## UIToolkit Controls — Missing Visual Demos - -All 18 UIToolkit controls have **complete text documentation and code examples** but -**no screenshots or animated demos** yet. They appear on the UIToolkit controls page -but are marked as lacking visual reference. - -| Control | Priority | Notes | -|---|---|---| -| ScrollSnap | High | Core navigation control — needs swipe demo GIF | -| CollapsibleSection | High | Visible expand/collapse — easy GIF to capture | -| StepProgressBar | High | Visual fill progress — needs progress demo | -| PillButton | High | Primary CTA — needs flash animation GIF | -| ColorToggleGroup | High | Tap/drag selection — needs interaction GIF | -| PageDotIndicator | Medium | Pagination dots — needs animated GIF | -| QuadrantStepper | Medium | Step selector overlay — needs GIF | -| PillInputField | Medium | Input with label — needs screenshot | -| RoundedInputField | Medium | Rounded input — needs screenshot | -| PillSelector | Medium | Selector row — needs screenshot | -| CircularImageButton | Medium | Avatar button — needs screenshot | -| GrayscaleImage | Medium | Shader effect — needs before/after | -| LoadingIcon | Medium | Spinner — needs rotation GIF | -| IconLabelButton | Low | Row button — needs screenshot | -| ToggleButton | Low | Toggle — needs screenshot | -| ColorToggleButton | Low | Tinted toggle — needs screenshot | -| ToastSwipeDismissManipulator | Low | Utility manipulator — needs swipe GIF | -| ComingSoonMessage | Low | Placeholder panel — needs screenshot | - ---- - -## How to Contribute Demo Content - -1. Capture a screenshot or GIF of the control in action in the Unity Editor or Play Mode -2. Name the file clearly: e.g. `UICircleDemo.gif` or `UICircleInspector.jpg` -3. Place it in `Controls/Images/` (for uGUI) or `uitoolkit/controls/images/` (for UIToolkit) -4. Reference it in the control's `.md` file -5. Remove the control from this list (or update its row if it still needs video) -6. The control will automatically appear on the controls listing page on next build diff --git a/_site_test/SiteImages/AddingUPMAsset.png b/_site_test/SiteImages/AddingUPMAsset.png deleted file mode 100644 index 9b84cfc..0000000 Binary files a/_site_test/SiteImages/AddingUPMAsset.png and /dev/null differ diff --git a/_site_test/SiteImages/LineRenderer.gif b/_site_test/SiteImages/LineRenderer.gif deleted file mode 100644 index a3d40d2..0000000 Binary files a/_site_test/SiteImages/LineRenderer.gif and /dev/null differ diff --git a/_site_test/SiteImages/NewInputSystem-01.jpg b/_site_test/SiteImages/NewInputSystem-01.jpg deleted file mode 100644 index 1bbd5fc..0000000 Binary files a/_site_test/SiteImages/NewInputSystem-01.jpg and /dev/null differ diff --git a/_site_test/SiteImages/NewInputSystem-02.jpg b/_site_test/SiteImages/NewInputSystem-02.jpg deleted file mode 100644 index 2d37edd..0000000 Binary files a/_site_test/SiteImages/NewInputSystem-02.jpg and /dev/null differ diff --git a/_site_test/SiteImages/NewInputSystem-03.jpg b/_site_test/SiteImages/NewInputSystem-03.jpg deleted file mode 100644 index e66014b..0000000 Binary files a/_site_test/SiteImages/NewInputSystem-03.jpg and /dev/null differ diff --git a/_site_test/SiteImages/NewInputSystem-04.jpg b/_site_test/SiteImages/NewInputSystem-04.jpg deleted file mode 100644 index 0533d14..0000000 Binary files a/_site_test/SiteImages/NewInputSystem-04.jpg and /dev/null differ diff --git a/_site_test/SiteImages/ScrollSnap.gif b/_site_test/SiteImages/ScrollSnap.gif deleted file mode 100644 index 4a9fc90..0000000 Binary files a/_site_test/SiteImages/ScrollSnap.gif and /dev/null differ diff --git a/_site_test/SiteImages/UIKnob.gif b/_site_test/SiteImages/UIKnob.gif deleted file mode 100644 index ba4d561..0000000 Binary files a/_site_test/SiteImages/UIKnob.gif and /dev/null differ diff --git a/_site_test/SiteImages/UnityPackageManager.gif b/_site_test/SiteImages/UnityPackageManager.gif deleted file mode 100644 index 1ab7677..0000000 Binary files a/_site_test/SiteImages/UnityPackageManager.gif and /dev/null differ diff --git a/_site_test/SiteImages/UnityPackageManager.png b/_site_test/SiteImages/UnityPackageManager.png deleted file mode 100644 index 9a7165b..0000000 Binary files a/_site_test/SiteImages/UnityPackageManager.png and /dev/null differ diff --git a/_site_test/SiteImages/ViewUPMPAckages.png b/_site_test/SiteImages/ViewUPMPAckages.png deleted file mode 100644 index 3b5c486..0000000 Binary files a/_site_test/SiteImages/ViewUPMPAckages.png and /dev/null differ diff --git a/_site_test/SiteImages/itchio.png b/_site_test/SiteImages/itchio.png deleted file mode 100644 index aa22f3f..0000000 Binary files a/_site_test/SiteImages/itchio.png and /dev/null differ diff --git a/_site_test/SiteImages/patreon.jpg b/_site_test/SiteImages/patreon.jpg deleted file mode 100644 index cac01d2..0000000 Binary files a/_site_test/SiteImages/patreon.jpg and /dev/null differ diff --git a/_site_test/SiteImages/unionassets.png b/_site_test/SiteImages/unionassets.png deleted file mode 100644 index aed396f..0000000 Binary files a/_site_test/SiteImages/unionassets.png and /dev/null differ diff --git a/_site_test/UPMInstallation.html b/_site_test/UPMInstallation.html deleted file mode 100644 index 266c4c9..0000000 --- a/_site_test/UPMInstallation.html +++ /dev/null @@ -1,302 +0,0 @@ - - - - - -Unity Package Manager (UPM) Installation guide — Unity UI Extensions - - - -Unity Package Manager (UPM) Installation guide | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Unity Package Manager (UPM) Installation guide

- -

As of Unity 2019, Unity now recommends using their new Unity Package Manager (UPM) system for the installation of assets and components rather than just importing custom asset packages, this provides several advantages:

- -
    -
  • Version control - UPM is versioned and allows easy switching of versions on-demand with no impact to your project
    • -
  • No corruption of your Asset folder in your solution - As the assets/packages are kept separate from your solution, this means your assets folder won’t get clogged up with everything you’ve added, meaning your project size will be smaller.
    • -
  • No conflicts when upgrading - We have all had the pain when an asset is updated but doesn’t remove old code/art / etc from the project, usually you delete the old folder (if an asset is useing a folder) before re-importing. UPM does not need to do this.
    • -
- -
- -

Getting ready for UPM

- -

If you have previously used the Unity UI Extensions in your project, make sure you delete the old “unity-ui-extensions” asset folder from your project before installing the UPM version.

- -

If you still wish to continue using the older Asset method, this is perfectly fine and you can upgrade as normal using the downloadable packages. Just be sure to delete the old folder first before re-importing.

- -
- -

UPM Installation

- -
-

Note, this instructions only apply to Unity 2019 and above. For 2018 and below, you will have to continue with the existing Asset import method

-
- -

The Unity UI Extension project is published in a few places for access via UPM, namely:

- -
    -
  • OpenUPM https://openupm.com/packages/com.unity.uiextensions
    • -
  • NPM https://www.npmjs.com/package/com.unity.uiextensions
    • -
- -

OpenUPM Installation

- -

OpenUPM has become the new standard for deploying UPM packages for Unity, so from the 2.3 (2023) release, we will also be publishing to OpenUPM.

- -

openupm

- -

The simplest way to getting started using the core platform package in your project is via OpenUPM. Visit OpenUPM to learn more about it. Once you have the OpenUPM CLI set up use the following command to add the package to your project:

- -
  openupm add com.unity.uiextensions
-
- -
-

For more details on using OpenUPM CLI, check the docs here.

-
- -

Alternatively, you can register the OpenUPM source manually in your manifest.json along with the scoped registry for finding it, for more details see the OpenUPM documentation.

- -

NPM INstallation

- -

From the 2019.4 release, the UI Extensions has published its UPM packages to the NPM repository at NPMJS, this allows us to have full tracking history for releases.

- -

To consume this package source, you simply need to edit your “manifest.json” located in your projects “Packages” folder in the root of your project (not the assets folder). The easiest way to find it is to Right-Click the “Packages” folder in the Project Explorer and select “Show in Explorer”.

- -

Show in Explorer

- -

Once you open the “Packages” folder, locate the “manifest.json” file and open it in your favourite text editor.

- -

Then you need to add a “ScopedRegistry” and the “com.unity.uiextensions” package to the contents as follows:

- -
  "scopedRegistries": [
-    {
-      "name": "npmjs",
-      "url": "https://registry.npmjs.org/",
-      "scopes": [
-        "com.unity.uiextensions"
-      ]
-    }
-  ],
-  "dependencies": {
-    "com.unity.uiextensions": "2.2.4",
-
- -
-

If you prefer, you can simply just add the Scoped Registry and then use the Unity Package manager interface to search for and add the package. Note, the version number will change from release to release

-
- -

Then when a new release becomes available, simply use the Unity Package Manager interface to upgrade (or downgrade) the version of the UI Extensions project your solution uses.

- -

Unity Package Manager

- -
- -

Development Source

- -
-

https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git

-
- -

To add the Unity UI Extensions direct from the GitHub source you simply need to register in the Unity Package Manager interface which is accessed via the editor menu (Editor -> Window -> Package Manager)

- -

- -

Once Open, you simply need to add the Unity UI Extensions package by Clicking on the + symbol and selecting “Add package from git url…”

- -

- -

Now paste in the GitHub URL https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git in the box that appears and click “Add”. This will automatically install the project into your solution.

- -
- -

Development Builds

- -

To get access to the development source, you simply need to append the selected branch into the Git URL using either the manual or Git Package method as follows:

- -
    -
  • https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git#development
    • -
- -

This will import the development version instead of the standard release version. We are working on getting preview packages published, but they are not available as yet.

- -
-

Note in testing, Unity did not import the package using the Git URL method in the package manager initially. but trying a second time with the tag did work? Another path is to add the package as normal, and then update the package manifest manually to add the “#development” tag to switch to the development build.

-
- -
- -

Examples Installation

- -

From the 2019.4 release, due to the restructuring required by Unity, the Examples for the Unity UI Extension project are now separate. Regardless of what version of Unity you are running, these will remain as a Unity asset to download and install as normal (and then remove when you no longer need them)

- -

If there is a demand in the future, these will be added to a second UPM package so that you can pick and chose which examples to add to your project for reference.

- -

Release 2.3.2 Examples (Current)

- - - -
-

UPM users can also now import the Examples direct from the Unity Package Manager in the asset description.

-
- -

All previous versions of the Unity UI Extensions included the examples within the main project asset, these can all be deleted safely.

- -
- -

Supporting the UI Extensions project

- -

If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below.

- -

All funds go to support the project, no matter the amount. Donations in code are also extremely welcome

- - - - - - - - - - - - - - -
Donate via PayPalBuy us a Coffee
  
- -
-

(PayPal account not required and you can remain anonymous if you wish)

-
- -
- -

You can follow the UI Extensions team for updates and news on:

- -

Twitter / Facebook / YouTube

- -
-

Also, come chat live with the Unity UI Extensions community on Gitter here

- -

UI Extensions Live Chat

-
- -
- -
- - - - - diff --git a/_site_test/UPMInstallation.md b/_site_test/UPMInstallation.md deleted file mode 100644 index c9ae181..0000000 --- a/_site_test/UPMInstallation.md +++ /dev/null @@ -1,144 +0,0 @@ -# Unity Package Manager (UPM) Installation guide - -As of Unity 2019, Unity now recommends using their new Unity Package Manager (UPM) system for the installation of assets and components rather than just importing custom asset packages, this provides several advantages: - -- **Version control** - UPM is versioned and allows easy switching of versions on-demand with no impact to your project -- **No corruption of your Asset folder in your solution** - As the assets/packages are kept separate from your solution, this means your assets folder won't get clogged up with everything you've added, meaning your project size will be smaller. -- **No conflicts when upgrading** - We have all had the pain when an asset is updated but doesn't remove old code/art / etc from the project, usually you delete the old folder (if an asset is useing a folder) before re-importing. UPM does not need to do this. - ------- - -## Getting ready for UPM - -If you have previously used the Unity UI Extensions in your project, make sure you **delete the old "unity-ui-extensions" asset folder** from your project before installing the UPM version. - -If you still wish to continue using the [older Asset method](/Downloads.md), this is perfectly fine and you can upgrade as normal using the downloadable packages. Just be sure to delete the old folder first before re-importing. - ------- - -## UPM Installation - -> **Note, this instructions only apply to Unity 2019 and above. For 2018 and below, you will have to continue with the existing Asset import method** - -The Unity UI Extension project is published in a few places for access via UPM, namely: - -- [OpenUPM](https://openupm.com/packages/com.unity.uiextensions) `https://openupm.com/packages/com.unity.uiextensions` -- [NPM](https://www.npmjs.com/package/com.unity.uiextensions) `https://www.npmjs.com/package/com.unity.uiextensions` - -### OpenUPM Installation - -[OpenUPM](http://openupm.com/) has become the new standard for deploying UPM packages for Unity, so from the 2.3 (2023) release, we will also be publishing to OpenUPM. - -[![openupm](https://img.shields.io/npm/v/com.unity.uiextensions?label=openupm®istry_uri=https://package.openupm.com)](https://openupm.com/packages/com.unity.uiextensions/) - -The simplest way to getting started using the core platform package in your project is via OpenUPM. Visit [OpenUPM](https://openupm.com/docs/) to learn more about it. Once you have the OpenUPM CLI set up use the following command to add the package to your project: - -```cli - openupm add com.unity.uiextensions -``` - -> For more details on using [OpenUPM CLI, check the docs here](https://github.com/openupm/openupm-cli#installation). - -Alternatively, you can register the OpenUPM source manually in your ```manifest.json``` along with the scoped registry for finding it, for more details see the [OpenUPM documentation](https://openupm.com/docs/getting-started.html#understanding-manifest-changes). - -### NPM INstallation - -From the 2019.4 release, the UI Extensions has published its UPM packages to the NPM repository at [NPMJS](https://www.npmjs.com/), this allows us to have full tracking history for releases. - -To consume this package source, you simply need to edit your "**manifest.json**" located in your projects "Packages" folder in the root of your project (not the assets folder). The easiest way to find it is to Right-Click the "Packages" folder in the Project Explorer and select "Show in Explorer". - -![Show in Explorer](/SiteImages/ViewUPMPAckages.png) - -Once you open the "**Packages**" folder, locate the "**manifest.json**" file and open it in your favourite text editor. - -Then you need to add a "**ScopedRegistry**" and the "**com.unity.uiextensions**" package to the contents as follows: - -```xml - "scopedRegistries": [ - { - "name": "npmjs", - "url": "https://registry.npmjs.org/", - "scopes": [ - "com.unity.uiextensions" - ] - } - ], - "dependencies": { - "com.unity.uiextensions": "2.2.4", -``` - -> If you prefer, you can simply just add the Scoped Registry and then use the Unity Package manager interface to search for and add the package. **Note, the version number will change from release to release** - -Then when a new release becomes available, simply use the Unity Package Manager interface to upgrade (or downgrade) the version of the UI Extensions project your solution uses. - -![Unity Package Manager](/SiteImages/UnityPackageManager.gif) - ------- - -### [Development Source](https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git) - -> https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git - -To add the Unity UI Extensions direct from the [GitHub source](https://github.com/unity-UI-Extensions/com.unity.uiextensions) you simply need to register in the Unity Package Manager interface which is accessed via the editor menu (Editor -> Window -> Package Manager) - -![](/SiteImages/UnityPackageManager.png) - -Once Open, you simply need to add the Unity UI Extensions package by Clicking on the + symbol and selecting "**Add package from git url...**" - -![](/SiteImages/AddingUPMAsset.png) - -Now paste in the [GitHub URL](https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git) ```https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git``` in the box that appears and click "Add". This will automatically install the project into your solution. - ------- - -### Development Builds - -To get access to the development source, you simply need to append the selected branch into the Git URL using either the manual or Git Package method as follows: - -- https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git#development - -This will import the development version instead of the standard release version. We are working on getting preview packages published, but they are not available as yet. - -> **Note** in testing, Unity did not import the package using the Git URL method in the package manager initially. but trying a second time with the tag did work? Another path is to add the package as normal, and then update the package manifest manually to add the "#development" tag to switch to the development build. - ------- - -## Examples Installation - -From the 2019.4 release, due to the restructuring required by Unity, the Examples for the Unity UI Extension project are now separate. Regardless of what version of Unity you are running, these will remain as a Unity asset to download and install as normal (and then remove when you no longer need them) - -If there is a demand in the future, these will be added to a second UPM package so that you can pick and chose which examples to add to your project for reference. - -### Release 2.3.2 Examples (Current) - -- [Unity UI Extensions Examples (V2.3)](https://github.com/Unity-UI-Extensions/com.unity.uiextensions/releases/download/2.3.0/UnityUIExtensions-2.3.0-Examples.unitypackage) - -> UPM users can also now import the Examples direct from the Unity Package Manager in the asset description. - -All previous versions of the Unity UI Extensions included the examples within the main project asset, these can all be deleted safely. - ------- - -## [Supporting the UI Extensions project](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ) - -If you wish to further support the Unity UI Extensions project itself, then you can either subsidize your downloads above, or using the links below. - -All funds go to support the project, no matter the amount. **Donations in code are also extremely welcome** - -|[![Donate via PayPal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-150px.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=89L8T9N6BR7LJ "Donating via Paypal")|[![Buy us a Coffee](https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5cbed8a4ae2b88347c06c923_BuyMeACoffee_blue-p-500.png)](https://ko-fi.com/uiextensions "Buy us a Coffee")| -|-|-| -||| - -> (PayPal account not required and you can remain anonymous if you wish) - ------ - -You can follow the UI Extensions team for updates and news on: - -## [Twitter](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/channel/UCG3gZOkmL-2rmZat4ufv28Q) - -> ## Also, come chat live with the Unity UI Extensions community on Gitter here -> -> ## [UI Extensions Live Chat](https://gitter.im/Unity-UI-Extensions/Lobby) - ------ diff --git a/_site_test/assets/css/neon.css b/_site_test/assets/css/neon.css deleted file mode 100644 index acd9f49..0000000 --- a/_site_test/assets/css/neon.css +++ /dev/null @@ -1,1343 +0,0 @@ -/* ============================================================ - Unity UI Extensions — Neon Arcade Theme - Single-theme CSS (no switcher). All pages use this file. - ============================================================ */ - -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;600;700;900&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap'); - -/* ============================================================ - Custom Properties - ============================================================ */ -:root { - /* Backgrounds */ - --bg: #050508; - --bg-2: #08080e; - --surface: #0d0d18; - --surface-2: #111122; - --surface-3: #161630; - - /* Borders */ - --border: rgba(255, 0, 153, 0.12); - --border-t: rgba(0, 255, 238, 0.12); - --border-n: rgba(255, 255, 255, 0.06); - - /* Text */ - --text: #e8e8f0; - --text-2: #9090a8; - --text-3: #55556a; - - /* uGUI accent — Hot Pink / Magenta */ - --u: #ff0099; - --u-dim: rgba(255, 0, 153, 0.14); - --u-glow: 0 0 20px rgba(255, 0, 153, 0.55), 0 0 60px rgba(255, 0, 153, 0.20); - --u-grad: linear-gradient(135deg, #ff44cc 0%, #ff0099 60%, #cc0077 100%); - --u-text: #ff33bb; - - /* UIToolkit accent — Cyan */ - --t: #00ffee; - --t-dim: rgba(0, 255, 238, 0.12); - --t-glow: 0 0 20px rgba(0, 255, 238, 0.55), 0 0 60px rgba(0, 255, 238, 0.20); - --t-grad: linear-gradient(135deg, #44ffff 0%, #00ffee 60%, #00bbbb 100%); - --t-text: #33ffee; - - /* General accent (defaults to uGUI pink unless overridden per-page) */ - --accent: var(--u); - --accent-dim: var(--u-dim); - --accent-glow: var(--u-glow); - --accent-grad: var(--u-grad); - --accent-text: var(--u-text); - - /* Typography */ - --font-h: 'Orbitron', system-ui, sans-serif; - --font-b: 'Inter', system-ui, sans-serif; - --font-code: 'JetBrains Mono', 'Consolas', monospace; - - /* Radius — sharp / minimal for Neon theme */ - --r: 2px; - --r-lg: 4px; - --r-xl: 6px; - - /* Layout */ - --max-w: 1200px; - --nav-h: 62px; - --sidebar-w: 268px; - - /* Scanline background texture */ - --scanlines: repeating-linear-gradient( - 0deg, - transparent 0px, - transparent 2px, - rgba(255, 0, 153, 0.018) 2px, - rgba(255, 0, 153, 0.018) 4px - ); - - /* Transitions */ - --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -/* UIToolkit page context — swap accent to cyan */ -.uitk-context { - --accent: var(--t); - --accent-dim: var(--t-dim); - --accent-glow: var(--t-glow); - --accent-grad: var(--t-grad); - --accent-text: var(--t-text); - --border: var(--border-t); -} - -/* ============================================================ - Reset & Base - ============================================================ */ -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } - -html { - scroll-behavior: smooth; - -webkit-text-size-adjust: 100%; -} - -body { - background: var(--bg); - background-image: var(--scanlines); - color: var(--text); - font-family: var(--font-b); - font-size: 16px; - line-height: 1.7; - min-height: 100vh; - overflow-x: hidden; -} - -a { color: var(--accent-text); text-decoration: none; transition: color .2s var(--ease); } -a:hover { color: var(--accent); } - -img { max-width: 100%; height: auto; display: block; } - -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-h); - color: var(--text); - line-height: 1.2; - letter-spacing: 0.02em; -} - -code, pre { - font-family: var(--font-code); - font-size: 0.875em; -} - -/* ============================================================ - Navigation - ============================================================ */ -.site-nav { - position: sticky; - top: 0; - z-index: 900; - height: var(--nav-h); - background: rgba(5, 5, 8, 0.92); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid var(--border); - display: flex; - align-items: center; -} - -.nav-inner { - width: 100%; - max-width: var(--max-w); - margin: 0 auto; - padding: 0 1.5rem; - display: flex; - align-items: center; - gap: 2rem; -} - -.nav-logo { - display: flex; - align-items: center; - gap: 0.6rem; - font-family: var(--font-h); - font-size: 1rem; - font-weight: 700; - color: var(--text); - letter-spacing: 0.06em; - white-space: nowrap; - text-decoration: none; -} -.nav-logo .logo-u { color: var(--u); } -.nav-logo .logo-sep { color: var(--text-3); margin: 0 0.1rem; } -.nav-logo .logo-t { color: var(--t); } - -.nav-links { - display: flex; - align-items: center; - gap: 0.25rem; - flex: 1; -} - -.nav-link { - padding: 0.35rem 0.85rem; - border-radius: var(--r); - font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.04em; - color: var(--text-2); - transition: color .2s var(--ease), background .2s var(--ease); - text-decoration: none; - text-transform: uppercase; -} -.nav-link:hover { color: var(--text); background: var(--surface-2); } -.nav-link.nav-u { color: var(--u-text); } -.nav-link.nav-u:hover { color: var(--u); background: var(--u-dim); } -.nav-link.nav-t { color: var(--t-text); } -.nav-link.nav-t:hover { color: var(--t); background: var(--t-dim); } -.nav-link.active { color: var(--accent); } - -.nav-spacer { flex: 1; } - -.nav-github { - display: flex; - align-items: center; - gap: 0.4rem; - padding: 0.4rem 0.9rem; - border: 1px solid var(--border); - border-radius: var(--r); - font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.04em; - color: var(--text-2); - transition: all .2s var(--ease); - text-decoration: none; -} -.nav-github:hover { - border-color: var(--u); - color: var(--u-text); - box-shadow: var(--u-glow); -} - -.nav-mobile-toggle { - display: none; - background: none; - border: none; - cursor: pointer; - color: var(--text); - padding: 0.4rem; -} - -/* ============================================================ - Page Layout - ============================================================ */ -.page-wrapper { min-height: calc(100vh - var(--nav-h)); } - -.container { - max-width: var(--max-w); - margin: 0 auto; - padding: 0 1.5rem; -} - -/* Sidebar layout */ -.layout-sidebar { - display: grid; - grid-template-columns: var(--sidebar-w) 1fr; - min-height: calc(100vh - var(--nav-h)); - max-width: var(--max-w); - margin: 0 auto; - gap: 0; -} - -.sidebar { - position: sticky; - top: var(--nav-h); - height: calc(100vh - var(--nav-h)); - overflow-y: auto; - border-right: 1px solid var(--border); - background: var(--bg-2); - padding: 1.5rem 0; - scrollbar-width: thin; - scrollbar-color: var(--accent) transparent; -} - -.sidebar::-webkit-scrollbar { width: 3px; } -.sidebar::-webkit-scrollbar-track { background: transparent; } -.sidebar::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; } - -.sidebar-section { margin-bottom: 1.5rem; } - -.sidebar-heading { - font-family: var(--font-h); - font-size: 0.6rem; - font-weight: 700; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--text-3); - padding: 0 1.25rem; - margin-bottom: 0.4rem; -} - -.sidebar-link { - display: block; - padding: 0.35rem 1.25rem; - font-size: 0.82rem; - color: var(--text-2); - border-left: 2px solid transparent; - transition: all .15s var(--ease); - text-decoration: none; -} -.sidebar-link:hover { color: var(--text); background: var(--surface); } -.sidebar-link.active { - color: var(--accent); - border-left-color: var(--accent); - background: var(--accent-dim); -} - -.sidebar-back { - display: flex; - align-items: center; - gap: 0.4rem; - padding: 0.5rem 1.25rem 1rem; - font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.04em; - color: var(--accent-text); - border-bottom: 1px solid var(--border); - margin-bottom: 1rem; - text-decoration: none; - transition: color .15s; -} -.sidebar-back:hover { color: var(--accent); } - -/* Main content area */ -.content-area { - padding: 2.5rem 2.5rem 4rem; - min-width: 0; /* Prevent grid blowout */ -} - -/* ============================================================ - Hero Section - ============================================================ */ -.hero { - padding: 5rem 0 4rem; - text-align: center; - position: relative; - overflow: hidden; -} - -.hero::before { - content: ''; - position: absolute; - inset: 0; - background: - radial-gradient(ellipse 70% 50% at 30% 60%, rgba(255, 0, 153, 0.09) 0%, transparent 60%), - radial-gradient(ellipse 60% 40% at 70% 40%, rgba(0, 255, 238, 0.07) 0%, transparent 60%); - pointer-events: none; -} - -.hero-eyebrow { - font-family: var(--font-h); - font-size: 0.65rem; - font-weight: 700; - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--u-text); - margin-bottom: 1rem; -} - -.hero-title { - font-size: clamp(2.2rem, 6vw, 4.5rem); - font-weight: 900; - line-height: 1.05; - margin-bottom: 1.25rem; -} - -.hero-title .hl-u { color: var(--u); text-shadow: var(--u-glow); } -.hero-title .hl-t { color: var(--t); text-shadow: var(--t-glow); } - -.hero-sub { - font-size: 1.15rem; - color: var(--text-2); - max-width: 600px; - margin: 0 auto 2.5rem; - line-height: 1.6; -} - -.hero-ctas { - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - flex-wrap: wrap; -} - -/* ============================================================ - Buttons - ============================================================ */ -.btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.7rem 1.5rem; - border-radius: var(--r); - font-family: var(--font-h); - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - cursor: pointer; - transition: all .2s var(--ease); - text-decoration: none; - border: none; -} - -.btn-u { - background: var(--u-grad); - color: #fff; - box-shadow: 0 2px 16px rgba(255, 0, 153, 0.35); -} -.btn-u:hover { - box-shadow: var(--u-glow), 0 4px 24px rgba(255, 0, 153, 0.45); - transform: translateY(-1px); - color: #fff; -} - -.btn-t { - background: var(--t-grad); - color: #000; - box-shadow: 0 2px 16px rgba(0, 255, 238, 0.30); -} -.btn-t:hover { - box-shadow: var(--t-glow), 0 4px 24px rgba(0, 255, 238, 0.40); - transform: translateY(-1px); - color: #000; -} - -.btn-ghost { - background: transparent; - color: var(--text-2); - border: 1px solid var(--border-n); -} -.btn-ghost:hover { - border-color: var(--accent); - color: var(--accent-text); - background: var(--accent-dim); -} - -.btn-ghost-u { - background: transparent; - color: var(--u-text); - border: 1px solid rgba(255, 0, 153, 0.35); -} -.btn-ghost-u:hover { - background: var(--u-dim); - border-color: var(--u); - box-shadow: var(--u-glow); - color: var(--u); -} - -.btn-ghost-t { - background: transparent; - color: var(--t-text); - border: 1px solid rgba(0, 255, 238, 0.30); -} -.btn-ghost-t:hover { - background: var(--t-dim); - border-color: var(--t); - box-shadow: var(--t-glow); - color: var(--t); -} - -/* ============================================================ - Badges / Tags - ============================================================ */ -.badge { - display: inline-flex; - align-items: center; - padding: 0.2rem 0.6rem; - border-radius: var(--r); - font-size: 0.7rem; - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; -} -.badge-u { background: var(--u-dim); color: var(--u-text); border: 1px solid rgba(255,0,153,.2); } -.badge-t { background: var(--t-dim); color: var(--t-text); border: 1px solid rgba(0,255,238,.18); } -.badge-n { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-n); } - -/* ============================================================ - Cards - ============================================================ */ -.card { - background: var(--surface); - border: 1px solid var(--border-n); - border-radius: var(--r-lg); - padding: 1.75rem; - transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); -} -.card:hover { - border-color: var(--accent); - box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 32px rgba(0,0,0,.4); - transform: translateY(-2px); -} - -.card-u { border-top: 2px solid var(--u); } -.card-t { border-top: 2px solid var(--t); } - -.card-u:hover { border-color: var(--u); box-shadow: var(--u-glow), 0 8px 32px rgba(0,0,0,.4); } -.card-t:hover { border-color: var(--t); box-shadow: var(--t-glow), 0 8px 32px rgba(0,0,0,.4); } - -/* ============================================================ - Stats Band - ============================================================ */ -.stats-band { - background: var(--surface); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); - padding: 2rem 0; -} - -.stats-band-inner { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - gap: 1.5rem; - max-width: var(--max-w); - margin: 0 auto; - padding: 0 1.5rem; -} - -.stat-item { text-align: center; } - -.stat-num { - font-family: var(--font-h); - font-size: 2.2rem; - font-weight: 900; - color: var(--accent); - line-height: 1; - display: block; -} - -.stat-lbl { - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-3); - margin-top: 0.3rem; - display: block; -} - -/* ============================================================ - Section Headings - ============================================================ */ -.section { padding: 4rem 0; } -.section-sm { padding: 2.5rem 0; } - -.section-head { text-align: center; margin-bottom: 3rem; } - -.section-eyebrow { - font-family: var(--font-h); - font-size: 0.6rem; - font-weight: 700; - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--accent-text); - margin-bottom: 0.75rem; - display: block; -} - -.section-title { - font-size: clamp(1.6rem, 4vw, 2.4rem); - font-weight: 900; - margin-bottom: 0.75rem; -} - -.section-sub { - color: var(--text-2); - font-size: 1rem; - max-width: 560px; - margin: 0 auto; -} - -/* ============================================================ - Grid Layouts - ============================================================ */ -.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } -.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } -.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } -.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } - -/* ============================================================ - Control Cards (listing page) - ============================================================ */ -.control-card { - background: var(--surface); - border: 1px solid var(--border-n); - border-radius: var(--r-lg); - padding: 1.25rem 1.5rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - transition: all .2s var(--ease); - text-decoration: none; - color: inherit; -} -.control-card:hover { - border-color: var(--accent); - background: var(--surface-2); - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0,0,0,.5); - color: inherit; -} - -.control-card-name { - font-family: var(--font-h); - font-size: 0.82rem; - font-weight: 700; - letter-spacing: 0.04em; - color: var(--accent-text); -} -.control-card:hover .control-card-name { color: var(--accent); } - -.control-card-desc { - font-size: 0.82rem; - color: var(--text-2); - line-height: 1.5; - flex: 1; -} - -.control-card-tags { - display: flex; - flex-wrap: wrap; - gap: 0.35rem; - margin-top: 0.25rem; -} - -.control-tag { - font-size: 0.65rem; - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--text-3); - background: var(--bg-2); - padding: 0.15rem 0.5rem; - border-radius: var(--r); -} - -/* ============================================================ - Tabs - ============================================================ */ -.tabs { - display: flex; - gap: 0.25rem; - border-bottom: 1px solid var(--border-n); - margin-bottom: 2rem; - flex-wrap: wrap; -} - -.tab-btn { - padding: 0.6rem 1.25rem; - border: none; - background: transparent; - font-family: var(--font-h); - font-size: 0.7rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-2); - cursor: pointer; - border-bottom: 2px solid transparent; - margin-bottom: -1px; - transition: all .15s var(--ease); -} -.tab-btn:hover { color: var(--text); border-bottom-color: var(--border-n); } -.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } -.tab-btn.tab-u.active { color: var(--u); border-bottom-color: var(--u); } -.tab-btn.tab-t.active { color: var(--t); border-bottom-color: var(--t); } - -.tab-panel { display: none; } -.tab-panel.active { display: block; } - -/* ============================================================ - Code Blocks - ============================================================ */ -pre, .highlight { - background: var(--surface-2); - border: 1px solid var(--border-n); - border-radius: var(--r-lg); - overflow: auto; - padding: 1.25rem 1.5rem; - margin: 1.25rem 0; -} - -pre code { font-size: 0.83rem; line-height: 1.7; color: var(--text); } - -code:not(pre code) { - background: var(--surface-2); - color: var(--u-text); - padding: 0.15rem 0.4rem; - border-radius: var(--r); - font-size: 0.85em; -} - -/* Syntax highlighting */ -.highlight .k, .highlight .kd, .highlight .kn { color: #ff79c6; } -.highlight .s, .highlight .s1, .highlight .s2 { color: #f1fa8c; } -.highlight .c, .highlight .c1, .highlight .cm { color: var(--text-3); font-style: italic; } -.highlight .n { color: var(--text); } -.highlight .nf, .highlight .na { color: #50fa7b; } -.highlight .mi, .highlight .mf { color: #bd93f9; } -.highlight .nc { color: #8be9fd; } -.highlight .nb { color: #ffb86c; } - -/* Code label */ -.code-block { position: relative; } -.code-label { - position: absolute; - top: 0.6rem; - right: 0.75rem; - font-family: var(--font-h); - font-size: 0.6rem; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-3); -} - -/* ============================================================ - Tables - ============================================================ */ -.table-wrap { overflow-x: auto; margin: 1.25rem 0; border-radius: var(--r-lg); } - -table { - width: 100%; - border-collapse: collapse; - font-size: 0.88rem; -} - -thead th { - background: var(--surface-2); - color: var(--text-2); - font-family: var(--font-h); - font-size: 0.65rem; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.75rem 1rem; - text-align: left; - border-bottom: 1px solid var(--border-n); - white-space: nowrap; -} - -tbody td { - padding: 0.7rem 1rem; - border-bottom: 1px solid rgba(255,255,255,0.04); - vertical-align: top; - color: var(--text-2); -} -tbody td:first-child { color: var(--text); font-weight: 500; } -tbody tr:last-child td { border-bottom: none; } -tbody tr:hover td { background: var(--surface-2); } - -/* ============================================================ - Prose Content (control pages) - ============================================================ */ -.prose h1 { - font-size: 2rem; - font-weight: 900; - color: var(--accent-text); - border-bottom: 1px solid var(--border); - padding-bottom: 0.75rem; - margin-bottom: 1.5rem; - margin-top: 2.5rem; -} -.prose h1:first-child { margin-top: 0; } - -.prose h2 { - font-size: 1.2rem; - font-weight: 700; - color: var(--text); - margin-top: 2.5rem; - margin-bottom: 1rem; - padding-top: 0.5rem; - border-top: 1px solid var(--border-n); -} - -.prose h3 { - font-size: 0.95rem; - font-weight: 700; - letter-spacing: 0.04em; - color: var(--accent-text); - margin-top: 1.75rem; - margin-bottom: 0.75rem; - text-transform: uppercase; - font-family: var(--font-h); -} - -.prose p { margin-bottom: 1rem; color: var(--text-2); } -.prose p + p { margin-top: 0; } - -.prose ul, .prose ol { - padding-left: 1.5rem; - margin-bottom: 1rem; - color: var(--text-2); -} -.prose li { margin-bottom: 0.3rem; } - -.prose blockquote { - border-left: 3px solid var(--accent); - background: var(--accent-dim); - padding: 0.75rem 1.25rem; - border-radius: 0 var(--r-lg) var(--r-lg) 0; - margin: 1.25rem 0; - font-size: 0.9rem; - color: var(--text-2); -} -.prose blockquote p { margin: 0; } - -.prose img { - border-radius: var(--r-lg); - border: 1px solid var(--border-n); - margin: 1.5rem 0; - max-width: 100%; -} - -.prose hr { - border: none; - border-top: 1px solid var(--border-n); - margin: 2rem 0; -} - -.prose table { margin: 1.25rem 0; } - -/* ============================================================ - Control Page Hero - ============================================================ */ -.control-hero { - padding: 2rem 0 1.5rem; - border-bottom: 1px solid var(--border-n); - margin-bottom: 2rem; -} - -.control-breadcrumb { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.78rem; - color: var(--text-3); - margin-bottom: 1rem; - font-family: var(--font-h); - letter-spacing: 0.06em; - text-transform: uppercase; -} -.control-breadcrumb a { color: var(--accent-text); text-decoration: none; } -.control-breadcrumb a:hover { color: var(--accent); } -.control-breadcrumb .sep { color: var(--text-3); } - -.control-title { - font-size: clamp(1.8rem, 4vw, 2.8rem); - font-weight: 900; - color: var(--accent-text); - text-shadow: var(--accent-glow); - margin-bottom: 0.75rem; -} - -.control-meta { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.control-desc { - font-size: 1.05rem; - color: var(--text-2); - max-width: 680px; - line-height: 1.65; -} - -/* Preview image */ -.control-preview { - margin: 1.5rem 0; - border-radius: var(--r-lg); - border: 1px solid var(--border-n); - overflow: hidden; - max-width: 700px; -} -.control-preview img { width: 100%; } - -/* ============================================================ - Package Overview Page - ============================================================ */ -.pkg-hero { - padding: 3.5rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -.pkg-hero::before { - content: ''; - position: absolute; - inset: 0; - background: radial-gradient(ellipse 70% 60% at 50% 50%, var(--accent-dim) 0%, transparent 70%); - pointer-events: none; -} - -.pkg-title { - font-size: clamp(2rem, 5vw, 3.5rem); - font-weight: 900; - color: var(--accent-text); - text-shadow: var(--accent-glow); - margin-bottom: 1rem; -} - -.pkg-sub { - font-size: 1.1rem; - color: var(--text-2); - max-width: 580px; - margin: 0 auto 2rem; -} - -/* ============================================================ - Getting Started Panels - ============================================================ */ -.install-panel { - background: var(--surface); - border: 1px solid var(--border-n); - border-radius: var(--r-lg); - overflow: hidden; -} - -.install-panel-header { - background: var(--surface-2); - padding: 0.75rem 1.25rem; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid var(--border-n); -} - -.install-panel-title { - font-family: var(--font-h); - font-size: 0.7rem; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--accent-text); -} - -.install-panel-body { padding: 1.25rem 1.5rem; } - -.copy-btn { - background: transparent; - border: 1px solid var(--border-n); - border-radius: var(--r); - color: var(--text-3); - font-family: var(--font-h); - font-size: 0.6rem; - letter-spacing: 0.06em; - text-transform: uppercase; - padding: 0.2rem 0.6rem; - cursor: pointer; - transition: all .15s; -} -.copy-btn:hover { border-color: var(--accent); color: var(--accent-text); } -.copy-btn.copied { border-color: #00ff88; color: #00ff88; } - -/* ============================================================ - Category Filter Bar - ============================================================ */ -.filter-bar { - display: flex; - gap: 0.4rem; - flex-wrap: wrap; - margin-bottom: 2rem; -} - -.filter-btn { - padding: 0.35rem 0.9rem; - border-radius: var(--r); - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - cursor: pointer; - border: 1px solid var(--border-n); - background: transparent; - color: var(--text-2); - transition: all .15s var(--ease); -} -.filter-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim); } -.filter-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } - -/* ============================================================ - Search - ============================================================ */ -.search-bar { - position: relative; - max-width: 400px; - margin-bottom: 1.5rem; -} - -.search-input { - width: 100%; - background: var(--surface); - border: 1px solid var(--border-n); - border-radius: var(--r-lg); - color: var(--text); - font-family: var(--font-b); - font-size: 0.9rem; - padding: 0.65rem 1rem 0.65rem 2.5rem; - outline: none; - transition: border-color .2s; -} -.search-input:focus { border-color: var(--accent); } -.search-input::placeholder { color: var(--text-3); } - -.search-icon { - position: absolute; - left: 0.75rem; - top: 50%; - transform: translateY(-50%); - color: var(--text-3); - pointer-events: none; -} - -/* ============================================================ - Features Grid - ============================================================ */ -.feature-item { - display: flex; - flex-direction: column; - gap: 0.75rem; - padding: 1.5rem; - background: var(--surface); - border: 1px solid var(--border-n); - border-radius: var(--r-lg); -} - -.feature-icon { - font-size: 1.5rem; - line-height: 1; -} - -.feature-title { - font-family: var(--font-h); - font-size: 0.8rem; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--accent-text); -} - -.feature-desc { - font-size: 0.85rem; - color: var(--text-2); - line-height: 1.6; -} - -/* ============================================================ - Footer - ============================================================ */ -.site-footer { - background: var(--bg-2); - border-top: 1px solid var(--border); - padding: 3rem 0 2rem; - margin-top: 4rem; -} - -.footer-inner { - max-width: var(--max-w); - margin: 0 auto; - padding: 0 1.5rem; - display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - gap: 3rem; -} - -.footer-brand .footer-logo { - font-family: var(--font-h); - font-size: 1rem; - font-weight: 700; - letter-spacing: 0.06em; - color: var(--text); - margin-bottom: 0.75rem; - text-decoration: none; - display: inline-block; -} -.footer-brand .footer-logo .logo-u { color: var(--u); } -.footer-brand .footer-logo .logo-t { color: var(--t); } - -.footer-desc { - font-size: 0.85rem; - color: var(--text-3); - line-height: 1.6; - max-width: 280px; -} - -.footer-col-title { - font-family: var(--font-h); - font-size: 0.6rem; - font-weight: 700; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--text-3); - margin-bottom: 1rem; -} - -.footer-links { - list-style: none; - display: flex; - flex-direction: column; - gap: 0.5rem; -} -.footer-links a { - font-size: 0.85rem; - color: var(--text-2); - text-decoration: none; - transition: color .15s; -} -.footer-links a:hover { color: var(--accent-text); } - -.footer-bottom { - max-width: var(--max-w); - margin: 2rem auto 0; - padding: 1.5rem 1.5rem 0; - border-top: 1px solid var(--border-n); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1rem; -} - -.footer-copy { - font-size: 0.78rem; - color: var(--text-3); -} -.footer-copy a { color: var(--text-3); } -.footer-copy a:hover { color: var(--accent-text); } - -.footer-badges { display: flex; gap: 0.5rem; align-items: center; } - -/* ============================================================ - CTA Band - ============================================================ */ -.cta-band { - background: var(--surface); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); - padding: 3rem 0; - text-align: center; - position: relative; - overflow: hidden; -} -.cta-band::before { - content: ''; - position: absolute; - inset: 0; - background: radial-gradient(ellipse 80% 100% at 50% 50%, var(--u-dim) 0%, transparent 70%); - pointer-events: none; -} - -.cta-title { - font-size: 1.8rem; - font-weight: 900; - margin-bottom: 0.75rem; -} - -.cta-sub { - color: var(--text-2); - margin-bottom: 2rem; - font-size: 1rem; -} - -/* ============================================================ - Scrollbar (site-wide) - ============================================================ */ -::-webkit-scrollbar { width: 6px; height: 6px; } -::-webkit-scrollbar-track { background: var(--bg); } -::-webkit-scrollbar-thumb { background: rgba(255,0,153,.3); border-radius: 3px; } -::-webkit-scrollbar-thumb:hover { background: var(--u); } - -/* ============================================================ - Utilities - ============================================================ */ -.text-u { color: var(--u-text); } -.text-t { color: var(--t-text); } -.text-muted { color: var(--text-2); } -.text-dim { color: var(--text-3); } -.glow-u { text-shadow: var(--u-glow); } -.glow-t { text-shadow: var(--t-glow); } - -.divider { height: 1px; background: var(--border-n); margin: 2rem 0; } - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0,0,0,0); - white-space: nowrap; -} - -.flex-center { display: flex; align-items: center; justify-content: center; } -.gap-sm { gap: 0.5rem; } -.gap-md { gap: 1rem; } -.gap-lg { gap: 1.5rem; } -.mt-1 { margin-top: 0.5rem; } -.mt-2 { margin-top: 1rem; } -.mt-3 { margin-top: 1.5rem; } -.mt-4 { margin-top: 2rem; } -.mb-1 { margin-bottom: 0.5rem; } -.mb-2 { margin-bottom: 1rem; } -.mb-3 { margin-bottom: 1.5rem; } -.mb-4 { margin-bottom: 2rem; } - -/* ============================================================ - Responsive - ============================================================ */ -@media (max-width: 1024px) { - .layout-sidebar { - grid-template-columns: 1fr; - } - .sidebar { - display: none; - position: fixed; - z-index: 800; - width: var(--sidebar-w); - height: 100vh; - top: 0; - left: 0; - } - .sidebar.open { display: block; } - .content-area { padding: 2rem 1.5rem 3rem; } - - .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } -} - -@media (max-width: 768px) { - :root { --nav-h: 56px; } - - .nav-links { display: none; } - .nav-mobile-toggle { display: flex; } - - .hero { padding: 3.5rem 0 3rem; } - .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } - .grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } - - .footer-inner { grid-template-columns: 1fr; gap: 2rem; } - .footer-bottom { flex-direction: column; text-align: center; } - - .stats-band-inner { gap: 2rem; } - .stat-num { font-size: 1.8rem; } - - .section { padding: 2.5rem 0; } -} - -@media (max-width: 480px) { - .container { padding: 0 1rem; } - .hero-ctas { flex-direction: column; align-items: stretch; } - .hero-ctas .btn { text-align: center; justify-content: center; } -} - -/* ── Install detail pages ──────────────────────────────────────────────────── */ -.install-detail-section + .install-detail-section { - border-top: 1px solid var(--border); -} - -.install-detail-section h3 { - font-size: 1rem; - color: var(--text); - margin: 1.5rem 0 0.5rem; -} - -.install-detail-section ol, -.install-detail-section ul { - padding-left: 1.5rem; - margin: 0.5rem 0 1rem; - color: var(--text-muted); - line-height: 1.7; -} - -.install-detail-section li { margin-bottom: 0.35rem; } - -/* ── Callout box ───────────────────────────────────────────────────────────── */ -.callout { - border-left: 3px solid var(--accent); - background: var(--surface); - padding: 0.75rem 1rem; - border-radius: 0 var(--radius) var(--radius) 0; - margin: 1.25rem 0; - font-size: 0.875rem; - color: var(--text-muted); - line-height: 1.6; -} - -.callout strong { color: var(--accent); } - -.callout--note { border-color: var(--accent); } -.callout--warn { border-color: #ff9900; } -.callout--warn strong { color: #ff9900; } - -/* ── Changelog page ────────────────────────────────────────────────────────── */ -.changelog-section + .changelog-section { border-top: 1px solid var(--border); } - -.changelog-release { - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 1.5rem; - margin: 1.5rem 0; - background: var(--surface); -} - -.changelog-release-header { - display: flex; - align-items: baseline; - gap: 1rem; - flex-wrap: wrap; - margin-bottom: 0.75rem; -} - -.changelog-version { - font-size: 1.1rem; - color: var(--accent); - margin: 0; -} - -.changelog-date { - font-size: 0.8rem; - color: var(--text-muted); -} - -.changelog-release h4 { - font-size: 0.875rem; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.06em; - margin: 1.25rem 0 0.4rem; -} - -.changelog-release ul { - padding-left: 1.25rem; - margin: 0 0 0.5rem; - color: var(--text-muted); - line-height: 1.7; -} - -.changelog-release li { margin-bottom: 0.25rem; } - -.changelog-links { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-top: 1.25rem; -} - -.btn-sm { - font-size: 0.75rem; - padding: 0.35rem 0.75rem; -} - -.changelog-older { - font-size: 0.875rem; - color: var(--text-muted); - padding: 0.75rem 0; -} diff --git a/_site_test/assets/css/style.css b/_site_test/assets/css/style.css deleted file mode 100644 index bc2033b..0000000 --- a/_site_test/assets/css/style.css +++ /dev/null @@ -1,2883 +0,0 @@ -/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ -/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ -html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } - -/** Remove the margin in all browsers (opinionated). */ -body { margin: 0; } - -/* HTML5 display definitions ========================================================================== */ -/** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */ -article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { /* 1 */ display: block; } - -summary { display: list-item; } - -/** Add the correct display in IE 9-. */ -audio, canvas, progress, video { display: inline-block; } - -/** Add the correct display in iOS 4-7. */ -audio:not([controls]) { display: none; height: 0; } - -/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -progress { vertical-align: baseline; } - -/** Add the correct display in IE 10-. 1. Add the correct display in IE. */ -template, [hidden] { display: none !important; } - -/* Links ========================================================================== */ -/** Remove the gray background on active links in IE 10. */ -a { background-color: transparent; /* 1 */ } - -/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */ -a:active, a:hover { outline-width: 0; } - -/* Text-level semantics ========================================================================== */ -/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ -abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } - -/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ -b, strong { font-weight: inherit; } - -/** Add the correct font weight in Chrome, Edge, and Safari. */ -b, strong { font-weight: bolder; } - -/** Add the correct font style in Android 4.3-. */ -dfn { font-style: italic; } - -/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */ -h1 { font-size: 2em; margin: 0.67em 0; } - -/** Add the correct background and color in IE 9-. */ -mark { background-color: #ff0; color: #000; } - -/** Add the correct font size in all browsers. */ -small { font-size: 80%; } - -/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ -sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } - -sub { bottom: -0.25em; } - -sup { top: -0.5em; } - -/* Embedded content ========================================================================== */ -/** Remove the border on images inside links in IE 10-. */ -img { border-style: none; } - -/** Hide the overflow in IE. */ -svg:not(:root) { overflow: hidden; } - -/* Grouping content ========================================================================== */ -/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ -code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } - -/** Add the correct margin in IE 8. */ -figure { margin: 1em 40px; } - -/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ -hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } - -/* Forms ========================================================================== */ -/** 1. Change font properties to `inherit` in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */ -button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } - -/** Restore the font weight unset by the previous rule. */ -optgroup { font-weight: bold; } - -/** Show the overflow in IE. 1. Show the overflow in Edge. */ -button, input { /* 1 */ overflow: visible; } - -/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */ -button, select { /* 1 */ text-transform: none; } - -/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */ -button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } - -/** Remove the inner border and padding in Firefox. */ -button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } - -/** Restore the focus styles unset by the previous rule. */ -button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } - -/** Change the border, margin, and padding in all browsers (opinionated). */ -fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } - -/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ -legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } - -/** Remove the default vertical scrollbar in IE. */ -textarea { overflow: auto; } - -/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */ -[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } - -/** Correct the cursor style of increment and decrement buttons in Chrome. */ -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } - -/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ -[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } - -/** Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ -[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } - -/** Correct the text style of placeholders in Chrome, Edge, and Safari. */ -::-webkit-input-placeholder { color: inherit; opacity: 0.54; } - -/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ -::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } - -* { box-sizing: border-box; } - -input, select, textarea, button { font-family: inherit; font-size: inherit; line-height: inherit; } - -body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 14px; line-height: 1.5; color: #24292e; background-color: #fff; } - -a { color: #0366d6; text-decoration: none; } -a:hover { text-decoration: underline; } - -b, strong { font-weight: 600; } - -hr, .rule { height: 0; margin: 15px 0; overflow: hidden; background: transparent; border: 0; border-bottom: 1px solid #dfe2e5; } -hr::before, .rule::before { display: table; content: ""; } -hr::after, .rule::after { display: table; clear: both; content: ""; } - -table { border-spacing: 0; border-collapse: collapse; } - -td, th { padding: 0; } - -button { cursor: pointer; border-radius: 0; } - -[hidden][hidden] { display: none !important; } - -details summary { cursor: pointer; } -details:not([open]) > *:not(summary) { display: none !important; } - -h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; } - -h1 { font-size: 32px; font-weight: 600; } - -h2 { font-size: 24px; font-weight: 600; } - -h3 { font-size: 20px; font-weight: 600; } - -h4 { font-size: 16px; font-weight: 600; } - -h5 { font-size: 14px; font-weight: 600; } - -h6 { font-size: 12px; font-weight: 600; } - -p { margin-top: 0; margin-bottom: 10px; } - -small { font-size: 90%; } - -blockquote { margin: 0; } - -ul, ol { padding-left: 0; margin-top: 0; margin-bottom: 0; } - -ol ol, ul ol { list-style-type: lower-roman; } - -ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha; } - -dd { margin-left: 0; } - -tt, code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; } - -pre { margin-top: 0; margin-bottom: 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; } - -.octicon { vertical-align: text-bottom; } - -/* Fade in an element */ -.anim-fade-in { animation-name: fade-in; animation-duration: 1s; animation-timing-function: ease-in-out; } -.anim-fade-in.fast { animation-duration: 300ms; } - -@keyframes fade-in { 0% { opacity: 0; } - 100% { opacity: 1; } } -/* Fade out an element */ -.anim-fade-out { animation-name: fade-out; animation-duration: 1s; animation-timing-function: ease-out; } -.anim-fade-out.fast { animation-duration: 0.3s; } - -@keyframes fade-out { 0% { opacity: 1; } - 100% { opacity: 0; } } -/* Fade in and slide up an element */ -.anim-fade-up { opacity: 0; animation-name: fade-up; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-out; animation-delay: 1s; } - -@keyframes fade-up { 0% { opacity: 0.8; transform: translateY(100%); } - 100% { opacity: 1; transform: translateY(0); } } -/* Fade an element out and slide down */ -.anim-fade-down { animation-name: fade-down; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-in; } - -@keyframes fade-down { 0% { opacity: 1; transform: translateY(0); } - 100% { opacity: 0.5; transform: translateY(100%); } } -/* Grow an element width from 0 to 100% */ -.anim-grow-x { width: 0%; animation-name: grow-x; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease; animation-delay: 0.5s; } - -@keyframes grow-x { to { width: 100%; } } -/* Shrink an element from 100% to 0% */ -.anim-shrink-x { animation-name: shrink-x; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: 0.5s; } - -@keyframes shrink-x { to { width: 0%; } } -/* Fade in an element and scale it fast */ -.anim-scale-in { animation-name: scale-in; animation-duration: 0.15s; animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); } - -@keyframes scale-in { 0% { opacity: 0; transform: scale(0.5); } - 100% { opacity: 1; transform: scale(1); } } -/* Pulse an element's opacity */ -.anim-pulse { animation-name: pulse; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } - -@keyframes pulse { 0% { opacity: 0.3; } - 10% { opacity: 1; } - 100% { opacity: 0.3; } } -/* Pulse in an element */ -.anim-pulse-in { animation-name: pulse-in; animation-duration: 0.5s; } - -@keyframes pulse-in { 0% { transform: scale3d(1, 1, 1); } - 50% { transform: scale3d(1.1, 1.1, 1.1); } - 100% { transform: scale3d(1, 1, 1); } } -/* Increase scale of an element on hover */ -.hover-grow { transition: transform 0.3s; backface-visibility: hidden; } -.hover-grow:hover { transform: scale(1.025); } - -/* Add a gray border on all sides */ -.border { border: 1px #e1e4e8 solid !important; } - -/* Add a gray border to the left and right */ -.border-y { border-top: 1px #e1e4e8 solid !important; border-bottom: 1px #e1e4e8 solid !important; } - -/* Remove borders from all sides */ -.border-0 { border: 0 !important; } - -.border-dashed { border-style: dashed !important; } - -/* Use with .border to turn the border blue */ -.border-blue { border-color: #0366d6 !important; } - -/* Use with .border to turn the border blue-light */ -.border-blue-light { border-color: #c8e1ff !important; } - -/* Use with .border to turn the border green */ -.border-green { border-color: #34d058 !important; } - -/* Use with .border to turn the border green light */ -.border-green-light { border-color: #a2cbac !important; } - -/* Use with .border to turn the border red */ -.border-red { border-color: #d73a49 !important; } - -/* Use with .border to turn the border red-light */ -.border-red-light { border-color: #cea0a5 !important; } - -/* Use with .border to turn the border purple */ -.border-purple { border-color: #6f42c1 !important; } - -/* Use with .border to turn the border yellow */ -.border-yellow { border-color: #d9d0a5 !important; } - -/* Use with .border to turn the border gray-light */ -.border-gray-light { border-color: #eaecef !important; } - -/* Use with .border to turn the border gray-dark */ -.border-gray-dark { border-color: #d1d5da !important; } - -/* Use with .border to turn the border rgba black 0.15 */ -.border-black-fade { border-color: rgba(27, 31, 35, 0.15) !important; } - -/* Add a gray border */ -/* Add a gray border to the top */ -.border-top { border-top: 1px #e1e4e8 solid !important; } - -/* Add a gray border to the right */ -.border-right { border-right: 1px #e1e4e8 solid !important; } - -/* Add a gray border to the bottom */ -.border-bottom { border-bottom: 1px #e1e4e8 solid !important; } - -/* Add a gray border to the left */ -.border-left { border-left: 1px #e1e4e8 solid !important; } - -/* Remove the top border */ -.border-top-0 { border-top: 0 !important; } - -/* Remove the right border */ -.border-right-0 { border-right: 0 !important; } - -/* Remove the bottom border */ -.border-bottom-0 { border-bottom: 0 !important; } - -/* Remove the left border */ -.border-left-0 { border-left: 0 !important; } - -/* Remove the border-radius */ -.rounded-0 { border-radius: 0 !important; } - -/* Add a border-radius to all corners */ -.rounded-1 { border-radius: 3px !important; } - -/* Add a 2x border-radius to all corners */ -.rounded-2 { border-radius: 6px !important; } - -.rounded-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } - -.rounded-top-1 { border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } - -.rounded-top-2 { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; } - -.rounded-right-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } - -.rounded-right-1 { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } - -.rounded-right-2 { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } - -.rounded-bottom-0 { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } - -.rounded-bottom-1 { border-bottom-right-radius: 3px !important; border-bottom-left-radius: 3px !important; } - -.rounded-bottom-2 { border-bottom-right-radius: 6px !important; border-bottom-left-radius: 6px !important; } - -.rounded-left-0 { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } - -.rounded-left-1 { border-bottom-left-radius: 3px !important; border-top-left-radius: 3px !important; } - -.rounded-left-2 { border-bottom-left-radius: 6px !important; border-top-left-radius: 6px !important; } - -@media (min-width: 544px) { /* Add a gray border */ - /* Add a gray border to the top */ - .border-sm-top { border-top: 1px #e1e4e8 solid !important; } - /* Add a gray border to the right */ - .border-sm-right { border-right: 1px #e1e4e8 solid !important; } - /* Add a gray border to the bottom */ - .border-sm-bottom { border-bottom: 1px #e1e4e8 solid !important; } - /* Add a gray border to the left */ - .border-sm-left { border-left: 1px #e1e4e8 solid !important; } - /* Remove the top border */ - .border-sm-top-0 { border-top: 0 !important; } - /* Remove the right border */ - .border-sm-right-0 { border-right: 0 !important; } - /* Remove the bottom border */ - .border-sm-bottom-0 { border-bottom: 0 !important; } - /* Remove the left border */ - .border-sm-left-0 { border-left: 0 !important; } - /* Remove the border-radius */ - .rounded-sm-0 { border-radius: 0 !important; } - /* Add a border-radius to all corners */ - .rounded-sm-1 { border-radius: 3px !important; } - /* Add a 2x border-radius to all corners */ - .rounded-sm-2 { border-radius: 6px !important; } - .rounded-sm-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } - .rounded-sm-top-1 { border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } - .rounded-sm-top-2 { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; } - .rounded-sm-right-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } - .rounded-sm-right-1 { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } - .rounded-sm-right-2 { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } - .rounded-sm-bottom-0 { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } - .rounded-sm-bottom-1 { border-bottom-right-radius: 3px !important; border-bottom-left-radius: 3px !important; } - .rounded-sm-bottom-2 { border-bottom-right-radius: 6px !important; border-bottom-left-radius: 6px !important; } - .rounded-sm-left-0 { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } - .rounded-sm-left-1 { border-bottom-left-radius: 3px !important; border-top-left-radius: 3px !important; } - .rounded-sm-left-2 { border-bottom-left-radius: 6px !important; border-top-left-radius: 6px !important; } } -@media (min-width: 768px) { /* Add a gray border */ - /* Add a gray border to the top */ - .border-md-top { border-top: 1px #e1e4e8 solid !important; } - /* Add a gray border to the right */ - .border-md-right { border-right: 1px #e1e4e8 solid !important; } - /* Add a gray border to the bottom */ - .border-md-bottom { border-bottom: 1px #e1e4e8 solid !important; } - /* Add a gray border to the left */ - .border-md-left { border-left: 1px #e1e4e8 solid !important; } - /* Remove the top border */ - .border-md-top-0 { border-top: 0 !important; } - /* Remove the right border */ - .border-md-right-0 { border-right: 0 !important; } - /* Remove the bottom border */ - .border-md-bottom-0 { border-bottom: 0 !important; } - /* Remove the left border */ - .border-md-left-0 { border-left: 0 !important; } - /* Remove the border-radius */ - .rounded-md-0 { border-radius: 0 !important; } - /* Add a border-radius to all corners */ - .rounded-md-1 { border-radius: 3px !important; } - /* Add a 2x border-radius to all corners */ - .rounded-md-2 { border-radius: 6px !important; } - .rounded-md-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } - .rounded-md-top-1 { border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } - .rounded-md-top-2 { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; } - .rounded-md-right-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } - .rounded-md-right-1 { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } - .rounded-md-right-2 { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } - .rounded-md-bottom-0 { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } - .rounded-md-bottom-1 { border-bottom-right-radius: 3px !important; border-bottom-left-radius: 3px !important; } - .rounded-md-bottom-2 { border-bottom-right-radius: 6px !important; border-bottom-left-radius: 6px !important; } - .rounded-md-left-0 { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } - .rounded-md-left-1 { border-bottom-left-radius: 3px !important; border-top-left-radius: 3px !important; } - .rounded-md-left-2 { border-bottom-left-radius: 6px !important; border-top-left-radius: 6px !important; } } -@media (min-width: 1012px) { /* Add a gray border */ - /* Add a gray border to the top */ - .border-lg-top { border-top: 1px #e1e4e8 solid !important; } - /* Add a gray border to the right */ - .border-lg-right { border-right: 1px #e1e4e8 solid !important; } - /* Add a gray border to the bottom */ - .border-lg-bottom { border-bottom: 1px #e1e4e8 solid !important; } - /* Add a gray border to the left */ - .border-lg-left { border-left: 1px #e1e4e8 solid !important; } - /* Remove the top border */ - .border-lg-top-0 { border-top: 0 !important; } - /* Remove the right border */ - .border-lg-right-0 { border-right: 0 !important; } - /* Remove the bottom border */ - .border-lg-bottom-0 { border-bottom: 0 !important; } - /* Remove the left border */ - .border-lg-left-0 { border-left: 0 !important; } - /* Remove the border-radius */ - .rounded-lg-0 { border-radius: 0 !important; } - /* Add a border-radius to all corners */ - .rounded-lg-1 { border-radius: 3px !important; } - /* Add a 2x border-radius to all corners */ - .rounded-lg-2 { border-radius: 6px !important; } - .rounded-lg-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } - .rounded-lg-top-1 { border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } - .rounded-lg-top-2 { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; } - .rounded-lg-right-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } - .rounded-lg-right-1 { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } - .rounded-lg-right-2 { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } - .rounded-lg-bottom-0 { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } - .rounded-lg-bottom-1 { border-bottom-right-radius: 3px !important; border-bottom-left-radius: 3px !important; } - .rounded-lg-bottom-2 { border-bottom-right-radius: 6px !important; border-bottom-left-radius: 6px !important; } - .rounded-lg-left-0 { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } - .rounded-lg-left-1 { border-bottom-left-radius: 3px !important; border-top-left-radius: 3px !important; } - .rounded-lg-left-2 { border-bottom-left-radius: 6px !important; border-top-left-radius: 6px !important; } } -@media (min-width: 1280px) { /* Add a gray border */ - /* Add a gray border to the top */ - .border-xl-top { border-top: 1px #e1e4e8 solid !important; } - /* Add a gray border to the right */ - .border-xl-right { border-right: 1px #e1e4e8 solid !important; } - /* Add a gray border to the bottom */ - .border-xl-bottom { border-bottom: 1px #e1e4e8 solid !important; } - /* Add a gray border to the left */ - .border-xl-left { border-left: 1px #e1e4e8 solid !important; } - /* Remove the top border */ - .border-xl-top-0 { border-top: 0 !important; } - /* Remove the right border */ - .border-xl-right-0 { border-right: 0 !important; } - /* Remove the bottom border */ - .border-xl-bottom-0 { border-bottom: 0 !important; } - /* Remove the left border */ - .border-xl-left-0 { border-left: 0 !important; } - /* Remove the border-radius */ - .rounded-xl-0 { border-radius: 0 !important; } - /* Add a border-radius to all corners */ - .rounded-xl-1 { border-radius: 3px !important; } - /* Add a 2x border-radius to all corners */ - .rounded-xl-2 { border-radius: 6px !important; } - .rounded-xl-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } - .rounded-xl-top-1 { border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } - .rounded-xl-top-2 { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; } - .rounded-xl-right-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } - .rounded-xl-right-1 { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } - .rounded-xl-right-2 { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } - .rounded-xl-bottom-0 { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } - .rounded-xl-bottom-1 { border-bottom-right-radius: 3px !important; border-bottom-left-radius: 3px !important; } - .rounded-xl-bottom-2 { border-bottom-right-radius: 6px !important; border-bottom-left-radius: 6px !important; } - .rounded-xl-left-0 { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } - .rounded-xl-left-1 { border-bottom-left-radius: 3px !important; border-top-left-radius: 3px !important; } - .rounded-xl-left-2 { border-bottom-left-radius: 6px !important; border-top-left-radius: 6px !important; } } -/* Add a 50% border-radius to make something into a circle */ -.circle { border-radius: 50% !important; } - -.box-shadow { box-shadow: 0 1px 1px rgba(27, 31, 35, 0.1) !important; } - -.box-shadow-medium { box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15) !important; } - -.box-shadow-large { box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15) !important; } - -.box-shadow-extra-large { box-shadow: 0 10px 50px rgba(27, 31, 35, 0.07) !important; } - -.box-shadow-none { box-shadow: none !important; } - -/* Set the background to $bg-white */ -.bg-white { background-color: #fff !important; } - -/* Set the background to $bg-blue */ -.bg-blue { background-color: #0366d6 !important; } - -/* Set the background to $bg-blue-light */ -.bg-blue-light { background-color: #f1f8ff !important; } - -/* Set the background to $bg-gray-dark */ -.bg-gray-dark { background-color: #24292e !important; } - -/* Set the background to $bg-gray */ -.bg-gray { background-color: #f6f8fa !important; } - -/* Set the background to $bg-gray-light */ -.bg-gray-light { background-color: #fafbfc !important; } - -/* Set the background to $bg-green */ -.bg-green { background-color: #28a745 !important; } - -/* Set the background to $bg-green-light */ -.bg-green-light { background-color: #dcffe4 !important; } - -/* Set the background to $bg-red */ -.bg-red { background-color: #d73a49 !important; } - -/* Set the background to $bg-red-light */ -.bg-red-light { background-color: #ffdce0 !important; } - -/* Set the background to $bg-yellow */ -.bg-yellow { background-color: #ffd33d !important; } - -/* Set the background to $bg-yellow-light */ -.bg-yellow-light { background-color: #fff5b1 !important; } - -/* Set the background to $bg-purple */ -.bg-purple { background-color: #6f42c1 !important; } - -/* Set the background to $bg-purple-light */ -.bg-purple-light { background-color: #f5f0ff !important; } - -.bg-shade-gradient { background-image: linear-gradient(180deg, rgba(27, 31, 35, 0.065), rgba(27, 31, 35, 0)) !important; background-repeat: no-repeat !important; background-size: 100% 200px !important; } - -/* Set the text color to $text-blue */ -.text-blue { color: #0366d6 !important; } - -/* Set the text color to $text-red */ -.text-red { color: #cb2431 !important; } - -/* Set the text color to $text-gray-light */ -.text-gray-light { color: #6a737d !important; } - -/* Set the text color to $text-gray */ -.text-gray { color: #586069 !important; } - -/* Set the text color to $text-gray-dark */ -.text-gray-dark { color: #24292e !important; } - -/* Set the text color to $text-green */ -.text-green { color: #28a745 !important; } - -/* Set the text color to $text-orange */ -.text-orange { color: #a04100 !important; } - -/* Set the text color to $text-orange-light */ -.text-orange-light { color: #e36209 !important; } - -/* Set the text color to $text-purple */ -.text-purple { color: #6f42c1 !important; } - -/* Set the text color to $text-white */ -.text-white { color: #fff !important; } - -/* Set the text color to inherit */ -.text-inherit { color: inherit !important; } - -.text-pending { color: #b08800 !important; } - -.bg-pending { color: #dbab09 !important; } - -.link-gray { color: #586069 !important; } -.link-gray:hover { color: #0366d6 !important; } - -.link-gray-dark { color: #24292e !important; } -.link-gray-dark:hover { color: #0366d6 !important; } - -/* Set the link color to $text-blue on hover Useful when you want only part of a link to turn blue on hover */ -.link-hover-blue:hover { color: #0366d6 !important; } - -/* Make a link $text-gray, then $text-blue on hover and removes the underline */ -.muted-link { color: #586069 !important; } -.muted-link:hover { color: #0366d6 !important; text-decoration: none; } - -.details-overlay[open] > summary::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; display: block; cursor: default; content: " "; background: transparent; } - -.details-overlay-dark[open] > summary::before { z-index: 99; background: rgba(27, 31, 35, 0.5); } - -.flex-row { flex-direction: row !important; } - -.flex-row-reverse { flex-direction: row-reverse !important; } - -.flex-column { flex-direction: column !important; } - -.flex-wrap { flex-wrap: wrap !important; } - -.flex-nowrap { flex-wrap: nowrap !important; } - -.flex-justify-start { justify-content: flex-start !important; } - -.flex-justify-end { justify-content: flex-end !important; } - -.flex-justify-center { justify-content: center !important; } - -.flex-justify-between { justify-content: space-between !important; } - -.flex-justify-around { justify-content: space-around !important; } - -.flex-items-start { align-items: flex-start !important; } - -.flex-items-end { align-items: flex-end !important; } - -.flex-items-center { align-items: center !important; } - -.flex-items-baseline { align-items: baseline !important; } - -.flex-items-stretch { align-items: stretch !important; } - -.flex-content-start { align-content: flex-start !important; } - -.flex-content-end { align-content: flex-end !important; } - -.flex-content-center { align-content: center !important; } - -.flex-content-between { align-content: space-between !important; } - -.flex-content-around { align-content: space-around !important; } - -.flex-content-stretch { align-content: stretch !important; } - -.flex-auto { flex: 1 1 auto !important; } - -.flex-shrink-0 { flex-shrink: 0 !important; } - -.flex-self-auto { align-self: auto !important; } - -.flex-self-start { align-self: flex-start !important; } - -.flex-self-end { align-self: flex-end !important; } - -.flex-self-center { align-self: center !important; } - -.flex-self-baseline { align-self: baseline !important; } - -.flex-self-stretch { align-self: stretch !important; } - -.flex-item-equal { flex-grow: 1; flex-basis: 0; } - -@media (min-width: 544px) { .flex-sm-row { flex-direction: row !important; } - .flex-sm-row-reverse { flex-direction: row-reverse !important; } - .flex-sm-column { flex-direction: column !important; } - .flex-sm-wrap { flex-wrap: wrap !important; } - .flex-sm-nowrap { flex-wrap: nowrap !important; } - .flex-sm-justify-start { justify-content: flex-start !important; } - .flex-sm-justify-end { justify-content: flex-end !important; } - .flex-sm-justify-center { justify-content: center !important; } - .flex-sm-justify-between { justify-content: space-between !important; } - .flex-sm-justify-around { justify-content: space-around !important; } - .flex-sm-items-start { align-items: flex-start !important; } - .flex-sm-items-end { align-items: flex-end !important; } - .flex-sm-items-center { align-items: center !important; } - .flex-sm-items-baseline { align-items: baseline !important; } - .flex-sm-items-stretch { align-items: stretch !important; } - .flex-sm-content-start { align-content: flex-start !important; } - .flex-sm-content-end { align-content: flex-end !important; } - .flex-sm-content-center { align-content: center !important; } - .flex-sm-content-between { align-content: space-between !important; } - .flex-sm-content-around { align-content: space-around !important; } - .flex-sm-content-stretch { align-content: stretch !important; } - .flex-sm-auto { flex: 1 1 auto !important; } - .flex-sm-shrink-0 { flex-shrink: 0 !important; } - .flex-sm-self-auto { align-self: auto !important; } - .flex-sm-self-start { align-self: flex-start !important; } - .flex-sm-self-end { align-self: flex-end !important; } - .flex-sm-self-center { align-self: center !important; } - .flex-sm-self-baseline { align-self: baseline !important; } - .flex-sm-self-stretch { align-self: stretch !important; } - .flex-sm-item-equal { flex-grow: 1; flex-basis: 0; } } -@media (min-width: 768px) { .flex-md-row { flex-direction: row !important; } - .flex-md-row-reverse { flex-direction: row-reverse !important; } - .flex-md-column { flex-direction: column !important; } - .flex-md-wrap { flex-wrap: wrap !important; } - .flex-md-nowrap { flex-wrap: nowrap !important; } - .flex-md-justify-start { justify-content: flex-start !important; } - .flex-md-justify-end { justify-content: flex-end !important; } - .flex-md-justify-center { justify-content: center !important; } - .flex-md-justify-between { justify-content: space-between !important; } - .flex-md-justify-around { justify-content: space-around !important; } - .flex-md-items-start { align-items: flex-start !important; } - .flex-md-items-end { align-items: flex-end !important; } - .flex-md-items-center { align-items: center !important; } - .flex-md-items-baseline { align-items: baseline !important; } - .flex-md-items-stretch { align-items: stretch !important; } - .flex-md-content-start { align-content: flex-start !important; } - .flex-md-content-end { align-content: flex-end !important; } - .flex-md-content-center { align-content: center !important; } - .flex-md-content-between { align-content: space-between !important; } - .flex-md-content-around { align-content: space-around !important; } - .flex-md-content-stretch { align-content: stretch !important; } - .flex-md-auto { flex: 1 1 auto !important; } - .flex-md-shrink-0 { flex-shrink: 0 !important; } - .flex-md-self-auto { align-self: auto !important; } - .flex-md-self-start { align-self: flex-start !important; } - .flex-md-self-end { align-self: flex-end !important; } - .flex-md-self-center { align-self: center !important; } - .flex-md-self-baseline { align-self: baseline !important; } - .flex-md-self-stretch { align-self: stretch !important; } - .flex-md-item-equal { flex-grow: 1; flex-basis: 0; } } -@media (min-width: 1012px) { .flex-lg-row { flex-direction: row !important; } - .flex-lg-row-reverse { flex-direction: row-reverse !important; } - .flex-lg-column { flex-direction: column !important; } - .flex-lg-wrap { flex-wrap: wrap !important; } - .flex-lg-nowrap { flex-wrap: nowrap !important; } - .flex-lg-justify-start { justify-content: flex-start !important; } - .flex-lg-justify-end { justify-content: flex-end !important; } - .flex-lg-justify-center { justify-content: center !important; } - .flex-lg-justify-between { justify-content: space-between !important; } - .flex-lg-justify-around { justify-content: space-around !important; } - .flex-lg-items-start { align-items: flex-start !important; } - .flex-lg-items-end { align-items: flex-end !important; } - .flex-lg-items-center { align-items: center !important; } - .flex-lg-items-baseline { align-items: baseline !important; } - .flex-lg-items-stretch { align-items: stretch !important; } - .flex-lg-content-start { align-content: flex-start !important; } - .flex-lg-content-end { align-content: flex-end !important; } - .flex-lg-content-center { align-content: center !important; } - .flex-lg-content-between { align-content: space-between !important; } - .flex-lg-content-around { align-content: space-around !important; } - .flex-lg-content-stretch { align-content: stretch !important; } - .flex-lg-auto { flex: 1 1 auto !important; } - .flex-lg-shrink-0 { flex-shrink: 0 !important; } - .flex-lg-self-auto { align-self: auto !important; } - .flex-lg-self-start { align-self: flex-start !important; } - .flex-lg-self-end { align-self: flex-end !important; } - .flex-lg-self-center { align-self: center !important; } - .flex-lg-self-baseline { align-self: baseline !important; } - .flex-lg-self-stretch { align-self: stretch !important; } - .flex-lg-item-equal { flex-grow: 1; flex-basis: 0; } } -@media (min-width: 1280px) { .flex-xl-row { flex-direction: row !important; } - .flex-xl-row-reverse { flex-direction: row-reverse !important; } - .flex-xl-column { flex-direction: column !important; } - .flex-xl-wrap { flex-wrap: wrap !important; } - .flex-xl-nowrap { flex-wrap: nowrap !important; } - .flex-xl-justify-start { justify-content: flex-start !important; } - .flex-xl-justify-end { justify-content: flex-end !important; } - .flex-xl-justify-center { justify-content: center !important; } - .flex-xl-justify-between { justify-content: space-between !important; } - .flex-xl-justify-around { justify-content: space-around !important; } - .flex-xl-items-start { align-items: flex-start !important; } - .flex-xl-items-end { align-items: flex-end !important; } - .flex-xl-items-center { align-items: center !important; } - .flex-xl-items-baseline { align-items: baseline !important; } - .flex-xl-items-stretch { align-items: stretch !important; } - .flex-xl-content-start { align-content: flex-start !important; } - .flex-xl-content-end { align-content: flex-end !important; } - .flex-xl-content-center { align-content: center !important; } - .flex-xl-content-between { align-content: space-between !important; } - .flex-xl-content-around { align-content: space-around !important; } - .flex-xl-content-stretch { align-content: stretch !important; } - .flex-xl-auto { flex: 1 1 auto !important; } - .flex-xl-shrink-0 { flex-shrink: 0 !important; } - .flex-xl-self-auto { align-self: auto !important; } - .flex-xl-self-start { align-self: flex-start !important; } - .flex-xl-self-end { align-self: flex-end !important; } - .flex-xl-self-center { align-self: center !important; } - .flex-xl-self-baseline { align-self: baseline !important; } - .flex-xl-self-stretch { align-self: stretch !important; } - .flex-xl-item-equal { flex-grow: 1; flex-basis: 0; } } -/* Set position to static */ -.position-static { position: static !important; } - -/* Set position to relative */ -.position-relative { position: relative !important; } - -/* Set position to absolute */ -.position-absolute { position: absolute !important; } - -/* Set position to fixed */ -.position-fixed { position: fixed !important; } - -/* Set top 0 */ -.top-0 { top: 0 !important; } - -/* Set right 0 */ -.right-0 { right: 0 !important; } - -/* Set bottom 0 */ -.bottom-0 { bottom: 0 !important; } - -/* Set left 0 */ -.left-0 { left: 0 !important; } - -/* Vertical align middle */ -.v-align-middle { vertical-align: middle !important; } - -/* Vertical align top */ -.v-align-top { vertical-align: top !important; } - -/* Vertical align bottom */ -.v-align-bottom { vertical-align: bottom !important; } - -/* Vertical align to the top of the text */ -.v-align-text-top { vertical-align: text-top !important; } - -/* Vertical align to the bottom of the text */ -.v-align-text-bottom { vertical-align: text-bottom !important; } - -/* Vertical align to the parent's baseline */ -.v-align-baseline { vertical-align: baseline !important; } - -/* Set the overflow hidden */ -.overflow-hidden { overflow: hidden !important; } - -/* Set the overflow scroll */ -.overflow-scroll { overflow: scroll !important; } - -/* Set the overflow auto */ -.overflow-auto { overflow: auto !important; } - -/* Clear floats around the element */ -.clearfix::before { display: table; content: ""; } -.clearfix::after { display: table; clear: both; content: ""; } - -/* Float to the left */ -.float-left { float: left !important; } - -/* Float to the right */ -.float-right { float: right !important; } - -/* No float */ -.float-none { float: none !important; } - -@media (min-width: 544px) { /* Float to the left */ - .float-sm-left { float: left !important; } - /* Float to the right */ - .float-sm-right { float: right !important; } - /* No float */ - .float-sm-none { float: none !important; } } -@media (min-width: 768px) { /* Float to the left */ - .float-md-left { float: left !important; } - /* Float to the right */ - .float-md-right { float: right !important; } - /* No float */ - .float-md-none { float: none !important; } } -@media (min-width: 1012px) { /* Float to the left */ - .float-lg-left { float: left !important; } - /* Float to the right */ - .float-lg-right { float: right !important; } - /* No float */ - .float-lg-none { float: none !important; } } -@media (min-width: 1280px) { /* Float to the left */ - .float-xl-left { float: left !important; } - /* Float to the right */ - .float-xl-right { float: right !important; } - /* No float */ - .float-xl-none { float: none !important; } } -/* Max width 100% */ -.width-fit { max-width: 100% !important; } - -/* Set the width to 100% */ -.width-full { width: 100% !important; } - -/* Max height 100% */ -.height-fit { max-height: 100% !important; } - -/* Set the height to 100% */ -.height-full { height: 100% !important; } - -/* Remove min-width from element */ -.min-width-0 { min-width: 0 !important; } - -/* Set the direction to rtl */ -.direction-rtl { direction: rtl !important; } - -/* Set the direction to ltr */ -.direction-ltr { direction: ltr !important; } - -@media (min-width: 544px) { /* Set the direction to rtl */ - .direction-sm-rtl { direction: rtl !important; } - /* Set the direction to ltr */ - .direction-sm-ltr { direction: ltr !important; } } -@media (min-width: 768px) { /* Set the direction to rtl */ - .direction-md-rtl { direction: rtl !important; } - /* Set the direction to ltr */ - .direction-md-ltr { direction: ltr !important; } } -@media (min-width: 1012px) { /* Set the direction to rtl */ - .direction-lg-rtl { direction: rtl !important; } - /* Set the direction to ltr */ - .direction-lg-ltr { direction: ltr !important; } } -@media (min-width: 1280px) { /* Set the direction to rtl */ - .direction-xl-rtl { direction: rtl !important; } - /* Set the direction to ltr */ - .direction-xl-ltr { direction: ltr !important; } } -/* Set a $size margin to all sides at $breakpoint */ -.m-0 { margin: 0 !important; } - -/* Set a $size margin on the top at $breakpoint */ -.mt-0 { margin-top: 0 !important; } - -/* Set a $size margin on the right at $breakpoint */ -.mr-0 { margin-right: 0 !important; } - -/* Set a $size margin on the bottom at $breakpoint */ -.mb-0 { margin-bottom: 0 !important; } - -/* Set a $size margin on the left at $breakpoint */ -.ml-0 { margin-left: 0 !important; } - -/* Set a $size margin on the left & right at $breakpoint */ -.mx-0 { margin-right: 0 !important; margin-left: 0 !important; } - -/* Set a $size margin on the top & bottom at $breakpoint */ -.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } - -/* Set a $size margin to all sides at $breakpoint */ -.m-1 { margin: 4px !important; } - -/* Set a $size margin on the top at $breakpoint */ -.mt-1 { margin-top: 4px !important; } - -/* Set a $size margin on the right at $breakpoint */ -.mr-1 { margin-right: 4px !important; } - -/* Set a $size margin on the bottom at $breakpoint */ -.mb-1 { margin-bottom: 4px !important; } - -/* Set a $size margin on the left at $breakpoint */ -.ml-1 { margin-left: 4px !important; } - -/* Set a negative $size margin on top at $breakpoint */ -.mt-n1 { margin-top: -4px !important; } - -/* Set a negative $size margin on the right at $breakpoint */ -.mr-n1 { margin-right: -4px !important; } - -/* Set a negative $size margin on the bottom at $breakpoint */ -.mb-n1 { margin-bottom: -4px !important; } - -/* Set a negative $size margin on the left at $breakpoint */ -.ml-n1 { margin-left: -4px !important; } - -/* Set a $size margin on the left & right at $breakpoint */ -.mx-1 { margin-right: 4px !important; margin-left: 4px !important; } - -/* Set a $size margin on the top & bottom at $breakpoint */ -.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; } - -/* Set a $size margin to all sides at $breakpoint */ -.m-2 { margin: 8px !important; } - -/* Set a $size margin on the top at $breakpoint */ -.mt-2 { margin-top: 8px !important; } - -/* Set a $size margin on the right at $breakpoint */ -.mr-2 { margin-right: 8px !important; } - -/* Set a $size margin on the bottom at $breakpoint */ -.mb-2 { margin-bottom: 8px !important; } - -/* Set a $size margin on the left at $breakpoint */ -.ml-2 { margin-left: 8px !important; } - -/* Set a negative $size margin on top at $breakpoint */ -.mt-n2 { margin-top: -8px !important; } - -/* Set a negative $size margin on the right at $breakpoint */ -.mr-n2 { margin-right: -8px !important; } - -/* Set a negative $size margin on the bottom at $breakpoint */ -.mb-n2 { margin-bottom: -8px !important; } - -/* Set a negative $size margin on the left at $breakpoint */ -.ml-n2 { margin-left: -8px !important; } - -/* Set a $size margin on the left & right at $breakpoint */ -.mx-2 { margin-right: 8px !important; margin-left: 8px !important; } - -/* Set a $size margin on the top & bottom at $breakpoint */ -.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; } - -/* Set a $size margin to all sides at $breakpoint */ -.m-3 { margin: 16px !important; } - -/* Set a $size margin on the top at $breakpoint */ -.mt-3 { margin-top: 16px !important; } - -/* Set a $size margin on the right at $breakpoint */ -.mr-3 { margin-right: 16px !important; } - -/* Set a $size margin on the bottom at $breakpoint */ -.mb-3 { margin-bottom: 16px !important; } - -/* Set a $size margin on the left at $breakpoint */ -.ml-3 { margin-left: 16px !important; } - -/* Set a negative $size margin on top at $breakpoint */ -.mt-n3 { margin-top: -16px !important; } - -/* Set a negative $size margin on the right at $breakpoint */ -.mr-n3 { margin-right: -16px !important; } - -/* Set a negative $size margin on the bottom at $breakpoint */ -.mb-n3 { margin-bottom: -16px !important; } - -/* Set a negative $size margin on the left at $breakpoint */ -.ml-n3 { margin-left: -16px !important; } - -/* Set a $size margin on the left & right at $breakpoint */ -.mx-3 { margin-right: 16px !important; margin-left: 16px !important; } - -/* Set a $size margin on the top & bottom at $breakpoint */ -.my-3 { margin-top: 16px !important; margin-bottom: 16px !important; } - -/* Set a $size margin to all sides at $breakpoint */ -.m-4 { margin: 24px !important; } - -/* Set a $size margin on the top at $breakpoint */ -.mt-4 { margin-top: 24px !important; } - -/* Set a $size margin on the right at $breakpoint */ -.mr-4 { margin-right: 24px !important; } - -/* Set a $size margin on the bottom at $breakpoint */ -.mb-4 { margin-bottom: 24px !important; } - -/* Set a $size margin on the left at $breakpoint */ -.ml-4 { margin-left: 24px !important; } - -/* Set a negative $size margin on top at $breakpoint */ -.mt-n4 { margin-top: -24px !important; } - -/* Set a negative $size margin on the right at $breakpoint */ -.mr-n4 { margin-right: -24px !important; } - -/* Set a negative $size margin on the bottom at $breakpoint */ -.mb-n4 { margin-bottom: -24px !important; } - -/* Set a negative $size margin on the left at $breakpoint */ -.ml-n4 { margin-left: -24px !important; } - -/* Set a $size margin on the left & right at $breakpoint */ -.mx-4 { margin-right: 24px !important; margin-left: 24px !important; } - -/* Set a $size margin on the top & bottom at $breakpoint */ -.my-4 { margin-top: 24px !important; margin-bottom: 24px !important; } - -/* Set a $size margin to all sides at $breakpoint */ -.m-5 { margin: 32px !important; } - -/* Set a $size margin on the top at $breakpoint */ -.mt-5 { margin-top: 32px !important; } - -/* Set a $size margin on the right at $breakpoint */ -.mr-5 { margin-right: 32px !important; } - -/* Set a $size margin on the bottom at $breakpoint */ -.mb-5 { margin-bottom: 32px !important; } - -/* Set a $size margin on the left at $breakpoint */ -.ml-5 { margin-left: 32px !important; } - -/* Set a negative $size margin on top at $breakpoint */ -.mt-n5 { margin-top: -32px !important; } - -/* Set a negative $size margin on the right at $breakpoint */ -.mr-n5 { margin-right: -32px !important; } - -/* Set a negative $size margin on the bottom at $breakpoint */ -.mb-n5 { margin-bottom: -32px !important; } - -/* Set a negative $size margin on the left at $breakpoint */ -.ml-n5 { margin-left: -32px !important; } - -/* Set a $size margin on the left & right at $breakpoint */ -.mx-5 { margin-right: 32px !important; margin-left: 32px !important; } - -/* Set a $size margin on the top & bottom at $breakpoint */ -.my-5 { margin-top: 32px !important; margin-bottom: 32px !important; } - -/* Set a $size margin to all sides at $breakpoint */ -.m-6 { margin: 40px !important; } - -/* Set a $size margin on the top at $breakpoint */ -.mt-6 { margin-top: 40px !important; } - -/* Set a $size margin on the right at $breakpoint */ -.mr-6 { margin-right: 40px !important; } - -/* Set a $size margin on the bottom at $breakpoint */ -.mb-6 { margin-bottom: 40px !important; } - -/* Set a $size margin on the left at $breakpoint */ -.ml-6 { margin-left: 40px !important; } - -/* Set a negative $size margin on top at $breakpoint */ -.mt-n6 { margin-top: -40px !important; } - -/* Set a negative $size margin on the right at $breakpoint */ -.mr-n6 { margin-right: -40px !important; } - -/* Set a negative $size margin on the bottom at $breakpoint */ -.mb-n6 { margin-bottom: -40px !important; } - -/* Set a negative $size margin on the left at $breakpoint */ -.ml-n6 { margin-left: -40px !important; } - -/* Set a $size margin on the left & right at $breakpoint */ -.mx-6 { margin-right: 40px !important; margin-left: 40px !important; } - -/* Set a $size margin on the top & bottom at $breakpoint */ -.my-6 { margin-top: 40px !important; margin-bottom: 40px !important; } - -/* responsive horizontal auto margins */ -.mx-auto { margin-right: auto !important; margin-left: auto !important; } - -@media (min-width: 544px) { /* Set a $size margin to all sides at $breakpoint */ - .m-sm-0 { margin: 0 !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-sm-0 { margin-top: 0 !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-sm-0 { margin-right: 0 !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-sm-0 { margin-bottom: 0 !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-sm-0 { margin-left: 0 !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-sm-0 { margin-right: 0 !important; margin-left: 0 !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-sm-1 { margin: 4px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-sm-1 { margin-top: 4px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-sm-1 { margin-right: 4px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-sm-1 { margin-bottom: 4px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-sm-1 { margin-left: 4px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-sm-n1 { margin-top: -4px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-sm-n1 { margin-right: -4px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-sm-n1 { margin-bottom: -4px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-sm-n1 { margin-left: -4px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-sm-1 { margin-right: 4px !important; margin-left: 4px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-sm-1 { margin-top: 4px !important; margin-bottom: 4px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-sm-2 { margin: 8px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-sm-2 { margin-top: 8px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-sm-2 { margin-right: 8px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-sm-2 { margin-bottom: 8px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-sm-2 { margin-left: 8px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-sm-n2 { margin-top: -8px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-sm-n2 { margin-right: -8px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-sm-n2 { margin-bottom: -8px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-sm-n2 { margin-left: -8px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-sm-2 { margin-right: 8px !important; margin-left: 8px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-sm-2 { margin-top: 8px !important; margin-bottom: 8px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-sm-3 { margin: 16px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-sm-3 { margin-top: 16px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-sm-3 { margin-right: 16px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-sm-3 { margin-bottom: 16px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-sm-3 { margin-left: 16px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-sm-n3 { margin-top: -16px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-sm-n3 { margin-right: -16px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-sm-n3 { margin-bottom: -16px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-sm-n3 { margin-left: -16px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-sm-3 { margin-right: 16px !important; margin-left: 16px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-sm-3 { margin-top: 16px !important; margin-bottom: 16px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-sm-4 { margin: 24px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-sm-4 { margin-top: 24px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-sm-4 { margin-right: 24px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-sm-4 { margin-bottom: 24px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-sm-4 { margin-left: 24px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-sm-n4 { margin-top: -24px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-sm-n4 { margin-right: -24px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-sm-n4 { margin-bottom: -24px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-sm-n4 { margin-left: -24px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-sm-4 { margin-right: 24px !important; margin-left: 24px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-sm-4 { margin-top: 24px !important; margin-bottom: 24px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-sm-5 { margin: 32px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-sm-5 { margin-top: 32px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-sm-5 { margin-right: 32px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-sm-5 { margin-bottom: 32px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-sm-5 { margin-left: 32px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-sm-n5 { margin-top: -32px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-sm-n5 { margin-right: -32px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-sm-n5 { margin-bottom: -32px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-sm-n5 { margin-left: -32px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-sm-5 { margin-right: 32px !important; margin-left: 32px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-sm-5 { margin-top: 32px !important; margin-bottom: 32px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-sm-6 { margin: 40px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-sm-6 { margin-top: 40px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-sm-6 { margin-right: 40px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-sm-6 { margin-bottom: 40px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-sm-6 { margin-left: 40px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-sm-n6 { margin-top: -40px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-sm-n6 { margin-right: -40px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-sm-n6 { margin-bottom: -40px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-sm-n6 { margin-left: -40px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-sm-6 { margin-right: 40px !important; margin-left: 40px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-sm-6 { margin-top: 40px !important; margin-bottom: 40px !important; } - /* responsive horizontal auto margins */ - .mx-sm-auto { margin-right: auto !important; margin-left: auto !important; } } -@media (min-width: 768px) { /* Set a $size margin to all sides at $breakpoint */ - .m-md-0 { margin: 0 !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-md-0 { margin-top: 0 !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-md-0 { margin-right: 0 !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-md-0 { margin-bottom: 0 !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-md-0 { margin-left: 0 !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-md-0 { margin-right: 0 !important; margin-left: 0 !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-md-1 { margin: 4px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-md-1 { margin-top: 4px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-md-1 { margin-right: 4px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-md-1 { margin-bottom: 4px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-md-1 { margin-left: 4px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-md-n1 { margin-top: -4px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-md-n1 { margin-right: -4px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-md-n1 { margin-bottom: -4px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-md-n1 { margin-left: -4px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-md-1 { margin-right: 4px !important; margin-left: 4px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-md-1 { margin-top: 4px !important; margin-bottom: 4px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-md-2 { margin: 8px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-md-2 { margin-top: 8px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-md-2 { margin-right: 8px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-md-2 { margin-bottom: 8px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-md-2 { margin-left: 8px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-md-n2 { margin-top: -8px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-md-n2 { margin-right: -8px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-md-n2 { margin-bottom: -8px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-md-n2 { margin-left: -8px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-md-2 { margin-right: 8px !important; margin-left: 8px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-md-2 { margin-top: 8px !important; margin-bottom: 8px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-md-3 { margin: 16px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-md-3 { margin-top: 16px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-md-3 { margin-right: 16px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-md-3 { margin-bottom: 16px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-md-3 { margin-left: 16px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-md-n3 { margin-top: -16px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-md-n3 { margin-right: -16px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-md-n3 { margin-bottom: -16px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-md-n3 { margin-left: -16px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-md-3 { margin-right: 16px !important; margin-left: 16px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-md-3 { margin-top: 16px !important; margin-bottom: 16px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-md-4 { margin: 24px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-md-4 { margin-top: 24px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-md-4 { margin-right: 24px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-md-4 { margin-bottom: 24px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-md-4 { margin-left: 24px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-md-n4 { margin-top: -24px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-md-n4 { margin-right: -24px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-md-n4 { margin-bottom: -24px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-md-n4 { margin-left: -24px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-md-4 { margin-right: 24px !important; margin-left: 24px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-md-4 { margin-top: 24px !important; margin-bottom: 24px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-md-5 { margin: 32px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-md-5 { margin-top: 32px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-md-5 { margin-right: 32px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-md-5 { margin-bottom: 32px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-md-5 { margin-left: 32px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-md-n5 { margin-top: -32px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-md-n5 { margin-right: -32px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-md-n5 { margin-bottom: -32px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-md-n5 { margin-left: -32px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-md-5 { margin-right: 32px !important; margin-left: 32px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-md-5 { margin-top: 32px !important; margin-bottom: 32px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-md-6 { margin: 40px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-md-6 { margin-top: 40px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-md-6 { margin-right: 40px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-md-6 { margin-bottom: 40px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-md-6 { margin-left: 40px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-md-n6 { margin-top: -40px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-md-n6 { margin-right: -40px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-md-n6 { margin-bottom: -40px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-md-n6 { margin-left: -40px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-md-6 { margin-right: 40px !important; margin-left: 40px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-md-6 { margin-top: 40px !important; margin-bottom: 40px !important; } - /* responsive horizontal auto margins */ - .mx-md-auto { margin-right: auto !important; margin-left: auto !important; } } -@media (min-width: 1012px) { /* Set a $size margin to all sides at $breakpoint */ - .m-lg-0 { margin: 0 !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-lg-0 { margin-top: 0 !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-lg-0 { margin-right: 0 !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-lg-0 { margin-bottom: 0 !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-lg-0 { margin-left: 0 !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-lg-0 { margin-right: 0 !important; margin-left: 0 !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-lg-1 { margin: 4px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-lg-1 { margin-top: 4px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-lg-1 { margin-right: 4px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-lg-1 { margin-bottom: 4px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-lg-1 { margin-left: 4px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-lg-n1 { margin-top: -4px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-lg-n1 { margin-right: -4px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-lg-n1 { margin-bottom: -4px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-lg-n1 { margin-left: -4px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-lg-1 { margin-right: 4px !important; margin-left: 4px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-lg-1 { margin-top: 4px !important; margin-bottom: 4px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-lg-2 { margin: 8px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-lg-2 { margin-top: 8px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-lg-2 { margin-right: 8px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-lg-2 { margin-bottom: 8px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-lg-2 { margin-left: 8px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-lg-n2 { margin-top: -8px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-lg-n2 { margin-right: -8px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-lg-n2 { margin-bottom: -8px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-lg-n2 { margin-left: -8px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-lg-2 { margin-right: 8px !important; margin-left: 8px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-lg-2 { margin-top: 8px !important; margin-bottom: 8px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-lg-3 { margin: 16px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-lg-3 { margin-top: 16px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-lg-3 { margin-right: 16px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-lg-3 { margin-bottom: 16px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-lg-3 { margin-left: 16px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-lg-n3 { margin-top: -16px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-lg-n3 { margin-right: -16px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-lg-n3 { margin-bottom: -16px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-lg-n3 { margin-left: -16px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-lg-3 { margin-right: 16px !important; margin-left: 16px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-lg-3 { margin-top: 16px !important; margin-bottom: 16px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-lg-4 { margin: 24px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-lg-4 { margin-top: 24px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-lg-4 { margin-right: 24px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-lg-4 { margin-bottom: 24px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-lg-4 { margin-left: 24px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-lg-n4 { margin-top: -24px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-lg-n4 { margin-right: -24px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-lg-n4 { margin-bottom: -24px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-lg-n4 { margin-left: -24px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-lg-4 { margin-right: 24px !important; margin-left: 24px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-lg-4 { margin-top: 24px !important; margin-bottom: 24px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-lg-5 { margin: 32px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-lg-5 { margin-top: 32px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-lg-5 { margin-right: 32px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-lg-5 { margin-bottom: 32px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-lg-5 { margin-left: 32px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-lg-n5 { margin-top: -32px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-lg-n5 { margin-right: -32px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-lg-n5 { margin-bottom: -32px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-lg-n5 { margin-left: -32px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-lg-5 { margin-right: 32px !important; margin-left: 32px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-lg-5 { margin-top: 32px !important; margin-bottom: 32px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-lg-6 { margin: 40px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-lg-6 { margin-top: 40px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-lg-6 { margin-right: 40px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-lg-6 { margin-bottom: 40px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-lg-6 { margin-left: 40px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-lg-n6 { margin-top: -40px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-lg-n6 { margin-right: -40px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-lg-n6 { margin-bottom: -40px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-lg-n6 { margin-left: -40px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-lg-6 { margin-right: 40px !important; margin-left: 40px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-lg-6 { margin-top: 40px !important; margin-bottom: 40px !important; } - /* responsive horizontal auto margins */ - .mx-lg-auto { margin-right: auto !important; margin-left: auto !important; } } -@media (min-width: 1280px) { /* Set a $size margin to all sides at $breakpoint */ - .m-xl-0 { margin: 0 !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-xl-0 { margin-top: 0 !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-xl-0 { margin-right: 0 !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-xl-0 { margin-bottom: 0 !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-xl-0 { margin-left: 0 !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-xl-0 { margin-right: 0 !important; margin-left: 0 !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-xl-1 { margin: 4px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-xl-1 { margin-top: 4px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-xl-1 { margin-right: 4px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-xl-1 { margin-bottom: 4px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-xl-1 { margin-left: 4px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-xl-n1 { margin-top: -4px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-xl-n1 { margin-right: -4px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-xl-n1 { margin-bottom: -4px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-xl-n1 { margin-left: -4px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-xl-1 { margin-right: 4px !important; margin-left: 4px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-xl-1 { margin-top: 4px !important; margin-bottom: 4px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-xl-2 { margin: 8px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-xl-2 { margin-top: 8px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-xl-2 { margin-right: 8px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-xl-2 { margin-bottom: 8px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-xl-2 { margin-left: 8px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-xl-n2 { margin-top: -8px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-xl-n2 { margin-right: -8px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-xl-n2 { margin-bottom: -8px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-xl-n2 { margin-left: -8px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-xl-2 { margin-right: 8px !important; margin-left: 8px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-xl-2 { margin-top: 8px !important; margin-bottom: 8px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-xl-3 { margin: 16px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-xl-3 { margin-top: 16px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-xl-3 { margin-right: 16px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-xl-3 { margin-bottom: 16px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-xl-3 { margin-left: 16px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-xl-n3 { margin-top: -16px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-xl-n3 { margin-right: -16px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-xl-n3 { margin-bottom: -16px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-xl-n3 { margin-left: -16px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-xl-3 { margin-right: 16px !important; margin-left: 16px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-xl-3 { margin-top: 16px !important; margin-bottom: 16px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-xl-4 { margin: 24px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-xl-4 { margin-top: 24px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-xl-4 { margin-right: 24px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-xl-4 { margin-bottom: 24px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-xl-4 { margin-left: 24px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-xl-n4 { margin-top: -24px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-xl-n4 { margin-right: -24px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-xl-n4 { margin-bottom: -24px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-xl-n4 { margin-left: -24px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-xl-4 { margin-right: 24px !important; margin-left: 24px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-xl-4 { margin-top: 24px !important; margin-bottom: 24px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-xl-5 { margin: 32px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-xl-5 { margin-top: 32px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-xl-5 { margin-right: 32px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-xl-5 { margin-bottom: 32px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-xl-5 { margin-left: 32px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-xl-n5 { margin-top: -32px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-xl-n5 { margin-right: -32px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-xl-n5 { margin-bottom: -32px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-xl-n5 { margin-left: -32px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-xl-5 { margin-right: 32px !important; margin-left: 32px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-xl-5 { margin-top: 32px !important; margin-bottom: 32px !important; } - /* Set a $size margin to all sides at $breakpoint */ - .m-xl-6 { margin: 40px !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt-xl-6 { margin-top: 40px !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr-xl-6 { margin-right: 40px !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb-xl-6 { margin-bottom: 40px !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml-xl-6 { margin-left: 40px !important; } - /* Set a negative $size margin on top at $breakpoint */ - .mt-xl-n6 { margin-top: -40px !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr-xl-n6 { margin-right: -40px !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb-xl-n6 { margin-bottom: -40px !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml-xl-n6 { margin-left: -40px !important; } - /* Set a $size margin on the left & right at $breakpoint */ - .mx-xl-6 { margin-right: 40px !important; margin-left: 40px !important; } - /* Set a $size margin on the top & bottom at $breakpoint */ - .my-xl-6 { margin-top: 40px !important; margin-bottom: 40px !important; } - /* responsive horizontal auto margins */ - .mx-xl-auto { margin-right: auto !important; margin-left: auto !important; } } -/* Set a $size padding to all sides at $breakpoint */ -.p-0 { padding: 0 !important; } - -/* Set a $size padding to the top at $breakpoint */ -.pt-0 { padding-top: 0 !important; } - -/* Set a $size padding to the right at $breakpoint */ -.pr-0 { padding-right: 0 !important; } - -/* Set a $size padding to the bottom at $breakpoint */ -.pb-0 { padding-bottom: 0 !important; } - -/* Set a $size padding to the left at $breakpoint */ -.pl-0 { padding-left: 0 !important; } - -/* Set a $size padding to the left & right at $breakpoint */ -.px-0 { padding-right: 0 !important; padding-left: 0 !important; } - -/* Set a $size padding to the top & bottom at $breakpoint */ -.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } - -/* Set a $size padding to all sides at $breakpoint */ -.p-1 { padding: 4px !important; } - -/* Set a $size padding to the top at $breakpoint */ -.pt-1 { padding-top: 4px !important; } - -/* Set a $size padding to the right at $breakpoint */ -.pr-1 { padding-right: 4px !important; } - -/* Set a $size padding to the bottom at $breakpoint */ -.pb-1 { padding-bottom: 4px !important; } - -/* Set a $size padding to the left at $breakpoint */ -.pl-1 { padding-left: 4px !important; } - -/* Set a $size padding to the left & right at $breakpoint */ -.px-1 { padding-right: 4px !important; padding-left: 4px !important; } - -/* Set a $size padding to the top & bottom at $breakpoint */ -.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; } - -/* Set a $size padding to all sides at $breakpoint */ -.p-2 { padding: 8px !important; } - -/* Set a $size padding to the top at $breakpoint */ -.pt-2 { padding-top: 8px !important; } - -/* Set a $size padding to the right at $breakpoint */ -.pr-2 { padding-right: 8px !important; } - -/* Set a $size padding to the bottom at $breakpoint */ -.pb-2 { padding-bottom: 8px !important; } - -/* Set a $size padding to the left at $breakpoint */ -.pl-2 { padding-left: 8px !important; } - -/* Set a $size padding to the left & right at $breakpoint */ -.px-2 { padding-right: 8px !important; padding-left: 8px !important; } - -/* Set a $size padding to the top & bottom at $breakpoint */ -.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } - -/* Set a $size padding to all sides at $breakpoint */ -.p-3 { padding: 16px !important; } - -/* Set a $size padding to the top at $breakpoint */ -.pt-3 { padding-top: 16px !important; } - -/* Set a $size padding to the right at $breakpoint */ -.pr-3 { padding-right: 16px !important; } - -/* Set a $size padding to the bottom at $breakpoint */ -.pb-3 { padding-bottom: 16px !important; } - -/* Set a $size padding to the left at $breakpoint */ -.pl-3 { padding-left: 16px !important; } - -/* Set a $size padding to the left & right at $breakpoint */ -.px-3 { padding-right: 16px !important; padding-left: 16px !important; } - -/* Set a $size padding to the top & bottom at $breakpoint */ -.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; } - -/* Set a $size padding to all sides at $breakpoint */ -.p-4 { padding: 24px !important; } - -/* Set a $size padding to the top at $breakpoint */ -.pt-4 { padding-top: 24px !important; } - -/* Set a $size padding to the right at $breakpoint */ -.pr-4 { padding-right: 24px !important; } - -/* Set a $size padding to the bottom at $breakpoint */ -.pb-4 { padding-bottom: 24px !important; } - -/* Set a $size padding to the left at $breakpoint */ -.pl-4 { padding-left: 24px !important; } - -/* Set a $size padding to the left & right at $breakpoint */ -.px-4 { padding-right: 24px !important; padding-left: 24px !important; } - -/* Set a $size padding to the top & bottom at $breakpoint */ -.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; } - -/* Set a $size padding to all sides at $breakpoint */ -.p-5 { padding: 32px !important; } - -/* Set a $size padding to the top at $breakpoint */ -.pt-5 { padding-top: 32px !important; } - -/* Set a $size padding to the right at $breakpoint */ -.pr-5 { padding-right: 32px !important; } - -/* Set a $size padding to the bottom at $breakpoint */ -.pb-5 { padding-bottom: 32px !important; } - -/* Set a $size padding to the left at $breakpoint */ -.pl-5 { padding-left: 32px !important; } - -/* Set a $size padding to the left & right at $breakpoint */ -.px-5 { padding-right: 32px !important; padding-left: 32px !important; } - -/* Set a $size padding to the top & bottom at $breakpoint */ -.py-5 { padding-top: 32px !important; padding-bottom: 32px !important; } - -/* Set a $size padding to all sides at $breakpoint */ -.p-6 { padding: 40px !important; } - -/* Set a $size padding to the top at $breakpoint */ -.pt-6 { padding-top: 40px !important; } - -/* Set a $size padding to the right at $breakpoint */ -.pr-6 { padding-right: 40px !important; } - -/* Set a $size padding to the bottom at $breakpoint */ -.pb-6 { padding-bottom: 40px !important; } - -/* Set a $size padding to the left at $breakpoint */ -.pl-6 { padding-left: 40px !important; } - -/* Set a $size padding to the left & right at $breakpoint */ -.px-6 { padding-right: 40px !important; padding-left: 40px !important; } - -/* Set a $size padding to the top & bottom at $breakpoint */ -.py-6 { padding-top: 40px !important; padding-bottom: 40px !important; } - -@media (min-width: 544px) { /* Set a $size padding to all sides at $breakpoint */ - .p-sm-0 { padding: 0 !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-sm-0 { padding-top: 0 !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-sm-0 { padding-right: 0 !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-sm-0 { padding-bottom: 0 !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-sm-0 { padding-left: 0 !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-sm-1 { padding: 4px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-sm-1 { padding-top: 4px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-sm-1 { padding-right: 4px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-sm-1 { padding-bottom: 4px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-sm-1 { padding-left: 4px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-sm-1 { padding-right: 4px !important; padding-left: 4px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-sm-1 { padding-top: 4px !important; padding-bottom: 4px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-sm-2 { padding: 8px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-sm-2 { padding-top: 8px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-sm-2 { padding-right: 8px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-sm-2 { padding-bottom: 8px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-sm-2 { padding-left: 8px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-sm-2 { padding-right: 8px !important; padding-left: 8px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-sm-2 { padding-top: 8px !important; padding-bottom: 8px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-sm-3 { padding: 16px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-sm-3 { padding-top: 16px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-sm-3 { padding-right: 16px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-sm-3 { padding-bottom: 16px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-sm-3 { padding-left: 16px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-sm-3 { padding-right: 16px !important; padding-left: 16px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-sm-3 { padding-top: 16px !important; padding-bottom: 16px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-sm-4 { padding: 24px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-sm-4 { padding-top: 24px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-sm-4 { padding-right: 24px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-sm-4 { padding-bottom: 24px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-sm-4 { padding-left: 24px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-sm-4 { padding-right: 24px !important; padding-left: 24px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-sm-4 { padding-top: 24px !important; padding-bottom: 24px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-sm-5 { padding: 32px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-sm-5 { padding-top: 32px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-sm-5 { padding-right: 32px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-sm-5 { padding-bottom: 32px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-sm-5 { padding-left: 32px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-sm-5 { padding-right: 32px !important; padding-left: 32px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-sm-5 { padding-top: 32px !important; padding-bottom: 32px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-sm-6 { padding: 40px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-sm-6 { padding-top: 40px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-sm-6 { padding-right: 40px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-sm-6 { padding-bottom: 40px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-sm-6 { padding-left: 40px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-sm-6 { padding-right: 40px !important; padding-left: 40px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-sm-6 { padding-top: 40px !important; padding-bottom: 40px !important; } } -@media (min-width: 768px) { /* Set a $size padding to all sides at $breakpoint */ - .p-md-0 { padding: 0 !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-md-0 { padding-top: 0 !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-md-0 { padding-right: 0 !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-md-0 { padding-bottom: 0 !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-md-0 { padding-left: 0 !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-md-0 { padding-right: 0 !important; padding-left: 0 !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-md-1 { padding: 4px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-md-1 { padding-top: 4px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-md-1 { padding-right: 4px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-md-1 { padding-bottom: 4px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-md-1 { padding-left: 4px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-md-1 { padding-right: 4px !important; padding-left: 4px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-md-1 { padding-top: 4px !important; padding-bottom: 4px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-md-2 { padding: 8px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-md-2 { padding-top: 8px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-md-2 { padding-right: 8px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-md-2 { padding-bottom: 8px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-md-2 { padding-left: 8px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-md-2 { padding-right: 8px !important; padding-left: 8px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-md-2 { padding-top: 8px !important; padding-bottom: 8px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-md-3 { padding: 16px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-md-3 { padding-top: 16px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-md-3 { padding-right: 16px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-md-3 { padding-bottom: 16px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-md-3 { padding-left: 16px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-md-3 { padding-right: 16px !important; padding-left: 16px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-md-3 { padding-top: 16px !important; padding-bottom: 16px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-md-4 { padding: 24px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-md-4 { padding-top: 24px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-md-4 { padding-right: 24px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-md-4 { padding-bottom: 24px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-md-4 { padding-left: 24px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-md-4 { padding-right: 24px !important; padding-left: 24px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-md-4 { padding-top: 24px !important; padding-bottom: 24px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-md-5 { padding: 32px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-md-5 { padding-top: 32px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-md-5 { padding-right: 32px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-md-5 { padding-bottom: 32px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-md-5 { padding-left: 32px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-md-5 { padding-right: 32px !important; padding-left: 32px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-md-5 { padding-top: 32px !important; padding-bottom: 32px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-md-6 { padding: 40px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-md-6 { padding-top: 40px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-md-6 { padding-right: 40px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-md-6 { padding-bottom: 40px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-md-6 { padding-left: 40px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-md-6 { padding-right: 40px !important; padding-left: 40px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-md-6 { padding-top: 40px !important; padding-bottom: 40px !important; } } -@media (min-width: 1012px) { /* Set a $size padding to all sides at $breakpoint */ - .p-lg-0 { padding: 0 !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-lg-0 { padding-top: 0 !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-lg-0 { padding-right: 0 !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-lg-0 { padding-bottom: 0 !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-lg-0 { padding-left: 0 !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-lg-0 { padding-right: 0 !important; padding-left: 0 !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-lg-1 { padding: 4px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-lg-1 { padding-top: 4px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-lg-1 { padding-right: 4px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-lg-1 { padding-bottom: 4px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-lg-1 { padding-left: 4px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-lg-1 { padding-right: 4px !important; padding-left: 4px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-lg-1 { padding-top: 4px !important; padding-bottom: 4px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-lg-2 { padding: 8px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-lg-2 { padding-top: 8px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-lg-2 { padding-right: 8px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-lg-2 { padding-bottom: 8px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-lg-2 { padding-left: 8px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-lg-2 { padding-right: 8px !important; padding-left: 8px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-lg-2 { padding-top: 8px !important; padding-bottom: 8px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-lg-3 { padding: 16px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-lg-3 { padding-top: 16px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-lg-3 { padding-right: 16px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-lg-3 { padding-bottom: 16px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-lg-3 { padding-left: 16px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-lg-3 { padding-right: 16px !important; padding-left: 16px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-lg-3 { padding-top: 16px !important; padding-bottom: 16px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-lg-4 { padding: 24px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-lg-4 { padding-top: 24px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-lg-4 { padding-right: 24px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-lg-4 { padding-bottom: 24px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-lg-4 { padding-left: 24px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-lg-4 { padding-right: 24px !important; padding-left: 24px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-lg-4 { padding-top: 24px !important; padding-bottom: 24px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-lg-5 { padding: 32px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-lg-5 { padding-top: 32px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-lg-5 { padding-right: 32px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-lg-5 { padding-bottom: 32px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-lg-5 { padding-left: 32px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-lg-5 { padding-right: 32px !important; padding-left: 32px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-lg-5 { padding-top: 32px !important; padding-bottom: 32px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-lg-6 { padding: 40px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-lg-6 { padding-top: 40px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-lg-6 { padding-right: 40px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-lg-6 { padding-bottom: 40px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-lg-6 { padding-left: 40px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-lg-6 { padding-right: 40px !important; padding-left: 40px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-lg-6 { padding-top: 40px !important; padding-bottom: 40px !important; } } -@media (min-width: 1280px) { /* Set a $size padding to all sides at $breakpoint */ - .p-xl-0 { padding: 0 !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-xl-0 { padding-top: 0 !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-xl-0 { padding-right: 0 !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-xl-0 { padding-bottom: 0 !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-xl-0 { padding-left: 0 !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-xl-0 { padding-right: 0 !important; padding-left: 0 !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-xl-1 { padding: 4px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-xl-1 { padding-top: 4px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-xl-1 { padding-right: 4px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-xl-1 { padding-bottom: 4px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-xl-1 { padding-left: 4px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-xl-1 { padding-right: 4px !important; padding-left: 4px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-xl-1 { padding-top: 4px !important; padding-bottom: 4px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-xl-2 { padding: 8px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-xl-2 { padding-top: 8px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-xl-2 { padding-right: 8px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-xl-2 { padding-bottom: 8px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-xl-2 { padding-left: 8px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-xl-2 { padding-right: 8px !important; padding-left: 8px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-xl-2 { padding-top: 8px !important; padding-bottom: 8px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-xl-3 { padding: 16px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-xl-3 { padding-top: 16px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-xl-3 { padding-right: 16px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-xl-3 { padding-bottom: 16px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-xl-3 { padding-left: 16px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-xl-3 { padding-right: 16px !important; padding-left: 16px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-xl-3 { padding-top: 16px !important; padding-bottom: 16px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-xl-4 { padding: 24px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-xl-4 { padding-top: 24px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-xl-4 { padding-right: 24px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-xl-4 { padding-bottom: 24px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-xl-4 { padding-left: 24px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-xl-4 { padding-right: 24px !important; padding-left: 24px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-xl-4 { padding-top: 24px !important; padding-bottom: 24px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-xl-5 { padding: 32px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-xl-5 { padding-top: 32px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-xl-5 { padding-right: 32px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-xl-5 { padding-bottom: 32px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-xl-5 { padding-left: 32px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-xl-5 { padding-right: 32px !important; padding-left: 32px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-xl-5 { padding-top: 32px !important; padding-bottom: 32px !important; } - /* Set a $size padding to all sides at $breakpoint */ - .p-xl-6 { padding: 40px !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt-xl-6 { padding-top: 40px !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr-xl-6 { padding-right: 40px !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb-xl-6 { padding-bottom: 40px !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl-xl-6 { padding-left: 40px !important; } - /* Set a $size padding to the left & right at $breakpoint */ - .px-xl-6 { padding-right: 40px !important; padding-left: 40px !important; } - /* Set a $size padding to the top & bottom at $breakpoint */ - .py-xl-6 { padding-top: 40px !important; padding-bottom: 40px !important; } } -.p-responsive { padding-right: 16px !important; padding-left: 16px !important; } -@media (min-width: 544px) { .p-responsive { padding-right: 40px !important; padding-left: 40px !important; } } -@media (min-width: 1012px) { .p-responsive { padding-right: 16px !important; padding-left: 16px !important; } } - -/* Set the font size to 26px */ -.h1 { font-size: 26px !important; } -@media (min-width: 768px) { .h1 { font-size: 32px !important; } } - -/* Set the font size to 22px */ -.h2 { font-size: 22px !important; } -@media (min-width: 768px) { .h2 { font-size: 24px !important; } } - -/* Set the font size to 18px */ -.h3 { font-size: 18px !important; } -@media (min-width: 768px) { .h3 { font-size: 20px !important; } } - -/* Set the font size to 16px */ -.h4 { font-size: 16px !important; } - -/* Set the font size to 14px */ -.h5 { font-size: 14px !important; } - -/* Set the font size to 12px */ -.h6 { font-size: 12px !important; } - -.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600 !important; } - -/* Set the font size to 26px */ -.f1 { font-size: 26px !important; } -@media (min-width: 768px) { .f1 { font-size: 32px !important; } } - -/* Set the font size to 22px */ -.f2 { font-size: 22px !important; } -@media (min-width: 768px) { .f2 { font-size: 24px !important; } } - -/* Set the font size to 18px */ -.f3 { font-size: 18px !important; } -@media (min-width: 768px) { .f3 { font-size: 20px !important; } } - -/* Set the font size to 16px */ -.f4 { font-size: 16px !important; } -@media (min-width: 768px) { .f4 { font-size: 16px !important; } } - -/* Set the font size to 14px */ -.f5 { font-size: 14px !important; } - -/* Set the font size to 12px */ -.f6 { font-size: 12px !important; } - -/* Set the font size to 40px and weight to light */ -.f00-light { font-size: 40px !important; font-weight: 300 !important; } -@media (min-width: 768px) { .f00-light { font-size: 48px !important; } } - -/* Set the font size to 32px and weight to light */ -.f0-light { font-size: 32px !important; font-weight: 300 !important; } -@media (min-width: 768px) { .f0-light { font-size: 40px !important; } } - -/* Set the font size to 26px and weight to light */ -.f1-light { font-size: 26px !important; font-weight: 300 !important; } -@media (min-width: 768px) { .f1-light { font-size: 32px !important; } } - -/* Set the font size to 22px and weight to light */ -.f2-light { font-size: 22px !important; font-weight: 300 !important; } -@media (min-width: 768px) { .f2-light { font-size: 24px !important; } } - -/* Set the font size to 18px and weight to light */ -.f3-light { font-size: 18px !important; font-weight: 300 !important; } -@media (min-width: 768px) { .f3-light { font-size: 20px !important; } } - -/* Set the font size to ${#h6-size} */ -.text-small { font-size: 12px !important; } - -/* Large leading paragraphs */ -.lead { margin-bottom: 30px; font-size: 20px; font-weight: 300; color: #586069; } - -/* Set the line height to ultra condensed */ -.lh-condensed-ultra { line-height: 1 !important; } - -/* Set the line height to condensed */ -.lh-condensed { line-height: 1.25 !important; } - -/* Set the line height to default */ -.lh-default { line-height: 1.5 !important; } - -/* Set the line height to zero */ -.lh-0 { line-height: 0 !important; } - -/* Text align to the right */ -.text-right { text-align: right !important; } - -/* Text align to the left */ -.text-left { text-align: left !important; } - -/* Text align to the center */ -.text-center { text-align: center !important; } - -@media (min-width: 544px) { /* Text align to the right */ - .text-sm-right { text-align: right !important; } - /* Text align to the left */ - .text-sm-left { text-align: left !important; } - /* Text align to the center */ - .text-sm-center { text-align: center !important; } } -@media (min-width: 768px) { /* Text align to the right */ - .text-md-right { text-align: right !important; } - /* Text align to the left */ - .text-md-left { text-align: left !important; } - /* Text align to the center */ - .text-md-center { text-align: center !important; } } -@media (min-width: 1012px) { /* Text align to the right */ - .text-lg-right { text-align: right !important; } - /* Text align to the left */ - .text-lg-left { text-align: left !important; } - /* Text align to the center */ - .text-lg-center { text-align: center !important; } } -@media (min-width: 1280px) { /* Text align to the right */ - .text-xl-right { text-align: right !important; } - /* Text align to the left */ - .text-xl-left { text-align: left !important; } - /* Text align to the center */ - .text-xl-center { text-align: center !important; } } -/* Set the font weight to normal */ -.text-normal { font-weight: 400 !important; } - -/* Set the font weight to bold */ -.text-bold { font-weight: 600 !important; } - -/* Set the font to italic */ -.text-italic { font-style: italic !important; } - -/* Make text uppercase */ -.text-uppercase { text-transform: uppercase !important; } - -/* Underline text */ -.text-underline { text-decoration: underline !important; } - -/* Don't underline text */ -.no-underline { text-decoration: none !important; } - -/* Don't wrap white space */ -.no-wrap { white-space: nowrap !important; } - -/* Normal white space */ -.ws-normal { white-space: normal !important; } - -/* Allow long lines with no spaces to line break */ -.wb-break-all { word-break: break-all !important; } - -.text-emphasized { font-weight: 600; color: #24292e; } - -.list-style-none { list-style: none !important; } - -/* Add a dark text shadow */ -.text-shadow-dark { text-shadow: 0 1px 1px rgba(27, 31, 35, 0.25), 0 1px 25px rgba(27, 31, 35, 0.75); } - -/* Add a light text shadow */ -.text-shadow-light { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } - -/* Set to monospace font */ -.text-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; } - -/* Disallow user from selecting text */ -.user-select-none { user-select: none !important; } - -.d-block { display: block !important; } - -.d-flex { display: flex !important; } - -.d-inline { display: inline !important; } - -.d-inline-block { display: inline-block !important; } - -.d-inline-flex { display: inline-flex !important; } - -.d-none { display: none !important; } - -.d-table { display: table !important; } - -.d-table-cell { display: table-cell !important; } - -@media (min-width: 544px) { .d-sm-block { display: block !important; } - .d-sm-flex { display: flex !important; } - .d-sm-inline { display: inline !important; } - .d-sm-inline-block { display: inline-block !important; } - .d-sm-inline-flex { display: inline-flex !important; } - .d-sm-none { display: none !important; } - .d-sm-table { display: table !important; } - .d-sm-table-cell { display: table-cell !important; } } -@media (min-width: 768px) { .d-md-block { display: block !important; } - .d-md-flex { display: flex !important; } - .d-md-inline { display: inline !important; } - .d-md-inline-block { display: inline-block !important; } - .d-md-inline-flex { display: inline-flex !important; } - .d-md-none { display: none !important; } - .d-md-table { display: table !important; } - .d-md-table-cell { display: table-cell !important; } } -@media (min-width: 1012px) { .d-lg-block { display: block !important; } - .d-lg-flex { display: flex !important; } - .d-lg-inline { display: inline !important; } - .d-lg-inline-block { display: inline-block !important; } - .d-lg-inline-flex { display: inline-flex !important; } - .d-lg-none { display: none !important; } - .d-lg-table { display: table !important; } - .d-lg-table-cell { display: table-cell !important; } } -@media (min-width: 1280px) { .d-xl-block { display: block !important; } - .d-xl-flex { display: flex !important; } - .d-xl-inline { display: inline !important; } - .d-xl-inline-block { display: inline-block !important; } - .d-xl-inline-flex { display: inline-flex !important; } - .d-xl-none { display: none !important; } - .d-xl-table { display: table !important; } - .d-xl-table-cell { display: table-cell !important; } } -.v-hidden { visibility: hidden !important; } - -.v-visible { visibility: visible !important; } - -@media (max-width: 544px) { .hide-sm { display: none !important; } } -@media (min-width: 544px) and (max-width: 768px) { .hide-md { display: none !important; } } -@media (min-width: 768px) and (max-width: 1012px) { .hide-lg { display: none !important; } } -@media (min-width: 1012px) { .hide-xl { display: none !important; } } -/* Set the table-layout to fixed */ -.table-fixed { table-layout: fixed !important; } - -.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); word-wrap: normal; border: 0; } - -.show-on-focus { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } -.show-on-focus:focus { z-index: 20; width: auto; height: auto; clip: auto; } - -.container { width: 980px; margin-right: auto; margin-left: auto; } -.container::before { display: table; content: ""; } -.container::after { display: table; clear: both; content: ""; } - -.container-md { max-width: 768px; margin-right: auto; margin-left: auto; } - -.container-lg { max-width: 1012px; margin-right: auto; margin-left: auto; } - -.container-xl { max-width: 1280px; margin-right: auto; margin-left: auto; } - -.columns { margin-right: -10px; margin-left: -10px; } -.columns::before { display: table; content: ""; } -.columns::after { display: table; clear: both; content: ""; } - -.column { float: left; padding-right: 10px; padding-left: 10px; } - -.one-third { width: 33.333333%; } - -.two-thirds { width: 66.666667%; } - -.one-fourth { width: 25%; } - -.one-half { width: 50%; } - -.three-fourths { width: 75%; } - -.one-fifth { width: 20%; } - -.four-fifths { width: 80%; } - -.centered { display: block; float: none; margin-right: auto; margin-left: auto; } - -.col-1 { width: 8.3333333333%; } - -.col-2 { width: 16.6666666667%; } - -.col-3 { width: 25%; } - -.col-4 { width: 33.3333333333%; } - -.col-5 { width: 41.6666666667%; } - -.col-6 { width: 50%; } - -.col-7 { width: 58.3333333333%; } - -.col-8 { width: 66.6666666667%; } - -.col-9 { width: 75%; } - -.col-10 { width: 83.3333333333%; } - -.col-11 { width: 91.6666666667%; } - -.col-12 { width: 100%; } - -@media (min-width: 544px) { .col-sm-1 { width: 8.3333333333%; } - .col-sm-2 { width: 16.6666666667%; } - .col-sm-3 { width: 25%; } - .col-sm-4 { width: 33.3333333333%; } - .col-sm-5 { width: 41.6666666667%; } - .col-sm-6 { width: 50%; } - .col-sm-7 { width: 58.3333333333%; } - .col-sm-8 { width: 66.6666666667%; } - .col-sm-9 { width: 75%; } - .col-sm-10 { width: 83.3333333333%; } - .col-sm-11 { width: 91.6666666667%; } - .col-sm-12 { width: 100%; } } -@media (min-width: 768px) { .col-md-1 { width: 8.3333333333%; } - .col-md-2 { width: 16.6666666667%; } - .col-md-3 { width: 25%; } - .col-md-4 { width: 33.3333333333%; } - .col-md-5 { width: 41.6666666667%; } - .col-md-6 { width: 50%; } - .col-md-7 { width: 58.3333333333%; } - .col-md-8 { width: 66.6666666667%; } - .col-md-9 { width: 75%; } - .col-md-10 { width: 83.3333333333%; } - .col-md-11 { width: 91.6666666667%; } - .col-md-12 { width: 100%; } } -@media (min-width: 1012px) { .col-lg-1 { width: 8.3333333333%; } - .col-lg-2 { width: 16.6666666667%; } - .col-lg-3 { width: 25%; } - .col-lg-4 { width: 33.3333333333%; } - .col-lg-5 { width: 41.6666666667%; } - .col-lg-6 { width: 50%; } - .col-lg-7 { width: 58.3333333333%; } - .col-lg-8 { width: 66.6666666667%; } - .col-lg-9 { width: 75%; } - .col-lg-10 { width: 83.3333333333%; } - .col-lg-11 { width: 91.6666666667%; } - .col-lg-12 { width: 100%; } } -@media (min-width: 1280px) { .col-xl-1 { width: 8.3333333333%; } - .col-xl-2 { width: 16.6666666667%; } - .col-xl-3 { width: 25%; } - .col-xl-4 { width: 33.3333333333%; } - .col-xl-5 { width: 41.6666666667%; } - .col-xl-6 { width: 50%; } - .col-xl-7 { width: 58.3333333333%; } - .col-xl-8 { width: 66.6666666667%; } - .col-xl-9 { width: 75%; } - .col-xl-10 { width: 83.3333333333%; } - .col-xl-11 { width: 91.6666666667%; } - .col-xl-12 { width: 100%; } } -.gutter { margin-right: -16px; margin-left: -16px; } -.gutter > [class*="col-"] { padding-right: 16px !important; padding-left: 16px !important; } - -.gutter-condensed { margin-right: -8px; margin-left: -8px; } -.gutter-condensed > [class*="col-"] { padding-right: 8px !important; padding-left: 8px !important; } - -.gutter-spacious { margin-right: -24px; margin-left: -24px; } -.gutter-spacious > [class*="col-"] { padding-right: 24px !important; padding-left: 24px !important; } - -@media (min-width: 544px) { .gutter-sm { margin-right: -16px; margin-left: -16px; } - .gutter-sm > [class*="col-"] { padding-right: 16px !important; padding-left: 16px !important; } - .gutter-sm-condensed { margin-right: -8px; margin-left: -8px; } - .gutter-sm-condensed > [class*="col-"] { padding-right: 8px !important; padding-left: 8px !important; } - .gutter-sm-spacious { margin-right: -24px; margin-left: -24px; } - .gutter-sm-spacious > [class*="col-"] { padding-right: 24px !important; padding-left: 24px !important; } } -@media (min-width: 768px) { .gutter-md { margin-right: -16px; margin-left: -16px; } - .gutter-md > [class*="col-"] { padding-right: 16px !important; padding-left: 16px !important; } - .gutter-md-condensed { margin-right: -8px; margin-left: -8px; } - .gutter-md-condensed > [class*="col-"] { padding-right: 8px !important; padding-left: 8px !important; } - .gutter-md-spacious { margin-right: -24px; margin-left: -24px; } - .gutter-md-spacious > [class*="col-"] { padding-right: 24px !important; padding-left: 24px !important; } } -@media (min-width: 1012px) { .gutter-lg { margin-right: -16px; margin-left: -16px; } - .gutter-lg > [class*="col-"] { padding-right: 16px !important; padding-left: 16px !important; } - .gutter-lg-condensed { margin-right: -8px; margin-left: -8px; } - .gutter-lg-condensed > [class*="col-"] { padding-right: 8px !important; padding-left: 8px !important; } - .gutter-lg-spacious { margin-right: -24px; margin-left: -24px; } - .gutter-lg-spacious > [class*="col-"] { padding-right: 24px !important; padding-left: 24px !important; } } -@media (min-width: 1280px) { .gutter-xl { margin-right: -16px; margin-left: -16px; } - .gutter-xl > [class*="col-"] { padding-right: 16px !important; padding-left: 16px !important; } - .gutter-xl-condensed { margin-right: -8px; margin-left: -8px; } - .gutter-xl-condensed > [class*="col-"] { padding-right: 8px !important; padding-left: 8px !important; } - .gutter-xl-spacious { margin-right: -24px; margin-left: -24px; } - .gutter-xl-spacious > [class*="col-"] { padding-right: 24px !important; padding-left: 24px !important; } } -.offset-1 { margin-left: 8.3333333333% !important; } - -.offset-2 { margin-left: 16.6666666667% !important; } - -.offset-3 { margin-left: 25% !important; } - -.offset-4 { margin-left: 33.3333333333% !important; } - -.offset-5 { margin-left: 41.6666666667% !important; } - -.offset-6 { margin-left: 50% !important; } - -.offset-7 { margin-left: 58.3333333333% !important; } - -.offset-8 { margin-left: 66.6666666667% !important; } - -.offset-9 { margin-left: 75% !important; } - -.offset-10 { margin-left: 83.3333333333% !important; } - -.offset-11 { margin-left: 91.6666666667% !important; } - -@media (min-width: 544px) { .offset-sm-1 { margin-left: 8.3333333333% !important; } - .offset-sm-2 { margin-left: 16.6666666667% !important; } - .offset-sm-3 { margin-left: 25% !important; } - .offset-sm-4 { margin-left: 33.3333333333% !important; } - .offset-sm-5 { margin-left: 41.6666666667% !important; } - .offset-sm-6 { margin-left: 50% !important; } - .offset-sm-7 { margin-left: 58.3333333333% !important; } - .offset-sm-8 { margin-left: 66.6666666667% !important; } - .offset-sm-9 { margin-left: 75% !important; } - .offset-sm-10 { margin-left: 83.3333333333% !important; } - .offset-sm-11 { margin-left: 91.6666666667% !important; } } -@media (min-width: 768px) { .offset-md-1 { margin-left: 8.3333333333% !important; } - .offset-md-2 { margin-left: 16.6666666667% !important; } - .offset-md-3 { margin-left: 25% !important; } - .offset-md-4 { margin-left: 33.3333333333% !important; } - .offset-md-5 { margin-left: 41.6666666667% !important; } - .offset-md-6 { margin-left: 50% !important; } - .offset-md-7 { margin-left: 58.3333333333% !important; } - .offset-md-8 { margin-left: 66.6666666667% !important; } - .offset-md-9 { margin-left: 75% !important; } - .offset-md-10 { margin-left: 83.3333333333% !important; } - .offset-md-11 { margin-left: 91.6666666667% !important; } } -@media (min-width: 1012px) { .offset-lg-1 { margin-left: 8.3333333333% !important; } - .offset-lg-2 { margin-left: 16.6666666667% !important; } - .offset-lg-3 { margin-left: 25% !important; } - .offset-lg-4 { margin-left: 33.3333333333% !important; } - .offset-lg-5 { margin-left: 41.6666666667% !important; } - .offset-lg-6 { margin-left: 50% !important; } - .offset-lg-7 { margin-left: 58.3333333333% !important; } - .offset-lg-8 { margin-left: 66.6666666667% !important; } - .offset-lg-9 { margin-left: 75% !important; } - .offset-lg-10 { margin-left: 83.3333333333% !important; } - .offset-lg-11 { margin-left: 91.6666666667% !important; } } -@media (min-width: 1280px) { .offset-xl-1 { margin-left: 8.3333333333% !important; } - .offset-xl-2 { margin-left: 16.6666666667% !important; } - .offset-xl-3 { margin-left: 25% !important; } - .offset-xl-4 { margin-left: 33.3333333333% !important; } - .offset-xl-5 { margin-left: 41.6666666667% !important; } - .offset-xl-6 { margin-left: 50% !important; } - .offset-xl-7 { margin-left: 58.3333333333% !important; } - .offset-xl-8 { margin-left: 66.6666666667% !important; } - .offset-xl-9 { margin-left: 75% !important; } - .offset-xl-10 { margin-left: 83.3333333333% !important; } - .offset-xl-11 { margin-left: 91.6666666667% !important; } } -.markdown-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 1.5; word-wrap: break-word; } -.markdown-body::before { display: table; content: ""; } -.markdown-body::after { display: table; clear: both; content: ""; } -.markdown-body > *:first-child { margin-top: 0 !important; } -.markdown-body > *:last-child { margin-bottom: 0 !important; } -.markdown-body a:not([href]) { color: inherit; text-decoration: none; } -.markdown-body .absent { color: #cb2431; } -.markdown-body .anchor { float: left; padding-right: 4px; margin-left: -20px; line-height: 1; } -.markdown-body .anchor:focus { outline: none; } -.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre { margin-top: 0; margin-bottom: 16px; } -.markdown-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: #e1e4e8; border: 0; } -.markdown-body blockquote { padding: 0 1em; color: #6a737d; border-left: 0.25em solid #dfe2e5; } -.markdown-body blockquote > :first-child { margin-top: 0; } -.markdown-body blockquote > :last-child { margin-bottom: 0; } -.markdown-body kbd { display: inline-block; padding: 3px 5px; font-size: 11px; line-height: 10px; color: #444d56; vertical-align: middle; background-color: #fafbfc; border: solid 1px #c6cbd1; border-bottom-color: #959da5; border-radius: 3px; box-shadow: inset 0 -1px 0 #959da5; } - -.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; } -.markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link { color: #1b1f23; vertical-align: middle; visibility: hidden; } -.markdown-body h1:hover .anchor, .markdown-body h2:hover .anchor, .markdown-body h3:hover .anchor, .markdown-body h4:hover .anchor, .markdown-body h5:hover .anchor, .markdown-body h6:hover .anchor { text-decoration: none; } -.markdown-body h1:hover .anchor .octicon-link, .markdown-body h2:hover .anchor .octicon-link, .markdown-body h3:hover .anchor .octicon-link, .markdown-body h4:hover .anchor .octicon-link, .markdown-body h5:hover .anchor .octicon-link, .markdown-body h6:hover .anchor .octicon-link { visibility: visible; } -.markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code { font-size: inherit; } -.markdown-body h1 { padding-bottom: 0.3em; font-size: 2em; border-bottom: 1px solid #eaecef; } -.markdown-body h2 { padding-bottom: 0.3em; font-size: 1.5em; border-bottom: 1px solid #eaecef; } -.markdown-body h3 { font-size: 1.25em; } -.markdown-body h4 { font-size: 1em; } -.markdown-body h5 { font-size: 0.875em; } -.markdown-body h6 { font-size: 0.85em; color: #6a737d; } - -.markdown-body ul, .markdown-body ol { padding-left: 2em; } -.markdown-body ul.no-list, .markdown-body ol.no-list { padding: 0; list-style-type: none; } -.markdown-body ul ul, .markdown-body ul ol, .markdown-body ol ol, .markdown-body ol ul { margin-top: 0; margin-bottom: 0; } -.markdown-body li { word-wrap: break-all; } -.markdown-body li > p { margin-top: 16px; } -.markdown-body li + li { margin-top: 0.25em; } -.markdown-body dl { padding: 0; } -.markdown-body dl dt { padding: 0; margin-top: 16px; font-size: 1em; font-style: italic; font-weight: 600; } -.markdown-body dl dd { padding: 0 16px; margin-bottom: 16px; } - -.markdown-body table { display: block; width: 100%; overflow: auto; } -.markdown-body table th { font-weight: 600; } -.markdown-body table th, .markdown-body table td { padding: 6px 13px; border: 1px solid #dfe2e5; } -.markdown-body table tr { background-color: #fff; border-top: 1px solid #c6cbd1; } -.markdown-body table tr:nth-child(2n) { background-color: #f6f8fa; } -.markdown-body table img { background-color: transparent; } - -.markdown-body img { max-width: 100%; box-sizing: content-box; background-color: #fff; } -.markdown-body img[align=right] { padding-left: 20px; } -.markdown-body img[align=left] { padding-right: 20px; } -.markdown-body .emoji { max-width: none; vertical-align: text-top; background-color: transparent; } -.markdown-body span.frame { display: block; overflow: hidden; } -.markdown-body span.frame > span { display: block; float: left; width: auto; padding: 7px; margin: 13px 0 0; overflow: hidden; border: 1px solid #dfe2e5; } -.markdown-body span.frame span img { display: block; float: left; } -.markdown-body span.frame span span { display: block; padding: 5px 0 0; clear: both; color: #24292e; } -.markdown-body span.align-center { display: block; overflow: hidden; clear: both; } -.markdown-body span.align-center > span { display: block; margin: 13px auto 0; overflow: hidden; text-align: center; } -.markdown-body span.align-center span img { margin: 0 auto; text-align: center; } -.markdown-body span.align-right { display: block; overflow: hidden; clear: both; } -.markdown-body span.align-right > span { display: block; margin: 13px 0 0; overflow: hidden; text-align: right; } -.markdown-body span.align-right span img { margin: 0; text-align: right; } -.markdown-body span.float-left { display: block; float: left; margin-right: 13px; overflow: hidden; } -.markdown-body span.float-left span { margin: 13px 0 0; } -.markdown-body span.float-right { display: block; float: right; margin-left: 13px; overflow: hidden; } -.markdown-body span.float-right > span { display: block; margin: 13px auto 0; overflow: hidden; text-align: right; } - -.markdown-body code, .markdown-body tt { padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; } -.markdown-body code br, .markdown-body tt br { display: none; } -.markdown-body del code { text-decoration: inherit; } -.markdown-body pre { word-wrap: normal; } -.markdown-body pre > code { padding: 0; margin: 0; font-size: 100%; word-break: normal; white-space: pre; background: transparent; border: 0; } -.markdown-body .highlight { margin-bottom: 16px; } -.markdown-body .highlight pre { margin-bottom: 0; word-break: normal; } -.markdown-body .highlight pre, .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; } -.markdown-body pre code, .markdown-body pre tt { display: inline; max-width: auto; padding: 0; margin: 0; overflow: visible; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; } - -.markdown-body .csv-data td, .markdown-body .csv-data th { padding: 5px; overflow: hidden; font-size: 12px; line-height: 1; text-align: left; white-space: nowrap; } -.markdown-body .csv-data .blob-num { padding: 10px 8px 9px; text-align: right; background: #fff; border: 0; } -.markdown-body .csv-data tr { border-top: 0; } -.markdown-body .csv-data th { font-weight: 600; background: #f6f8fa; border-top: 0; } - -.highlight table td { padding: 5px; } - -.highlight table pre { margin: 0; } - -.highlight .cm { color: #999988; font-style: italic; } - -.highlight .cp { color: #999999; font-weight: bold; } - -.highlight .c1 { color: #999988; font-style: italic; } - -.highlight .cs { color: #999999; font-weight: bold; font-style: italic; } - -.highlight .c, .highlight .cd { color: #999988; font-style: italic; } - -.highlight .err { color: #a61717; background-color: #e3d2d2; } - -.highlight .gd { color: #000000; background-color: #ffdddd; } - -.highlight .ge { color: #000000; font-style: italic; } - -.highlight .gr { color: #aa0000; } - -.highlight .gh { color: #999999; } - -.highlight .gi { color: #000000; background-color: #ddffdd; } - -.highlight .go { color: #888888; } - -.highlight .gp { color: #555555; } - -.highlight .gs { font-weight: bold; } - -.highlight .gu { color: #aaaaaa; } - -.highlight .gt { color: #aa0000; } - -.highlight .kc { color: #000000; font-weight: bold; } - -.highlight .kd { color: #000000; font-weight: bold; } - -.highlight .kn { color: #000000; font-weight: bold; } - -.highlight .kp { color: #000000; font-weight: bold; } - -.highlight .kr { color: #000000; font-weight: bold; } - -.highlight .kt { color: #445588; font-weight: bold; } - -.highlight .k, .highlight .kv { color: #000000; font-weight: bold; } - -.highlight .mf { color: #009999; } - -.highlight .mh { color: #009999; } - -.highlight .il { color: #009999; } - -.highlight .mi { color: #009999; } - -.highlight .mo { color: #009999; } - -.highlight .m, .highlight .mb, .highlight .mx { color: #009999; } - -.highlight .sb { color: #d14; } - -.highlight .sc { color: #d14; } - -.highlight .sd { color: #d14; } - -.highlight .s2 { color: #d14; } - -.highlight .se { color: #d14; } - -.highlight .sh { color: #d14; } - -.highlight .si { color: #d14; } - -.highlight .sx { color: #d14; } - -.highlight .sr { color: #009926; } - -.highlight .s1 { color: #d14; } - -.highlight .ss { color: #990073; } - -.highlight .s { color: #d14; } - -.highlight .na { color: #008080; } - -.highlight .bp { color: #999999; } - -.highlight .nb { color: #0086B3; } - -.highlight .nc { color: #445588; font-weight: bold; } - -.highlight .no { color: #008080; } - -.highlight .nd { color: #3c5d5d; font-weight: bold; } - -.highlight .ni { color: #800080; } - -.highlight .ne { color: #990000; font-weight: bold; } - -.highlight .nf { color: #990000; font-weight: bold; } - -.highlight .nl { color: #990000; font-weight: bold; } - -.highlight .nn { color: #555555; } - -.highlight .nt { color: #000080; } - -.highlight .vc { color: #008080; } - -.highlight .vg { color: #008080; } - -.highlight .vi { color: #008080; } - -.highlight .nv { color: #008080; } - -.highlight .ow { color: #000000; font-weight: bold; } - -.highlight .o { color: #000000; font-weight: bold; } - -.highlight .w { color: #bbbbbb; } - -.highlight { background-color: #f8f8f8; } diff --git a/_site_test/assets/img/logo.svg b/_site_test/assets/img/logo.svg deleted file mode 100644 index 26e3707..0000000 --- a/_site_test/assets/img/logo.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - U - diff --git a/_site_test/assets/js/site.js b/_site_test/assets/js/site.js deleted file mode 100644 index 68e4a10..0000000 --- a/_site_test/assets/js/site.js +++ /dev/null @@ -1,230 +0,0 @@ -/* ============================================================ - Unity UI Extensions — Site JavaScript - Handles: tabs, copy buttons, search/filter, scroll-spy, - animated counters, mobile nav - ============================================================ */ - -(function () { - 'use strict'; - - /* ---------------------------------------------------------- - Tabs - ---------------------------------------------------------- */ - function initTabs() { - document.querySelectorAll('[data-tabs]').forEach(function (tabGroup) { - var btns = tabGroup.querySelectorAll('.tab-btn'); - var panels = tabGroup.querySelectorAll('.tab-panel'); - - btns.forEach(function (btn) { - btn.addEventListener('click', function () { - var target = btn.dataset.tab; - btns.forEach(function (b) { b.classList.remove('active'); }); - panels.forEach(function (p) { p.classList.remove('active'); }); - btn.classList.add('active'); - var panel = tabGroup.querySelector('.tab-panel[data-panel="' + target + '"]'); - if (panel) panel.classList.add('active'); - }); - }); - }); - } - - /* ---------------------------------------------------------- - Copy Buttons - ---------------------------------------------------------- */ - function initCopyButtons() { - document.querySelectorAll('.copy-btn').forEach(function (btn) { - btn.addEventListener('click', function () { - var target = btn.dataset.copy; - var text = target - ? (document.querySelector(target) || { textContent: '' }).textContent - : btn.closest('.install-panel') - ? btn.closest('.install-panel').querySelector('pre, code').textContent - : ''; - - if (!text) return; - - navigator.clipboard.writeText(text.trim()).then(function () { - var orig = btn.textContent; - btn.textContent = 'Copied!'; - btn.classList.add('copied'); - setTimeout(function () { - btn.textContent = orig; - btn.classList.remove('copied'); - }, 1800); - }); - }); - }); - } - - /* ---------------------------------------------------------- - Control Search + Category Filter - ---------------------------------------------------------- */ - function initControlFilter() { - var searchInput = document.getElementById('control-search'); - var filterBtns = document.querySelectorAll('.filter-btn[data-filter]'); - var cards = document.querySelectorAll('.control-card[data-category]'); - var noResults = document.getElementById('no-results'); - - if (!searchInput && filterBtns.length === 0) return; - - var activeCategory = 'all'; - var searchQuery = ''; - - function updateCards() { - var visible = 0; - cards.forEach(function (card) { - var name = (card.dataset.name || card.querySelector('.control-card-name') && card.querySelector('.control-card-name').textContent || '').toLowerCase(); - var desc = (card.dataset.desc || card.querySelector('.control-card-desc') && card.querySelector('.control-card-desc').textContent || '').toLowerCase(); - var tags = (card.dataset.tags || '').toLowerCase(); - var cat = (card.dataset.category || '').toLowerCase(); - - var matchesSearch = !searchQuery - || name.includes(searchQuery) - || desc.includes(searchQuery) - || tags.includes(searchQuery); - - var matchesCat = activeCategory === 'all' - || cat === activeCategory; - - var show = matchesSearch && matchesCat; - card.style.display = show ? '' : 'none'; - if (show) visible++; - }); - - if (noResults) { - noResults.style.display = visible === 0 ? '' : 'none'; - } - } - - if (searchInput) { - searchInput.addEventListener('input', function () { - searchQuery = searchInput.value.trim().toLowerCase(); - updateCards(); - }); - } - - filterBtns.forEach(function (btn) { - btn.addEventListener('click', function () { - filterBtns.forEach(function (b) { b.classList.remove('active'); }); - btn.classList.add('active'); - activeCategory = (btn.dataset.filter || 'all').toLowerCase(); - updateCards(); - }); - }); - } - - /* ---------------------------------------------------------- - Animated Counters - ---------------------------------------------------------- */ - function initCounters() { - var counters = document.querySelectorAll('[data-count]'); - if (!counters.length) return; - - var observer = new IntersectionObserver(function (entries) { - entries.forEach(function (entry) { - if (!entry.isIntersecting) return; - var el = entry.target; - var target = parseInt(el.dataset.count, 10); - var suffix = el.dataset.suffix || ''; - var duration = 1400; - var start = performance.now(); - - function step(now) { - var elapsed = now - start; - var progress = Math.min(elapsed / duration, 1); - // Ease out cubic - var ease = 1 - Math.pow(1 - progress, 3); - el.textContent = Math.round(ease * target) + suffix; - if (progress < 1) requestAnimationFrame(step); - } - - requestAnimationFrame(step); - observer.unobserve(el); - }); - }, { threshold: 0.3 }); - - counters.forEach(function (el) { observer.observe(el); }); - } - - /* ---------------------------------------------------------- - Scroll-spy sidebar - ---------------------------------------------------------- */ - function initScrollSpy() { - var sidebarLinks = document.querySelectorAll('.sidebar-link[href^="#"]'); - if (!sidebarLinks.length) return; - - var sections = Array.from(sidebarLinks).map(function (link) { - var id = link.getAttribute('href').slice(1); - return { link: link, el: document.getElementById(id) }; - }).filter(function (s) { return s.el; }); - - var observer = new IntersectionObserver(function (entries) { - entries.forEach(function (entry) { - if (!entry.isIntersecting) return; - sections.forEach(function (s) { s.link.classList.remove('active'); }); - var found = sections.find(function (s) { return s.el === entry.target; }); - if (found) found.link.classList.add('active'); - }); - }, { rootMargin: '-20% 0px -70% 0px' }); - - sections.forEach(function (s) { observer.observe(s.el); }); - } - - /* ---------------------------------------------------------- - Mobile nav toggle - ---------------------------------------------------------- */ - function initMobileNav() { - var toggle = document.querySelector('.nav-mobile-toggle'); - var navLinks = document.querySelector('.nav-links'); - if (!toggle || !navLinks) return; - - toggle.addEventListener('click', function () { - var open = navLinks.style.display === 'flex'; - navLinks.style.display = open ? '' : 'flex'; - navLinks.style.flexDirection = open ? '' : 'column'; - navLinks.style.position = open ? '' : 'absolute'; - navLinks.style.top = open ? '' : 'var(--nav-h)'; - navLinks.style.left = open ? '' : '0'; - navLinks.style.right = open ? '' : '0'; - navLinks.style.background = open ? '' : 'var(--bg-2)'; - navLinks.style.padding = open ? '' : '1rem 1.5rem'; - navLinks.style.borderBottom = open ? '' : '1px solid var(--border)'; - navLinks.style.zIndex = open ? '' : '899'; - }); - } - - /* ---------------------------------------------------------- - Sidebar toggle (mobile) - ---------------------------------------------------------- */ - function initSidebarToggle() { - var toggle = document.querySelector('.sidebar-toggle'); - var sidebar = document.querySelector('.sidebar'); - if (!toggle || !sidebar) return; - - toggle.addEventListener('click', function () { - sidebar.classList.toggle('open'); - }); - - document.addEventListener('click', function (e) { - if (sidebar.classList.contains('open') - && !sidebar.contains(e.target) - && !toggle.contains(e.target)) { - sidebar.classList.remove('open'); - } - }); - } - - /* ---------------------------------------------------------- - Initialise all - ---------------------------------------------------------- */ - document.addEventListener('DOMContentLoaded', function () { - initTabs(); - initCopyButtons(); - initControlFilter(); - initCounters(); - initScrollSpy(); - initMobileNav(); - initSidebarToggle(); - }); - -}()); diff --git a/_site_test/changelog/index.html b/_site_test/changelog/index.html deleted file mode 100644 index 0d24734..0000000 --- a/_site_test/changelog/index.html +++ /dev/null @@ -1,228 +0,0 @@ - - - - - -Changelog — Unity UI Extensions — Unity UI Extensions - - - -Changelog — Unity UI Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -

Changelog

-

Release history for both Unity UI Extensions packages.

-
-
- -
-
-

- Unity UI Extensions (uGUI) - com.unity.uiextensions -

- -
-
-

v2.3.2 — Rejuvenation

- -
-

End-of-year maintenance release focusing on bug fixes and 2023 LTS compatibility. FlowLayoutGroup updated to latest upstream; deprecated Text components tagged with obsolete attributes.

- -

Added

-
    -
  • Added CalculatePointOnCurve for UILineRenderer (@victornor)
    • -
  • Added argument to UpdateLayout on HSS/VSS to move to a new starting page
    • -
  • Added extra event on AutoCompleteComboBox to fire when an item is selected with its display name
    • -
- -

Fixed

-
    -
  • Fixed null reference exception with ResetSelectableHighlight (@FejZa)
    • -
  • Resolved issue where the last line in a FlowLayoutGroup would overflow the rect bounds
    • -
  • Fixed GetPosition when Segments is null (@victornor)
    • -
  • Fixed NicerOutline color alpha loss when m_UseGraphicAlpha is true (@wanliyun)
    • -
  • Updated Accordion to force enumerated start, resolving issue #455
    • -
- -

Changed

-
    -
  • Updated implementations for Unity 2023 LTS support
    • -
  • FlowLayoutGroup updated to latest upstream (likely final update as author has stopped active development)
    • -
- -

Deprecated

-
    -
  • All deprecated Text-based components now carry [Obsolete] attributes. These components do not function in Unity 2022+. Migrate to TextMeshPro equivalents.
    • -
- -

Breaking Changes

-

Customers upgrading from Unity 2018/2019 to Unity 2020+ must manually replace Text-based UI components with TextMeshPro equivalents. See the deprecation discussion on GitHub for details.

- -
- View Release on GitHub - Full Diff -
-
- -
-

For earlier release history, see the full CHANGELOG on GitHub.

-
- -
-
- -
-
-

- UIToolkit Extensions - com.unity.uitoolkitextensions -

- -
-
-

v1.0.0 — Launch

- -
-

Initial public release of the UIToolkit Extensions package. Full details will be published on launch.

-

18 controls across Navigation, Forms, Feedback, Primitives, and Utilities categories — built for Unity 2022.3+ runtime UI.

- -
- Releases on GitHub -
-
- -
-
- -
-
-

Found a bug or have a suggestion?

-

Both packages are community maintained — contributions and issue reports are always welcome.

-
- uGUI Issues - UIToolkit Issues - GitHub Organisation -
-
-
- -
- - - - - diff --git a/_site_test/index.html b/_site_test/index.html deleted file mode 100644 index a0dc8dd..0000000 --- a/_site_test/index.html +++ /dev/null @@ -1,315 +0,0 @@ - - - - - -Unity UI Extensions — Community UI Controls for Unity — Unity UI Extensions - - - -Unity UI Extensions — Community UI Controls for Unity | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
Community Open Source — Free Forever
-

- Unity UI - Extensions -

-

- 80+ battle-tested UI controls for Unity's uGUI and UI Toolkit frameworks. - Drop in. Build faster. Ship sooner. -

-
- Explore uGUI Controls - Explore UI Toolkit Controls -
-
-
- -
-
-
- 0+ - uGUI Controls -
-
- 0 - UIToolkit Controls -
-
- 0 - Packages -
-
- 0% - Free & Open Source -
-
-
- -
-
-

Two Packages, One Community

-

Choose the package that matches your Unity UI framework — or use both.

- -
-
-
uGUI
-

Unity UI Extensions

-

com.unity.uiextensions

-

The original and largest collection. 70+ production-ready controls built on Unity's legacy uGUI system — sliders, graphs, scrollers, effects, and more.

-
    -
  • 70+ controls across 6 categories
    • -
  • BSD 3-Clause licence — use in commercial projects
    • -
  • OpenUPM, Git URL, and Unity Package Manager
    • -
  • Works in Unity 2019.4+
    • -
-
- Browse Controls - Install Guide -
-
- -
-
UI Toolkit
-

UIToolkit Extensions

-

com.unity.uitoolkitextensions

-

A modern, growing library of custom controls and manipulators for Unity's UI Toolkit — built for runtime UI, designed for productivity.

-
    -
  • 18 controls for navigation, forms, and feedback
    • -
  • MIT licence — maximum flexibility
    • -
  • OpenUPM and Git URL installation
    • -
  • Requires Unity 2022.3+
    • -
-
- Browse Controls - Install Guide -
-
-
-
-
- -
-
-

Get Started in Seconds

- -
-
- - - -
- -
-

Install via OpenUPM (Recommended)

-

The fastest way — use the OpenUPM CLI or add the scoped registry manually.

- -

uGUI Package

-
- 
openupm add com.unity.uiextensions
- -
- -

UIToolkit Package

-
- 
openupm add com.unity.uitoolkitextensions
- -
-
- -
-

Install via Git URL

-

In Unity: Window → Package Manager → + → Add package from git URL

- -

uGUI Package

-
- 
https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git
- -
- -

UIToolkit Package

-
- 
https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions.git
- -
-
- -
-

Manual Installation

-

Download the latest release and extract to your project's Packages/ folder.

-
- Download uGUI Release - Download UIToolkit Release -
-
-
-
-
- -
-
-

Why UI Extensions?

-
-
- -

Drop-In Ready

-

Every control is self-contained. Add a component, tweak inspector properties, done. No configuration files, no setup ceremonies.

-
-
- -

Truly Free

-

BSD 3-Clause and MIT licences. Use in commercial games, apps, and tools — forever. No subscriptions, no royalties, no catch.

-
-
- -

Community Driven

-

Built and maintained by Unity developers for Unity developers. Every control has been battle-tested in real projects by the community.

-
-
- -

UPM Native

-

Full Unity Package Manager support. Install in one click via OpenUPM, reference via git URL, or embed locally — your choice.

-
-
- -

Both UI Frameworks

-

Controls for both uGUI (legacy) and UI Toolkit (modern). Whether you're maintaining an existing project or building something new, we've got you covered.

-
-
- -

Well Documented

-

Every control ships with property references, usage examples, and where available — video demos and sample scenes to learn from.

-
-
-
-
- -
-
-

Ready to build something?

-

Join thousands of Unity developers using UI Extensions every day.

-
- Browse All uGUI Controls - Browse UIToolkit Controls - View on GitHub -
-
-
- - -
- - - - - diff --git a/_site_test/robots.txt b/_site_test/robots.txt deleted file mode 100644 index 298dc1f..0000000 --- a/_site_test/robots.txt +++ /dev/null @@ -1 +0,0 @@ -Sitemap: https://unity-ui-extensions.github.io/sitemap.xml diff --git a/_site_test/sitemap.xml b/_site_test/sitemap.xml deleted file mode 100644 index e830fd6..0000000 --- a/_site_test/sitemap.xml +++ /dev/null @@ -1,408 +0,0 @@ - - - -https://unity-ui-extensions.github.io/ugui/controls/accordion/ - - -https://unity-ui-extensions.github.io/ugui/controls/autocomplete-combobox/ - - -https://unity-ui-extensions.github.io/ugui/controls/box-slider/ - - -https://unity-ui-extensions.github.io/ugui/controls/card-ui/ - - -https://unity-ui-extensions.github.io/ugui/controls/color-picker/ - - -https://unity-ui-extensions.github.io/ugui/controls/combobox/ - - -https://unity-ui-extensions.github.io/ugui/controls/content-scroll-snap-horizontal/ - - -https://unity-ui-extensions.github.io/ugui/controls/cooldown-button/ - - -https://unity-ui-extensions.github.io/ugui/controls/curly-ui/ - - -https://unity-ui-extensions.github.io/ugui/controls/diamond-graph/ - - -https://unity-ui-extensions.github.io/ugui/controls/dropdown-list/ - - -https://unity-ui-extensions.github.io/ugui/controls/fancy-scroll-view/ - - -https://unity-ui-extensions.github.io/ugui/controls/flow-layout-group/ - - -https://unity-ui-extensions.github.io/ugui/controls/gradient/ - - -https://unity-ui-extensions.github.io/ugui/controls/gradient2/ - - -https://unity-ui-extensions.github.io/ugui/controls/grid-raw-image/ - - -https://unity-ui-extensions.github.io/ugui/controls/horizontal-scroll-snap/ - - -https://unity-ui-extensions.github.io/ugui/controls/letter-spacing/ - - -https://unity-ui-extensions.github.io/ugui/controls/menu-system/ - - -https://unity-ui-extensions.github.io/ugui/controls/mono-spacing/ - - -https://unity-ui-extensions.github.io/ugui/controls/non-drawing-graphic/ - - -https://unity-ui-extensions.github.io/ugui/controls/pagination-manager/ - - -https://unity-ui-extensions.github.io/ugui/controls/radial-layout/ - - -https://unity-ui-extensions.github.io/ugui/controls/radial-slider/ - - -https://unity-ui-extensions.github.io/ugui/controls/range-slider/ - - -https://unity-ui-extensions.github.io/ugui/controls/rect-transform-editor/ - - -https://unity-ui-extensions.github.io/ugui/controls/reorderable-list/ - - -https://unity-ui-extensions.github.io/ugui/controls/reset-selectable-highlight/ - - -https://unity-ui-extensions.github.io/ugui/controls/scroll-conflict-manager/ - - -https://unity-ui-extensions.github.io/ugui/controls/scroll-rect-ex/ - - -https://unity-ui-extensions.github.io/ugui/controls/scroll-rect-linker/ - - -https://unity-ui-extensions.github.io/ugui/controls/scroll-rect-tweener/ - - -https://unity-ui-extensions.github.io/ugui/controls/scroll-snap/ - - -https://unity-ui-extensions.github.io/ugui/controls/segment/ - - -https://unity-ui-extensions.github.io/ugui/controls/segmented-control/ - - -https://unity-ui-extensions.github.io/ugui/controls/selectable-scaler/ - - -https://unity-ui-extensions.github.io/ugui/controls/selection-box/ - - -https://unity-ui-extensions.github.io/ugui/controls/soft-alpha-mask/ - - -https://unity-ui-extensions.github.io/ugui/controls/stepper/ - - -https://unity-ui-extensions.github.io/ugui/controls/tab-navigation/ - - -https://unity-ui-extensions.github.io/ugui/controls/table-layout-group/ - - -https://unity-ui-extensions.github.io/ugui/controls/textpic/ - - -https://unity-ui-extensions.github.io/ugui/controls/tile-size-fitter/ - - -https://unity-ui-extensions.github.io/ugui/controls/tooltip/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-circle-segmented/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-flippable/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-graphic-sector/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-grid-renderer/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-highlightable/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-line-connector/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-line-renderer/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-particle-system/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-polygon/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-scroll-to-selection/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-scroll-to-selection-xy/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-selectable-extension/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-vertical-scroller/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-infinite-scroll/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-knob/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-magnetic-infinite-scroll/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-scroll-rect-occlusion/ - - -https://unity-ui-extensions.github.io/ugui/controls/ui-tween-scale/ - - -https://unity-ui-extensions.github.io/ugui/controls/vertical-scroll-snap/ - - -https://unity-ui-extensions.github.io/changelog/ - - -https://unity-ui-extensions.github.io/ - - -https://unity-ui-extensions.github.io/ugui/controls/ - - -https://unity-ui-extensions.github.io/ugui/install/ - - -https://unity-ui-extensions.github.io/ugui/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/circular-image-button/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/collapsible-section/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/color-toggle-button/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/color-toggle-group/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/coming-soon-message/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/grayscale-image/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/icon-label-button/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/loading-icon/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/page-dot-indicator/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/pill-button/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/pill-input-field/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/pill-selector/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/quadrant-stepper/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/rounded-input-field/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/scroll-snap/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/step-progress-bar/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/toast-swipe-dismiss/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/toggle-button/ - - -https://unity-ui-extensions.github.io/uitoolkit/controls/ - - -https://unity-ui-extensions.github.io/uitoolkit/install/ - - -https://unity-ui-extensions.github.io/uitoolkit/ - - -https://unity-ui-extensions.github.io/ugui/controls/ugui-tools/ - - -https://unity-ui-extensions.github.io/About.html - - -https://unity-ui-extensions.github.io/ContributionGuidelines.html - - -https://unity-ui-extensions.github.io/Contributors.html - - -https://unity-ui-extensions.github.io/Controls.html - - -https://unity-ui-extensions.github.io/Controls/BestFitOutline.html - - -https://unity-ui-extensions.github.io/Controls/BoundToolTip.html - - -https://unity-ui-extensions.github.io/Controls/CLFZ2.html - - -https://unity-ui-extensions.github.io/Controls/CurvedLayout.html - - -https://unity-ui-extensions.github.io/Controls/CurvedText.html - - -https://unity-ui-extensions.github.io/Controls/CylinderText.html - - -https://unity-ui-extensions.github.io/Controls/DragCorrector.html - - -https://unity-ui-extensions.github.io/Controls/ExtensionsToggle.html - - -https://unity-ui-extensions.github.io/Controls/ExtensionsToggleGroup.html - - -https://unity-ui-extensions.github.io/Controls/GamePadInputModule.html - - -https://unity-ui-extensions.github.io/Controls/HoverToolTip.html - - -https://unity-ui-extensions.github.io/Controls/ImageExtended.html - - -https://unity-ui-extensions.github.io/Controls/Infinite%20Scroll%20Snap.html - - -https://unity-ui-extensions.github.io/Controls/InputFieldEnterSubmit.html - - -https://unity-ui-extensions.github.io/Controls/InputFocus.html - - -https://unity-ui-extensions.github.io/Controls/MinMaxSlider.html - - -https://unity-ui-extensions.github.io/Controls/MultiTouchScrollRect.html - - -https://unity-ui-extensions.github.io/Controls/NicerOutline.html - - -https://unity-ui-extensions.github.io/Controls/PPIViewer.html - - -https://unity-ui-extensions.github.io/Controls/RaycastMask.html - - -https://unity-ui-extensions.github.io/Controls/RescaleDragPanel.html - - -https://unity-ui-extensions.github.io/Controls/RescalePanel.html - - -https://unity-ui-extensions.github.io/Controls/ResizePanel.html - - -https://unity-ui-extensions.github.io/Controls/ReturnKeyTrigger.html - - -https://unity-ui-extensions.github.io/Controls/Scroller.html - - -https://unity-ui-extensions.github.io/Controls/Serialization.html - - -https://unity-ui-extensions.github.io/Controls/ShaderEffects.html - - -https://unity-ui-extensions.github.io/Controls/UICircle.html - - -https://unity-ui-extensions.github.io/Controls/UICornerCut.html - - -https://unity-ui-extensions.github.io/Controls/UIImageCrop.html - - -https://unity-ui-extensions.github.io/Controls/UILineRendererFIFO.html - - -https://unity-ui-extensions.github.io/Controls/UILineRendererList.html - - -https://unity-ui-extensions.github.io/Controls/UILineTextureRenderer.html - - -https://unity-ui-extensions.github.io/Controls/UISquircle.html - - -https://unity-ui-extensions.github.io/Controls/UIWindowBase.html - - -https://unity-ui-extensions.github.io/Controls/switchToRectTransform.html - - -https://unity-ui-extensions.github.io/Downloads.html - - -https://unity-ui-extensions.github.io/FurtherInfo.html - - -https://unity-ui-extensions.github.io/GettingStarted.html - - -https://unity-ui-extensions.github.io/MISSING_CONTENT.html - - -https://unity-ui-extensions.github.io/UPMInstallation.html - - diff --git a/_site_test/ugui/controls/accordion/index.html b/_site_test/ugui/controls/accordion/index.html deleted file mode 100644 index fd16930..0000000 --- a/_site_test/ugui/controls/accordion/index.html +++ /dev/null @@ -1,886 +0,0 @@ - - - - - -Accordion — Unity UI Extensions - - - -Accordion | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Accordion

- - -

An Accordion style control with animated expandable/collapsible sections.

- - -
- - Layout - - - - layout - - accordion - - collapse - - expand - - panel - -
-
-
- -
-

Accordion

- -

An Accordion style control with animated segments.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A menu style control with pop-out sub elements like a hover bar.

- -
- -

Properties

- -

The Accordion setup uses two components:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
TransitionTween type used when expanding/collapsing elements.
Transition DurationTime (seconds) for expand/collapse.
Allow MultipleIf true, multiple accordion elements can stay open simultaneously.
Toggle OnIf true, clicking an open element will close it.
Keep Active On HideLeave element content active when collapsed (keeps layout space).
On Value Changed (event)Event fired when the open element changes.
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -
-

Add the accordion control to your scene using:

- -

GameObject -> UI -> Extensions -> Accordion Group

- -

Additional child elements can be added using:

- -

GameObject -> UI -> Extensions -> Accordion Element

-
- -

To get started with your first accordion, simply follow these steps:

- -
    -
  • -

    Add an Accordion Group to your UI scene using the menu command above.

    -
    • -
  • -

    Select the “Accordion Group” and add a new Accordion Element by Right-clicking and selecting “UI -> Extensions -> Accordion Element”

    -
    • -
  • -

    Add a Vertical Layout Group to your new Accordion Element and enabling Control Child Size width and height to True.
    -Ensure you only set Child Force Expand Width to True (Expand Height should be False):

    -
    • -
- -

Accordion Element setup

- -
    -
  • Design your Accordion element with a Header and Content, for example, two child Text objects as shown below:
    • -
- -

Accordion Element Header

- -
    -
  • Add a Layout Element to your Header and set the Min Height to the same as the size used in the Accordion Element:
    • -
- -

Accordion Header Content

- -

Feel free to duplicate and update your Accordion Elements to fill up your group.

- -

The Group can be set to Expand Instantly or use a Tween function to animate the entrance of each Accordion Element child text by setting the Transition on the group as shown below.

- -

Accordion Group Transition

- -
-

Currently the control is only designed for Vertical Transition of vertically stacked items. For additional layouts, please log an issue on the site with your requirements.

-
- -
- -

Video Demo

- -

demo video

- -
- -

See also

- -

Some tips are here: Accordion Type Layout including how to collapse nested child elements so they no longer appear.

- -
- -

Credits and Donation

- -

ChoMPHi

- -
- - - -

Sourced from

- -
- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/autocomplete-combobox/index.html b/_site_test/ugui/controls/autocomplete-combobox/index.html deleted file mode 100644 index 67f2016..0000000 --- a/_site_test/ugui/controls/autocomplete-combobox/index.html +++ /dev/null @@ -1,939 +0,0 @@ - - - - - -AutoComplete ComboBox — Unity UI Extensions - - - -AutoComplete ComboBox | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

AutoComplete ComboBox

- - -

Combobox with live-filter autocomplete suggestions as the user types.

- - -
- - Input - - - - input - - combobox - - autocomplete - - dropdown - - search - -
-
-
- -
-

AutoComplete ComboBox

- -

A text combobox with autocomplete selection

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A specialised text field that allows a vocabulary to be added to guide or restrict entry.

- -

AutocompleteComboBox inspector

- -
- -

Properties

- -

The properties of the AutoComplete Combobox control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Available OptionsArray of text based options for the dropdown/selection.
Is ActiveCan the autocomplete combo box be activated by the user (dropped down) or is it disabled?
Scroll Bar WidthThe width of the scrollbar when displayed.
Items To DisplayNumber of child items to display when opened. *Note default 0 shows NO items.
Change Input Text based on Matching itemsApply the below colors to the AutoComplete field based on user typing.
Valid Selection Text ColorColor of the AutoComplete text if the full text appears in the list of options.
Matching Items Remaining Text ColorIntermediate color of text when options contain the text entered.
No Items Remaining Text ColorText Color when the text entered does not match anything in the list.
Autocomplete Search TypeSelects the search method for which to validate the panel items. Values Linq, Array Sort. Choose whichever performs best for your project.
Dropdown OffsetOffset height for the drop down window, to give enough space for items.
Display Panel AboveShould the dropdown panel appear above the control instead of below?
Select First Item On StartShould the first item be auto selected on start?
Select Index Item on StartWhich item should be selected on start. (Select First Item on Start will override this option)
On Selection Text Changed (event)The Event fired when the user is typing.
On Selection Validity Changed (event)The Event fired when the text the user enters matches a selection.
On Selection Changed (event)The Event fired when the user selects an option or loses focus.
On Item Selected (event)The Event fires when an item is selected from the drop down, or the box closes (with a valid item).
On Control Disabled (event)The Event fired when the control is disabled through code.
- -
-

When managing the control programmatically, make sure you use the following functions to manage the ComboBox contents. Do NOT update the ‘AvailableOptions’ list directly

-
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
AddItemStringAdds a single item to the list
RemoveItemStringRemoves a single item from the list
SelectItemIndexintSets the currently selected item in the list
SetAvailableOptionsList of StringClears the current options and replaces with new list (array or List)
SetAvailableOptionsArray of StringClears the current options and replaces with new list (array or List)
ResetItemsN/AClears all current options
- -
- -

Usage

- -

Add the AutoComplete ComboBox control to your scene using:

- -

“GameObject -> UI -> Extensions -> ComboBox -> AutoComplete ComboBox”

- -
- -

Video Demo

- -

Tutorial Video

- -
- -

See also

- -

ComboBox -DropDownList

- -
- -

Credits and Donation

- -

Perchik

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/box-slider/index.html b/_site_test/ugui/controls/box-slider/index.html deleted file mode 100644 index 4993023..0000000 --- a/_site_test/ugui/controls/box-slider/index.html +++ /dev/null @@ -1,925 +0,0 @@ - - - - - -Box Slider — Unity UI Extensions - - - -Box Slider | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Box Slider

- - -

2D drag-handle slider that outputs both X and Y values simultaneously.

- - -
- - Input - - - - input - - slider - - 2d - - xy - - drag - -
-
-
- -
-

Box Slider

- -

A slider which supports both X and Y values within a box

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Box Slider (like the Unity Slider controls), allows you to set a value using a handle within the RectTransform of the control. -However, it supports both the X and Y axis within the area.

- -

Box Slider Inspector

- -

It allows you to set a minimum and maximum value for the axis as well as separate X and Y value selectors.

- -

Like the Slider, it also includes an OnValueChanged event which updates as the handle is moved by the user.

- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Handle RectThe Rect Transform of the child handle, position used to derive values for control
Min ValueThe minimum value for the sliders
Max ValueThe maximum value for the sliders
Whole NumbersOnly use whole numbers instead of floats
Value XThe X value of the slider
Value YThe Y value of the slider
On Value Changed (event)The Event fired when the handle within the box slider is changed
- -

Inherited from Slider

- -
    -
  • Interactable
    • -
  • Transition
    • -
  • Navigation
    • -
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
RebuildCanvasUpdate executingInvokes value-changed during editor layout updates
LayoutComplete—ICanvasElement lifecycle hook (no-op)
GraphicUpdateComplete—ICanvasElement lifecycle hook (no-op)
OnPointerDownPointerEventData eventDataStarts dragging and optionally jumps to click position
OnDragPointerEventData eventDataUpdates the X/Y values based on drag position
OnInitializePotentialDragPointerEventData eventDataDisables drag threshold for immediate response
SetXWithoutNotifyfloat xSets X value without firing OnValueChanged
SetYWithoutNotifyfloat ySets Y value without firing OnValueChanged
- -
- -

Usage

- -

Simply add the default BoxSlider to the scene using:

- -

“GameObject -> UI -> Extensions -> Sliders -> Box Slider”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> Sliders -> BoxSlider”

- -

Note: When adding via the Add Component menu, you will need to manually set the Handle reference.

- -
- -

Video Demo

- -

Click to play

- -

Box Slider Demo

- -
- -

See also

- -
    -
  • Unity (built-in) Slider
    • -
- -

Also, check out the ColorSlider which implements this control

- -
- -

Credits and Donation

- -

Credit judah4

- -
- - - -

Sourced from - http://forum.unity3d.com/threads/color-picker.267043/

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/card-ui/index.html b/_site_test/ugui/controls/card-ui/index.html deleted file mode 100644 index 1205e40..0000000 --- a/_site_test/ugui/controls/card-ui/index.html +++ /dev/null @@ -1,892 +0,0 @@ - - - - - -Card UI — Unity UI Extensions - - - -Card UI | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Card UI

- - -

2D and 3D card flip/stack animations for content presentation.

- - -
- - Layout - - - - layout - - card - - flip - - 3d - - animation - -
-
-
- -
-

Card UI

- -

A range of controls to provide a Card based interface, this includes several capabilities and features to manipulate the cards based on requirements, including:

- -
    -
  • 2D Expanding cards
    • -
  • 2D Popup, including falling cards
    • -
  • 2D card stacks
    • -
  • 3D Expanding cards and Superelipses
    • -
- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The range of Card UI controls give you several options for creating card like UI elements for your project.

- -
    -
  • 2D Expanding Card - A clickable/expandable card layout.
    • -
  • 2D Popup - Physics enabled falling cards.
    • -
  • 2D Stacked cards - A depth orientated controller for displaying cards stacked on top of each other.
    • -
  • 3D Cards - Custom panel meshes with rounded corners for advanced effect.
    • -
- - - - - - - - - - - - - - -
2D Card Expanding2D Popup Cards
2D Card Expanding Inspector2D Popup Cards Inspector
- - - - - - - - - - - - - - -
2D Stacked Cards3D Expanding Cards
2D Stacked Cards Inspector3D Expanding Cards Inspector
- -
- -

Properties

- -

The Card UI suite includes several prefabs and behaviours. Key shared inspector settings include:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Card Prefab(s)Prefabs for the chosen card style (2D popup, 2D stacked, 3D superellipse, etc.).
Animation DurationTime (seconds) for expand/collapse or popup animations.
Spacing / Stack OffsetGap or depth offset between cards in a stack.
Max Visible / Pool SizeHow many cards are kept active/pooled for performance.
Use PhysicsToggles physics-based motion for popup/falling cards.
Corner / RoundnessRounding amount for 3D/superellipse card corners.
On Card Selected (event)Invoked when a card is selected/expanded (per prefab where exposed).
On Card Closed (event)Invoked when a card collapses or returns to stack (per prefab where exposed).
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

For fuller demonstration of the setup of the Card UI controls, checkout the CardUI scenes in the Unity UI Extensions Examples,

- -
- -

Video Demo

- -

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Credit ryanslikesocool

- -
- - - -

Sourced from - https://github.com/ryanslikesocool/Unity-Card-UI

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/color-picker/index.html b/_site_test/ugui/controls/color-picker/index.html deleted file mode 100644 index 9de9ebb..0000000 --- a/_site_test/ugui/controls/color-picker/index.html +++ /dev/null @@ -1,976 +0,0 @@ - - - - - -Color Picker — Unity UI Extensions - - - -Color Picker | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Color Picker

- - -

Full HSV colour picker with hex input, alpha slider, and preset swatches.

- - -
- - Input - - - - input - - color - - colour - - picker - - hsv - - hex - -
-
-
- -
-

Color Picker

- -

A generated control using the new Box Slider control and several sliders with helpers.

- -

Creates a Color Picker style control to generate color values within a Unity Project. Handles color sampling with a cursor as well as saving/loading presets.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A generated Color Picker UI with prefab for use in Unity. Includes an optional Color Sampler to pick colors from the screen.

- -

- -

- -

Color Picker control

- -

Uses the renderer material to expose the selected color from the combined control.

- -

Like the other Unity UI controls, it includes an OnValueChanged event which outputs the Color of the control as it’s changed.

- -

Color Sampler

- -

Captures the screen when it is enabled, then provides a cursor with which the user can select colors from the screen.

- -

- -

Color Picker Presets

- -

Manages saving/loading presets to a JSON file or player prefs.

- -
- -

Properties

- -

Color Picker Control properties

- -

Example found on the Picker 2.0 prefab.

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Sampler (button)The cursor’s button component.
Sampler Outline (outline)The outline of the cursor to make it easier to see what’s being sampled.
On Color Selected (event)Callback for when the cursor is clicked on a color. This should connect to the ColorPickerControl.CurrentColor at minimum.
- -

Color Sampler properties

- -

Example found on the Picker 2.0 prefab. -The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
On Value Changed (event)The Event fired when the color within the picker is changed
HSV sliders on (bool)Shows / hides the HSV sliders in te UI prefab.
HSV Sliders (GameObject array)Contains references to the components that are part of the HSV sliders display.
RGB sliders on (bool)Shows / hides the RGB sliders in te UI prefab.
RGB Sliders (GameObject array)Contains references to the components that are part of the RGB sliders display.
Alpha Slider (GameObject)The alphas slider (turns off if both RGB and HSV sliders are off).
- -

Color Picker Presets properties

- -

Example found on the Picker 2.0 / Presets prefab.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Picker (ColorPickerControl)Reference to the color picker control.
Preset Prefab (GameObject)UI component for displaying the preset(s).
Max Presets (int)The max number of presets allowed (to control the UI size).
Predefined Presets (Color array)Colors that will be in the presets regardless of the user-defined presets.
Create Preset Image (Image)The image behind the “+” button. Gets colored when a color is selected.
Create Button (RectTransform)Reference to the button.
Save Mode (enum)None, JSON, PlayerPrefs - the mode used for saving user-defined presets.
Player Prefs Key (string)The JSON file name or the player pref key, the auto-generated one includes the GUID of the gameobject so multiple can exist without conflict (unless you set your own string to be the same on all ColorPickerPresets).
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the Color Picker object to a canvas in a scene using the prefab located in “Assets / unity-ui-extensions / Examples / ColorPicker”. Toggle on/off the HSV or RGB sliders as desired.

- -

Feel free to remove any unnecessary sliders or alter UI to meet your needs. Can also use this as a base to create your own picker, just be sure to use the following add-on components:

- -
    -
  • ColorField - used to display the current color of the picker
    • -
  • ColorSlider - used to bind a slider and it’s value to the picker, also sets the range to bind (R,G,B,A,H,S,V)
    • -
  • HSV Box Slider - used to bind a Box Slider control to the color picker
    • -
  • Hex Color Field - used to bin an Input Field to a color picker and do Hex Code validation
    • -
- -

To access the ColorPicker color direct in code:

- -
public Renderer pickerRenderer;
-public ColorPickerControl picker;
-
-void Awake()
-{
-    pickerRenderer = GetComponent<Renderer>();
-}
-// Use this for initialization
-void Start()
-{
-    picker.onValueChanged.AddListener(color =>
-    {
-        pickerRenderer.material.color = color;
-    });
-}
-
- -

The ColorPickerPresets and ColorSampler are all set up in the prefab without need for any scripting. However, both can be extended from with relative ease if you need different functionality.

- -
- -

Video Demo

- -

Click to play

- -

Box Slider Demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Credit judah4 -Color Sampler and Color Presets [Naphier] (https://bitbucket.org/Naphier/)

- -
- - - -

Sourced from - http://forum.unity3d.com/threads/color-picker.267043/

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/combobox/index.html b/_site_test/ugui/controls/combobox/index.html deleted file mode 100644 index 170a9d2..0000000 --- a/_site_test/ugui/controls/combobox/index.html +++ /dev/null @@ -1,912 +0,0 @@ - - - - - -ComboBox — Unity UI Extensions - - - -ComboBox | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

ComboBox

- - -

Editable dropdown with keyboard navigation and multi-select capability.

- - -
- - Input - - - - input - - combobox - - dropdown - - select - -
-
-
- -
-

ComboBox

- -

A fixed combobox implementation for text

- - - -

Contents

- -
- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Standard combobox style control with support for multiple textual child items. -Similar to the new built in Unity Dropdown control

- -

ComboBox inspector

- -
- -

Properties

- -

The properties of the Combo Box control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Available OptionsArray of text based options for the dropdown/selection
Is ActiveCan the autocomplete combo box be activated by the user (dropped down) or is it disabled?
Scroll Bar WidthThe width of the scrollbar when displayed
Items To DisplayNumber of child items to display when opened. *Note default 0 shows NO items.
Dropdown OffsetOffset height for where the dropdown list should appear.
Display Panel AboveShould the dropdown panel appear above the control instead of below?
Sort ItemsShould the items in the combo box be sorted
Select First Item On StartShould the first item be auto selected on start
Select Index Item on StartWhich item should be selected on start (Select First Item on Start will override this option)
On Selection Changed (event)The Event fired when the user selects an option or loses focus
On Control Disabled (event)The Event fired when the control is disabled through code.
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
AddItemStringAdds a single item to the list
RemoveItemStringRemoves a single item from the list
SelectItemIndexintSets the currently selected item in the list
SetAvailableOptionsList of StringClears the current options and replaces with new list (array or List)
SetAvailableOptionsArray of StringClears the current options and replaces with new list (array or List)
ResetItemsN/AClears all current options
- -
- -

Usage

- -

Add the combobox control to your scene using:

- -

“GameObject -> UI -> Extensions -> ComboBox -> ComboBox”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> ComboBox -> ComboBox”

- -

Then simply add child elements to the Items property.

- -
- -

Video Demo

- -

Tutorial Video

- -
- -

See also

- -

DropDownList -AutoCompleteComboBox

- -
- -

Credits and Donation

- -

Perchik

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/content-scroll-snap-horizontal/index.html b/_site_test/ugui/controls/content-scroll-snap-horizontal/index.html deleted file mode 100644 index 8c12c2f..0000000 --- a/_site_test/ugui/controls/content-scroll-snap-horizontal/index.html +++ /dev/null @@ -1,919 +0,0 @@ - - - - - -Content Scroll Snap Horizontal — Unity UI Extensions - - - -Content Scroll Snap Horizontal | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Content Scroll Snap Horizontal

- - -

Snap-to-page horizontal scroll container with automatic page detection.

- - -
- - Layout - - - - layout - - scroll - - snap - - horizontal - - pagination - -
-
-
- -
-

Content ScrollSnap Horizontal

- -

A list scroll rect that snaps onto the items in its content, includes button & pagination support (optional).

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A scroll snap style control which is focused on a horizontal layout. This layout snaps the children of its content to the center -of the scroll rect, without resizing or moving them, enabling a kind of snapping list functionality, as opposed to paging. -Pages can be moved by swipes or via the use of buttons.

- -

A scroll snap style control which is focused on a horizontal layout, enabling a paged view of child elements. -Pages can be moved by keys, swipes or via the use of buttons.

- -

- -

Implements additional events for when the scroll snap starts moving, when the current item changes, when an item is found to snap to, and when -the scroll snap has finished snapping.

- -
- -

Properties

- -

The properties of the Horizontal Scroll Snap control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Ignore Inactive ItemsWhen enabled the scroll snap ignores inactive items, when disabled the scroll snap will snap to inactive items.
Start InfoAll information about where the scroll snap should start when it is enabled, and how it should get there.
Index TypeA property of Start Info which describes whether the Index is associated with the child at that index, or the position at that index. A higher Index where the Index Type is Position Index means it will be further to the right.
IndexA property of Start Info. The index of the child or snap position where the scroll snap will start when enabled.
JumpA property of Start Info. When Jump is true the scroll rect will jump to the Index.
DurationA property of Start Info. If Jump is false the scroll snap will lerp to the Index in this amount of time (in seconds).
Prev ButtonButton to instruct the control to move to the previous item.
Next ButtonButton to instruct the control to move to the next item.
PaginationThe GameObject with a Toggle group that controls toggles active state. Recommended one toggle per-item.
Snapping Velocity ThresholdThe velocity below which the scroll snap will start to snap.
Jump To ItemWhen the Prev Button or Next Button are pressed, and Jump To Item is true, the scroll snap will jump to the next/previous item.
Lerp TimeWhen the Prev Button or Next Button are pressed, and Jump To Item is false, the scroll snap will lerp to the next/preivous item in this amount of time (seconds).
Start Movement (event)The Event fired when the scroll rect starts to move, either via swipe, or Next/Prev Buttons.
Current Item Change (event)The Event fired when the current (closest) item changes, either via swipe, or Next/Prev Buttons.
Found Item To Snap To (event)The Event fired when the scroll snap decides what item it is going to snap to, either when the scroll rect’s velocity falls below the Snapping Velocity Threshold, or when Next/Prev buttons are pushed.
Snapped To Item (event)The Event fired when the scroll snap settles after being changed by swipe, or Next/Prev Buttons.
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetNewItemsnewItems (List of Transform Items)Replaces the content with a new list of items. Content should have a layout control or the new items should be prefabs with positions/anchors already defined.
- -
- -

Usage

- -

Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows:

- -

“Add Component -> UI -> Extensions -> ContentSnapScrollHorizontal”

- -

Or alternatively, add the default layout for the control using:

- -

“GameObject -> UI -> Extensions -> Layout -> Content Scroll Snap Horizontal”

- -

This will give you a standard Scroll Rect setup with the script and a few example child items.

- -
- -

Video Demo

- -

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Beka Westberg (Beks_Omega)

- -
- - - -

N/A

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/cooldown-button/index.html b/_site_test/ugui/controls/cooldown-button/index.html deleted file mode 100644 index 3019d12..0000000 --- a/_site_test/ugui/controls/cooldown-button/index.html +++ /dev/null @@ -1,886 +0,0 @@ - - - - - -Cooldown Button — Unity UI Extensions - - - -Cooldown Button | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Cooldown Button

- - -

Button with an animated cooldown arc that prevents rapid re-clicking.

- - -
- - Input - - - - input - - button - - cooldown - - timer - - animation - -
-
-
- -
-

CooldownButton

- -

A selectable extension to provide a “cooldown” capability, preventing the button from being usable until a specified amount of time has passed.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

In several games, a power-up or cooldown logic is required when clicking on a button, this control enables that behaviour in a single reusable script.

- -

- -

This can be attached to any control implementing “Selectable” behaviour, such as:

- -
    -
  • Button
    • -
  • Toggle
    • -
  • Non-Drawing Graphic
    • -
- -

In the example “Cooldown” scene, it also demonstrates how to pair up this control with other effects such as the SoftMask effect and the native Unity image effects. Showing how to add a fading/growing style effect when clicked.

- -

Lastly, the control also has “extra” click detection allowing further feedback in it’s use, so if a user clicks on the control when it is “cooling down”, you can optionally apply additional feedback to inform the users that it can’t be clicked as it is cooling down.

- -
- -

Properties

- -

The properties of the UILineConnector control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Cooldown TimeoutThe amount of time the cooldown takes effect. Defaults to seconds
Cooldown SpeedThe speed at which the cooldown expires.
Cooldown Active(Read only)Is the Cooldown active (can be stopped with the CancelCooldown method)
Cooldown In EffectIs the Cooldown active (can be paused with PauseCooldown method and restarted with the RestartCooldown method)
Cooldown Time ElapsedThe amount of time (float) that has passed since the cooldown started
Cooldown Time RemainingThe amount of time (float) remaining on the cooldown
Cooldown Percent RemainingThe percentage of cooldown remaining
Cooldown Percent CompleteThe percentage of cooldown completed
On Cooldown Start (event)The Event fires when the user clicks on the control and starts the cooldown
On Button Click During Cooldown (event)The Event fires when the user clicks on the control while it is cooling down
On Cooldown Finish (event)The Event fires when the cooldown time has finished
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

The CooldownButton control is available as a Game Component menu in:

- -

“Add Component -> UI -> Extensions -> Cooldown Button”

- -

Attach to any Selectable UI component (Button, Toggle, etc.) to add cooldown functionality.

- -
- -

Video Demo

- -

Click to play

- -

UI Line Connector Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit SimonDarksideJ

- -
- - - -

N/A

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/curly-ui/index.html b/_site_test/ugui/controls/curly-ui/index.html deleted file mode 100644 index 9b8e58a..0000000 --- a/_site_test/ugui/controls/curly-ui/index.html +++ /dev/null @@ -1,885 +0,0 @@ - - - - - -CurlyUI — Unity UI Extensions - - - -CurlyUI | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

CurlyUI

- - -

Warps any uGUI graphic with configurable horizontal and vertical curves.

- - -
- - Effects - - - - effects - - curve - - warp - - mesh - - distort - -
-
-
- -
-

Curly UI

- -

A UI Effect that will make your UI Curly

- -

Curly UI Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Curly UI is a set of effect extensions that can alter the RectTransform of your UI Images / Text or RawGraphic’s

- -

- -

Once added to either an Image, Text or RawGraphic, you will be presented with some bezier handles to manipulate the curves of your UI component, these help define how you want to curve your UI.

- -
- -

Properties

- -

The properties of the Curly controls (CUI Image, Text, Graphic) are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Is CurvedApply the curve affect to the attached element
Is Lock with RatioLock curves to the native object ratios
ResolutionComplexity of the underlying mesh, increases draw complexity for quality
UI GraphicGraphic element being altered with the curve
Ref CUI Graphictbc
Ref CurvesCollection of CUI Bezier curves to apply to the graphic
Curves Position RatiosBezier control points for each reference curve (Ref Curves)
Fit Bezier Curves to rect transform (button)Reset Bezier points to native Rect Transform positions
Reference CUI component for curves (button)Reset Bezier points to “Ref CUI Graphic” Rect Transform positions
Corner RatioBezier offset for the curve corners
Use native corner ratio (button)Reset corner ratio to native Rect Transform positions
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add any of the CUI Game Components to an Image/Text/Rawimage object using “UI / Effects / Extensions / CUI**” in the “Component” menu, or the “Add Component*” button in the inspector.

- -
    -
  • CUI Image -> Image
    • -
  • CUI Text -> Text
    • -
  • CUI Graphic -> RawImage
    • -
- -

Once added, you can then manipulate the curves for the RectTransform using the bezier handles added in the editor.

- -
-

[!NOTE] -You should be able to manipulate / animate the bezier control points through code, however, this has not been tested as yet.

-
- -
- -

Video Demo

- -

Click to play

- -

Curly UI Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Titinious

- -
- - - -

Sourced from - https://github.com/Titinious/CurlyUI

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/diamond-graph/index.html b/_site_test/ugui/controls/diamond-graph/index.html deleted file mode 100644 index b706b8f..0000000 --- a/_site_test/ugui/controls/diamond-graph/index.html +++ /dev/null @@ -1,844 +0,0 @@ - - - - - -Diamond Graph — Unity UI Extensions - - - -Diamond Graph | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Diamond Graph

- - -

Radar/spider chart rendered as a configurable diamond polygon shape.

- - -
- - Primitives - - - - primitives - - chart - - radar - - spider - - graph - - polygon - -
-
-
- -
-

DiamondGraph

- -

Graphic control for drawing a diamond in the UI System

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Advanced polygon control with 4 fixed vertices which can be manipulated to control the look and feel of the primitive

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
WidthHorizontal radius of the diamond.
HeightVertical radius of the diamond.
ThicknessStroke thickness when not filled.
FillEnable to render a filled diamond; disable for outline only.
Preserve AspectMaintain aspect ratio when resizing.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add the primitive control to your scene using:

- -

“GameObject -> UI -> Extensions -> Primitives -> Diamond Graph”

- -

Alternatively, add the component using:

- -

“Add Component -> UI -> Extensions -> Primitives -> Diamond Graph”

- -
- -

Video Demo

- -

tutorial video

- -
- -

See also

- -

UIPolygon

- -
- -

Credits and Donation

- -

koohddang

- -
- - - -

“List of links for the control, e.g. Source, other info”

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/dropdown-list/index.html b/_site_test/ugui/controls/dropdown-list/index.html deleted file mode 100644 index 30a8327..0000000 --- a/_site_test/ugui/controls/dropdown-list/index.html +++ /dev/null @@ -1,950 +0,0 @@ - - - - - -DropDown List — Unity UI Extensions - - - -DropDown List | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

DropDown List

- - -

Styleable dropdown list with animated open/close and custom item rendering.

- - -
- - Input - - - - input - - dropdown - - select - - list - -
-
-
- -
-

DropDownList

- -

A basic drop down list with text and image support

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A more advanced Combobox control with additional support for images and other items in the selection pane

- -

Drop Down List Inspector

- -
- -

Properties

- -

The properties of the Drop Down List control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Disabled Text ColorColor of the Autocomplete field when the control is disabled.
Available OptionsArray of child options options for the dropdown/selection. Each child is configured within the array below:
-CaptionText for the Child item.
-ImageImage displayed next to child item.
-Is DisabledIs this child item disabled by default.
-IdUnique identity of the drop down item.
Is ActiveCan the autocomplete combo box be activated by the user (dropped down) or is it disabled?
Override HighlightedShould the normal highlight behavior of the control be ignored.
Scroll Bar WidthThe width of the scrollbar when displayed.
Items To DisplayNumber of child items to display when opened. *Note default 0 shows NO items.
Dropdown OffsetOffset height for where the dropdown list should appear.
Display Panel AboveShould the dropdown panel appear above the control instead of below?
Select First Item On StartShould the first item be auto selected on start?
Select Index Item on StartWhich item should be selected on start. (Select First Item on Start will override this option)
On Selection Changed (event)The Event fired when the user selects an option or loses focus
On Control Disabled (event)The Event fired when the control is disabled through code.
- -
-

When managing the control programmatically, make sure you use the following functions to manage the ComboBox contents. Do NOT update the ‘AvailableOptions’ list directly

-
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
AddItemDropDownListItemAdds a new item to the drop down list and rebuilds the display
AddItemStringAdds a new item to the drop down list and rebuilds the display
AddItemSpriteAdds a new item to the drop down list and rebuilds the display
RemoveItemDropDownListItemRemoves an item from the drop down list and rebuilds the display
RemoveItemStringRemoves an item from the drop down list and rebuilds the display
RemoveItemSpriteRemoves an item from the drop down list and rebuilds the display
RefreshItemsArray of supported items (DropDownListItem, String or Sprite)Clears the current list and rebuilds a new list with the provided items
SelectItemIndexintSets the currently selected item in the list
ResetItemsN/AClears all current options
- -
- -

Usage

- -

Add the DropDownList control to your scene using:

- -

“GameObject -> UI -> Extensions -> ComboBox -> DropDownList”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> ComboBox -> Dropdown List”

- -

Then simply add drop down elements to the Items property. Additionally, Images and other items may be added to enhance the drop down items

- -
- -

Video Demo

- -

Tutorial Video

- -
- -

See also

- -

ComboBox -AutoCompleteComboBox

- -
- -

Credits and Donation

- -

Perchik

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/fancy-scroll-view/index.html b/_site_test/ugui/controls/fancy-scroll-view/index.html deleted file mode 100644 index 68f0f02..0000000 --- a/_site_test/ugui/controls/fancy-scroll-view/index.html +++ /dev/null @@ -1,970 +0,0 @@ - - - - - -Fancy Scroll View — Unity UI Extensions - - - -Fancy Scroll View | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Fancy Scroll View

- - -

High-performance scroll view with virtual item pooling and custom layouts.

- - -
- - Layout - - - - layout - - scroll - - virtual - - performance - - pooling - -
-
-
- -
-

Fancy Scroll View

- -

A very fancy Scroll view component, with an extensible event system

- -

Fancy Scroll View Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Usage

- -

4 Video Demo

- -

5 See also

- -

6 Credits and Donation

- -

7 External links

-
- -
- -

Overview

- -

Fancy Scroll View is a programmatic way to build a scroll view component with several extensible features.

- -

- -

The control is made up of several Key Components:

- -
    -
  • Scroll Position Controller (SPC) - a replacement ScrollRect control
    • -
  • Scroll View script (custom) - The Scroll View controller that consumes the SPC
    • -
  • Scroll View Cell (custom) - The Scroll view item template factory
    • -
  • (optional) Cell DTO template - A script that defines the cell content that the factory consumes
    • -
- -

Implementation of this control is almost entirely programmatic, with several examples provided in the Examples folder:

- -
    -
  • 01_Basic Example - Simple non-selectable scroll view, scene has an initialization script on the Canvas to load test data in the scrollview. Includes animation effects for the cells.
    • -
  • 02_CellEvents - Replicates Example 1, adding event handlers and click handlers for cells which fire off events when clicked
    • -
  • 03_InfiniteScroll - An advanced implementation which uses scene depth rather than width/height and also implements the events from example 2
    • -
- -
- -

Properties

- -

The properties of the Scroll Position Controller are as follows:

- -

Property | Description

-
    -
  • |- -ViewPort|Restricted bounds of the Scroll View Position controller -Direction of Recognize|Direction of movement, Horizontal or Vertical -Movement Type|Complexity of the underlying mesh, increases draw complexity for quality -Elasticity|Graphic element being altered with the curve -Scroll Sensitivity|tbc -Inertia|Collection of CUI Bezier curves to apply to the graphic -Deceleration Rate|Bezier control points for each reference curve (Ref Curves) -Snap Section - Enable|Reset Bezier points to native Rect Transform positions - Velocity Threshold|Reset Bezier points to “Ref CUI Graphic” Rect Transform positions - Duration|Bezier offset for the curve corners -Data Count|Reset corner ratio to native Rect Transform positions -On Value Changed (event) |The Event fired when the handle within the box slider is changed
    • -
- -

The properties of the ScrollView template (FancyScrollView class) are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Cell IntervalApply the curve affect to the attached element
Cell OffsetLock curves to the native object ratios
LoopComplexity of the underlying mesh, increases draw complexity for quality
Cell BaseGraphic element being altered with the curve
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

To use this control you will need to programmatically build and tailor it for your own use. The examples provided in the “Examples\FancyScrollView” folder will help.

- -

As described earlier, you will need to create:

- -
    -
  • A cell data template (optional but recommended if you want to load data to view)
    • -
- -

For example

- -
```csharp
-    public class Example01CellDto
-    {
-        public string Message;
-    }
-```
-
- -
    -
  • A Cell template script - to initialize your content and control what happens when the cell is moved (e.g. apply animation)
    • -
- -

For example

- -
```csharp
-    public class Example01ScrollViewCell : FancyScrollViewCell<Example01CellDto>
-    {
-        [SerializeField]
-        Animator animator;  //Example to attach an animator
-        [SerializeField]
-        Text message; // Example field to bind a cell text field value to
-
-        readonly int scrollTriggerHash = Animator.StringToHash("scroll"); //Animation in the animator to use as the system uses Hashes not text
-
-        //initialization to setup Cell Rect Transform
-        void Start()
-        {
-            var rectTransform = transform as RectTransform;
-            rectTransform.anchorMax = Vector2.one;
-            rectTransform.anchorMin = Vector2.zero;
-            rectTransform.anchoredPosition3D = Vector3.zero;
-            UpdatePosition(0);
-        }
-
-        //UpdateContent method from the base FancyScrollViewCell class to apply changes on update
-        public override void UpdateContent(Example01CellDto itemData)
-        {
-            message.text = itemData.Message;
-        }
-
-        //UpdatePosition method from the base FancyScrollViewCell class to react or alter what happens when the cell position moves
-        public override void UpdatePosition(float position)
-        {
-            animator.Play(scrollTriggerHash, -1, position);
-            animator.speed = 0;
-        }
-    }
-```
-
- -
    -
  • A ScrollView Implementation consuming your data template and binding the ScrollView to the Position controller
    • -
- -

For example

- -
```csharp
-    public class Example01ScrollView : FancyScrollView<Example01CellDto>
-    {
-        [SerializeField]
-        ScrollPositionController scrollPositionController;
-
-        new void Awake()
-        {
-            base.Awake();
-            scrollPositionController.OnUpdatePosition.AddListener(UpdatePosition);
-        }
-
-        public void UpdateData(List<Example01CellDto> data)
-        {
-            cellData = data;
-            scrollPositionController.SetDataCount(cellData.Count);
-            UpdateContents();
-        }
-    }
-```
-
- -

All that is left then is to intialise the ScrollView with your data and let it run.

- -
-

For additional help -See the documentation provided by the Developer in the original repository. Note however, it is not in English currently and needs translating.

-
- -
- -

Video Demo

- -

Click to play

- -

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit setchi

- -
- - - -

Sourced from - https://github.com/setchi/FancyScrollView

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/flow-layout-group/index.html b/_site_test/ugui/controls/flow-layout-group/index.html deleted file mode 100644 index 55a6158..0000000 --- a/_site_test/ugui/controls/flow-layout-group/index.html +++ /dev/null @@ -1,860 +0,0 @@ - - - - - -Flow Layout Group — Unity UI Extensions - - - -Flow Layout Group | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Flow Layout Group

- - -

Automatically wraps child elements into rows or columns like CSS flexbox.

- - -
- - Layout - - - - layout - - flow - - wrap - - grid - - auto-layout - -
-
-
- -
-

FlowLayoutGroup

- -

A more rugged grid style layout group

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Usage

- -

4 Video Demo

- -

5 See also

- -

6 Credits and Donation

- -

7 External links

-
- -
- -

Overview

- -

A more rugged grid style layout group

- -

- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Handle RectThe Rect Transform of the child handle, position used to derive values for control
Min ValueThe minimum value for the sliders
Max ValueThe maximum value for the sliders
Whole NumbersOnly use whole numbers instead of floats
Value XThe X value of the slider
Value YThe Y value of the slider
On Value Changed (event)The Event fired when the handle within the box slider is changed
- -

Inherited from Slider

- -
    -
  • Interactable
    • -
  • Transition
    • -
  • Navigation
    • -
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows:

- -

“Add Component -> Layout -> Extensions -> Flow Layout Group”

- -
- -

Video Demo

- -

Tutorial Video

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Simie

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/gradient/index.html b/_site_test/ugui/controls/gradient/index.html deleted file mode 100644 index ab601b7..0000000 --- a/_site_test/ugui/controls/gradient/index.html +++ /dev/null @@ -1,844 +0,0 @@ - - - - - -Gradient — Unity UI Extensions - - - -Gradient | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Gradient

- - -

Applies a two-colour vertex gradient to any uGUI graphic component.

- - -
- - Effects - - - - effects - - gradient - - colour - - vertex - - text - -
-
-
- -
-

Gradient

- -

Apply vertex colours in a gradient on any UI object

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Apply vertex colours in a gradient on any graphic UI object

- -

- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Gradient ModeShould the gradient work in Local or Global coordinate space
Gradient DirThe direction of the gradient: Horizontal / Vertical / Diagonal left to right / diagonally right to left
Override all colorShould the control use or ignore the alpha of the original image for the effect
Vertex 1First gradient color
Vertex 2Second gradient color
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

To enable the Gradient component, simply add the component to a UI Graphic Object using:

- -

“Add Component -> UI -> Effects -> Extensions -> Gradient”

- -
- -

Video Demo

- -

Click to play

- -

Gradient Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Breyer

- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/gradient2/index.html b/_site_test/ugui/controls/gradient2/index.html deleted file mode 100644 index 273026a..0000000 --- a/_site_test/ugui/controls/gradient2/index.html +++ /dev/null @@ -1,861 +0,0 @@ - - - - - -Gradient 2 — Unity UI Extensions - - - -Gradient 2 | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Gradient 2

- - -

Four-corner gradient effect with independent colour control per vertex.

- - -
- - Effects - - - - effects - - gradient - - four-corner - - vertex - - colour - -
-
-
- -
-

Gradient2

- -

Apply vertex colours in a gradient on any UI object

- -

Gradient 2 Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Apply vertex colours in a gradient on any graphic UI object

- -

- -
- -

Properties

- -

The properties of the Gradient2 control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Gradient TypeThe Type of Gradient to be used: Horizontal / Vertical / Radial (inside to outside) / Diamond
Blend ModeHow should the gradient apply: Override / Add / Multiply
Modify VerticesChange the vertices of the image to apply the gradient
OffSetHow much of the gradient should be applied, allows for grading in the gradient (all inception like)
ZoomZoom in to the effect Gradient at the specified offset
Effect GradientA gradient scale using the Unity Gradient tool which allows setting of multiple gradients
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

To enable the Gradient component, simply add the component to a UI Graphic Object using:

- -

“Add Component -> UI -> Effects -> Extensions -> Gradient2”

- -
-

[!NOTE] -The control works based on the base vertices of the UI object it is applied to. If the object only has 4 vertices (a Quad like the base image) it can only project values between 0 & 1, meaning mid values on the gradient can’t take effect. To improve the gradient on a GO, the base object will need enough vertices to apply the gradient, a quad is not sufficient. -May look to add a control to the project to improve the resolution of a base image / quad to add more vertices in the future.

-
- -
- -

Video Demo

- -

Click to play

- -

Gradient 2 Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -
    -
  • Brad Nelson (playemgames)
    • -
  • David Gileadi
    • -
- -
- - - -

Sourced from

- -

Updated Gradient Effect

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/grid-raw-image/index.html b/_site_test/ugui/controls/grid-raw-image/index.html deleted file mode 100644 index f022b77..0000000 --- a/_site_test/ugui/controls/grid-raw-image/index.html +++ /dev/null @@ -1,867 +0,0 @@ - - - - - -Grid Raw Image — Unity UI Extensions - - - -Grid Raw Image | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Grid Raw Image

- - -

RawImage that tiles a texture in a grid pattern with UV offset control.

- - -
- - Primitives - - - - primitives - - image - - grid - - tile - - texture - -
-
-
- -
-

UI Grid Raw Image

- -

Custom graphic for uGUI. Single-object/texture Grid image, excellent for tile-based (tetris-like) inventory

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Custom graphic for uGUI. Single-object/texture Grid image, excellent for tile-based (tetris-like) inventory.

- -

Features

- -
    -
  • 1 texture / 1 GameObject / 1 drawcall
    • -
  • skip cells
    • -
  • valid raycasting by geometry for input
    • -
  • resize rectTransform to fit
    • -
  • extrude edges (inner outer)
    • -
  • Non-rectangle cells
    • -
  • script-based, no custom shader
    • -
- -
- -

Properties

- -

alt text

- -

The properties of the Grid Raw Image control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
TextureTexture to use for each cell.
ResizeFactor by how each cell is resized.
Cell SizeThe dimensions per cell.
ExtrudeExtrusion surrounding the cell.
ShapeThe grid size, including configuration for which cells are active.
- -

Inherited from MaskableGraphic

- -
    -
  • Material
    • -
  • Color
    • -
  • Raycast Target
    • -
  • Maskable
    • -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

…

- -
- -

Video Demo

- -

Youtube usage video

- -
- -

See also

- -

alt text -alt text -alt text -alt text -alt text -alt text -alt text

- -
- -

Credits and Donation

- -

Dmitry (mitay-walle)

- -
- - - -

Sourced from

- -
- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/horizontal-scroll-snap/index.html b/_site_test/ugui/controls/horizontal-scroll-snap/index.html deleted file mode 100644 index aaf2dfc..0000000 --- a/_site_test/ugui/controls/horizontal-scroll-snap/index.html +++ /dev/null @@ -1,1001 +0,0 @@ - - - - - -Horizontal Scroll Snap — Unity UI Extensions - - - -Horizontal Scroll Snap | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Horizontal Scroll Snap

- - -

Paged horizontal scroll view that snaps to discrete content pages.

- - -
- - Layout - - - - layout - - scroll - - snap - - horizontal - - pages - -
-
-
- -
-

Horizontal Scroll Snap

- -

A paged scroll rect that can work in steps / pages, includes button support. Now also supports infinite scrolling.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A scroll snap style control which is focused on a horizontal layout, enabling a paged view of child elements. -Pages can be moved by keys, swipes or via the use of buttons.

- -

Horizontal ScrollSnap Inspector

- -

Implements its own infinite scrolling method and additional events for when pages change.

- -

As of Update 1.6, now also supports Scrollbars, Note Can only use the Horizontal scrollbar in alignment with the direction of the ScrollSnap

- -
- -

Properties

- -

The properties of the Horizontal Scroll Snap control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Starting ScreenThe child page that should be displayed on start. Bound to the limits of either the scene child objects or the “Child Objects” array.
Page StepThe distance between pages based on the current width of the control. Higher value equals more spacing.
PaginationThe GameObject with a Toggle group that controls toggles active state. Recommended one toggle per-page.
Next ButtonButton to instruct the control to move to the next page.
Prev ButtonButton to instruct the control to move to the previous page.
Transition SpeedSpeed at which the control lerps between pages
Use Fast SwipeWhen enabled, a swipe only moves to the next page (unless below Fast Swipe Threshold. E.G. slow swipe / drag)
Fast Swipe ThresholdAn offset width the user must swipe to go to the next / prev page based on the panel width. Swipe more than the Height + Threshold and the control reverts to normal swipe behaviour
Swipe Velocity ThresholdSlowest speed the control must travel at to settle on a page.
Mask AreaMaskable area for control, pages outside this area will be made inactive. Used in conjunction with the Mask Buffer. Recommended to also add a RectMask2D to MaskArea GO.
Mask BufferThe amount of page buffer to surround the Mask Area and control which pages are active / inactive. Lower value equals more active pages.
Jump On EnableBy default the container will lerp to the start when enabled in the scene, this option overrides this and forces it to simply jump without lerping
Restart On EnableBy default the container will stay on the current selection, this option overrides this behaviour and returns to the original starting page when enabled.
Use Parent TransformWhen using prefabs in the ChildObjects array, the control with use the prefab transform values instead of resetting to the parent.
Child ObjectsAn array of prefabs to load the control with. Can EITHER add children in to the scene or via this array but NOT both.
On Selection Change Start (event)The Event fired when the user starts changing the page via swipe or mouse
On Selection Page Changed (event)The Event fired when the current page changes, either via swipe, mouse, Next/Prev Buttons
On Selection Change End (event)The Event fired when the page settles after being changed by swipe or mouse
- -

Additional properties available in code

- - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
CurrentPageintThe current snapped page, or selected page as the user swipes
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DistributePagesN/AForces a refresh of the currently available Scroll Snap Pages
Add ChildGo (GameObject)Add a new child to this Scroll Snap and recalculate its children
Add ChildGo (GameObject), WorldPositionStays (bool)Add a new child to this Scroll Snap and recalculate its children, and resets the world position of the new child.
Remove Childindex (int), (out) ChildRemoved (GameObject)Remove a new child to this Scroll Snap and recalculate its children, outputs the removed object to a variable.
Remove Childindex (int), WorldPositionStays (bool), (out) ChildRemoved (GameObject)Remove a new child to this Scroll Snap and recalculate its children, outputs the removed object to a variable. Resets the world position of the removed GameObject.
RemoveAllChildren(out) ChildrenRemoved (GameObject[])Remove all children from this ScrollSnap, outputs a GameObject array of all removed children.
RemoveAllChildrenWorldPositionStays (bool), (out) ChildrenRemoved (GameObject[])Remove all children from this ScrollSnap, outputs a GameObject array of all removed children. Resets the world position for all removed children.
UpdateLayout(optional) BoolUsed for changing / updating between screen resolutions, if the argument is true, the current page will be reset to the StartingScreen.
- -
- -

Usage

- -

Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows: -“Add Component -> Layout -> Extensions -> HorizontalScrollSnap*”

- -

Or alternatively, add the default layout for the control using:

- -

“GameObject -> UI -> Extensions -> Horizontal Scroll Snap”

- -

This will give you a standard Scroll Rect setup with the script and a single child example page.

- -

To get access to the Current or snapped page in code, use the CurrentPage property details above. This is also updated as the user swipes. If you wish to update linked content based on the current page, I recommend using the OnSelectionPageChanged event, e.g.

- -
    public HorizontalScrollSnap hss;
-
-    // Start is called before the first frame update
-    void Start()
-    {
-        hss = GetComponent<HorizontalScrollSnap>();
-    }
-
-    // Update is called once per frame
-    void Update()
-    {
-        //Checking for the Currentpage
-        var theSelectedPageIs = hss.CurrentPage;
-    }
-
- -
- -

Video Demo

- -

The main Vertical / Horizontal demo

- -

View Intro Video

- -

A simple walk-through setting up the Scroll Snap with a perspective view

- -

Scroll Snap Perspective View Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

BinaryX, SimonDarksideJ

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/index.html b/_site_test/ugui/controls/index.html deleted file mode 100644 index d68d2b0..0000000 --- a/_site_test/ugui/controls/index.html +++ /dev/null @@ -1,129 +0,0 @@ - - - - - -uGUI Controls — Unity UI Extensions — Unity UI Extensions - - - -uGUI Controls — Unity UI Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -

Redirecting to uGUI Controls…

- -
- - - - - diff --git a/_site_test/ugui/controls/letter-spacing/index.html b/_site_test/ugui/controls/letter-spacing/index.html deleted file mode 100644 index 26ee1f3..0000000 --- a/_site_test/ugui/controls/letter-spacing/index.html +++ /dev/null @@ -1,853 +0,0 @@ - - - - - -Letter Spacing — Unity UI Extensions - - - -Letter Spacing | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Letter Spacing

- - -

Adds configurable character spacing (tracking) to uGUI Text components.

- - -
- - Effects - - - - effects - - text - - letter-spacing - - tracking - - typography - -
-
-
- -
-

Letter Spacing

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

Allows finer control of text spacing

- - - -
-

Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead.

-
- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Allows finer control of text spacing

- -

- -
- -

Properties

- -

The properties of the Letter Spacing component are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
SpacingThe spacing distance between characters
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DeprecatedN/ARemoved in Unity 6; no public methods are available
- -
- -

Usage

- -

Simply add this to a Text component through the Add Component menu as follows: -Add Component -> UI -> Effects -> Extensions -> Letter Spacing

- -
- -

Video Demo

- -

Click to play

- -

Letter Spacing Demo

- -
- -

See also

- -

Curved Text -Cylinder Text -Mono Spacing

- -
- -

Credits and Donation

- -

Deeperbeige

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/menu-system/index.html b/_site_test/ugui/controls/menu-system/index.html deleted file mode 100644 index dc6cad6..0000000 --- a/_site_test/ugui/controls/menu-system/index.html +++ /dev/null @@ -1,880 +0,0 @@ - - - - - -Menu System — Unity UI Extensions - - - -Menu System | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Menu System

- - -

Hierarchical animated menu with slide, fade, and scale transition modes.

- - -
- - Navigation - - - - navigation - - menu - - hierarchy - - transition - - animated - -
-
-
- -
-

Unite Menu System

- -

The example Menu system demonstrated at Unite Europe 2017, refactored and updated as a generic reusable system.

- -

Menu Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

At Unite 2017, a team demonstrated an easy to use approach to build an extendable and dynamic menu system for any project. -Video Link

- -

This has been updated / refactored in to a reusable feature with a little work based on a set of generic components, at it’s Core is the “Menu Manager” which manages all menus and a set of implementation templates for building the Menu’s in your game.

- -

- -

Once the manager has been added to your starting / master scene, it will control the flow between all “screens” in your project. -It is still quite basic at the moment and only loads/displays each screen UI canvas, so there is room for improvement.

- -
- -

Properties

- -

The properties of the Menu Manager are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Menu ScreensCollection of Menu prefabs for each menu in the game
Start ScreenThe initial menu screen the Menu Manager will load when the game is launched
- -

Additional properties available on Menu base classes

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Destroy When ClosedDestroy the Game Object when menu is closed (reduces memory usage)
Disable Menus UnderneathDisable menus that are under this one in the stack
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add “Menu Manager” component to a GameObject using:

- -

“GameObject -> UI -> Extensions -> Menu Manager”

- -

or through the Add Component menu:

- -

“Add Component -> UI -> Extensions -> Menu System -> Menu Manager”

- -

Next you will need to build your Menu UI Prefabs, including a Menu scripts based upon either of these two templates:

- -
    -
  • Menu - A blank Menu implementation that utilises a Singleton to easily reference the menu from the game or manager
    • -
  • SimpleMenu - A rough implementation that implements some basic functionality for simple screens.
    • -
- -

Simple Create a Canvas and design your UI with whatever UI components you need. Attach a script with the name of the menu (E.G. MainMenu, Options, Controls, etc) which implements either the Menu, SimpleMenu Base Classes. Then save the Canvas as a Prefab using the same name that was used for the Menu Script (see note). Once done, add that menu prefab to the menu manager.

- -

In the “Examples” Folder, there is a full working implementation to based your own design on.

- -
-

[!NOTE] -Currently, each “Menu” script MUST have the same name as the Menu prefab in order for the Menu manager to recognize it

-
- -
- -

Video Demo

- -

Click to play

- -

menu System Demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Credit Adam Kapos (Nezz)

- -
- - - -

Sourced from - https://github.com/YousicianGit/UnityMenuSystem -Also check the Unite Talk for the component

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/mono-spacing/index.html b/_site_test/ugui/controls/mono-spacing/index.html deleted file mode 100644 index 894a7db..0000000 --- a/_site_test/ugui/controls/mono-spacing/index.html +++ /dev/null @@ -1,861 +0,0 @@ - - - - - -Mono Spacing — Unity UI Extensions - - - -Mono Spacing | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Mono Spacing

- - -

Forces monospace character widths on any uGUI Text component.

- - -
- - Effects - - - - effects - - text - - monospace - - spacing - - typography - -
-
-
- -
-

Mono Spacing

- -
-

[!IMPORTANT] -⚠️ This control has been deprecated for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

Allows finer control of text spacing

- - - -
-

Text Effects are not supported with TextMeshPro due to its architecture, try using the native TextMeshPro effects instead.

-
- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Allows finer control of text spacing

- -

- -
- -

Properties

- -

The properties of the Mono Spacing component are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
SpacingThe spacing distance between characters
Half Char WidthWidth modifer using half the character width
Use Half Char WidthApply the additional half char width modifier
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DeprecatedN/ARemoved in Unity 6; no public methods are available
- -
- -

Usage

- -

Simply add this to a Text component through the Add Component menu as follows: -Add Component -> UI -> Effects -> Extensions -> Mono Spacing

- -
- -

Video Demo

- -

Click to play

- -

Mono Spacing Demo

- -
- -

See also

- -

Curved Text -Cylinder Text -Letter Spacing

- -
- -

Credits and Donation

- -

Credit herbst

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/non-drawing-graphic/index.html b/_site_test/ugui/controls/non-drawing-graphic/index.html deleted file mode 100644 index 6de4fc5..0000000 --- a/_site_test/ugui/controls/non-drawing-graphic/index.html +++ /dev/null @@ -1,841 +0,0 @@ - - - - - -Non-Drawing Graphic — Unity UI Extensions - - - -Non-Drawing Graphic | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Non-Drawing Graphic

- - -

Invisible raycast-blocking graphic — enables hit areas without any visual.

- - -
- - Utilities - - - - utilities - - raycast - - invisible - - hit-area - - clickable - -
-
-
- -
-

Non-Drawing Graphic

- -

A graphic component with zero draw calls, useful (when paired with a click script or the Selectable Extension) for invisible buttons or hit test blockers.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Non Drawing Graphic component allows you to add a graphic hit testable area with zero draw calls. The Raycast hit test can also be enabled or disabled (instead of using a CanvasGroup)

- -

- -

It is also very useful when paired with the Selectable Extension to add Click, Release and Hold capabilities.

- -

- -
- -

Properties

- -

The properties of the Non Drawing Graphic component are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
Raycast TargetShould this GO block raycasts or not. Changeable in code or editor.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Non Drawing Graphic component to a RectTransform using:

- -

“Add Component -> Layout -> Extensions -> NonDrawingGraphic”

- -

There is also a “Clickable” version, which includes the additional components to make the NonDrawing Graphic support events when clicked.

- -

*Note, in Source there are also two Editor menu’s to add an Empty GO with the component attached and on to add the Non Drawing Graphic with the additional Selectable Extension. -These will be added to the asset in the next update.

- -
- -

Video Demo

- -

Click to play

- -

Non Drawing Graphic Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Slipp Douglas Thompson / capnslipp -Submitted by PixelEnvision

- -
- - - -

Sourced from - https://gist.github.com/capnslipp/349c18283f2fea316369/

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/pagination-manager/index.html b/_site_test/ugui/controls/pagination-manager/index.html deleted file mode 100644 index e6c1f86..0000000 --- a/_site_test/ugui/controls/pagination-manager/index.html +++ /dev/null @@ -1,845 +0,0 @@ - - - - - -Pagination Manager — Unity UI Extensions - - - -Pagination Manager | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Pagination Manager

- - -

Connects a ScrollSnap or ContentScrollSnap to dot-style pagination indicators.

- - -
- - Utilities - - - - utilities - - pagination - - dots - - scrollsnap - - indicator - -
-
-
- -
-

Pagination Manager

- -

A management script to attach to the Horizontal or Vertical Scroll snaps to enable automatic click navigation.

- -

Pagination Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Pagination Manager enables automatic click navigation for the Pagination features of the Horizontal and Vertical Scroll Snap controls.

- -

- -

The control extends the base Unity ToggleGroup functionality by interlinking the Scroll Snap’s functionality with the ToggleEvents automatically.

- -
-

[!NOTE] -You still have to set up the child toggles manually and ensure that the number of toggles matches the number of Scroll Snap Children. May extend in the future to automatically generate children from Prefabs.

-
- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
Scroll SnapThe Horizontal or Vertical Scroll Snap control this Pagination is assocated with (overrides base Pagination capability)
- -

Inherited from ToggleGroup

- -
    -
  • Allow Switch Off (non-functional)
    • -
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the “Pagination Manager” component using:

- -

“Add Component -> UI -> Extensions -> Pagination Manager”

- -

However, you will need to manually assign the Scroll Snap reference.

- -
-

[!NOTE] -This replaces the inherent pagination feature of the Scroll Snap. -———

-
- -

Video Demo

- -

See the “Pagination Manager” example scene in the “HSS-VSS-ScrollSnap” Examples folder

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Credit Brogan King

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/issues/158/pagination-script

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/radial-layout/index.html b/_site_test/ugui/controls/radial-layout/index.html deleted file mode 100644 index ac83923..0000000 --- a/_site_test/ugui/controls/radial-layout/index.html +++ /dev/null @@ -1,843 +0,0 @@ - - - - - -Radial Layout — Unity UI Extensions - - - -Radial Layout | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Radial Layout

- - -

Arranges child elements in a circle or arc at configurable radius and angle.

- - -
- - Utilities - - - - utilities - - layout - - radial - - circular - - arc - -
-
-
- -
-

RadialLayout

- -

A radial layout system

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Similar to the Horizontal and Vertical Layout components provided by Unity, this offers to bend the layout in a radial fashion.

- -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Start AngleAngle where the first child is positioned.
Sweep AngleTotal angle covered by all children.
RadiusDistance from the center to each child.
Min Angle Between ItemsOptional minimum spacing enforced between children.
ClockwisePlace children clockwise when enabled; counterclockwise when disabled.
Control Child SizeForce children to size to the layout slot.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows:

- -

“Add Component -> Layout -> Extensions -> Radial Layout”

- -
- -

Video Demo

- -

tutorial video

- -
- -

See also

- -

CurvedLayout -FlowLayoutGroup

- -
- -

Credits and Donation

- -

Danny Goodayle

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/radial-slider/index.html b/_site_test/ugui/controls/radial-slider/index.html deleted file mode 100644 index 9dd002f..0000000 --- a/_site_test/ugui/controls/radial-slider/index.html +++ /dev/null @@ -1,867 +0,0 @@ - - - - - -Radial Slider — Unity UI Extensions - - - -Radial Slider | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Radial Slider

- - -

Circular arc slider with configurable start angle, range, and fill style.

- - -
- - Input - - - - input - - slider - - radial - - circular - - arc - -
-
-
- -
-

Radial Slider

- -

A radial slider which fills in a circular pattern

- -

Radial Slider Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Radial Slider is a graphical fill control utilizing Unity’s native Image fill capabilities.

- -

- -

It allows you to define a color range for the slider in a circular pattern beginning from the Left hand side (rotate the control for other starting points.) -It also has built in Lerping capability and can be used to:

- -
    -
  • Move value to Click
    • -
  • Move value to drag
    • -
  • Click to Lerp
    • -
- -
-

For this first release, the control is fixed to start at zero. may improve the control (if needed) to support a different start. If you need a different start for now, set the Value/Angle on Start/Awake and NOT in the editor.

-
- -
- -

Properties

- -

The properties of the Radial Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Start ColorThe Gradient color for the beginning of the radius.
End ColorThe Gradient color for the end of the radius.
Lerp To TargetShould the control jump to it’s intended position or Lerp. *Note, Dragging is only supported when this is off
Lerp CurveUse a standard Lerp or a gradient curve using the Unity native Curve control.
On Value Changed (event)The Event fired when the value of the slider is changed, outputs an Integer value
On Text Value Changed (event)The Event fired when the value of the slider is changed, outputs a Text value
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Radial Slider to the scene using:

- -

“GameObject -> UI -> Extensions -> Sliders -> Radial Slider”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> Sliders -> Radial Slider”

- -
- -

Video Demo

- -

Click to play

- -

Radial Slider Demo

- -
- -

See also

- -
    -
  • tbc
    • -
- -
- -

Credits and Donation

- -

Credit mgear

- -
- - - -

Sourced from - https://forum.unity3d.com/threads/radial-slider-circle-slider.326392/#post-3143582

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/range-slider/index.html b/_site_test/ugui/controls/range-slider/index.html deleted file mode 100644 index fbe691d..0000000 --- a/_site_test/ugui/controls/range-slider/index.html +++ /dev/null @@ -1,860 +0,0 @@ - - - - - -Range Slider — Unity UI Extensions - - - -Range Slider | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Range Slider

- - -

Dual-handle slider for selecting a minimum/maximum value range.

- - -
- - Input - - - - input - - slider - - range - - min - - max - - dual - -
-
-
- -
-

Range Slider

- -

A UI Slider control with a min (low) and max (high) value

- -

Range Slider Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A Ui control which allows you to have two slider values in a single control

- -

- -
- -

Properties

- -

The properties of the Range Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Low Handle RectThe RectTransform of the Low value handle graphic
High Handle RectThe RectTransform of the High value handle graphic
Fill RectRectTramsform of the fill for the slider (between min and max)
Min ValueThe minimum / lower value for the control
Max ValueThe maximum / higher value for the control
Whole NumbersShould the control use whole or precision numbers
On Value Changed (event)The Event fires when the range is changed
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

To enable the Range Slider component, simply add a new UI Object using:

- -

“GameObject -> UI -> Extensions -> Sliders -> Range Slider”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> Sliders -> Range Slider”

- -
- -

Video Demo

- -

Click to play

- -

Range Slider Demo

- -
- -

See also

- -

None

- -
- -

Credits and Donation

- -
    -
  • Ben MacKinnon (@Dover8)
    • -
- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/rect-transform-editor/index.html b/_site_test/ugui/controls/rect-transform-editor/index.html deleted file mode 100644 index c2e2337..0000000 --- a/_site_test/ugui/controls/rect-transform-editor/index.html +++ /dev/null @@ -1,816 +0,0 @@ - - - - - -Rect Transform Editor — Unity UI Extensions - - - -Rect Transform Editor | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Rect Transform Editor

- - -

Editor-only helper that adds extra transform manipulation handles in the Scene view.

- - -
- - Utilities - - - - utilities - - editor - - rect-transform - - inspector - - tools - -
-
-
- -
-

RectTransformEditor

- -

RectTransform helper utility.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Add small buttons to RectTransform to help with RectTransform operation.

- -

RectTransformEditor

- -
    -
  • C - Copy values to clipboard
    • -
  • P - Paste values to clipboard
    • -
  • New - create new parent RectTransform, with same anchor settings, and stretch selected RectTransform to it
    • -
  • Snap - stretch selected RectTransform to parent
    • -
- -
- -

Properties

- -

This component does not expose public properties beyond inherited behaviour.

- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

See #Overview

- -
- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

ChoMPHi

- -
- - - -

Sourced from

- -
- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/reorderable-list/index.html b/_site_test/ugui/controls/reorderable-list/index.html deleted file mode 100644 index 698fb06..0000000 --- a/_site_test/ugui/controls/reorderable-list/index.html +++ /dev/null @@ -1,913 +0,0 @@ - - - - - -Reorderable List — Unity UI Extensions - - - -Reorderable List | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Reorderable List

- - -

Drag-and-drop list and grid layout with visual reordering feedback.

- - -
- - Layout - - - - layout - - list - - drag - - drop - - reorder - -
-
-
- -
-

Re-orderable List

- -

A collection of List Grid control which allow for drag / drop reordering of the child items. Includes features to move / clone or freeze containers

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Re-orderable list is a very powerful control which includes several “out of the box” setups, including:

- -
    -
  • Vertical, Horizontal and Grid layouts
    • -
  • Vertical, Horizontal and Grid layouts using a ScrollRect
    • -
- -

- -

The control can be enabled in multiple flavors, featuring such capabilities as:

- -
    -
  • Allowing Dragging (allows containers that can be dropped in to but not removed)
    • -
  • Clone or Move child elements
    • -
  • Allowing dropping (containers that be dragged from but not dropped in to)
    • -
- -

As well as events for each state of the child content as they are interacted with.

- -
- -

Properties

- -

The properties of the Re-orderable List control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Content layoutThe container holding the child content (similar to the ScrollRect content property)
Draggable AreaDefaults to the Content Layout / parent rect transform, but can be overridden to identify an alternate supported dragging space
Is DraggableCan child object be dragged from this container
Clone Dragged ObjectIf true, a copy is made of the original content when dragging, else it moves the original child content item
Is DropableCan objects be dropped in to this container
On Element Dropped (event)The Event fired when a child item is released by a user
On Element Grabbed (event)The Event fired when a child item is being held by the user
On Element Removed (event)The Event fired when a child item is removed from a container
On Element Added (event)The Event fired when a child item is added from a container
- -

The properties of the individual Re-orderable List Items are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Is GrabbableCan the object be grabbed from a re-orderable list
Is TransferableCan the object be transferred from one re-orderable list to the next
Is Droppable In SpaceCan the item be dropped outside of a re-orderable list. *note, once dropped outside they cannot be picked up again.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Re-orderable List control to the scene using one of the pre-built options in the Editor “GameObject” menu:

- -
    -
  • “GameObject -> UI -> Extensions -> Re-orderable Lists -> Re-orderableList Vertical List”
    • -
  • “GameObject -> UI -> Extensions -> Re-orderable Lists -> Re-orderableList Horizontal List”
    • -
  • “GameObject -> UI -> Extensions -> Re-orderable Lists -> Re-orderableList Grid”
    • -
  • “GameObject -> UI -> Extensions -> Re-orderable Lists -> Re-orderableList Vertical ScrollRect”
    • -
  • “GameObject -> UI -> Extensions -> Re-orderable Lists -> Re-orderableList Horizontal ScrollRect”
    • -
  • “GameObject -> UI -> Extensions -> Re-orderable Lists -> Re-orderableList Grid ScrollRect”
    • -
- -

The base control is also available as a component menu:

- -

“Add Component -> UI -> Extensions -> Re-orderable list”

- -

Note: When using the Add Component menu, you will need to manually set up the control.

- -
- -

Video Demo

- -

Click to play

- -

View Intro Video

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Credit Ziboo

- -
- - - -

Sourced from - http://forum.unity3d.com/threads/free-reorderable-list.364600/

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/reset-selectable-highlight/index.html b/_site_test/ugui/controls/reset-selectable-highlight/index.html deleted file mode 100644 index cc72655..0000000 --- a/_site_test/ugui/controls/reset-selectable-highlight/index.html +++ /dev/null @@ -1,824 +0,0 @@ - - - - - -Reset Selectable Highlight — Unity UI Extensions - - - -Reset Selectable Highlight | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Reset Selectable Highlight

- - -

Clears stuck hover/selected highlight states on Selectable components.

- - -
- - Utilities - - - - utilities - - selectable - - highlight - - reset - - state - -
-
-
- -
-

ResetSelectableHighlight

- -

Handy Selectable script to un-highlight a selectable component in Unity (e.g. a Button) when the user moves away from it, EVEN IF the user has holding a button on it.

- -

Resolves the situation where Unity UI Components remain in a highlighted state even after the pointer has moved away (e.g. user holding a button, mouse, pointer down). -Now whenever the cursor leaves the component, it will force the UI component to revert to un-highlighted.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

An addon component that forces a Selectable Control (Button, InputField, etc) to reset its highlighted state whenever the mouse cursor leaves the control.

- -
-

By default in the Unity UI, if a pointer is held down when the cursor leaves the control, it remains in a highlighted state.

-
- -

Demo comparing the ResetSelectable against the default Unity UI Behaviour

- -

Button on the left has the ResetSelectableHighlight component, while the button on the right is a default Unity UI Button, Mouse is held down when moving off the control.

- -
- -

Properties

- -

This control has no configurable properties in the inspector.

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Use as follows:

- -

“Add Component -> UI -> Extensions -> ResetSelectableHighlight”

- -

This will add the ResetSelectableHighlight component to the selected GameObject.

- -
-

No config required.

-
- -
- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

SimonDarksideJ

- -
- - - -

N/A

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/scroll-conflict-manager/index.html b/_site_test/ugui/controls/scroll-conflict-manager/index.html deleted file mode 100644 index 2b56f9d..0000000 --- a/_site_test/ugui/controls/scroll-conflict-manager/index.html +++ /dev/null @@ -1,852 +0,0 @@ - - - - - -Scroll Conflict Manager — Unity UI Extensions - - - -Scroll Conflict Manager | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Scroll Conflict Manager

- - -

Resolves scroll direction conflicts when nested ScrollRects overlap.

- - -
- - Utilities - - - - utilities - - scroll - - conflict - - nested - - scrollrect - -
-
-
- -
-

Scroll Conflict Manager

- -

Resolves dragging issues with nested Scroll Rect’s

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Scroll Conflict Manager solves the dragging issue with child Scroll Rect’s. Natively, nested Scroll Rect’s will only allow scrolling in the direction of a child Scroll Rect. -This component solves this problem allowing free movement, locked to the initial direction of the drag.

- -

- -
- -

Properties

- -

The properties of the ScrollrectConflictManager control are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
Parent Scroll RectThe Rect Transform of the parent Scroll Rect
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetParentScrollRectScrollRectResets the parent scroll rect for the manager and re-initializes the dependencies
- -
- -

Usage

- -

Simply add the default Scroll Rect Conflict Manager component to an existing Scroll Rect using:

- -

“Add Component -> UI -> Extensions -> Scrollrect Conflict Manager”

- -

Then assign the parent Scroll Rect to the control.

- -
- -

Video Demo

- -

Click to play

- -

Scroll Rect Conflict Manager Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit srinivas sunil

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/21/develop_53/diff

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/scroll-rect-ex/index.html b/_site_test/ugui/controls/scroll-rect-ex/index.html deleted file mode 100644 index fc09748..0000000 --- a/_site_test/ugui/controls/scroll-rect-ex/index.html +++ /dev/null @@ -1,821 +0,0 @@ - - - - - -Scroll Rect Ex — Unity UI Extensions - - - -Scroll Rect Ex | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Scroll Rect Ex

- - -

Enhanced ScrollRect with momentum, deceleration tuning, and edge effects.

- - -
- - Layout - - - - layout - - scroll - - scrollrect - - momentum - - enhanced - -
-
-
- -
-

Scroll Rect Ex

- -

Improved Scroll Rect control, enables support for Nested Scroll Rects

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Scroll Rect Ex control is a replacement version of the standard Scroll Rect. -It’s purpose is to solve the common issue when Scroll Rect’s are nested which can prevent drag events from properly propagating from a child to a parent Scroll Rect.

- -

- -
- -

Properties

- -

Inherited from ScrollRect

- -
    -
  • All ScrollRect Properties
    • -
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply replace the Scroll Rect script on a GameObject with the Scroll Rect Ex version using:

- -

“Add Component -> UI -> Extensions -> ScrollRectEx”

- -
- -

Video Demo

- -

Click to play

- -

Scroll Rect Ex Demo

- -
- -

See also

- -
    -
  • Unity (built-in) Scroll Rect Component
    • -
  • Unity (built-in) Scroll View control
    • -
- -
- -

Credits and Donation

- -

Credit CaptainSchnittchen

- -
- - - -

Sourced from - http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/page-2#post-2011648

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/scroll-rect-linker/index.html b/_site_test/ugui/controls/scroll-rect-linker/index.html deleted file mode 100644 index 0bde1a2..0000000 --- a/_site_test/ugui/controls/scroll-rect-linker/index.html +++ /dev/null @@ -1,839 +0,0 @@ - - - - - -Scroll Rect Linker — Unity UI Extensions - - - -Scroll Rect Linker | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Scroll Rect Linker

- - -

Synchronises multiple ScrollRect components so they scroll in tandem.

- - -
- - Layout - - - - layout - - scroll - - sync - - linked - - scrollrect - -
-
-
- -
-

ScrollRectLinker

- -

ScrollRect Linker script, enable multiple Scroll Rects to move together

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Scroll Rect Linker script allows you to control another Scroll Rect’s position from another Scroll Rect.

- -

- -
- -

Properties

- -

The properties of the Scroll Rect Linker control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
ClampClamp the linked scroll values
Controlling Scroll RectThe parent Scroll Rect to retrieve scrolling changes from.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Scroll Rect Linker component to a Scroll Rect using:

- -

“Add Component -> UI -> Extensions -> ScrollRectLinker”

- -

Then drag the parent Scroll Rect to the appropriate property.

- -
- -

Video Demo

- -

Click to play

- -

Scroll Rect Linker

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Martin Sharkbomb

- -
- - - -

Sourced from - http://www.sharkbombs.com/2015/08/26/unity-ui-scrollrect-tools/

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/scroll-rect-tweener/index.html b/_site_test/ugui/controls/scroll-rect-tweener/index.html deleted file mode 100644 index da23b19..0000000 --- a/_site_test/ugui/controls/scroll-rect-tweener/index.html +++ /dev/null @@ -1,881 +0,0 @@ - - - - - -Scroll Rect Tweener — Unity UI Extensions - - - -Scroll Rect Tweener | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Scroll Rect Tweener

- - -

Programmatically scrolls a ScrollRect to a target position with easing.

- - -
- - Layout - - - - layout - - scroll - - tween - - animate - - scrollrect - -
-
-
- -
-

Scroll Rect Tweener

- -

Tweening solution for ScrollRects, adds smoothing automatically

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Scroll Rect Tweener is a simple programmatic component that allows you tween from one position on a Scroll Rect to another with a selectable smoothing value

- -

- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Move SpeedThe default speed that the control moves when Tweening
Disable Drag While TweeningStops the user from being able to disrupt the tweening motion via touch or pointer
- -

The control is mainly used programmatically with the following functions -Function | Arguments | Description

-
    -
  • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ScrollHorizontalfloat (X Value)X Coordinate to tween to horizontally
    ScrollHorizontalfloat (X Value), float (duration)X Coordinate to tween to horizontally overriding the default Tween duration
    ScrollVerticalfloat (Y Value)Y Coordinate to tween to vertically
    ScrollVerticalfloat (Y Value), float (duration)Y Coordinate to tween to vertically overriding the default Tween duration
    ScrollVector2 (2D position)Tween to the provided X / Y coordinates on the Scroll Rect
    ScrollVector2 (2D position), float (duration)Tween to the provided X / Y coordinates on the Scroll Rect overriding the default Tween duration
    -
    • -
- -

Note -Coordinates are quad based with 0,0 being the bottom left and 1,1 being the top right of the Scroll Rect Area.

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Scroll Rect Tweener component to a Scroll Rect using:

- -

“Add Component -> UI -> Extensions -> ScrollRectTweener”

- -
- -

Video Demo

- -

Click to play

- -

Scroll Rect Tweener Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Martin Sharkbomb

- -
- - - -

Sourced from - http://www.sharkbombs.com/2015/08/26/unity-ui-scrollrect-tools/

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/scroll-snap/index.html b/_site_test/ugui/controls/scroll-snap/index.html deleted file mode 100644 index 5fd3fd9..0000000 --- a/_site_test/ugui/controls/scroll-snap/index.html +++ /dev/null @@ -1,916 +0,0 @@ - - - - - -Scroll Snap — Unity UI Extensions - - - -Scroll Snap | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Scroll Snap

- - -

Perspective scroll snap with 3D carousel-style page transitions.

- - -
- - Layout - - - - layout - - scroll - - snap - - perspective - - carousel - - 3d - -
-
-
- -
-

ScrollSnap

- -

An alternate scroll snap control supporting both Horizontal and Vertical layouts in one control

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A scroll snap style control which works with both a horizontal and vertical layout, enabling a paged view of child elements. -Pages can be moved by keys, swipes or via the use of buttons.

- -

*Note, should not be used in conjunction with scroll bars as this throws off the view.

- -
- -

Properties

- -

The properties of the Horizontal Scroll Snap control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Next ButtonOptional button to move the ScrollSnap forward.
Prev ButtonOptional button to move the ScrollSnap backward.
Items Visible at onceHow many items should be visible at the same time.
Auto Layout ItemsShould the ScrollSnap contents be automatically aligned, or left untouched.
Link Scrollbar StepsUse the base ScrollRect steps configuration for the ScrollSnap.
Link Scrollbar Scroll SensitivityUse the base ScrollRect scroll sensitivity configuration for the ScrollSnap.
Use Fast SwipeShould “Fast Swipe” be used to progress pages.
Fast Swipe ThresholdThe speed of the ScrollSnap is moving before a “Fast Swipe” motion is detected.
DirectionThe direction the ScrollSnap flows in, Horizontal or Vertical.
On Page Change (event)The Event fired when the current page changes, either via swipe, mouse, Next/Prev Buttons
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
ChangePageIndex (int)Move the ScrollSNap to a specific page (0 indexed)
CurrentPageNoneReturns the Current Page selected for the ScrollSnap
NextScreenNoneForces the control to move to the “Next” page
PreviousScreenNoneForces the control to move to the “Previous” page
ResetPageNoneResets the currently selected page to the starting page, usually page 0
SetLerpvalue (bool)Enable or disable smooth Lerp movement
- -
- -

Usage

- -

Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows:

- -

“Add Component -> UI -> Extensions -> Scroll Snap”

- -

Or alternatively, add one of the default layouts for the control using:

- -
    -
  • “GameObject -> UI -> Extensions -> Fixed Item Scroll -> Snap Vertical Single Item”
    • -
  • “GameObject -> UI -> Extensions -> Fixed Item Scroll -> Snap Vertical Multiple Items”
    • -
  • “GameObject -> UI -> Extensions -> Fixed Item Scroll -> Snap Horizontal Single Item”
    • -
  • “GameObject -> UI -> Extensions -> Fixed Item Scroll -> Snap Horizontal Multiple Items”
    • -
- -
- -

Video Demo

- -

tutorial video

- -
- -

See also

- - - -
- -

Credits and Donation

- -

BinaryX, xesenix

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/segment/index.html b/_site_test/ugui/controls/segment/index.html deleted file mode 100644 index 68dd4bc..0000000 --- a/_site_test/ugui/controls/segment/index.html +++ /dev/null @@ -1,942 +0,0 @@ - - - - - -Segment — Unity UI Extensions - - - -Segment | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Segment

- - -

Individual button segment used as a child within a SegmentedControl.

- - -
- - Input - - - - input - - segment - - button - - selectable - -
-
-
- -
-

Segment

- -

An individual segment component that acts as a button within a SegmentedControl group. Handles pointer events and selection state for segmented controls.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Segment component is a child element of a SegmentedControl that represents a single selectable option within the control group. Each segment acts as a button and manages its own selection state, visual transitions, and interaction with the parent SegmentedControl.

- -

Segments handle various input methods including pointer clicks, keyboard navigation, and gamepad input. They automatically update their visual appearance based on selection state and support color tint, sprite swap, and animation transitions.

- -
- -

Properties

- -

The properties of the Segment control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
InteractableWhether this segment can be selected or interacted with.
TransitionHow the segment transitions between selected and unselected states (None, ColorTint, SpriteSwap, or Animation).
Target GraphicThe graphic element that will be visually transitioned when the segment is selected.
Normal ColorColor when the segment is not selected.
Highlighted ColorColor when the segment is highlighted (hovered).
Pressed ColorColor when the segment is selected/pressed.
Disabled ColorColor when the segment is disabled.
Color MultiplierMultiplier applied to all colors.
Fade DurationHow long the color transition takes.
Sprite StateSprites to use for normal, highlighted, pressed, and disabled states.
Animation TriggersAnimation parameters for different states.
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
OnPointerClickPointerEventDataHandles left mouse click to select this segment.
OnPointerEnterPointerEventDataHandles mouse entering the segment area.
OnPointerExitPointerEventDataHandles mouse leaving the segment area.
OnPointerDownPointerEventDataHandles mouse button press.
OnPointerUpPointerEventDataHandles mouse button release.
OnSelectBaseEventDataHandles UI selection via keyboard/gamepad.
OnDeselectBaseEventDataHandles UI deselection via keyboard/gamepad.
OnSubmitBaseEventDataHandles submission (Enter key/gamepad button) to select this segment.
- -
- -

Usage

- -

Segment components are automatically created as children of a SegmentedControl and should not be added manually to the scene. To use segmented controls in your UI:

- -

Add the SegmentedControl component to a GameObject: -“Add Component -> UI -> Extensions -> Segmented Control/SegmentedControl”

- -

Or alternatively, use the prefab: -“GameObject -> UI -> Extensions -> Segmented Control”

- -

This will create the SegmentedControl with initial segment children automatically.

- -

To access segments in code:

- -
public SegmentedControl segmentedControl;
-
-void Start()
-{
-    segmentedControl = GetComponent<SegmentedControl>();
-    // Access individual segments through the SegmentedControl
-    Segment firstSegment = segmentedControl.segments[0];
-    
-    // Listen to selection changes
-    segmentedControl.onValueChanged.AddListener(OnSegmentSelected);
-}
-
-void OnSegmentSelected(int segmentIndex)
-{
-    Debug.Log("Segment " + segmentIndex + " selected");
-}
-
- -
- -

Video Demo

- -

Coming soon…

- -
- -

See also

- - - -
- -

Credits and Donation

- -

David Gileadi

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/segmented-control/index.html b/_site_test/ugui/controls/segmented-control/index.html deleted file mode 100644 index 00bfec4..0000000 --- a/_site_test/ugui/controls/segmented-control/index.html +++ /dev/null @@ -1,856 +0,0 @@ - - - - - -Segmented Control — Unity UI Extensions - - - -Segmented Control | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Segmented Control

- - -

iOS-style segmented control for choosing one option from a small set.

- - -
- - Input - - - - input - - segmented - - toggle - - select - - ios - -
-
-
- -
-

Segmented Control

- -

A segmented control, like those found on iOS. It’s two or more buttons side by side, where only one of them is selectable at a time

- -

Segmented Control Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Segmented Control offers a button alignment capability along with specific highlights that emulates the iOS version of a segmented button. The control presented itself as a single image with multiple options, where only one can be selected.

- -

- -

It allows you to set whether buttons can be turned on/off, or only one selected at a time, as well as setting the default select and the colour the button is highlighted with when clicked..

- -

Like the Stepper Control, you can also specify a Separator image attached to a GO to place between the buttons.

- -
- -

Properties

- -

The properties of the Segmented Control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
SeparatorA graphic based UI GO, which will serve as the image that separates each button. *Note, you should disable the GO used for the separator or use a prefab to avoid dirtying the scene.
Allow Switching OffWhen set, buttons can be clicked but not unselected, only selecting a new option will clear the selection
Selected Segment IndexZero based index which chooses the selected default. This defaults to -1 which denotes no option selected
Selected ColorThe highlighted color of the button when an option is selected
On Value Changed (event)The Event fired when the selection within the control changes, passing the index of the selected button
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Segmented Control to the scene using:

- -

“GameObject -> UI -> Extensions -> Controls -> Segmented Control”

- -

It is also available as a Game Component menu:

- -

“Add Component -> UI -> Extensions -> Segmented Control -> Segmented Control”

- -

However, you will need to manually add buttons as children to the GameObject for the options.

- -
- -

Video Demo

- -

Click to play

- -

Segmented Control Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit David Gileadi

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/12/segmented-control/diff

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/selectable-scaler/index.html b/_site_test/ugui/controls/selectable-scaler/index.html deleted file mode 100644 index d5db525..0000000 --- a/_site_test/ugui/controls/selectable-scaler/index.html +++ /dev/null @@ -1,840 +0,0 @@ - - - - - -Selectable Scaler — Unity UI Extensions - - - -Selectable Scaler | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Selectable Scaler

- - -

Scales a Selectable component up/down on hover and press events.

- - -
- - Utilities - - - - utilities - - selectable - - scale - - hover - - press - - animation - -
-
-
- -
-

Selectable Scalar

- -

A simple tween scaler to affect Rect Transform scale on other controls.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A simple Tween enhancement that scales another RectTransform according to a preset curve.

- -

- -
- -

Properties

- -

The properties of the Selectable Scalar control are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Anim CurveThe curve that will be used to scale the Rect Transform in and out.
SpeedThe speed at which the animation will take effect.
TargetThe target for the animation.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Like with other Layout controls, simply add this control to any control that has a Selectable component (e.g. Button, NonGraphicSelectable) through the Add Component menu as follows:

- -

“Add Component -> UI -> Extensions -> Selectable Scalar”

- -
- -

Video Demo

- -

Click to play

- -

Selectable Scalar Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Tomek S

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/selection-box/index.html b/_site_test/ugui/controls/selection-box/index.html deleted file mode 100644 index 2692c76..0000000 --- a/_site_test/ugui/controls/selection-box/index.html +++ /dev/null @@ -1,845 +0,0 @@ - - - - - -Selection Box — Unity UI Extensions - - - -Selection Box | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Selection Box

- - -

Drag to draw a rubber-band selection rectangle over multiple UI elements.

- - -
- - Input - - - - input - - selection - - drag - - marquee - - multi-select - -
-
-
- -
-

SelectionBox

- -

An RTS style selection box control

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A selection box control to enable selecting 2D and 3D content within a Canvas / selectable area

- -

Selection Box Inspector

- -
- -

Properties

- -

The properties of the Selectable Scalar control are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
ColorThe color to apply to the selectable.
ArtThe texture to draw as the background to the selectable area.
Selection MaskThe Rect Transform for the area that allows items to be selectable, restricts object being selected.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add the Selection Box to the scene using:

- -

“GameObject -> UI -> Extensions -> Selection Box”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> Selection Box”

- -

Once setup, define a separate Rect Transform to specify the area of the screen that should be selectable. Any objects contained within the Selection mask will be selectable.

- -

Additionally, you can customize the graphic used for the “Selection Box” that is drawn using the Art property.

- -
- -

Video Demo

- -

Selection Box Demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -
    -
  • Korindian
    • -
  • BenZed
    • -
- -
- - - -

N/A

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/soft-alpha-mask/index.html b/_site_test/ugui/controls/soft-alpha-mask/index.html deleted file mode 100644 index 1910cc6..0000000 --- a/_site_test/ugui/controls/soft-alpha-mask/index.html +++ /dev/null @@ -1,846 +0,0 @@ - - - - - -Soft Alpha Mask — Unity UI Extensions - - - -Soft Alpha Mask | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Soft Alpha Mask

- - -

Uses a greyscale mask texture to softly clip UI content at the edges.

- - -
- - Effects - - - - effects - - mask - - alpha - - clip - - soft - -
-
-
- -
-

SoftAlphaMask

- -

Shader based mask able to clip images using an alpha mask

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Where most Alpha Mask effects built into the Unity UI system work on hard transparencies, the Soft Alpha Mask is able to work with alpha mask gradients and includes animation features to enable a smooth transition.

- -

Soft Alpha Mask Inspector

- -
- -

Properties

- -

The properties of the Selectable Scalar control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Mask AreaThe area that is to be used as the container.
Alpha MaskTexture to be used to do the soft alpha.
Cut OffAt what point to apply the alpha min range 0-1.
Hard BlendImplement a hard blend based on the Cutoff.
Flip Alpha MaskFlip the masks alpha value.
Don’t clip Mask Scaling RectIf a different Mask Scaling Rect is given, and this value is true, the area around the mask will not be clipped.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the “Soft Mask Script” component to an existing UI object and apply a “Mask” texture. Alter the “Cut Off” value to scale out the masking effect.

- -

There is also a Text version of the Soft Alpha Mask to work with Text Objects.

- -
- -

Video Demo

- -

Soft Alpha Mask Demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Charles Humphrey (@NemoKrad)

- -
- - - -

https://www.youtube.com/watch?v=JVds9P9J_hU

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/stepper/index.html b/_site_test/ugui/controls/stepper/index.html deleted file mode 100644 index 3c370f4..0000000 --- a/_site_test/ugui/controls/stepper/index.html +++ /dev/null @@ -1,869 +0,0 @@ - - - - - -Stepper — Unity UI Extensions - - - -Stepper | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Stepper

- - -

+/- increment buttons for numeric input with configurable step size.

- - -
- - Input - - - - input - - stepper - - increment - - decrement - - numeric - -
-
-
- -
-

Stepper

- -

A stepper control, like those found in iOS. It’s basically two buttons side by side, and can step its numeric value up and down.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Stepper Control creates an increment / decrement style control with + and - buttons which alter the controls value.

- -

- -

It exposes a value property where you can also set a min and maximum number for that value when changed through the control. Additionally you can also specify the “step” which denotes how much the control increments / decrements with each press, as well as an option to loop the value around from top to bottom, etc.

- -

Like the Segmented Control, you can also specify a Separator image attached to a GO to place between the buttons.

- -
-

[!NOTE] -You can only have two child buttons attached to the Stepper, one each for the + and - actions. Adding more will generate an error.

-
- -
- -

Properties

- -

The properties of the Stepper Control control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
ValueThe current value of the Stepper control
MinimumThe minimum value for the Stepper
MaximumThe maximum value for the Stepper
StepThe number to increment / decrement the control with when the buttons are clicked
WrapDoes the value of the stepper wrap around when the max/min is reached
SeparatorA graphic based UI GO, which will serve as the image that separates each button. *Note, you should disable the GO used for the separator or use a prefab to avoid dirtying the scene.
On Value Changed (event)The Event fired when the value of the control is changed
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Stepper to the scene using:

- -

“GameObject -> UI -> Extensions -> Sliders -> Stepper”

- -

It is also available as a Game Component menu:

- -

“Add Component -> UI -> Extensions -> Sliders -> Stepper”

- -

However, you will need to manually add the two child selectable controls (e.g. A UI Button or other control implementing the “Selectable” interface).

- -
- -

Video Demo

- -

Click to play

- -

Stepper Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit David Gileadi

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/11/segmented-control/diff

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/tab-navigation/index.html b/_site_test/ugui/controls/tab-navigation/index.html deleted file mode 100644 index 7447e09..0000000 --- a/_site_test/ugui/controls/tab-navigation/index.html +++ /dev/null @@ -1,846 +0,0 @@ - - - - - -Tab Navigation — Unity UI Extensions - - - -Tab Navigation | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Tab Navigation

- - -

Keyboard-navigable tab panel system with animated content switching.

- - -
- - Navigation - - - - navigation - - tabs - - keyboard - - panel - - switch - -
-
-
- -
-

Tab Navigation

- -

An example Tab navigation script, updated to add manual navigation

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Tab navigation helper is an extension to the Unity Event System to translate Tab’s to default Up/Down navigation of the UI system

- -

- -

You can either use Unity’s default UI Navigation or you can override it by setting your own tab order in the “Navigation Path” property.

- -

The control has also been extended to allow for circular navigation, so tabs will continue past the last option.

- -
- -

Properties

- -

The properties of the Tab Navigation Helper control are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Navigation PathThe manual order for the Tab Navigation script
Navigation ModeUse Unity’s automatic control order or override it with a manual order with Navigation Path
Circular NavigationDoes the tab order from from start to finish, or loop round once the end is reached
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Tab Navigation Helper component to the EventSystem in the scene using:

- -

“Add Component -> Event -> Extensions -> Tab Navigation Helper”

- -
-

Do not add it to an existing control, either add it to the Event System added by Unity, or create an Empty GO and add it there (The Event System will be automatically added)

-
- -
- -

Video Demo

- -

Click to play

- -

Tab Navigation Demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -
    -
  • Melang
    • -
- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/table-layout-group/index.html b/_site_test/ugui/controls/table-layout-group/index.html deleted file mode 100644 index 1da6120..0000000 --- a/_site_test/ugui/controls/table-layout-group/index.html +++ /dev/null @@ -1,867 +0,0 @@ - - - - - -Table Layout Group — Unity UI Extensions - - - -Table Layout Group | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Table Layout Group

- - -

CSS-style table layout that arranges UI elements into rows and columns.

- - -
- - Layout - - - - layout - - table - - grid - - rows - - columns - -
-
-
- -
-

TableLayoutGroup

- -

A table layout system supporting customizable column and row sizes / layout

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The table layout group allows the layout of child items in to the style of a table. You can specify how many columns should be supported as well as the size of columns and rows. -Additionally, you can specify padding between the columns and rows.

- -

- -

- -

If you wish you can override the fixed row height to allow child elements to set their height.

- -

This control differs to the built in Unity Grid layout, which can only arrange items dynamically in a grid based on the size of the containing RectTransform.

- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Start CornerThe corner to start adding children from
Column WidthsAn array of floats to denote the width of each column. Content sized to fit
Minimum Row HeightThe minimum height of child items in a row
Flexible Row HeightAre flexible row heights allowed, or should they be fixed to the minimum
Column SpacingThe amount of space between each column
Row SpacingThe amount of space between each row
- -

Inherited from built-in layoutGroup

- -
    -
  • Padding (sets the padding inside the RectTransform before drawing children)
    • -
  • Child Alignment
    • -
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Create an Empty GO on a Canvas and add the Table Layout Group component using:

- -

“Add Component -> Layout -> Extensions -> Table Layout Group”

- -
- -

Video Demo

- -

Click to play

- -

Table Layout Group Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit RahulOfTheRamanEffect

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/36

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/textpic/index.html b/_site_test/ugui/controls/textpic/index.html deleted file mode 100644 index f57c5e5..0000000 --- a/_site_test/ugui/controls/textpic/index.html +++ /dev/null @@ -1,899 +0,0 @@ - - - - - -TextPic — Unity UI Extensions - - - -TextPic | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

TextPic

- - -

Embeds inline sprite images inside uGUI Text using custom tags.

- - -
- - Effects - - - - effects - - text - - sprite - - inline - - emoji - - rich-text - -
-
-
- -
-

TextPic

- -

Inline images and hyperlinks for text

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Provides a html interpreter to add inline images in Text. HTML code is similar to that used for Unity’s native Rich Text HTML

- -

- -
- -

Properties

- -

The properties of the TextPic control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription 
Image OffsetGlobal Image offset 
Image Scaling FactorGlobal scaling factor for all images (they default to match the font size) 
Hyperlink ColorOverride the default color for Hyperlinks 
Icon ListList of icon replacements and their lookup text 
 NameThe name of the image, used as the replacement string in the text
 SpriteThe sprite to replace text with in the text
 Offsetindividual offset (as opposed to the Global Image Offset) for this sprite
 Scaleindividual scale (as opposed to the Global Image Scale Factor) for this sprite
- -

Inherited from Text

- -
    -
  • Character
    • -
  • Paragraph
    • -
  • Color / Material and Raycast Target
    • -
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add TextPic component instead of the standard Text control and decorate with Rich Text HTML, for example: -Click Me

- -

It can also place Images within blocks of Text by adding Icons to the Icon List with a Name, then instances of that name will be replaced with that Image (careful what name you use :D)

- -

Simply add a new TextPic to the scene using:

- -

“GameObject -> UI -> Extensions -> Controls -> TextPic”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> TextPic”

- -

Note: You have to remove any existing Text components first, else Unity will warn you.

- -

Additionally, if you want configure hyperlink highlighting colours, simply add a “Selectable” component to the same GameObject as the TextPic control and configure it.

- -
-

A Note on Buttons -If the TextPic is added as a child of a Button you cannot use the hyperlinks feature of this control, it is purely decorative allowing the text and image replacement. The TextPic control will add a CanvasGroup control to the TextPic to enable click-through to the button.

-
- -
- -

Video Demo

- -

Click to play

- -

TextPicDemo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -
    -
  • drobina
    • -
  • w34edrtfg
    • -
  • playemgames
    • -
- -
- - - - - -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/tile-size-fitter/index.html b/_site_test/ugui/controls/tile-size-fitter/index.html deleted file mode 100644 index 93e1456..0000000 --- a/_site_test/ugui/controls/tile-size-fitter/index.html +++ /dev/null @@ -1,838 +0,0 @@ - - - - - -Tile Size Fitter — Unity UI Extensions - - - -Tile Size Fitter | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Tile Size Fitter

- - -

Constrains child tiles to a fixed aspect ratio within a grid layout.

- - -
- - Layout - - - - layout - - tile - - aspect-ratio - - grid - - fitter - -
-
-
- -
-

TileSizeFitter

- -
-

[!IMPORTANT] -⚠️ This control has been marked as obsolete for Unity 6 and is no longer maintained. It remains documented for legacy reference.

-
- -

A fitter layout that will shrink / expand content by tiles

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Tile Size Fitter will automatically rescale an image within a RectTransform according to the defined Size and border settings.

- -

- -
- -

Properties

- -

The properties of the TileSizeFitter control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
BorderThe border spacing around the image
Tile SizeThe boundaries at which the selected image will resize
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the “TileSizeFitter” component to an existing Image component in the scene using:

- -

“Add Component -> Layout -> Extensions -> Tile Size Fitter”

- -
- -

Video Demo

- -

“Link to demo video or animated Gifs” -TileSizeFitter demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Ges

- -
- - - - - -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/tooltip/index.html b/_site_test/ugui/controls/tooltip/index.html deleted file mode 100644 index 1d25d9c..0000000 --- a/_site_test/ugui/controls/tooltip/index.html +++ /dev/null @@ -1,901 +0,0 @@ - - - - - -ToolTip — Unity UI Extensions - - - -ToolTip | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

ToolTip

- - -

Follows-cursor tooltip that displays rich text on pointer enter/exit.

- - -
- - Utilities - - - - utilities - - tooltip - - hover - - popup - - cursor - -
-
-
- -
-

ToolTip

- -

An basic Tooltip implementation

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A tooltip implementation which allows the user to hover over a RectTransform to activate it.

- -

- -
- -

Properties

- -

The properties of the Tooltip control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
CanvasThe canvas used by the tooltip as positioning and scaling reference. Should usually be the root Canvas of the hierarchy this component is in.
TooltipTriggersCanForceCanvasUpdateSets if tooltip triggers will run ForceUpdateCanvases and refresh the tooltip’s layout group, (if any) when hovered, in order to prevent momentousness misplacement sometimes caused by ContentSizeFitters.
Y ShiftOffset positioning of the Tooltip on the Y axis
X ShiftOffset positioning of the Tooltip on the X axis
InstanceProgrammatically find the single instance of the ToolTip definition in the scene
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetTooltipText (string)Activates the Tooltip in its current location
SetTooltipText (string), Position (Vector3), RefreshCanvasBeforeGetSize (bool)Activates the Tooltip at the specified location. Optionally, force a canvas refresh before presenting.
HideTooltipN/AHides the Tooltip
RefreshTooltipSizeN/AForces a Canvas refresh to update the Tooltips content size fitter, if applied.
ContextualTooltipUpdateRefreshCanvasBeforeGetSize (bool)Runs the appropriate tooltip placement method, according to the parent canvas’s render mode.
OnScreenSpaceCameraRefreshCanvasBeforeGetSize (bool)Forces drawing the tooltip based on a ScreenSpace Canvas
OnScreenSpaceOverlayRefreshCanvasBeforeGetSize (bool)Forces drawing the tooltip based on a ScreenSpace Overlay Canvas
- -
- -

Usage

- -

Add the ToolTip control to a GameObject using:

- -

“Add Component -> UI -> Extensions -> Tooltip -> Tooltip”

- -

Or alternatively, add it via the GameObject menu:

- -

“GameObject -> UI -> Extensions -> Tooltip”

- -

A Text component should also be added to a Child GameObject, for displaying the Tooltip Text. -Once setup, design the look and feel of the tooltip as required, the tooltip will appear in the desired position once called.

- -
- -

Video Demo

- -

N/A

- -
- -

See also

- - - -
- -

Credits and Donation

- -
    -
  • drHogan
    • -
- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ugui-tools/index.html b/_site_test/ugui/controls/ugui-tools/index.html deleted file mode 100644 index 2ae96ff..0000000 --- a/_site_test/ugui/controls/ugui-tools/index.html +++ /dev/null @@ -1,859 +0,0 @@ - - - - - -uGUI Tools — Unity UI Extensions - - - -uGUI Tools | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

uGUI Tools

- - -

Editor menu shortcuts for common uGUI operations — align, distribute, reset.

- - -
- - Navigation - - - - navigation - - editor - - tools - - utilities - - shortcuts - -
-
-
- -
-

uGUITools

- -

A collection of functions to assist with managing anchors on RectTransforms

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A useful set of tools to manipulate RectTransforms to its Anchors, or Adjusts the Anchors to the selected RectTransform.

- -

- -
- -

Properties

- -

These are editor menu utilities and expose no inspector properties.

- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
Anchors to CornersSelected RectTransformMoves anchors to the corners of the rect.
Corners to AnchorsSelected RectTransformMoves corners of the rect to the anchor positions.
Mirror Horizontally around AnchorsSelected RectTransformFlips anchors horizontally on the rect.
Mirror Horizontally around Parent CenterSelected RectTransformFlips anchors horizontally relative to parent center.
Mirror Vertically around AnchorsSelected RectTransformFlips anchors vertically on the rect.
Mirror Vertically around Parent CenterSelected RectTransformFlips anchors vertically relative to parent center.
- -
- -

Usage

- -

Simply select a RectTransform in the Scene or Hierarchy views and use the menu options to affect the RectTransforms anchors:

- -
    -
  • Anchors to Corners - Moves the Anchors to the corners of the RectTransform
    • -
  • Corners to Anchors - Moves the corners of the RectTransform to the Anchor positions
    • -
  • Mirror Horizontally around Anchors - Flips the Anchors horizontally on this RectTransform (reverses content)
    • -
  • Mirror Horizontally around Parent Center - Flips the Anchors horizontally based on the parent RectTransform
    • -
  • Mirror Vertically around Anchors - Flips the Anchors vertically on this RectTransform (reverses content)
    • -
  • Mirror Vertically around Parent Center - Flips the Anchors vertically based on the parent RectTransform
    • -
- -
- -

Video Demo

- -

N/A

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -
    -
  • Senshi
    • -
- -
- - - -

“List of links for the control, e.g. Source, other info”

- -

Sourced From

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-circle-segmented/index.html b/_site_test/ugui/controls/ui-circle-segmented/index.html deleted file mode 100644 index 2f2a098..0000000 --- a/_site_test/ugui/controls/ui-circle-segmented/index.html +++ /dev/null @@ -1,951 +0,0 @@ - - - - - -UI Circle Segmented — Unity UI Extensions - - - -UI Circle Segmented | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Circle Segmented

- - -

Segmented ring/pie chart renderer with configurable slice count and gaps.

- - -
- - Primitives - - - - primitives - - circle - - pie - - ring - - segmented - - chart - -
-
-
- -
-

UI Circle Segmented

- -

Custom graphic for uGUI, circle split into segments.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Custom graphic for uGUI, circle split into segments.

- -

Features

- -
    -
  • fill floating
    • -
  • fill per-sprite-segment
    • -
  • fill per-vertex
    • -
  • fill Handle (selected segment only)
    • -
  • fill Handle Inverted (all except selected segment)
    • -
  • skip offset
    • -
  • intersecting (overlapping) segments
    • -
  • sprite round
    • -
  • rotate offset
    • -
  • round gradient
    • -
  • GC-free
    • -
  • unified width border / outline mode
    • -
- -

UICircleSegmented Inspector -UICircleSegmented Inspector

- -
- -

Properties

- -

UICircleSegmented Inspector

- -

The properties of the UI Circle Segmented control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Override SpriteSprite Texture to apply.
ThicknessThe thickness of the line.
Fill AmountFill / Progress of the line.
Invert FillIf true, the fill approach is inverted/reversed..
Fill PatternDefault, Handle, Handle Inverted. Method for how the fill is processed.
Fill DeepFloating, Per Vertex, Per Segment. How the fill is processed.
Global Degree OffsetRotation offset for the control.
Max DegreeMaximum fill degrees.
Segments CountHow many segments to include in the circle.
Segments Per Sprite CountALters how many segments are included with each section.
Segments Degree OffsetOffsets the rotation of each segment.
BorderBorder thickness per segment.
GradientGradient to apply to the control.
Diagonal GradientGradient to apply per segment.
Gradient Degree OffsetRotational effect for the gradient.
On Cull State Changed (event)Event fired when the element changes.
- -

Inherited from MaskableGraphic

- -
    -
  • Material
    • -
  • Color
    • -
  • Raycast Target
    • -
  • Maskable
    • -
- -

The properties of the UI Circle Segmented Curve are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
CurveCurve to apply to the segments of a target UI Circle Segmented control.
CircleThe UI Circle Segmented control to target.
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

TBC

- -
- -

Video Demo

- -

demo video

- - - - - - - - -
HandleHandle Inverted
- -

Handle

- -

Border Mode

- -

Border

- -
- -

See also

- -

Some tips are here: Accordion Type Layout including how to collapse nested child elements so they no longer appear.

- -
- -

Credits and Donation

- -

ChoMPHi

- -
- - - -

Sourced from

- -
- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-flippable/index.html b/_site_test/ugui/controls/ui-flippable/index.html deleted file mode 100644 index d9aaf62..0000000 --- a/_site_test/ugui/controls/ui-flippable/index.html +++ /dev/null @@ -1,847 +0,0 @@ - - - - - -UI Flippable — Unity UI Extensions - - - -UI Flippable | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Flippable

- - -

Mirrors any graphic component horizontally or vertically at runtime.

- - -
- - Effects - - - - effects - - flip - - mirror - - graphic - - transform - -
-
-
- -
-

UIFlippable

- -

A Graphic altering tool which can flip a graphic either Horizontally / Vertically or both.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Flippable effect allows you to flip a graphic either on the Horizontal axis, vertical axis or both through this simple component..

- -

- -

Note when used with other graphical effects, this component must be ordered the highest, else Unity will report an error. (see usage)

- -
- -

Properties

- -

The properties of the UI Flippable component are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
HorizontalFlip the graphic horizontally
VerticalFlip the graphic vertically
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Available as a Game Component menu:

- -

“Add Component -> UI -> Effects -> Extensions -> Flippable”

- -

Or add to the scene using:

- -

“GameObject -> UI -> Extensions -> Controls -> UI Flippable”

- -

Simple add to any Image or Graphic Component.

- -
-

[!NOTE] -Unity has changed it’s behaviour about stacking multiple BaseMeshEffects, if the effect alters vertices then the component must be ordered at the top of the components.
-E.G. UIFlippable must be ordered above OutLine / NicerOutline etc. -The control will automatically do this when added to a GameObject, but if you reorder it you may get a NullReferenceException. To fix, either reorder or touch any property.

-
- -
- -

Video Demo

- -

Click to play

- -

UIFlippable Demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Credit ChoMPHi

- -
- - - -

Sourced from - http://forum.unity3d.com/threads/script-flippable-for-ui-graphics.291711/

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-graphic-sector/index.html b/_site_test/ugui/controls/ui-graphic-sector/index.html deleted file mode 100644 index abb6a78..0000000 --- a/_site_test/ugui/controls/ui-graphic-sector/index.html +++ /dev/null @@ -1,866 +0,0 @@ - - - - - -UI Graphic Sector — Unity UI Extensions - - - -UI Graphic Sector | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Graphic Sector

- - -

Renders a filled sector (wedge/pie-slice) graphic with configurable arc.

- - -
- - Primitives - - - - primitives - - sector - - arc - - wedge - - pie - - graphic - -
-
-
- -
-

UI Graphic Sector

- -

Unity3d uGUI Custom Graphic that draws an oval sector

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Unity3d uGUI Custom Graphic that draws an oval sector.

- -

Features

- -
    -
  • no custom shaders
    • -
  • correct input handling
    • -
  • SpriteBorder support
    • -
  • 9-slice support
    • -
  • SpriteAtlas support
    • -
  • pixelPerUnitMultiplier support
    • -
  • Anchors for other transforms, including resizing to squeeze content into a sector
    • -
  • UV-by radius and tile by RectTransform
    • -
  • free pivot, or generated in the center of the sector
    • -
  • gradients
    • -
  • nested sectors can stick to parent
    • -
  • offset by angle
    • -
  • pixel offset
    • -
  • performance-wise
    • -
- -

Known Issues

- -
    -
  • automatic navigation not always recognize Selectable in selection wheel, cause it’s RectTransforms placed identically. Use explicit navigation instead
    • -
  • 9-sliced sprites ‘shrink’ to center, cause uv calculated per-degree
    • -
  • Tiled mode not support SpriteAtlas, only Single-texture sprites, by design. Cause tiling artifacts through uv repeating, no blowing up geometry as UI.Image.Tiled does.
    • -
- -
- -

Properties

- -

The properties of the Horizontal Scroll Snap control are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
TBCTBC
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
TBCTBCTBC
- -
- -

Usage

- -

TBC

- -
- -

Video Demo

- -

See Source Repository for demonstrations

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Dmitry (mitay-walle)

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-grid-renderer/index.html b/_site_test/ugui/controls/ui-grid-renderer/index.html deleted file mode 100644 index 4aca871..0000000 --- a/_site_test/ugui/controls/ui-grid-renderer/index.html +++ /dev/null @@ -1,898 +0,0 @@ - - - - - -UI Grid Renderer — Unity UI Extensions - - - -UI Grid Renderer | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Grid Renderer

- - -

Procedurally renders a grid of lines using Unity's UI mesh system.

- - -
- - Primitives - - - - primitives - - grid - - lines - - mesh - - renderer - -
-
-
- -
-

UI Grid Renderer

- -

A primitive line drawing control that draws a Grid within a RectTransform space

- -

UI Grid Renderer Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Grid Renderer control draws a box area with a defined Grid inside, allowing control of the columns and rows within. -This control extend the base UI Line Renderer control and inherits some of it’s features, not all of which are useful for a grid.

- -

- -

The main configuration is the GridColumns and GridRows to determine how many cells there are.

- -
-

[!NOTE] -The grid is only a renderer, it does not layout any child controls with in it. Consider pairing up with a the GridLayout control if you want to align children as well.

-
- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
PointsArray of points to draw the line between (Min 2). Read only for GridRenderer as it controls this
Line ThicknessThe thickness of the drawn line.
Use MarginsApply margin values to control, shrinking the drawable space within the Rect Transform.
MarginMargin values to be applied on the X and Y axis when applied with “Use Margins”. Fixed to Yes for the GridRenderer
Relative SizeDraw the line relative (within) the Rect Transform or use absolute Screen space coordinates.
Line ListPoints array becomes a set of matched pairs, so lines are only drawn in pairs instead of a single consistent line.
Line CapsAdd end caps to the draw lines.
Line JoinsDetermines whether joins are curved (Bevel) or hard edges (Miter)
Bezier ModeDraws bezier curves between groups of 4 lines. Several modes are available with increasing quality but require more calculations
Bezier Segments Per CurveAllows you to set how many segments make up the Bezier curve, more points equal a smoother curve more more lines to draw.
Grid ColumnsDefines the number of columns within the Grid
Grid RowsDefines the number of rows within the Grid
- -

Inherited from Maskable Graphic

- -
    -
  • Material
    • -
  • Color
    • -
  • Raycast Target
    • -
  • On Cull State Changed
    • -
  • Sprite
    • -
  • UV Rect
    • -
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default UI Grid Renderer control to the scene using:

- -

“GameObject -> UI -> Extensions -> Primitives -> UI Grid Renderer”

- -

Alternatively, add the component using:

- -

“Add Component -> UI -> Extensions -> Primitives -> UIGridRenderer”

- -
- -

Video Demo

- -

Click to play

- -

Box Slider Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit John Hattan

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/issues/117/uigridrenderer

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-highlightable/index.html b/_site_test/ugui/controls/ui-highlightable/index.html deleted file mode 100644 index 2c9bf1d..0000000 --- a/_site_test/ugui/controls/ui-highlightable/index.html +++ /dev/null @@ -1,863 +0,0 @@ - - - - - -UI Highlightable — Unity UI Extensions - - - -UI Highlightable | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Highlightable

- - -

Adds programmatic hover-highlight colour transitions to any Graphic.

- - -
- - Utilities - - - - utilities - - highlight - - hover - - colour - - transition - -
-
-
- -
-

UI Highlightable

- -

A custom component to enable RectTransform highlighting without the Unity UI Selectable control. Useful if you want to extend your own controls.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UI selectable added highlighting behavior to a RectTransform without needing a Selectable component. The selectable control by default, has certain behaviors like click-sticking (where the control is clicked and remains in the highlighted state until something else is clicked) which may not be desirable. -This control offers more control and some additional behaviour, such as “Click to hold” which leaves a RectTransform in the clicked state until it is clicked again (like a toggle)

- -

- -

The control also supports a disabled state but has no control over child Rect Transforms, so an event was added to allow you to perform additional actions when the the RectTransform is rendered inactive.

- -
- -

Properties

- -

The properties of the UI Highlightable control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
InteractableDoes the control react to highlighted events? Defaults to the Disabled color.
Click to HoldWhen clicked, does the control stay in the Pressed Color or return to the highlighted color (default, pressed color only use when clicked or held)
Normal ColorThe default color of the RectTransform when not being interacted with
Highlighted ColorThe color of the RectTransform when the mouse is over it or the control is in focus
Pressed ColorThe color of the RectTransform when clicked or held
Disabled ColorThe color of the RectTransform when it is non-interactable (see Interactable)
On Interactable Changed (event)The Event fired when the the control enters and leaves the Interactable State, passes the current state when fired.
- -

Implements the Image control on the RectTransform

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -
-

Can only be placed on a RectTransform that has a Graphic attached, e.g. an Image, RawImage or Text.

-
- -

Simply add the UI Highlightable component to a RectTransform using the Component menu:

- -

“Add Component -> UI -> Extensions -> UI Highlightable Extension”

- -
- -

Video Demo

- -

Click to play

- -

UIHighlighter Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit SimonDarksideJ

- -
- - - -

Sourced from - Issue proposal #153

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-infinite-scroll/index.html b/_site_test/ugui/controls/ui-infinite-scroll/index.html deleted file mode 100644 index 7acd737..0000000 --- a/_site_test/ugui/controls/ui-infinite-scroll/index.html +++ /dev/null @@ -1,856 +0,0 @@ - - - - - -UI Infinite Scroll — Unity UI Extensions - - - -UI Infinite Scroll | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Infinite Scroll

- - -

Loops ScrollRect content indefinitely in horizontal or vertical mode.

- - -
- - Utilities - - - - utilities - - scroll - - infinite - - loop - - scrollrect - -
-
-
- -
-

UI_InfiniteScroll

- -

Loops Scroll Rect content indefinitely -Configures automatically - works in both vertical and horizontal (but not both at the same time) - drag and drop - can be initialized by code

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Infinite Scroll Rect script causes content items for a Scroll Rect to loop indefinitely as the user scrolls.

- -

- -

It also allows you determine whether the control starts on awake or via code.

- -
- -

Properties

- -

The properties of the Scroll Rect Infinite component are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
Init By UserShould this activate automatically or only on request.
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetNewItemsnewItems (List of Transform Items)Appends a list of items to the Infinite Scroll child list
- -
- -

Usage

- -
-

Requires a configured ScrollRect. Which will be added by default.

-
- -

Simply add the default Scroll Rect Infinite component to a Scroll Rect using:

- -

“Add Component -> UI -> Extensions -> UI Infinite Scroll”

- -
- -

Video Demo

- -

Click to play

- -

Infinite Scroll Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Tomasz Schelenz

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/issues/81/infinite-scrollrect

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-knob/index.html b/_site_test/ugui/controls/ui-knob/index.html deleted file mode 100644 index 4414b4f..0000000 --- a/_site_test/ugui/controls/ui-knob/index.html +++ /dev/null @@ -1,898 +0,0 @@ - - - - - -UI Knob — Unity UI Extensions - - - -UI Knob | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Knob

- - -

Rotary knob input with configurable min/max angle and loop support.

- - -
- - Input - - - - input - - knob - - rotary - - dial - - rotate - -
-
-
- -
-

UI_Knob

- -

A simple knob radial control which operates like any other Knob you might find on a stereo or dial.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A powerful Knob style control, complete with a multitude of options, such as:

- -
    -
  • Max range
    • -
  • Stepped movement
    • -
  • Position snapping or free movement
    • -
  • Moves Clockwise or Counter Clockwise
    • -
  • Controlled through mouse or touch
    • -
  • Supports multiple rotations to complete range (how many rotations make the max value)
    • -
- -

UI Knob Inspector

- -
- -

Properties

- -

The properties of the Scroll Rect Infinite component are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
DirectionDirection of rotation CW - clockwise, CCW - counterClockwise.
Max ValueMax value of the knob, maximum RAW output value knob can reach, overrides snap step, IF set to 0 or higher than loops, max value will be set by loops.
LoopsSHow many rotations knob can do, if higher than max value, the latter will limit max value.
Clamp Output 01Clamp output value between 0 and 1, useful with loops > 1.
Snap To Positionsnap to position?.
Snap Steps Per LoopNumber of positions to snap.
Parent Touch MaskParent touch area to extend the touch radius.
Mask BackgroundDefault background color of the touch mask. Defaults as transparent.
On Value Changed (event)Event that is called every frame while rotating knob, sends a float argument of knobValue
- -

Inherited from Selectable

- -
    -
  • Interactable
    • -
  • Transition
    • -
  • Navigation
    • -
- -
- -

Methods

- - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetKnobValueAngle (between 0 & 1), Loop numberRotates the Knob control to the selected value and loop
- -
- -

Usage

- -

To use, simply add to the scene through:

- -

“GameObject -> UI -> Extensions -> Controls -> UI Knob”

- -

Alternatively, add the component to an existing GameObject using:

- -

“Add Component -> UI -> Extensions -> UI_Knob”

- -

Then apply any images / backgrounds or highlights you need for effect.

- -

There is also a Unity event for when the value changes that you can hook your scripts in to. See the Demo Video for more details.

- -
- -

Video Demo

- -

Demo Video

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Tomasz Schelenz

- -
- - - -

Script source

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-line-connector/index.html b/_site_test/ugui/controls/ui-line-connector/index.html deleted file mode 100644 index 5ec9077..0000000 --- a/_site_test/ugui/controls/ui-line-connector/index.html +++ /dev/null @@ -1,848 +0,0 @@ - - - - - -UI Line Connector — Unity UI Extensions - - - -UI Line Connector | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Line Connector

- - -

Draws connecting lines between RectTransform anchors with configurable width.

- - -
- - Primitives - - - - primitives - - line - - connector - - link - - bezier - -
-
-
- -
-

UILineConnector

- -

A Line Renderer helper used to draw a chain between multiple gameObjects, like a node connector

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UI Line Connector, allows you Override the Line Renderer control to build a line connecting the selected GameObjects.

- -

- -

This produces a Node connector style effect between the provided UI GameObjects.

- -

- -
-

[!NOTE] -Depends on the UI Line Renderer component

-
- -
-

[!NOTE] -The Lines depend on the Pivot’s of the Main Canvas, Line Renderer and the Selected GameObjects. Adjust as required. -———

-
- -

Properties

- -

The properties of the UILineConnector control are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
TransformsThe List of GameObjects to connect lines between
- -

Requires Line Renderer Component

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

The UILineConnector is available using:

- -

“Add Component -> UI -> Extensions -> UI Line Connector”

- -

This will also add the UI Line Renderer component by default

- -
- -

Video Demo

- -

Click to play

- -

UI Line Connector Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Alastair Aitchison

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/issues/123/uilinerenderer-issues-with-specifying -

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-line-renderer/index.html b/_site_test/ugui/controls/ui-line-renderer/index.html deleted file mode 100644 index 232e3da..0000000 --- a/_site_test/ugui/controls/ui-line-renderer/index.html +++ /dev/null @@ -1,980 +0,0 @@ - - - - - -UI Line Renderer — Unity UI Extensions - - - -UI Line Renderer | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Line Renderer

- - -

Smooth multi-point UI line with configurable thickness, dash, and colour.

- - -
- - Primitives - - - - primitives - - line - - polyline - - chart - - draw - -
-
-
- -
-

UILineRenderer

- -

Graphic control for drawing lines in the UI System

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UI Line Renderer allows you to draw distinct Line primitives between a collection of points on a Canvas.

- -

UI LineRenderer Inspector

- -

Settings can be set either in the inspector or via script programmatically.

- -
-

Due to the way UI Rendering occurs, a UI LineRenderer component should ONLY be placed in their own child RectTransforms positioned at (0,0,0). Having a UILineRenderer RectTransform at anything other than (0,0,0) will produce odd results as the offset from 0 is not handled.

- -

This includes any components that depend on the UILineRender, such as the UILineConnector. These do not need to be included within objects they are drawing, as they handle rendering for the entire canvas.

- -

See the LineRenderer examples for clarity.

-
- -
- -

Properties

- -

The properties of the Horizontal Scroll Snap control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
PointsArray of points to draw the line between (Min 2).
Line ThicknessThe thickness of the drawn line.
Use MarginsApply margin values to control, shrinking the drawable space within the Rect Transform.
MarginMargin values to be applied on the X and Y axis when applied with “Use Margins”.
Relative SizeDraw the line relative (within) the Rect Transform or use absolute Screen space coordinates.
Line ListPoints array becomes a set of matched pairs, so lines are only drawn in pairs instead of a single consistent line.
Line CapsAdd end caps to the draw lines.
Line JoinsDetermines whether joins are curved (Bevel) or hard edges (Miter)
Bezier ModeDraws bezier curves between groups of 4 lines. Several modes are available with increasing quality but require more calculations
Bezier Segments Per CurveAllows you to set how many segments make up the Bezier curve, more points equal a smoother curve more more lines to draw.
- -

Inherited from Primitive Base

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
ResolutionModeMethod for improving the resolution of a line, By Segment (Resoluton applied independently between points) or for the entire line (resolution distributed across the entire line)
ResolutionHow many new points to automatically add between the Points list provided (note, will not draw if total points in a line exceeds 64k Vertices, Unity limit)
Use Native SizeSet’s the UV drawing and resolution of the Line to use the native image size automatically
- -
-

Resolution options not 100% compatible with the Bezier functions of the Line Renderer. Best to test for the intended result. Simply because they both do the same thing for different reasons.

-
- -

Inherited from Maskable Graphic

- -
    -
  • Material
    • -
  • Color
    • -
  • Raycast Target
    • -
  • On Cull State Changed
    • -
  • Sprite
    • -
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
GetPositionIndex (int), SegmentIndex (int)Get the Vector2 position of a line index.
GetPositionBySegmentIndex (int), SegmentIndex (int)Get the Vector2 position of a line within a specific segment.
GetClosestPointStarting Position (Vector2), End Position (Vector2), Desired Point (Vector2)Get the closest point between two given Vector2s from a given Vector2 point.
CalculatePointOnCurvetime (float), Start Point (Vector 2), Control Point 1 (Vector 2), Control Point 2 (Vector 2), End Point (Vector 2)Returns a Vector 2 point on a curve based on the input (check in script for use)
- -
- -

Usage

- -

Simply add the default UI Line Renderer control to the scene using:

- -

“GameObject -> UI -> Extensions -> Primitives -> UI Line Renderer”

- -

Alternatively, add the component using:

- -

“Add Component -> UI -> Extensions -> Primitives -> UILineRenderer”

- -
-

Pivot point for all UI Lines should be 0,0. Reset by new editor script.

-
- -

The control will automatically redraw it self by simply altering the points array through code or the editor as required. An example script to update the point in code can be seen below:

- -
using System.Collections.Generic;
-using UnityEngine;
-
-public class AddingPoints : MonoBehaviour {
-
-    public UnityEngine.UI.Extensions.UILineRenderer LineRenderer; // Assign Line Renderer in editor
-    public UnityEngine.UI.Text XValue; // Test Input field to supply new X Value
-    public UnityEngine.UI.Text YValue; // Test Input field to supply new Y Value
-
-    // Use this for initialization
-    public void AddNewPoint () {
-        var point = new Vector2() { x = float.Parse(XValue.text), y = float.Parse(YValue.text) };
-        var pointlist = new List<Vector2>(LineRenderer.Points);
-        pointlist.Add(point);
-        LineRenderer.Points = pointlist.ToArray();
-    }
-}
-
- -

Project now includes an Editor script for easier manipulation of the points. Note this will reset the Pivot point to 0,0 due to a limitation in Unity.

- -

Line Render also now has improved Sprite support, including sprite slicing. The Line will use the internal slice boundary for lines and the outer boundary will be used for Line caps.

- -
- -

Video Demo

- -

View Intro Video

- -
- -

See also

- - - -
- -

Credits and Donation

- -

jack.sydorenko, firagon

- -
- - - - - -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-magnetic-infinite-scroll/index.html b/_site_test/ugui/controls/ui-magnetic-infinite-scroll/index.html deleted file mode 100644 index dbdd0e4..0000000 --- a/_site_test/ugui/controls/ui-magnetic-infinite-scroll/index.html +++ /dev/null @@ -1,874 +0,0 @@ - - - - - -UI Magnetic Infinite Scroll — Unity UI Extensions - - - -UI Magnetic Infinite Scroll | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Magnetic Infinite Scroll

- - -

Infinite scroll with magnetic snap-to-item behaviour and deceleration.

- - -
- - Utilities - - - - utilities - - scroll - - infinite - - magnetic - - snap - -
-
-
- -
-

UI_MagneticInfiniteScroll

- -

An extension of the InfiniteScroll control that adds a hot spot region to anchor child elements when scrolling finishes.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Magnetic Infinite Scroll Rect script causes content items for a Scroll Rect to loop indefinitely as the user scrolls. When scrolling stops, content is anchored to a defined pivot point

- -

- -

It also allows you determine whether the control starts on awake or via code.

- -
- -

Properties

- -

The properties of the Scroll Rect Infinite component are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Init By UserShould this activate automatically or only on request.
PivotThe anchor point to stop content at
Max Speed for MagneticThe maximum speed that allows you to activate the magnet to center on the pivot.
Index StartThe index of the object which must be initially centered.
Time For DecelerationThe time to decelerate and aim to the pivot.
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
SetNewItemsnewItems (List of Transform Items)Appends a list of items to the Infinite Scroll child list
SetContentInPivotIndexMoves the content to set the selected child in the pivot zone
- -
- -

Usage

- -
-

Requires a configured ScrollRect. Which will be added by default.

-
- -

Simply add the default Scroll Rect Infinite component to a Scroll Rect using:

- -

“Add Component -> UI -> Extensions -> UI Magnetic Infinite Scroll”

- -
- -

Video Demo

- -

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Febo Zodiaco

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/issues/349/magnticinfinitescroll

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-particle-system/index.html b/_site_test/ugui/controls/ui-particle-system/index.html deleted file mode 100644 index 2bc855f..0000000 --- a/_site_test/ugui/controls/ui-particle-system/index.html +++ /dev/null @@ -1,892 +0,0 @@ - - - - - -UI Particle System — Unity UI Extensions - - - -UI Particle System | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Particle System

- - -

Renders Unity Particle Systems within the uGUI canvas layer.

- - -
- - Effects - - - - effects - - particles - - vfx - - canvas - - render - -
-
-
- -
-

UIParticleSystem

- -

A particle system control to render the native Unity 3D particle system in UI Space

- -

UI Particle System Example

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The default Unity 3D Particle system doesn’t generally work in the UI space. It’s possible to arrange the particle system between layers or fiddle around with WorldSpace canvases but the control isn’t in your UI. With this control, it takes the rendered output of a 3D Particle system and regenerates it in UI space (the actual rendering of the Particle system is disabled so that it doesn’t cause a performance impact)

- -

- -
-

[!NOTE] -The control does not yet support Trail Particles currently

- -

Update 2023 Personally, I would recommend mob-sakai’s ParticleEffectForUGUI if this control is not meeting your expectations, as it has had further updates and also supports new features introduced in 2018.2.

-
- -
- -

Properties

- -

The properties of the UI Particle System control are as follows: -Requires Particle System

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
MaterialParticle render material - Note several shaders have been provided in the Shaders folder, all called UI.. (also in UI Extensions / Particles / … in the shader browser)
ColorThe color tint of the particles
Fixed TimeShould the particles render in fixed or game time
- -

Inherited from MaskableGraphic

- -
    -
  • Raycast Target
    • -
  • On Cull State Changed (event)
    • -
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
StartParticleEmissionNoneStarts the particle system if currently stopped
StopParticleEmissionNoneStops the particle system and clears the particle cache. Destroys current particles in scene from the emitter
PauseParticleEmissionNonePauses the particle system emission, existing particles continue to travel
- -
- -

Usage

- -

Simply add the UI Particle System component to a UI object using:

- -

“Add Component -> UI -> Effects -> Extensions -> UIParticleSystem”

- -

However, you will need to configure the particle system manually.

- -

Alternatively, add a new Empty Game Object to a canvas, add the particle system and configure it how you like in the Scene view. Then add the “UIParticleSystem” component and scale your values to render correctly. If required, change the material to use one of the alternate shaders provided in the project in the “Shaders” folder or from “UI Extensions / Particles / …” in the shader browser.

- -
-

[!NOTE] -When you translate any 3D object to Canvas Space, it ALWAYS requires scaling up

- -

The control does not yet support Trail Particles currently

-
- -
- -

Video Demo

- -

Click to play

- -

UI Particle System Demo

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -

Credits:

- - - -
- - - -

Sourced from - https://forum.unity3d.com/threads/free-script-particle-systems-in-ui-screen-space-overlay.406862

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-polygon/index.html b/_site_test/ugui/controls/ui-polygon/index.html deleted file mode 100644 index f8d0e55..0000000 --- a/_site_test/ugui/controls/ui-polygon/index.html +++ /dev/null @@ -1,842 +0,0 @@ - - - - - -UI Polygon — Unity UI Extensions - - - -UI Polygon | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Polygon

- - -

Renders any regular or irregular polygon as a filled UI graphic.

- - -
- - Primitives - - - - primitives - - polygon - - shape - - graphic - - mesh - -
-
-
- -
-

UIPolygon

- -

Graphic control for drawing custom polygons in the UI System

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

Advanced polygon control with support for multiple vertices which can be manipulated to control the look and feel of the primitive

- -

UI Polygon Inspector

- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Add the primitive control to your scene using:

- -

“GameObject -> UI -> Extensions -> Primitives -> UI Polygon”

- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
VerticesList of vertex positions defining the polygon.
ThicknessStroke thickness when rendering as an outline.
FillRender as filled polygon when enabled.
Preserve AspectMaintain aspect ratio when resizing.
BorderOptional border size around the polygon.
- -

Alternatively, add the component using:

- -

“Add Component -> UI -> Extensions -> Primitives -> UI Polygon”

- -
- -

Video Demo

- -

UI Polygon Inspector

- -
- -

See also

- -

DiamondGraph

- -
- -

Credits and Donation

- -

CiaccoDavide

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-scroll-rect-occlusion/index.html b/_site_test/ugui/controls/ui-scroll-rect-occlusion/index.html deleted file mode 100644 index 2b64836..0000000 --- a/_site_test/ugui/controls/ui-scroll-rect-occlusion/index.html +++ /dev/null @@ -1,835 +0,0 @@ - - - - - -UI Scroll Rect Occlusion — Unity UI Extensions - - - -UI Scroll Rect Occlusion | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Scroll Rect Occlusion

- - -

Disables off-screen children in a ScrollRect to reduce overdraw cost.

- - -
- - Utilities - - - - utilities - - scroll - - occlusion - - performance - - visibility - -
-
-
- -
-

UI_ScrollRectOcclusion

- -

Disables the objects outside of the scrollrect viewport. Useful for scrolls with lots of content

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Scroll Rect occlusion script enables and disables Content child items that are outside the visible area of the Scroll Rect.

- -

- -

It allows you determine whether it starts on awake or via code.

- -
- -

Properties

- -

The properties of the Scroll Rect Occlusion component are as follows:

- - - - - - - - - - - - - - -
PropertyDescription
Init By UserShould this occlude automatically or only on request.
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Scroll Rect Occlusion component to a Scroll Rect using:

- -

“Add Component -> UI -> Extensions -> UI Scrollrect Occlusion”

- -
- -

Video Demo

- -

Click to play

- -

Scroll Rect Occlusion Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credit Tomasz Schelenz

- -
- - - -

Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/issues/82/scrollrectocclusion

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-scroll-to-selection-xy/index.html b/_site_test/ugui/controls/ui-scroll-to-selection-xy/index.html deleted file mode 100644 index 99638da..0000000 --- a/_site_test/ugui/controls/ui-scroll-to-selection-xy/index.html +++ /dev/null @@ -1,832 +0,0 @@ - - - - - -UI Scroll To Selection XY — Unity UI Extensions - - - -UI Scroll To Selection XY | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Scroll To Selection XY

- - -

Auto-scrolls a 2D ScrollRect to keep the selected element in view on both axes.

- - -
- - Utilities - - - - utilities - - scroll - - selection - - xy - - auto-scroll - -
-
-
- -
-

UIScrollToSelectionXY

- -

Automatically scrolls a ScrollRect to the currently selected UI element with XY axis support

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A ScrollRect enhancement that automatically scrolls to the currently selected UI element, centers on selected element in scrollrect which can move in XY. You can restrict movement by locking axis on ScrollRect component.

- -
- -

Properties

- -

The properties of the UIScrollToSelectionXY control are as follows:

- - - - - - - - - - - - - - - - - - -
PropertyDescription
Scroll SpeedSpeed at which the scroll rect moves to the selected element
Layout List GroupThe RectTransform of the options “container” that will be scrolling
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the component to a ScrollRect using:

- -

“Add Component -> UI -> Extensions -> UI ScrollTo Selection XY”

- -

Then assign the Layout List Group RectTransform.

- -
- -

Video Demo

- -

N/A

- -
- -

See also

- - - -
- -

Credits and Donation

- -

zero3growlithe, xesenix

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-scroll-to-selection/index.html b/_site_test/ugui/controls/ui-scroll-to-selection/index.html deleted file mode 100644 index da0691f..0000000 --- a/_site_test/ugui/controls/ui-scroll-to-selection/index.html +++ /dev/null @@ -1,858 +0,0 @@ - - - - - -UI Scroll To Selection — Unity UI Extensions - - - -UI Scroll To Selection | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Scroll To Selection

- - -

Automatically scrolls a ScrollRect to keep the selected element in view.

- - -
- - Utilities - - - - utilities - - scroll - - selection - - focus - - auto-scroll - -
-
-
- -
-

UIScrollToSelection

- -

Automatically scrolls a ScrollRect to the currently selected UI element

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A ScrollRect enhancement that automatically scrolls to the currently selected UI element, useful for keyboard/gamepad navigation.

- -
- -

Properties

- -

The properties of the UIScrollToSelection control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Viewport Rect TransformView (boundaries/mask) rect transform. Used to check if automatic scroll to selection is required
Target Scroll RectScroll rect used to reach selected element
Scroll AxesAllow automatic scrolling only on these axes
Used Scroll MethodMOVE_TOWARDS: stiff movement, LERP: smoothed out movement
Scroll SpeedSpeed at which the scroll rect moves to the selected element
End Of List Jump Scroll SpeedScroll speed used when element to select is out of “JumpOffsetThreshold” range
Jump Offset ThresholdIf next element to scroll to is located over this screen percentage, use “EndOfListJumpScrollSpeed” to reach this element faster
Cancel Scroll Mouse ButtonsMouse buttons that cancel the automatic scrolling
Cancel Scroll KeysKeyboard keys that cancel the automatic scrolling
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the component to a ScrollRect using:

- -

“Add Component -> UI -> Extensions -> UIScrollToSelection”

- -
- -

Video Demo

- -

N/A

- -
- -

See also

- - - -
- -

Credits and Donation

- -

zero3growlithe

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-selectable-extension/index.html b/_site_test/ugui/controls/ui-selectable-extension/index.html deleted file mode 100644 index f137b38..0000000 --- a/_site_test/ugui/controls/ui-selectable-extension/index.html +++ /dev/null @@ -1,845 +0,0 @@ - - - - - -UI Selectable Extension — Unity UI Extensions - - - -UI Selectable Extension | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Selectable Extension

- - -

Extends Selectable with extra state events and programmatic selection.

- - -
- - Utilities - - - - utilities - - selectable - - events - - extension - - state - -
-
-
- -
-

UISelectableExtension

- -

Refactor of original UI Button control, can now add Press/Release and Hold events to any Selectable control

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The Selectable Extension adds three events to any Selectable component for Press, Release and Hold.

- -

- -
- -

Properties

- -

The properties of the Box Slider control are as follows:

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
On Button Press (event)The Event fired when the selectable is clicked
On Button Release (event)The Event fired when the selectable is released from a click
On Button Held (event)The Event fired when the selectable is being held (mouse / touch down)
- -
- -

Methods

- -

This component does not expose public methods beyond inherited behaviour.

- -
- -

Usage

- -

Simply add the default Selectable Extension to a Rect Transform using:

- -

“Add Component -> UI -> Extensions -> UI Selectable Extension”

- -
- -

Video Demo

- -

Click to play

- -

Non Drawing Graphic Demo

- -
-

Shows adding the Selectable Extension to a Non Drawing Graphic GameObject

-
- -
- -

See also

- - - -
- -

Credits and Donation

- - - -
- - - -

Sourced from - http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/page-2#post-1796783

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-tween-scale/index.html b/_site_test/ugui/controls/ui-tween-scale/index.html deleted file mode 100644 index ac65ea8..0000000 --- a/_site_test/ugui/controls/ui-tween-scale/index.html +++ /dev/null @@ -1,878 +0,0 @@ - - - - - -UI TweenScale — Unity UI Extensions - - - -UI TweenScale | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI TweenScale

- - -

Bounce/pulse scale tween on any UI element triggered by pointer events.

- - -
- - Effects - - - - effects - - tween - - scale - - bounce - - animation - -
-
-
- -
-

UI_TweenScale

- -

Dynamic scaling of text or image (including button) based on curves

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A simplified control for adding programmatic scaling animation to any UI component, including buttons.

- -

- -
-

Notes

- -
    -
  • If you want to stop the animation call the ResetTween() method.
    • -
  • In some cases it can create spikes due to redrawing on change, it is recommended to use it on simple objects in separated canvases to avoid redrawing full canvas.
    • -
  • If you want to scale object only in 1 axis select non uniform and use linear curve from 1 to 1 to lock the scale.
    • -
-
- -
- -

Properties

- -

The properties of the UI TweenScale control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
AnimCurveAnimation curve for scale (if isUniform set to false, will apply only to X scale)
SpeedAnimation speed
IsLoopAnimation will play infinitely (in order to make it work set your animation curve to loop)
PlayAtAwakeStarts automatically with script becoming active. Otherwise you need to call Play() method.
IsUniformIf false animCurve will modify object X scale and animCurveY - Y scale.
AnimCurveYY Animation curve for non-uniform scale
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
PlayN/AStart the animation
ResetTweenN/AStop and reset the animation
- -
- -

Usage

- -

Simply add the component to an existing RectTransform and configure the desired animation style. Then call the “Play” method in code or via a Unity UI Event (such as a button OnClick method)

- -

“Add Component -> UI -> Extensions -> UI Tween Scale”

- -
- -

Video Demo

- -

- -
- -

See also

- -

N/A

- -
- -

Credits and Donation

- -
    -
  • Tomasz Schelenz
    • -
- -
- - - -

Sourced From

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/ui-vertical-scroller/index.html b/_site_test/ugui/controls/ui-vertical-scroller/index.html deleted file mode 100644 index b525eaa..0000000 --- a/_site_test/ugui/controls/ui-vertical-scroller/index.html +++ /dev/null @@ -1,1025 +0,0 @@ - - - - - -UI Vertical Scroller — Unity UI Extensions - - - -UI Vertical Scroller | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

UI Vertical Scroller

- - -

Vertical scroller with centre-focus zooming — elements scale by distance.

- - -
- - Layout - - - - layout - - scroll - - vertical - - zoom - - scale - -
-
-
- -
-

UIVerticalScroller

- -

A vertical scrolling layout with automatic element scaling based on distance from center, focus detection, and optional navigation buttons.

- -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

The UIVerticalScroller creates a vertical scrolling list where elements scale based on their distance from a defined center point. Elements closer to the center appear larger (zoomed), while those farther away shrink according to configurable shrinkage factors and minimum scale constraints. The component automatically detects which element is currently focused (closest to center) and supports optional navigation buttons, click events, and focus-change events.

- -
- -

Properties

- -

The properties of the UIVerticalScroller control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Scroll RectReference to the desired ScrollRect component (auto-detected if not set)
Array Of ElementsArray of GameObjects to populate inside the scroller. Auto-populated from children if not set
CenterRectTransform defining the center display area (position of zoomed content). Required
Element SizeRectTransform defining the size/spacing of elements. Defaults to Center if not set
Element ShrinkageVector2 controlling scale reduction: scale = 1 / (1 + distance * shrinkage). Default: (1/200, 1/200)
Min ScaleVector2 defining minimum element scale (furthest from center). Default: (0.7, 0.7)
Starting IndexIndex of the item to focus on start (-1 = no auto-focus). Default: -1
Stop Momentum On EndWhen enabled, stops scrolling past the last element from inertia. Default: true
Disable UnfocusedWhen enabled, sets unfocused items to non-interactable. Default: true
Scroll Up ButtonOptional button GameObject to scroll up/previous (optional)
Scroll Down ButtonOptional button GameObject to scroll down/next (optional)
On Button Clicked (event)Event fired when a specific item is clicked. Exposes the index number of the clicked item (optional)
On Focus Changed (event)Event fired when the focused item changes. Exposes the new focused item index (optional)
- -

Additional properties available in code:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
FocusedElementIndexintGets the index of the currently focused element
CenterRectTransformGets or sets the center viewport RectTransform
ElementSizeRectTransformGets or sets the element size RectTransform
ScrollRectComponentScrollRectGets or sets the ScrollRect component reference
ArrayOfElementsGameObject[]Gets or sets the array of element GameObjects
ResultstringGets the text content of the currently focused element (from TMP_Text component if present)
ScrollingPanelRectTransformGets the scrollable area (content of the ScrollRect)
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
UpdateChildrenint startingIndex = -1, GameObject[] arrayOfElements = nullRecognizes and resizes children. If arrayOfElements is null, uses ScrollingPanel children. If startingIndex > -1, snaps to that element
SnapToElementint elementInstantly snaps the scroll position to focus on the specified element index
ScrollUp(none)Scrolls up by approximately element height / 1.2. Called by Scroll Up Button if assigned
ScrollDown(none)Scrolls down by approximately element height / 1.2. Called by Scroll Down Button if assigned
- -
- -

Usage

- -

To use the UIVerticalScroller control:

- -
    -
  1. Add the component via “Add Component -> Layout -> Extensions -> Vertical Scroller”
    2. -
  2. Ensure the GameObject has a ScrollRect component (required)
    3. -
  3. Assign the Center RectTransform (defines the zoom/focus area)
    4. -
  4. Optionally assign Element Size (defaults to Center if not set)
    5. -
  5. Populate Array Of Elements or let the component auto-detect children
    6. -
  6. Configure scaling behavior via Element Shrinkage and Min Scale
    7. -
  7. Set Starting Index to auto-focus an element on start
    8. -
  8. Optionally assign Scroll Up Button and Scroll Down Button for navigation
    9. -
  9. Subscribe to On Button Clicked and On Focus Changed events
    10. -
- -

Example code for programmatic control:

- -
using UnityEngine.UI.Extensions;
-
-public class VerticalScrollerExample : MonoBehaviour
-{
-    public UIVerticalScroller scroller;
-
-    void Start()
-    {
-        // Subscribe to events
-        scroller.onButtonClicked.AddListener(OnItemClicked);
-        scroller.onFocusChanged.AddListener(OnFocusChanged);
-        
-        // Dynamically update children
-        GameObject[] items = GetScrollItems();
-        scroller.UpdateChildren(0, items);  // Start at index 0
-    }
-    
-    void OnItemClicked(int index)
-    {
-        Debug.Log($"Item {index} clicked");
-        // Snap to clicked item
-        scroller.SnapToElement(index);
-    }
-    
-    void OnFocusChanged(int newIndex)
-    {
-        Debug.Log($"Focus changed to item {newIndex}");
-        Debug.Log($"Focused item text: {scroller.Result}");
-    }
-    
-    void NavigateToItem(int index)
-    {
-        scroller.SnapToElement(index);
-    }
-    
-    GameObject[] GetScrollItems()
-    {
-        // Return array of GameObjects to display
-        return scroller.ScrollingPanel.GetComponentsInChildren<Transform>()
-            .Select(t => t.gameObject)
-            .Where(g => g != scroller.ScrollingPanel.gameObject)
-            .ToArray();
-    }
-}
-
- -
-

[!NOTE]

- -
    -
  • The Center RectTransform is required; the component logs an error if not assigned
    • -
  • Elements are automatically resized to match Element Size dimensions
    • -
  • Each element should have a CanvasGroup for interactability control
    • -
  • Text content is extracted from TMP_Text components for the Result property
    • -
-
- -
- -

Video Demo

- -

View Demo Video

- -

Sample scene: UIVerticalScrollerDemo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

Credits: Mrs. YakaYocha
-Please donate: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RJ8D9FRFQF9VS

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/controls/vertical-scroll-snap/index.html b/_site_test/ugui/controls/vertical-scroll-snap/index.html deleted file mode 100644 index 8da8e93..0000000 --- a/_site_test/ugui/controls/vertical-scroll-snap/index.html +++ /dev/null @@ -1,1002 +0,0 @@ - - - - - -Vertical Scroll Snap — Unity UI Extensions - - - -Vertical Scroll Snap | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Vertical Scroll Snap

- - -

Paged vertical scroll view that snaps to discrete content pages.

- - -
- - Layout - - - - layout - - scroll - - snap - - vertical - - pages - -
-
-
- -
-

Vertical Scroll Snap

- -

A paged scroll rect that can work in steps / pages, includes button support. Now also supports infinite scrolling.

- - - -
- -

Contents

- -
-

1 Overview

- -

2 Properties

- -

3 Methods

- -

4 Usage

- -

5 Video Demo

- -

6 See also

- -

7 Credits and Donation

- -

8 External links

-
- -
- -

Overview

- -

A scroll snap style control which is focused on a Vertical layout, enabling a paged view of child elements. -Pages can be moved by keys, swipes or via the use of buttons.

- -

Vertical Scroll Snap Inspector

- -

Now also supports infinite scrolling and additional events for when pages change.

- -

As of Update 1.6, now also supports Scrollbars, Note Can only use the Vertical scrollbar in alignment with the direction of the ScrollSnap

- -
- -

Properties

- -

The properties of the Vertical Scroll Snap control are as follows:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
Starting ScreenThe child page that should be displayed on start. Bound to the limits of either the scene child objects or the “Child Objects” array.
Page StepThe distance between pages based on the current width of the control. Higher value equals more spacing.
PaginationThe GameObject with a Toggle group that controls toggles active state. Recommended one toggle per-page.
Next ButtonButton to instruct the control to move to the next page.
Prev ButtonButton to instruct the control to move to the previous page.
Transition SpeedSpeed at which the control lerps between pages
Use Fast SwipeWhen enabled, a swipe only moves to the next page (unless below Fast Swipe Threshold. E.G. slow swipe / drag)
Fast Swipe ThresholdAn offset height the user must swipe to go to the next / prev page based on the panel height. Swipe more than the Height + Threshold and the control reverts to normal swipe behaviour
Swipe Velocity ThresholdSlowest speed the control must travel at to settle on a page.
Mask AreaMaskable area for control, pages outside this area will be made inactive. Used in conjunction with the Mask Buffer. Recommended to also add a RectMask2D to MaskArea GO.
Mask BufferThe amount of page buffer to surround the Mask Area and control which pages are active / inactive. Lower value equals more active pages.
Jump On EnableBy default the container will lerp to the start when enabled in the scene, this option overrides this and forces it to simply jump without lerping
Restart On EnableBy default the container will stay on the current selection, this option overrides this behaviour and returns to the original starting page when enabled.
Use Parent TransformWhen using prefabs in the ChildObjects array, the control with use the prefab transform values instead of resetting to the parent.
Child ObjectsAn array of prefabs to load the control with. Can EITHER add children in to the scene or via this array but NOT both.
On Selection Change Start (event)The Event fired when the user starts changing the page via swipe or mouse
On Selection Page Changed (event)The Event fired when the current page changes, either via swipe, mouse, Next/Prev Buttons
On Selection Change End (event)The Event fired when the page settles after being changed by swipe or mouse
- -

Additional properties available in code

- - - - - - - - - - - - - - - - -
PropertyReturn TypeDescription
CurrentPageintThe current snapped page, or selected page as the user swipes
- -
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodArgumentsDescription
DistributePagesN/AForces a refresh of the currently available Scroll Snap Pages
Add ChildGo (GameObject)Add a new child to this Scroll Snap and recalculate its children
Add ChildGo (GameObject), WorldPositionStays (bool)Add a new child to this Scroll Snap and recalculate its children, and resets the world position of the new child.
Remove Childindex (int), (out) ChildRemoved (GameObject)Remove a new child to this Scroll Snap and recalculate its children, outputs the removed object to a variable.
Remove Childindex (int), WorldPositionStays (bool), (out) ChildRemoved (GameObject)Remove a new child to this Scroll Snap and recalculate its children, outputs the removed object to a variable. Resets the world position of the removed GameObject.
RemoveAllChildren(out) ChildrenRemoved (GameObject[])Remove all children from this ScrollSnap, outputs a GameObject array of all removed children.
RemoveAllChildrenWorldPositionStays (bool), (out) ChildrenRemoved (GameObject[])Remove all children from this ScrollSnap, outputs a GameObject array of all removed children. Resets the world position for all removed children.
UpdateLayout(optional) BoolUsed for changing / updating between screen resolutions, if the argument is true, the current page will be reset to the StartingScreen.
- -
- -

Usage

- -

Like with other Layout controls, simply add this to the parent RectTransform for a collection of child elements through the Add Component menu as follows:

- -

“Add Component -> Layout -> Extensions -> Vertical Scroll Snap”

- -

Or alternatively, add the default layout for the control using:

- -

“GameObject -> UI -> Extensions -> Layout -> Vertical Scroll Snap”

- -

This will give you a standard Scroll Rect setup with the script and a single child example page.

- -

To get access to the Current or snapped page in code, use the CurrentPage property details above. This is also updated as the user swipes. If you wish to update linked content based on the current page, I recommend using the OnSelectionPageChanged event, e.g.

- -
    public VerticalScrollSnap vss;
-
-    // Start is called before the first frame update
-    void Start()
-    {
-        vss = GetComponent<VerticalScrollSnap>();
-    }
-
-    // Update is called once per frame
-    void Update()
-    {
-        //Checking for the Currentpage
-        var theSelectedPageIs = vss.CurrentPage;
-    }
-
- -
- -

Video Demo

- -

The main Vertical / Horizontal demo

- -

View Intro Video

- -

A simple walk-through setting up the Scroll Snap with a perspective view

- -

Scroll Snap Perspective View Demo

- -
- -

See also

- - - -
- -

Credits and Donation

- -

BinaryX, SimonDarksideJ

- -
- - - -

Sourced from

- -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/index.html b/_site_test/ugui/index.html deleted file mode 100644 index 6845d9f..0000000 --- a/_site_test/ugui/index.html +++ /dev/null @@ -1,1953 +0,0 @@ - - - - - -uGUI Controls — Unity UI Extensions — Unity UI Extensions - - - -uGUI Controls — Unity UI Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
uGUI Package
-

Unity UI Extensions

-

70+ battle-tested controls for Unity's uGUI framework. The original community UI extension library — free, open source, and production-ready.

-
- com.unity.uiextensions - BSD 3-Clause - Unity 2019.4+ -
-
- Browse Controls - Installation Guide - GitHub Repo -
-
-
- -
-
-

Installation

- -
-
- - - -
- -
-

Install via OpenUPM

-
- 
openupm add com.unity.uiextensions
- -
-

Or add the scoped registry manually in Edit → Project Settings → Package Manager:

-
- 
Name: package.openupm.com
-URL: https://package.openupm.com
-Scope: com.unity.uiextensions
- -
-
- -
-

Install via Git URL

-

Open the Package Manager (Window → Package Manager), click + → Add package from git URL and paste:

-
- 
https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git
- -
-

Pin to a specific release by appending #2.3.2 (or desired tag) to the URL.

-
- -
-

Manual / Embedded Package

-
    -
  1. Download the latest .zip or .unitypackage from the Releases page
    2. -
  2. Extract and place the folder in your project's Packages/ directory
    3. -
  3. Unity will automatically detect and import the package
    4. -
-
-
-
-
- -
-
-

All Controls

- -
-
- -
- -
- - - - - - - -
-
- -
- - - - -
- Accordion preview -
- - -
-
-

Accordion

- Layout -
-

Expandable/collapsible panel sections with smooth animated transitions.

-
- - - layout - - accordion - - collapse - -
-
- - - - - -
- Card UI preview -
- - -
-
-

Card UI

- Layout -
-

2D and 3D card flip/stack animations for content presentation.

-
- - - layout - - card - - flip - -
-
- - - - - -
- Content Scroll Snap Horizontal preview -
- - -
-
-

Content Scroll Snap Horizontal

- Layout -
-

Snap-to-page horizontal scroll container with automatic page detection.

-
- - - layout - - scroll - - snap - -
-
- - - - - -
- Fancy Scroll View preview -
- - -
-
-

Fancy Scroll View

- Layout -
-

High-performance scroll view with virtual item pooling and custom layouts.

-
- - - layout - - scroll - - virtual - -
-
- - - - - -
- Flow Layout Group preview -
- - -
-
-

Flow Layout Group

- Layout -
-

Automatically wraps child elements into rows or columns like CSS flexbox.

-
- Video - - layout - - flow - - wrap - -
-
- - - - - -
- Horizontal Scroll Snap preview -
- - -
-
-

Horizontal Scroll Snap

- Layout -
-

Paged horizontal scroll view that snaps to discrete content pages.

-
- - - layout - - scroll - - snap - -
-
- - - - - -
- Reorderable List preview -
- - -
-
-

Reorderable List

- Layout -
-

Drag-and-drop list and grid layout with visual reordering feedback.

-
- - - layout - - list - - drag - -
-
- - - - - -
- Scroll Rect Ex preview -
- - -
-
-

Scroll Rect Ex

- Layout -
-

Enhanced ScrollRect with momentum, deceleration tuning, and edge effects.

-
- - - layout - - scroll - - scrollrect - -
-
- - - - - -
- Scroll Rect Linker preview -
- - -
-
-

Scroll Rect Linker

- Layout -
-

Synchronises multiple ScrollRect components so they scroll in tandem.

-
- - - layout - - scroll - - sync - -
-
- - - - - -
- Scroll Rect Tweener preview -
- - -
-
-

Scroll Rect Tweener

- Layout -
-

Programmatically scrolls a ScrollRect to a target position with easing.

-
- - - layout - - scroll - - tween - -
-
- - - - - -
- Scroll Snap preview -
- - -
-
-

Scroll Snap

- Layout -
-

Perspective scroll snap with 3D carousel-style page transitions.

-
- Video - - layout - - scroll - - snap - -
-
- - - - - -
- Table Layout Group preview -
- - -
-
-

Table Layout Group

- Layout -
-

CSS-style table layout that arranges UI elements into rows and columns.

-
- Video - - layout - - table - - grid - -
-
- - - - - -
- Tile Size Fitter preview -
- - -
-
-

Tile Size Fitter

- Layout -
-

Constrains child tiles to a fixed aspect ratio within a grid layout.

-
- - - layout - - tile - - aspect-ratio - -
-
- - - - - - - - -
-
-

UI Vertical Scroller

- Layout -
-

Vertical scroller with centre-focus zooming — elements scale by distance.

-
- - - layout - - scroll - - vertical - -
-
- - - - - -
- Vertical Scroll Snap preview -
- - -
-
-

Vertical Scroll Snap

- Layout -
-

Paged vertical scroll view that snaps to discrete content pages.

-
- - - layout - - scroll - - snap - -
-
- - - - - -
- AutoComplete ComboBox preview -
- - -
-
-

AutoComplete ComboBox

- Input -
-

Combobox with live-filter autocomplete suggestions as the user types.

-
- - - input - - combobox - - autocomplete - -
-
- - - - - -
- Box Slider preview -
- - -
-
-

Box Slider

- Input -
-

2D drag-handle slider that outputs both X and Y values simultaneously.

-
- Video - - input - - slider - - 2d - -
-
- - - - - -
- Color Picker preview -
- - -
-
-

Color Picker

- Input -
-

Full HSV colour picker with hex input, alpha slider, and preset swatches.

-
- Video - - input - - color - - colour - -
-
- - - - - -
- ComboBox preview -
- - -
-
-

ComboBox

- Input -
-

Editable dropdown with keyboard navigation and multi-select capability.

-
- - - input - - combobox - - dropdown - -
-
- - - - - -
- Cooldown Button preview -
- - -
-
-

Cooldown Button

- Input -
-

Button with an animated cooldown arc that prevents rapid re-clicking.

-
- Video - - input - - button - - cooldown - -
-
- - - - - -
- DropDown List preview -
- - -
-
-

DropDown List

- Input -
-

Styleable dropdown list with animated open/close and custom item rendering.

-
- - - input - - dropdown - - select - -
-
- - - - - -
- Radial Slider preview -
- - -
-
-

Radial Slider

- Input -
-

Circular arc slider with configurable start angle, range, and fill style.

-
- Video - - input - - slider - - radial - -
-
- - - - - -
- Range Slider preview -
- - -
-
-

Range Slider

- Input -
-

Dual-handle slider for selecting a minimum/maximum value range.

-
- Video - - input - - slider - - range - -
-
- - - - - -
- Segment preview -
- - -
-
-

Segment

- Input -
-

Individual button segment used as a child within a SegmentedControl.

-
- - - input - - segment - - button - -
-
- - - - - -
- Segmented Control preview -
- - -
-
-

Segmented Control

- Input -
-

iOS-style segmented control for choosing one option from a small set.

-
- Video - - input - - segmented - - toggle - -
-
- - - - - -
- Selection Box preview -
- - -
-
-

Selection Box

- Input -
-

Drag to draw a rubber-band selection rectangle over multiple UI elements.

-
- - - input - - selection - - drag - -
-
- - - - - -
- Stepper preview -
- - -
-
-

Stepper

- Input -
-

+/− increment buttons for numeric input with configurable step size.

-
- Video - - input - - stepper - - increment - -
-
- - - - - -
- UI Knob preview -
- - -
-
-

UI Knob

- Input -
-

Rotary knob input with configurable min/max angle and loop support.

-
- - - input - - knob - - rotary - -
-
- - - - - - - - -
-
-

Diamond Graph

- Primitives -
-

Radar/spider chart rendered as a configurable diamond polygon shape.

-
- Video - - primitives - - chart - - radar - -
-
- - - - - - - - -
-
-

Grid Raw Image

- Primitives -
-

RawImage that tiles a texture in a grid pattern with UV offset control.

-
- - - primitives - - image - - grid - -
-
- - - - - - - - -
-
-

UI Circle Segmented

- Primitives -
-

Segmented ring/pie chart renderer with configurable slice count and gaps.

-
- - - primitives - - circle - - pie - -
-
- - - - - - - - -
-
-

UI Graphic Sector

- Primitives -
-

Renders a filled sector (wedge/pie-slice) graphic with configurable arc.

-
- - - primitives - - sector - - arc - -
-
- - - - - -
- UI Grid Renderer preview -
- - -
-
-

UI Grid Renderer

- Primitives -
-

Procedurally renders a grid of lines using Unity's UI mesh system.

-
- Video - - primitives - - grid - - lines - -
-
- - - - - -
- UI Line Connector preview -
- - -
-
-

UI Line Connector

- Primitives -
-

Draws connecting lines between RectTransform anchors with configurable width.

-
- Video - - primitives - - line - - connector - -
-
- - - - - -
- UI Line Renderer preview -
- - -
-
-

UI Line Renderer

- Primitives -
-

Smooth multi-point UI line with configurable thickness, dash, and colour.

-
- - - primitives - - line - - polyline - -
-
- - - - - -
- UI Polygon preview -
- - -
-
-

UI Polygon

- Primitives -
-

Renders any regular or irregular polygon as a filled UI graphic.

-
- - - primitives - - polygon - - shape - -
-
- - - - - -
- CurlyUI preview -
- - -
-
-

CurlyUI

- Effects -
-

Warps any uGUI graphic with configurable horizontal and vertical curves.

-
- Video - - effects - - curve - - warp - -
-
- - - - - -
- Gradient preview -
- - -
-
-

Gradient

- Effects -
-

Applies a two-colour vertex gradient to any uGUI graphic component.

-
- Video - - effects - - gradient - - colour - -
-
- - - - - -
- Gradient 2 preview -
- - -
-
-

Gradient 2

- Effects -
-

Four-corner gradient effect with independent colour control per vertex.

-
- - - effects - - gradient - - four-corner - -
-
- - - - - -
- Letter Spacing preview -
- - -
-
-

Letter Spacing

- Effects -
-

Adds configurable character spacing (tracking) to uGUI Text components.

-
- Video - - effects - - text - - letter-spacing - -
-
- - - - - -
- Mono Spacing preview -
- - -
-
-

Mono Spacing

- Effects -
-

Forces monospace character widths on any uGUI Text component.

-
- Video - - effects - - text - - monospace - -
-
- - - - - -
- Soft Alpha Mask preview -
- - -
-
-

Soft Alpha Mask

- Effects -
-

Uses a greyscale mask texture to softly clip UI content at the edges.

-
- - - effects - - mask - - alpha - -
-
- - - - - -
- TextPic preview -
- - -
-
-

TextPic

- Effects -
-

Embeds inline sprite images inside uGUI Text using custom tags.

-
- Video - - effects - - text - - sprite - -
-
- - - - - -
- UI Flippable preview -
- - -
-
-

UI Flippable

- Effects -
-

Mirrors any graphic component horizontally or vertically at runtime.

-
- Video - - effects - - flip - - mirror - -
-
- - - - - -
- UI Particle System preview -
- - -
-
-

UI Particle System

- Effects -
-

Renders Unity Particle Systems within the uGUI canvas layer.

-
- Video - - effects - - particles - - vfx - -
-
- - - - - -
- UI TweenScale preview -
- - -
-
-

UI TweenScale

- Effects -
-

Bounce/pulse scale tween on any UI element triggered by pointer events.

-
- - - effects - - tween - - scale - -
-
- - - - - -
- Non-Drawing Graphic preview -
- - -
-
-

Non-Drawing Graphic

- Utilities -
-

Invisible raycast-blocking graphic — enables hit areas without any visual.

-
- Video - - utilities - - raycast - - invisible - -
-
- - - - - -
- Pagination Manager preview -
- - -
-
-

Pagination Manager

- Utilities -
-

Connects a ScrollSnap or ContentScrollSnap to dot-style pagination indicators.

-
- - - utilities - - pagination - - dots - -
-
- - - - - - - - -
-
-

Radial Layout

- Utilities -
-

Arranges child elements in a circle or arc at configurable radius and angle.

-
- Video - - utilities - - layout - - radial - -
-
- - - - - -
- Rect Transform Editor preview -
- - -
-
-

Rect Transform Editor

- Utilities -
-

Editor-only helper that adds extra transform manipulation handles in the Scene view.

-
- - - utilities - - editor - - rect-transform - -
-
- - - - - -
- Reset Selectable Highlight preview -
- - -
-
-

Reset Selectable Highlight

- Utilities -
-

Clears stuck hover/selected highlight states on Selectable components.

-
- - - utilities - - selectable - - highlight - -
-
- - - - - -
- Scroll Conflict Manager preview -
- - -
-
-

Scroll Conflict Manager

- Utilities -
-

Resolves scroll direction conflicts when nested ScrollRects overlap.

-
- - - utilities - - scroll - - conflict - -
-
- - - - - -
- Selectable Scaler preview -
- - -
-
-

Selectable Scaler

- Utilities -
-

Scales a Selectable component up/down on hover and press events.

-
- Video - - utilities - - selectable - - scale - -
-
- - - - - -
- ToolTip preview -
- - -
-
-

ToolTip

- Utilities -
-

Follows-cursor tooltip that displays rich text on pointer enter/exit.

-
- - - utilities - - tooltip - - hover - -
-
- - - - - -
- UI Highlightable preview -
- - -
-
-

UI Highlightable

- Utilities -
-

Adds programmatic hover-highlight colour transitions to any Graphic.

-
- Video - - utilities - - highlight - - hover - -
-
- - - - - -
- UI Scroll To Selection preview -
- - -
-
-

UI Scroll To Selection

- Utilities -
-

Automatically scrolls a ScrollRect to keep the selected element in view.

-
- - - utilities - - scroll - - selection - -
-
- - - - - -
- UI Scroll To Selection XY preview -
- - -
-
-

UI Scroll To Selection XY

- Utilities -
-

Auto-scrolls a 2D ScrollRect to keep the selected element in view on both axes.

-
- - - utilities - - scroll - - selection - -
-
- - - - - -
- UI Selectable Extension preview -
- - -
-
-

UI Selectable Extension

- Utilities -
-

Extends Selectable with extra state events and programmatic selection.

-
- - - utilities - - selectable - - events - -
-
- - - - - -
- UI Infinite Scroll preview -
- - -
-
-

UI Infinite Scroll

- Utilities -
-

Loops ScrollRect content indefinitely in horizontal or vertical mode.

-
- Video - - utilities - - scroll - - infinite - -
-
- - - - - -
- UI Magnetic Infinite Scroll preview -
- - -
-
-

UI Magnetic Infinite Scroll

- Utilities -
-

Infinite scroll with magnetic snap-to-item behaviour and deceleration.

-
- - - utilities - - scroll - - infinite - -
-
- - - - - -
- UI Scroll Rect Occlusion preview -
- - -
-
-

UI Scroll Rect Occlusion

- Utilities -
-

Disables off-screen children in a ScrollRect to reduce overdraw cost.

-
- - - utilities - - scroll - - occlusion - -
-
- - - - - -
- Menu System preview -
- - -
-
-

Menu System

- Navigation -
-

Hierarchical animated menu with slide, fade, and scale transition modes.

-
- Video - - navigation - - menu - - hierarchy - -
-
- - - - - -
- Tab Navigation preview -
- - -
-
-

Tab Navigation

- Navigation -
-

Keyboard-navigable tab panel system with animated content switching.

-
- Video - - navigation - - tabs - - keyboard - -
-
- - - - - -
- uGUI Tools preview -
- - -
-
-

uGUI Tools

- Navigation -
-

Editor menu shortcuts for common uGUI operations — align, distribute, reset.

-
- - - navigation - - editor - - tools - -
-
- - -
- - -
-
- -
- - - - - diff --git a/_site_test/ugui/install/index.html b/_site_test/ugui/install/index.html deleted file mode 100644 index bc0978c..0000000 --- a/_site_test/ugui/install/index.html +++ /dev/null @@ -1,253 +0,0 @@ - - - - - -Install Unity UI Extensions (uGUI) — Unity UI Extensions — Unity UI Extensions - - - -Install Unity UI Extensions (uGUI) — Unity UI Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
uGUI Package
-

Installing Unity UI Extensions

-

Three ways to add com.unity.uiextensions to your Unity project. OpenUPM is the recommended approach.

-
- com.unity.uiextensions - BSD 3-Clause - Unity 2019.4+ -
-
-
- -
-
- -

Method 1 — OpenUPM (Recommended)

-

OpenUPM is the fastest and most reliable installation method. It supports automatic dependency resolution and version management.

- -

Option A: OpenUPM CLI

-

If you have the OpenUPM CLI installed, run:

-
- 
openupm add com.unity.uiextensions
- -
- -

Option B: Scoped Registry (manual)

-

Open Edit → Project Settings → Package Manager and add the following scoped registry:

-
- 
Name: package.openupm.com
-URL:  https://package.openupm.com
-Scope: com.unity.uiextensions
- -
-

Then open Window → Package Manager, switch the dropdown to My Registries, find Unity UI Extensions, and click Install.

- -
-
- -
-
- -

Method 2 — Git URL

-

Requires Git to be installed on your machine and accessible on the system path.

-
    -
  1. Open Window → Package Manager
    2. -
  2. Click + and select Add package from git URL…
    3. -
  3. Paste the URL below and click Add:
    4. -
-
- 
https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git
- -
-

To pin to a specific release, append the tag to the URL:

-
- 
https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git#2.3.2
- -
-

Check the Releases page for all available version tags.

- -
-
- -
-
- -

Method 3 — Manual / Embedded Package

-

Use this when you need full local control over the package source, or when you're working offline.

-
    -
  1. Go to the latest release and download the .zip or .unitypackage
    2. -
  2. Extract the archive so you have a folder named com.unity.uiextensions
    3. -
  3. Move that folder into your project's Packages/ directory (alongside manifest.json)
    4. -
  4. Unity will detect and import the package automatically — no changes to manifest.json are required
    5. -
-

To later update the package, replace the folder contents with the newer version.

- -
-
- -
-
- -

Verifying the Installation

-

After installation you should see the package listed in Window → Package Manager under In Project. The package adds the following to your project:

-
    -
  • Scripts — All control scripts are available via the UnityEngine.UI.Extensions namespace
    • -
  • Prefabs — Ready-to-use prefabs are available under Assets/UI Extensions/Prefabs/ (if sample content was imported)
    • -
  • Samples — Optional sample scenes can be imported via the Package Manager's Samples tab
    • -
-

Add any control component to a GameObject via Add Component → UI → Extensions → [Control Name].

- -
-
- -
-
- -

Requirements

-
    -
  • Unity 2019.4 LTS or later
    • -
  • Unity's built-in UI (uGUI) module — installed by default in all Unity projects
    • -
  • No additional dependencies required
    • -
- -
- Unity 6 — All controls are supported. Some older controls that relied on legacy input may behave differently with the new Input System. Check individual control pages for notes. -
- -
-
- -
-
-

Ready to explore the controls?

-

Browse all 70+ uGUI controls with descriptions, properties, and examples.

-
- Browse uGUI Controls - Report an Issue -
-
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/circular-image-button/index.html b/_site_test/uitoolkit/controls/circular-image-button/index.html deleted file mode 100644 index b7f6a29..0000000 --- a/_site_test/uitoolkit/controls/circular-image-button/index.html +++ /dev/null @@ -1,557 +0,0 @@ - - - - - -Circular Image Button — Unity UI Extensions - - - -Circular Image Button | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Circular Image Button

- - -

Circular avatar/icon button with mask, border, and selected-state styling.

- - -
- - Primitives - - - - primitives - - button - - circular - - avatar - - icon - -
-
-
- -
-

Summary

- -

CircularImageButton is a circular button that displays an image or sprite at full bleed with a 50% border-radius. When no image is set it shows a centered overlay (typically an upload icon and label) to prompt the user to select a photo.

- -

Typical use cases:

- -
    -
  • Avatar display and photo selection in profile screens
    • -
  • Circular media thumbnails in lists or grids
    • -
  • Any tap target that must hold a user-supplied image
    • -
- -

Properties

- -

This control has no data properties. Configure it through method calls and respond to the Clicked event.

- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
circularImageButtonRoot element. Applies circular clip via border-radius: 50%.
circularImageButton__imageThe image layer. Absolutely positioned, fills the button, border-radius: 50%.
circularImageButton__noImageOverlayOverlay shown when no image is set. Absolutely positioned and centered.
circularImageButton__iconIcon inside the no-image overlay (typically an upload/camera glyph).
circularImageButton__uploadLabelText label inside the no-image overlay.
circularImageButton--hasImageModifier applied to the root when an image is present. Hides the no-image overlay.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
ClickedFired when the button receives a pointer-up event inside its bounds.none
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetImage(Texture2D texture, bool isDefault = false)Sets the displayed image from a Texture2D. Pass isDefault = true to treat the image as a placeholder (does not apply the --hasImage modifier).
SetImage(Sprite sprite, bool isDefault = false)Sets the displayed image from a Sprite. Same isDefault semantics.
SetUploadLabel(string text)Updates the text shown inside the no-image overlay.
ClearImage()Removes the current image and restores the no-image overlay.
SetImageTint(Color color)Applies a tint color to the image element.
- -

Using the Control

- -

Basic Setup

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class AvatarController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-    [SerializeField] private Texture2D _defaultAvatar;
-
-    private CircularImageButton _avatarButton;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-        _avatarButton = new CircularImageButton();
-
-        // Show a default placeholder image without hiding the overlay
-        _avatarButton.SetImage(_defaultAvatar, isDefault: true);
-        _avatarButton.SetUploadLabel("Tap to change");
-
-        _avatarButton.Clicked += OnAvatarTapped;
-        root.Add(_avatarButton);
-    }
-
-    private void OnAvatarTapped()
-    {
-        // Open native photo picker, then call SetImage with the result
-        Debug.Log("Avatar tapped — open photo picker");
-    }
-
-    private void ApplyPickedPhoto(Texture2D picked)
-    {
-        // isDefault: false — hides the overlay and marks the button as having an image
-        _avatarButton.SetImage(picked, isDefault: false);
-    }
-
-    private void ResetAvatar()
-    {
-        _avatarButton.ClearImage();
-    }
-}
-
- -

Tint and Dynamic Color

- -
// Grey-out the avatar when the profile is locked
-_avatarButton.SetImageTint(new Color(1f, 1f, 1f, 0.4f));
-
-// Restore full color
-_avatarButton.SetImageTint(Color.white);
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/collapsible-section/index.html b/_site_test/uitoolkit/controls/collapsible-section/index.html deleted file mode 100644 index 3e62ff4..0000000 --- a/_site_test/uitoolkit/controls/collapsible-section/index.html +++ /dev/null @@ -1,571 +0,0 @@ - - - - - -Collapsible Section — Unity UI Extensions - - - -Collapsible Section | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Collapsible Section

- - -

Animated expand/collapse section with header toggle and content container.

- - -
- - Navigation - - - - navigation - - collapse - - expand - - accordion - - section - -
-
-
- -
-

Summary

- -

CollapsibleSection is a container with a tappable header that expands or collapses its body content. The body transition is driven by a max-height animation (0 → 2000 px, 250 ms ease-out) triggered by the collapsibleSection--expanded modifier class, so no code-side animation is required for the open/close motion.

- -

Typical use cases:

- -
    -
  • FAQ accordion panels
    • -
  • Collapsible settings groups
    • -
  • Nested content trees inside scroll containers
    • -
  • Any section where body content should be hidden by default
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
IsExpandedGets or sets the current expanded state. Setting this value animates the body and fires OnExpandedChanged.bool
TitleTextGets or sets the header label text.string
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
collapsibleSectionRoot element.
collapsibleSection__headerTappable header row. Contains the title and chevron.
collapsibleSection__titleLabel element inside the header.
collapsibleSection__chevronChevron/arrow icon that rotates to indicate state.
collapsibleSection__bodyOuter body wrapper. Has max-height transition for the open/close animation.
collapsibleSection__bodyContentInner content container. Receives children added via AddBodyContent.
collapsibleSection--expandedModifier applied to the root when expanded. Drives the max-height transition and chevron rotation.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
OnExpandedChangedFired after the expanded state changes.bool isExpanded
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
AddBodyContent(VisualElement element)Appends a child element to the inner body content container.
SetBodyText(string text) : LabelConvenience method that creates and appends a Label with the given text. Returns the created label.
Toggle()Toggles the expanded state. Equivalent to IsExpanded = !IsExpanded.
- -

Using the Control

- -

Basic Setup

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class FaqController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        var section = new CollapsibleSection();
-        section.TitleText = "What is this app?";
-
-        // Add plain text body
-        section.SetBodyText(
-            "This app helps you track your daily habits and review progress over time.");
-
-        // Add a richer body element
-        var linkLabel = new Label("Learn more at example.com");
-        linkLabel.style.color = new StyleColor(new Color(0.35f, 0.65f, 1f));
-        section.AddBodyContent(linkLabel);
-
-        section.OnExpandedChanged += isExpanded =>
-        {
-            Debug.Log($"Section is now {(isExpanded ? "open" : "closed")}");
-        };
-
-        root.Add(section);
-    }
-}
-
- -

Programmatic Expand / Collapse

- -
// Open all sections on first visit
-foreach (var section in _faqSections)
-{
-    section.IsExpanded = true;
-}
-
-// Toggle a section from an external button
-_toggleButton.clicked += () => _detailsSection.Toggle();
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/color-toggle-button/index.html b/_site_test/uitoolkit/controls/color-toggle-button/index.html deleted file mode 100644 index 34b8138..0000000 --- a/_site_test/uitoolkit/controls/color-toggle-button/index.html +++ /dev/null @@ -1,607 +0,0 @@ - - - - - -Color Toggle Button — Unity UI Extensions - - - -Color Toggle Button | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Color Toggle Button

- - -

Toggle button that tints itself with a configurable accent colour when active.

- - -
- - Forms - - - - forms - - toggle - - color - - tint - - button - -
-
-
- -
-

Summary

- -

ColorToggleButton extends ToggleButton with per-instance tint colors, a ripple press animation, and a selection overlay. The background color is driven entirely by the tint values, making it straightforward to build color-coded toggle grids without USS variants.

- -

Typical use cases:

- -
    -
  • Color picker palette items
    • -
  • Labeled color-coded category toggles
    • -
  • Any toggle grid where each item has a distinct brand or theme color
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
IsSelectedInherited from ToggleButton. Gets or sets the selected state.bool
TintColorThe background tint used when the button is in its default (unselected) state.Color (read-only; use SetTintColor to change)
SelectedTintColorThe background tint used when the button is selected.Color (read-only; use SetSelectedTintColor to change)
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
toggleButtonRoot element (inherited from ToggleButton).
toggleButton__imageImage layer, 100% size, scale-to-fit (inherited).
toggleButton--selectedModifier applied when selected (inherited).
toggleButton__iconOptional icon element overlaid on the colored background.
toggleButton__ripplePrimary ripple circle that expands on press.
toggleButton__rippleSecondarySecondary ripple circle for the layered ripple effect.
toggleButton__selectedOverlayOverlay element shown when selected.
toggleButton__selectedOverlay--visibleModifier that makes the selected overlay visible.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
OnClickedInherited from ToggleButton. Fired on every pointer-down regardless of current state.none
- -

Constructors

- - - - - - - - - - - - - - - - - - -
SignatureDescription
ColorToggleButton(Color tintColor)Creates a button with the same tint color for both selected and unselected states.
ColorToggleButton(Color tintColor, Color selectedTintColor)Creates a button with distinct tints for each state.
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetTintColor(Color color)Updates the unselected background tint at runtime.
SetSelectedTintColor(Color color)Updates the selected background tint at runtime.
SetImage(Texture2D texture)Inherited. Sets the icon/image on the button.
ForceSelect()Inherited. Sets IsSelected = true without firing OnClicked.
ForceDeselect()Inherited. Sets IsSelected = false without firing OnClicked.
- -

Using the Control

- -

Color Palette Grid

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class ColorPaletteController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private static readonly Color[] PaletteColors = new[]
-    {
-        new Color(0.91f, 0.27f, 0.38f),   // red
-        new Color(0.25f, 0.56f, 0.96f),   // blue
-        new Color(0.18f, 0.80f, 0.44f),   // green
-        new Color(0.98f, 0.75f, 0.18f),   // yellow
-    };
-
-    private ColorToggleButton _activeButton;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-        var row = root.Q<VisualElement>("paletteRow");
-
-        foreach (var color in PaletteColors)
-        {
-            // Slightly lighter shade for selected state
-            var selectedColor = Color.Lerp(color, Color.white, 0.25f);
-            var btn = new ColorToggleButton(color, selectedColor);
-
-            btn.OnClicked += () =>
-            {
-                // Deselect previous
-                if (_activeButton != null && _activeButton != btn)
-                    _activeButton.ForceDeselect();
-
-                _activeButton = btn;
-                Debug.Log($"Selected color: {color}");
-            };
-
-            row.Add(btn);
-        }
-    }
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/color-toggle-group/index.html b/_site_test/uitoolkit/controls/color-toggle-group/index.html deleted file mode 100644 index 6bccd45..0000000 --- a/_site_test/uitoolkit/controls/color-toggle-group/index.html +++ /dev/null @@ -1,553 +0,0 @@ - - - - - -Color Toggle Group — Unity UI Extensions - - - -Color Toggle Group | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Color Toggle Group

- - -

Horizontally scrollable row of colour-tinted toggle buttons for multi-select.

- - -
- - Forms - - - - forms - - toggle - - group - - color - - multi-select - -
-
-
- -
-

Summary

- -

ColorToggleGroup manages a set of ColorToggleButton items as a single-selection group. It supports both tap-to-select and drag-to-select gestures, ensuring that only one color is selected at a time. Selection state is coordinated internally; consumers only need to respond to OnColorSelected.

- -

Typical use cases:

- -
    -
  • Full-screen or inline color pickers
    • -
  • Theme or accent color selectors
    • -
  • Tag or category color selectors
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
ColorsGets or sets the array of colors represented by the group. Changing this value rebuilds all child buttons.Color[]
SelectedColorGets the currently selected color. null if nothing is selected.Color? (nullable)
AlignmentControls the flex direction of the buttons container.FlexDirection
- -

USS Classes

- - - - - - - - - - - - - - - - - - -
ClassDescription
colorToggleGroupRoot element.
colorToggleGroup__containerFlex container that holds all ColorToggleButton children.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
OnColorSelectedFired when the user selects a color by tap or drag. Not fired when selection changes programmatically via SelectColor(color, propagateEvent: false).Color selectedColor
- -

Public Methods

- - - - - - - - - - - - - - - - - - -
SignatureDescription
DeselectAll()Clears the current selection without firing OnColorSelected.
SelectColor(Color color, bool propagateEvent = true)Programmatically selects the button whose color matches. Pass propagateEvent: false to suppress OnColorSelected.
- -

Using the Control

- -

Inline Color Picker

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class ThemeSelectorController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private ColorToggleGroup _colorGroup;
-    private Color _currentThemeColor = Color.white;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _colorGroup = new ColorToggleGroup();
-        _colorGroup.Colors = new[]
-        {
-            new Color(0.91f, 0.27f, 0.38f),
-            new Color(0.25f, 0.56f, 0.96f),
-            new Color(0.18f, 0.80f, 0.44f),
-            new Color(0.98f, 0.75f, 0.18f),
-            new Color(0.60f, 0.20f, 0.80f),
-        };
-        _colorGroup.Alignment = FlexDirection.Row;
-
-        _colorGroup.OnColorSelected += OnThemeColorPicked;
-
-        root.Q<VisualElement>("colorPickerContainer").Add(_colorGroup);
-
-        // Pre-select the saved theme color without firing the event
-        _colorGroup.SelectColor(_currentThemeColor, propagateEvent: false);
-    }
-
-    private void OnThemeColorPicked(Color color)
-    {
-        _currentThemeColor = color;
-        Debug.Log($"Theme color changed to {color}");
-        // Apply color to your UI here
-    }
-
-    private void ResetSelection()
-    {
-        _colorGroup.DeselectAll();
-    }
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/coming-soon-message/index.html b/_site_test/uitoolkit/controls/coming-soon-message/index.html deleted file mode 100644 index 3d733df..0000000 --- a/_site_test/uitoolkit/controls/coming-soon-message/index.html +++ /dev/null @@ -1,531 +0,0 @@ - - - - - -Coming Soon Message — Unity UI Extensions - - - -Coming Soon Message | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Coming Soon Message

- - -

Placeholder panel displaying a styled 'coming soon' message with icon.

- - -
- - Feedback - - - - feedback - - placeholder - - coming-soon - - panel - -
-
-
- -
-

Summary

- -

ComingSoonMessage is a simple full-area placeholder element that fills its container and communicates that a feature or screen is not yet available. It renders a background layer, a prominent title, and a descriptive message label.

- -

Typical use cases:

- -
    -
  • Placeholder screens during development or staged rollouts
    • -
  • Stub pages inside a ScrollSnap onboarding flow
    • -
  • In-progress feature sections within a settings or navigation layout
    • -
- -

Properties

- - - - - - - - - - - - - - - - -
NameDescriptionOptions
TitleGets or sets the large heading text.string
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
comingSoonMessageRoot element. Fills its parent and centers its contents.
comingSoonMessage__backgroundDecorative background layer (may carry color or texture).
comingSoonMessage__titleLarge heading label.
comingSoonMessage__labelSecondary descriptive message label below the title.
- -

Events

- -

This control does not emit events.

- -

Public Methods

- - - - - - - - - - - - - - -
SignatureDescription
SetMessage(string text)Sets the secondary descriptive message shown below the title.
- -

Using the Control

- -

Stub Page in a ScrollSnap

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class OnboardingController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-        var scrollSnap = root.Q<ScrollSnap>("onboardingSnap");
-
-        // Page 1 — real content
-        var welcomePage = new VisualElement();
-        welcomePage.AddToClassList("sample-page");
-        welcomePage.AddToClassList("sample-page--blue");
-        scrollSnap.Add(welcomePage);
-
-        // Page 2 — placeholder
-        var placeholder = new ComingSoonMessage();
-        placeholder.Title = "Social Features";
-        placeholder.SetMessage("Connect with friends and share your progress. Launching soon.");
-        scrollSnap.Add(placeholder);
-
-        // Page 3 — another placeholder
-        var placeholder2 = new ComingSoonMessage();
-        placeholder2.Title = "Challenges";
-        placeholder2.SetMessage("Weekly challenges and leaderboards are on their way.");
-        scrollSnap.Add(placeholder2);
-    }
-}
-
- -

Dynamic Title Update

- -
// Swap placeholder text based on user role
-if (user.IsPremium)
-{
-    _comingSoon.Title = "Advanced Analytics";
-    _comingSoon.SetMessage("Your detailed stats dashboard is being prepared.");
-}
-else
-{
-    _comingSoon.Title = "Premium Feature";
-    _comingSoon.SetMessage("Upgrade to unlock this section.");
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/grayscale-image/index.html b/_site_test/uitoolkit/controls/grayscale-image/index.html deleted file mode 100644 index c91e0f6..0000000 --- a/_site_test/uitoolkit/controls/grayscale-image/index.html +++ /dev/null @@ -1,555 +0,0 @@ - - - - - -Grayscale Image — Unity UI Extensions - - - -Grayscale Image | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Grayscale Image

- - -

Shader-based Image element that renders in greyscale with adjustable intensity.

- - -
- - Utilities - - - - utilities - - image - - grayscale - - shader - - effect - -
-
-
- -
-

Summary

- -

GrayscaleImage is an ImmediateModeElement that renders a sprite or texture using Graphics.DrawTexture and supports toggling a greyscale effect via a material property. The greyscale effect requires a custom Material that exposes _MainTex and _GreyscaleEnabled shader properties; without a compatible material the image renders in full color only.

- -

Typical use cases:

- -
    -
  • Profile or media images that switch to greyscale when disabled or locked
    • -
  • Toggling greyscale on achievement/badge imagery for locked states
    • -
  • Any image that needs a shader-driven color/greyscale toggle without a separate texture asset
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
SpritePropertyThe Sprite to render. Mutually exclusive with TextureProperty.Sprite
TexturePropertyThe Texture to render. Mutually exclusive with SpriteProperty.Texture
scaleModeHow the image is scaled within its bounds.ScaleMode
MaterialThe material used for rendering. Must expose _MainTex and _GreyscaleEnabled for the greyscale feature.Material
GreyscaleEnabledGets or sets whether the greyscale shader effect is active. Only functional when a compatible material is assigned.bool
MainTexturePropertyThe shader property name for the main texture.string (default "_MainTex")
GreyscaleTogglePropertyThe shader property name for the greyscale toggle.string (default "_GreyscaleEnabled")
- -

Constants

- - - - - - - - - - - - - - - - - - - - - -
NameValueDescription
DefaultMainTextureProperty"_MainTex"Default shader property name for the main texture.
DefaultGreyscaleToggleProperty"_GreyscaleEnabled"Default shader property name for the greyscale toggle.
- -

USS Classes

- - - - - - - - - - - - - - -
ClassDescription
grayscaleImageRoot element. Dimensions should be set via USS or inline style; the element uses its resolved layout rect for Graphics.DrawTexture.
- -

Events

- -

This control does not emit events. Repaint is triggered automatically by the immediate-mode element lifecycle.

- -

Public Methods

- -

This control exposes its API entirely through properties. No additional public methods are defined beyond those inherited from ImmediateModeElement.

- -

Using the Control

- -

Toggle Greyscale on a Locked Achievement

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class AchievementBadgeController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-    [SerializeField] private Sprite _badgeSprite;
-    [SerializeField] private Material _greyscaleMaterial; // shader with _MainTex + _GreyscaleEnabled
-
-    private GrayscaleImage _badgeImage;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _badgeImage = new GrayscaleImage();
-        _badgeImage.style.width = 80;
-        _badgeImage.style.height = 80;
-        _badgeImage.SpriteProperty = _badgeSprite;
-        _badgeImage.Material = _greyscaleMaterial;
-        _badgeImage.scaleMode = ScaleMode.ScaleToFit;
-
-        root.Q<VisualElement>("badgeContainer").Add(_badgeImage);
-    }
-
-    public void SetLocked(bool locked)
-    {
-        _badgeImage.GreyscaleEnabled = locked;
-    }
-}
-
- -

Texture-Based Rendering with Custom Property Names

- -
// If your shader uses different property names:
-_badgeImage.MainTextureProperty = "_BaseMap";
-_badgeImage.GreyscaleToggleProperty = "_UseGreyscale";
-_badgeImage.TextureProperty = _photoTexture;
-_badgeImage.GreyscaleEnabled = true;
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/icon-label-button/index.html b/_site_test/uitoolkit/controls/icon-label-button/index.html deleted file mode 100644 index c517041..0000000 --- a/_site_test/uitoolkit/controls/icon-label-button/index.html +++ /dev/null @@ -1,549 +0,0 @@ - - - - - -Icon Label Button — Unity UI Extensions - - - -Icon Label Button | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Icon Label Button

- - -

Horizontal row button combining a left-side icon with label and subtitle text.

- - -
- - Primitives - - - - primitives - - button - - icon - - label - - row - -
-
-
- -
-

Summary

- -

IconLabelButton is a full-width row button that pairs a 24 × 24 px icon on the left with a text label. It provides hover and pressed state modifier classes for visual feedback without custom USS.

- -

Typical use cases:

- -
    -
  • Menu and navigation row items
    • -
  • Action list rows (share, delete, report, etc.)
    • -
  • Settings list entries with a leading icon
    • -
- -

Properties

- - - - - - - - - - - - - - - - -
NameDescriptionOptions
TextGets or sets the button label text.string
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
iconLabelButtonRoot element. Full-width flex row.
iconLabelButton__buttonInner button element that wraps icon and label.
iconLabelButton__iconIcon element. Fixed at 24 × 24 px.
iconLabelButton__labelText label element next to the icon.
iconLabelButton--hoverModifier applied on pointer-enter.
iconLabelButton--pressedModifier applied while pointer is held down.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
ClickedFired when the button is tapped or clicked.none
- -

Public Methods

- -

No public methods beyond property access. Use the Text property and USS to configure the control.

- -

Using the Control

- - - -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class SideMenuController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-    [SerializeField] private Texture2D _homeIcon;
-    [SerializeField] private Texture2D _profileIcon;
-    [SerializeField] private Texture2D _settingsIcon;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-        var menu = root.Q<VisualElement>("sideMenu");
-
-        menu.Add(CreateMenuRow("Home", _homeIcon, () => NavigateTo("home")));
-        menu.Add(CreateMenuRow("Profile", _profileIcon, () => NavigateTo("profile")));
-        menu.Add(CreateMenuRow("Settings", _settingsIcon, () => NavigateTo("settings")));
-    }
-
-    private IconLabelButton CreateMenuRow(string label, Texture2D icon, System.Action onClicked)
-    {
-        var btn = new IconLabelButton();
-        btn.Text = label;
-
-        // Query by class name (first arg is element name — pass null; second is class name)
-        var iconEl = btn.Q(null, IconLabelButton.IconClass);
-        if (iconEl != null)
-            iconEl.style.backgroundImage = new StyleBackground(icon);
-
-        btn.Clicked += onClicked;
-        return btn;
-    }
-
-    private void NavigateTo(string screen)
-    {
-        Debug.Log($"Navigating to: {screen}");
-    }
-}
-
- -

USS Customization

- -

Override hover and pressed states in your project USS:

- -
.iconLabelButton--hover {
-    background-color: rgba(255, 255, 255, 0.06);
-}
-
-.iconLabelButton--pressed {
-    background-color: rgba(255, 255, 255, 0.12);
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/index.html b/_site_test/uitoolkit/controls/index.html deleted file mode 100644 index 7a72c60..0000000 --- a/_site_test/uitoolkit/controls/index.html +++ /dev/null @@ -1,129 +0,0 @@ - - - - - -UIToolkit Controls — Unity UIToolkit Extensions — Unity UI Extensions - - - -UIToolkit Controls — Unity UIToolkit Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -

Redirecting to UIToolkit Controls…

- -
- - - - - diff --git a/_site_test/uitoolkit/controls/loading-icon/index.html b/_site_test/uitoolkit/controls/loading-icon/index.html deleted file mode 100644 index 61ca296..0000000 --- a/_site_test/uitoolkit/controls/loading-icon/index.html +++ /dev/null @@ -1,533 +0,0 @@ - - - - - -Loading Icon — Unity UI Extensions - - - -Loading Icon | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Loading Icon

- - -

Animated spinner/loading indicator with configurable speed and colour.

- - -
- - Feedback - - - - feedback - - loading - - spinner - - animation - - indicator - -
-
-
- -
-

Summary

- -

LoadingIcon is a continuously rotating image element used to indicate background work. Rotation is driven by a scheduled callback that fires every 16 ms. An optional blockInteraction flag captures pointer events so the user cannot interact with elements beneath the spinner while it is active.

- -

Typical use cases:

- -
    -
  • Async operation feedback (API calls, data loading)
    • -
  • Image upload or file transfer progress indicator
    • -
  • Form submission spinner overlay
    • -
- -

Properties

- -

This control is configured through method calls. The visibility and animation state are reflected in modifier classes.

- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
loadingIconRoot element.
loadingIcon__imageThe rotating image. Fixed at 40 × 40 px.
loadingIcon--animatingModifier applied while rotation is active.
loadingIcon--visibleModifier applied while the icon is shown. Pair with USS to control opacity or display.
- -

Events

- -

This control does not emit events.

- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetIcon(Texture2D texture)Sets the texture used for the spinning image.
PlayLoading(float customSpeed = 1f, bool blockInteraction = false)Starts the rotation animation. customSpeed is the duration of one full 360° rotation in seconds; lower values spin faster. When blockInteraction is true the control captures all pointer events.
StopLoading()Stops the rotation, releases pointer capture, and removes the --animating and --visible modifiers.
- -

Using the Control

- -

Simple Loading Overlay

- -
using System.Threading.Tasks;
-using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class UploadController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-    [SerializeField] private Texture2D _spinnerTexture;
-
-    private LoadingIcon _spinner;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _spinner = new LoadingIcon();
-        _spinner.SetIcon(_spinnerTexture);
-
-        root.Q<VisualElement>("overlayContainer").Add(_spinner);
-
-        root.Q<Button>("uploadButton").clicked += () => _ = StartUpload();
-    }
-
-    private async Task StartUpload()
-    {
-        // 0.8s per rotation, block taps on underlying UI
-        _spinner.PlayLoading(customSpeed: 0.8f, blockInteraction: true);
-
-        try
-        {
-            await UploadFileAsync();
-        }
-        finally
-        {
-            _spinner.StopLoading();
-        }
-    }
-
-    private async Task UploadFileAsync()
-    {
-        // Simulate async upload
-        await Task.Delay(2000);
-    }
-}
-
- -

Speed Variants

- -
// Slow, calm indicator — 1.5 seconds per revolution
-_spinner.PlayLoading(customSpeed: 1.5f);
-
-// Fast, urgent indicator — 0.4 seconds per revolution
-_spinner.PlayLoading(customSpeed: 0.4f);
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/page-dot-indicator/index.html b/_site_test/uitoolkit/controls/page-dot-indicator/index.html deleted file mode 100644 index 98bcb45..0000000 --- a/_site_test/uitoolkit/controls/page-dot-indicator/index.html +++ /dev/null @@ -1,548 +0,0 @@ - - - - - -Page Dot Indicator — Unity UI Extensions - - - -Page Dot Indicator | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Page Dot Indicator

- - -

Animated pagination dots that reflect the current page of a scroll view.

- - -
- - Feedback - - - - feedback - - pagination - - dots - - indicator - - scroll - -
-
-
- -
-

Summary

- -

PageDotIndicator renders a row of dot indicators that communicate the current position within a paged sequence. All dots up to and including CurrentPage are styled as completed. The dot list is rebuilt automatically when TotalPages changes. Colors can be overridden via USS custom properties or inline method calls.

- -

Typical use cases:

- -
    -
  • Onboarding flow page position dots
    • -
  • Carousel or ScrollSnap position indicator
    • -
  • Multi-step form or wizard step markers
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
CurrentPageGets or sets the zero-based index of the current page. Updates dot completed state.int
TotalPagesGets or sets the total number of dots to render. Changing this value rebuilds all dot elements.int
NormalizedProgressGets the current progress as a value in [0, 1]. Computed from CurrentPage / max(TotalPages - 1, 1).float (read-only)
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
pageDotIndicatorRoot element.
pageDotIndicator__dotsContainerFlex container that holds the individual dot elements.
pageDotIndicator__dotIndividual dot element. Fixed at 8 × 8 px with 4 px margin on each side.
pageDotIndicator__dot--completedModifier applied to every dot whose index is less than or equal to CurrentPage.
- -

Events

- -

This control does not emit events.

- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetProgress(int currentPage, int totalPages)Sets both CurrentPage and TotalPages in one call. Rebuilds dots if totalPages changed.
SetCompletedColor(string hex)Sets the background color of completed dots using a hex string (e.g. "#e94560").
SetPendingColor(string hex)Sets the background color of pending (not yet reached) dots using a hex string.
SetColors(string completedHex, string pendingHex)Convenience method that sets both completed and pending colors in one call.
- -

Using the Control

- -

Syncing with ScrollSnap

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class OnboardingController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private ScrollSnap _scrollSnap;
-    private PageDotIndicator _dotIndicator;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-        _scrollSnap = root.Q<ScrollSnap>("onboardingSnap");
-
-        _dotIndicator = new PageDotIndicator();
-        _dotIndicator.SetColors(completedHex: "#e94560", pendingHex: "#555555");
-        _dotIndicator.SetProgress(currentPage: 0, totalPages: _scrollSnap.PageCount);
-
-        root.Q<VisualElement>("footerContainer").Add(_dotIndicator);
-
-        _scrollSnap.PageChanged += pageIndex =>
-        {
-            _dotIndicator.CurrentPage = pageIndex;
-        };
-    }
-}
-
- -

Standalone Step Indicator

- -
// Set up a 5-step progress tracker, starting at step 2
-_dotIndicator.SetProgress(currentPage: 2, totalPages: 5);
-
-// Advance one step
-_dotIndicator.CurrentPage++;
-
-// Read normalized progress for use in other UI
-float progress = _dotIndicator.NormalizedProgress; // 0.0 – 1.0
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/pill-button/index.html b/_site_test/uitoolkit/controls/pill-button/index.html deleted file mode 100644 index e3ad73a..0000000 --- a/_site_test/uitoolkit/controls/pill-button/index.html +++ /dev/null @@ -1,568 +0,0 @@ - - - - - -Pill Button — Unity UI Extensions - - - -Pill Button | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Pill Button

- - -

Primary CTA button in a rounded pill shape with press flash animation.

- - -
- - Primitives - - - - primitives - - button - - pill - - cta - - animation - -
-
-
- -
-

Summary

- -

PillButton is a rounded, gradient-filled call-to-action button with a flash feedback animation on press. The gradient is generated from two colors (inner and outer) into a 256 × 1 Texture2D that is set as the background image. A white overlay fades in briefly on tap to provide tactile feedback. The gradient texture is destroyed when the element detaches from the panel.

- -

Typical use cases:

- -
    -
  • Primary call-to-action buttons (Continue, Submit, Get Started)
    • -
  • Form submission buttons
    • -
  • Prominent single-action navigation controls
    • -
- -

Properties

- - - - - - - - - - - - - - - - -
NameDescriptionOptions
TextGets or sets the button label text.string
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
pillButtonRoot element.
pillButton__backgroundGradient background layer. border-radius: 999px, overflow: hidden. Holds the gradient texture.
pillButton__flashWhite overlay element used for the press flash effect.
pillButton__flash--activeModifier that triggers a 100 ms opacity transition on the flash overlay.
pillButton__labelText label element centered over the button.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
ClickedFired when the button is tapped or clicked. The flash animation plays before this event is dispatched.none
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetInnerColor(string hex)Sets the inner (left-edge) gradient color using a hex string (e.g. "#e94560"). Rebuilds the gradient texture.
SetOuterColor(string hex)Sets the outer (right-edge) gradient color using a hex string. Rebuilds the gradient texture.
SetTextColor(Color color)Sets the label text color.
SetFontSize(float size)Sets the label font size in pixels.
- -

Using the Control

- -

Primary CTA

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class OnboardingFooterController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private PillButton _continueButton;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _continueButton = new PillButton();
-        _continueButton.Text = "Continue";
-        _continueButton.SetInnerColor("#e94560");
-        _continueButton.SetOuterColor("#9b1d35");
-        _continueButton.SetTextColor(Color.white);
-        _continueButton.SetFontSize(16f);
-
-        _continueButton.Clicked += OnContinueTapped;
-
-        root.Q<VisualElement>("footer").Add(_continueButton);
-    }
-
-    private void OnContinueTapped()
-    {
-        Debug.Log("Continue tapped");
-    }
-}
-
- -

Dynamic Color Update

- -
// Reflect form validity through button color
-private void UpdateButtonState(bool isValid)
-{
-    if (isValid)
-    {
-        _continueButton.SetInnerColor("#18cc6e");
-        _continueButton.SetOuterColor("#0d7a42");
-        _continueButton.Text = "Submit";
-    }
-    else
-    {
-        _continueButton.SetInnerColor("#555555");
-        _continueButton.SetOuterColor("#333333");
-        _continueButton.Text = "Fill all fields";
-    }
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/pill-input-field/index.html b/_site_test/uitoolkit/controls/pill-input-field/index.html deleted file mode 100644 index d24c0b4..0000000 --- a/_site_test/uitoolkit/controls/pill-input-field/index.html +++ /dev/null @@ -1,614 +0,0 @@ - - - - - -Pill Input Field — Unity UI Extensions - - - -Pill Input Field | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Pill Input Field

- - -

Rounded pill-shaped input field with floating label and validation state.

- - -
- - Forms - - - - forms - - input - - pill - - label - - text-field - -
-
-
- -
-

Summary

- -

PillInputField is a styled text input with a floating label and pill-shaped container. It handles mobile focus correctly by tracking pointer movement to distinguish taps from drags (8 px slop threshold) before opening the on-screen keyboard. Validation fires automatically on blur via OnValidation. The label is hidden when empty.

- -

Typical use cases:

- -
    -
  • Login and signup forms
    • -
  • Profile editing screens
    • -
  • Any form that needs a labeled, styled input compatible with mobile keyboards
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
LabelGets or sets the label text shown above (or inside when empty) the input.string
ValueGets or sets the current input text. Setting this fires OnValueChanged.string
KeyboardTypeGets or sets the touch keyboard type for mobile platforms.TouchScreenKeyboardType
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
pillInputFieldRoot element.
pillInputField__labelFloating label element. Hidden automatically when Label is empty.
pillInputField__inputThe inner TextField element.
pillInputField__inputTextContentInternal text content element used for style overrides.
pillInputField--passwordModeModifier applied when password mode is active.
pillInputField--multilineModifier applied when multiline mode is active.
- -

Events

- - - - - - - - - - - - - - - - - - - - - -
NameDescriptionArguments
OnValueChangedFired whenever the input value changes.string newValue
OnValidationFired when the field loses focus (blur). Use this to show inline validation errors.string currentValue
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
Focus()Programmatically focuses the input field.
Blur()Programmatically removes focus from the input field.
SetPlaceholder(string text)Sets the placeholder hint text shown when the field is empty and unfocused.
SetPasswordMode(bool enabled)Enables or disables password masking. Applies or removes the --passwordMode modifier.
SetMaxLength(int length)Sets the maximum number of characters allowed.
SetMultiline(bool enabled)Enables or disables multiline input. Applies or removes the --multiline modifier.
SetBackgroundColor(Color color)Sets the background color of the pill container.
SetTextColor(Color color)Sets the text color of the input.
SetFontSize(float size)Sets the font size of the input text.
Validate()Manually triggers OnValidation with the current value.
- -

Using the Control

- -

Login Form

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class LoginController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private PillInputField _emailField;
-    private PillInputField _passwordField;
-    private string _emailError;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-        var form = root.Q<VisualElement>("loginForm");
-
-        _emailField = new PillInputField();
-        _emailField.Label = "Email";
-        _emailField.SetPlaceholder("your@email.com");
-        _emailField.KeyboardType = TouchScreenKeyboardType.EmailAddress;
-        _emailField.OnValueChanged += _ => _emailError = null;
-        _emailField.OnValidation += value =>
-        {
-            if (!value.Contains("@"))
-                _emailError = "Enter a valid email address";
-        };
-
-        _passwordField = new PillInputField();
-        _passwordField.Label = "Password";
-        _passwordField.SetPlaceholder("••••••••");
-        _passwordField.SetPasswordMode(true);
-        _passwordField.SetMaxLength(64);
-
-        form.Add(_emailField);
-        form.Add(_passwordField);
-
-        root.Q<Button>("loginButton").clicked += OnLoginTapped;
-    }
-
-    private void OnLoginTapped()
-    {
-        _emailField.Validate();
-        _passwordField.Validate();
-
-        if (_emailError != null)
-        {
-            Debug.Log(_emailError);
-            return;
-        }
-
-        Debug.Log($"Login: {_emailField.Value}");
-    }
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/pill-selector/index.html b/_site_test/uitoolkit/controls/pill-selector/index.html deleted file mode 100644 index f7cc503..0000000 --- a/_site_test/uitoolkit/controls/pill-selector/index.html +++ /dev/null @@ -1,563 +0,0 @@ - - - - - -Pill Selector — Unity UI Extensions - - - -Pill Selector | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Pill Selector

- - -

Row of pill-shaped radio buttons for exclusive single-option selection.

- - -
- - Forms - - - - forms - - selector - - pill - - radio - - single-select - -
-
-
- -
-

Summary

- -

PillSelector is a read-only pill-shaped field with a chevron icon that fires a Clicked event when tapped. It does not manage a picker internally; the consumer is responsible for displaying the selection UI and writing the chosen value back to the Value property.

- -

Typical use cases:

- -
    -
  • Inline date or time picker trigger row
    • -
  • Option selector row that opens a modal or bottom sheet
    • -
  • Any read-only labeled field that indicates a “tap to change” interaction
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
LabelGets or sets the descriptive label shown above the selector value.string
ValueGets or sets the currently displayed selected value text.string
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
pillSelectorRoot element.
pillSelector__labelLabel element shown above the value.
pillSelector__containerPill-shaped row containing the value label and chevron.
pillSelector__clickableLabelThe text element inside the container that displays Value.
pillSelector__iconChevron icon element. Fixed at 16 × 16 px.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
ClickedFired when the user taps the selector row. The consumer should open a picker and update Value with the result.none
- -

Public Methods

- - - - - - - - - - - - - - -
SignatureDescription
SetFontSize(float size)Sets the font size for the value label.
- -

Using the Control

- -

Date Picker Trigger

- -
using System;
-using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class EventFormController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private PillSelector _dateSelector;
-    private DateTime _selectedDate = DateTime.Today;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _dateSelector = new PillSelector();
-        _dateSelector.Label = "Event Date";
-        _dateSelector.Value = _selectedDate.ToString("MMMM d, yyyy");
-
-        _dateSelector.Clicked += OnDateSelectorTapped;
-
-        root.Q<VisualElement>("eventForm").Add(_dateSelector);
-    }
-
-    private void OnDateSelectorTapped()
-    {
-        // Open your date picker UI here.
-        // When the user confirms a date, call ApplyDate().
-        Debug.Log("Open date picker");
-        ApplyDate(DateTime.Today.AddDays(7)); // example result
-    }
-
-    private void ApplyDate(DateTime date)
-    {
-        _selectedDate = date;
-        _dateSelector.Value = date.ToString("MMMM d, yyyy");
-    }
-}
-
- -

Country Selector Row

- -
_countrySelector = new PillSelector();
-_countrySelector.Label = "Country";
-_countrySelector.Value = "Select country";
-_countrySelector.SetFontSize(15f);
-
-_countrySelector.Clicked += () =>
-{
-    // Show modal country list
-    // On confirmation: _countrySelector.Value = chosenCountry;
-};
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/quadrant-stepper/index.html b/_site_test/uitoolkit/controls/quadrant-stepper/index.html deleted file mode 100644 index 10f1dfd..0000000 --- a/_site_test/uitoolkit/controls/quadrant-stepper/index.html +++ /dev/null @@ -1,628 +0,0 @@ - - - - - -Quadrant Stepper — Unity UI Extensions - - - -Quadrant Stepper | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Quadrant Stepper

- - -

Four-directional step selector displayed as an overlay compass widget.

- - -
- - Navigation - - - - navigation - - stepper - - direction - - compass - - selector - -
-
-
- -
-

Summary

- -

QuadrantStepper is a segmented control that divides its width into equally-sized tap targets. A sliding overlay animates between the selected segment. By default it is created with four equal segments; the option list can be replaced at any time via SetOptions. The overlay sits at 90% of the control’s height (5% inset top and bottom) to create a floating appearance.

- -

Typical use cases:

- -
    -
  • Tab bar or mode switcher
    • -
  • Category or filter selector
    • -
  • Any fixed-option segmented navigation control
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
SelectedIndexGets or sets the index of the currently selected segment.int
SelectedTextGets the label text of the currently selected segment.string (read-only)
- -

USS Custom Properties

- - - - - - - - - - - - - - - - -
NameDescriptionDefault
--quadrantStepper-animation-duration-msDuration of the sliding overlay animation in milliseconds.Defined in package USS
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
quadrantStepperRoot element.
quadrantStepper__overlayThe sliding highlight overlay. Absolutely positioned. Transitions between segments.
quadrantStepper__segmentsFlex row container holding all segment elements.
quadrantStepper__segmentIndividual segment tap target. Flex-grows equally to divide available width.
quadrantStepper__labelText label inside each segment.
is-selectedModifier applied to the currently selected segment.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
SelectionChangedFired when the selected segment changes via tap or programmatic call (unless suppressed).int index, string text
- -

Constructors

- - - - - - - - - - - - - - - - - - -
SignatureDescription
QuadrantStepper()Creates a stepper with four default options ("1", "2", "3", "4").
QuadrantStepper(IReadOnlyList<string> options)Creates a stepper with the provided option labels.
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetOptions(IReadOnlyList<string> options)Replaces all segment labels. Resets selection to index 0.
SetOptions(IReadOnlyList<string> options, int defaultIndex)Replaces all segment labels and sets the initial selection to defaultIndex.
bool SetOptions(IReadOnlyList<string> options, string defaultText)Replaces labels and attempts to select the segment matching defaultText. Returns true if the text was found and selected.
SetSelectedIndex(int index)Selects the segment at index with animation and fires SelectionChanged.
SetSelectedIndex(int index, bool notify, bool animate)Selects the segment at index with optional event notification and animation.
bool TrySetSelectedText(string text, bool notify, bool animate)Selects the segment whose label matches text. Returns false if not found.
ForceUnselect()Removes the selection without firing SelectionChanged. The overlay is hidden.
- -

Using the Control

- -

Mode Switcher

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-using System.Collections.Generic;
-
-public class ModeController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private QuadrantStepper _modeStepper;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        var modes = new List<string> { "Daily", "Weekly", "Monthly", "All Time" };
-        _modeStepper = new QuadrantStepper(modes);
-
-        // Default to "Weekly" without firing the event
-        _modeStepper.SetOptions(modes, defaultIndex: 1);
-
-        _modeStepper.SelectionChanged += (index, text) =>
-        {
-            Debug.Log($"Mode changed to [{index}] {text}");
-            LoadData(text);
-        };
-
-        root.Q<VisualElement>("filterContainer").Add(_modeStepper);
-    }
-
-    private void LoadData(string period)
-    {
-        Debug.Log($"Loading data for period: {period}");
-    }
-
-    public void ResetToDefault()
-    {
-        // Restore to "Daily" silently, no animation
-        _modeStepper.SetSelectedIndex(0, notify: false, animate: false);
-    }
-}
-
- -

Restoring Saved State

- -
// Restore selection from saved preference
-string savedMode = PlayerPrefs.GetString("selectedMode", "Weekly");
-bool found = _modeStepper.TrySetSelectedText(savedMode, notify: false, animate: false);
-if (!found)
-    _modeStepper.SetSelectedIndex(0, notify: false, animate: false);
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/rounded-input-field/index.html b/_site_test/uitoolkit/controls/rounded-input-field/index.html deleted file mode 100644 index 244b957..0000000 --- a/_site_test/uitoolkit/controls/rounded-input-field/index.html +++ /dev/null @@ -1,585 +0,0 @@ - - - - - -Rounded Input Field — Unity UI Extensions - - - -Rounded Input Field | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Rounded Input Field

- - -

Card-style text input with rounded corners and focus/error colour states.

- - -
- - Forms - - - - forms - - input - - rounded - - text-field - - focus - -
-
-
- -
-

Summary

- -

RoundedInputField is a text input with rounded corners and a custom placeholder implementation. The placeholder is rendered as an absolutely-positioned Label that is shown or hidden based on whether the current Value is empty. This avoids the style limitations of the built-in Unity TextField placeholder.

- -

Typical use cases:

- -
    -
  • Search bars and filter inputs
    • -
  • Notes or comment text areas
    • -
  • Inline editing fields within list rows
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
ValueGets or sets the current text value. Setting this updates the underlying TextField and fires ValueChanged.string
PlaceholderGets or sets the placeholder hint text. Shown when Value is empty and the field is not focused.string
IsPasswordGets or sets password masking.bool
MultilineGets or sets multiline input mode.bool
MaxLengthGets or sets the maximum allowed character count. -1 means no limit.int
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
roundedInputFieldRoot element.
roundedInputField__textFieldThe TextField element. Apply border-radius here for the rounded shape.
roundedInputField__inputInternal input content area inside the TextField.
roundedInputField__placeholderAbsolutely-positioned Label that renders the placeholder text. Toggled visible when Value is empty.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
ValueChangedFired when the text value changes.string newValue
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetValueWithoutNotify(string value)Sets the field value without firing ValueChanged. Useful for initializing from saved state.
SetBackgroundColor(Color color)Sets the background color of the text field.
SetTextColor(Color color)Sets the input text color.
SetPlaceholderColor(Color color)Sets the color of the placeholder label.
SetFontSize(float size)Sets the font size for both input text and placeholder.
Focus()Programmatically focuses the input.
- -

Using the Control

- - - -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class ContactSearchController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private RoundedInputField _searchField;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _searchField = new RoundedInputField();
-        _searchField.Placeholder = "Search contacts...";
-        _searchField.SetPlaceholderColor(new Color(0.5f, 0.5f, 0.5f, 1f));
-        _searchField.SetBackgroundColor(new Color(0.15f, 0.15f, 0.2f, 1f));
-        _searchField.SetTextColor(Color.white);
-        _searchField.SetFontSize(14f);
-
-        _searchField.ValueChanged += OnSearchChanged;
-
-        root.Q<VisualElement>("searchContainer").Add(_searchField);
-    }
-
-    private void OnSearchChanged(string query)
-    {
-        Debug.Log($"Filter contacts by: {query}");
-    }
-}
-
- -

Notes Field with Initial Value

- -
_notesField = new RoundedInputField();
-_notesField.Multiline = true;
-_notesField.MaxLength = 500;
-_notesField.Placeholder = "Add a note...";
-
-// Initialize from saved data without triggering a change event
-_notesField.SetValueWithoutNotify(savedNotes);
-
-_notesField.ValueChanged += text => _isDirty = true;
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/scroll-snap/index.html b/_site_test/uitoolkit/controls/scroll-snap/index.html deleted file mode 100644 index b5e7c0a..0000000 --- a/_site_test/uitoolkit/controls/scroll-snap/index.html +++ /dev/null @@ -1,800 +0,0 @@ - - - - - -Scroll Snap — Unity UI Extensions - - - -Scroll Snap | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Scroll Snap

- - -

Swipe/drag paged scroll container that snaps to discrete pages by index.

- - -
- - Navigation - - - - navigation - - scroll - - snap - - pages - - swipe - -
-
-
- -
-

Summary

- -

ScrollSnap is a page-based UI Toolkit container that arranges children as pages and snaps to a page boundary after gesture or wheel input. It supports:

- -
    -
  • Horizontal or vertical paging
    • -
  • Programmatic page navigation (GoToPage, MoveNext, MovePrevious)
    • -
  • Optional touch/pointer gesture control
    • -
  • Optional validation/restriction flow for swipe attempts
    • -
  • Smooth snap animation with configurable easing
    • -
  • Page spacing via per-page paddings
    • -
- -

Typical use cases:

- -
    -
  • Onboarding or wizard flows
    • -
  • Carousel-like page navigation
    • -
  • Validation-gated step transitions (for example: required fields before moving forward)
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
OrientationPaging axis for layout and swipe direction.Horizontal (default), Vertical
PageSizeExplicit page size in pixels. If <= 0, uses viewport resolved size (width for horizontal, height for vertical).float (<= 0 means auto)
ManualMovementEnabledEnables pointer/touch and wheel gesture handling by the control. If disabled, input gestures are ignored and only programmatic navigation changes pages.true / false (default false)
OnlySinglePageSwipeAllowedLimits swipe transitions to one page max per completed gesture. Keeps behavior predictable for step-based flows.true / false (default true)
ValidatePageChangeEnables swipe validation behavior using direction flags and optional async validator callback.true / false (default false)
CanMoveNextPageForward movement gate when validation is enabled. Typically set externally before allowing the next forward step.true / false (default true, reset to false after page change when validation is enabled)
CanMoveBackPageBackward movement gate when validation is enabled.true / false (default true, reset to false after page change when validation is enabled)
AllowMoveBackMaster backward permission gate when validation is enabled. If false, backward swipe attempts are restricted and snap back.true / false (default true)
ValidationDragLimitMaximum blocked-drag preview distance as a fraction of page size (0..1). Example: 0.2 allows 20% drag before clamp while restricted.float in 0..1 (default 0.2)
IsValidatingPageChangeRead-only state indicating an async page validation callback is currently running.bool (read-only)
PagePaddingLeftLeft padding/gap per page (applied as margin).float pixels, >= 0
PagePaddingRightRight padding/gap per page (applied as margin).float pixels, >= 0
PagePaddingTopTop padding/gap per page (applied as margin).float pixels, >= 0
PagePaddingBottomBottom padding/gap per page (applied as margin).float pixels, >= 0
PageCountNumber of child pages in contentContainer.int (read-only)
CurrentPageIndexCurrent snapped page index.int (read-only)
- -

USS Custom Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionDefault
--scrollsnap-easingSnap animation easing function name.Linear
--scrollsnap-page-padding-leftLeft page margin/padding from USS.0px
--scrollsnap-page-padding-rightRight page margin/padding from USS.0px
--scrollsnap-page-padding-topTop page margin/padding from USS.0px
--scrollsnap-page-padding-bottomBottom page margin/padding from USS.0px
--scrollsnap-validation-drag-limitOptional validation drag-limit value (fraction). Use values like 0.2, 0.15, 0.3.Not set unless provided
- -

Events

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionArguments
PageChangedFired when CurrentPageIndex changes after a completed transition/snap.(int currentPageIndex)
OnPageStartChangeFired when a swipe attempt resolves to a target page and validation logic begins. Host can pre-load target content and inspect whether movement is currently allowed by flags.(int targetPage, bool moveAllowed)
OnPageChangeRestrictedFired when a swipe attempt is denied and the control has completed returning/snapping back to the active page. Useful for user feedback animations/toasts. The argument is the attempted destination page index.(int attemptedTargetPage)
OnValidatePageTransitionOptional async validator callback. Called when validation mode is enabled and direction flags allow movement. Return true to proceed, false to restrict and snap back.(int targetPage) => Task<bool>
- -

Note: OnPageChangePrevented is not a built-in ScrollSnap event name. It is a consumer-defined callback method name commonly subscribed to OnPageChangeRestricted, for example: scrollSnap.OnPageChangeRestricted += OnPageChangePrevented;.

- -

Using the Control in Manual Mode

- -

Manual mode means gesture input is disabled and page movement is API-driven.

- -
    -
  • Set ManualMovementEnabled = false
    • -
  • Navigate only through GoToPage, MoveNext, MovePrevious
    • -
  • Use force: true when you want to bypass validation gates
    • -
- -

Example:

- -
var snap = new ScrollSnap();
-snap.ManualMovementEnabled = false;
-
-// Programmatic navigation
-snap.GoToPage(2, animate: true);
-snap.MoveNext(animate: true);
-
-// Always move, even if validation mode and flags are restrictive
-snap.MoveNext(animate: true, force: true);
-
- -

Recommended when:

- -
    -
  • Navigation is fully controlled by external UI buttons
    • -
  • You need deterministic transitions with no user drag gestures
    • -
  • Validation/permissions are handled outside swipe interaction
    • -
- -

Using the Control in Swipe Mode

- -

Swipe mode means gesture input is enabled and users can drag/swipe pages directly.

- -
    -
  • Set ManualMovementEnabled = true
    • -
  • Optionally keep OnlySinglePageSwipeAllowed = true for step-by-step flows
    • -
  • Enable ValidatePageChange = true to gate movement with restriction behavior
    • -
- -

Example:

- -
var snap = new ScrollSnap();
-snap.ManualMovementEnabled = true;
-snap.OnlySinglePageSwipeAllowed = true;
-snap.ValidatePageChange = true;
-
-// Host-controlled movement gates
-snap.CanMoveNextPage = false;
-snap.CanMoveBackPage = true;
-snap.AllowMoveBack = true;
-
-snap.OnPageStartChange += (targetPage, moveAllowed) =>
-{
-    // Prepare content for target page, optionally show pre-transition UI
-};
-
-snap.OnPageChangeRestricted += targetPage =>
-{
-    // Show why movement is blocked
-};
-
-snap.OnValidatePageTransition = async targetPage =>
-{
-    // Async validation (API call, form checks, etc.)
-    await Task.Yield();
-    return true;
-};
-
- -

Restricted Movement and Event Behavior

- -

When ValidatePageChange = true, swipe transitions follow this flow:

- -
    -
  1. User swipes and a target page is derived.
    2. -
  2. Direction gates are checked: -
      -
    • Forward: CanMoveNextPage
      • -
    • Backward: AllowMoveBack and CanMoveBackPage
      • -
    -
    3. -
  3. OnPageStartChange(targetPage, moveAllowed) is fired.
    4. -
  4. If blocked by gates: -
      -
    • Drag is clamped by ValidationDragLimit
      • -
    • On release, the control snaps back
      • -
    • OnPageChangeRestricted(targetPage) is fired after snap-back completes
      • -
    -
    5. -
  5. If allowed by gates and OnValidatePageTransition is assigned: -
      -
    • Async callback runs
      • -
    • true => transition proceeds
      • -
    • false => restricted snap-back and OnPageChangeRestricted (after snap-back completes)
      • -
    -
    6. -
  6. On successful transition completion, PageChanged(newPageIndex) is fired.
    7. -
- -

Authorization Flow (Validation-Gated Navigation)

- -

Use this flow when page movement must be authorized by host logic (for example onboarding step completion, server-side checks, required field validation).

- -

Core Idea

- -
    -
  • OnPageStartChange is the early signal: user attempted a transition.
    • -
  • moveAllowed indicates whether current direction gates allow a possible transition.
    • -
  • OnValidatePageTransition is the async authorization hook.
    • -
  • OnPageChangeRestricted is the post-snap-back signal (fires after return to the original page is complete).
    • -
- -

Direction Detection

- -

At OnPageStartChange(targetPage, moveAllowed), compare:

- -
    -
  • CurrentPageIndex (current/origin page)
    • -
  • targetPage (attempted destination)
    • -
- -

Rules:

- -
    -
  • targetPage > CurrentPageIndex => forward
    • -
  • targetPage < CurrentPageIndex => backward
    • -
  • targetPage == CurrentPageIndex => no effective move
    • -
- -

CurrentPageIndex does not advance until a successful page transition completes and PageChanged is raised.

- -

Event Sequence: Authorized Success

- -
    -
  1. OnPageStartChange(targetPage, true)
    2. -
  2. Optional OnValidatePageTransition(targetPage) returns true
    3. -
  3. Transition animates to target
    4. -
  4. PageChanged(newPageIndex)
    5. -
- -

Event Sequence: Restricted by Gates

- -
    -
  1. OnPageStartChange(targetPage, false)
    2. -
  2. Control animates back to origin page
    3. -
  3. OnPageChangeRestricted(attemptedTargetPage) fires after snap-back completion
    4. -
- -

Event Sequence: Async Authorization Denied

- -
    -
  1. OnPageStartChange(targetPage, true)
    2. -
  2. OnValidatePageTransition(targetPage) returns false
    3. -
  3. Control animates back to origin page
    4. -
  4. OnPageChangeRestricted(attemptedTargetPage) fires after snap-back completion
    5. -
- - - -
    -
  • In OnPageStartChange: detect direction and optionally do lightweight target prep only when moveAllowed is true.
    • -
  • In OnPageChangeRestricted: start validation/error animation (this now runs when the control has already returned to the origin page).
    • -
  • In PageChanged: finalize UI state for the newly active page.
    • -
- -

Important Notes

- -
    -
  • While async validation is running, IsValidatingPageChange is true and additional swipe gesture processing is ignored.
    • -
  • CanMoveNextPage and CanMoveBackPage are reset to false after a page change when validation mode is enabled.
    • -
  • Use fraction values for drag limit configuration (for example 0.2 for 20%).
    • -
  • Programmatic movement remains available at all times via the force override:
    • -
- -
snap.MoveNext(animate: true, force: true);
-
- -

Programmatic API Summary

- - - - - - - - - - - - - - - - - - - - - - -
MethodPurpose
GoToPage(int index, bool animate = true, bool force = false)Navigate to a specific page
MoveNext(bool animate = true, bool force = false)Navigate to next page
MovePrevious(bool animate = true, bool force = false)Navigate to previous page
- -

Use force: true when a host flow has completed external validation and wants to advance immediately regardless of current swipe-gate state.

- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/step-progress-bar/index.html b/_site_test/uitoolkit/controls/step-progress-bar/index.html deleted file mode 100644 index 3961b79..0000000 --- a/_site_test/uitoolkit/controls/step-progress-bar/index.html +++ /dev/null @@ -1,546 +0,0 @@ - - - - - -Step Progress Bar — Unity UI Extensions - - - -Step Progress Bar | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Step Progress Bar

- - -

Segmented progress bar with labelled milestone steps and fill animation.

- - -
- - Feedback - - - - feedback - - progress - - steps - - bar - - milestone - -
-
-
- -
-

Summary

- -

StepProgressBar is a horizontal progress bar that expresses progress as a fraction of discrete steps. The fill width is NormalizedProgress × 100%. The gradient is generated from two colors (inner and outer) into a 256 × 1 Texture2D. A warning is logged and maxSteps is clamped to 1 when a non-positive value is passed to SetProgress.

- -

Typical use cases:

- -
    -
  • Onboarding flow completion indicator
    • -
  • Multi-step form or wizard progress
    • -
  • Task or challenge completion tracker
    • -
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionOptions
NormalizedProgressGets the current fill fraction in [0, 1]. Computed from CurrentSteps / MaxSteps.float (read-only)
CurrentStepsGets the current step count.int (read-only)
MaxStepsGets the total number of steps.int (read-only)
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
stepProgressBarRoot element.
stepProgressBar__backgroundBackground track. border-radius: 4px, overflow: hidden.
stepProgressBar__fillFill element. Width is driven inline as a percentage.
- -

Events

- -

This control does not emit events.

- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetProgress(int steps, int maxSteps)Sets the current and maximum steps. Recomputes NormalizedProgress and updates the fill width. Logs a warning if maxSteps <= 0 and clamps it to 1.
SetInnerColor(string hex)Sets the inner (left-edge) gradient color. Rebuilds the gradient texture.
SetOuterColor(string hex)Sets the outer (right-edge) gradient color. Rebuilds the gradient texture.
SetGradientColors(string innerColorHex, string outerColorHex)Convenience method that sets both gradient colors in one call.
- -

Using the Control

- -

Onboarding Progress

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class OnboardingProgressController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private StepProgressBar _progressBar;
-    private int _currentStep = 0;
-    private const int TotalSteps = 5;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _progressBar = new StepProgressBar();
-        _progressBar.SetGradientColors(innerColorHex: "#e94560", outerColorHex: "#9b1d35");
-        _progressBar.SetProgress(_currentStep, TotalSteps);
-
-        root.Q<VisualElement>("progressContainer").Add(_progressBar);
-    }
-
-    public void AdvanceStep()
-    {
-        _currentStep = Mathf.Min(_currentStep + 1, TotalSteps);
-        _progressBar.SetProgress(_currentStep, TotalSteps);
-        Debug.Log($"Progress: {_progressBar.NormalizedProgress:P0}");
-    }
-}
-
- -

Dynamic Color Feedback

- -
// Green when complete, default brand color otherwise
-private void RefreshBarColor()
-{
-    if (_progressBar.CurrentSteps >= _progressBar.MaxSteps)
-        _progressBar.SetGradientColors("#18cc6e", "#0d7a42");
-    else
-        _progressBar.SetGradientColors("#e94560", "#9b1d35");
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/toast-swipe-dismiss/index.html b/_site_test/uitoolkit/controls/toast-swipe-dismiss/index.html deleted file mode 100644 index b0d1c3d..0000000 --- a/_site_test/uitoolkit/controls/toast-swipe-dismiss/index.html +++ /dev/null @@ -1,589 +0,0 @@ - - - - - -Toast Swipe Dismiss Manipulator — Unity UI Extensions - - - -Toast Swipe Dismiss Manipulator | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Toast Swipe Dismiss Manipulator

- - -

Gesture manipulator that allows swiping a toast/notification to dismiss it.

- - -
- - Feedback - - - - feedback - - toast - - swipe - - dismiss - - gesture - -
-
-
- -
-

Summary

- -

ToastSwipeDismissManipulator is a PointerManipulator that adds swipe-to-dismiss gesture recognition to any VisualElement. It supports both horizontal and vertical dismiss axes. The gesture axis is locked after 12 px of movement along the dominant direction. Dismiss triggers when travel exceeds 80 px or velocity exceeds 1 100 px/s. Incomplete swipes snap back in 140 ms; dismissed elements animate out in 180 ms.

- -

All geometry values (dismiss travel distances, offset target) are provided as delegates evaluated lazily at gesture time, so the manipulator does not need to be re-created when layout changes.

- -

Typical use cases:

- -
    -
  • Swipe-to-dismiss notification toasts
    • -
  • Dismissible alert or info banners
    • -
  • Swipeable items in a list or feed
    • -
- -

Behavior Constants

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstantValueDescription
Tap slop8 pxMaximum movement before a tap becomes a drag.
Swipe axis lock threshold12 pxMovement required along the dominant axis before the axis is locked.
Swipe dismiss threshold80 pxTravel distance that triggers a dismiss.
Dismiss velocity threshold1 100 px/sPointer velocity that triggers a dismiss regardless of travel distance.
Snap-back duration140 msAnimation duration for returning to the origin position.
Dismiss duration180 msAnimation duration for the final dismiss slide-out.
- -

USS Classes

- -

This manipulator does not add USS classes. Visual feedback is applied by translating the getOffsetTarget element inline.

- -

Events / Callbacks

- -

All behavior is communicated through constructor-provided delegates.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Delegate parameterDescription
Func<bool> canInteractCalled on pointer-down. Return false to ignore the gesture entirely.
Func<Vector2, bool> canStartAtPositionCalled with the pointer position. Return false to suppress gesture start (e.g. when a button lives in part of the toast).
Func<float> getHorizontalDismissTravelDistanceReturns the horizontal distance in pixels required to trigger dismiss.
Func<float> getVerticalDismissTravelDistanceReturns the vertical distance in pixels required to trigger dismiss.
Func<VisualElement> getOffsetTargetReturns the element that will be translated during the swipe. Typically the root toast element.
Action onInteractionStartedCalled when the gesture crosses tap slop and is confirmed as a drag.
Action onInteractionAbortedCalled when a drag that was started does not meet dismiss criteria and the snap-back completes.
Action onTappedCalled when the pointer is released within tap slop (no significant movement).
Action onDismissedCalled after the dismiss animation completes. Dispose of the toast element here.
- -

Public Methods

- - - - - - - - - - - - - - -
SignatureDescription
ResetState()Cancels any in-progress gesture and immediately restores the offset target to its origin position. Call this if the toast is hidden or replaced externally while a swipe is in progress.
- -

Using the Control

- -

Swipe-to-Dismiss Toast

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class ToastController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-
-    private VisualElement _toastRoot;
-    private ToastSwipeDismissManipulator _dismissManipulator;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-        ShowToast("Session saved successfully.");
-    }
-
-    private void ShowToast(string message)
-    {
-        _toastRoot = new VisualElement();
-        _toastRoot.AddToClassList("toast");
-
-        var label = new Label(message);
-        _toastRoot.Add(label);
-
-        _dismissManipulator = new ToastSwipeDismissManipulator(
-            canInteract: () => true,
-            canStartAtPosition: _ => true,
-            getHorizontalDismissTravelDistance: () => 80f,
-            getVerticalDismissTravelDistance: () => 80f,
-            getOffsetTarget: () => _toastRoot,
-            onInteractionStarted: () => Debug.Log("Swipe started"),
-            onInteractionAborted: () => Debug.Log("Swipe aborted — snapping back"),
-            onTapped: () => Debug.Log("Toast tapped"),
-            onDismissed: RemoveToast
-        );
-
-        _toastRoot.AddManipulator(_dismissManipulator);
-        _document.rootVisualElement.Q<VisualElement>("toastLayer").Add(_toastRoot);
-    }
-
-    private void RemoveToast()
-    {
-        _toastRoot?.RemoveFromHierarchy();
-        _toastRoot = null;
-    }
-
-    // Call this if you need to forcibly clear the toast without waiting for a gesture
-    public void ForceClose()
-    {
-        _dismissManipulator?.ResetState();
-        RemoveToast();
-    }
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/controls/toggle-button/index.html b/_site_test/uitoolkit/controls/toggle-button/index.html deleted file mode 100644 index 0e97005..0000000 --- a/_site_test/uitoolkit/controls/toggle-button/index.html +++ /dev/null @@ -1,554 +0,0 @@ - - - - - -Toggle Button — Unity UI Extensions - - - -Toggle Button | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
-
- - -

Toggle Button

- - -

Flat toggle switch with animated indicator and on/off label support.

- - -
- - Forms - - - - forms - - toggle - - switch - - button - - boolean - -
-
-
- -
-

Summary

- -

ToggleButton is a simple image button that toggles its selected state on every pointer-down event. OnClicked fires on every press regardless of the resulting state, making it straightforward to react to both selection and deselection in a single handler. Use ForceSelect and ForceDeselect to set state programmatically without firing the event.

- -

Typical use cases:

- -
    -
  • Audio mute / unmute toggle
    • -
  • Dark mode / light mode switch
    • -
  • Any binary feature toggle with icon feedback
    • -
- -

Properties

- - - - - - - - - - - - - - - - -
NameDescriptionOptions
IsSelectedGets or sets the current selected state. Setting this directly applies or removes the --selected modifier but does not fire OnClicked.bool
- -

USS Classes

- - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
toggleButtonRoot element.
toggleButton__imageThe image element. 100% width and height, scale-to-fit background.
toggleButton--selectedModifier applied when IsSelected is true. Use in USS to swap icon or apply tint.
- -

Events

- - - - - - - - - - - - - - - - -
NameDescriptionArguments
OnClickedFired on every pointer-down event, before the state is toggled. The new IsSelected value is already reflected when the handler runs.none
- -

Public Methods

- - - - - - - - - - - - - - - - - - - - - - -
SignatureDescription
SetImage(Texture2D texture)Sets the background texture of the image element.
ForceSelect()Sets IsSelected = true and applies --selected without firing OnClicked.
ForceDeselect()Sets IsSelected = false and removes --selected without firing OnClicked.
- -

Using the Control

- -

Audio Toggle

- -
using UnityEngine;
-using UnityEngine.UIElements;
-using UnityUIToolkit.Extensions;
-
-public class AudioToggleController : MonoBehaviour
-{
-    [SerializeField] private UIDocument _document;
-    [SerializeField] private Texture2D _audioOnIcon;
-    [SerializeField] private Texture2D _audioOffIcon;
-
-    private ToggleButton _audioToggle;
-
-    private void OnEnable()
-    {
-        var root = _document.rootVisualElement;
-
-        _audioToggle = new ToggleButton();
-        _audioToggle.SetImage(_audioOnIcon);
-
-        // Restore saved preference silently
-        bool isMuted = PlayerPrefs.GetInt("AudioMuted", 0) == 1;
-        if (isMuted)
-            _audioToggle.ForceSelect();
-
-        _audioToggle.OnClicked += OnAudioToggled;
-        root.Q<VisualElement>("toolbarContainer").Add(_audioToggle);
-    }
-
-    private void OnAudioToggled()
-    {
-        bool isMuted = _audioToggle.IsSelected;
-        AudioListener.volume = isMuted ? 0f : 1f;
-        PlayerPrefs.SetInt("AudioMuted", isMuted ? 1 : 0);
-
-        // Swap icon based on new state
-        _audioToggle.SetImage(isMuted ? _audioOffIcon : _audioOnIcon);
-        Debug.Log($"Audio {(isMuted ? "muted" : "unmuted")}");
-    }
-}
-
- -

USS Icon Swap via Modifier

- -

Rather than swapping the texture in code you can declare both icon states in USS:

- -
.toggleButton__image {
-    background-image: url("audio-on.png");
-}
-
-.toggleButton--selected .toggleButton__image {
-    background-image: url("audio-off.png");
-}
-
- -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/index.html b/_site_test/uitoolkit/index.html deleted file mode 100644 index 4abffc7..0000000 --- a/_site_test/uitoolkit/index.html +++ /dev/null @@ -1,715 +0,0 @@ - - - - - -UIToolkit Controls — Unity UIToolkit Extensions — Unity UI Extensions - - - -UIToolkit Controls — Unity UIToolkit Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
UI Toolkit Package
-

UIToolkit Extensions

-

18 modern controls and manipulators for Unity's UI Toolkit framework. Built for runtime UI — ready for production.

-
- com.unity.uitoolkitextensions - MIT Licence - Unity 2022.3+ -
-
- Browse Controls - Installation Guide - GitHub Repo -
-
-
- -
-
-

Installation

- -
-
- - - -
- -
-

Install via OpenUPM

-
- 
openupm add com.unity.uitoolkitextensions
- -
-

Or add the scoped registry manually in Edit → Project Settings → Package Manager:

-
- 
Name: package.openupm.com
-URL: https://package.openupm.com
-Scope: com.unity.uitoolkitextensions
- -
-
- -
-

Install via Git URL

-

Open the Package Manager (Window → Package Manager), click + → Add package from git URL and paste:

-
- 
https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions.git
- -
-
- -
-

Manual / Embedded Package

-
    -
  1. Download the latest release from the Releases page
    2. -
  2. Extract and place the folder in your project's Packages/ directory
    3. -
  3. Unity will automatically detect and import the package
    4. -
-
-
-
-
- -
-
-

All Controls

- -
-
- -
- -
- - - - - - -
-
- -
- - - - - - - -
-
-

Scroll Snap

- Navigation -
-

Swipe/drag paged scroll container that snaps to discrete pages by index.

-
- - - navigation - - scroll - - snap - -
-
- - - - - - - - -
-
-

Collapsible Section

- Navigation -
-

Animated expand/collapse section with header toggle and content container.

-
- - - navigation - - collapse - - expand - -
-
- - - - - - - - -
-
-

Quadrant Stepper

- Navigation -
-

Four-directional step selector displayed as an overlay compass widget.

-
- - - navigation - - stepper - - direction - -
-
- - - - - - - - -
-
-

Pill Input Field

- Forms -
-

Rounded pill-shaped input field with floating label and validation state.

-
- - - forms - - input - - pill - -
-
- - - - - - - - -
-
-

Rounded Input Field

- Forms -
-

Card-style text input with rounded corners and focus/error colour states.

-
- - - forms - - input - - rounded - -
-
- - - - - - - - -
-
-

Pill Selector

- Forms -
-

Row of pill-shaped radio buttons for exclusive single-option selection.

-
- - - forms - - selector - - pill - -
-
- - - - - - - - -
-
-

Toggle Button

- Forms -
-

Flat toggle switch with animated indicator and on/off label support.

-
- - - forms - - toggle - - switch - -
-
- - - - - - - - -
-
-

Color Toggle Button

- Forms -
-

Toggle button that tints itself with a configurable accent colour when active.

-
- - - forms - - toggle - - color - -
-
- - - - - - - - -
-
-

Color Toggle Group

- Forms -
-

Horizontally scrollable row of colour-tinted toggle buttons for multi-select.

-
- - - forms - - toggle - - group - -
-
- - - - - - - - -
-
-

Step Progress Bar

- Feedback -
-

Segmented progress bar with labelled milestone steps and fill animation.

-
- - - feedback - - progress - - steps - -
-
- - - - - - - - -
-
-

Page Dot Indicator

- Feedback -
-

Animated pagination dots that reflect the current page of a scroll view.

-
- - - feedback - - pagination - - dots - -
-
- - - - - - - - -
-
-

Loading Icon

- Feedback -
-

Animated spinner/loading indicator with configurable speed and colour.

-
- - - feedback - - loading - - spinner - -
-
- - - - - - - - -
-
-

Toast Swipe Dismiss Manipulator

- Feedback -
-

Gesture manipulator that allows swiping a toast/notification to dismiss it.

-
- - - feedback - - toast - - swipe - -
-
- - - <a href="/uitoolkit/controls/coming-soon-message/" - class="control-card uitk-context" - data-category="feedback" - data-name="coming soon message" - data-desc="placeholder panel displaying a styled "coming soon" message with icon." - data-tags="feedback placeholder coming-soon panel" - aria-label="Coming Soon Message — Placeholder panel displaying a styled "coming soon" message with icon."> - - - - - -
-
-

Coming Soon Message

- Feedback -
-

Placeholder panel displaying a styled "coming soon" message with icon.

-
- - - feedback - - placeholder - - coming-soon - -
-
- </a> - - - - - - - -
-
-

Pill Button

- Primitives -
-

Primary CTA button in a rounded pill shape with press flash animation.

-
- - - primitives - - button - - pill - -
-
- - - - - - - - -
-
-

Circular Image Button

- Primitives -
-

Circular avatar/icon button with mask, border, and selected-state styling.

-
- - - primitives - - button - - circular - -
-
- - - - - - - - -
-
-

Icon Label Button

- Primitives -
-

Horizontal row button combining a left-side icon with label and subtitle text.

-
- - - primitives - - button - - icon - -
-
- - - - - - - - -
-
-

Grayscale Image

- Utilities -
-

Shader-based Image element that renders in greyscale with adjustable intensity.

-
- - - utilities - - image - - grayscale - -
-
- - -
- - -
-
- -
- - - - - diff --git a/_site_test/uitoolkit/install/index.html b/_site_test/uitoolkit/install/index.html deleted file mode 100644 index 3d3f421..0000000 --- a/_site_test/uitoolkit/install/index.html +++ /dev/null @@ -1,258 +0,0 @@ - - - - - -Install UIToolkit Extensions — Unity UIToolkit Extensions — Unity UI Extensions - - - -Install UIToolkit Extensions — Unity UIToolkit Extensions | Unity UI Extensions - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
UI Toolkit Package
-

Installing UIToolkit Extensions

-

Two ways to add com.unity.uitoolkitextensions to your Unity project. OpenUPM is the recommended approach.

-
- com.unity.uitoolkitextensions - MIT Licence - Unity 2022.3+ -
-
-
- -
-
- -

Method 1 — OpenUPM (Recommended)

-

OpenUPM is the fastest and most reliable installation method. It supports automatic dependency resolution and version management.

- -

Option A: OpenUPM CLI

-

If you have the OpenUPM CLI installed, run:

-
- 
openupm add com.unity.uitoolkitextensions
- -
- -

Option B: Scoped Registry (manual)

-

Open Edit → Project Settings → Package Manager and add the following scoped registry:

-
- 
Name: package.openupm.com
-URL:  https://package.openupm.com
-Scope: com.unity.uitoolkitextensions
- -
-

Then open Window → Package Manager, switch the dropdown to My Registries, find UIToolkit Extensions, and click Install.

- -
-
- -
-
- -

Method 2 — Git URL

-

Requires Git to be installed on your machine and accessible on the system path.

-
    -
  1. Open Window → Package Manager
    2. -
  2. Click + and select Add package from git URL…
    3. -
  3. Paste the URL below and click Add:
    4. -
-
- 
https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions.git
- -
-

Check the Releases page for all available version tags. Append a tag to pin a specific version, for example:

-
- 
https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions.git#1.0.0
- -
- -
-
- -
-
- -

Method 3 — Manual / Embedded Package

-

Use this when you need full local control over the package source, or when you're working offline.

-
    -
  1. Go to the latest release and download the source archive
    2. -
  2. Extract so you have a folder named com.unity.uitoolkitextensions
    3. -
  3. Move that folder into your project's Packages/ directory (alongside manifest.json)
    4. -
  4. Unity will detect and import the package automatically
    5. -
- -
-
- -
-
- -

Verifying the Installation

-

After installation you should see the package listed in Window → Package Manager under In Project. All controls are available under the UnityUIToolkit.Extensions namespace.

-

Controls can be instantiated in C# or declared in UXML:

-
- 
// C#
-using UnityUIToolkit.Extensions;
-var toggle = new ToggleButton();
-root.Add(toggle);
- -
-
- 
<!-- UXML -->
-<UnityUIToolkit.Extensions.ToggleButton />
- -
- -
-
- -
-
- -

Requirements

-
    -
  • Unity 6 LTS or later
    • -
  • Unity's UI Toolkit module (included by default in Unity 6)
    • -
  • No additional dependencies required
    • -
- -
- Runtime vs Editor UI — All controls target runtime UI Toolkit panels. Editor-window usage is possible but some controls (particularly gesture-based ones) may behave differently outside a game view context. -
- -
-
- -
-
-

Ready to explore the controls?

-

Browse all 18 UIToolkit controls with full API reference and code examples.

-
- Browse UIToolkit Controls - Report an Issue -
-
-
- -
- - - - - diff --git a/add_frontmatter.py b/add_frontmatter.py deleted file mode 100644 index 62bd047..0000000 --- a/add_frontmatter.py +++ /dev/null @@ -1,127 +0,0 @@ -#!/usr/bin/env python3 -""" -Prepends Jekyll front matter to uGUI control .md files and fixes image paths. -Run from the Unity-UI-Extensions.GitHub.io directory. -""" -import os, re - -CONTROLS_DIR = "Controls" - -# Map: filename (without .md) -> front matter data -CONTROLS = [ - ("Accordion", "Accordion", "Layout", "/ugui/controls/accordion/", "An Accordion style control with animated expandable/collapsible sections.", False, ["layout","accordion","collapse","expand","panel"]), - ("AutoCompleteComboBox", "AutoComplete ComboBox", "Input", "/ugui/controls/autocomplete-combobox/", "Combobox with live-filter autocomplete suggestions as the user types.", False, ["input","combobox","autocomplete","dropdown","search"]), - ("BoxSlider", "Box Slider", "Input", "/ugui/controls/box-slider/", "2D drag-handle slider that outputs both X and Y values simultaneously.", True, ["input","slider","2d","xy","drag"]), - ("CardUI", "Card UI", "Layout", "/ugui/controls/card-ui/", "2D and 3D card flip/stack animations for content presentation.", False, ["layout","card","flip","3d","animation"]), - ("ColorPicker", "Color Picker", "Input", "/ugui/controls/color-picker/", "Full HSV colour picker with hex input, alpha slider, and preset swatches.", True, ["input","color","colour","picker","hsv","hex"]), - ("ComboBox", "ComboBox", "Input", "/ugui/controls/combobox/", "Editable dropdown with keyboard navigation and multi-select capability.", False, ["input","combobox","dropdown","select"]), - ("ContentScrollSnapHorizontal","Content Scroll Snap Horizontal","Layout","/ugui/controls/content-scroll-snap-horizontal/","Snap-to-page horizontal scroll container with automatic page detection.", False, ["layout","scroll","snap","horizontal","pagination"]), - ("CooldownButton", "Cooldown Button", "Input", "/ugui/controls/cooldown-button/", "Button with an animated cooldown arc that prevents rapid re-clicking.", True, ["input","button","cooldown","timer","animation"]), - ("CurlyUI", "CurlyUI", "Effects", "/ugui/controls/curly-ui/", "Warps any uGUI graphic with configurable horizontal and vertical curves.", True, ["effects","curve","warp","mesh","distort"]), - ("DiamondGraph", "Diamond Graph", "Primitives", "/ugui/controls/diamond-graph/", "Radar/spider chart rendered as a configurable diamond polygon shape.", True, ["primitives","chart","radar","spider","graph","polygon"]), - ("DropDownList", "DropDown List", "Input", "/ugui/controls/dropdown-list/", "Styleable dropdown list with animated open/close and custom item rendering.", False, ["input","dropdown","select","list"]), - ("FancyScrollView", "Fancy Scroll View", "Layout", "/ugui/controls/fancy-scroll-view/", "High-performance scroll view with virtual item pooling and custom layouts.", False, ["layout","scroll","virtual","performance","pooling"]), - ("FlowLayoutGroup", "Flow Layout Group", "Layout", "/ugui/controls/flow-layout-group/", "Automatically wraps child elements into rows or columns like CSS flexbox.", True, ["layout","flow","wrap","grid","auto-layout"]), - ("Gradient", "Gradient", "Effects", "/ugui/controls/gradient/", "Applies a two-colour vertex gradient to any uGUI graphic component.", True, ["effects","gradient","colour","vertex","text"]), - ("Gradient2", "Gradient 2", "Effects", "/ugui/controls/gradient2/", "Four-corner gradient effect with independent colour control per vertex.", False, ["effects","gradient","four-corner","vertex","colour"]), - ("GridRawImage", "Grid Raw Image", "Primitives", "/ugui/controls/grid-raw-image/", "RawImage that tiles a texture in a grid pattern with UV offset control.", False, ["primitives","image","grid","tile","texture"]), - ("HorizontalScrollSnap", "Horizontal Scroll Snap", "Layout", "/ugui/controls/horizontal-scroll-snap/", "Paged horizontal scroll view that snaps to discrete content pages.", False, ["layout","scroll","snap","horizontal","pages"]), - ("LetterSpacing", "Letter Spacing", "Effects", "/ugui/controls/letter-spacing/", "Adds configurable character spacing (tracking) to uGUI Text components.", True, ["effects","text","letter-spacing","tracking","typography"]), - ("MenuSystem", "Menu System", "Navigation", "/ugui/controls/menu-system/", "Hierarchical animated menu with slide, fade, and scale transition modes.", True, ["navigation","menu","hierarchy","transition","animated"]), - ("MonoSpacing", "Mono Spacing", "Effects", "/ugui/controls/mono-spacing/", "Forces monospace character widths on any uGUI Text component.", True, ["effects","text","monospace","spacing","typography"]), - ("NonDrawingGraphic", "Non-Drawing Graphic", "Utilities", "/ugui/controls/non-drawing-graphic/", "Invisible raycast-blocking graphic — enables hit areas without any visual.", True, ["utilities","raycast","invisible","hit-area","clickable"]), - ("PaginationManager", "Pagination Manager", "Utilities", "/ugui/controls/pagination-manager/", "Connects a ScrollSnap or ContentScrollSnap to dot-style pagination indicators.", False, ["utilities","pagination","dots","scrollsnap","indicator"]), - ("RadialLayout", "Radial Layout", "Utilities", "/ugui/controls/radial-layout/", "Arranges child elements in a circle or arc at configurable radius and angle.", True, ["utilities","layout","radial","circular","arc"]), - ("RadialSlider", "Radial Slider", "Input", "/ugui/controls/radial-slider/", "Circular arc slider with configurable start angle, range, and fill style.", True, ["input","slider","radial","circular","arc"]), - ("RangeSlider", "Range Slider", "Input", "/ugui/controls/range-slider/", "Dual-handle slider for selecting a minimum/maximum value range.", True, ["input","slider","range","min","max","dual"]), - ("RectTransformEditor", "Rect Transform Editor", "Utilities", "/ugui/controls/rect-transform-editor/", "Editor-only helper that adds extra transform manipulation handles in the Scene view.", False, ["utilities","editor","rect-transform","inspector","tools"]), - ("ReorderableList", "Reorderable List", "Layout", "/ugui/controls/reorderable-list/", "Drag-and-drop list and grid layout with visual reordering feedback.", False, ["layout","list","drag","drop","reorder"]), - ("ResetSelectableHighlight","Reset Selectable Highlight", "Utilities", "/ugui/controls/reset-selectable-highlight/", "Clears stuck hover/selected highlight states on Selectable components.", False, ["utilities","selectable","highlight","reset","state"]), - ("ScrollConflictManager", "Scroll Conflict Manager", "Utilities", "/ugui/controls/scroll-conflict-manager/", "Resolves scroll direction conflicts when nested ScrollRects overlap.", False, ["utilities","scroll","conflict","nested","scrollrect"]), - ("ScrollRectEx", "Scroll Rect Ex", "Layout", "/ugui/controls/scroll-rect-ex/", "Enhanced ScrollRect with momentum, deceleration tuning, and edge effects.", False, ["layout","scroll","scrollrect","momentum","enhanced"]), - ("ScrollRectLinker", "Scroll Rect Linker", "Layout", "/ugui/controls/scroll-rect-linker/", "Synchronises multiple ScrollRect components so they scroll in tandem.", False, ["layout","scroll","sync","linked","scrollrect"]), - ("ScrollRectTweener", "Scroll Rect Tweener", "Layout", "/ugui/controls/scroll-rect-tweener/", "Programmatically scrolls a ScrollRect to a target position with easing.", False, ["layout","scroll","tween","animate","scrollrect"]), - ("ScrollSnap", "Scroll Snap", "Layout", "/ugui/controls/scroll-snap/", "Perspective scroll snap with 3D carousel-style page transitions.", True, ["layout","scroll","snap","perspective","carousel","3d"]), - ("Segment", "Segment", "Input", "/ugui/controls/segment/", "Individual button segment used as a child within a SegmentedControl.", False, ["input","segment","button","selectable"]), - ("SegmentedControl", "Segmented Control", "Input", "/ugui/controls/segmented-control/", "iOS-style segmented control for choosing one option from a small set.", True, ["input","segmented","toggle","select","ios"]), - ("SelectableScaler", "Selectable Scaler", "Utilities", "/ugui/controls/selectable-scaler/", "Scales a Selectable component up/down on hover and press events.", True, ["utilities","selectable","scale","hover","press","animation"]), - ("SelectionBox", "Selection Box", "Input", "/ugui/controls/selection-box/", "Drag to draw a rubber-band selection rectangle over multiple UI elements.", False, ["input","selection","drag","marquee","multi-select"]), - ("SoftAlphaMask", "Soft Alpha Mask", "Effects", "/ugui/controls/soft-alpha-mask/", "Uses a greyscale mask texture to softly clip UI content at the edges.", False, ["effects","mask","alpha","clip","soft"]), - ("Stepper", "Stepper", "Input", "/ugui/controls/stepper/", "+/- increment buttons for numeric input with configurable step size.", True, ["input","stepper","increment","decrement","numeric"]), - ("TabNavigation", "Tab Navigation", "Navigation", "/ugui/controls/tab-navigation/", "Keyboard-navigable tab panel system with animated content switching.", True, ["navigation","tabs","keyboard","panel","switch"]), - ("TableLayoutGroup", "Table Layout Group", "Layout", "/ugui/controls/table-layout-group/", "CSS-style table layout that arranges UI elements into rows and columns.", True, ["layout","table","grid","rows","columns"]), - ("TextPic", "TextPic", "Effects", "/ugui/controls/textpic/", "Embeds inline sprite images inside uGUI Text using custom tags.", True, ["effects","text","sprite","inline","emoji","rich-text"]), - ("TileSizeFitter", "Tile Size Fitter", "Layout", "/ugui/controls/tile-size-fitter/", "Constrains child tiles to a fixed aspect ratio within a grid layout.", False, ["layout","tile","aspect-ratio","grid","fitter"]), - ("ToolTip", "ToolTip", "Utilities", "/ugui/controls/tooltip/", "Follows-cursor tooltip that displays rich text on pointer enter/exit.", False, ["utilities","tooltip","hover","popup","cursor"]), - ("UICircleSegmented", "UI Circle Segmented", "Primitives", "/ugui/controls/ui-circle-segmented/", "Segmented ring/pie chart renderer with configurable slice count and gaps.", False, ["primitives","circle","pie","ring","segmented","chart"]), - ("UIFlippable", "UI Flippable", "Effects", "/ugui/controls/ui-flippable/", "Mirrors any graphic component horizontally or vertically at runtime.", True, ["effects","flip","mirror","graphic","transform"]), - ("UIGraphicSector", "UI Graphic Sector", "Primitives", "/ugui/controls/ui-graphic-sector/", "Renders a filled sector (wedge/pie-slice) graphic with configurable arc.", False, ["primitives","sector","arc","wedge","pie","graphic"]), - ("UIGridRenderer", "UI Grid Renderer", "Primitives", "/ugui/controls/ui-grid-renderer/", "Procedurally renders a grid of lines using Unity's UI mesh system.", True, ["primitives","grid","lines","mesh","renderer"]), - ("UIHighlightable", "UI Highlightable", "Utilities", "/ugui/controls/ui-highlightable/", "Adds programmatic hover-highlight colour transitions to any Graphic.", True, ["utilities","highlight","hover","colour","transition"]), - ("UILineConnector", "UI Line Connector", "Primitives", "/ugui/controls/ui-line-connector/", "Draws connecting lines between RectTransform anchors with configurable width.", True, ["primitives","line","connector","link","bezier"]), - ("UILineRenderer", "UI Line Renderer", "Primitives", "/ugui/controls/ui-line-renderer/", "Smooth multi-point UI line with configurable thickness, dash, and colour.", False, ["primitives","line","polyline","chart","draw"]), - ("UIParticleSystem", "UI Particle System", "Effects", "/ugui/controls/ui-particle-system/", "Renders Unity Particle Systems within the uGUI canvas layer.", True, ["effects","particles","vfx","canvas","render"]), - ("UIPolygon", "UI Polygon", "Primitives", "/ugui/controls/ui-polygon/", "Renders any regular or irregular polygon as a filled UI graphic.", False, ["primitives","polygon","shape","graphic","mesh"]), - ("UIScrollToSelection", "UI Scroll To Selection", "Utilities", "/ugui/controls/ui-scroll-to-selection/", "Automatically scrolls a ScrollRect to keep the selected element in view.", False, ["utilities","scroll","selection","focus","auto-scroll"]), - ("UIScrollToSelectionXY", "UI Scroll To Selection XY", "Utilities", "/ugui/controls/ui-scroll-to-selection-xy/", "Auto-scrolls a 2D ScrollRect to keep the selected element in view on both axes.", False, ["utilities","scroll","selection","xy","auto-scroll"]), - ("UISelectableExtension", "UI Selectable Extension", "Utilities", "/ugui/controls/ui-selectable-extension/", "Extends Selectable with extra state events and programmatic selection.", False, ["utilities","selectable","events","extension","state"]), - ("UIVerticalScroller", "UI Vertical Scroller", "Layout", "/ugui/controls/ui-vertical-scroller/", "Vertical scroller with centre-focus zooming — elements scale by distance.", False, ["layout","scroll","vertical","zoom","scale"]), - ("UI_InfiniteScroll", "UI Infinite Scroll", "Utilities", "/ugui/controls/ui-infinite-scroll/", "Loops ScrollRect content indefinitely in horizontal or vertical mode.", True, ["utilities","scroll","infinite","loop","scrollrect"]), - ("UI_Knob", "UI Knob", "Input", "/ugui/controls/ui-knob/", "Rotary knob input with configurable min/max angle and loop support.", False, ["input","knob","rotary","dial","rotate"]), - ("UI_MagneticInfiniteScroll","UI Magnetic Infinite Scroll","Utilities", "/ugui/controls/ui-magnetic-infinite-scroll/", "Infinite scroll with magnetic snap-to-item behaviour and deceleration.", False, ["utilities","scroll","infinite","magnetic","snap"]), - ("UI_ScrollRectOcclusion", "UI Scroll Rect Occlusion", "Utilities", "/ugui/controls/ui-scroll-rect-occlusion/", "Disables off-screen children in a ScrollRect to reduce overdraw cost.", False, ["utilities","scroll","occlusion","performance","visibility"]), - ("UI_TweenScale", "UI TweenScale", "Effects", "/ugui/controls/ui-tween-scale/", "Bounce/pulse scale tween on any UI element triggered by pointer events.", False, ["effects","tween","scale","bounce","animation"]), - ("VerticalScrollSnap", "Vertical Scroll Snap", "Layout", "/ugui/controls/vertical-scroll-snap/", "Paged vertical scroll view that snaps to discrete content pages.", False, ["layout","scroll","snap","vertical","pages"]), - ("uGUITools", "uGUI Tools", "Navigation", "/ugui/controls/ugui-tools/", "Editor menu shortcuts for common uGUI operations — align, distribute, reset.", False, ["navigation","editor","tools","utilities","shortcuts"]), -] - -def make_front_matter(name, category, permalink, description, has_video, tags): - tags_str = ", ".join(tags) - video_str = "true" if has_video else "false" - return f"""--- -layout: control-ugui -title: "{name}" -description: "{description}" -category: "{category}" -permalink: {permalink} -has_video: {video_str} -tags: [{tags_str}] ---- -""" - -def process_file(filename, name, category, permalink, description, has_video, tags): - filepath = os.path.join(CONTROLS_DIR, filename + ".md") - if not os.path.exists(filepath): - print(f" SKIP (not found): {filepath}") - return - - with open(filepath, "r", encoding="utf-8") as f: - content = f.read() - - # Skip if already has front matter - if content.startswith("---"): - print(f" SKIP (already has front matter): {filename}.md") - return - - # Build front matter - fm = make_front_matter(name, category, permalink, description, has_video, tags) - - # Fix relative image paths: ](Images/ -> ](/Controls/Images/ - content = re.sub(r'\]\(Images/', '](/Controls/Images/', content) - - # Also fix src="Images/ in any HTML img tags - content = re.sub(r'src="Images/', 'src="/Controls/Images/', content) - - # Write updated file - with open(filepath, "w", encoding="utf-8") as f: - f.write(fm + content) - - print(f" OK: {filename}.md") - - -if __name__ == "__main__": - print(f"Processing {len(CONTROLS)} control files...") - for entry in CONTROLS: - filename, name, category, permalink, description, has_video, tags = entry - process_file(filename, name, category, permalink, description, has_video, tags) - print("Done.") diff --git a/assets/css/neon.css b/assets/css/neon.css index c43dd77..43da8be 100644 --- a/assets/css/neon.css +++ b/assets/css/neon.css @@ -95,6 +95,11 @@ html { -webkit-text-size-adjust: 100%; } +/* Anchor jumps must clear the sticky nav */ +[id] { + scroll-margin-top: calc(var(--nav-h) + 1rem); +} + body { background: var(--bg); background-image: var(--scanlines); @@ -194,6 +199,58 @@ code, pre { .nav-link.nav-t:hover { color: var(--t); background: var(--t-dim); } .nav-link.active { color: var(--accent); } +/* Donate link — sparkle attractor */ +.nav-link.nav-donate { + position: relative; + display: inline-block; /* transforms are ignored on inline elements */ + color: var(--u-text); + transform-origin: center; + animation: donate-glow 3s ease-in-out infinite; +} +.nav-link.nav-donate:hover { color: var(--u); background: var(--u-dim); } +.nav-link.nav-donate::before, +.nav-link.nav-donate::after { + content: '\2726'; /* ✦ four-pointed star */ + position: absolute; + pointer-events: none; + opacity: 0; + color: var(--u); + text-shadow: 0 0 6px var(--u), 0 0 14px rgba(255, 0, 153, 0.6); + animation: donate-sparkle 2.8s ease-in-out infinite; +} +.nav-link.nav-donate::before { + top: -0.15rem; + right: 0.1rem; + font-size: 0.6rem; +} +.nav-link.nav-donate::after { + bottom: -0.1rem; + left: 0.15rem; + font-size: 0.45rem; + color: var(--t); + text-shadow: 0 0 6px var(--t), 0 0 14px rgba(0, 255, 238, 0.6); + animation-duration: 3.6s; + animation-delay: 1.4s; +} + +@keyframes donate-sparkle { + 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } + 50% { opacity: 1; transform: scale(1) rotate(180deg); } +} + +@keyframes donate-glow { + 0%, 100% { text-shadow: none; transform: scale(1); } + 50% { text-shadow: 0 0 12px rgba(255, 0, 153, 0.9), 0 0 24px rgba(255, 0, 153, 0.4); transform: scale(1.1); } +} + +@media (prefers-reduced-motion: reduce) { + .nav-link.nav-donate, + .nav-link.nav-donate::before, + .nav-link.nav-donate::after { animation: none; } + .nav-link.nav-donate::before, + .nav-link.nav-donate::after { opacity: 0.7; transform: none; } +} + .nav-spacer { flex: 1; } .nav-github { @@ -367,6 +424,111 @@ code, pre { flex-wrap: wrap; } +/* Visitor counter — live GoatCounter numbers, revealed by site.js */ +.visitor-counter { + margin-top: 2rem; + font-family: var(--font-h); + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--text-2); +} +.visitor-counter .vc-num { + font-weight: 800; + color: var(--u); + text-shadow: 0 0 10px rgba(255, 0, 153, 0.6); +} +.visitor-counter .vc-num.vc-total { + color: var(--t); + text-shadow: 0 0 10px rgba(0, 255, 238, 0.6); +} + +/* ============================================================ + Donate Toast — slide-in nudge after repeat visits + (built and shown by site.js; no markup in page templates) + ============================================================ */ +.donate-toast { + position: fixed; + right: 1.25rem; + bottom: 1.25rem; + z-index: 950; + max-width: 340px; + padding: 1.25rem 1.4rem 1.3rem; + background: var(--surface-2); + border: 1px solid var(--u); + border-radius: var(--r-xl); + box-shadow: 0 0 24px rgba(255, 0, 153, 0.35), 0 8px 32px rgba(0, 0, 0, 0.6); + transform: translateX(calc(100% + 2rem)); + transition: transform .45s var(--ease); +} +.donate-toast.show { transform: translateX(0); } + +.donate-toast-eyebrow { + font-family: var(--font-h); + font-size: 0.6rem; + font-weight: 700; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--t-text); + margin-bottom: 0.5rem; +} + +.donate-toast-msg { + font-size: 0.92rem; + line-height: 1.55; + color: var(--text); + margin-bottom: 1rem; +} + +.donate-toast-actions { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; +} + +.donate-toast-later { + background: none; + border: none; + cursor: pointer; + font-family: var(--font-b); + font-size: 0.8rem; + color: var(--text-3); + text-decoration: underline; + transition: color .15s; +} +.donate-toast-later:hover { color: var(--text-2); } + +.donate-toast-close { + position: absolute; + top: 0.4rem; + right: 0.55rem; + background: none; + border: none; + cursor: pointer; + font-size: 1rem; + line-height: 1; + color: var(--text-3); + transition: color .15s; +} +.donate-toast-close:hover { color: var(--u); } + +@media (max-width: 480px) { + .donate-toast { + right: 0.75rem; + left: 0.75rem; + bottom: 0.75rem; + max-width: none; + transform: translateY(calc(100% + 2rem)); + } + .donate-toast.show { transform: translateY(0); } +} + +@media (prefers-reduced-motion: reduce) { + .donate-toast { transition: none; } +} + /* ============================================================ Buttons ============================================================ */ @@ -1688,6 +1850,13 @@ tbody tr:hover td { background: var(--surface-2); } object-fit: cover; display: block; } +/* UITK previews are tight control cut-outs at wildly varying aspect ratios, + not full screenshots — show the whole control centred at natural scale + (never upscaled) instead of cropping to fill the 16:9 window */ +.control-card.uitk-context .control-card-img img { + object-fit: scale-down; + padding: 0.75rem; +} .control-card-img--placeholder { display: flex; diff --git a/assets/js/count.js b/assets/js/count.js new file mode 100644 index 0000000..3b5f6bc --- /dev/null +++ b/assets/js/count.js @@ -0,0 +1,269 @@ +// GoatCounter: https://www.goatcounter.com +// This file is released under the ISC license: https://opensource.org/licenses/ISC +;(function() { + 'use strict'; + + window.goatcounter = window.goatcounter || {} + + // Load settings from data-goatcounter-settings. + var s = document.querySelector('script[data-goatcounter]') + if (s && s.dataset.goatcounterSettings) { + try { var set = JSON.parse(s.dataset.goatcounterSettings) } + catch (err) { console.error('invalid JSON in data-goatcounter-settings: ' + err) } + for (var k in set) + if (['no_onload', 'no_events', 'allow_local', 'allow_frame', 'path', 'title', 'referrer', 'event'].indexOf(k) > -1) + window.goatcounter[k] = set[k] + } + + var enc = encodeURIComponent + + // Get all data we're going to send off to the counter endpoint. + window.goatcounter.get_data = function(vars) { + vars = vars || {} + var data = { + p: (vars.path === undefined ? goatcounter.path : vars.path), + r: (vars.referrer === undefined ? goatcounter.referrer : vars.referrer), + t: (vars.title === undefined ? goatcounter.title : vars.title), + e: !!(vars.event || goatcounter.event), + s: window.screen.width, + b: is_bot(), + q: location.search, + } + + var rcb, pcb, tcb // Save callbacks to apply later. + if (typeof(data.r) === 'function') rcb = data.r + if (typeof(data.t) === 'function') tcb = data.t + if (typeof(data.p) === 'function') pcb = data.p + + if (is_empty(data.r)) data.r = document.referrer + if (is_empty(data.t)) data.t = document.title + if (is_empty(data.p)) data.p = get_path() + if (vars.no_session) data.ns = (typeof(vars.no_session) === 'function' ? vars.no_session(false) : vars.no_session) + + if (rcb) data.r = rcb(data.r) + if (tcb) data.t = tcb(data.t) + if (pcb) data.p = pcb(data.p) + return data + } + + // Check if a value is "empty" for the purpose of get_data(). + var is_empty = function(v) { return v === null || v === undefined || typeof(v) === 'function' } + + // See if this looks like a bot; there is some additional filtering on the + // backend, but these properties can't be fetched from there. + var is_bot = function() { + // Headless browsers are probably a bot. + var w = window, d = document + if (w.callPhantom || w._phantom || w.phantom) + return 150 + if (w.__nightmare) + return 151 + if (d.__selenium_unwrapped || d.__webdriver_evaluate || d.__driver_evaluate) + return 152 + if (navigator.webdriver) + return 153 + return 0 + } + + // Object to urlencoded string, starting with a ?. + var urlencode = function(obj) { + var p = [] + for (var k in obj) + if (obj[k] !== '' && obj[k] !== null && obj[k] !== undefined && obj[k] !== false) + p.push(enc(k) + '=' + enc(obj[k])) + return '?' + p.join('&') + } + + // Show a warning in the console. + var warn = function(msg) { + if (console && 'warn' in console) + console.warn('goatcounter: ' + msg) + } + + // Get the endpoint to send requests to. + var get_endpoint = function() { + var s = document.querySelector('script[data-goatcounter]') + return (s && s.dataset.goatcounter) ? s.dataset.goatcounter : goatcounter.endpoint + } + + // Get current path. + var get_path = function() { + var loc = location, + c = document.querySelector('link[rel="canonical"][href]') + if (c) { // May be relative or point to different domain. + var a = document.createElement('a') + a.href = c.href + if (a.hostname.replace(/^www\./, '') === location.hostname.replace(/^www\./, '')) + loc = a + } + return (loc.pathname + loc.search) || '/' + } + + // Run function after DOM is loaded. + var on_load = function(f) { + if (document.body === null) + document.addEventListener('DOMContentLoaded', function() { f() }, false) + else + f() + } + + // Filter some requests that we (probably) don't want to count. + window.goatcounter.filter = function() { + if ('visibilityState' in document && document.visibilityState === 'prerender') + return 'visibilityState' + if (!goatcounter.allow_frame && location !== parent.location) + return 'frame' + if (!goatcounter.allow_local && location.hostname.match(/(localhost$|^127\.|^10\.|^172\.(1[6-9]|2[0-9]|3[0-1])\.|^192\.168\.|^0\.0\.0\.0$)/)) + return 'localhost' + if (!goatcounter.allow_local && location.protocol === 'file:') + return 'localfile' + if (localStorage && localStorage.getItem('skipgc') === 't') + return 'disabled with #toggle-goatcounter' + return false + } + + // Get URL to send to GoatCounter. + window.goatcounter.url = function(vars) { + var data = window.goatcounter.get_data(vars || {}) + if (data.p === null) // null from user callback. + return + data.rnd = Math.random().toString(36).substr(2, 5) // Browsers don't always listen to Cache-Control. + + var endpoint = get_endpoint() + if (!endpoint) + return warn('no endpoint found') + + return endpoint + urlencode(data) + } + + // Count a hit. + window.goatcounter.count = function(vars) { + var f = goatcounter.filter() + if (f) + return warn('not counting because of: ' + f) + var url = goatcounter.url(vars) + if (!url) + return warn('not counting because path callback returned null') + + if (!navigator || !navigator.sendBeacon || !navigator.sendBeacon(url)) { + // This mostly fails due to being blocked by CSP; try again with an + // image-based fallback. + var img = document.createElement('img') + img.src = url + img.style.position = 'absolute' // Affect layout less. + img.style.bottom = '0px' + img.style.width = '1px' + img.style.height = '1px' + img.loading = 'eager' + img.setAttribute('alt', '') + img.setAttribute('aria-hidden', 'true') + + var rm = function() { if (img && img.parentNode) img.parentNode.removeChild(img) } + img.addEventListener('load', rm, false) + document.body.appendChild(img) + } + } + + // Get a query parameter. + window.goatcounter.get_query = function(name) { + var s = location.search.substr(1).split('&') + for (var i = 0; i < s.length; i++) + if (s[i].toLowerCase().indexOf(name.toLowerCase() + '=') === 0) + return s[i].substr(name.length + 1) + } + + // Track click events. + window.goatcounter.bind_events = function() { + if (!document.querySelectorAll) // Just in case someone uses an ancient browser. + return + + var send = function(elem) { + return function() { + goatcounter.count({ + event: true, + path: (elem.dataset.goatcounterClick || elem.name || elem.id || ''), + title: (elem.dataset.goatcounterTitle || elem.title || (elem.innerHTML || '').substr(0, 200) || ''), + referrer: (elem.dataset.goatcounterReferrer || elem.dataset.goatcounterReferral || ''), + no_session: ['1', 't', 'true'].indexOf((elem.dataset.goatcounterNoSession || '').toLowerCase()) !== -1, + }) + } + } + + Array.prototype.slice.call(document.querySelectorAll("*[data-goatcounter-click]")).forEach(function(elem) { + if (elem.dataset.goatcounterBound) + return + var f = send(elem) + elem.addEventListener('click', f, false) + elem.addEventListener('auxclick', f, false) // Middle click. + elem.dataset.goatcounterBound = 'true' + }) + } + + // Add a "visitor counter" frame or image. + window.goatcounter.visit_count = function(opt) { + on_load(function() { + opt = opt || {} + opt.type = opt.type || 'html' + opt.append = opt.append || 'body' + opt.path = opt.path || get_path() + opt.attr = opt.attr || {width: '200', height: (opt.no_branding ? '60' : '80')} + + opt.attr['src'] = get_endpoint() + 'er/' + enc(opt.path) + '.' + enc(opt.type) + '?' + if (opt.no_branding) opt.attr['src'] += '&no_branding=1' + if (opt.style) opt.attr['src'] += '&style=' + enc(opt.style) + if (opt.start) opt.attr['src'] += '&start=' + enc(opt.start) + if (opt.end) opt.attr['src'] += '&end=' + enc(opt.end) + + var tag = {png: 'img', svg: 'img', html: 'iframe'}[opt.type] + if (!tag) + return warn('visit_count: unknown type: ' + opt.type) + + if (opt.type === 'html') { + opt.attr['frameborder'] = '0' + opt.attr['scrolling'] = 'no' + } + + var d = document.createElement(tag) + for (var k in opt.attr) + d.setAttribute(k, opt.attr[k]) + + var p = document.querySelector(opt.append) + if (!p) + return warn('visit_count: element to append to not found: ' + opt.append) + p.appendChild(d) + }) + } + + // Make it easy to skip your own views. + if (location.hash === '#toggle-goatcounter') { + if (localStorage.getItem('skipgc') === 't') { + localStorage.removeItem('skipgc', 't') + alert('GoatCounter tracking is now ENABLED in this browser.') + } + else { + localStorage.setItem('skipgc', 't') + alert('GoatCounter tracking is now DISABLED in this browser until ' + location + ' is loaded again.') + } + } + + if (!goatcounter.no_onload) + on_load(function() { + // 1. Page is visible, count request. + // 2. Page is not yet visible; wait until it switches to 'visible' and count. + // See #487 + if (!('visibilityState' in document) || document.visibilityState === 'visible') + goatcounter.count() + else { + var f = function(e) { + if (document.visibilityState !== 'visible') + return + document.removeEventListener('visibilitychange', f) + goatcounter.count() + } + document.addEventListener('visibilitychange', f) + } + + if (!goatcounter.no_events) + goatcounter.bind_events() + }) +})(); diff --git a/assets/js/site.js b/assets/js/site.js index 68e4a10..5960772 100644 --- a/assets/js/site.js +++ b/assets/js/site.js @@ -214,6 +214,149 @@ }); } + /* ---------------------------------------------------------- + Visitor counter (homepage) + Pulls rolling-month and all-time visit counts from the + GoatCounter public counter API. Counts are served formatted + (locale separators), so digits are extracted and re-formatted. + The element stays hidden if the API is unreachable or the + "visitor counts" setting is disabled on the dashboard. + ---------------------------------------------------------- */ + function initVisitorCounter() { + var el = document.querySelector('.visitor-counter'); + if (!el || !window.fetch) return; + + var base = 'https://unity-ui-extensions.goatcounter.com/counter/TOTAL.json'; + + function getCount(url) { + return fetch(url).then(function (res) { + if (!res.ok) throw new Error('counter unavailable'); + return res.json(); + }).then(function (data) { + var digits = String(data.count).replace(/[^0-9]/g, ''); + if (!digits) throw new Error('no count'); + return parseInt(digits, 10); + }); + } + + Promise.all([ + getCount(base + '?start=month'), + getCount(base) + ]).then(function (counts) { + el.querySelector('.vc-month').textContent = counts[0].toLocaleString('en'); + el.querySelector('.vc-total').textContent = counts[1].toLocaleString('en'); + el.hidden = false; + }).catch(function () { /* leave hidden — counter is decorative */ }); + } + + /* ---------------------------------------------------------- + Donate nudge toast + Counts distinct visit DAYS in localStorage (nothing leaves + the browser — the site's no-cookies/no-personal-data stance + is unchanged). After 5 visit days a toast slides in inviting + a donation. Shown at most once per 14 days; "Maybe later" + or close snoozes 90 days; clicking Donate retires it. + Local testing (never counts or persists anything): + #donate-toast — force-show the toast + #donate-toast-reset — clear stored nudge state + ---------------------------------------------------------- */ + function initDonateNudge() { + var KEY = 'uiext-donate-nudge'; + var DAYS_NEEDED = 5; + var SHOW_DELAY = 2500; // ms after load before sliding in + var SNOOZE_SHOWN = 14, SNOOZE_DISMISS = 90; // days + + var testMode = location.hash === '#donate-toast'; + + var state = {}; + var store = function () { + try { localStorage.setItem(KEY, JSON.stringify(state)); } catch (e) { /* ignore */ } + }; + try { + if (location.hash === '#donate-toast-reset') { + localStorage.removeItem(KEY); + console.info('donate-nudge: stored state cleared'); + return; + } + state = JSON.parse(localStorage.getItem(KEY)) || {}; + } catch (e) { + if (!testMode) return; // no storage (private mode) — skip silently + } + state.days = state.days || 0; + + if (!testMode) { + if (state.off) return; + + var today = new Date().toISOString().slice(0, 10); + if (state.last !== today) { + state.days += 1; + state.last = today; + store(); + } + + if (state.days < DAYS_NEEDED) return; + if (state.snoozeUntil && Date.now() < state.snoozeUntil) return; + } + + var track = function (name) { + if (testMode) return; // keep test runs out of the stats + if (window.goatcounter && goatcounter.count) + goatcounter.count({ event: true, path: 'donate-toast-' + name }); + }; + + var toast = document.createElement('div'); + toast.className = 'donate-toast'; + toast.setAttribute('role', 'status'); + toast.setAttribute('aria-live', 'polite'); + toast.innerHTML = + '' + + '' + + '' + + ''; + + var hide = function (snoozeDays) { + if (!testMode && snoozeDays) { + state.snoozeUntil = Date.now() + snoozeDays * 864e5; + store(); + } + toast.classList.remove('show'); + setTimeout(function () { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 500); + document.removeEventListener('keydown', onKey); + }; + + var onKey = function (e) { if (e.key === 'Escape') { track('dismissed'); hide(SNOOZE_DISMISS); } }; + + toast.querySelector('.donate-toast-close').addEventListener('click', function () { + track('dismissed'); + hide(SNOOZE_DISMISS); + }); + toast.querySelector('.donate-toast-later').addEventListener('click', function () { + track('later'); + hide(SNOOZE_DISMISS); + }); + toast.querySelector('a.btn').addEventListener('click', function () { + track('donate-click'); + if (!testMode) { state.off = true; store(); } + // Navigation proceeds normally. + }); + + setTimeout(function () { + document.body.appendChild(toast); + track('shown'); + if (!testMode) { + state.snoozeUntil = Date.now() + SNOOZE_SHOWN * 864e5; + store(); + } + document.addEventListener('keydown', onKey); + requestAnimationFrame(function () { + requestAnimationFrame(function () { toast.classList.add('show'); }); + }); + }, SHOW_DELAY); + } + /* ---------------------------------------------------------- Initialise all ---------------------------------------------------------- */ @@ -225,6 +368,8 @@ initScrollSpy(); initMobileNav(); initSidebarToggle(); + initVisitorCounter(); + initDonateNudge(); }); }()); diff --git a/donate.md b/donate.md index 8f06be7..e34aa73 100644 --- a/donate.md +++ b/donate.md @@ -38,7 +38,7 @@ permalink: /donate/ If it has saved you time, here is how you can help keep it alive and growing.

- ❤️  Sponsor on GitHub + ❤️  Sponsor the project Other ways to help
@@ -88,7 +88,7 @@ permalink: /donate/ -
+

Ways to give

@@ -197,7 +197,7 @@ permalink: /donate/

Every bit helps. Thank you.

Money, code, a bug report, or just a kind word in Gitter — it all keeps the project free and well.

- Sponsor on GitHub + Sponsor the project Buy a Coffee Contribute on GitHub
diff --git a/generate_pdfs.py b/generate_pdfs.py index bed2fe2..a7b83b6 100644 --- a/generate_pdfs.py +++ b/generate_pdfs.py @@ -453,7 +453,7 @@ def presskit_html(): Unity 6's UI Toolkit runtime.

  • Package id com.unity.uitoolkitextensions · v1.0.0 · Unity 6000.0+ · MIT
    • -
  • 25 controls · ~21 runtime scripts · 12 example scenes
    • +
  • 25 controls · ~21 runtime scripts · 13 example scenes

Key features

diff --git a/index.md b/index.md index 45270ff..fef1c1d 100644 --- a/index.md +++ b/index.md @@ -19,6 +19,9 @@ permalink: / Explore uGUI Controls Explore UI Toolkit Controls
+
diff --git a/migrate_remaining_controls.py b/migrate_remaining_controls.py deleted file mode 100644 index 948b07b..0000000 --- a/migrate_remaining_controls.py +++ /dev/null @@ -1,196 +0,0 @@ -#!/usr/bin/env python3 -""" -migrate_remaining_controls.py — finish the uGUI control documentation. - -Gives the remaining 36 uGUI controls a proper Jekyll documentation page -(prepends `layout: control-ugui` front matter to their Controls/*.md) and adds -them to _data/ugui_controls.yml so they appear in the controls listing. This -brings every one of the 100 uGUI controls to "has a documentation page". - -Demo media (screenshots / video) can be added later — preview_image is left -blank, which renders the placeholder card (same as the UI Toolkit controls). - -Run from the Unity-UI-Extensions.GitHub.io directory: python migrate_remaining_controls.py -Idempotent: skips files that already have front matter / data entries. -""" -import os -import re - -CONTROLS_DIR = "Controls" -DATA_FILE = os.path.join("_data", "ugui_controls.yml") - -# filename (no .md), title, category, slug, description, tags -REMAINING = [ - ("BestFitOutline", "Best Fit Outline", "Effects", "best-fit-outline", - "Outline effect that scales correctly with a Text component's best-fit sizing.", - ["effects", "outline", "text", "best-fit"]), - ("BoundToolTip", "Bound ToolTip", "Utilities", "bound-tooltip", - "Tooltip driven by a central listener for displaying data-bound content on hover.", - ["utilities", "tooltip", "hover", "bound"]), - ("CLFZ2", "CLZF2 Compression", "Utilities", "clzf2-compression", - "LZF compression helper for compressing UI or save data at runtime.", - ["utilities", "compression", "lzf", "data"]), - ("CurvedLayout", "Curved Layout", "Layout", "curved-layout", - "Arranges child elements along a configurable curve.", - ["layout", "curve", "curved", "arrange"]), - ("CurvedText", "Curved Text", "Effects", "curved-text", - "Bends legacy uGUI Text along a curve (for projects not using TextMeshPro).", - ["effects", "text", "curve", "bend"]), - ("CylinderText", "Cylinder Text", "Effects", "cylinder-text", - "Curved text effect that wraps text around a cylindrical surface.", - ["effects", "text", "cylinder", "curve"]), - ("DragCorrector", "Drag Corrector", "Utilities", "drag-corrector", - "Manages the EventSystem drag threshold for high-DPI displays.", - ["utilities", "drag", "dpi", "eventsystem"]), - ("ExtensionsToggle", "Extensions Toggle", "Input", "extensions-toggle", - "Enhanced Toggle with additional event types and toggle behaviours.", - ["input", "toggle", "events", "selectable"]), - ("ExtensionsToggleGroup", "Extensions Toggle Group", "Input", "extensions-toggle-group", - "Manages a group of Extensions Toggle components with single or multi selection.", - ["input", "toggle", "group", "selection"]), - ("GamePadInputModule", "GamePad Input Module", "Utilities", "gamepad-input-module", - "Stripped-down input module for gamepad and keyboard UI navigation.", - ["utilities", "gamepad", "input", "navigation", "keyboard"]), - ("HoverToolTip", "Hover ToolTip", "Utilities", "hover-tooltip", - "Basic tooltip that appears on pointer hover.", - ["utilities", "tooltip", "hover", "popup"]), - ("ImageExtended", "Image Extended", "Primitives", "image-extended", - "Improved Image control with rotation support and filled type without a sprite.", - ["primitives", "image", "rotation", "filled"]), - ("Infinite Scroll Snap", "Infinite Scroll Snap", "Layout", "infinite-scroll-snap", - "Endlessly looping scroll-snap layout for UI elements.", - ["layout", "scroll", "snap", "infinite", "loop"]), - ("InputFieldEnterSubmit", "Input Field Enter Submit", "Utilities", "input-field-enter-submit", - "Automatically submits an InputField when the Enter key is pressed.", - ["utilities", "inputfield", "enter", "submit"]), - ("InputFocus", "Input Focus", "Utilities", "input-focus", - "Enhanced InputField for forms — Enter to submit plus focus management.", - ["utilities", "inputfield", "focus", "forms"]), - ("MinMaxSlider", "Min Max Slider", "Input", "min-max-slider", - "Dual-handle slider for selecting a value range between minimum and maximum bounds.", - ["input", "slider", "range", "min", "max"]), - ("MultiTouchScrollRect", "MultiTouch Scroll Rect", "Layout", "multitouch-scroll-rect", - "ScrollRect fix that correctly handles multiple simultaneous touches.", - ["layout", "scroll", "multitouch", "scrollrect"]), - ("NicerOutline", "Nicer Outline", "Effects", "nicer-outline", - "Improved outline effect with cleaner corners than the built-in Outline.", - ["effects", "outline", "text", "polish"]), - ("PPIViewer", "PPI Viewer", "Utilities", "ppi-viewer", - "Displays the current screen DPI/PPI on a Text component.", - ["utilities", "dpi", "ppi", "debug", "text"]), - ("RaycastMask", "Raycast Mask", "Utilities", "raycast-mask", - "Enhanced mask that uses image alpha for accurate raycast hit-testing.", - ["utilities", "raycast", "mask", "alpha", "hit-area"]), - ("RescaleDragPanel", "Rescale Drag Panel", "Utilities", "rescale-drag-panel", - "Drag a rescaled panel to reposition it within a canvas, compensating for scale.", - ["utilities", "drag", "rescale", "panel"]), - ("RescalePanel", "Rescale Panel", "Utilities", "rescale-panel", - "Rescales a parent panel by dragging a handle while keeping it anchored.", - ["utilities", "rescale", "panel", "drag", "handle"]), - ("ResizePanel", "Resize Panel", "Utilities", "resize-panel", - "Resize a parent panel by dragging a handle, maintaining aspect ratio.", - ["utilities", "resize", "panel", "drag", "handle"]), - ("ReturnKeyTrigger", "Return Key Trigger", "Utilities", "return-key-trigger", - "Binds the Return key within an InputField to a button or toggle action.", - ["utilities", "inputfield", "return", "key", "trigger"]), - ("Scroller", "Scroller", "Layout", "scroller", - "Scroller component of the FancyScrollView system for advanced scrolling.", - ["layout", "scroll", "fancyscrollview"]), - ("Serialization", "Serialization", "Utilities", "serialization", - "Serialization utilities for UI components.", - ["utilities", "serialization", "save", "data"]), - ("ShaderEffects", "Shader Effects Suite", "Effects", "shader-effects", - "Collection of shader-based blending-mode effects for UI elements.", - ["effects", "shader", "blend", "suite"]), - ("UICircle", "UI Circle", "Primitives", "ui-circle", - "Customisable circle/arc primitive with progress indication and fill modes.", - ["primitives", "circle", "arc", "progress", "shape"]), - ("UICornerCut", "UI Corner Cut", "Primitives", "ui-corner-cut", - "Renders rectangles with selectively cut corners for non-square panels.", - ["primitives", "corner", "cut", "rectangle", "shape"]), - ("UIImageCrop", "UI Image Crop", "Effects", "ui-image-crop", - "Shader-based crop of a UI image along the X and Y axes without masks.", - ["effects", "image", "crop", "shader"]), - ("UILineRendererFIFO", "UI Line Renderer (FIFO)", "Primitives", "ui-line-renderer-fifo", - "Performance line renderer using a first-in-first-out point queue.", - ["primitives", "line", "fifo", "performance", "draw"]), - ("UILineRendererList", "UI Line Renderer (List)", "Primitives", "ui-line-renderer-list", - "Renders multiple connected line segments from a point list.", - ["primitives", "line", "list", "polyline", "draw"]), - ("UILineTextureRenderer", "UI Line Texture Renderer", "Primitives", "ui-line-texture-renderer", - "Textured UI line renderer with UV mapping and automatic end caps.", - ["primitives", "line", "texture", "uv", "draw"]), - ("UISquircle", "UI Squircle", "Primitives", "ui-squircle", - "Renders smooth superellipse (squircle) shapes with configurable curvature.", - ["primitives", "squircle", "superellipse", "shape", "rounded"]), - ("UIWindowBase", "UI Window Base", "Layout", "ui-window-base", - "Draggable window for RectTransforms with bounds checking within the canvas.", - ["layout", "window", "draggable", "panel"]), - ("switchToRectTransform", "Switch To RectTransform", "Utilities", "switch-to-recttransform", - "RectTransform extension that moves one RectTransform onto another.", - ["utilities", "recttransform", "extension", "transform"]), -] - -FRONT_MATTER = '''--- -layout: control-ugui -title: "{title}" -description: "{desc}" -category: "{cat}" -permalink: /ugui/controls/{slug}/ -has_video: false -tags: [{tags}] ---- -''' - - -def prepend_front_matter(): - added = 0 - for fn, title, cat, slug, desc, tags in REMAINING: - path = os.path.join(CONTROLS_DIR, fn + ".md") - if not os.path.exists(path): - print(f" SKIP (missing): {fn}.md") - continue - content = open(path, encoding="utf-8").read() - if content.lstrip().startswith("---"): - print(f" SKIP (already has front matter): {fn}.md") - continue - # Fix relative image paths the same way add_frontmatter.py does - content = re.sub(r'\]\(Images/', '](/Controls/Images/', content) - content = re.sub(r'src="Images/', 'src="/Controls/Images/', content) - fm = FRONT_MATTER.format(title=title, desc=desc, cat=cat, slug=slug, tags=", ".join(tags)) - open(path, "w", encoding="utf-8").write(fm + content) - added += 1 - print(f" page: {fn}.md -> /ugui/controls/{slug}/") - print(f" -> {added} documentation pages completed") - - -def append_data(): - existing = open(DATA_FILE, encoding="utf-8").read() - lines = ["", "# ── Controls with complete documentation, demo media pending ─────────────────"] - appended = 0 - for fn, title, cat, slug, desc, tags in REMAINING: - if f"permalink: /ugui/controls/{slug}/" in existing: - continue - lines += [ - "", - f"- name: {title}", - f" slug: {slug}", - f" permalink: /ugui/controls/{slug}/", - f" category: {cat}", - f" description: {desc}", - ' preview_image: ""', - " has_video: false", - f" tags: [{', '.join(tags)}]", - ] - appended += 1 - if appended: - with open(DATA_FILE, "a", encoding="utf-8") as f: - f.write("\n".join(lines) + "\n") - print(f" -> {appended} listing entries appended to {DATA_FILE}") - - -if __name__ == "__main__": - print(f"Completing documentation for {len(REMAINING)} uGUI controls...") - prepend_front_matter() - append_data() - print("Done.") diff --git a/presskit.md b/presskit.md index 5f88a28..389774a 100644 --- a/presskit.md +++ b/presskit.md @@ -145,7 +145,7 @@ permalink: /presskit/
  • Version 1.0.0 · Unity 6000.0+ · MIT
    • -
  • 25 controls · ~26 runtime scripts · 12 example scenes
    • +
  • 25 controls · ~26 runtime scripts · 13 example scenes
  • Built with USS · fully themable · data-driven UI
Explore UI Toolkit diff --git a/ugui/index.md b/ugui/index.md index f924d4e..3e8098c 100644 --- a/ugui/index.md +++ b/ugui/index.md @@ -104,9 +104,9 @@ Scope: com.unity.uiextensions class="control-card" data-category="{{ ctrl.category | downcase }}" data-name="{{ ctrl.name | downcase }}" - data-desc="{{ ctrl.description | downcase }}" + data-desc="{{ ctrl.description | downcase | escape }}" data-tags="{{ ctrl.tags | join: ' ' | downcase }}" - aria-label="{{ ctrl.name }} — {{ ctrl.description }}"> + aria-label="{{ ctrl.name }} — {{ ctrl.description | escape }}"> {% if ctrl.preview_image != "" %}
diff --git a/ugui/releasenotes/index.md b/ugui/releasenotes/index.md index bf343ef..c790b8a 100644 --- a/ugui/releasenotes/index.md +++ b/ugui/releasenotes/index.md @@ -5,8 +5,6 @@ description: Release notes and version history for the Unity UI Extensions uGUI permalink: /ugui/releasenotes/ --- -# Unity UI Extensions — uGUI Release Notes - Release notes and version history for the **uGUI** package (`com.unity.uiextensions`). Building with UI Toolkit? See the [UI Toolkit package](/uitoolkit/). ----- diff --git a/uitoolkit/controls/circular-image-button/circular-image-button-example.png b/uitoolkit/controls/circular-image-button/circular-image-button-example.png new file mode 100644 index 0000000..ee2e7a9 Binary files /dev/null and b/uitoolkit/controls/circular-image-button/circular-image-button-example.png differ diff --git a/uitoolkit/controls/circular-image-button/index.md b/uitoolkit/controls/circular-image-button/index.md index dbb2e84..0afbb82 100644 --- a/uitoolkit/controls/circular-image-button/index.md +++ b/uitoolkit/controls/circular-image-button/index.md @@ -8,7 +8,35 @@ has_video: false tags: [primitives, button, circular, avatar, icon] --- -## Summary +![Circular Image button example](./circular-image-button-example.png) + +--------- + +## Contents + +> 1 [Overview](#overview) +> +> 2 [Properties](#properties) +> +> 3 [USS Classes](#uss-classes) +> +> 4 [Events](#events) +> +> 5 [Methods](#methods) +> +> 6 [Usage](#usage) +> +> 7 [Using the Control](#using-the-control) +> +> 8 [Example Scenes](#example-scenes) +> +> 9 [Credits and Donation](#credits-and-donation) +> +> 10 [External links](#external-links) + +--------- + +## Overview `CircularImageButton` is a circular button that displays an image or sprite at full bleed with a 50% border-radius. When no image is set it shows a centered overlay (typically an upload icon and label) to prompt the user to select a photo. @@ -18,10 +46,14 @@ Typical use cases: - Circular media thumbnails in lists or grids - Any tap target that must hold a user-supplied image +--------- + ## Properties This control has no data properties. Configure it through method calls and respond to the `Clicked` event. +--------- + ## USS Classes | Class | Description | @@ -33,13 +65,17 @@ This control has no data properties. Configure it through method calls and respo | `circularImageButton__uploadLabel` | Text label inside the no-image overlay. | | `circularImageButton--hasImage` | Modifier applied to the root when an image is present. Hides the no-image overlay. | +--------- + ## Events | Name | Description | Arguments | | --- | --- | --- | | `Clicked` | Fired when the button receives a pointer-up event inside its bounds. | none | -## Public Methods +--------- + +## Methods | Signature | Description | | --- | --- | @@ -49,6 +85,32 @@ This control has no data properties. Configure it through method calls and respo | `ClearImage()` | Removes the current image and restores the no-image overlay. | | `SetImageTint(Color color)` | Applies a tint color to the image element. | +--------- + +## Usage + +> Add the control to your scene using: +> +> GameObject -> UI Toolkit -> Extensions -> Circular Image Button +> +> This creates a UIDocument in the scene (plus a PanelSettings with the default runtime theme, if the project has none) and assigns an editable starter template with demo content, copied to *Assets/UI Toolkit Extensions*. +> +> A starter template can also be added to an existing document using: +> +> Assets -> Create -> UI Toolkit -> Extensions -> Circular Image Button Starter + +Alternatively, drag the control into a document from the UI Builder Library (*Project -> Custom Controls -> UnityUIToolkit.Extensions*) or declare it directly in UXML: + +```xml + + + +``` + +The shared extensions stylesheet is applied automatically when the control is created in the Editor and in Play Mode, so no manual stylesheet reference is needed while authoring. The starter templates also reference the stylesheet explicitly, which covers player builds; for hand-written UXML or code-first UI in builds, add the stylesheet to your UXML or panel theme. + +--------- + ## Using the Control ### Basic Setup @@ -106,3 +168,26 @@ _avatarButton.SetImageTint(new Color(1f, 1f, 1f, 0.4f)); // Restore full color _avatarButton.SetImageTint(Color.white); ``` + +--------- + +## Example Scenes + +This control is demonstrated in the following package examples: + +- [Profile Editor](/uitoolkit/examples/profile-editor/) +- [Image Crop Overlay](/uitoolkit/examples/image-crop-overlay/) + +--------- + +## Credits and Donation + +SimonDarksideJ + +--------- + +## External links + +[UI Toolkit Extensions repository](https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions) | [OpenUPM package](https://openupm.com/packages/com.unity.uitoolkitextensions/) + +--------- diff --git a/uitoolkit/controls/collapsible-section/collapsible-section-demo.webm b/uitoolkit/controls/collapsible-section/collapsible-section-demo.webm new file mode 100644 index 0000000..f6b191a Binary files /dev/null and b/uitoolkit/controls/collapsible-section/collapsible-section-demo.webm differ diff --git a/uitoolkit/controls/collapsible-section/collapsible-section-example.png b/uitoolkit/controls/collapsible-section/collapsible-section-example.png new file mode 100644 index 0000000..ae46b98 Binary files /dev/null and b/uitoolkit/controls/collapsible-section/collapsible-section-example.png differ diff --git a/uitoolkit/controls/collapsible-section/index.md b/uitoolkit/controls/collapsible-section/index.md index 200d318..dc57f69 100644 --- a/uitoolkit/controls/collapsible-section/index.md +++ b/uitoolkit/controls/collapsible-section/index.md @@ -8,7 +8,35 @@ has_video: false tags: [navigation, collapse, expand, accordion, section] --- -## Summary +![Collapsable Section Example](./collapsible-section-example.png) + +--------- + +## Contents + +> 1 [Overview](#overview) +> +> 2 [Properties](#properties) +> +> 3 [USS Classes](#uss-classes) +> +> 4 [Events](#events) +> +> 5 [Methods](#methods) +> +> 6 [Usage](#usage) +> +> 7 [Using the Control](#using-the-control) +> +> 8 [Video Demo](#video-demo) +> +> 9 [Credits and Donation](#credits-and-donation) +> +> 10 [External links](#external-links) + +--------- + +## Overview `CollapsibleSection` is a container with a tappable header that expands or collapses its body content. The body transition is driven by a `max-height` animation (0 → 2000 px, 250 ms ease-out) triggered by the `collapsibleSection--expanded` modifier class, so no code-side animation is required for the open/close motion. @@ -19,6 +47,8 @@ Typical use cases: - Nested content trees inside scroll containers - Any section where body content should be hidden by default +--------- + ## Properties | Name | Description | Options | @@ -26,6 +56,8 @@ Typical use cases: | `IsExpanded` | Gets or sets the current expanded state. Setting this value animates the body and fires `OnExpandedChanged`. | `bool` | | `TitleText` | Gets or sets the header label text. | `string` | +--------- + ## USS Classes | Class | Description | @@ -38,13 +70,17 @@ Typical use cases: | `collapsibleSection__bodyContent` | Inner content container. Receives children added via `AddBodyContent`. | | `collapsibleSection--expanded` | Modifier applied to the root when expanded. Drives the `max-height` transition and chevron rotation. | +--------- + ## Events | Name | Description | Arguments | | --- | --- | --- | | `OnExpandedChanged` | Fired after the expanded state changes. | `bool isExpanded` | -## Public Methods +--------- + +## Methods | Signature | Description | | --- | --- | @@ -52,6 +88,32 @@ Typical use cases: | `SetBodyText(string text) : Label` | Convenience method that creates and appends a `Label` with the given text. Returns the created label. | | `Toggle()` | Toggles the expanded state. Equivalent to `IsExpanded = !IsExpanded`. | +--------- + +## Usage + +> Add the control to your scene using: +> +> GameObject -> UI Toolkit -> Extensions -> Collapsible Section +> +> This creates a UIDocument in the scene (plus a PanelSettings with the default runtime theme, if the project has none) and assigns an editable starter template with demo content, copied to *Assets/UI Toolkit Extensions*. +> +> A starter template can also be added to an existing document using: +> +> Assets -> Create -> UI Toolkit -> Extensions -> Collapsible Section Starter + +Alternatively, drag the control into a document from the UI Builder Library (*Project -> Custom Controls -> UnityUIToolkit.Extensions*) or declare it directly in UXML: + +```xml + + + +``` + +The shared extensions stylesheet is applied automatically when the control is created in the Editor and in Play Mode, so no manual stylesheet reference is needed while authoring. The starter templates also reference the stylesheet explicitly, which covers player builds; for hand-written UXML or code-first UI in builds, add the stylesheet to your UXML or panel theme. + +--------- + ## Using the Control ### Basic Setup @@ -103,3 +165,31 @@ foreach (var section in _faqSections) // Toggle a section from an external button _toggleButton.clicked += () => _detailsSection.Toggle(); ``` + +--------- + +## Video Demo + + + +### Example Scenes + +This control is demonstrated in the following package example: + +- [Content Explorer](/uitoolkit/examples/content-explorer/) + +--------- + +## Credits and Donation + +SimonDarksideJ + +--------- + +## External links + +[UI Toolkit Extensions repository](https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions) | [OpenUPM package](https://openupm.com/packages/com.unity.uitoolkitextensions/) + +--------- diff --git a/uitoolkit/controls/color-toggle-button/color-toggle-button-demo.webm b/uitoolkit/controls/color-toggle-button/color-toggle-button-demo.webm new file mode 100644 index 0000000..1a5742d Binary files /dev/null and b/uitoolkit/controls/color-toggle-button/color-toggle-button-demo.webm differ diff --git a/uitoolkit/controls/color-toggle-button/color-toggle-button-example.png b/uitoolkit/controls/color-toggle-button/color-toggle-button-example.png new file mode 100644 index 0000000..505cee5 Binary files /dev/null and b/uitoolkit/controls/color-toggle-button/color-toggle-button-example.png differ diff --git a/uitoolkit/controls/color-toggle-button/index.md b/uitoolkit/controls/color-toggle-button/index.md index 6cec372..9334b68 100644 --- a/uitoolkit/controls/color-toggle-button/index.md +++ b/uitoolkit/controls/color-toggle-button/index.md @@ -8,7 +8,37 @@ has_video: false tags: [forms, toggle, color, tint, button] --- -## Summary +![Color toggle button example](./color-toggle-button-example.png) + +--------- + +## Contents + +> 1 [Overview](#overview) +> +> 2 [Properties](#properties) +> +> 3 [USS Classes](#uss-classes) +> +> 4 [Events](#events) +> +> 5 [Constructors](#constructors) +> +> 6 [Methods](#methods) +> +> 7 [Usage](#usage) +> +> 8 [Using the Control](#using-the-control) +> +> 9 [Video Demo](#video-demo) +> +> 10 [Credits and Donation](#credits-and-donation) +> +> 11 [External links](#external-links) + +--------- + +## Overview `ColorToggleButton` extends `ToggleButton` with per-instance tint colors, a ripple press animation, and a selection overlay. The background color is driven entirely by the tint values, making it straightforward to build color-coded toggle grids without USS variants. @@ -18,6 +48,8 @@ Typical use cases: - Labeled color-coded category toggles - Any toggle grid where each item has a distinct brand or theme color +--------- + ## Properties | Name | Description | Options | @@ -26,6 +58,8 @@ Typical use cases: | `TintColor` | The background tint used when the button is in its default (unselected) state. | `Color` (read-only; use `SetTintColor` to change) | | `SelectedTintColor` | The background tint used when the button is selected. | `Color` (read-only; use `SetSelectedTintColor` to change) | +--------- + ## USS Classes | Class | Description | @@ -39,12 +73,16 @@ Typical use cases: | `toggleButton__selectedOverlay` | Overlay element shown when selected. | | `toggleButton__selectedOverlay--visible` | Modifier that makes the selected overlay visible. | +--------- + ## Events | Name | Description | Arguments | | --- | --- | --- | | `OnClicked` | Inherited from `ToggleButton`. Fired on every pointer-down regardless of current state. | none | +--------- + ## Constructors | Signature | Description | @@ -52,7 +90,9 @@ Typical use cases: | `ColorToggleButton(Color tintColor)` | Creates a button with the same tint color for both selected and unselected states. | | `ColorToggleButton(Color tintColor, Color selectedTintColor)` | Creates a button with distinct tints for each state. | -## Public Methods +--------- + +## Methods | Signature | Description | | --- | --- | @@ -62,6 +102,32 @@ Typical use cases: | `ForceSelect()` | Inherited. Sets `IsSelected = true` without firing `OnClicked`. | | `ForceDeselect()` | Inherited. Sets `IsSelected = false` without firing `OnClicked`. | +--------- + +## Usage + +> Add the control to your scene using: +> +> GameObject -> UI Toolkit -> Extensions -> Color Toggle Button +> +> This creates a UIDocument in the scene (plus a PanelSettings with the default runtime theme, if the project has none) and assigns an editable starter template with demo content, copied to *Assets/UI Toolkit Extensions*. +> +> A starter template can also be added to an existing document using: +> +> Assets -> Create -> UI Toolkit -> Extensions -> Color Toggle Button Starter + +Alternatively, drag the control into a document from the UI Builder Library (*Project -> Custom Controls -> UnityUIToolkit.Extensions*) or declare it directly in UXML: + +```xml + + + +``` + +The shared extensions stylesheet is applied automatically when the control is created in the Editor and in Play Mode, so no manual stylesheet reference is needed while authoring. The starter templates also reference the stylesheet explicitly, which covers player builds; for hand-written UXML or code-first UI in builds, add the stylesheet to your UXML or panel theme. + +--------- + ## Using the Control ### Color Palette Grid @@ -111,3 +177,31 @@ public class ColorPaletteController : MonoBehaviour } } ``` + +--------- + +## Video Demo + + + +### Example Scenes + +This control is demonstrated in the following package example: + +- [Profile Editor](/uitoolkit/examples/profile-editor/) + +--------- + +## Credits and Donation + +SimonDarksideJ + +--------- + +## External links + +[UI Toolkit Extensions repository](https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions) | [OpenUPM package](https://openupm.com/packages/com.unity.uitoolkitextensions/) + +--------- diff --git a/uitoolkit/controls/color-toggle-group/color-toggle-group-demo.webm b/uitoolkit/controls/color-toggle-group/color-toggle-group-demo.webm new file mode 100644 index 0000000..7bf9459 Binary files /dev/null and b/uitoolkit/controls/color-toggle-group/color-toggle-group-demo.webm differ diff --git a/uitoolkit/controls/color-toggle-group/color-toggle-group-example.png b/uitoolkit/controls/color-toggle-group/color-toggle-group-example.png new file mode 100644 index 0000000..0a1b22b Binary files /dev/null and b/uitoolkit/controls/color-toggle-group/color-toggle-group-example.png differ diff --git a/uitoolkit/controls/color-toggle-group/index.md b/uitoolkit/controls/color-toggle-group/index.md index 4bb0d41..dc2ab32 100644 --- a/uitoolkit/controls/color-toggle-group/index.md +++ b/uitoolkit/controls/color-toggle-group/index.md @@ -8,7 +8,35 @@ has_video: false tags: [forms, toggle, group, color, multi-select] --- -## Summary +![Color toggle group example](./color-toggle-group-example.png) + +--------- + +## Contents + +> 1 [Overview](#overview) +> +> 2 [Properties](#properties) +> +> 3 [USS Classes](#uss-classes) +> +> 4 [Events](#events) +> +> 5 [Methods](#methods) +> +> 6 [Usage](#usage) +> +> 7 [Using the Control](#using-the-control) +> +> 8 [Video Demo](#video-demo) +> +> 9 [Credits and Donation](#credits-and-donation) +> +> 10 [External links](#external-links) + +--------- + +## Overview `ColorToggleGroup` manages a set of `ColorToggleButton` items as a single-selection group. It supports both tap-to-select and drag-to-select gestures, ensuring that only one color is selected at a time. Selection state is coordinated internally; consumers only need to respond to `OnColorSelected`. @@ -18,6 +46,8 @@ Typical use cases: - Theme or accent color selectors - Tag or category color selectors +--------- + ## Properties | Name | Description | Options | @@ -26,6 +56,8 @@ Typical use cases: | `SelectedColor` | Gets the currently selected color. `null` if nothing is selected. | `Color?` (nullable) | | `Alignment` | Controls the flex direction of the buttons container. | `FlexDirection` | +--------- + ## USS Classes | Class | Description | @@ -33,19 +65,49 @@ Typical use cases: | `colorToggleGroup` | Root element. | | `colorToggleGroup__container` | Flex container that holds all `ColorToggleButton` children. | +--------- + ## Events | Name | Description | Arguments | | --- | --- | --- | | `OnColorSelected` | Fired when the user selects a color by tap or drag. Not fired when selection changes programmatically via `SelectColor(color, propagateEvent: false)`. | `Color selectedColor` | -## Public Methods +--------- + +## Methods | Signature | Description | | --- | --- | | `DeselectAll()` | Clears the current selection without firing `OnColorSelected`. | | `SelectColor(Color color, bool propagateEvent = true)` | Programmatically selects the button whose color matches. Pass `propagateEvent: false` to suppress `OnColorSelected`. | +--------- + +## Usage + +> Add the control to your scene using: +> +> GameObject -> UI Toolkit -> Extensions -> Color Toggle Group +> +> This creates a UIDocument in the scene (plus a PanelSettings with the default runtime theme, if the project has none) and assigns an editable starter template with demo content, copied to *Assets/UI Toolkit Extensions*. +> +> A starter template can also be added to an existing document using: +> +> Assets -> Create -> UI Toolkit -> Extensions -> Color Toggle Group Starter + +Alternatively, drag the control into a document from the UI Builder Library (*Project -> Custom Controls -> UnityUIToolkit.Extensions*) or declare it directly in UXML: + +```xml + + + +``` + +The shared extensions stylesheet is applied automatically when the control is created in the Editor and in Play Mode, so no manual stylesheet reference is needed while authoring. The starter templates also reference the stylesheet explicitly, which covers player builds; for hand-written UXML or code-first UI in builds, add the stylesheet to your UXML or panel theme. + +--------- + ## Using the Control ### Inline Color Picker @@ -98,3 +160,31 @@ public class ThemeSelectorController : MonoBehaviour } } ``` + +--------- + +## Video Demo + + + +### Example Scenes + +This control is demonstrated in the following package example: + +- [Profile Editor](/uitoolkit/examples/profile-editor/) + +--------- + +## Credits and Donation + +SimonDarksideJ + +--------- + +## External links + +[UI Toolkit Extensions repository](https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions) | [OpenUPM package](https://openupm.com/packages/com.unity.uitoolkitextensions/) + +--------- diff --git a/uitoolkit/controls/coming-soon-message/coming-soon-message-example.png b/uitoolkit/controls/coming-soon-message/coming-soon-message-example.png new file mode 100644 index 0000000..d26f879 Binary files /dev/null and b/uitoolkit/controls/coming-soon-message/coming-soon-message-example.png differ diff --git a/uitoolkit/controls/coming-soon-message/index.md b/uitoolkit/controls/coming-soon-message/index.md index b975f20..500cf24 100644 --- a/uitoolkit/controls/coming-soon-message/index.md +++ b/uitoolkit/controls/coming-soon-message/index.md @@ -8,7 +8,35 @@ has_video: false tags: [feedback, placeholder, coming-soon, panel] --- -## Summary +![Coming Soon example](coming-soon-message-example.png) + +--------- + +## Contents + +> 1 [Overview](#overview) +> +> 2 [Properties](#properties) +> +> 3 [USS Classes](#uss-classes) +> +> 4 [Events](#events) +> +> 5 [Methods](#methods) +> +> 6 [Usage](#usage) +> +> 7 [Using the Control](#using-the-control) +> +> 8 [Example Scenes](#example-scenes) +> +> 9 [Credits and Donation](#credits-and-donation) +> +> 10 [External links](#external-links) + +--------- + +## Overview `ComingSoonMessage` is a simple full-area placeholder element that fills its container and communicates that a feature or screen is not yet available. It renders a background layer, a prominent title, and a descriptive message label. @@ -18,12 +46,16 @@ Typical use cases: - Stub pages inside a `ScrollSnap` onboarding flow - In-progress feature sections within a settings or navigation layout +--------- + ## Properties | Name | Description | Options | | --- | --- | --- | | `Title` | Gets or sets the large heading text. | `string` | +--------- + ## USS Classes | Class | Description | @@ -33,16 +65,46 @@ Typical use cases: | `comingSoonMessage__title` | Large heading label. | | `comingSoonMessage__label` | Secondary descriptive message label below the title. | +--------- + ## Events This control does not emit events. -## Public Methods +--------- + +## Methods | Signature | Description | | --- | --- | | `SetMessage(string text)` | Sets the secondary descriptive message shown below the title. | +--------- + +## Usage + +> Add the control to your scene using: +> +> GameObject -> UI Toolkit -> Extensions -> Coming Soon Message +> +> This creates a UIDocument in the scene (plus a PanelSettings with the default runtime theme, if the project has none) and assigns an editable starter template with demo content, copied to *Assets/UI Toolkit Extensions*. +> +> A starter template can also be added to an existing document using: +> +> Assets -> Create -> UI Toolkit -> Extensions -> Coming Soon Message Starter + +Alternatively, drag the control into a document from the UI Builder Library (*Project -> Custom Controls -> UnityUIToolkit.Extensions*) or declare it directly in UXML: + +```xml + + + +``` + +The shared extensions stylesheet is applied automatically when the control is created in the Editor and in Play Mode, so no manual stylesheet reference is needed while authoring. The starter templates also reference the stylesheet explicitly, which covers player builds; for hand-written UXML or code-first UI in builds, add the stylesheet to your UXML or panel theme. + +--------- + ## Using the Control ### Stub Page in a ScrollSnap @@ -97,3 +159,25 @@ else _comingSoon.SetMessage("Upgrade to unlock this section."); } ``` + +--------- + +## Example Scenes + +This control is demonstrated in the following package example: + +- [Scroll Snap & Dots](/uitoolkit/examples/scroll-snap-and-dots/) + +--------- + +## Credits and Donation + +SimonDarksideJ + +--------- + +## External links + +[UI Toolkit Extensions repository](https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions) | [OpenUPM package](https://openupm.com/packages/com.unity.uitoolkitextensions/) + +--------- diff --git a/uitoolkit/controls/dropdown-menu/dropdown-menu-demo.webm b/uitoolkit/controls/dropdown-menu/dropdown-menu-demo.webm new file mode 100644 index 0000000..fd64440 Binary files /dev/null and b/uitoolkit/controls/dropdown-menu/dropdown-menu-demo.webm differ diff --git a/uitoolkit/controls/dropdown-menu/dropdown-menu-example.png b/uitoolkit/controls/dropdown-menu/dropdown-menu-example.png new file mode 100644 index 0000000..83947bc Binary files /dev/null and b/uitoolkit/controls/dropdown-menu/dropdown-menu-example.png differ diff --git a/uitoolkit/controls/dropdown-menu/index.md b/uitoolkit/controls/dropdown-menu/index.md index 7c417c4..d627213 100644 --- a/uitoolkit/controls/dropdown-menu/index.md +++ b/uitoolkit/controls/dropdown-menu/index.md @@ -8,7 +8,35 @@ has_video: false tags: [navigation, menu, dropdown, overlay, actions] --- -## Summary +![Dropdown menu example](dropdown-menu-example.png) + +--------- + +## Contents + +> 1 [Overview](#overview) +> +> 2 [Nested Types](#nested-types) +> +> 3 [Properties](#properties) +> +> 4 [USS Classes](#uss-classes) +> +> 5 [Methods](#methods) +> +> 6 [Usage](#usage) +> +> 7 [Using the Control](#using-the-control) +> +> 8 [Video Demo](#video-demo) +> +> 9 [Credits and Donation](#credits-and-donation) +> +> 10 [External links](#external-links) + +--------- + +## Overview `DropDownMenuControl` is a lightweight, anchored drop-down **action menu** — the kind of overflow / context menu that opens from a "⋯" or avatar button. It opens as an overlay anchored to a trigger element and dismisses when the backdrop is tapped. Each option is a large, independently tappable row; choosing one closes the menu and invokes that option's callback. @@ -22,6 +50,8 @@ Typical use cases: - Right-click / long-press context actions (View, Edit, Remove…) - Compact action menus anchored to an avatar or icon button +--------- + ## Nested Types | Type | Description | @@ -36,12 +66,16 @@ Typical use cases: | `AnchorRight` | Right edge aligned to the anchor's right edge, dropping downward (flips upward on bottom overflow). The default. | | `CenteredOnAnchor` | Centered on the anchor on both axes, clamped to the screen edges. | +--------- + ## Properties | Name | Description | Options | | --- | --- | --- | | `IsOpen` | (Read-only) Whether the menu is currently open. | `bool` | +--------- + ## USS Classes | Class | Description | @@ -52,13 +86,33 @@ Typical use cases: | `dropDownMenuControl__row--first` | Modifier applied to the first row (e.g. to drop the top divider / round the top corners). | | `dropDownMenuControl__rowLabel` | The label inside a row. Picking is ignored so the row receives the tap. | -## Public Methods +--------- + +## Methods | Signature | Description | | --- | --- | | `Open(VisualElement anchor, IReadOnlyList options, Placement placement = AnchorRight, Action onDismissed = null)` | Builds the rows and opens the menu anchored to `anchor`. Ignored if `anchor`/`options` are null or empty, or the anchor is not attached to a panel. Re-opening while open closes the previous instance first. | | `Close()` | Closes the menu, removes the panel and backdrop, and invokes the `onDismissed` callback (unless an option was chosen, which clears it first). | +--------- + +## Usage + +> A starter can be added to your scene using: +> +> GameObject -> UI Toolkit -> Extensions -> Drop Down Menu +> +> This creates a UIDocument in the scene (plus a PanelSettings with the default runtime theme, if the project has none) and assigns an editable starter template — a single bordered item row with a "···" trigger — copied to *Assets/UI Toolkit Extensions*. Because this control has no UXML element, the menu entry also adds a `DropDownMenuStarterController` component that constructs the menu and wires the trigger with three demo options; replace it with your own controller in real use. +> +> The starter layout (without the demo controller) can also be added to an existing document using: +> +> Assets -> Create -> UI Toolkit -> Extensions -> Drop Down Menu Starter + +In your own code, construct a `DropDownMenuControl` and call `Open(anchor, options)`; the menu attaches itself to the panel root above all other content. The shared extensions stylesheet is applied automatically when the control is created. + +--------- + ## Using the Control ### Open an overflow menu from a button @@ -73,10 +127,14 @@ public class CardActionsController : MonoBehaviour { [SerializeField] private UIDocument _document; - private readonly DropDownMenuControl _menu = new DropDownMenuControl(); + // Constructed in OnEnable — Unity does not allow VisualElements to be created + // from a MonoBehaviour constructor or field initializer. + private DropDownMenuControl _menu; private void OnEnable() { + _menu = new DropDownMenuControl(); + var moreButton = _document.rootVisualElement.Q