Фон: по умолчанию #FFFFFF, можно использовать 16-ричное и rgba.

badge-config: объект. Конфигурация значка, подробная конфигурация описана в официальной документации.

disabled: логическое значение. Конфигурация отключения значка, по умолчанию false.

dataClick: любой. Привязка данных к пользовательскому событию клика, по умолчанию null.

Пример кода:

export default {
    
    props: {
        // Имя значка
        name: {
            default: ''
        },
        // Префикс стиля значка
        classPrefix: {
            default: 'hos-icon'
        },
        // Размер значка
        size: {
            default: 24,
        },
        // Цвет значка
        color: {
            default: "#333333"
        },
        // Цвет фона значка
        backgroundColor: {
            default: "#ffffff"
        },
        // Конфигурация значка
        badgeConfig: {
            default: {
                config: {
                    badgeColor: "#0a59f7",
                    textColor: "#ffffff",
                },
                placement: "rightTop",
                count: 0,
                maxcount: 99,
                visible: false,
                label: "",
            }
        },
        // Отключение значка
        disabled: {
            default: false
        },
        // Параметр метода клика
        dataClick: {
            default:
        }
    }
}

Events

Пример кода:

HTML-файл, компонент значка с привязкой события клика и передачей параметра:

<icon name="fail" size="48" onclick="iconClick" data-click="点击fail图标" ></icon>

JS-файл, получение параметра detail в методе iconClick:

iconClick(data) {
    console.log("iconClick");
    console.log(data.detail);
}

Результат выполнения:  

Примечания

1. Можно использовать значки, передавая все свойства badge как объект с именем badge-config. Этот подход основан на официальном компоненте badge.

2. Можно рисовать изображения, задавая путь к изображению в свойстве name. Путь должен быть абсолютным или облачным, нельзя использовать относительные пути, начинающиеся с «./» или «../». Кроме того, размер изображения должен соответствовать размеру значка (size), иначе изображение может быть нарисовано не полностью. В официальной библиотеке есть компонент image, но его функциональность ограничена.

3. Хотя цвет значка можно сделать прозрачным, это не рекомендуется, так как прозрачность может привести к значительным различиям между ожидаемым и фактическим результатом рисования некоторых значков.

4. Форма значков основана на популярных формах значков, и все значки рисуются с помощью canvas. API, используемые для рисования, являются официальными API пользовательского интерфейса Harmony JS.

5. Рисование значков осуществляется с использованием canvas, хотя в некоторых деталях они могут уступать векторным значкам по чёткости, эта библиотека теоретически способна реализовать любые значки. Если у вас есть потребности или новые значки для рисования, пожалуйста, оставьте комментарий. Спасибо.

6. На данный момент создано более 230 значков, что соответствует основному плану. Библиотека будет продолжать обновляться, следите за обновлениями.

Информация о лицензии и авторских правах

OpenHarmony-JS-Icon распространяется под лицензией Apache License, version 2.0.