framework7io / framework7io/framework7
UX - Toggle with Yes/no label + lang - only with css -
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.8k
- Forks
- 3.2k
- PR merge metrics
- No merged PRs in 30d
Description
Hi Vladimir, I've done a user test and saw some things to improve, about people of 50-60 years using the phone.
They don't understand if the toggle is "on" or "off"
ex:
The solution that we found is add a "yes" or "no" label, each time they click it, and my Damian, from my team solved it only with css.
Maybe you could add it to the core of f7.
- Add a lang to the like this:
<html lang="en"> - add this css rule
html[lang="en"] .toggle input[type="checkbox"]:checked + .toggle-icon:before {
content: "Yes";
}
The full html example code (in spanish) is:
<li class="item-content item-input">
<div class="item-inner">
<span>{{nombre}}</span>
<label class="toggle toggle-init color-green">
<input type='checkbox' class='f chk_usuarios' name='chk_usuario' id='chk_usuario_{{uuid}}' value='{{uuid}}' {{#if habilitado}} checked='checked' {{/if}} >
<span class="toggle-icon"></span>
</label>
</div>
</li>
and the results are:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating Framework7's toggle component markup and CSS, then compare it with the checkbox and .toggle-icon structure shown in the issue. The change is done when toggles visibly communicate their checked state with Yes/No labels and support the requested language-based styling without affecting existing toggle behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100