Tabs
| Install | yarn add @diallink-corp/convergo-react-tabs |
|---|---|
| Version | 4.1.2 |
| Usage | import {Tabs} from '@diallink-corp/convergo-react-tabs' |
Static Tabs
The Tabs component can either render static or dynamic collections of tabs. For simple tabs components that need to render a list of pre-defined tabs a static collection should be used. Static collections cannot be changed over time.
function Example() {
return (
<Tabs
name="Tabs"
aria-label="What is your favorite fruit?"
defaultSelectedKey="tab-3"
>
<Tab key="tab-1" textValue="What is DialLink">
<Paragraph level={1}>
DialLink is a leading technology vendor that provides Sales Force
Automation (SFA) and Unified Communications-as-a-Service (UCaaS)
solutions. Our goal is to make every product we deliver to the market
not only valuable to a wide range of organizations, but a joy to use.
Our SaaS products empower organizations of all sizes to orchestrate
their sales processes, reach clients faster, serve them better, and
enable their mobile workforce to function efficiently as a unified
team — all while reducing cost, crushing business complexity, and
simplifying customer journeys. Built from the ground up based on
cutting-edge computing services from Amazon, DialLink solutions are
easy-to-use and integrate readily with each other and with tools from
other vendors, ensuring quick time to value and high return on
investment. Designed with our customers’ needs in mind, our sales CRM,
business phone system, and other products cover multiple use cases,
offer a wide range of features for truly seamless collaboration and
efficient remote work, and automate cumbersome and error-prone
business tasks. DialLink is headquarted in Miami Beach, Florida and
operates since 2018. As an international, all-remote team of
professionals, we are committed to continuous delivery of innovations
and continuous improvement. We constantly expand our technological
expertise, hire and invest in top-notch professionals, and use the
most up-to-date technology stack.
</Paragraph>
</Tab>
<Tab key="tab-2" textValue="Mission">
<Paragraph level={1}>
It is DialLink’s mission to help small and medium-sized organizations
achieve greater business results and more rapid growth without
associated high expenses and loss of time. We aim to enable
organizations meet their wide range of needs without multiplying
application silos across their IT landscapes by providing them
cutting-edge and cost-effective products that integrate readily with
each other and other software solutions. We strive hard to help
companies without enterprise budgets to get everything they need in a
single package of business applications or cover their specific needs
with selected solutions, without sacrificing on quality or having to
change the working processes.
</Paragraph>
</Tab>
<Tab key="tab-3" textValue="Vision">
<Paragraph level={1}>
Many organizations using business software are often forced to put up
with one of the extremes – either deal with insufficient or
inconvenient functionality at an affordable price, or spend a fortune
on advanced (and not always easy-to-use) features, or try to create
their own software, wasting both money and time. Our vision is that
this paradigm should be a thing of the past, and modern businesses
should have an easy access to tools that are as effective and
enjoyable to work with as they are versatile, cost-effective, and
applicable in different business contexts and under various loads. In
a modern world in which IT solutions are presented in almost all areas
of life, we believe that IT products should be simple, practical,
reliable, elegant and pleasant to use. They should easily integrate
and interact with software from other vendors, and this interaction
should be as simple as plugging into a power outlet. Products need to
be smart and scalable, secure and powerful – and that's what we strive
for: to enable businesses to forget about compromises and instead get
the best software solutions at the right price.
</Paragraph>
</Tab>
</Tabs>
);
}
function Example() {
return (
<Tabs
name="Tabs"
aria-label="What is your favorite fruit?"
defaultSelectedKey="tab-3"
>
<Tab key="tab-1" textValue="What is DialLink">
<Paragraph level={1}>
DialLink is a leading technology vendor that
provides Sales Force Automation (SFA) and Unified
Communications-as-a-Service (UCaaS) solutions. Our
goal is to make every product we deliver to the
market not only valuable to a wide range of
organizations, but a joy to use. Our SaaS products
empower organizations of all sizes to orchestrate
their sales processes, reach clients faster, serve
them better, and enable their mobile workforce to
function efficiently as a unified team — all while
reducing cost, crushing business complexity, and
simplifying customer journeys. Built from the
ground up based on cutting-edge computing services
from Amazon, DialLink solutions are easy-to-use
and integrate readily with each other and with
tools from other vendors, ensuring quick time to
value and high return on investment. Designed with
our customers’ needs in mind, our sales CRM,
business phone system, and other products cover
multiple use cases, offer a wide range of features
for truly seamless collaboration and efficient
remote work, and automate cumbersome and
error-prone business tasks. DialLink is
headquarted in Miami Beach, Florida and operates
since 2018. As an international, all-remote team
of professionals, we are committed to continuous
delivery of innovations and continuous
improvement. We constantly expand our
technological expertise, hire and invest in
top-notch professionals, and use the most
up-to-date technology stack.
</Paragraph>
</Tab>
<Tab key="tab-2" textValue="Mission">
<Paragraph level={1}>
It is DialLink’s mission to help small and
medium-sized organizations achieve greater
business results and more rapid growth without
associated high expenses and loss of time. We aim
to enable organizations meet their wide range of
needs without multiplying application silos across
their IT landscapes by providing them cutting-edge
and cost-effective products that integrate readily
with each other and other software solutions. We
strive hard to help companies without enterprise
budgets to get everything they need in a single
package of business applications or cover their
specific needs with selected solutions, without
sacrificing on quality or having to change the
working processes.
</Paragraph>
</Tab>
<Tab key="tab-3" textValue="Vision">
<Paragraph level={1}>
Many organizations using business software are
often forced to put up with one of the extremes –
either deal with insufficient or inconvenient
functionality at an affordable price, or spend a
fortune on advanced (and not always easy-to-use)
features, or try to create their own software,
wasting both money and time. Our vision is that
this paradigm should be a thing of the past, and
modern businesses should have an easy access to
tools that are as effective and enjoyable to work
with as they are versatile, cost-effective, and
applicable in different business contexts and
under various loads. In a modern world in which IT
solutions are presented in almost all areas of
life, we believe that IT products should be
simple, practical, reliable, elegant and pleasant
to use. They should easily integrate and interact
with software from other vendors, and this
interaction should be as simple as plugging into a
power outlet. Products need to be smart and
scalable, secure and powerful – and that's what we
strive for: to enable businesses to forget about
compromises and instead get the best software
solutions at the right price.
</Paragraph>
</Tab>
</Tabs>
);
}
function Example() {
return (
<Tabs
name="Tabs"
aria-label="What is your favorite fruit?"
defaultSelectedKey="tab-3"
>
<Tab
key="tab-1"
textValue="What is DialLink"
>
<Paragraph
level={1}
>
DialLink is a
leading
technology
vendor that
provides Sales
Force
Automation
(SFA) and
Unified
Communications-as-a-Service
(UCaaS)
solutions. Our
goal is to make
every product
we deliver to
the market not
only valuable
to a wide range
of
organizations,
but a joy to
use. Our SaaS
products
empower
organizations
of all sizes to
orchestrate
their sales
processes,
reach clients
faster, serve
them better,
and enable
their mobile
workforce to
function
efficiently as
a unified team
— all while
reducing cost,
crushing
business
complexity, and
simplifying
customer
journeys. Built
from the ground
up based on
cutting-edge
computing
services from
Amazon,
DialLink
solutions are
easy-to-use and
integrate
readily with
each other and
with tools from
other vendors,
ensuring quick
time to value
and high return
on investment.
Designed with
our customers’
needs in mind,
our sales CRM,
business phone
system, and
other products
cover multiple
use cases,
offer a wide
range of
features for
truly seamless
collaboration
and efficient
remote work,
and automate
cumbersome and
error-prone
business tasks.
DialLink is
headquarted in
Miami Beach,
Florida and
operates since
2018. As an
international,
all-remote team
of
professionals,
we are
committed to
continuous
delivery of
innovations and
continuous
improvement. We
constantly
expand our
technological
expertise, hire
and invest in
top-notch
professionals,
and use the
most up-to-date
technology
stack.
</Paragraph>
</Tab>
<Tab
key="tab-2"
textValue="Mission"
>
<Paragraph
level={1}
>
It is
DialLink’s
mission to help
small and
medium-sized
organizations
achieve greater
business
results and
more rapid
growth without
associated high
expenses and
loss of time.
We aim to
enable
organizations
meet their wide
range of needs
without
multiplying
application
silos across
their IT
landscapes by
providing them
cutting-edge
and
cost-effective
products that
integrate
readily with
each other and
other software
solutions. We
strive hard to
help companies
without
enterprise
budgets to get
everything they
need in a
single package
of business
applications or
cover their
specific needs
with selected
solutions,
without
sacrificing on
quality or
having to
change the
working
processes.
</Paragraph>
</Tab>
<Tab
key="tab-3"
textValue="Vision"
>
<Paragraph
level={1}
>
Many
organizations
using business
software are
often forced to
put up with one
of the extremes
– either deal
with
insufficient or
inconvenient
functionality
at an
affordable
price, or spend
a fortune on
advanced (and
not always
easy-to-use)
features, or
try to create
their own
software,
wasting both
money and time.
Our vision is
that this
paradigm should
be a thing of
the past, and
modern
businesses
should have an
easy access to
tools that are
as effective
and enjoyable
to work with as
they are
versatile,
cost-effective,
and applicable
in different
business
contexts and
under various
loads. In a
modern world in
which IT
solutions are
presented in
almost all
areas of life,
we believe that
IT products
should be
simple,
practical,
reliable,
elegant and
pleasant to
use. They
should easily
integrate and
interact with
software from
other vendors,
and this
interaction
should be as
simple as
plugging into a
power outlet.
Products need
to be smart and
scalable,
secure and
powerful – and
that's what we
strive for: to
enable
businesses to
forget about
compromises and
instead get the
best software
solutions at
the right
price.
</Paragraph>
</Tab>
</Tabs>
);
}
Dynamic Collection
For data that is non-static, such as data fetched from a backend, the Tabs component supports dynamic collections. Dynamic collections support adding, updating and removing of the data that is being rendered.
function Example() {
const tabs = [
{ key: 'tab-1', title: 'What is DialLink' },
{ key: 'tab-2', title: 'Mission' },
{ key: 'tab-3', title: 'Vision' }
];
return (
<Tabs
name="Tabs"
aria-label="What is your favorite fruit?"
items={tabs}
defaultSelectedKey="tab-2"
>
{({ key, title }) => (
<Tab key={key} textValue={title}>
<Switcher case={key}>
<Paragraph key="tab-1" level={1}>
DialLink is a leading technology vendor that provides Sales Force
Automation (SFA) and Unified Communications-as-a-Service (UCaaS)
solutions. Our goal is to make every product we deliver to the
market not only valuable to a wide range of organizations, but a
joy to use. Our SaaS products empower organizations of all sizes
to orchestrate their sales processes, reach clients faster, serve
them better, and enable their mobile workforce to function
efficiently as a unified team — all while reducing cost, crushing
business complexity, and simplifying customer journeys. Built from
the ground up based on cutting-edge computing services from
Amazon, DialLink solutions are easy-to-use and integrate readily
with each other and with tools from other vendors, ensuring quick
time to value and high return on investment. Designed with our
customers’ needs in mind, our sales CRM, business phone system,
and other products cover multiple use cases, offer a wide range of
features for truly seamless collaboration and efficient remote
work, and automate cumbersome and error-prone business tasks.
DialLink is headquarted in Miami Beach, Florida and operates since
2018. As an international, all-remote team of professionals, we
are committed to continuous delivery of innovations and continuous
improvement. We constantly expand our technological expertise,
hire and invest in top-notch professionals, and use the most
up-to-date technology stack.
</Paragraph>
<Paragraph key="tab-2" level={1}>
It is DialLink’s mission to help small and medium-sized
organizations achieve greater business results and more rapid
growth without associated high expenses and loss of time. We aim
to enable organizations meet their wide range of needs without
multiplying application silos across their IT landscapes by
providing them cutting-edge and cost-effective products that
integrate readily with each other and other software solutions. We
strive hard to help companies without enterprise budgets to get
everything they need in a single package of business applications
or cover their specific needs with selected solutions, without
sacrificing on quality or having to change the working processes.
</Paragraph>
<Paragraph key="tab-3" level={1}>
Many organizations using business software are often forced to put
up with one of the extremes – either deal with insufficient or
inconvenient functionality at an affordable price, or spend a
fortune on advanced (and not always easy-to-use) features, or try
to create their own software, wasting both money and time. Our
vision is that this paradigm should be a thing of the past, and
modern businesses should have an easy access to tools that are as
effective and enjoyable to work with as they are versatile,
cost-effective, and applicable in different business contexts and
under various loads. In a modern world in which IT solutions are
presented in almost all areas of life, we believe that IT products
should be simple, practical, reliable, elegant and pleasant to
use. They should easily integrate and interact with software from
other vendors, and this interaction should be as simple as
plugging into a power outlet. Products need to be smart and
scalable, secure and powerful – and that's what we strive for: to
enable businesses to forget about compromises and instead get the
best software solutions at the right price.
</Paragraph>
</Switcher>
</Tab>
)}
</Tabs>
);
}
function Example() {
const tabs = [
{ key: 'tab-1', title: 'What is DialLink' },
{ key: 'tab-2', title: 'Mission' },
{ key: 'tab-3', title: 'Vision' }
];
return (
<Tabs
name="Tabs"
aria-label="What is your favorite fruit?"
items={tabs}
defaultSelectedKey="tab-2"
>
{({ key, title }) => (
<Tab key={key} textValue={title}>
<Switcher case={key}>
<Paragraph key="tab-1" level={1}>
DialLink is a leading technology vendor that
provides Sales Force Automation (SFA) and
Unified Communications-as-a-Service (UCaaS)
solutions. Our goal is to make every product
we deliver to the market not only valuable to
a wide range of organizations, but a joy to
use. Our SaaS products empower organizations
of all sizes to orchestrate their sales
processes, reach clients faster, serve them
better, and enable their mobile workforce to
function efficiently as a unified team — all
while reducing cost, crushing business
complexity, and simplifying customer journeys.
Built from the ground up based on cutting-edge
computing services from Amazon, DialLink
solutions are easy-to-use and integrate
readily with each other and with tools from
other vendors, ensuring quick time to value
and high return on investment. Designed with
our customers’ needs in mind, our sales CRM,
business phone system, and other products
cover multiple use cases, offer a wide range
of features for truly seamless collaboration
and efficient remote work, and automate
cumbersome and error-prone business tasks.
DialLink is headquarted in Miami Beach,
Florida and operates since 2018. As an
international, all-remote team of
professionals, we are committed to continuous
delivery of innovations and continuous
improvement. We constantly expand our
technological expertise, hire and invest in
top-notch professionals, and use the most
up-to-date technology stack.
</Paragraph>
<Paragraph key="tab-2" level={1}>
It is DialLink’s mission to help small and
medium-sized organizations achieve greater
business results and more rapid growth without
associated high expenses and loss of time. We
aim to enable organizations meet their wide
range of needs without multiplying application
silos across their IT landscapes by providing
them cutting-edge and cost-effective products
that integrate readily with each other and
other software solutions. We strive hard to
help companies without enterprise budgets to
get everything they need in a single package
of business applications or cover their
specific needs with selected solutions,
without sacrificing on quality or having to
change the working processes.
</Paragraph>
<Paragraph key="tab-3" level={1}>
Many organizations using business software are
often forced to put up with one of the
extremes – either deal with insufficient or
inconvenient functionality at an affordable
price, or spend a fortune on advanced (and not
always easy-to-use) features, or try to create
their own software, wasting both money and
time. Our vision is that this paradigm should
be a thing of the past, and modern businesses
should have an easy access to tools that are
as effective and enjoyable to work with as
they are versatile, cost-effective, and
applicable in different business contexts and
under various loads. In a modern world in
which IT solutions are presented in almost all
areas of life, we believe that IT products
should be simple, practical, reliable, elegant
and pleasant to use. They should easily
integrate and interact with software from
other vendors, and this interaction should be
as simple as plugging into a power outlet.
Products need to be smart and scalable, secure
and powerful – and that's what we strive for:
to enable businesses to forget about
compromises and instead get the best software
solutions at the right price.
</Paragraph>
</Switcher>
</Tab>
)}
</Tabs>
);
}
function Example() {
const tabs = [
{
key: 'tab-1',
title:
'What is DialLink'
},
{
key: 'tab-2',
title: 'Mission'
},
{
key: 'tab-3',
title: 'Vision'
}
];
return (
<Tabs
name="Tabs"
aria-label="What is your favorite fruit?"
items={tabs}
defaultSelectedKey="tab-2"
>
{(
{ key, title }
) => (
<Tab
key={key}
textValue={title}
>
<Switcher
case={key}
>
<Paragraph
key="tab-1"
level={1}
>
DialLink is
a leading
technology
vendor that
provides
Sales Force
Automation
(SFA) and
Unified
Communications-as-a-Service
(UCaaS)
solutions.
Our goal is
to make
every
product we
deliver to
the market
not only
valuable to
a wide
range of
organizations,
but a joy
to use. Our
SaaS
products
empower
organizations
of all
sizes to
orchestrate
their sales
processes,
reach
clients
faster,
serve them
better, and
enable
their
mobile
workforce
to function
efficiently
as a
unified
team — all
while
reducing
cost,
crushing
business
complexity,
and
simplifying
customer
journeys.
Built from
the ground
up based on
cutting-edge
computing
services
from
Amazon,
DialLink
solutions
are
easy-to-use
and
integrate
readily
with each
other and
with tools
from other
vendors,
ensuring
quick time
to value
and high
return on
investment.
Designed
with our
customers’
needs in
mind, our
sales CRM,
business
phone
system, and
other
products
cover
multiple
use cases,
offer a
wide range
of features
for truly
seamless
collaboration
and
efficient
remote
work, and
automate
cumbersome
and
error-prone
business
tasks.
DialLink is
headquarted
in Miami
Beach,
Florida and
operates
since 2018.
As an
international,
all-remote
team of
professionals,
we are
committed
to
continuous
delivery of
innovations
and
continuous
improvement.
We
constantly
expand our
technological
expertise,
hire and
invest in
top-notch
professionals,
and use the
most
up-to-date
technology
stack.
</Paragraph>
<Paragraph
key="tab-2"
level={1}
>
It is
DialLink’s
mission to
help small
and
medium-sized
organizations
achieve
greater
business
results and
more rapid
growth
without
associated
high
expenses
and loss of
time. We
aim to
enable
organizations
meet their
wide range
of needs
without
multiplying
application
silos
across
their IT
landscapes
by
providing
them
cutting-edge
and
cost-effective
products
that
integrate
readily
with each
other and
other
software
solutions.
We strive
hard to
help
companies
without
enterprise
budgets to
get
everything
they need
in a single
package of
business
applications
or cover
their
specific
needs with
selected
solutions,
without
sacrificing
on quality
or having
to change
the working
processes.
</Paragraph>
<Paragraph
key="tab-3"
level={1}
>
Many
organizations
using
business
software
are often
forced to
put up with
one of the
extremes –
either deal
with
insufficient
or
inconvenient
functionality
at an
affordable
price, or
spend a
fortune on
advanced
(and not
always
easy-to-use)
features,
or try to
create
their own
software,
wasting
both money
and time.
Our vision
is that
this
paradigm
should be a
thing of
the past,
and modern
businesses
should have
an easy
access to
tools that
are as
effective
and
enjoyable
to work
with as
they are
versatile,
cost-effective,
and
applicable
in
different
business
contexts
and under
various
loads. In a
modern
world in
which IT
solutions
are
presented
in almost
all areas
of life, we
believe
that IT
products
should be
simple,
practical,
reliable,
elegant and
pleasant to
use. They
should
easily
integrate
and
interact
with
software
from other
vendors,
and this
interaction
should be
as simple
as plugging
into a
power
outlet.
Products
need to be
smart and
scalable,
secure and
powerful –
and that's
what we
strive for:
to enable
businesses
to forget
about
compromises
and instead
get the
best
software
solutions
at the
right
price.
</Paragraph>
</Switcher>
</Tab>
)}
</Tabs>
);
}
Accessibility
In order to support internationalization, provide a localized string to the label or aria-label prop.