WebHU - Programozási kérdések és válaszok

Egy papír-rádiógombot (div-vel burkolva) társítani egy papírrádió-csoporthoz?

Több paper-radio-button-et is társíthatok egy csoporton belül, ha a gombok egy paper-radio-group közvetlen gyermekei.

<paper-radio-group selected="{{someProperty}}">
  <paper-radio-button name="foo">Foo</paper-radio-button>
  <paper-radio-button name="bar">Bar</paper-radio-button>
  <paper-radio-button name="baz">Baz</paper-radio-button>
</paper-radio-group>

Ha azonban az egyik paper-radio-button-et egy ilyen div-vel burkolom, elveszti kapcsolatát a csoporttal (tehát ki lehet választani mind azt a becsomagolt gombot, mind a többit). Ez azért probléma, mert eszközleírást szeretnék adni ennek a gombnak.

<paper-radio-group selected="{{someProperty}}">
  <paper-radio-button name="foo">Foo</paper-radio-button>
  <paper-radio-button name="bar">Bar</paper-radio-button>
  <div>
    <paper-radio-button name="baz">Baz</paper-radio-button>
    <paper-tooltip>Tooltip text for baz.</paper-tooltip>
  </div>
</paper-radio-group>

Megpróbáltam a paper-tooltip for attribútuma használatát, de ez nem teszi lehetővé, hogy az eszköztipp csak akkor jelenik meg, ha az adott gomb fölé kerül.

Hogyan társíthatnám a paper-radio-button-et a paper-radio-group-hoz anélkül, hogy a gomb közvetlen gyermek lenne?

polymer paper-elements
20.03.2017

  • Úgy gondolom, hogy az Ön viselkedését ebben a plunkban wrapper div használata nélkül implementáltam. Ehelyett csak megadok egy azonosítót a rádiógombnak, és a for értéket használom az eszköztippben. Azt mondtad, ez neked nem ment. A megoldásom az Ön specifikációi szerint működik? Ha nem, mi hiányzik? 23.03.2017
  • Tudunk-e eszközleírást adni mindegyik rádiógombhoz? Nem csak az utolsó? 24.03.2017
  • Igen, lásd lentebb a válaszomat. 24.03.2017
  • Miért nem működik neked @Maria válasza? 29.03.2017

Válaszok:


1

Eszköztippek hozzáadásához hozzon létre egy id értéket minden olyan választógombhoz, amelyhez elemleírás szükséges. Ezután használhatja a for-t, és tekintse meg a id-t. Nincs szükség csomagolóanyagra div.

<paper-radio-group>
    <paper-radio-button id="foo" name="foo">Foo</paper-radio-button>
    <paper-tooltip for="foo">Tooltip text for foo.</paper-tooltip>
    <paper-radio-button id="bar" name="bar">Bar</paper-radio-button>
    <paper-tooltip for="bar">Tooltip text for bar.</paper-tooltip>
    <paper-radio-button id="baz" name="baz">Baz</paper-radio-button>
    <paper-tooltip for="baz">Tooltip text for baz.</paper-tooltip>
</paper-radio-group>

Ebben a plunkban talál egy működő bemutatót.

24.03.2017

2

Két probléma van a div paper-radio-group-en belüli használatával

  1. A Paper-radio-group azt várja, hogy a kiválasztható elem egy paper-radio-button legyen. Ez egy egyszerű probléma, mint radio-group has a property namedselectable`, amelyet felülírhat a viselkedés megváltoztatásához.
  2. A második és bonyolultabb probléma az, hogy a paper-radio-group átkapcsolja a pipálva tulajdonság azon az elemen, amelyet kiválaszthatónak választott. Az egyik megoldás, amit találtam erre, az volt, hogy figyelmen kívül hagytam a bejelölt paper-radio-group beállítást, és egy koppintási figyelőt adtam hozzá az összes div-hez a radio-buttons manuális átkapcsolásához.

Mindazonáltal ez a megoldás továbbra is működik a radio-group összes közvetlen gyermekével, amely ugyanazon HTML-elem különböző példányai.

<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="https://polygit.org/components/paper-radio-button/paper-radio-button.html">
<dom-module id="group-with-div">
  <template>
        <style></style>
        <paper-radio-group selectable="div">
            <div name="one" data-selected="1" on-tap="changeSelection">
                <paper-radio-button id="1">one</paper-radio-button>
            </div>
               <div name="two" data-selected="2" on-tap="changeSelection">
                <paper-radio-button id="2">two</paper-radio-button>
            </div>
               <div name="three" data-selected="3" on-tap="changeSelection">
                <paper-radio-button id="3">three</paper-radio-button>
            </div>
            
        </paper-radio-group>
    </template>
</dom-module>
<script>
  Polymer({
    is: 'group-with-div',
    properties: {

    },
    changeSelection: function(e) {
      for (var i = 1; i <= 3; i++) { //i should be less than number of radio buttons (this code is mainly added to handle dynamically created buttons)
        if (e.currentTarget.attributes['data-selected'].value == i) {
          this.$[i].set('checked', true);
        } else {
          this.$[i].set('checked', false);
        }
      }
    }
  })
</script>


<group-with-div></group-with-div>

27.03.2017
Új anyagok
A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..