ОбзорДокументацияВойти
/
artyomsinyugin
/
yew-material
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность

yew-material

0

Описание

Library for Yew framework with google icons

90 KiB
README
Лицензия
В избранном0
Форки0

Языки

  • Rust100%
1
16
0
.cargo
2 года назад
images
2 года назад
src
2 года назад
Cargo.toml
2 года назад
LICENSE.txt
2 года назад
README.md
2 года назад
README.md

Yew Google Material

Please, open new issue on github if you notice any error or mistake!

yew-google-material
is a very simple crate to use some of google materials and
https://fonts.google.com/

Unfortunately a lot of crates with materials, icons for yew framework are depricated and use depricated javascript code.

Here I use only Rust code to add some design features for yew.

Now only buttons, text fields and icons are available.

Buttons and text fields are not the same as one in google material web, but very similar to them.

Icons

To use icons from

https://fonts.google.com/icons
you need to add some html inside

There are three types of icons. Add this if you want to use Outlined style of icons:

To use Rounded style of icons:

To use Sharp style of icons:

Then choose on of the icons in the catalog of https://fonts.google.com/icons, i.e. 'search', 'star', 'menu', etc. and see example below.

Examples

Note, you that you can animate icon attributes with transition. The default value is "unset", but for animation it is recomended to set "all 0.2s" or as you wish.

Or you can add an icon with default options:

Buttons

image

GButtonStyle::Elevated styled button with trailing icon

image

GButtonStyle::Filled styled button

image

GButtonStyle::Outlined styled button

image

GButtonStyle::Text styled button

image

GButtonStyle::Filled styled icon button

The key size attribute of button is

font_size
attribute. It bonds a lot of other sizes and has the default value 14px.

GButton has a lot of attributes (and you can make something similar to FAB button via them), but only

id
are required.

Attention! You must set

label
and/or use icon to make your button readable!

Examples

Also you can add icon with

has_icon
attribute. If so, you also need to set
icon_style
 attribute together with stylesheet inside
<head></head>
(see GIcon docs). If you need trailing icon use
trailing_icon
 with
true
 together with
has_icon
 attributes in GButton. To adjust icon parameters use
fill
,
wght
,
grade
,
opsz
 attributes as well as with GIcon.

Attention! The way to add icon in this version is different from v.0.0.7.

Attention! If you change icon size within button you can break the design. Probably then you need to adjust width and height. Do it with caution.

TextFields

image

Simple text input with GInputStyle::Filled style

image

GInputStyle::Outlined slyled input with leading icon and trailing button icon

The key size attribute of input field is

font_size
. It bonds a lot of other sizes of text field and has the default value 16px.

GTextInput has a lot of attributes, but only

id
, onchange and
label
 are required. Label here has the same role as placeholder. If you do not need label, add it with empty double quotes.

See the describtion of this attributes here:

https://material-web.dev/components/text-field/#api

Examples

Also you can add leading and trailing GIcons, change style, change Event to InputEvent and do many other things via attributes in this way:

If you need to add trailing button icon inside input field, instead of

GIcon
use
GButton
 inside
<GTextInput></GTextInput>
 with attributes:
has_icon
 (icon name from
fonts.google.com/icons
),
trailing_icon
 (
true
),
parent
 (
DependsOn::GTextInput
),
icon_style
 (Outlined, Rounded or Sharp)

Do not use

label
attribute for
GButton
 inside
GTextInput
!

If you need leading button icon element inside GTextInput, just remove

trailing_icon
attribute from GButton, add
has_leading_icon=true
 for
GTextInput
 and remove
has_trailing_icon=true
. Attentin! It is recomended to use
button_type
 attribute with
"button"
, or your button will be on its own inside
<form></form>
 element.

Versions

0.0.8

  • Now you can add icon button inside GTextInput.
  • Design of icon inside button was rewritten.
  • GTextInput margin fixed.

0.0.7

  • ReadMe fixed

0.0.5

  • GButton added
  • GTextInput height attribute added
  • Many of GTextInput attributes were renamed
  • GIcon size adjustment in GTextInput fixed

0.0.4

  • GTextInput added

0.0.3

  • Only icons available, ReadMe fixed