Кнопки иконка: Иконки кнопки — 120,871 бесплатных иконок

Разное 

Иконки Jquery Мобильные кнопки

w3big.com

Latest web development tutorials

Предыдущая: JQuery Mobile Button

Далее: JQuery Mobile панель инструментов

JQuery Mobile предоставляет набор кнопок позволяет выглядеть более желательным значок.



Кнопка для добавления иконки к JQuery Mobile

Мы можем использовать UI-значок класса, чтобы добавить значок на кнопку, и кнопку можно установить с помощью указанного класса.

<a href="#anylink">Search</a>

Примечание: На другие кнопки способом, например в виде списка или виде кнопок использовать атрибут-значок данных. В следующем разделе мы представим конкретный.

Ниже перечислены некоторые из доступных значков JQuery Mobile обеспечивает:

класс Button описание кнопка примеров
UI-значок стрелка-л Стрелка влево пробовать
UI-значок стрелка-р стрелка вправо пробовать
UI-значок-инфо информация пробовать
UI-значок-удалить удалять пробовать
UI-значок-обратно отбой пробовать
UI-значок аудио динамик пробовать
Пользовательский интерфейс-значок блокировки Навесной замок пробовать
UI-значок-поиска поиск пробовать
UI-значок-оповещения предупреждение пробовать
UI-значок сетки меш пробовать
UI-значок-хозяева дома пробовать

Для полного справочного руководства для всех кнопок значков JQuery Mobile, посетите наш JQuery Mobile значок Reference Manual .

значок Расположение

Кроме того, можно указать значок, расположенную кнопку, какую позицию в: верхний (вверху), с правой стороны (справа), внизу (внизу), левый (слева).

Пожалуйста, используйте Ui-БТН-значок атрибут, чтобы указать местоположение:

Иконка Расположение:

<a href=»#anylink»> топ </a>
<a href=»#anylink»> правая сторона </a>
<a href=»#anylink»> дно </a>
<a href=»#anylink»> левая сторона </a>

Попробуйте »


Если вы не указать расположение изображения кнопки не будет отображаться значок.

Показывать только значок

Если вы хотите, чтобы отобразить значок, вы можете использовать «notext»:

Пример:

<a href=»#anylink»> Поиск </a>

Попробуйте »

Удалить круг

По умолчанию все значки имеют серый круг. Если вам не нужен, вы можете использовать категорию «-nodisc-значок уй» элемент:

примеров

<a href=»#anylink»> использование круг (по умолчанию) </a>
<a href=»#anylink»> удалить круг </a>

Попробуйте »

Черный, белая кнопка

По умолчанию все иконки белые. Если вам нужно изменить цвет значка черного цвета, вы можете добавить «UI-Alt-значок» в элементах:

примеров

<a href=»#anylink»> белый </a>
<a href=»#anylink»> черный </a>

Попробуйте »

Другие примеры

Добавить «UI-nodisc-значок» класс контейнера

Пример «UI-nodisc-значок» класса.

Добавить «UI-Alt-значок» класс контейнера
Пример «UI-Alt-значок» класса.

Предыдущая: JQuery Mobile Button

Далее: JQuery Mobile панель инструментов

w3big.com | HTML курс | Web курс | Web Tutorial

Изменение иконки кнопки Python — Stack Overflow на русском

Как изменить состояние кнопки? (кнопка — иконка=картинка, чтобы при нажатии изменялась иконка кнопки). В данном примере при нажатии изменяется текст кнопки.

from tkinter import *
def button1 (event, button):
    if button == "OFF":
        btn1 ["text"] = "ON"
    else:
        btn1 ["text"] = "OFF"
...
btn = Button(root, text="OFF", width=2, height=1)
btn.grid(column=0, row=1)
btn.bind("<Button-1>, lambda event:button1(event, btn1["text"]))
....
root=Tk()
root.title("1")
root.geometry('500x500')
  • python
  • python-3.x
  • tkinter

2

Получилось вот так

from tkinter import *
from PIL import Image, ImageTk
win = Tk()
img_name = 'pic.png'       #Ваша картинка
img_name1 = 'pic1.png'     #Ваша вторая картинка
img1 = Image.open(img_name)
img_photo1 = ImageTk.PhotoImage(img1)
img2 = Image.open(img_name1)
img_photo2 = ImageTk.PhotoImage(img2)
pic = 0
def button1 ():
    global pic
    if pic == 0:
        btn.configure(image = img_photo2)
        pic = 1
    elif pic == 1:
        btn.configure(image = img_photo1)
        pic = 0
btn = Button(win, image = img_photo1, command = lambda: button1())
btn.
 
 grid(column=0, row=1)
win.mainloop()

Это должно сработать

from tkinter import *
from PIL import Image, ImageTk
import os
win = Tk()
img_name = os.path.dirname(os.path.abspath(__file__))+'/pic.png'       #Ваша картинка
img_name1 = os.path.dirname(os.path.abspath(__file__))+'/pic1.png'     #Ваша вторая картинка
img = Image.open(img_name)
img_photo = ImageTk.PhotoImage(img)
pic = 0
def button1 ():
    global pic
    if pic == 0:
        img = Image.open(img_name)
        pic = 1
    elif pic == 1:
        img = Image.open(img_name1)
        pic = 0
        print (pic)
    img_photo = ImageTk.PhotoImage(img)
    btn.configure(image = img_photo)
btn = Button(win, image = img_photo, width=100, height=100, command = lambda: button1())
btn.grid(column=0, row=1)
win.mainloop()

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как создать кнопки со значками

❮ Назад Далее ❯

Узнайте, как создавать кнопки со значками с помощью CSS.

Кнопки со значками:

Кнопки со значками с текстом:

Попробуйте сами »

Шаг 1) Добавьте HTML:

