|
|
@ 100 Hz 
S.W.R.
09″ (L) x 5.12″ (W) x 3.15″ (H)] ( without Interface Connectors and Screws )Привязка: Радио | Aurelia
Введение
Группа радиовходов представляет собой тип интерфейса «один выбор». Aurelia поддерживает двустороннюю привязку свойств любого типа к группе радиовходов. Примеры ниже иллюстрируют привязку числовых, объектных, строковых и логических свойств к наборам радиовходов. В каждом из примеров есть общий набор шагов:
- Сгруппируйте радиостанции с помощью свойства
имя.
- Определите значение каждого радиомодуля, используя свойство
модели. - Двусторонняя привязка
проверенного атрибутакаждого радио к свойству «выбранный элемент» в модели представления.
Числа
Начнем с примера, в котором используется числовое свойство «выбранный элемент». В этом примере каждому радиовходу будет присвоено числовое значение через свойство модели. Выбор радио приведет к тому, что значение его модели будет присвоено selectedProductId свойство.
приложение класса экспорта {
продукты = [
{идентификатор: 0, имя: «Материнская плата»},
{идентификатор: 1, имя: 'ЦП'},
{идентификатор: 2, имя: «Память»},
];
выбранныйпродуктид = ноль;
}
интерфейс экспорта IProduct {
идентификационный номер;
имя: строка;
}
приложение класса экспорта {
продукты: IProduct[] = [
{идентификатор: 0, имя: «Материнская плата»},
{идентификатор: 1, имя: 'ЦП'},
{идентификатор: 2, имя: «Память»},
];
selectedProductId: число = ноль;
}
<шаблон>
<форма>
Товары
for="продукт продуктов">
<тип ввода = "радио" имя = "группа1"
model.bind="product.id" checked.bind="selectedProductId">
${product.id} - ${product.name}
Идентификатор выбранного продукта: ${selectedProductId}
Объекты
Система привязки поддерживает привязку всех типов к радио, включая объекты. Вот пример, который связывает группу радиостанций с
приложение класса экспорта {
продукты = [
{идентификатор: 0, имя: «Материнская плата»},
{идентификатор: 1, имя: 'ЦП'},
{идентификатор: 2, имя: «Память»},
];
выбранный продукт = ноль;
}
интерфейс экспорта IProduct {
идентификационный номер;
имя: строка;
}
приложение класса экспорта {
продукты: IProduct[] = [
{идентификатор: 0, имя: «Материнская плата»},
{идентификатор: 1, имя: 'ЦП'},
{идентификатор: 2, имя: «Память»},
];
выбранный продукт: IProduct = null;
}
<шаблон>
<форма>
Товары
for="продукт продуктов">
<тип ввода = "радио" имя = "группа2"
model.bind="product" checked.bind="selectedProduct"> ${product.id} - ${product.name}
Выбранный продукт: ${selectedProduct.id} - ${selectedProduct.name}
Объекты с Matcher
Вы можете столкнуться с ситуациями, когда объект, к которому привязана модель вашего входного элемента, не имеет ссылочного равенства ни одному объекту в вашем атрибуте checked, к которому привязан. Объекты могут совпадать по идентификатору, но они могут не быть одним и тем же экземпляром объекта. Чтобы поддержать этот сценарий, вы можете переопределить «сопоставитель» Aurelia по умолчанию, который представляет собой функцию сравнения равенства, которая выглядит следующим образом: (а, б) => а === б . Вы можете заменить функцию по вашему выбору, которая имеет правильную логику для сравнения ваших объектов.
приложение класса экспорта {
selectedProduct = {id: 1, name: 'CPU' };
productMatcher = (a, b) => a. id === b.id;
}
интерфейс экспорта IProduct {
идентификационный номер;
имя: строка;
}
приложение класса экспорта {
selectedProduct: IProduct = {id: 1, name: 'CPU' };
productMatcher = (a, b) => a.id === b.id;
}
<шаблон>
<форма>
Товары
<метка>
<тип ввода = "радио" имя = "группа3"
model.bind="{id: 0, имя: 'Материнская плата'}"
matcher.bind="productMatcher"
checked.bind="выбранный продукт">
Материнская плата
<метка>
<тип ввода = "радио" имя = "группа3"
model.bind="{id: 1, имя: 'ЦП'}"
matcher.bind="productMatcher"
checked.bind="выбранный продукт">
Процессор
<метка>
<тип ввода = "радио" имя = "группа3"
model.bind="{id: 2, имя: 'Память'}"
matcher.bind="productMatcher"
checked. bind="выбранный продукт">
Память
Выбранный продукт: ${selectedProduct.id} - ${selectedProduct.name}
bind="выбранный продукт">
Память
Выбранный продукт: ${selectedProduct.id} - ${selectedProduct.name}
Логические значения
В этом примере каждому радиовходу присваивается одно из трех литеральных значений: null , true и false . При выборе одного из радиоприемников его значение будет присвоено свойству likeCake .
приложение класса экспорта {
любитторт = ноль;
}
приложение класса экспорта {
любитторт = ноль;
}
<шаблон>
<форма>
Тебе нравится торт?
<метка>
<тип ввода = "радио" имя = "группа3"
model.bind="null" checked.bind="likesCake">
Не знаю
<метка>
<тип ввода = "радио" имя = "группа3"
model.bind="true" checked.bind="likesCake">
Да
<метка>
<тип ввода = "радио" имя = "группа3"
model. bind="false" checked.bind="likesCake">
Нет
нравитсяТорт = ${нравитсяТорт}
bind="false" checked.bind="likesCake">
Нет
нравитсяТорт = ${нравитсяТорт}
Строки
Наконец, вот пример использования строк. Этот пример уникален, потому что он не использует model.bind для назначения значения каждого радио. Вместо этого используется стандартный входной атрибут value . Обычно мы не можем использовать стандартный атрибут value в сочетании с привязкой checked, потому что он принуждает все, что ему назначено, к строке.
приложение класса экспорта {
products = ['Материнская плата', 'ЦП', 'Память'];
выбранный продукт = ноль;
}
приложение класса экспорта {
products: string[] = ['Материнская плата', 'ЦП', 'Память'];
выбранный продукт = ноль;
}
<шаблон>
<форма>
Товары
Radio Property for iOS and Android
shadowRadios должны использоваться внутри группы radio. Нажатие на радио отметит его и снимет отметку с ранее выбранного радио, если оно есть. Их также можно проверить программно, установив для свойства value родительской группы переключателей значение радио.
Если радиостанции находятся внутри группы радиостанций, в любой момент времени будет проверяться только одна радиостанция. Если необходимо выбрать более одного элемента, вместо них следует использовать флажки. Радиостанции можно отключить внутри группы, чтобы предотвратить взаимодействие с ними.
Разработчики могут использовать свойство labelPlacement для управления размещением метки относительно элемента управления.
Разработчики могут использовать свойство justify для управления размещением метки и элемента управления в строке.
ion-item используется только в демонстрациях, чтобы показать, как работает оправдание . Это не требуется для правильной работы justify .
По умолчанию после выбора радиостанции ее нельзя отменить; повторное нажатие сохранит его выбранным. Это поведение можно изменить с помощью allowEmptySelection свойство родительской группы радиостанций, которое позволяет отменить выбор радиостанций.
Цвета
Пользовательские свойства CSS
Теневые части CSS
В Ionic 7.0 был введен более простой синтаксис радио. Этот новый синтаксис уменьшает количество шаблонов, необходимых для настройки радио, решает проблемы доступности и улучшает опыт разработчиков.
Разработчики могут выполнять эту миграцию по одному радио за раз. Хотя разработчики могут продолжать использовать устаревший синтаксис, мы рекомендуем выполнить миграцию как можно скорее.
Использование современного синтаксиса
Использование современного синтаксиса включает удаление ion-label и передачу метки непосредственно внутри ion-radio .
Размещение метки можно настроить с помощью свойства labelPlacement на ion-radio . Способ размещения этикетки и элемента управления в строке можно контролировать с помощью свойства justify на ion-radio .
- JavaScript
- Угловой
- React
- Vue
Радиометка
Ярлык радио
Радиометка
Ярлык радио
Ярлык радио
Ярлык радио
В прошлых версиях Ionic ion-item был требуется для правильной работы ion-radio .
Начиная с Ionic 7.0, ion-radio следует использовать только в ion-item , когда элемент помещен в ion-list . Кроме того, ion-item больше не требуется для правильной работы ion-radio .
Использование устаревшего синтаксиса
Ionic использует эвристику, чтобы определить, использует ли приложение современный синтаксис радио. В некоторых случаях может быть предпочтительнее продолжать использовать устаревший синтаксис. Разработчики могут установить для свойства legacy на ion-radio значение true , чтобы заставить этот экземпляр радио использовать устаревший синтаксис.
цвет
| Описание | Используемый цвет из цветовой палитры вашего приложения. Варианты по умолчанию: "основной" , "вторичный" , "третичный" , "успешный" , "предупреждение" , "опасный" , "легкий" 900 09, |
| Атрибут | цвет |
| Тип | "опасность ｜ «темный» ｜ «светлый» ｜ «средний» ｜ «основной» ｜ «вторичный» ｜ «успех» ｜ «третичный» ｜ «предупреждение» ｜ строка и запись <никогда, никогда> ｜ не определено |
| По умолчанию | не определено |
Дополнительные сведения о цветах см. в теме.отключено
| Описание | Если true , пользователь не может взаимодействовать с радио. |
| Атрибут | отключен |
| Тип | логический |
| По умолчанию | false |
justify
| Описание | Как упаковать этикетку и радио в одну линию. "start" : Ярлык и радио появятся слева в LTR и справа в RTL. "конец" : Метка и радио появятся справа в LTR и слева в RTL. "space-between" : Метка и радио появятся на противоположных концах строки с пробелом между двумя элементами. |
| Атрибут | выравнивание |
| Тип | "конец" ｜ "пробел" ｜ "начало" |
| По умолчанию | 'пробел между ' |
labelPlacement
| Описание | Где разместить метку относительно радио. "start" : Метка появится слева от радио в LTR и справа в RTL. "end" : Метка появится справа от радио в LTR и слева в RTL. "fixed" : метка имеет то же поведение, что и "start" , за исключением того, что она также имеет фиксированную ширину. Длинный текст будет обрезан многоточием ("..."). |
| Атрибут | размещение этикетки |
| Тип | «конец» ｜ «фиксированный» ｜ «начало» |
| По умолчанию | «старт» |
наследие
| Описание | Установить устаревшее свойство на true , чтобы принудительно использовать устаревшую разметку элемента управления формой. Ionic выберет компоненты для современной разметки формы, только если они используют либо атрибут aria-label , либо слот по умолчанию, который содержит текст метки. В результате устаревшее свойство следует использовать только в качестве аварийного люка, когда вы хотите избежать этого автоматического поведения согласия. Обратите внимание, что это свойство будет удалено в предстоящем основном выпуске Ionic, и все компоненты формы будут использовать современную разметку формы. |
| Атрибут | наследие |
| Тип | логическое значение ｜ не определено |
| По умолчанию | не определено |
режим
| Описание | Режим определяет, какие стили платформы использовать. |
| Атрибут | режим |
| Тип | "ios" ｜ "md" |
| По умолчанию | undefined |
название элемента управления, который отправляется вместе с данными формы.
Имя Стропа 0009 this. inputId 
inputId значение
| Описание | Стоимость радио. |
| Атрибут | значение |
| Тип | любой 9 0009 |
| По умолчанию | не определено |
| Имя | Описание |
|---|---|
ionBlur | Испускается, когда переключатель теряет фокус. |
ionFocus | Испускается, когда переключатель находится в фокусе. |
Для этого компонента нет общедоступных методов.
| Название | Описание |
|---|---|
контейнер | Контейнер для радиометки. |
метка | Галочка или точка, используемые для обозначения отмеченного состояния. |