Rounded toggle button issue
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức phù hợp với người mới
- 42/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Khá rõ ràng
- Mức độ hoạt động
- Đình trệ
- Công nghệ
- css
- Lĩnh vực
- documentation, frontend
Hướng nghiên cứu
Bắt đầu với docs/products/buttons.mdx và scss/product/components/_buttons.scss, sau đó tái hiện TypeError được báo cáo khi build tài liệu. Truy vết lỗi slice được báo cáo đến ví dụ toggle bo tròn hoặc phần styling của nó, và xem công việc là hoàn tất khi ví dụ build không có lỗi và render toggle bo tròn như dự kiến.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
Signed-off-by: ashishjain [email protected]
Trying to add css for Rounded-Toggle-Button , but error giving --
./docs/products/buttons.mdx
TypeError: (intermediate value).slice is not a function
docs/products/buttons.mdx
### Button group with Toggle
<Playground>
<h2>Toggle Switch</h2>
<label class="btn-pill-switch">
<input type="checkbox" style="display: none;">
<span class="pill-toggle pill-round ">primary</span>
</label>
</Playground>
_scss/product/components/buttons.scss
.btn-pill-switch {
position: relative;
display: inline-block;
vertical-align: middle;
width: 48px;
height: 28px;
}
.pill-toggle {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
padding-top:4px;
background-color: white;
}
.pill-round {
border-radius: 34px;
border:1px solid gray;
}
input:checked + .pill-toggle {
background-color: blue;
color:white;
border:1px solid blue;
}
Attached screenshot for desire result --

- Ngôn ngữ chính
- CSS
- Star
- 6
- Fork
- 6
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Chuẩn bị môi trường
- Có Dockerfile hoặc tệp Docker Compose
- Không có mẫu pull request
- Không có hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của mayadata-io/de-code
-
bump the docs versionĐang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 20/100
mayadata-io/de-code#140 ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 35/100
mayadata-io/de-code#137 ·
-
Icons
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 35/100
mayadata-io/de-code#136 · 1 bình luận ·
-
Fix wave iconCó thể làm lại được @kalyantt đã nhận 2556 ngày trước và không có pull request nào đang mở. Đang mở
mayadata-io/de-code#105 · 1 người được giao ·
-
page Typography
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 20/100
mayadata-io/de-code#56 ·
Tất cả issue của mayadata-io/de-code
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
UNIVERSE-HPC/course-material#283 ·
-
refactor
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 80/100
pedrorchagas/blog-api#16 ·
-
documentation
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 62/100
amatya-aditya/obsidian-rss-dashboard#976 ·
Maintainer thường phản hồi trong vòng 1 ngày
-
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 72/100
supadata-ai/mcp#27 ·
-
area:space-accuracy good first issue track:data
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 85/100
Sara-Managed-Projects/space-radar#904 ·
Maintainer thường phản hồi trong vòng 1 ngày