| icon | tags | |
|---|---|---|
diamond |
|
Аналогично Badge, компонент "Кнопка" использует ту же синтаксическую структуру, что и гиперссылка, но с префиксом !button.
||| Demo !button Кнопка
Normal link ||| Source
[!button Кнопка](button.md)
[Normal link](button.md)|||
[!button variant="primary" text="Основной"]| Вариант | Пример |
|---|---|
primary (default) |
[!button variant="primary" text="Основной"] |
secondary |
[!button variant="secondary" text="Второстепенный"] |
success |
[!button variant="success" text="Успех"] |
danger |
[!button variant="danger" text="Опасность"] |
warning |
[!button variant="warning" text="Предупреждение"] |
info |
[!button variant="info" text="Информация"] |
light |
[!button variant="light" text="Светлый"] |
dark |
[!button variant="dark" text="Темный"] |
ghost |
[!button variant="ghost" text="Прозрачный"] |
contrast |
[!button variant="contrast" text="Контрастный"] |
[!button text="По умолчанию"]
[!button corners="square" text="Квадратные"]
[!button corners="pill" text="Закругленные"]| Размер | Пример |
|---|---|
round (default) |
[!button text="По умолчанию"] |
square |
[!button corners="square" text="Квадратные"] |
pill |
[!button corners="pill" text="Закругленные"] |
[!button size="m" text="Средний"]| Размер | Пример |
|---|---|
xs |
[!button size="xs" text="Очень маленький"] |
s |
[!button size="s" text="Маленький"] |
m (default) |
[!button size="m" text="Средний"] |
l |
[!button size="l" text="Большой"] |
xl |
[!button size="xl" text="Очень большой"] |
2xl |
[!button size="2xl" text="Очень-очень большой"] |
3xl |
[!button size="3xl" text="Очень-очень-очень большой"] |
Устанавливает атрибут target для кнопки и указывает, в каком окне или вкладке открывать ссылку.
!button target="blank" text="Docsinum"
[!button target="blank" text="Docsinum"](https://retype.com/)Если target не задан, ссылка будет открываться в текущей вкладке.
Значение target может быть любым, хотя blank является распространенным и откроет ссылку в новой вкладке. Retype автоматически преобразует значение blank в _blank, что является фактическим значением, требуемым браузером для указания открытия гиперссылки в новой вкладке.
Существуют несколько других значений, которые могут быть предварительно префиксированы символом _, включая self, parent и top. В таблице приведены некоторые распространенные сценарии и соглашение об именовании, используемое Retype для нормализации значений target.
Значение конфигурации target |
Значение времени выполнения target |
|---|---|
blank |
_blank |
parent |
_parent |
top |
_top |
self |
_self |
news1 |
news1 |
nEWs2 |
news2 |
recent NEWS |
recent-news |
См. также настройку links.target.
Октиконы can be used as an icon by settiing the icon property with the name of the Октиконы.
Октиконы можно использовать как иконку, установив свойство icon с названием Октиконы
[!button variant="info" icon="person" text="Пользователь"]
[!button variant="primary" icon="paper-airplane" iconAlign="right" text="Отправитель"][!button variant="info" icon="person" text="Пользователь" margin="0 8 0 0"] [!button variant="primary" icon="paper-airplane" iconAlign="right" text="Отправитель"]
Эмодзи :shortcodes: могут быть использованы в качестве иконки. Пожалуйста, посмотрите Mojee для полного списка поддерживаемых сокращений эмодзи.
[!button variant="light" icon=":heart:" text="Нравится"]
[!button variant="info" icon=":rocket:" iconAlign="right" text="Ракета"][!button variant="light" icon=":heart:" text="Нравится" margin="0 8 0 0"] [!button variant="info" icon=":rocket:" iconAlign="right" text="Ракета"]
Любой файл изображения может быть использован в качестве icon.
[!button icon="../static/retype-icon.svg"][!button icon="../static/retype-icon.svg"]
icon также может быть установлен с помощью встроенного элемента <svg>
[!button icon="<svg width="24" height="24"><path fill-rule="evenodd" d="M12 16.5a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm0 1.5a6 6 0 100-12 6 6 0 000 12z"></path></svg>" text="Visit website"](button.md)