ionic-team / ionic-team/ionic-framework

feat: allow custom spinners for `ion-spinner`/`ion-loading`

Đang mở
#23,912 6 bình luận 3 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Allow an HTML element (such as one created with `createElement()`) to be given to the `ion-spinner`. This functionality should be able to come through to `ion-loading`, as it uses an `ion-spinner` under the hood.

### Describe the Use Case

Sometimes I want a spinner that "just works", but want it to be slightly more "on brand" than a stock style.
I created a Vue component that holds an animated SVG (for easy reuse), but have no way to use it with Ionic.
Note: a Vue component gets compiled to standard HTML elements, so the root element of the Vue component can be passed to the `ion-spinner`.

Maybe using a custom spinner design violates someone's interface design guidelines/rules? (looking at you Apple)

### Describe Preferred Solution

Allow an element to be given when creating a spinner using the spinner controller.

Not sure which way would be best.
Maybe change the `spinner` property/param to allow `HTMLElement` as well or something?
For the element version of `ion-spinner`, it could use a named slot: `slot="spinner"`?

### Describe Alternatives

1. Use a custom spinner instead of `ion-spinner`. This can actually work in many cases, but not when I want to use `ion-loading`.
2. Set the spinner style to `none` and target the background of the spinner with CSS. e.g. `background: url(#my-spinner-svg)`
Someone on the Ionic forum mentioned doing this as a workaround. I can find it again if needed.
This unfortunately is more complex and only allows for a single SVG to be set.

### Related Code

_No response_

### Additional Information

As to implementing, I looked at Ionic's source, and I think this could get hairy. If it would be too complex, please say so and feel free to drop the request :).

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.