Keyboard
v0.0.10
mix mishka.ui.gen.component keyboard
Overview of the Phoenix and LiveView Keyboard Component
The Mishka Chelekom keyboard component is a Phoenix LiveView component that allows developers to create dynamic and customizable keyboard elements, perfect for displaying keyboard shortcuts or commands within applications. It offers flexibility in layout, allowing for easy adjustment of size, color, and rounded borders, ensuring a clean and professional appearance.
This Phoenix LiveView component also supports adding text, icons, and custom content, making it ideal for enhancing the clarity and visual appeal of key inputs. With its responsive design and ease of use, this keyboard component improves user interaction and overall experience.
Base Variant
Base Variant
<.keyboard>Ctrl + D</.keyboard>Default Variant
The default style of the Mishka Chelekom keyboard applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles.
Default Variant
<.keyboard variant="default" color="natural">Ctrl + C</.keyboard>
<.keyboard variant="default" color="dark">Ctrl + C</.keyboard>
<.keyboard variant="default" color="white">Ctrl + C</.keyboard>
<.keyboard variant="default" color="info">Ctrl + C</.keyboard>
<.keyboard variant="default" color="success">Ctrl + C</.keyboard>
<.keyboard variant="default" color="warning">Ctrl + C</.keyboard>
<.keyboard variant="default" color="danger">Ctrl + C</.keyboard>
<.keyboard variant="default" color="silver">Ctrl + C</.keyboard>
<.keyboard variant="default" color="misc">Ctrl + C</.keyboard>
<.keyboard variant="default" color="dawn">Ctrl + C</.keyboard>
<.keyboard variant="default" color="primary">Ctrl + C</.keyboard>
<.keyboard variant="default" color="secondary">Ctrl + C</.keyboard>Outline Variant
The outline style of the Mishka Chelekom keyboard features a border. Using a single setting, you can choose from various color variants to suit your design needs.
Outline Variant
<.keyboard variant="outline" color="natural">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="info">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="success">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="warning">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="danger">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="silver">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="misc">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="dawn">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="primary">Ctrl + K</.keyboard>
<.keyboard variant="outline" color="secondary">Ctrl + K</.keyboard>Shadow Variant
The shadow variant of the Mishka Chelekom keyboard is similar to the default variant, but it also includes a shadow.
Shadow Variant
<.keyboard variant="shadow" color="natural">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="info">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="success">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="warning">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="danger">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="silver">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="misc">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="dawn">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="primary">Ctrl + V</.keyboard>
<.keyboard variant="shadow" color="secondary">Ctrl + V</.keyboard>bordered Variant
The Bordered variant of the Mishka Chelekom keyboard has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
bordered Variant
<.keyboard variant="bordered" color="natural">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="dark">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="white">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="info">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="success">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="warning">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="danger">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="silver">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="misc">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="dawn">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="primary">Ctrl + A</.keyboard>
<.keyboard variant="bordered" color="secondary">Ctrl + A</.keyboard>Transparent Variant
The transparent variant of the Mishka Chelekom keyboard is similar to the default variant, but without border and background color.
Transparent Variant
<.keyboard variant="transparent" color="natural">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="info">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="success">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="warning">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="danger">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="silver">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="misc">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="dawn">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="primary">Ctrl + D</.keyboard>
<.keyboard variant="transparent" color="secondary">Ctrl + D</.keyboard>gradient Variant
The gradient variant of the Mishka Chelekom keyboard has gradients in various colors.
gradient Variant
<.keyboard variant="gradient" color="natural">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="info">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="success">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="warning">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="danger">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="silver">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="misc">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="dawn">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="primary">Ctrl + D</.keyboard>
<.keyboard variant="gradient" color="secondary">Ctrl + D</.keyboard>Rounded prop
The rounded prop offers values like extra_small, small, medium, large, extra_large, full, and none. These values control the border radius, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.
Rounded prop
<.keyboard rounded="extra_small">Ctrl + K</.keyboard>
<.keyboard rounded="small">Ctrl + K</.keyboard>
<.keyboard rounded="medium">Ctrl + K</.keyboard>
<.keyboard rounded="large">Ctrl + K</.keyboard>
<.keyboard rounded="extra_large">Ctrl + K</.keyboard>
<.keyboard rounded="full">Ctrl + K</.keyboard>
<.keyboard rounded="none">Ctrl + K</.keyboard>Size prop
The size prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values control text size within the keyboard component.
Size prop
<.keyboard size="extra_small" color="danger">Ctrl + C</.keyboard>
<.keyboard size="small" color="danger">Ctrl + C</.keyboard>
<.keyboard size="medium" color="danger">Ctrl + C</.keyboard>
<.keyboard size="large" color="danger">Ctrl + C</.keyboard>
<.keyboard size="extra_large" color="danger">Ctrl + C</.keyboard>Font Weight prop
The font_weight: This prop controls the weight (thickness or boldness) of text, utilizing Tailwind's font-weight classes such as font-light, font-bold, or font-semibold. You can easily adjust the text weight to match your design needs, whether you need subtle emphasis or a bolder look.
Font Weight prop
<.keyboard font_weight="font-bold">Bold</.keyboard>
<.keyboard font_weight="font-semibold">Semibold</.keyboard>
<.keyboard font_weight="font-medium">Medium</.keyboard>
<.keyboard font_weight="font-light">Light</.keyboard>
<.keyboard font_weight="font-black">Black</.keyboard>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
variant
|
string
|
base
|
defaultoutlinetransparentshadowborderedgradientbase
| No | Determines the style |
color
|
string
|
natural
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
border
|
string
|
extra_small
| — | No | Determines border style |
size
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
rounded
|
string
|
small
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
class
|
any
| — | — | No | Custom CSS class for additional styling |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | Inner block that renders HEEx content |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultoutlinetransparentshadowborderedgradientbase
|
--color
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component keyboard