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.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.
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.
<.keyboard>Ctrl + C</.keyboard> <.keyboard color="dark">Ctrl + C</.keyboard> <.keyboard color="white">Ctrl + C</.keyboard> <.keyboard color="info">Ctrl + C</.keyboard> <.keyboard color="success">Ctrl + C</.keyboard> <.keyboard color="warning">Ctrl + C</.keyboard> <.keyboard color="danger">Ctrl + C</.keyboard> <.keyboard color="silver">Ctrl + C</.keyboard> <.keyboard color="misc">Ctrl + C</.keyboard> <.keyboard color="dawn">Ctrl + C</.keyboard> <.keyboard color="primary">Ctrl + C</.keyboard> <.keyboard 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.
<.keyboard variant="outline">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.
<.keyboard variant="shadow">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.
<.keyboard variant="bordered">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.
<.keyboard variant="transparent">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.
<.keyboard variant="gradient">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.
<.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.
<.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 Wight prop
The
font_wight
: 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.
<.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-silver">silver</.keyboard> <.keyboard font_weight="font-black">Black</.keyboard>