Добавьте библиотеку значков, например шрифт awesome, и добавьте значки к кнопкам HTML:

Пример



Значок кнопки:





Кнопки-значки с текстом:



<кнопка> Меню


Шаг 2) Добавьте CSS:

Пример

/* Кнопки стиля */
. btn {
  background-color: DodgerBlue; /* Синий фон */
граница: нет; /* Удалить границы */
  color: white; /* Белый текст */
  отступ: 12 пикселей 16 пикселей; /* Немного заполнения */

размер шрифта: 16px; /* Установить размер шрифта */
  cursor: pointer; /* Указатель мыши при наведении */
}

/* Темный фон при наведении мыши */
.btn:hover {
  background-color: Королевский синий;
}

Попробуйте сами »

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

Перейдите к нашему учебному пособию по кнопкам CSS, чтобы узнать больше о том, как стилизовать кнопки.

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9003
015 Основные ссылки HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference

PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


1 Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

API IconButton — Материал пользовательского интерфейса

Редактировать эту страницу

Документация по API для компонента React IconButton. Узнайте о доступных реквизитах и ​​CSS API.

Импорт 

 импорт IconButton из '@mui/material/IconButton';
// или же
импортировать { IconButton } из '@mui/material';

Вы можете узнать о разнице, прочитав это руководство по минимизации размера пакета.

См. раздел документации «Значки». относительно доступных вариантов значков.

Имя компонента

Имя MuiIconButton можно использовать при предоставлении реквизитов по умолчанию или переопределений стиля в теме.

Реквизиты

Реквизиты компонента ButtonBase также доступны.

Имя Тип По умолчанию Описание
Дети NODE
Дети NODE
.

классы объект

Переопределить или расширить стили, примененные к компоненту. Дополнительные сведения см. в разделе CSS API ниже.

цвет «наследовать»
| ‘по умолчанию’
| «первичный»
| «вторичный»
| ‘ошибка’
| ‘информация’
| «успех»
| ‘предупреждение’
| string		 ‘по умолчанию’

Цвет компонента. Он поддерживает как стандартные, так и пользовательские цвета темы, которые можно добавить, как показано в руководстве по настройке палитры.

disabled bool false

Если true , компонент отключен.

disableFocusRipple bool false

Если true , пульсация фокуса клавиатуры отключена.

disableRipple bool false

Если true , эффект ряби отключен.
⚠️ Без пульсации по умолчанию нет стиля для :focus-visible. Обязательно выделите элемент, применив отдельные стили с помощью .Mui-focusVisible класс.

край «конец»
| ‘старт’
| false		 false

Если задано, использует отрицательное поле, чтобы противодействовать отступу с одной стороны (это часто полезно для выравнивания левой или правой стороны значка с содержимым выше или ниже, не нарушая размер и форму границы) .

размер «маленький»
| ‘средний’
| ‘большой’
| строка		 ‘средний’

Размер компонента. маленький эквивалентен плотному стилю пуговиц.

sx Array | объект
| логический>
| функция
| object

Системная поддержка, которая позволяет определять системные переопределения, а также дополнительные стили CSS. См. страницу `sx` для более подробной информации.

ref пересылается в корневой элемент.

Наследство

Хотя это явно не задокументировано выше, реквизиты компонента ButtonBase также доступны в IconButton. Вы можете воспользоваться этим для нацеливания на вложенные компоненты.

CSS

Наименование правила		 Глобальный класс Описание
ROOT.MULTONBUT-ALLYTTTONBOTMOLTTONBOTMOLTTONBOTMOLTTONBOTMOLTTONBOTMOLTTONBRIED-APLIDELINBOTMOLTONBOT.
EdgeStart .MuiIconButton-edgeStart Стили применяются к корневому элементу, если edge="start" .
edgeEnd .MuiIconButton-edgeEnd Стили применяются к корневому элементу, если edge="end" .
colorInherit .MuiIconButton-colorInherit Стили применяются к корневому элементу, если color="inherit" .
colorPrimary .MuiIconButton-colorPrimary Стили применяются к корневому элементу, если цвет = "основной" .
colorSecondary .MuiIconButton-colorSecondary Стили применяются к корневому элементу, если color="secondary" .
disabled .Mui-disabled Класс состояния применяется к корневому элементу, если disabled={true} .
sizeSmall .MuiIconButton-sizeSmall Стили применяются к корневому элементу, если size="small" .
sizeMedium .MuiIconButton-sizeMedium Стили применяются к корневому элементу, если size="medium" .
sizeLarge .MuiIconButton-sizeLarge Стили применяются к корневому элементу, если size="large" .

Вы можете переопределить стиль компонента, используя один из следующих параметров настройки:

  • С глобальным именем класса.

    No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *