- Radio knop
🧬 Assembly-onderdelen
Radio knop
ContributeRadio knop
Een radioknop is een invoercomponent selecteren waarmee gebruikers één optie kunnen selecteren uit een groep vooraf gedefinieerde opties. Het verschijnt als een afgeronde vierkantsknop, die kan worden geselecteerd of gedeselecteerd door gebruikers. Wanneer een keuzerondje is geselecteerd, worden alle andere radioknoppen in dezelfde groep automatisch gedeselecteerd, zorg ervoor dat er slechts één optie tegelijk geselecteerd kan worden. Keuzerondjes worden vaak gebruikt in formulieren, vragenlijsten, en enquêtes om gebruikers te helpen één keuze te maken uit een lijst met opties.
Eigenschappen
Handmatige opties
Voeg nieuwe opties toe of verwijder opties handmatig en configureer de opties één voor één. De eigenschappen van opties zijn als volgt:
| Eigenschappen | Beschrijving |
|---|---|
| Omschrijving | De tekst die wordt weergegeven voor de optie |
| Waarde | De waarde geassocieerd met de optie |
| Uitgeschakeld | Of de optie is uitgeschakeld voor selectie |
Toegewezen opties
Je kunt ook opties uit een gegevensbron toevoegen door de eigenschappen van het label en de waarde te koppelen aan de overeenkomstige gegevensvelden. Op deze manier kun je opties dynamisch uit de database halen. Aan het eind van dit artikel zullen we laten zien hoe we het kunnen gebruiken door middel van een voorbeeld.
| Eigenschappen | Beschrijving |
|---|---|
| Data bron | Gegevensbron van opties instellen |
| Omschrijving | Gebruik {{item}} om het label van opties in te stellen |
| Waarde | Gebruik {{item}} om de waarde van opties in te stellen |
| Uitgeschakeld | Gebruik {{item}} om in te stellen of de optie is uitgeschakeld voor selectie |
Andere eigenschappen
| Eigenschappen | Beschrijving |
|---|---|
| Standaard waarde | De initiële waarde van het component. U kunt de initiële waarde dynamisch wijzigen door JavaScript in {{}}. |
| Plaatsaanduiding | De waarde wordt getoond wanneer het invoerveld leeg is. |
| Omschrijving | De naam van het veld weergegeven aan de gebruiker |
| Onderschrift | Een onderschrift gebruikt om het veld in detail te beschrijven |
| Verborgen label | Stel in of het label moet worden weergegeven |
| Positie | Stel de positie van het label in ten opzichte van het component |
| Uitlijning | Stel de uitlijning van het label in |
| Width | Wanneer het label aan de linkerkant van het onderdeel staat, stel de breedteverhouding van het label in |
| Event Handler | Trigger query’s, beheer componenten of bel andere API’s in reactie op gebeurtenissen in component. |
| Uitgeschakeld | Controleer de status of de component is uitgeschakeld. De component kan niet worden gewijzigd of gefocust wanneer het is uitgeschakeld. |
| Alleen lezen | Bepaal de status of de component alleen-lezen is. Een alleen-lezen component kan worden geselecteerd en gefocust maar kan niet worden gewijzigd. |
| Toon wissen knop | Stel in of de wissen knop moet worden weergegeven |
| Knopinfo | Gebruikers kunnen hier de tooltip van de component invoeren. De tooltip wordt getoond wanneer de focus is gefocuerd. Markdown formaat wordt ondersteund. |
| Verplicht veld | Geldig alleen wanneer de schakelaar ingeschakeld is. |
| Aangepaste regel | editor.inspect.setter_tooltip.custom_rule |
| Validatiebericht verbergen | U kunt de foutmelding verbergen door te schakelen naar verborgen status wanneer de ingevoerde waarde onjuist is. Je kunt de verborgen status dynamisch wijzigen per JavaScript. |
| Formulier gegevenssleutel | Specificeer een sleutel van een inpakformulier component bij het maken van de gegevensattribuut. |
| Hidden | Dynamisch beheren of het onderdeel verborgen is. Je kunt de verborgen status veranderen via dynamische booleaanse waarde. |
| Thema kleur | Om de themakleur van het component te selecteren |
Methode
U kunt andere componenten gebruiken om het onderdeel te beheren. Wij steunen de volgende drie methoden:
stelwaarde
Om de geselecteerde optie in te stellen, bijvoorbeeld {{”value1”}}
| Eigenschappen | Beschrijving |
|---|---|
| Waarde | Een tekenreeks van geselecteerde optiewaarde. |
leeswaarde
Om de geselecteerde opties te wissen
validate
Om te controleren of de invoerinformatie legaal is
wissen
Om het validatiebericht te wissen
Event handler
We ondersteunen het luisteren naar het onChange evenement van het Radio button component.
Wanneer de geselecteerde optie verandert, kan het een gespecificeerde actie starten. Dit betekent dat wanneer een gebruiker een andere optie selecteert van een groep radioknoppen, een bepaalde actie kan worden ondernomen op basis van de gekozen optie. Bijvoorbeeld in een webformulier, het selecteren van een andere optie kan de weergave van verschillende formuliervelden of het indienen van het formulier naar een andere bestemming. Op deze manier kan de door de gebruiker geselecteerde optie het gedrag van de software of webapplicatie die ze gebruiken beïnvloeden. De mogelijkheid om specifieke acties te activeren op basis van gebruikersinvoer is een belangrijk aspect van interactief softwareontwerp en kan de bruikbaarheid en functionaliteit van de software verbeteren.
Gegevens
Het component heeft enkele algemeen gebruikte gegevens, die kunnen worden opgeroepen via {{componentName.propertyName}} in de app.
| Naam van eigenschap | Beschrijving |
|---|---|
| waarde | een tekenreeks van waarde van de geselecteerde optie |
Gebruik geval
Vervolgens zullen we laten zien hoe we de mapped modus kunnen gebruiken om op dynamische wijze opties te verkrijgen.
Stap 1 Voeg een actie toe
We hebben een tabel genaamd selection, inclusief 5 kolommen: options_en, options_jp, options_zh, options_kr, value. We hebben de optiewaarden opgeslagen in value en opgeslagen optielabel in verschillende talen in andere kolommen.
Maak een actie aan om alle gegevens in selection genaamd postgresql1 te tonen
selecteer * uit selectieStap 2 Configureer het component
Zet de gegevensbronnen op
{{postgresql1.data}}Configureer het label om het label te wijzigen op basis van de taal.
- Gebruik {{ item.columnName }} om de kolom in te stellen.
- Gebruik {{ currentUserInfo.language }} om in te stellen welke taalgebruikers gebruiken in ILLA.
{{currentUserInfo.language=='ja-JP' ? ? item.options_jp : currentUserInfo.language == 'ko-KR' ? item.options_kr : currentUserInfo.language == 'zh-CN' ? item.options_zh : item.options_n_n}}
